/* =====================================================================
   WACHSEN · Painel interno · Fase 1 (ligado ao banco)
   Base: estilo.css do protótipo aprovado (seções 1–14 sem mudança).
   Tokens da seção 10.2/10.3 do Plano. Celular primeiro (360px).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;
  /* Cores — modo claro (Plano 10.2) */
  --c-fundo: #FAF7F2;
  --c-superficie: #FFFFFF;          /* cartões e tabelas (ver nota no relatório: areia reprova o alerta) */
  --c-areia: #E9DFCF;               /* superfícies secundárias: lateral, cabeçalho de tabela */
  --c-divisor: #DDD3C2;             /* linha decorativa (derivado da areia) */
  --c-texto: #2A2724;
  --c-texto-2: #5E5A54;
  --c-borda-campo: #8A8378;
  --c-primaria: #2F5D50;
  --c-primaria-hover: #24493F;
  --c-sobre-primaria: #FFFFFF;
  --c-argila: #9A4F38;
  --c-argila-clara: #C9785C;        /* só decoração */
  --c-broto: #93B626;               /* só símbolo/decoração */
  --c-sucesso: #2E6B47;
  --c-alerta: #8A5A00;
  --c-erro: #A8322A;
  --c-info: #2D5F78;
  --c-realce: rgba(47, 93, 80, .08);
  --c-veu: rgba(23, 26, 24, .55);

  /* Tipografia (Plano 10.3 — no painel, só Inter) */
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-marca: "Fraunces", Georgia, serif;     /* só no logotipo textual */
  --fs-titulo: 26px;
  --fs-h3: 20px;
  --fs-corpo: 17px;
  --fs-tabela: 15px;
  --fs-pequeno: 14px;
  --fs-rotulo: 13px;

  /* Espaço (múltiplos de 8), raio, sombra, alvo */
  --e-05: 4px;
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 48px;
  --raio: 12px;
  --raio-campo: 8px;
  --sombra: 0 1px 2px rgba(42, 39, 36, .06);
  --alvo: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-fundo: #171A18;
    --c-superficie: #222624;
    --c-areia: #2A2F2C;
    --c-divisor: #353B37;
    --c-texto: #ECE6DC;
    --c-texto-2: #A9A399;
    --c-borda-campo: #6E746F;
    --c-primaria: #8CC2AE;
    --c-primaria-hover: #A6D3C2;
    --c-sobre-primaria: #171A18;
    --c-argila: #E5A088;
    --c-broto: #A9CC3A;
    --c-sucesso: #7CC79A;
    --c-alerta: #E6B85C;
    --c-erro: #F0918A;
    --c-info: #8DC0D8;
    --c-realce: rgba(140, 194, 174, .12);
    --c-veu: rgba(0, 0, 0, .65);
    --sombra: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-fundo: #171A18;
  --c-superficie: #222624;
  --c-areia: #2A2F2C;
  --c-divisor: #353B37;
  --c-texto: #ECE6DC;
  --c-texto-2: #A9A399;
  --c-borda-campo: #6E746F;
  --c-primaria: #8CC2AE;
  --c-primaria-hover: #A6D3C2;
  --c-sobre-primaria: #171A18;
  --c-argila: #E5A088;
  --c-broto: #A9CC3A;
  --c-sucesso: #7CC79A;
  --c-alerta: #E6B85C;
  --c-erro: #F0918A;
  --c-info: #8DC0D8;
  --c-realce: rgba(140, 194, 174, .12);
  --c-veu: rgba(0, 0, 0, .65);
  --sombra: none;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-texto);
  font: 400 var(--fs-corpo)/1.6 var(--f-texto);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
a { color: var(--c-primaria); text-underline-offset: 3px; }
a:hover { color: var(--c-primaria-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-primaria); outline-offset: 2px; border-radius: 4px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ic { width: 20px; height: 20px; flex: none; stroke-width: 2; vertical-align: middle; }
.ic-p { width: 16px; height: 16px; }
.ic-grande { width: 40px; height: 40px; stroke-width: 1.5; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.texto-2 { color: var(--c-texto-2); }
.pequeno { font-size: var(--fs-pequeno); line-height: 1.5; }
.codigo { font-size: var(--fs-rotulo); color: var(--c-texto-2); letter-spacing: .02em; }

.pular {
  position: absolute; left: var(--e-1); top: -80px; z-index: 100;
  background: var(--c-primaria); color: var(--c-sobre-primaria);
  padding: var(--e-1) var(--e-2); border-radius: var(--raio-campo); font-weight: 600;
}
.pular:focus { top: var(--e-1); color: var(--c-sobre-primaria); }

/* ---------- 3. Faixa do protótipo ---------- */
.faixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-05) var(--e-2);
  padding: 6px var(--e-2);
  background: var(--c-fundo);
  border-bottom: 1px dashed var(--c-argila);
  color: var(--c-texto-2);
  font-size: var(--fs-rotulo);
}
.faixa-texto { display: inline-flex; align-items: center; gap: 6px; }
.faixa-texto strong { color: var(--c-argila); font-weight: 600; }
.faixa-controles summary {
  cursor: pointer; min-height: 32px; display: inline-flex; align-items: center;
  color: var(--c-primaria); font-weight: 500;
}
.faixa-campos {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); align-items: end; padding: var(--e-1) 0;
}
.faixa-campos label { display: grid; gap: 2px; font-weight: 500; }
.faixa-campos select, .faixa-campos button {
  min-height: 36px; border: 1px solid var(--c-borda-campo); border-radius: var(--raio-campo);
  background: var(--c-superficie); padding: 4px 8px; font-size: var(--fs-pequeno);
}
.faixa-campos button { cursor: pointer; }

