/* ASE · Gestão — estilos */

:root {
  --fundo: #f6f5f2;
  --superficie: #ffffff;
  --superficie-2: #f1efea;
  --borda: #e3e0d8;
  --texto: #1f1d1a;
  --texto-2: #6b665d;
  --acento: #b45309;
  --acento-forte: #92400e;
  --acento-suave: #fdf3e3;
  --ok: #15803d;
  --ok-suave: #e8f5ec;
  --perigo: #b91c1c;
  --perigo-suave: #fbeaea;
  --alerta: #a16207;
  --alerta-suave: #fdf6dc;
  --info: #1d4ed8;
  --info-suave: #e8eefc;
  --neutro-suave: #ecebe7;
  --sombra: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .04);
  --raio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #151412;
    --superficie: #1e1c19;
    --superficie-2: #262420;
    --borda: #34312b;
    --texto: #ece9e3;
    --texto-2: #a29d93;
    --acento: #f59e0b;
    --acento-forte: #fbbf24;
    --acento-suave: #3a2a12;
    --ok: #4ade80;
    --ok-suave: #16301f;
    --perigo: #f87171;
    --perigo-suave: #3a1c1c;
    --alerta: #facc15;
    --alerta-suave: #342c10;
    --info: #93b4fd;
    --info-suave: #1c2640;
    --neutro-suave: #2c2a26;
    --sombra: 0 1px 2px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
body.com-modal { overflow: hidden; }
a { color: var(--acento); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.02rem; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
input, select, textarea, button { font: inherit; color: inherit; }

/* ---------- estrutura ---------- */
.layout { display: flex; min-height: 100vh; }
.lateral {
  width: 220px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.25rem .9rem; background: var(--superficie); border-right: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; padding: 0 .5rem; }
.marca-sol { width: 14px; height: 14px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.marca-grande { font-size: 1.3rem; justify-content: center; margin-bottom: .5rem; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 8px;
  color: var(--texto-2); text-decoration: none; font-weight: 500;
}
.nav-link:hover { background: var(--superficie-2); color: var(--texto); }
.nav-link.ativo { background: var(--acento-suave); color: var(--acento-forte); }
.nav-link svg { display: block; }
.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.usuario { color: var(--texto-2); padding: 0 .55rem; word-break: break-all; }

.principal { flex: 1; min-width: 0; padding: 1.75rem 2rem 3rem; max-width: 1180px; }
.tela > * + * { margin-top: 1.1rem; }
.pagina-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sub { margin: .2rem 0 0; color: var(--texto-2); }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.carregando { padding: 3rem; text-align: center; color: var(--texto-2); }
.erro-geral { padding: 2rem; max-width: 560px; margin: 2rem auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }

.faixa-demo {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem 1rem; background: var(--alerta-suave); color: var(--texto); font-size: .88rem;
  border-bottom: 1px solid var(--borda);
}
.faixa-acoes { display: flex; gap: .4rem; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem .95rem; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--superficie); cursor: pointer; font-weight: 500; text-decoration: none; color: var(--texto);
  white-space: nowrap;
}
.btn:hover { background: var(--superficie-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-forte); }
@media (prefers-color-scheme: dark) { .btn-primario { color: #1a1206; } }
.btn-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--borda)); }
.btn-perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 40%, var(--borda)); }
.btn-peq { padding: .3rem .65rem; font-size: .85rem; }
.btn-fantasma { border-color: transparent; background: transparent; color: var(--texto-2); }
.btn-icone { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--texto-2); padding: 0 .25rem; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- cartões do painel ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .75rem; }
.cartao {
  display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); text-decoration: none; color: var(--texto);
}
a.cartao:hover { border-color: var(--acento); }
.cartao-rotulo { font-size: .82rem; color: var(--texto-2); font-weight: 500; }
.cartao-valor { font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao-detalhe { font-size: .8rem; color: var(--texto-2); }
.cartao.tom-perigo { border-left: 4px solid var(--perigo); }
.cartao.tom-perigo .cartao-valor { color: var(--perigo); }
.cartao.tom-alerta { border-left: 4px solid var(--alerta); }

.aviso {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .7rem 1rem; background: var(--acento-suave); border-radius: var(--raio); border: 1px solid var(--borda);
}

/* ---------- blocos e listas ---------- */
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.bloco-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.bloco-topo a { font-size: .85rem; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t f" "m f";
  column-gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--borda);
}
.lista > li:first-child { border-top: 0; }
.item-titulo { grid-area: t; font-weight: 500; }
.item-meta { grid-area: m; font-size: .82rem; color: var(--texto-2); }
.item-fim { grid-area: f; align-self: center; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vazio { color: var(--texto-2); padding: .75rem 0; margin: 0; }
h2.tom-perigo { color: var(--perigo); }

/* tarefas */
.rapida { display: flex; gap: .5rem; flex-wrap: wrap; }
.rapida input[type=text] { flex: 1 1 260px; }
.rapida input, .filtros input, .filtros select { padding: .5rem .65rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); }
.lista-tarefas > li { grid-template-columns: auto 1fr auto; grid-template-areas: "c t f"; align-items: center; }
.lista-tarefas input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--acento); margin: 0; cursor: pointer; }
.tarefa-texto { grid-area: t; display: flex; flex-direction: column; text-align: left; background: none; border: 0; padding: 0 .25rem; cursor: pointer; min-width: 0; }
.lista-tarefas li.feita .item-titulo { text-decoration: line-through; color: var(--texto-2); }

