/* ==========================================================================
   Dashboard Presencial — Escola Fran Tonello

   Paleta: verde/creme da escola no "cromo" (fundos, menu, botões); as SÉRIES
   dos gráficos usam a paleta validada para daltonismo — verde e laranja lado a
   lado ficam indistinguíveis para protanopia/deuteranopia, por isso os dados
   usam azul, laranja e roxo. Os três passaram no validador (separação CVD
   mínima ΔE 24,7 no claro; 25,8 no escuro).

   O laranja fica em 2,99:1 contra o creme — um fio abaixo de 3:1. Por isso
   toda série laranja aparece SEMPRE acompanhada de rótulo visível e de uma
   tabela com os mesmos números logo abaixo do gráfico: a cor nunca é o único
   jeito de ler o dado.
   ========================================================================== */

:root {
  color-scheme: light;

  /* superfícies e tinta — identidade da escola */
  --plano:        #f4efe0;
  --superficie:   #fbf7ea;
  --superficie-2: #f0ead6;
  --superficie-3: #e8e0c9;
  --tinta:        #2b3720;
  --tinta-2:      #52514e;
  --tinta-fraca:  #74795f;
  --borda:        rgba(11, 11, 11, .10);
  --grade:        #e1e0d9;
  --eixo:         #c3c2b7;

  --verde:        #4d6a2f;
  --verde-esc:    #3b5223;
  --lima:         #9ec24c;

  /* séries dos gráficos (validadas para o fundo creme) */
  --serie-1:      #2a78d6;   /* faturamento */
  --serie-2:      #eb6834;   /* investimento em anúncios */
  --serie-3:      #7b53c9;   /* inscrições */

  /* status — só quando a cor SIGNIFICA bom/ruim, sempre com ícone + texto */
  --bom:          #0ca30c;
  --atencao:      #fab219;
  --grave:        #ec835a;
  --critico:      #d03b3b;

  --raio:         14px;
  --sombra:       0 1px 2px rgba(43, 55, 32, .06), 0 8px 24px -16px rgba(43, 55, 32, .3);
  --sombra-alta:  0 12px 40px -12px rgba(43, 55, 32, .35), 0 2px 6px rgba(43, 55, 32, .08);
  --fonte:        system-ui, -apple-system, "Segoe UI", sans-serif;
  --lateral-larg: 232px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plano:        #0d0d0d;
    --superficie:   #1a1a19;
    --superficie-2: #232322;
    --superficie-3: #2e2e2c;
    --tinta:        #ffffff;
    --tinta-2:      #c3c2b7;
    --tinta-fraca:  #898781;
    --borda:        rgba(255, 255, 255, .10);
    --grade:        #2c2c2a;
    --eixo:         #383835;
    --verde:        #7ea34f;
    --verde-esc:    #9ec24c;
    --serie-1:      #3987e5;
    --serie-2:      #d95926;
    --serie-3:      #9b74e0;
    --sombra:       0 1px 2px rgba(0, 0, 0, .4);
    --sombra-alta:  0 12px 40px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plano:        #0d0d0d;
  --superficie:   #1a1a19;
  --superficie-2: #232322;
  --superficie-3: #2e2e2c;
  --tinta:        #ffffff;
  --tinta-2:      #c3c2b7;
  --tinta-fraca:  #898781;
  --borda:        rgba(255, 255, 255, .10);
  --grade:        #2c2c2a;
  --eixo:         #383835;
  --verde:        #7ea34f;
  --verde-esc:    #9ec24c;
  --serie-1:      #3987e5;
  --serie-2:      #d95926;
  --serie-3:      #9b74e0;
  --sombra:       0 1px 2px rgba(0, 0, 0, .4);
  --sombra-alta:  0 12px 40px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plano);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ======================================================== esqueleto ===== */

.app { display: flex; min-height: 100vh; }

.palco {
  flex: 1; min-width: 0;
  padding: 0 clamp(14px, 2.6vw, 30px) 64px;
}

/* ---------------------------------------------------- barra lateral ---- */

.lateral {
  width: var(--lateral-larg); flex: none;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 18px 12px 14px;
}