/* ---------- 4. Estrutura ---------- */
.lateral { display: none; }
.topo-movel {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  padding: 12px var(--e-2); background: var(--c-areia);
}
.marca { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nome { font-family: var(--f-marca); font-weight: 600; font-size: 24px; color: var(--c-primaria); }
.marca-sub { font-size: var(--fs-rotulo); color: var(--c-texto-2); }
.perfil-curto { font-size: var(--fs-rotulo); color: var(--c-texto-2); text-align: right; line-height: 1.3; }
.perfil-curto strong { display: block; color: var(--c-texto); font-weight: 600; }

main {
  display: block;
  container: tela / inline-size;
  padding: var(--e-2) var(--e-2) var(--e-3);
  max-width: 1280px;
  outline: none;
}

.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--c-superficie); border-top: 1px solid var(--c-divisor);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior ul { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.barra-inferior a, .barra-inferior button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 60px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  color: var(--c-texto-2); text-decoration: none;
  font-size: 12px; font-weight: 500; line-height: 1.2;
}
.barra-inferior [aria-current="page"], .barra-inferior .ativo { color: var(--c-primaria); font-weight: 600; }
.barra-inferior [aria-current="page"]::before, .barra-inferior .ativo::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px;
  background: var(--c-primaria); border-radius: 0 0 3px 3px;
}
.barra-inferior .contador { position: absolute; top: 4px; left: calc(50% + 6px); }

@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
  .topo-movel, .barra-inferior { display: none; }
  .lateral {
    position: sticky; top: 0; height: 100vh; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--e-3);
    padding: var(--e-3) var(--e-2);
    background: var(--c-areia);
    isolation: isolate;
  }
  .lateral .aneis-fundo { position: absolute; right: -60px; bottom: 0; width: 240px; height: 240px; z-index: -1; pointer-events: none; }
  main { padding: var(--e-4) var(--e-5) var(--e-5); }
  .rodape-ajuda { padding: 0 var(--e-5) var(--e-3); }
}

.nav-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-grupo {
  margin: var(--e-2) 0 var(--e-05); padding: 0 12px;
  font-size: var(--fs-rotulo); font-weight: 600; color: var(--c-texto-2);
}
.nav-lista a {
  display: flex; align-items: center; gap: 12px; min-height: var(--alvo);
  padding: 8px 12px; border-radius: var(--raio-campo);
  color: var(--c-texto); text-decoration: none; font-size: 16px; font-weight: 500;
}
.nav-lista a:hover { background: var(--c-realce); color: var(--c-texto); }
.nav-lista a[aria-current="page"] { background: var(--c-primaria); color: var(--c-sobre-primaria); }
.nav-lista a[aria-current="page"] .contador { background: var(--c-sobre-primaria); color: var(--c-primaria); }
.nav-lista .sub { padding-left: 12px; }
.contador {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--c-argila); color: var(--c-sobre-primaria);
  font-size: 12px; font-weight: 600;
}
:root[data-theme="dark"] .contador { color: #171A18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contador { color: #171A18; } }
.perfil { margin-top: auto; font-size: var(--fs-pequeno); color: var(--c-texto-2); line-height: 1.4; }
.perfil strong { display: block; color: var(--c-texto); font-weight: 600; }

/* ---------- 5. Cabeçalho de tela ---------- */
.cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-2); }
.migalha { font-size: var(--fs-rotulo); font-weight: 500; color: var(--c-texto-2); margin-bottom: 2px; }
.cab h1 { font-size: var(--fs-titulo); font-weight: 600; letter-spacing: -.01em; outline: none; }
.cab-sub { font-size: var(--fs-pequeno); color: var(--c-texto-2); margin-top: 4px; }
.cab-acoes { display: flex; flex-wrap: wrap; gap: var(--e-1); }
@media (max-width: 599px) { .cab-acoes, .cab-acoes .btn { width: 100%; } }

