/* ═══ 19/10/2026 — VISUAL "JANELA" (o mesmo desenho que o dono aprovou no Tricôfio, nas cores da Renata)
   · menu lateral CLARO e flutuante (margem, cantos redondos, sombra); item ativo = cartão branco com risco marrom;
   · botão Início como cartão (casinha num círculo marrom; ativo = marrom sólido);
   · barra do topo flutuante, marrom sólido; o logo do menu na mesma cor;
   · blocos das telas flutuando com sombra mais funda;
   · fundo em degradê de cima (claro) para baixo (escuro).
   Tudo preso em .v-janela (classe no <body>): tirar a classe = volta o visual antigo. No celular/tablet (≤860 px)
   o menu é gaveta e a barra do topo encosta nas bordas, como antes. ═══ */

/* ── fundo ── */
.v-janela .app { background: linear-gradient(180deg, #f4eee9 0%, #e7dcd3 55%, #d3c2b5 100%); }
.v-janela .main-wrapper { background: transparent; }

/* ── menu lateral claro e flutuante ── */
.v-janela .sidebar { background: #f8f3ef; color: var(--brown-dd); margin: 10px 0 10px 10px; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(62, 39, 35, .32), 0 0 0 1px rgba(62, 39, 35, .07); }
.v-janela .sidebar-logo { background: var(--brown-d); border-bottom: 0; border-radius: 14px 14px 0 0; }
.v-janela .sidebar-logo:hover { background: var(--brown-dd); }
.v-janela .sidebar-item { color: var(--brown-dd); border-left-color: transparent; }
.v-janela .sidebar-item:hover { background: var(--nude-2); color: var(--brown-dd); }
.v-janela .sidebar-item.ativo { background: #fff; color: var(--brown-dd); font-weight: 700; border-left-color: var(--brown);
  box-shadow: inset 0 1px 0 var(--nude-2), inset 0 -1px 0 var(--nude-2); }
.v-janela .sidebar::-webkit-scrollbar { width: 6px; }
.v-janela .sidebar::-webkit-scrollbar-thumb { background: var(--taupe); border-radius: 3px; }

/* ── botão Início em cartão ── */
.v-janela .sidebar-item[data-view="inicio"] { margin: 4px 12px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--sand);
  padding: 9px 14px; gap: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(62, 39, 35, .14);
  transition: background .15s, box-shadow .15s, transform .15s; }
.v-janela .sidebar-item[data-view="inicio"] i { width: 34px; min-width: 34px; height: 34px; line-height: 34px; border-radius: 50%;
  background: var(--brown-d); font-size: 18px; display: grid; place-items: center; }
.v-janela .sidebar-item[data-view="inicio"]:hover { background: var(--nude); box-shadow: 0 8px 20px rgba(62, 39, 35, .2); transform: translateY(-1px); }
.v-janela .sidebar-item[data-view="inicio"].ativo { background: var(--brown-d); color: #fff; border-color: var(--brown-d); box-shadow: 0 8px 20px rgba(62, 39, 35, .3); }
.v-janela .sidebar-item[data-view="inicio"].ativo i { background: #fff; }

/* ── rodapé do menu (Novo agendamento / Ver meu site) no fundo claro ── */
.v-janela .sidebar-foot { border-top: 1px solid var(--nude-2); }
.v-janela .sidebar-item.novo { background: var(--brown); color: #fff; box-shadow: 0 6px 16px rgba(62, 39, 35, .25); }
.v-janela .sidebar-item.novo:hover { background: var(--brown-d); }
.v-janela .sidebar-item.site-link { color: var(--brown-d); border: 1px solid var(--sand); }
.v-janela .sidebar-item.site-link:hover { background: var(--nude-2); color: var(--brown-dd); }

/* ── menu recolhido (só ícones) ── */
.v-janela .app.recolhido .sidebar-item[data-view="inicio"] { margin: 6px 8px 10px; padding: 7px 0; justify-content: center; }

/* ── barra do topo flutuante, marrom sólido ── */
.v-janela .topbar { background: var(--brown-d); margin: 10px 10px 0 10px; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(62, 39, 35, .32), 0 0 0 1px rgba(62, 39, 35, .07); }

/* ── blocos das telas flutuando ── */
.v-janela .grade, .v-janela .dia-card, .v-janela .fin-card, .v-janela .kpi, .v-janela .cli-card, .v-janela .mes-card,
.v-janela .inicio-hoje, .v-janela .inicio-atalho { box-shadow: 0 10px 30px rgba(62, 39, 35, .24), 0 0 0 1px rgba(62, 39, 35, .05); }
.v-janela .dia-card:hover, .v-janela .inicio-atalho:hover { box-shadow: 0 16px 40px rgba(62, 39, 35, .34), 0 0 0 3px var(--sand); }
.v-janela .inicio { box-shadow: 0 14px 40px rgba(62, 39, 35, .3), 0 0 0 1px rgba(62, 39, 35, .07);
  min-height: calc(100vh - 60px - 10px - 40px); }   /* topo 60 + margem 10 + recheio 40: sem barra de rolagem */

/* ── as margens novas roubam ~20 px: itens do menu um pouco mais baixos (sem barra de rolagem no menu)
      e atalhos com respiro menor (os 6 continuam numa linha só) ── */
.v-janela .sidebar-nav { padding: 10px 0; }
.v-janela .sidebar-item { padding: 11px 20px; }
.v-janela .sidebar-foot { padding: 12px; }
.v-janela .inicio-atalhos { gap: 12px; padding: 24px 22px 16px; }

/* ── tela inicial: a frase saiu do topo e foi para o LADO ESQUERDO da hora; os atalhos sobem ── */
.inicio-base { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.inicio-base .inicio-frase { align-self: center; padding: 0; max-width: 240px; text-align: right; font-size: 26px; line-height: 1.15; }
.v-janela .inicio-atalhos { padding-top: 18px; }

/* ── celular/tablet: gaveta e barra encostadas nas bordas (como antes) ── */
@media (max-width: 860px) {
  .v-janela .sidebar { margin: 0; border-radius: 0; }
  .v-janela .sidebar-logo { border-radius: 0; }
  .v-janela .topbar { margin: 0; border-radius: 0; }
  .v-janela .inicio { min-height: calc(100vh - 88px); }
  .inicio-base { justify-content: center; gap: 16px; flex-wrap: wrap; }
  .inicio-base .inicio-frase { font-size: 19px; max-width: 150px; text-align: right; }
  .v-janela .inicio-atalhos { padding-top: 14px; }
}