.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; }
.marca-selo {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: var(--verde); color: #fff;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.marca-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marca-txt b { font-size: .95rem; font-weight: 680; letter-spacing: -.01em; }
.marca-txt i { font-style: normal; font-size: .72rem; color: var(--tinta-fraca); }

.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.aba {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left; font: inherit;
  border: 0; background: transparent; color: var(--tinta-2);
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  transition: background .13s, color .13s;
}
.aba svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.aba-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.aba-txt b { font-size: .87rem; font-weight: 600; }
.aba-txt i { font-style: normal; font-size: .7rem; color: var(--tinta-fraca); }
.aba:hover { background: var(--superficie-2); color: var(--tinta); }
.aba.on { background: var(--verde); color: #fff; }
.aba.on svg { opacity: 1; }
.aba.on i { color: rgba(255, 255, 255, .72); }

.lateral-pe { border-top: 1px solid var(--borda); padding-top: 12px; }
.carimbo { margin: 0 0 9px; padding: 0 4px; font-size: .7rem; color: var(--tinta-fraca); line-height: 1.4; }
.lateral-pe .btn { width: 100%; justify-content: center; }

.veu { display: none; }

/* ---------------------------------------------------------- topo ------- */

.topo {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 22px 0 18px;
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(var(--plano) 72%, transparent);
}
.topo-titulo { flex: 1; min-width: 180px; }
.topo h1 { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 700; letter-spacing: -.02em; }
.topo .sub { margin: 2px 0 0; color: var(--tinta-fraca); font-size: .8rem; }

.acoes { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.menu-alterna { display: none; }

/* ---------------------------------------------------------- botões ----- */

.btn {
  font: inherit; font-size: .84rem; font-weight: 600;
  border: 1px solid var(--borda); border-radius: 100px;
  background: var(--superficie); color: var(--tinta);
  padding: 8px 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover { background: var(--superficie-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.btn-forte { background: var(--verde); border-color: transparent; color: #fff; }
.btn-forte:hover { background: var(--verde-esc); }
.btn-fino { padding: 6px 13px; font-size: .8rem; }
.btn-so-icone { padding: 8px 11px; font-size: 1rem; line-height: 1; }
.btn[disabled] { opacity: .55; cursor: progress; }

.btn.girando svg, .btn.girando { animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

select.filtro, input.campo {
  font: inherit; font-size: .84rem;
  border: 1px solid var(--borda); border-radius: 100px;
  background: var(--superficie); color: var(--tinta);
  padding: 7px 14px; cursor: pointer;
}
input.campo { cursor: text; }
select.filtro:focus-visible, input.campo:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

/* ================================================= filtro de datas ===== */

.periodo { position: relative; }
.periodo-botao svg { width: 15px; height: 15px; }
.periodo-botao .seta-baixo { color: var(--tinta-fraca); font-size: .7rem; }

.periodo-painel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; box-shadow: var(--sombra-alta);
  min-width: 640px; overflow: hidden;
}
.periodo-corpo { display: flex; }

/* presets como LINHAS — ninguém briga com um calendário para dizer "30 dias" */
.presets {
  list-style: none; margin: 0; padding: 8px;
  width: 186px; flex: none;
  border-right: 1px solid var(--borda);
  max-height: 340px; overflow-y: auto;
}
.presets li { margin: 0; }
.presets button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: .83rem; text-align: left;
  border: 0; background: transparent; color: var(--tinta-2);
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.presets button:hover { background: var(--superficie-2); color: var(--tinta); }
.presets button .tique { width: 16px; flex: none; font-size: 16px; font-weight: 700; color: var(--verde); }
.presets button.on { color: var(--tinta); font-weight: 650; }

.calendarios { padding: 10px 12px 12px; flex: 1; min-width: 0; position: relative; }
.cal-topo { position: absolute; inset: 12px 14px auto; display: flex; justify-content: space-between; pointer-events: none; }
.cal-nav {
  pointer-events: auto; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--tinta-2); width: 26px; height: 26px; border-radius: 8px;
  cursor: pointer; font-size: .95rem; line-height: 1; display: grid; place-items: center;
}
.cal-nav:hover { background: var(--superficie-2); color: var(--tinta); }

.cal-par { display: flex; gap: 22px; }
.cal { flex: 1; min-width: 0; }
.cal h4 {
  margin: 2px 0 8px; text-align: center; font-size: .8rem; font-weight: 650;
  text-transform: capitalize;
}
.cal table { width: 100%; border-collapse: collapse; }
.cal th {
  font-size: .64rem; font-weight: 600; color: var(--tinta-fraca);
  text-transform: uppercase; padding-bottom: 4px; font-variant-numeric: tabular-nums;
}
.cal td { padding: 0; }
.cal button {
  width: 100%; aspect-ratio: 1; min-height: 30px;
  font: inherit; font-size: .78rem; font-variant-numeric: tabular-nums;
  border: 0; background: transparent; color: var(--tinta-2);
  cursor: pointer; border-radius: 7px;
}
.cal button:hover:not([disabled]) { background: var(--superficie-2); color: var(--tinta); }
.cal button[disabled] { color: var(--tinta-fraca); opacity: .35; cursor: default; }
.cal td.faixa { background: color-mix(in srgb, var(--verde) 12%, transparent); }
.cal td.faixa:first-child, .cal td.borda-e { border-radius: 7px 0 0 7px; }
.cal td.faixa:last-child, .cal td.borda-d { border-radius: 0 7px 7px 0; }
.cal button.ponta { background: var(--verde); color: #fff; font-weight: 650; }
.cal button.ponta:hover { background: var(--verde-esc); }
.cal button.hoje:not(.ponta) { box-shadow: inset 0 0 0 1px var(--eixo); }

.periodo-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--borda); padding: 10px 14px;
  background: var(--superficie-2);
}
.periodo-eco { font-size: .8rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.periodo-pe-botoes { display: flex; gap: 8px; }

/* ========================================================= avisos ====== */

.faixa-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--borda); border-left: 3px solid var(--atencao);
  background: var(--superficie); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 10px; font-size: .86rem;
}
.faixa-aviso.erro { border-left-color: var(--critico); }
.faixa-aviso .ic { flex: none; font-size: 1rem; line-height: 1.35; }
.faixa-aviso strong { font-weight: 650; }

/* ============================================================ KPIs ===== */

.kpis {
  display: grid; gap: 12px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
}
.kpi {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 15px 17px 16px; box-shadow: var(--sombra);
}
.kpi .rotulo {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-fraca); margin-bottom: 7px;
}
.kpi .valor {
  font-size: clamp(1.45rem, 2.7vw, 1.8rem); font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi .nota { font-size: .76rem; color: var(--tinta-2); margin-top: 4px; }

/* variação contra o período anterior — sempre com sinal, nunca só a cor.
   Em coluna para o percentual e a referência nunca se partirem no meio. */
.delta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-size: .74rem; font-weight: 650; font-variant-numeric: tabular-nums;
  margin-top: 5px; line-height: 1.35;
}
.delta.sobe { color: var(--bom); }
.delta.desce { color: var(--critico); }
.delta.igual { color: var(--tinta-fraca); }
.delta .ref { color: var(--tinta-fraca); font-weight: 400; }

/* ========================================================= cartões ===== */

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 18px 20px 20px; margin-bottom: 18px;
}
.cartao > h2 { margin: 0 0 3px; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.cartao > .legenda-topo { margin: 0 0 16px; font-size: .81rem; color: var(--tinta-fraca); }
.cartao-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.cartao-cabeca h2 { margin: 0 0 3px; font-size: 1rem; font-weight: 650; }
.cartao-cabeca .legenda-topo { margin: 0; font-size: .81rem; color: var(--tinta-fraca); }
.cartao-cabeca .acoes-cartao { display: flex; gap: 8px; flex-wrap: wrap; }

.grade-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .grade-2 { grid-template-columns: 1fr; } }

/* ========================================================= gráfico ===== */

.grafico-caixa { position: relative; }
.grafico-caixa svg { display: block; width: 100%; height: auto; overflow: visible; }

.legenda { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 12px; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; font-size: .81rem; color: var(--tinta-2); }
.legenda i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legenda i.traco { width: 14px; height: 3px; border-radius: 2px; }
.legenda i.tracejado {
  width: 14px; height: 0; border-radius: 0;
  border-top: 2px dashed var(--tinta-fraca); background: none !important;
}

.dica {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: var(--sombra-alta);
  padding: 9px 12px; font-size: .8rem; min-width: 158px;
  opacity: 0; transition: opacity .1s;
}
.dica.on { opacity: 1; }
.dica .d-data { font-weight: 650; margin-bottom: 6px; font-size: .78rem; color: var(--tinta-2); }
.dica .d-linha { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
/* o valor lidera, o nome da série é secundário: quem lê já sabe a série */
.dica .d-linha b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dica .d-nome { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); }
.dica .d-nome i { width: 12px; height: 2.5px; border-radius: 2px; flex: none; }

/* ========================================================= tabelas ===== */

.rolagem { overflow-x: auto; }

/* Espaçamento apertado de propósito: com dez colunas, 12px de respiro em cada
   lado empurrava a coluna Situação para fora da tela num monitor de 1440. */
table.turmas { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.turmas th, table.turmas td { padding: 9px 10px; text-align: left; white-space: nowrap; }
table.turmas th:first-child, table.turmas td:first-child { padding-left: 2px; }
table.turmas th:last-child, table.turmas td:last-child { padding-right: 2px; }
table.turmas th {
  font-size: .7rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-fraca); border-bottom: 1px solid var(--eixo);
  position: sticky; top: 0; background: var(--superficie); z-index: 2;
}
table.turmas th[data-col] { cursor: pointer; user-select: none; }
table.turmas th[data-col]:hover { color: var(--tinta); }
table.turmas th.num, table.turmas td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.turmas th .seta { opacity: .5; font-size: .7em; }
table.turmas tbody tr { border-bottom: 1px solid var(--grade); }
table.turmas tbody tr.turma { cursor: pointer; }
table.turmas tbody tr:hover { background: var(--superficie-2); }
table.turmas tbody tr.passada { opacity: .5; }
table.turmas tbody tr.fim-de-semana td { color: var(--tinta-fraca); }
table.turmas tbody tr.total { border-top: 2px solid var(--eixo); font-weight: 700; background: var(--superficie-2); }
table.turmas tbody tr.total:hover { background: var(--superficie-2); }
table.turmas td.curso { white-space: normal; min-width: 158px; font-weight: 600; }
table.turmas td .tipo { display: block; font-weight: 400; font-size: .73rem; color: var(--tinta-fraca); }

/* mini-barra dentro da célula: magnitude sem tirar o número do lugar.
   O display:block do preenchimento é obrigatório — são <span>, e um elemento
   inline ignora largura e altura, então a barra ficava sempre vazia. */
.barra-celula { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.barra-celula .trilho {
  display: block; width: 54px; height: 6px; border-radius: 3px;
  background: var(--grade); overflow: hidden; flex: none;
}
.barra-celula .preenche { display: block; height: 100%; border-radius: 3px; }

/* barra de ocupação — uma cor só (magnitude), o número ao lado é o rótulo */
.ocupa { display: flex; align-items: center; gap: 8px; min-width: 112px; }
.ocupa .trilho { flex: 1; height: 7px; border-radius: 4px; background: var(--grade); overflow: hidden; }
.ocupa .preenche { height: 100%; border-radius: 4px; background: var(--serie-1); }
.ocupa .pct { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 38px; text-align: right; }

/* selo de atenção — ícone + texto, nunca só a cor */
.selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .71rem; font-weight: 650; padding: 3px 9px; border-radius: 100px;
  border: 1px solid var(--borda); white-space: nowrap;
}
.selo.risco  { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 40%, transparent); }
.selo.olho   { color: var(--grave);   border-color: color-mix(in srgb, var(--grave) 45%, transparent); }
.selo.cheia  { color: var(--bom);     border-color: color-mix(in srgb, var(--bom) 40%, transparent); }
.selo.mudo   { color: var(--tinta-fraca); }

.vazio { padding: 34px 10px; text-align: center; color: var(--tinta-fraca); font-size: .87rem; }

/* ========================================================== alunas ===== */

tr.detalhe td { background: var(--superficie-2); padding: 0; }
.lista-alunos { padding: 13px 16px 16px; }
.lista-alunos h4 {
  margin: 0 0 9px; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-fraca);
}
.lista-alunos ol { margin: 0; padding-left: 20px; font-size: .83rem; columns: 2; column-gap: 32px; }
.lista-alunos li { margin-bottom: 4px; break-inside: avoid; }
.lista-alunos .quando { color: var(--tinta-fraca); font-size: .92em; }
@media (max-width: 760px) { .lista-alunos ol { columns: 1; } }