.filtros { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: var(--e-2); align-items: end; }
@container tela (min-width: 600px) { .filtros { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.filtros .btn { justify-self: start; }

/* ---------- 6. Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alvo); padding: 0 var(--e-2);
  border-radius: var(--raio-campo); border: 1px solid transparent;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.btn-primario { background: var(--c-primaria); color: var(--c-sobre-primaria); }
.btn-primario:hover { background: var(--c-primaria-hover); color: var(--c-sobre-primaria); }
.btn-secundario { background: transparent; color: var(--c-primaria); border-color: var(--c-primaria); }
.btn-secundario:hover { background: var(--c-realce); }
.btn-perigo { background: transparent; color: var(--c-erro); border-color: var(--c-erro); }
.btn-perigo:hover { background: var(--c-realce); }
.btn-texto { background: none; border: 0; color: var(--c-primaria); padding: 0 var(--e-1); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.btn-p { min-height: 36px; padding: 0 12px; font-size: var(--fs-pequeno); }
.btn[aria-disabled="true"] { background: var(--c-areia); color: var(--c-texto-2); border-color: var(--c-borda-campo); cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--alvo); height: var(--alvo); border: 0; border-radius: var(--raio-campo);
  background: none; color: var(--c-texto-2); cursor: pointer;
}
.btn-icone:hover { background: var(--c-realce); color: var(--c-texto); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-bottom: var(--e-2); }
.chip {
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--c-borda-campo); background: var(--c-superficie); color: var(--c-texto);
  font-size: var(--fs-pequeno); font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip[aria-pressed="true"] { background: var(--c-primaria); color: var(--c-sobre-primaria); border-color: var(--c-primaria); }

/* ---------- 7. Campos ---------- */
.campo { display: grid; gap: 4px; min-width: 0; }
.campo label, .campo legend, .rotulo { font-size: var(--fs-rotulo); font-weight: 500; line-height: 1.4; color: var(--c-texto); }
.opcional { font-weight: 400; color: var(--c-texto-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--alvo);
  padding: 8px 12px; border: 1px solid var(--c-borda-campo); border-radius: var(--raio-campo);
  background: var(--c-superficie); font-size: 16px; line-height: 1.4;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border: 2px solid var(--c-erro); padding: 7px 11px;
}
.ajuda { font-size: var(--fs-pequeno); color: var(--c-texto-2); line-height: 1.45; }
.erro-campo { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-pequeno); color: var(--c-erro); font-weight: 500; line-height: 1.45; }
.erro-campo .ic { width: 16px; height: 16px; margin-top: 2px; }
.grade-2 { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 520px) { .grade-2 { grid-template-columns: 1fr 1fr; } }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.opcao {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo);
  padding: 0 14px; border: 1px solid var(--c-borda-campo); border-radius: var(--raio-campo);
  cursor: pointer; font-size: 16px; font-weight: 400;
}
.opcao input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-primaria); }
.opcao:has(input:checked) { border: 2px solid var(--c-primaria); padding: 0 13px; background: var(--c-realce); }
.form-pilha { display: grid; gap: var(--e-2); }
.liquido-calc {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-1);
  padding: 12px var(--e-2); background: var(--c-fundo); border-radius: var(--raio-campo);
  font-size: var(--fs-pequeno);
}
.liquido-calc strong { font-size: 20px; }
.resumo-erros {
  border: 2px solid var(--c-erro); border-radius: var(--raio-campo); padding: 12px var(--e-2);
  font-size: var(--fs-pequeno); outline: none; scroll-margin-top: 80px;
}
dialog .campo { scroll-margin-top: 80px; scroll-margin-bottom: 96px; }
.resumo-erros:focus-visible { outline: 3px solid var(--c-primaria); outline-offset: 2px; }
.resumo-erros p { color: var(--c-erro); }
.resumo-erros ul { margin: 6px 0 0; padding-left: 20px; }
.resumo-erros a { color: var(--c-erro); }

/* ---------- 8. Cartões, selos, avisos ---------- */
.cartao {
  background: var(--c-superficie); border: 1px solid var(--c-divisor);
  border-radius: var(--raio); padding: var(--e-2); box-shadow: var(--sombra); min-width: 0;
}
@media (min-width: 720px) { .cartao { padding: 20px var(--e-3); } }
.cartao > h2, .secao-titulo { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 12px; }
.cartao-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-1); margin-bottom: 12px; }
.cartao-cab h2 { font-size: var(--fs-h3); font-weight: 600; }

.selo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px;
  font-size: var(--fs-rotulo); font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: var(--c-superficie);
}
.selo .ic { width: 14px; height: 14px; }
.selo-sucesso { color: var(--c-sucesso); }
.selo-alerta { color: var(--c-alerta); }
.selo-erro { color: var(--c-erro); }
.selo-info { color: var(--c-info); }
.selo-neutro { color: var(--c-texto-2); }
.selo-primaria { color: var(--c-primaria); }

.aviso {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px var(--e-2); margin-bottom: var(--e-2);
  border: 1px solid var(--c-divisor); border-left: 4px solid var(--c-info);
  border-radius: var(--raio-campo); background: var(--c-superficie); font-size: var(--fs-pequeno);
}
.aviso > .ic { color: var(--c-info); margin-top: 1px; }
.aviso-fechado { border-left-color: var(--c-primaria); }
.aviso-fechado > .ic { color: var(--c-primaria); }
.aviso-alerta { border-left-color: var(--c-alerta); }
.aviso-alerta > .ic { color: var(--c-alerta); }
.aviso-erro { border-left-color: var(--c-erro); }
.aviso-erro > .ic { color: var(--c-erro); }

