/* Clareza — adições da aplicação real (o que o protótipo não precisou ter).
   Mesmos tokens de clareza.css; nada de cores, sombras ou fontes novas. */

body{background:var(--canvas);min-height:100vh}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Shell ─────────────────────────────────────────────────────────── */
/* abaixo do logo, mais espaço que entre os grupos (20px): destaca a marca */
.sidebar .logo{display:block;padding:20px 24px 32px;line-height:0}
.sidebar .logo img{height:92px;width:auto;display:block}
.sidebar-footer{padding:14px 24px;color:var(--muted)}
.sidebar-footer .sync-dot.stale{background:var(--warning)}
.sidebar-footer .sync-dot.off{background:var(--input)}
.nav-link .icon,.mobile-bottom .icon{width:20px;height:20px}
/* menu em grupos: título pequeno em caixa alta, no laranja de ação (o do logo
   não tem contraste para texto de 11px); itens justos e grupos bem separados,
   para os 5 grupos caberem sem rolar num notebook de 768px */
.nav-group + .nav-group{margin-top:20px}
.nav-group-title{margin:0;padding:0 14px 3px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--action)}
.nav-group .nav-link{min-height:36px;margin:0;padding:6px 14px}
.topbar .restaurant-name{font-weight:600}
.topbar .profile-trigger{display:inline-flex;align-items:center;gap:0;color:var(--ink);font-weight:500;padding:0 4px;border-radius:8px}
.topbar .profile-trigger:hover{background:var(--canvas)}
.topbar .period-top{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.mobile-logo{display:none;line-height:0}
.mobile-logo img{height:40px;width:auto}
@media(max-width:1199px){.mobile-logo{display:inline-block}.topbar .restaurant-name{display:none}}

/* ── Feedback do servidor: toast na lateral, some sozinho ──────────── */
.toast-stack{position:fixed;top:16px;right:16px;z-index:120;display:flex;flex-direction:column;gap:10px;
  width:380px;max-width:calc(100vw - 32px);pointer-events:none}
.toast-stack .notice{pointer-events:auto;margin:0;justify-content:space-between;align-items:flex-start;
  box-shadow:0 10px 30px #16202a26;background:#fff;
  animation:toast-entra .18s ease-out;transition:opacity .2s ease,transform .2s ease}
.toast-stack .notice.saindo{opacity:0;transform:translateX(16px)}
.toast-stack .notice button{background:transparent;border:0;color:inherit;min-height:32px;min-width:32px;flex:none}
.toast-stack .notice.warn{background:var(--warning-bg)}
.toast-stack .notice.error{background:var(--danger-bg)}
.toast-stack .notice.success{background:var(--ok-bg)}
@keyframes toast-entra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(max-width:767px){.toast-stack{top:auto;bottom:calc(var(--mobile-bottom, 68px) + 12px);left:16px;right:16px;width:auto}}
@media(prefers-reduced-motion:reduce){.toast-stack .notice{animation:none;transition:none}}

/* linha recém-confirmada: um piscar curto para não se perder na tabela */
.linha-atualizada>td{animation:linha-piscou 1.8s ease-out}
@keyframes linha-piscou{from{background:var(--tint)}to{background:transparent}}
@media(prefers-reduced-motion:reduce){.linha-atualizada>td{animation:none}}

/* ── Diálogos nativos (<dialog>): foco contido, Esc e retorno ao acionador ── */
dialog.dialog{padding:0;border:0;color:var(--ink)}
dialog.dialog:not([open]){display:none}
dialog.dialog::backdrop{background:rgba(22,30,42,.28)}
dialog.dialog.drawer{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:100dvh;width:440px;max-width:100%}
dialog.dialog.popover{position:fixed;inset:64px 32px auto auto;margin:0;width:360px}
dialog.dialog.fullscreen{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border-radius:0}
@media(max-width:767px){dialog.dialog.drawer{width:100%}dialog.dialog.popover{inset:auto 16px 16px 16px;width:auto}}
.dialog-head .icon-btn{flex:none}
.dialog-body > :last-child{margin-bottom:0}
.dialog-actions .btn{min-width:110px}

/* ── Formulários ───────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 20px}
.form-grid .span-all{grid-column:1/-1}
.form-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.form-inline .field{margin-bottom:0}
.field .help{margin:0}
.field input[type=file]{padding:8px;border-style:dashed}
.input-compact{min-height:36px!important;padding:6px 8px!important;font-size:14px!important}
input.num,.num input{text-align:right;font-variant-numeric:tabular-nums}

/* ── Tabelas ───────────────────────────────────────────────────────── */
.table td.actions,.table th.actions{text-align:right;white-space:nowrap}
/* Movimentações: categoria em cima, subcategoria/fornecedor embaixo */
.categoria-cel{min-width:130px}
/* sete colunas numa tabela só: apertar o respiro lateral e os botões para o
   "Revisar" não cair fora da área visível em notebook de 1366px */
#tabela-movimentos td,#tabela-movimentos th{padding-left:10px;padding-right:10px}
#tabela-movimentos td.actions{padding-left:6px}
#tabela-movimentos td.actions .btn{padding:8px 9px}
#tabela-movimentos td.actions .btn+.btn{margin-left:2px}
/* as tags de situação alinhadas: mesma largura, texto centralizado, para a
   coluna ser lida de cima a baixo sem os rótulos dançando */
#tabela-movimentos td[data-label='Classificação'] .badge{min-width:132px;justify-content:center}
.categoria-cel small{color:var(--muted)}
@media(max-width:767px){
  /* no celular a tabela vira lista: a subcategoria some por padrão, mas aqui
     ela é o que a pessoa confere antes de aprovar */
  .table.responsive td.categoria-cel{flex-wrap:wrap}
  .table.responsive td.categoria-cel small{display:block;width:100%;text-align:right;margin-top:0}
}
.table td.actions form{display:inline}
.table .muted-row td{color:var(--muted)}
.table tr.group td{background:#F7F9FB;font-weight:600;height:44px}
.table tr.sub td:first-child{padding-left:32px}
.table tr.sub2 td:first-child{padding-left:48px}
.table td.wrap{white-space:normal}
.table tfoot tr.total td{font-weight:700;border-top:2px solid var(--border);border-bottom:0}
.table-scroll{overflow:auto;max-width:100%}
.table-scroll:focus-visible{outline:3px solid var(--action-hover);outline-offset:3px}

/* Grades temporais (presença, caixa diário): rolagem interna, identificador fixo */
.grade{border-collapse:separate;border-spacing:0}
.grade th,.grade td{height:44px;padding:6px 8px;border-bottom:1px solid #E9EDF2}
.grade thead th{position:sticky;top:0;z-index:2}
.grade th:first-child,.grade td:first-child{position:sticky;left:0;background:white;z-index:1;min-width:180px;box-shadow:inset -1px 0 var(--border)}
.grade thead th:first-child{z-index:3;background:#F7F9FB}
.grade tbody tr:hover td:first-child{background:#F7F9FB}
.grade td.center,.grade th.center{text-align:center}
.grade .weekend{background:#FAFBFC}
.grade input[type=checkbox]{margin:auto;display:block}

/* ── Métricas e blocos ─────────────────────────────────────────────── */
.metrics.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric-note .badge{margin-left:4px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.kpi-mini{background:white;border:1px solid var(--border);border-radius:10px;padding:16px}
.kpi-mini .label{font-size:12px;color:var(--muted);margin-bottom:4px}
.kpi-mini .value{font-family:Poppins,Arial,sans-serif;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.grid-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:1199px){.grid-three{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.grid-three{grid-template-columns:1fr}.metrics.two{grid-template-columns:1fr}.metrics.two .metric:nth-child(2){padding-left:0;border:0}}
.chart-box{position:relative;height:280px}
@media(max-width:767px){.chart-box{height:220px}}
.bar{height:8px;border-radius:4px;background:var(--border);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--brand)}
.bar.ok>span{background:var(--ok)}.bar.warn>span{background:var(--warning)}.bar.danger>span{background:var(--danger)}
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:0}
.pairs dt{font-size:12px;color:var(--muted)}
.pairs dd{margin:4px 0 0;font-weight:500;font-variant-numeric:tabular-nums}
.divider-y>*+*{border-top:1px solid var(--border)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.push{margin-left:auto}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.text-right{text-align:right}
.nowrap{white-space:nowrap}
.strong{font-weight:600}

/* Detalhes expansíveis (composição, linhas filhas) */
details.expand>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;color:var(--action);font-weight:500}
details.expand>summary::-webkit-details-marker{display:none}
details.expand>summary .icon{transition:transform 120ms ease-out}
details.expand[open]>summary .icon{transform:rotate(90deg)}

/* Composição por hover/foco: resumo; clique abre o detalhe completo */
.hover-wrap .tooltip{right:auto;left:0}
.table td.num .hover-wrap .tooltip{left:auto;right:0}

@media print{.toast-stack,.no-print{display:none!important}}

/* ── Acesso ────────────────────────────────────────────────────────── */
.auth-brand{text-align:center;margin-bottom:32px}
.auth-brand img{height:132px;width:auto;display:block;margin:0 auto 12px}
.auth .surface{box-shadow:0 10px 30px #16202a0d}
.auth .surface h1{margin-bottom:4px}
.password-wrap{position:relative}
.password-wrap input{padding-right:96px}
.auth .password-wrap .btn{position:absolute;right:4px;top:0;width:auto;margin:0;min-height:44px}
.legend span.l-green:before{background:var(--ok);height:10px;width:10px;border-radius:2px}
.legend span.l-gray:before{background:#84909F;height:10px;width:10px;border-radius:2px}
.legend span.l-line:before{background:var(--brand)}
.legend.legend-free span:nth-child(2):before{background:#84909F}
.pagination .btn.current{background:var(--tint);color:var(--action);border-color:transparent}
.table td.wrap:first-child{min-width:220px}
.legend span.l-bar:before{height:10px;width:10px;border-radius:2px}
.report-types .btn{justify-content:flex-start}
@media(max-width:1199px){.table-wrap:has(.hover-wrap){overflow:auto}}
@media(max-width:767px){.metric:not(:first-child) .metric-value{font-size:21px;letter-spacing:-.5px;white-space:nowrap}.metric-value{overflow-wrap:anywhere}}
.report-layout>*{min-width:0}
.topbar .period-top{background:transparent;border:0;font-weight:500}.topbar .period-top:hover{text-decoration:underline}@media(max-width:767px){.topbar .divider{display:none}.topbar .period-top{display:inline-flex;font-size:13px}}

/* grupo de caixas (permissões do usuário) */
fieldset.field{border:0;padding:0;margin:0 0 16px;min-width:0}
fieldset.field legend{font-weight:600;padding:0;margin-bottom:4px}
fieldset.field label.check{align-items:flex-start}
fieldset.field label.check input{margin-top:3px}

/* celular: e-mails longos e várias ações não estouram a linha da tabela */
@media (max-width:767px){
  .table.responsive td{min-width:0;overflow-wrap:anywhere}
  .table.responsive td.actions{flex-wrap:wrap;justify-content:flex-end}
  .table.responsive td.actions:before{margin-right:auto}
}

/* ── Grade mensal do caixa ────────────────────────────────────────────
   Leitura de planilha: cabecalho do grupo, linha de saldo e coluna Total
   sempre a vista; entradas em verde, saidas em vermelho; colunas em zebra.
   A cor da linha vai em background-color e os realces (zebra, fim de semana,
   hover) em background-image, para se somarem em vez de se substituirem.
   Camadas (z-index): corpo 3 · grupo 4-5 · rodape 5-6 · cabecalho 7-8. */
.grade.caixa{--alt-cabecalho:58px;--fundo-linha:#fff;--zebra:linear-gradient(rgba(16,24,32,.035),rgba(16,24,32,.035))}
.grade.caixa tbody td,.grade.caixa tfoot td{background-color:var(--fundo-linha)}
/* A rolagem fica dentro da grade: chegar ao fim dela não arrasta a página
   junto nem dispara o "voltar" do touchpad no gesto lateral. */
[data-grade-rolavel]{overscroll-behavior:contain}

/* linhas pretas de grade, como na planilha: separam conta e dia (Fluxo anual e Dinheiro) */
.grade.caixa{--linha-grade:#000}
.grade.caixa th,.grade.caixa td{border-bottom:1px solid var(--linha-grade);border-right:1px solid var(--linha-grade)}
.grade.caixa th:last-child,.grade.caixa td:last-child{border-right:0}

/* cor padrão de valor no sistema: entrada verde, saída vermelha (não nas grades) */
.valor-entrada{color:var(--ok)}
.valor-saida{color:var(--danger)}

/* a listra é por linha (ver "tipo da linha"); entre colunas, só o fim de semana se destaca */
.grade.caixa .weekend{background-image:linear-gradient(rgba(16,24,32,.06),rgba(16,24,32,.06))}
.grade.caixa tbody tr:hover td{background-image:linear-gradient(rgba(0,122,67,.07),rgba(0,122,67,.07))}
/* Mesmas cores, sem degradê: a sobreposição translúcida vira uma cor sólida
   (color-mix = a mesma conta da transparência). Pintar milhares de células
   com uma camada de imagem por cima pesava a cada quadro da rolagem. */
@supports (background-color:color-mix(in srgb,red,blue)){
  .grade.caixa tbody td,.grade.caixa tfoot td{--realce:0%;--cor-realce:#101820;background-image:none!important;
    background-color:color-mix(in srgb,var(--fundo-linha),var(--cor-realce) var(--realce))}
  /* fim de semana vence a zebra; a linha sob o mouse vence os dois */
  .grade.caixa td.weekend{--realce:6%!important}
  .grade.caixa tbody tr:hover td{--realce:7%!important;--cor-realce:#007A43}
}

/* tipo da linha, em listras como as cores alternadas do Google Sheets: uma
   linha colorida (verde nas entradas, vermelho nas saídas) e uma branca.
   Cada grupo de saída tem o seu tom de vermelho (--tom no cabeçalho do grupo,
   --tom-linha na listra), do mais forte (Impostos) ao mais claro. */
.grade.caixa tr.entrada,.grade.caixa tr.saida{--fundo-linha:#fff}
.grade.caixa tr.entrada.alt{--fundo-linha:var(--tom-linha,#E6F3E9)}
.grade.caixa tr.saida.alt{--fundo-linha:var(--tom-linha,#FBE6E3)}
.grade.caixa tr.group{--fundo-linha:#D9EEDF;font-weight:700}
.grade.caixa tr.group.saida{--fundo-linha:var(--tom,#F6D3CD)}
.grade.caixa [data-bloco="Impostos"]{--tom:#E9A9A0;--tom-linha:#F6D5D0}
.grade.caixa [data-bloco="Salários"]{--tom:#F6D3CD;--tom-linha:#FCEDEA}
.grade.caixa [data-bloco="Demais Salários"]{--tom:#F3C4CB;--tom-linha:#FBE7EA}
.grade.caixa [data-bloco="Compras"]{--tom:#F4C9B8;--tom-linha:#FBEAE2}
.grade.caixa [data-bloco="Despesas Fixas"]{--tom:#EDB8B8;--tom-linha:#F9E3E3}
.grade.caixa [data-bloco="Despesas Variáveis"]{--tom:#F7DACD;--tom-linha:#FDF0EA}
.grade.caixa [data-bloco^="Dívidas"]{--tom:#E4B6C1;--tom-linha:#F6E3E8}
/* nomes das contas em negrito, para ler melhor (pedido da equipe, 05/11/2026) */
.grade.caixa tr.sub td:first-child{padding-left:24px;font-weight:600}

/* colunas fixas: identificacao a esquerda, Total a direita (sempre em negrito) */
.grade.caixa tbody td:first-child,.grade.caixa tbody td:last-child,
.grade.caixa tfoot td:first-child,.grade.caixa tfoot td:last-child{z-index:3}
.grade.caixa th:last-child,.grade.caixa td:last-child{position:sticky;right:0;font-weight:700;min-width:112px;
  box-shadow:inset 1px 0 var(--border)}

/* cabecalho do grupo colado abaixo do cabecalho da tabela */
.grade.caixa tr.group td{position:sticky;top:var(--alt-cabecalho);z-index:4}
.grade.caixa tr.group td:first-child,.grade.caixa tr.group td:last-child{z-index:5}

/* "Saldo do dia" colado no rodape */
.grade.caixa tfoot tr.total td{position:sticky;bottom:0;font-weight:700;border-top:2px solid var(--linha-grade);z-index:5}
.grade.caixa tfoot tr.total td:first-child,.grade.caixa tfoot tr.total td:last-child{z-index:6}

/* cabecalho da tabela por cima de tudo */
.grade.caixa thead th{height:var(--alt-cabecalho);background:#F7F9FB;z-index:7}
.grade.caixa thead th:first-child,.grade.caixa thead th:last-child{z-index:8}
/* sábado, domingo e feriado nacional: cabeçalho vermelho, como nas planilhas
   (banco não compensa nesses dias). Só o cabeçalho; o corpo segue com o cinza. */
.grade.caixa thead th.folga{background:#F3C9C2;color:#8C1D12;box-shadow:inset 0 -2px #C9483A}
.grade.caixa thead th.folga .caption{color:#8C1D12}

/* origem do número no indicador (caixa x extrato x PDV) */
.metric-source{color:var(--muted);font-size:11px;margin-top:4px;display:flex;gap:6px;align-items:center}
.metric-source:before{content:"";width:6px;height:6px;border-radius:50%;background:#9AA6B2;flex:none}
.metric-source.alerta{color:#8A5A00}
.metric-source.alerta:before{background:#E0A100}

/* quatro indicadores (Caixa: saldo atual, entradas, saídas, saldo previsto) */
.metrics.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.metrics.quatro .metric-value{font-size:30px;letter-spacing:-1px}
@media(max-width:1199px){
  .metrics.quatro{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .metrics.quatro .metric:nth-child(odd){padding-left:0;border-left:0}
}
@media(max-width:767px){
  .metrics.quatro .metric:first-child{grid-column:auto}
  .metrics.quatro .metric:nth-child(even){padding-left:20px}
  .metrics.quatro .metric-value{font-size:20px;letter-spacing:-.6px}
}

/* painel de conciliação: lista de lançamentos que compõem um movimento */
label.conc-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--border);margin:0}
label.conc-item input{margin-top:3px}
label.conc-item .num{white-space:nowrap}
.conc-nome{min-width:0;overflow-wrap:anywhere}

/* comentário de célula (data-nota): aparece na hora, como no Google Sheets */
.nota-flutuante{position:fixed;z-index:50;max-width:320px;padding:8px 10px;border-radius:6px;background:#FFFBEA;
  color:#1B2420;border:1px solid #E7C66A;box-shadow:0 4px 14px rgba(16,24,32,.14);font-size:13px;line-height:1.45;
  white-space:pre-line;pointer-events:none}

/* navegação de mês: setas com o nome do mês; no celular, só as setas */
/* o mês de hoje fica marcado mesmo quando outro está aberto */

/* conversa de comentários da célula (Fluxo de Caixa e Dinheiro): quem, quando e o quê */
.conversa{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.conversa li{padding:8px 10px;border-radius:6px;background:#FFFBEA;border:1px solid #F1DFA6;white-space:pre-line;color:#1B2420}
.conversa .quem{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:#5B6660;margin-bottom:2px}
.conversa .acoes{display:flex;gap:4px}
.conversa .lembrete{font-size:12px;font-weight:600;color:var(--action);margin-bottom:2px}
.conversa li.resolvido{background:var(--surface-2,#F4F4F2);border-color:#E3E3E0;color:#5B6660}
.conversa li.resolvido .texto{text-decoration:line-through}
.conversa form.editar{display:grid;gap:6px;margin-top:4px;white-space:normal}
.conversa form.editar textarea{width:100%;min-height:88px;resize:vertical;font:inherit;padding:8px;border:1px solid var(--input);border-radius:6px;background:#fff}
.conversa form.editar .acoes{justify-content:flex-end}
.lembrete-campos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.lembrete-campos label{display:flex;align-items:center;gap:6px;font-size:13px}
.lembrete-campos select{max-width:220px}

/* Início */
.ok{color:var(--ok)}
.table tr.atual td{background:var(--tint)}
.table tr.previsto td{color:var(--muted)}
.explicados .kpi-mini{padding:20px}
.explica{font-size:13px;line-height:1.5;color:var(--muted);margin:8px 0 0}
.value-duplo{display:flex;gap:32px;flex-wrap:wrap}
.value-duplo small{display:block;font-size:12px;color:var(--muted)}
.value-duplo strong{font-family:Poppins,Arial,sans-serif;font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
@media(max-width:767px){.grid-even.explicados{grid-template-columns:1fr}}
.legend-caixa span:before{height:10px!important;width:10px!important;border-radius:2px}
.legend-caixa span.l-entrada:before{background:#2F6B4F}
.legend-caixa span.l-saida:before{background:#9C3F42}
.legend-caixa span.l-texto:before{display:none!important}
.legend-caixa .l-res-pos{color:#3D8262;font-weight:600}
.legend-caixa .l-res-neg{color:#B0524F;font-weight:600}
.legend-fat span.l-bar:before{background:var(--brand)}
.legend-fat span.l-anterior:before{background:#84909F}
.kpi-mini small{display:block}
.kpi-mini small.aviso{color:#8A5A00;margin-top:4px}
/* Início: os seis números em cards brancos com ícone (duas linhas de três) */
.metrics.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;margin-bottom:24px}
.metrics.cards .metric{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
.metrics.cards .metric:not(:first-child){padding-left:20px}
.metric-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.metric-top .metric-label{margin-bottom:0;font-weight:600}
.metric-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#EFF2F5;color:var(--muted);flex:none}
.metric-icon.ok{background:var(--ok-bg);color:var(--ok)}
.metric-icon.bad{background:var(--danger-bg);color:var(--danger)}
.metric-icon.brand{background:var(--tint);color:var(--action)}
.metrics.cards .metric .metric-value{font-size:28px;letter-spacing:-1px}
@media(max-width:1199px){.metrics.cards{grid-template-columns:1fr 1fr}}
@media(max-width:767px){
  .metrics.cards{grid-template-columns:1fr;gap:12px}
  .metrics.cards .metric:first-child{grid-column:auto}
  .metrics.cards .metric .metric-value{font-size:26px;letter-spacing:-.7px;white-space:normal}
}
/* gráficos + "Para hoje" lado a lado, os dois cards na mesma altura
   (o .task-footer com margin-top:auto cola o botão no rodapé) */
.inicio-topo{align-items:stretch}
/* Quem manda na altura da linha é o gráfico. A lista de pendências fica
   absoluta dentro de .pend-wrap: fora do fluxo, ela não entra no cálculo da
   altura do card, então o "Para hoje" nunca estica a linha — passou do espaço,
   rola por dentro. */
.para-hoje .pend-wrap{flex:1 1 0;min-height:0;position:relative}
.para-hoje .pend-lista{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-gutter:stable}
.para-hoje .pend-lista .pending:last-child{border-bottom:0}
/* a coluna é estreita e a barra de rolagem come mais uns 15px: rótulo
   longo ("1ª Quinzena Agosto/26") quebra em vez de ser cortado */
.para-hoje .pending .nowrap{white-space:normal}
.para-hoje .pending strong{overflow-wrap:anywhere}
.inicio-topo+.surface{margin-top:24px}
@media(max-width:1199px){
  .inicio-topo{grid-template-columns:1fr}
  .inicio-topo .para-hoje{order:-1}
  /* numa coluna só não há gráfico ao lado para dar a altura: a lista volta ao
     fluxo e o card cresce com ela */
  .para-hoje .pend-wrap{flex:none}
  .para-hoje .pend-lista{position:static;overflow:visible}
}
.chart-box.grande{height:320px}
/* seletor de período do topo: painel pequeno logo abaixo do mês */
.periodo-wrap{position:relative}
.periodo-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:264px;background:white;border:1px solid var(--border);
  border-radius:10px;box-shadow:0 10px 30px #16202a1f;padding:12px}
.periodo-pop[hidden]{display:none}
.periodo-ano{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.periodo-ano strong{font-family:Poppins,Arial,sans-serif;font-size:16px}
.periodo-meses{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.periodo-meses button{min-height:40px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font-weight:500;cursor:pointer}
.periodo-meses button:hover{background:#F7F9FB;border-color:var(--border)}
.periodo-meses button.hoje{border-color:var(--border)}
.periodo-meses button.ativo{background:var(--tint);color:var(--action);border-color:transparent}
.periodo-pop .btn.wide{margin-top:10px;width:100%}
/* gorjetas: célula da grade de presença — ✓ trabalhou · ✕ faltou · FÉR férias */
.estado-presenca{width:100%;min-width:34px;min-height:32px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.estado-presenca[data-estado="T"]{background:var(--ok-bg);border-color:#B7DCC4;color:var(--ok)}
.estado-presenca[data-estado="F"]{background:var(--warning-bg);border-color:#E9D3A4;color:var(--warning);font-size:11px}
.estado-presenca[data-estado=""]:not([data-futuro]){background:var(--danger-bg);border-color:#F1C2BD;color:var(--danger)}
.estado-presenca:focus-visible{outline:2px solid var(--action);outline-offset:1px}

/* Movimentações: cabeçalho que ordena (Data, Contraparte, Valor) e filtra (Categoria, Classificação) */
.th-ordena{color:inherit;text-decoration:none;display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.th-ordena span{color:var(--muted);font-size:12px}
.th-ordena:hover,.th-ordena.ativo,.th-ordena.ativo span{color:var(--action)}
.th-filtro{position:relative;display:inline-block}
.th-filtro summary{cursor:pointer;list-style:none;display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.th-filtro summary::-webkit-details-marker{display:none}
.th-filtro summary span{color:var(--muted);font-size:11px}
.th-filtro.ativo summary,.th-filtro summary:hover{color:var(--action)}
.th-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:220px;max-height:340px;overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px #16202a1f;padding:6px;
  font-weight:400;text-transform:none;letter-spacing:0}
.th-menu a{display:flex;justify-content:space-between;gap:16px;padding:7px 10px;border-radius:6px;color:var(--ink);text-decoration:none;white-space:nowrap}
.th-menu a:hover{background:#F2F4F7}
.th-menu a.ativo{background:var(--tint);color:var(--action);font-weight:600}

/* Metas › Registro diário: aviso de salvamento automático embaixo do campo */
.rd-status{display:block;min-height:16px;margin-top:2px;font-size:11px;text-align:right}
.rd-status.good{color:var(--ok)}.rd-status.bad{color:var(--danger)}.rd-status.muted{color:var(--muted)}

/* rodapé do caixa: Saldo Total em que a grade não chega no mesmo valor (aviso em data-nota) */
.grade td.difere{position:relative;cursor:help}
.grade td.difere::before{content:"";position:absolute;top:0;left:0;border-style:solid;
  border-width:7px 7px 0 0;border-color:#B42318 transparent transparent transparent}
/* rodapé em dois grupos ("Movimento do dia" e "Saldo no fim do dia"): a linha de
   título é uma faixa só, sem colunas (Fluxo de Caixa e Dinheiro) */
.grade.caixa tfoot tr.rod-titulo td{--fundo-linha:#F2F4F7;height:32px;padding-top:10px;padding-bottom:4px;font-size:12px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-right:0}
.grade.caixa tfoot tr.rod-titulo td:first-child{box-shadow:none}
.grade.caixa tfoot tr.rod-titulo td:last-child{position:static;box-shadow:none;min-width:0}
.grade.caixa tfoot tr.rod-titulo:first-child td{border-top:2px solid var(--linha-grade)}

/* legenda curta embaixo das grades (Fluxo de Caixa e Dinheiro): uma ideia por linha */
.legenda{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:4px;font-size:12px;color:var(--muted)}
.legenda strong{color:var(--ink);font-weight:600}
.legenda .marca{display:inline-block;width:0;height:0;margin-right:6px;border-style:solid;vertical-align:middle}
.legenda .marca.erro{border-width:8px 8px 0 0;border-color:#B42318 transparent transparent transparent}
.legenda .marca.nota{margin-left:12px;border-width:0 8px 8px 0;border-color:transparent var(--brand) transparent transparent}

/* ── Logs ──────────────────────────────────────────────────────────── */
.logs-filtros{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:16px 0 8px;padding:16px 20px}
.logs-filtros .field{margin:0;min-width:160px}
.logs-filtros-acoes{margin-left:auto}
.uso-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.uso-linha{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:14px}
.help-list{margin:0;padding-left:18px;display:grid;gap:10px;color:var(--muted);font-size:14px}
@media(max-width:767px){.logs-filtros .field{min-width:0;flex:1 1 140px}.logs-filtros-acoes{margin-left:0;width:100%}.logs-filtros-acoes .btn{width:100%}}
/* “Ver como”: faixa fixa no topo enquanto o administrador usa a visão de outra pessoa */
.visao-faixa{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 32px;background:var(--warning-bg);color:var(--warning);border-bottom:1px solid #F0DDA8}
.visao-faixa p{margin:0;flex:1;color:var(--ink)}
.visao-faixa p span{color:var(--muted)}
.visao-faixa form{flex:none}
@media(max-width:767px){.visao-faixa{flex-wrap:wrap;padding:10px 16px}.visao-faixa form{width:100%}.visao-faixa .btn{width:100%}}
.legenda .marca.agendado{width:14px;height:10px;border:1px solid #C9A400;background:#FFE45C;border-radius:2px}

/* ── Telas de entrada (login, esqueci a senha, criar senha) ─────────────────── */
.acesso-body{background:var(--surface)}
.acesso{min-height:100vh;display:grid;grid-template-columns:minmax(380px,44%) 1fr}
.acesso-marca{position:relative;overflow:hidden;background:var(--brand);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px}
.acesso-marca-topo img{width:220px;height:auto;display:block}
.acesso-marca-texto{position:relative;max-width:420px}
.acesso-titulo{font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.8px;margin:0 0 16px}
.acesso-marca-texto p:not(.acesso-titulo){font-size:16px;opacity:.92;margin:0}
.acesso-marca-rodape{position:relative;font-size:13px;opacity:.85;margin:0;padding-top:16px;border-top:2px solid var(--accent);display:inline-block;align-self:flex-start}
.acesso-forma{position:absolute;border-radius:50%;pointer-events:none}
.acesso-forma.f1{width:340px;height:340px;right:-120px;top:-110px;background:var(--accent);opacity:.9}
.acesso-forma.f2{width:220px;height:220px;right:40px;bottom:-90px;background:#5FB848;opacity:.55}
.acesso-forma.f3{width:90px;height:90px;left:52%;top:42%;background:#fff;opacity:.08}
.acesso-conteudo{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 24px 24px}
.acesso-caixa{width:100%;max-width:400px;margin:auto 0}
.acesso-logo-movel{display:none}
.acesso-h1{font-size:28px;line-height:1.25;letter-spacing:-.6px;margin:0 0 8px}
.acesso-sub{color:var(--muted);margin:0 0 28px}
.acesso-form .field{margin-bottom:20px}
.acesso .password-wrap .btn{position:absolute;right:4px;top:0;width:auto;margin:0;min-height:44px}
.acesso-label-linha{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.acesso-label-linha a{font-size:13px;font-weight:500}
.acesso-caps{display:flex;gap:6px;align-items:center;color:var(--warning);font-size:12px;margin:0}
.acesso-caps .icon{width:16px;height:16px}
.acesso-lembrar{margin:0 0 20px;font-size:14px}
.acesso-botao{width:100%}
.acesso-reenviar{margin-top:8px}
.acesso-seguro{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:12px;margin:24px 0 0}
.acesso-seguro .icon{width:16px;height:16px;margin-top:1px;color:var(--brand)}
.acesso-voltar{display:inline-flex;gap:6px;align-items:center;min-height:44px;margin-bottom:12px;font-weight:500}
.acesso-voltar .icon{width:18px;height:18px}
.acesso-icone{width:56px;height:56px;border-radius:50%;background:var(--tint);color:var(--brand);display:grid;place-items:center;margin-bottom:20px}
.acesso-icone .icon{width:28px;height:28px}
.acesso-dicas{padding-left:20px;margin:0 0 28px;color:var(--muted)}
.acesso-dicas li+li{margin-top:6px}
.acesso-regras{list-style:none;padding:0;margin:-8px 0 20px;display:grid;gap:4px;font-size:13px;color:var(--muted)}
.acesso-regras li::before{content:"○";display:inline-block;width:20px;color:var(--input)}
.acesso-regras li.ok{color:var(--ok)}
.acesso-regras li.ok::before{content:"✓";color:var(--ok);font-weight:700}
.acesso-caixa .notice .icon{width:18px;height:18px;flex:none;margin-top:2px}
.acesso-rodape{width:100%;max-width:400px;text-align:center;font-size:13px;margin-top:40px}
.acesso-rodape p{margin:0 0 6px}
@media(max-width:1023px){
  .acesso{grid-template-columns:1fr}
  .acesso-marca{display:none}
  .acesso-conteudo{justify-content:flex-start;padding:32px 16px 24px}
  .acesso-caixa{margin:0}
  .acesso-logo-movel{display:block;margin:0 auto 28px;width:max-content}
  .acesso-logo-movel img{height:110px;width:auto;display:block}
  .acesso-h1{font-size:24px}
}