/* barras de gastos */
.barras { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.barras li { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: .75rem; align-items: center; font-size: .9rem; }
.barra { height: 10px; background: var(--superficie-2); border-radius: 5px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--perigo); opacity: .75; border-radius: 5px; }
.barra-valor { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- filtros e resumo ---------- */
.filtros { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.filtro { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--texto-2); }
.filtro select, .filtro input { color: var(--texto); font-size: .92rem; min-width: 150px; }
.filtro-busca { flex: 1 1 260px; }
.filtro-busca input { width: 100%; }
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.resumo-item { display: flex; flex-direction: column; padding: .65rem .85rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.resumo-item span { font-size: .8rem; color: var(--texto-2); }
.resumo-item strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.resumo-item small { color: var(--texto-2); font-size: .78rem; }
.resumo-item.tom-ok strong { color: var(--ok); }
.resumo-item.tom-perigo strong { color: var(--perigo); }

/* ---------- tabela ---------- */
.tabela-wrap { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); font-weight: 600; padding: .65rem .85rem; background: var(--superficie-2); }
.tabela td { padding: .65rem .85rem; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--superficie-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .forte { font-weight: 500; }
.tabela .acoes-linha { text-align: right; width: 1%; white-space: nowrap; }
.texto-perigo { color: var(--perigo); }
/* ---------- gráfico ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link-botao { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--borda); text-underline-offset: 3px; }
.link-botao:hover { color: var(--acento); }
.grafico-secao { display: flex; flex-direction: column; gap: .75rem; }
.grafico-secao .bloco-topo { flex-wrap: wrap; margin: 0; }
.grafico-secao select { padding: .45rem .65rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); max-width: 100%; }
.grafico-wrap { display: flex; flex-direction: column; gap: .7rem; }
.grafico { width: 100%; min-height: 240px; }
.grafico svg { display: block; }
.g-grade { stroke: var(--borda); stroke-width: 1; }
.g-base { stroke: var(--texto-2); stroke-width: 1; }
.g-eixo { fill: var(--texto-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.g-alvo { fill: transparent; }
.g-mes:hover .g-alvo, .g-mes:focus .g-alvo { fill: var(--superficie-2); }
.g-mes:focus { outline: none; }
.g-compensado { fill: var(--acento); }
.g-consumo { fill: color-mix(in srgb, var(--texto-2) 45%, transparent); }
.g-estimada { fill: var(--acento-suave); stroke: var(--acento); stroke-width: 1.5; stroke-dasharray: 3 2; }
.g-limite { stroke: var(--perigo); stroke-width: 1.5; stroke-dasharray: 5 4; }
.g-limite-texto { fill: var(--perigo); font-size: 11px; font-weight: 600; }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.leg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.leg-compensado { background: var(--acento); }
.leg-consumo { background: color-mix(in srgb, var(--texto-2) 45%, transparent); }
.leg-limite { height: 0; width: 16px; border-top: 2px dashed var(--perigo); border-radius: 0; }
.leg-estimada { background: var(--acento-suave); border: 1.5px dashed var(--acento); }
.grafico-detalhe { min-height: 1.3em; margin: 0; }

/* ---------- documentos do cliente ---------- */
.docs-secao { border-top: 1px solid var(--borda); padding-top: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.docs-secao h3 { margin: 0; }
.docs-envio { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: .6rem 1rem; }
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.docs li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .7rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-2); }
.docs li.vazio { background: none; border-style: dashed; justify-content: center; }
.doc-info { display: flex; flex-direction: column; min-width: 0; }
.doc-info .item-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-info .item-meta { font-size: .8rem; color: var(--texto-2); }
.doc-acoes { display: flex; gap: .3rem; flex-shrink: 0; }

/* ---------- quadro (kanban) ---------- */
.alternador { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.alternador .btn { border: 0; border-radius: 0; }
.alternador .btn.ativo { background: var(--acento-suave); color: var(--acento-forte); }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: .9rem; align-items: start; }
.kanban-coluna { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.kanban-topo { display: flex; justify-content: space-between; align-items: center; padding: 0 .2rem; }
.kanban-contagem { font-size: .78rem; font-weight: 600; color: var(--texto-2); background: var(--superficie); border-radius: 999px; padding: .05rem .5rem; }
.kanban-corpo { display: flex; flex-direction: column; gap: .5rem; min-height: 60px; border-radius: 8px; padding: 2px; transition: background .15s; }
.kanban-corpo.alvo { background: var(--acento-suave); }
.kanban-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: .6rem .7rem; box-shadow: var(--sombra); cursor: grab; display: flex; flex-direction: column; gap: .35rem; }
.kanban-cartao:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--borda)); }
.kanban-cartao.arrastando { opacity: .45; cursor: grabbing; }
.kanban-cartao.prio-alta { border-left: 3px solid var(--perigo); }
.kanban-cartao.atrasada .item-titulo { color: var(--perigo); }
.kanban-feita .kanban-cartao .item-titulo { text-decoration: line-through; color: var(--texto-2); }
.kanban-desc { margin: 0; font-size: .82rem; color: var(--texto-2); }
.kanban-meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .78rem; color: var(--texto-2); align-items: center; }
.prazo { display: inline-flex; align-items: center; gap: .2rem; align-self: flex-start; font-size: .76rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; }
.tarefa-selos { display: inline-flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; margin-left: auto; }
.tarefa-selos:empty { display: none; }
.prazo-normal { background: var(--neutro-suave); color: var(--texto-2); }
.prazo-perto { background: var(--alerta-suave); color: var(--alerta); }
.prazo-hoje { background: var(--alerta-suave); color: var(--alerta); outline: 1px solid color-mix(in srgb, var(--alerta) 50%, transparent); }
.prazo-vencido { background: var(--perigo-suave); color: var(--perigo); }
.prazo-ok { background: var(--ok-suave); color: var(--ok); }
.kanban-mover { display: none; font-size: .8rem; padding: .2rem .35rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); align-self: flex-start; }
.kanban-novo { align-self: flex-start; }
@media (hover: none), (max-width: 820px) { .kanban-mover { display: block; } }