/* ---------- 9. Resumos e KPIs ---------- */
.resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--e-2); }
@container tela (min-width: 760px) { .resumo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.resumo-item { background: var(--c-superficie); border: 1px solid var(--c-divisor); border-radius: var(--raio); padding: 12px; min-width: 0; }
.resumo-item dt { font-size: var(--fs-rotulo); color: var(--c-texto-2); font-weight: 500; }
.resumo-item dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.resumo-item dd small { display: block; font-size: var(--fs-rotulo); font-weight: 400; color: var(--c-texto-2); }

.kpis { display: grid; gap: var(--e-2); grid-template-columns: 1fr; margin-bottom: var(--e-2); }
@container tela (min-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container tela (min-width: 1100px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi-rotulo { font-size: var(--fs-pequeno); font-weight: 500; color: var(--c-texto-2); margin: 0; }
.kpi-valor { font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.kpi-detalhe { font-size: var(--fs-pequeno); color: var(--c-texto-2); line-height: 1.45; display: flex; gap: 6px; align-items: flex-start; }
.kpi-detalhe .ic { width: 16px; height: 16px; margin-top: 2px; }
.kpi .sobe { color: var(--c-sucesso); }
.kpi .desce { color: var(--c-alerta); }
.kpi a { font-size: var(--fs-pequeno); font-weight: 500; margin-top: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.ficticio { font-size: 12px; color: var(--c-argila); font-weight: 500; }

.barra { height: 8px; background: var(--c-areia); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--c-primaria); border-radius: 999px; }
.barra-argila > span { background: var(--c-argila); }

.dash-grade { display: grid; gap: var(--e-2); grid-template-columns: 1fr; margin-bottom: var(--e-2); }
@container tela (min-width: 860px) { .dash-grade { grid-template-columns: 1fr 1fr; } }
.contagens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-1); margin: 0; }
.contagens div { padding: 12px 8px; border-radius: var(--raio-campo); background: var(--c-fundo); text-align: center; }
.contagens dt { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--fs-rotulo); color: var(--c-texto-2); font-weight: 500; line-height: 1.3; }
.contagens dd { margin: 4px 0 0; font-size: 24px; font-weight: 600; }
.contagens .ic { width: 20px; height: 20px; }
.ok { color: var(--c-sucesso); } .neutro { color: var(--c-texto-2); } .atencao { color: var(--c-alerta); }
.contagens-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista-ocupacao { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.oc-cab { display: flex; justify-content: space-between; gap: var(--e-1); font-size: 16px; margin-bottom: 4px; }
.oc-cab strong { font-weight: 600; }

/* gráfico */
.grafico { width: 100%; min-height: 200px; }
.grafico svg { display: block; width: 100%; height: auto; }
.g-barra { fill: var(--c-primaria); }
.g-hachura-fundo { fill: var(--c-superficie); }
.g-hachura-linha { stroke: var(--c-primaria); }
.g-contorno { fill: none; stroke: var(--c-primaria); stroke-width: 1.5; }
.g-meta { stroke: var(--c-argila); stroke-width: 1.5; stroke-dasharray: 6 4; }
.g-meta-txt { fill: var(--c-argila); font-size: 13px; font-weight: 600; }
.g-valor { fill: var(--c-texto); font-size: 13px; font-weight: 600; }
.g-eixo { fill: var(--c-texto-2); font-size: 13px; }
.g-base { stroke: var(--c-divisor); stroke-width: 1; }
details.dados-tabela { margin-top: 12px; font-size: var(--fs-pequeno); }
details.dados-tabela summary { cursor: pointer; color: var(--c-primaria); font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--fs-rotulo); color: var(--c-texto-2); margin-top: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.leg-amostra { width: 14px; height: 14px; border-radius: 3px; background: var(--c-primaria); display: inline-block; }
.leg-parcial { background: repeating-linear-gradient(45deg, var(--c-primaria) 0 3px, var(--c-superficie) 3px 6px); border: 1px solid var(--c-primaria); }
.leg-meta { width: 18px; height: 0; border-top: 2px dashed var(--c-argila); display: inline-block; }

/* ---------- 10. Tabelas e listas ---------- */
.tabela-wrap { display: none; }
.lista-cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
/* tabela só quando a ÁREA DE CONTEÚDO comporta todas as colunas (não a janela) */
@container tela (min-width: 880px) {
  .tabela-wrap { display: block; overflow-x: auto; border: 1px solid var(--c-divisor); border-radius: var(--raio); background: var(--c-superficie); }
  .lista-cartoes.so-movel { display: none; }
}
table { width: 100%; border-collapse: collapse; font-size: var(--fs-tabela); line-height: 1.45; }
caption { text-align: left; padding: 12px var(--e-2); font-size: var(--fs-pequeno); color: var(--c-texto-2); }
th { text-align: left; font-size: var(--fs-rotulo); font-weight: 600; color: var(--c-texto); background: var(--c-areia); padding: 10px 12px; white-space: nowrap; }
th.num { text-align: right; }
td { padding: 10px 12px; border-top: 1px solid var(--c-divisor); vertical-align: top; }
tbody tr:hover td { background: var(--c-realce); }
tr.destaque td { background: var(--c-realce); }
.grupo-linha th { background: var(--c-fundo); font-size: var(--fs-pequeno); text-align: left; border-top: 1px solid var(--c-divisor); }
.grupo-linha th .num { float: right; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.cartao-linha {
  background: var(--c-superficie); border: 1px solid var(--c-divisor); border-radius: var(--raio);
  padding: 12px var(--e-2); display: grid; gap: 4px; font-size: var(--fs-pequeno);
}
.cartao-linha.destaque { border: 2px solid var(--c-primaria); padding: 11px 15px; }
.cl-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-1); font-size: 16px; }
.cl-topo strong { font-weight: 600; }
.cl-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; color: var(--c-texto-2); }
.cl-valores { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--c-texto-2); }
.cl-valores b { color: var(--c-texto); font-weight: 600; }
.cl-acoes { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: 6px; }
.mais { display: flex; justify-content: center; margin-top: var(--e-2); flex-direction: column; align-items: center; gap: 6px; }

.subtitulo-grupo { display: flex; justify-content: space-between; gap: var(--e-1); font-size: var(--fs-pequeno); font-weight: 600; margin: var(--e-2) 0 var(--e-1); color: var(--c-texto); }