/* =========================================================== metas ===== */

.meta-cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 17px 19px 19px;
}
.meta-cartao h3 {
  margin: 0 0 2px; font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-fraca);
}
.meta-numeros { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 6px 0 3px; }
.meta-numeros .real {
  font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.meta-numeros .alvo { font-size: .85rem; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }

/* trilho de progresso com marca de ritmo: onde a meta deveria estar HOJE */
.progresso { position: relative; height: 12px; border-radius: 7px; background: var(--grade); overflow: hidden; margin: 12px 0 8px; }
.progresso .feito { height: 100%; border-radius: 7px; background: var(--serie-1); transition: width .3s; }
.progresso.batida .feito { background: var(--bom); }
.progresso .ritmo {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--tinta); opacity: .55; border-radius: 2px;
}
.progresso-pes {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .76rem; color: var(--tinta-2); font-variant-numeric: tabular-nums;
}

.meta-recado { font-size: .82rem; color: var(--tinta-2); margin: 10px 0 0; }
.meta-recado b { font-weight: 680; }
.meta-recado.bom { color: var(--bom); }
.meta-recado.risco { color: var(--critico); }

.meta-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.meta-campo { display: flex; flex-direction: column; gap: 4px; }
.meta-campo label { font-size: .72rem; font-weight: 600; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .03em; }
.meta-campo input {
  font: inherit; font-size: .87rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--eixo); border-radius: 9px;
  background: var(--plano); color: var(--tinta);
  padding: 8px 11px; width: 128px;
}
.meta-campo input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.meta-salvo { font-size: .8rem; color: var(--bom); font-weight: 600; opacity: 0; transition: opacity .2s; }
.meta-salvo.on { opacity: 1; }