.sem-fatura { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pilha > * + * { margin-top: .75rem; }
.pilha > h2:not(:first-child) { margin-top: 1.6rem; }
.pilha p, .bloco-usina > p { margin: 0; }
.texto-ok { color: var(--ok); }

/* ---------- etiquetas de status ---------- */
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; background: var(--neutro-suave); color: var(--texto-2); }
.b-pago, .b-ativo, .b-concluido { background: var(--ok-suave); color: var(--ok); }
.b-atrasada, .b-pendencia, .b-alta { background: var(--perigo-suave); color: var(--perigo); }
.b-a_emitir, .b-a_enviar, .b-em_adesao { background: var(--alerta-suave); color: var(--alerta); }
.bloco-aprovacao { border-color: color-mix(in srgb, var(--acento) 45%, var(--borda)); display: flex; flex-direction: column; gap: .6rem; }
.bloco-aprovacao .bloco-topo { margin: 0; align-items: flex-start; }
.bloco-aprovacao .bloco-topo p { margin: .15rem 0 0; }
.bloco-aprovacao .tabela-wrap { box-shadow: none; }
.acoes-par { display: inline-flex; gap: .35rem; }
.bloco-texto { display: block; font-size: .78rem; }
.b-aguardando { background: var(--acento-suave); color: var(--acento-forte); }
.b-emitido, .b-enviado, .b-em_analise { background: var(--info-suave); color: var(--info); }