/* categorias (Saídas) */
.lista-cat { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-cat li { display: grid; gap: 4px; }
.cat-cab { display: flex; justify-content: space-between; gap: var(--e-1); font-size: 15px; }
.cat-tipo { font-size: 12px; color: var(--c-texto-2); }

/* ---------- 11. Fechamento ---------- */
.status-mes { display: flex; gap: var(--e-2); align-items: flex-start; margin-bottom: var(--e-2); }
.status-mes .ic-grande { color: var(--c-primaria); }
.status-mes h2 { font-size: var(--fs-h3); font-weight: 600; }
.etapa { margin-bottom: var(--e-2); }
.etapa-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.etapa-num {
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-primaria); color: var(--c-primaria); font-weight: 600; font-size: 15px;
}
.etapa-feita .etapa-num { background: var(--c-primaria); color: var(--c-sobre-primaria); }
.etapa-cab h2 { font-size: var(--fs-h3); font-weight: 600; outline: none; }
.check { border-top: 1px solid var(--c-divisor); padding: 14px 0; }
.check:first-of-type { border-top: 0; padding-top: 0; }
.check-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.check-cab h3 { font-size: 16px; font-weight: 600; outline: none; }
.check-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: var(--e-1); }
.check-lista li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-1) var(--e-2);
  padding: 10px 12px; background: var(--c-fundo); border-radius: var(--raio-campo); font-size: var(--fs-pequeno);
}
.check-lista .acoes { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.motivo { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-pequeno); color: var(--c-texto-2); margin-top: var(--e-1); }
.motivo .ic { width: 16px; height: 16px; margin-top: 2px; }
.dre td, .dre th { padding: 9px 12px; }
.dre { border: 1px solid var(--c-divisor); border-radius: var(--raio); overflow: hidden; border-collapse: separate; border-spacing: 0; background: var(--c-superficie); }
.dre th[scope="row"] { background: none; font-weight: 400; font-size: var(--fs-tabela); white-space: normal; border-top: 1px solid var(--c-divisor); color: var(--c-texto); }
.dre .nivel-1 th[scope="row"] { padding-left: 32px; color: var(--c-texto-2); }
.dre .nivel-1 td { color: var(--c-texto-2); }
.dre .subtotal th[scope="row"], .dre .subtotal td { font-weight: 600; background: var(--c-fundo); }
.dre .resultado th[scope="row"], .dre .resultado td { font-weight: 600; font-size: 17px; background: var(--c-areia); }
.dre .pct { width: 72px; color: var(--c-texto-2); }
.dre-nota { font-size: var(--fs-pequeno); color: var(--c-texto-2); margin-top: 10px; }
.botoes { display: flex; flex-wrap: wrap; gap: var(--e-1); }
@media (max-width: 599px) { .botoes .btn { flex: 1 1 100%; } }
.mensagem-previa {
  margin: 8px 0 0; padding: 12px var(--e-2); border-left: 3px solid var(--c-primaria);
  background: var(--c-fundo); border-radius: 0 var(--raio-campo) var(--raio-campo) 0; font-size: 16px;
}
dl.lista-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: var(--fs-pequeno); }
dl.lista-dl dt { color: var(--c-texto-2); }
dl.lista-dl dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- 12. Histórico ---------- */
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.hist-item { background: var(--c-superficie); border: 1px solid var(--c-divisor); border-radius: var(--raio); padding: 12px var(--e-2); display: grid; gap: 6px; }
.hist-item.destaque { border: 2px solid var(--c-primaria); padding: 11px 15px; }
.hist-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hist-cab strong { font-weight: 600; }
.hist-meta { font-size: var(--fs-pequeno); color: var(--c-texto-2); }
.hist-campos { margin: 0; display: grid; gap: 4px; font-size: var(--fs-pequeno); }
.hist-campos div { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.hist-campos dt { font-weight: 600; }
.hist-campos dt::after { content: ":"; }
.hist-campos dd { margin: 0; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hist-campos .antes { color: var(--c-texto-2); }
.hist-campos .ic { width: 14px; height: 14px; color: var(--c-texto-2); }
.hist-just { font-size: var(--fs-pequeno); padding: 8px 12px; background: var(--c-fundo); border-radius: var(--raio-campo); }

/* ---------- 13. Estados ---------- */
.estado { text-align: center; padding: var(--e-5) var(--e-2); display: grid; justify-items: center; gap: 12px; }
.estado h2 { font-size: var(--fs-h3); font-weight: 600; }
.estado p { max-width: 46ch; color: var(--c-texto-2); }
.estado .aneis { width: 112px; height: 112px; color: var(--c-primaria); }
.estado-erro > .ic-grande { color: var(--c-erro); }
.estado-bloqueio > .ic-grande { color: var(--c-texto-2); }
.esqueleto { display: grid; gap: var(--e-2); }
.esq { background: var(--c-areia); border-radius: var(--raio); height: 96px; position: relative; overflow: hidden; }
.esq-linha { height: 18px; border-radius: 6px; }
.esq::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%); animation: brilho 1.4s infinite;
}
@keyframes brilho { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .esq::after { animation: none; }
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- 14. Diálogo e avisos flutuantes ---------- */
dialog {
  width: calc(100% - 24px); max-width: 600px; max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid var(--c-divisor); border-radius: var(--raio);
  background: var(--c-superficie); color: var(--c-texto); overflow: auto;
}
dialog::backdrop { background: var(--c-veu); }
.dialogo-cab {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-1);
  padding: 12px 12px 12px var(--e-3); border-bottom: 1px solid var(--c-divisor);
  position: sticky; top: 0; background: var(--c-superficie); z-index: 1;
}
.dialogo-cab h2 { font-size: var(--fs-h3); font-weight: 600; }
.dialogo-corpo { padding: var(--e-3); display: grid; gap: var(--e-2); }
.dialogo-rodape {
  display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--e-1);
  padding: var(--e-2) var(--e-3); border-top: 1px solid var(--c-divisor);
  position: sticky; bottom: 0; background: var(--c-superficie);
}
@media (max-width: 519px) { .dialogo-rodape .btn { flex: 1 1 100%; } .dialogo-corpo { padding: var(--e-2); } .dialogo-cab { padding-left: var(--e-2); } .dialogo-rodape { padding: 12px var(--e-2); } }
.nav-mais { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nav-mais a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: var(--raio-campo); color: var(--c-texto); text-decoration: none; font-weight: 500; }
.nav-mais a:hover, .nav-mais a[aria-current="page"] { background: var(--c-realce); }
.nav-mais a[aria-current="page"] { font-weight: 600; color: var(--c-primaria); }