/* ===================================================== diagnóstico ===== */

details.diag { margin-top: 8px; }
details.diag > summary {
  cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--tinta-2);
  padding: 10px 0; list-style: none; display: flex; align-items: center; gap: 8px;
}
details.diag > summary::-webkit-details-marker { display: none; }
details.diag > summary::before { content: "▸"; transition: transform .15s; color: var(--tinta-fraca); }
details.diag[open] > summary::before { transform: rotate(90deg); }
.diag-corpo { font-size: .83rem; color: var(--tinta-2); }
.diag-corpo ul { margin: 6px 0 14px; padding-left: 20px; }
.diag-corpo li { margin-bottom: 4px; }
.diag-corpo code {
  font-size: .92em; background: var(--superficie-2); padding: 1px 5px; border-radius: 5px;
  word-break: break-all;
}
.quando { color: var(--tinta-fraca); }

/* ======================================================= carregando ==== */

/* enquanto rebusca, o conteúdo antigo continua na tela — sem esqueleto,
   sem pulo de layout, sem piscada */
.conteudo.ocupado { opacity: .5; transition: opacity .15s; pointer-events: none; }

/* =========================================================== login ===== */

.login-plano { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-caixa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 18px; box-shadow: var(--sombra);
  padding: 34px 32px; width: 100%; max-width: 370px; text-align: center;
}
.login-caixa h1 { margin: 0 0 4px; font-size: 1.2rem; }
.login-caixa p { margin: 0 0 22px; color: var(--tinta-fraca); font-size: .85rem; }
.login-caixa input {
  font: inherit; width: 100%; padding: 12px 15px; margin-bottom: 12px;
  border: 1px solid var(--eixo); border-radius: 10px;
  background: var(--plano); color: var(--tinta);
}
.login-caixa input:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.login-caixa .btn { width: 100%; justify-content: center; padding: 12px; }
.login-erro { color: var(--critico); font-size: .84rem; margin-bottom: 12px; font-weight: 600; }

/* ======================================================= telas menores = */

@media (max-width: 940px) {
  .lateral {
    position: fixed; left: 0; top: 0; z-index: 80;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--sombra-alta);
  }
  .lateral.aberta { transform: none; }
  .menu-alterna { display: inline-flex; }
  .veu { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 70; }
  .veu[hidden] { display: none; }
  .periodo-painel { min-width: 0; width: min(92vw, 640px); }
  .periodo-corpo { flex-direction: column; }
  .presets { width: auto; border-right: 0; border-bottom: 1px solid var(--borda); max-height: none; }
  .presets ul { display: flex; flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .cal-par { flex-direction: column; gap: 8px; }
  .periodo { position: static; }
  .periodo-painel { right: 8px; left: 8px; width: auto; }
  .topo { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .lateral, .acoes, .menu-alterna, details.diag { display: none; }
  body { background: #fff; }
  .palco { padding: 0; }
}