/* ---------- formulários e janelas ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgb(0 0 0 / .45); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; z-index: 50; }
.modal { width: 100%; max-width: 620px; background: var(--superficie); border-radius: 14px; box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
.modal-grande { max-width: 860px; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--borda); }
.modal-topo h2 { font-size: 1.1rem; }
.modal-corpo { padding: 1.1rem 1.25rem 1.25rem; }
.form { display: flex; flex-direction: column; gap: .9rem; }
.form p { margin: 0; }
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.campo { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--texto-2); font-weight: 500; }
.campo.largo { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea {
  padding: .55rem .7rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie);
  color: var(--texto); font-size: .95rem; font-weight: 400; width: 100%;
}
.campo textarea { resize: vertical; }
.campo small { font-weight: 400; }
.obrig { color: var(--perigo); }
.form-acoes { display: flex; gap: .5rem; align-items: center; padding-top: .3rem; }
.espaco { flex: 1; }
.previa { display: flex; flex-direction: column; gap: .5rem; }
.previa .tabela-wrap { max-height: 260px; overflow: auto; }
.nota { color: var(--texto-2); font-size: .85rem; }
.erro { color: var(--perigo); font-size: .9rem; min-height: 0; margin: 0; }

/* ---------- energia: conferência de PDF, matrizes, rateio ---------- */
.texto-perigo { color: var(--perigo); }
.pilha > * + * { margin-top: .75rem; }
.pilha > h2:not(:first-child) { margin-top: 1.6rem; }
.pilha p, .bloco-usina > p { margin: 0; }
.campo input.faltando, .campo select.faltando { border-color: var(--perigo); background: var(--perigo-suave); }
.campo-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.conferencia { border: 1px solid var(--borda); border-radius: var(--raio); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .7rem; background: var(--superficie); }
.conferencia-erro { border-color: color-mix(in srgb, var(--perigo) 40%, var(--borda)); }
.conferencia-topo { word-break: break-all; }
.avisos { margin: 0; padding-left: 1.1rem; color: var(--alerta); font-size: .85rem; }
.texto-pdf { max-height: 220px; overflow: auto; white-space: pre-wrap; font-size: .75rem; background: var(--superficie-2); padding: .6rem; border-radius: 8px; margin: .4rem 0 0; }
details > summary { cursor: pointer; color: var(--texto-2); font-size: .85rem; }
.bloco-usina { display: flex; flex-direction: column; gap: .6rem; }
.bloco-usina + .bloco-usina { margin-top: 1rem; }
.bloco-usina .bloco-topo { align-items: flex-start; flex-wrap: wrap; }
.bloco-usina .bloco-topo p { margin: .15rem 0 0; }
.bloco-usina .tabela-wrap { box-shadow: none; }
.historico .tabela-wrap { margin-top: .5rem; }
.tabela-rolagem { overflow-x: auto; }
.tabela-matriz th, .tabela-matriz td { white-space: nowrap; }
.tabela-matriz tfoot td { background: var(--superficie-2); }
.tabela-matriz td.acima-limite { color: var(--acento-forte); font-weight: 600; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-caixa { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: .9rem; padding: 2rem 1.75rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); }