.avisos {
  position: fixed; left: var(--e-2); right: var(--e-2); bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 50; display: grid; gap: var(--e-1); pointer-events: none;
}
@media (min-width: 960px) { .avisos { left: auto; right: var(--e-3); bottom: var(--e-3); width: 400px; } }
.aviso-flutuante {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px var(--e-2); border-radius: var(--raio-campo);
  background: var(--c-texto); color: var(--c-fundo); font-size: var(--fs-pequeno); font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.aviso-flutuante .ic { width: 18px; height: 18px; margin-top: 1px; }

.rodape-ficticio { margin-top: var(--e-4); font-size: var(--fs-rotulo); color: var(--c-texto-2); display: flex; gap: 6px; align-items: center; }
.rodape-ficticio .ic { width: 14px; height: 14px; }

@media print {
  .faixa, .lateral, .topo-movel, .barra-inferior, .cab-acoes, .filtros { display: none !important; }
}

/* ---------- 15. Painel real (acréscimos ao protótipo) ---------- */
/* O atributo hidden vale mesmo onde o layout define display (ex.: .app no desktop) */
[hidden] { display: none !important; }

/* Faixa de homologação: reaproveita a .faixa do protótipo */
.faixa-homologacao { justify-content: flex-start; }

/* Telas de acesso (entrar, 2 fatores, sem acesso) */
.acesso {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e-3) var(--e-2) var(--e-5);
}
.acesso-caixa {
  width: 100%; max-width: 440px;
  background: var(--c-superficie); border: 1px solid var(--c-divisor); border-radius: var(--raio);
  padding: var(--e-3) var(--e-2); box-shadow: var(--sombra);
  display: grid; gap: var(--e-2);
}
@media (min-width: 520px) { .acesso-caixa { padding: var(--e-4); } }
.acesso-caixa h1 { font-size: 22px; font-weight: 600; outline: none; }
.acesso-caixa .marca { margin-bottom: var(--e-1); }
.acesso-caixa form { display: grid; gap: var(--e-2); }
.acesso-caixa .btn { width: 100%; }
.senha-wrap { display: flex; gap: var(--e-1); }
.senha-wrap input { flex: 1 1 auto; min-width: 0; }
.senha-wrap .btn { width: auto; flex: none; }
.passos { margin: 0; padding-left: 1.3em; display: grid; gap: var(--e-1); font-size: var(--fs-pequeno); }
.qr { display: grid; justify-items: center; gap: var(--e-1); padding: var(--e-2); background: #FFFFFF; border-radius: var(--raio-campo); border: 1px solid var(--c-divisor); }
.qr img { width: 200px; height: 200px; }
.chave-manual { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; letter-spacing: .08em; word-break: break-all; color: #2A2724; }
.codigo-mfa { font-size: 24px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

/* Perfil, Sair e tema */
.perfil-acoes { display: grid; gap: var(--e-1); margin-top: 12px; }
.perfil-acoes .campo select { min-height: 40px; }
.topo-direita { display: flex; align-items: center; gap: var(--e-1); }
.barra-inferior ul.itens-2 { grid-template-columns: repeat(2, 1fr); }
.barra-inferior ul.itens-3 { grid-template-columns: repeat(3, 1fr); }
.barra-inferior ul.itens-4 { grid-template-columns: repeat(4, 1fr); }

/* Linha de entrada estornada */
.estornado td, .cartao-linha.estornado { color: var(--c-texto-2); }
.estornado .num { text-decoration: line-through; }

/* Esqueleto acessível: o texto "Carregando…" é anunciado pela região viva */
.carregando-texto { min-height: 1px; }

@media print {
  .faixa-homologacao, .perfil-acoes, .botoes, .avisos, .pular, .rodape-ajuda { display: none !important; }
  .app { display: block !important; }
  main { padding: 0 !important; max-width: none !important; }
  body { background: #FFFFFF; color: #000000; font-size: 12pt; }
}

/* Coluna do conteúdo + rodapé de ajuda (CVV/SAMU em todas as telas) */
.coluna { min-width: 0; display: flex; flex-direction: column; }
.coluna main { flex: 1 0 auto; }
.rodape-ajuda {
  padding: var(--e-2) var(--e-2) calc(96px + env(safe-area-inset-bottom));
  font-size: var(--fs-pequeno); color: var(--c-texto-2); max-width: 1280px;
}
.rodape-ajuda a { color: var(--c-primaria); font-weight: 600; }
.acesso .rodape-ajuda { padding: var(--e-2) 0 0; text-align: center; }
.acesso { grid-template-rows: 1fr auto; }

/* Itens do menu de fases futuras */
.nav-breve {
  margin-left: auto; padding: 0 6px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--c-texto-2); border: 1px solid var(--c-divisor);
  white-space: nowrap;
}
/* No menu lateral fica embaixo do nome (não alarga a coluna de 256px). */
.lateral nav, .nav-lista a > span { min-width: 0; }
.nav-lista .nav-breve { display: block; margin: 0; padding: 0; border: 0; line-height: 1.2; }
.nav-lista a[aria-current="page"] .nav-breve { color: var(--c-sobre-primaria); }

/* E2 · Escolher área */
.escolha-area { display: grid; gap: var(--e-1); }
.escolha-area .btn { min-height: 56px; justify-content: flex-start; }

/* Enquanto o painel confere a sessão (antes da primeira tela) */
.inicio-carregando { padding: var(--e-5) var(--e-2); text-align: center; color: var(--c-texto-2); }

/* ---------- 16. Cadastros (pacientes, terapeutas, meu perfil) ---------- */
/* Abas da ficha: cada aba é um link com endereço próprio; rolam na horizontal no celular. */
.abas { margin: 0 0 var(--e-2); border-bottom: 1px solid var(--c-divisor); overflow-x: auto; scrollbar-width: thin; }
.abas ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; min-width: max-content; }
.abas a {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo); padding: 0 14px;
  color: var(--c-texto-2); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; white-space: nowrap;
}
.abas a:hover { color: var(--c-texto); background: var(--c-realce); }
.abas a[aria-current="page"] { color: var(--c-primaria); border-bottom-color: var(--c-primaria); font-weight: 600; }
.abas .nav-breve { margin-left: 0; }
.tags-cab { margin: -8px 0 var(--e-2); }
.form-ficha { display: grid; gap: var(--e-2); max-width: 760px; }
.form-ficha .secao-titulo { margin-bottom: 0; }
.grupo-campos { border: 1px solid var(--c-divisor); border-radius: var(--raio-campo); padding: 12px var(--e-2) var(--e-2); margin: 0; display: grid; gap: var(--e-2); min-width: 0; }
.grupo-campos > legend { padding: 0 6px; font-size: var(--fs-pequeno); font-weight: 600; }
.grade-3 { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 520px) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.linha-cep { display: grid; gap: var(--e-1); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 520px) { .linha-cep { grid-template-columns: minmax(0, 220px) auto; } .linha-cep > .btn { margin-top: 26px; } }
.opcao-chk { justify-self: start; }
dl.lista-leitura dd { text-align: left; font-weight: 500; }
.lista-simples { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--fs-pequeno); }
.num-txt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.revelavel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.status-banco { margin-bottom: var(--e-2); max-width: 760px; }

/* ---------- 17. Fase 3: sino, notas fiscais, atendimento e grade ---------- */
.sino { position: relative; }
.sino .contador { position: absolute; top: 2px; right: 0; margin: 0; }
.sino[aria-current="page"], .sino-lateral[aria-current="page"] { color: var(--c-primaria); background: var(--c-realce); }
.sino-lateral { width: 100%; justify-content: flex-start; }
.sino-lateral .contador { margin-left: auto; }
.hist-item.lida { opacity: .8; }
.nota-confira { border-left: 4px solid var(--c-alerta); }
.bloco-grade { margin-bottom: var(--e-2); max-width: 860px; display: grid; gap: 10px; }
.bloco-grade > h2 { font-size: var(--fs-h3); font-weight: 600; outline: none; }
.subtitulo-bloco { font-size: 16px; font-weight: 600; margin-top: 8px; }
.lista-locais, .lista-grade, .lista-grade ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-locais > li, .lista-grade ul > li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
  padding: 10px 12px; background: var(--c-fundo); border-radius: var(--raio-campo); font-size: var(--fs-pequeno);
}
.lista-locais .ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--c-texto-2); }
.lista-grade > li > h3 { font-size: var(--fs-pequeno); font-weight: 600; margin: 4px 0; }
.novo-local summary { cursor: pointer; color: var(--c-primaria); font-weight: 500; min-height: var(--alvo); display: inline-flex; align-items: center; gap: 6px; }
.novo-local .form-pilha { margin-top: 8px; }
dl.respostas { margin: 6px 0 0; display: grid; gap: 2px 0; font-size: var(--fs-pequeno); padding: 8px 12px; background: var(--c-fundo); border-radius: var(--raio-campo); }
dl.respostas dt { color: var(--c-texto-2); }
dl.respostas dd { margin: 0 0 6px; font-weight: 500; }

/* Selos longos (conferência bancária, notas, atendimento): quebram linha no celular */
.status-banco .selo, .bloco-grade .selo, .lista-notas .selo, .hist-item .selo { white-space: normal; max-width: 100%; }