/* ---------- avisos ---------- */
#toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: .5rem; z-index: 60; max-width: calc(100vw - 2rem); }
.toast { padding: .65rem 1rem; border-radius: 8px; background: var(--texto); color: var(--fundo); box-shadow: 0 6px 20px rgb(0 0 0 / .2); transition: opacity .35s, transform .35s; }
.toast-erro { background: var(--perigo); color: #fff; }
.toast.saindo { opacity: 0; transform: translateY(6px); }

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .lateral {
    position: static; width: auto; height: auto; flex-direction: row; align-items: center; justify-content: space-between;
    padding: .7rem 1rem; border-right: 0; border-bottom: 1px solid var(--borda);
  }
  .lateral-rodape { margin: 0; flex-direction: row; align-items: center; }
  .usuario { display: none; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: row; justify-content: space-around;
    background: var(--superficie); border-top: 1px solid var(--borda); padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom));
  }
  .nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .nav-link { flex-direction: column; gap: .1rem; padding: .3rem .2rem; font-size: .68rem; flex: 1 0 68px; text-align: center; line-height: 1.15; }
  .principal { padding: 1.1rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.35rem; }
  #toasts { bottom: calc(5rem + env(safe-area-inset-bottom)); right: 1rem; left: 1rem; }
  .form-grade, .docs-envio { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(3, minmax(250px, 82vw)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .kanban-coluna { scroll-snap-align: start; }
  .docs li { flex-direction: column; align-items: stretch; }
  .doc-acoes { justify-content: flex-end; }
  .filtro { flex: 1 1 140px; }
  .filtro select, .filtro input { min-width: 0; width: 100%; }
  .barras li { grid-template-columns: 1fr auto; }
  .barras .barra { grid-column: 1 / -1; grid-row: 2; }

  /* tabela vira lista de cartões */
  .tabela-wrap { background: none; border: 0; box-shadow: none; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; }
  .tabela tr { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: .6rem; padding: .55rem .85rem; }
  .tabela td { border: 0; padding: .2rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .tabela td::before { content: attr(data-rotulo); color: var(--texto-2); font-size: .82rem; text-align: left; }
  .tabela td.forte { font-size: 1rem; justify-content: flex-start; text-align: left; }
  .tabela td.forte::before { display: none; }
  .tabela td:empty, .tabela td.acoes-linha:empty { display: none; }
  .tabela td.acoes-linha { width: auto; justify-content: flex-end; padding-top: .4rem; }
  .tabela td.acoes-linha::before { display: none; }

  /* tabelas de meses continuam como tabela, rolando para o lado */
  .tabela-rolagem { background: var(--superficie); border: 1px solid var(--borda); }
  .tabela-matriz { display: table; }
  .tabela-matriz thead { display: table-header-group; }
  .tabela-matriz tbody { display: table-row-group; }
  .tabela-matriz tfoot { display: table-footer-group; }
  .tabela-matriz tr { display: table-row; border: 0; padding: 0; margin: 0; background: none; }
  .tabela-matriz td, .tabela-matriz th { display: table-cell; padding: .5rem .65rem; border-top: 1px solid var(--borda); text-align: left; }
  .tabela-matriz td.num, .tabela-matriz th.num { text-align: right; }
  .tabela-matriz td::before { display: none; }
}
@media (max-width: 420px) {
  .lateral .btn-fantasma { padding: .3rem .4rem; font-size: .8rem; }
}