/* ---------- Recibo (impressão A4). Igual em painel/estilo.css e portal/portal.css ---------- */
.recibo-impressao { display: none; }
.recibo-folha { max-width: 180mm; margin: 0 auto; padding: 0; color: #111; background: #fff; font: 11pt/1.5 Inter, Arial, sans-serif; display: grid; gap: 8mm; }
.recibo-cab { display: flex; justify-content: space-between; gap: 8mm; border-bottom: 2px solid #2F5D50; padding-bottom: 5mm; }
.recibo-cab p { margin: 0; }
.recibo-fantasia { font: 600 18pt Fraunces, Georgia, serif; color: #2F5D50; }
.recibo-num { text-align: right; flex: none; }
.recibo-titulo { font-weight: 700; letter-spacing: .12em; font-size: 14pt; }
.recibo-valor-cab { font-size: 16pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.recibo-corpo { display: grid; gap: 5mm; }
.recibo-corpo > p { margin: 0; text-align: justify; }
.recibo-dl { display: grid; grid-template-columns: auto 1fr; gap: 1.5mm 6mm; margin: 0; }
.recibo-dl dt { color: #555; }
.recibo-dl dd { margin: 0; font-weight: 600; }
.recibo-obs { font-size: 10pt; color: #333; border-left: 3px solid #2F5D50; padding-left: 3mm; }
.recibo-falta { color: #A8322A; font-weight: 600; }
.recibo-rodape { display: grid; gap: 14mm; margin-top: 4mm; }
.recibo-rodape p { margin: 0; }
.recibo-assina { border-top: 1px solid #111; padding-top: 2mm; width: 85mm; text-align: center; justify-self: center; }
/* Página nomeada: margem zero só no recibo (o navegador não imprime cabeçalho/rodapé); a DRE continua com a margem padrão */
@page recibo { size: A4; margin: 0; }
@media print {
  body.imprimindo #recibo-impressao { page: recibo; }
  body.imprimindo > *:not(#recibo-impressao) { display: none !important; }
  body.imprimindo { background: #fff !important; margin: 0; }
  body.imprimindo #recibo-impressao { display: block !important; padding: 20mm 15mm; }
}

/* ---------- 18. Agenda geral (G2) ---------- */
.filtros-agenda { margin-bottom: 12px; }
.semana-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--e-2); }
.semana-rotulo { font-weight: 600; text-align: center; flex: 1 1 auto; }
@media (max-width: 519px) { .semana-nav .btn span { display: none; } }
.ag-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: var(--fs-pequeno); color: var(--c-texto-2); margin-bottom: 12px; }
.ag-legenda .leg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.ag-leg-faixa { background: var(--c-realce); border: 1px dashed var(--c-primaria); }
.ag-leg-reserva { background: var(--c-superficie); border: 2px solid var(--c-alerta); }
.ag-leg-bloq { background: repeating-linear-gradient(45deg, var(--c-areia) 0 4px, var(--c-superficie) 4px 8px); border: 1px solid var(--c-borda-campo); }
.ag-canc { min-height: 36px; margin-left: auto; }
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
.dia { display: grid; justify-items: center; padding: 6px 2px; min-height: 60px; border: 1px solid var(--c-borda-campo); border-radius: var(--raio-campo); background: var(--c-superficie); color: var(--c-texto); cursor: pointer; font: inherit; }
.dia[aria-pressed="true"] { background: var(--c-primaria); color: var(--c-sobre-primaria); border-color: var(--c-primaria); }
.dia-nome { font-size: 12px; text-transform: uppercase; } .dia-num { font-size: 18px; font-weight: 600; line-height: 1.2; } .dia-qtd { font-size: 12px; }
.ag-semana { display: grid; gap: 12px; }
.ag-dia { display: none; background: var(--c-superficie); border: 1px solid var(--c-divisor); border-radius: var(--raio); padding: 10px; min-width: 0; align-content: start; gap: 8px; }
.ag-dia.dia-atual { display: grid; }
.ag-dia.hoje { border-color: var(--c-primaria); }
.ag-dia > h3 { font-size: 15px; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@container tela (min-width: 900px) {
  .ag-chips { display: none; }
  .ag-semana { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .ag-dia, .ag-dia.dia-atual { display: grid; padding: 8px 6px; }
}
.ag-grupo { display: grid; gap: 4px; }
.ag-grupo > h4 { font-size: 12px; font-weight: 600; color: var(--c-texto-2); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; overflow-wrap: anywhere; }
.ag-faixa, .ag-bloqueio { display: flex; gap: 4px; align-items: flex-start; font-size: 12px; padding: 4px 6px; border-radius: 6px; margin: 0; overflow-wrap: anywhere; }
.ag-faixa { background: var(--c-realce); border: 1px dashed var(--c-primaria); color: var(--c-texto); }
.ag-bloqueio { background: repeating-linear-gradient(45deg, var(--c-areia) 0 4px, var(--c-superficie) 4px 8px); border: 1px solid var(--c-borda-campo); }
.ag-faixa .ic, .ag-bloqueio .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ag-sessao {
  display: grid; gap: 2px; text-align: left; width: 100%; padding: 6px 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--c-texto);
  background: var(--c-fundo); border: 1px solid var(--c-borda-campo); border-left: 4px solid var(--c-primaria); border-radius: 6px; min-width: 0;
}
.ag-sessao:hover { background: var(--c-realce); }
.ag-sessao .selo { white-space: normal; max-width: 100%; font-size: 12px; }
.ag-hora { font-weight: 600; font-variant-numeric: tabular-nums; } .ag-pac { font-weight: 600; overflow-wrap: anywhere; } .ag-outro { color: var(--c-texto-2); font-size: 12px; overflow-wrap: anywhere; }
.ag-reservada { border: 2px solid var(--c-alerta); border-left-width: 4px; background: var(--c-superficie); }
.ag-cancelada, .ag-nao_realizada { opacity: .7; border-left-color: var(--c-borda-campo); }
.ag-realizada { border-left-color: var(--c-texto-2); }
.destaque-data { font-size: 18px; font-weight: 600; }

/* ---------- 19. Configurações e Nota Fiscal / Recibos ---------- */
.cfg-grupo { margin-bottom: var(--e-2); }
.cfg-campos { align-items: start; }
.cfg-alt { font-size: 12px; }
.nf-lote { display: grid; gap: 8px; margin-bottom: var(--e-2); }
.nf-lote p { font-size: var(--fs-pequeno); }
.nf-sel { display: inline-flex; align-items: center; min-width: 32px; min-height: 32px; }
.nf-sel input { width: 20px; height: 20px; accent-color: var(--c-primaria); }
.nf-tomador { margin: 4px 0; }
.texto-termo { min-height: 260px !important; font-family: inherit; }
.termo-texto { white-space: pre-wrap; font-size: var(--fs-pequeno); max-height: 280px; overflow: auto; padding: 12px; margin-top: 8px; background: var(--c-fundo); border-radius: var(--raio-campo); }
.liquido-calc strong { font-size: 16px; }