/* ===========================================================================
   FUNEC Corumbá — folha de estilo compartilhada
   ---------------------------------------------------------------------------
   Vale para todos os módulos (Geração Olímpica, Corumbá Saudável, permissões)
   e para as telas do admin. A paleta é a do PORTAL (index.dc.html): petróleo,
   coral, bege e sálvia. Decisão de setembro de 2026 — cada módulo tinha as
   cores da própria logo (o GO era azul/dourado/vermelho) e a direção preferiu
   um portal só, com os módulos nos tons da página inicial.

   Do protótipo do Claude Design ficou o que é estrutura: tipografia, o modo de
   alto contraste e a escala de fonte. NÃO veio o runtime React (support.js)
   nem a camada de dados em sql.js — as telas atuais são HTML e JavaScript
   comuns.

   Por que um arquivo só: antes cada tela carregava o próprio <style>, com
   441 linhas duplicadas em 8 arquivos. Trocar uma cor exigia editar oito
   lugares — e foi exatamente isso que a troca de paleta cobrou.

   Acessibilidade herdada do protótipo, e mantida de propósito:
     [data-hc="1"]  alto contraste
     [data-fs="1|2"] escala de fonte
     prefers-reduced-motion respeitado
     :focus-visible sempre visível
   =========================================================================== */

:root{
  /* Paleta do portal — os mesmos valores de #funec-root em index.dc.html. */
  --petroleo:#0E3B34; --petroleo-2:#155A4F; --petroleo-esc:#0A2A25;
  --coral:#EF5545;    --bege:#D6D0C4;       --bege-claro:#EEEAE1;
  --salvia:#C3D8C6;   --preto:#14201E;

  /* Coral como TEXTO corrido fica em 3,5:1 sobre o branco; para link e rótulo
     pequeno vale este tom mais fechado (5,1:1). Sobre fundo coral o texto é
     branco, como nos botões do portal. */
  --coral-txt:#C9392B; --gold-ink:#ffffff;

  /* Estados. Ficam FORA da paleta de marca de propósito: erro, ok e alerta
     precisam se distinguir do acento (coral) e entre si. O alerta é o mesmo
     mostarda do painel de conteúdo (admin.dc.html). */
  --red:#A8281E; --ok:#1F7A4D;
  --alerta:#C99A26; --alerta-txt:#6F5212; --alerta-ink:#14201E;

  /* Nomes da paleta antiga (azul/dourado do GO), mantidos como APELIDOS: as
     telas usam --navy, --gold e --teal em centenas de lugares. Quem escreve
     CSS novo usa os nomes do portal. */
  --navy:var(--petroleo); --navy-2:var(--petroleo-2);
  --gold:var(--coral);    --teal:var(--coral-txt);

  --bg:var(--bege-claro); --surface:#ffffff; --ink:#152220;
  --muted:#5c6b66; --border:#d8d2c6; --focus:var(--coral);

  /* Petróleo como TEXTO tem variável própria: em alto contraste o fundo vira
     preto e o petróleo sumiria. */
  --navy-txt:var(--petroleo);
  /* Estado selecionado: em alto contraste o petróleo vira preto e "ativo"
     ficaria idêntico a "inativo", então o destaque passa para o amarelo. */
  --sel-bg:var(--petroleo); --sel-ink:#ffffff;

  --raio:12px;
  --sombra:0 2px 10px rgba(14,59,52,.10);
  --sombra-alta:0 8px 22px rgba(14,59,52,.16);

  /* Paleta dos gráficos, derivada da do portal e CONFERIDA com o validador
     (dataviz/validate_palette.js, modo claro, superfície branca):
       categóricas: banda de luminosidade PASS · piso de croma PASS
       separação daltônica PASS (pior par --c1↔--c2, ΔE 11,1 protan)
       contraste sobre o branco PASS (todas acima de 3:1)
       rampa: monotônica PASS · degraus ≥ 0,06 PASS · ponta clara 2,2:1 PASS
     --c1..--c3 = categóricas (identidade fixa, nunca cicladas): verde do
                  petróleo, coral e o azul do wordmark FUNEC
     --r1..--r5 = rampa ordinal de um tom só (faixas etárias), no petróleo
     --track    = trilho dos medidores  |  --grid = malha recessiva
     Mesmo passando no contraste, toda marca continua com RÓTULO DIRETO e
     visão em tabela — no alto contraste as cores não separam para daltonismo. */
  --c1:#1E9C84; --c2:#EF5545; --c3:#3D6FC4;
  --r1:#8CB8AC; --r2:#68A093; --r3:#4A877A; --r4:#2E6C5F; --r5:#174F45;
  --track:#E6E1D6; --grid:#E9E5DC;

  font-size:16px;
}

:root[data-fs="1"]{font-size:18px}
:root[data-fs="2"]{font-size:20.5px}

:root[data-hc="1"]{
  --petroleo:#000; --petroleo-2:#000; --petroleo-esc:#000;
  --coral:#ffd400;  --coral-txt:#ffd400; --gold-ink:#000;
  --bege:#000; --bege-claro:#000; --salvia:#fff; --preto:#000;
  --red:#ff4d4d; --ok:#00e676;
  --alerta:#ffd400; --alerta-txt:#ffd400; --alerta-ink:#000;
  --bg:#000;   --surface:#000; --ink:#fff; --muted:#fff;   --border:#fff;
  --focus:#ffd400; --navy-txt:#fff;
  --sel-bg:#ffd400; --sel-ink:#000;
  --sombra:none; --sombra-alta:none;

  /* Em alto contraste o TOM DEIXA DE CARREGAR IDENTIDADE. O validador reprova
     esta tripla como paleta categórica (pior par ΔE 5,4 protan, abaixo do
     piso) — e isso é aceito de propósito: aqui o objetivo é contraste máximo
     contra o preto, e quem distingue as séries passa a ser o RÓTULO DIRETO e
     a tabela, não a cor. Por isso todo gráfico desta base rotula cada marca. */
  --c1:#fff; --c2:#ffd400; --c3:#00e676;
  --r1:#4d4d4d; --r2:#767676; --r3:#9f9f9f; --r4:#cccccc; --r5:#ffffff;
  --track:#333; --grid:#666;
}
:root[data-hc="1"] img{filter:grayscale(1) contrast(1.2)}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Barlow',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55;
}
:focus-visible{outline:4px solid var(--focus);outline-offset:2px;border-radius:2px}
a{color:var(--teal);font-weight:600}
a:hover{color:var(--navy-txt)}
:root[data-hc="1"] a{color:var(--gold)}
.hidden{display:none !important}

/* Títulos em Saira Condensed itálico caixa-alta — a marca do material da
   FUNEC, já usada no portal e no painel de conteúdo. */
.disp{
  font-family:'Saira Condensed',sans-serif; font-style:italic; font-weight:800;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.05;
}

/* --------------------------------------------------------------------------
   Cabeçalho das telas
   -------------------------------------------------------------------------- */
.topo{
  background:var(--navy); color:#fff; border-bottom:4px solid var(--gold);
  padding:14px 22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.topo .marca{font-size:1.15rem}
.topo a{
  color:#fff; text-decoration:none; font-weight:600; font-size:.92rem;
  border:1.5px solid rgba(255,255,255,.35); padding:7px 14px; border-radius:8px;
}
.topo a:hover{background:rgba(255,255,255,.12); color:#fff}
.topo a.atual{background:rgba(255,255,255,.18)}
.topo .direita{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Quem está logado, no alto da tela. Preenchido por funec.js. */
.quem-topo{
  margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.9rem; color:#fff;
}
.quem-topo .nome{font-weight:700}
.quem-topo .selo{font-size:.68rem}
.quem-topo .sair{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4);
  border-radius:8px; padding:6px 14px; min-height:36px; font-size:.85rem;
  font-family:inherit; font-style:normal; font-weight:700;
  text-transform:none; letter-spacing:0;
}
.quem-topo .sair:hover{background:rgba(255,255,255,.14); filter:none}
:root[data-hc="1"] .quem-topo .sair{border-color:var(--gold); color:var(--gold)}
:root[data-hc="1"] .topo a{border-color:var(--gold); color:var(--gold)}

.conteudo{max-width:1200px; margin:0 auto; padding:28px 18px 64px}
.conteudo.estreito{max-width:680px}
h1,h2{margin:0 0 4px; font-size:1.5rem}
h2{font-size:1.3rem}
p.sub{margin:0 0 22px; color:var(--muted)}

/* Título de seção com a régua dourada. Nasceu no protótipo do Geração
   Olímpica e viveu copiado em funec-go.css e funec-cs.css, com as mesmas três
   linhas, até a tela compartilhada de Locais (migração 022) precisar dele sem
   carregar folha de programa nenhuma. Não tem cor de programa: a régua é
   var(--gold), e quem redefine o token redefine a régua junto. */
.secao{display:flex; align-items:center; gap:12px; margin:8px 0 20px}
.secao h2{font-size:1.9rem; line-height:1; color:var(--navy-txt); margin:0}
.secao .regua{flex:1; height:4px; background:var(--gold)}

/* Rodapé das páginas públicas que não são de um programa. */
.rodape-simples{
  max-width:1200px; margin:0 auto; padding:26px 18px 44px;
  border-top:1px solid var(--border); color:var(--muted); font-size:.94rem;
}

/* --------------------------------------------------------------------------
   Superfícies
   -------------------------------------------------------------------------- */
.cartao{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--raio); padding:20px; box-shadow:var(--sombra);
}
.aviso{
  background:var(--surface); border:1px solid var(--border);
  border-left:6px solid var(--gold); border-radius:10px;
  padding:14px 16px; margin-bottom:20px; font-size:.93rem; color:var(--muted);
}
.aviso.erro{border-left-color:var(--red)}
.vazio{
  background:var(--surface); border:1px dashed var(--border);
  border-radius:var(--raio); padding:34px; text-align:center; color:var(--muted);
}
.estado{padding:30px; text-align:center; color:var(--muted)}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
button,.botao{
  font-family:'Saira Condensed',sans-serif; font-style:italic; font-weight:800;
  text-transform:uppercase; letter-spacing:.02em; font-size:1.02rem;
  background:var(--navy); color:#fff; border:none; border-radius:8px;
  padding:12px 22px; min-height:48px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .15s ease, transform .12s ease;
}
button:hover,.botao:hover{filter:brightness(1.12)}
button:active,.botao:active{transform:translateY(1px)}
button:disabled{opacity:.5; cursor:not-allowed; filter:none; transform:none}
.botao-sec{background:transparent; color:var(--navy-txt); border:2px solid var(--navy)}
.botao-sec:hover{background:rgba(14,59,52,.06); filter:none}
.botao-ok{background:var(--ok)}
.botao-perigo{background:transparent; color:var(--red); border:2px solid var(--red)}
.botao-mini{padding:6px 13px; min-height:34px; font-size:.86rem; letter-spacing:.01em}
.botao-largo{width:100%}
:root[data-hc="1"] button,:root[data-hc="1"] .botao{border:2px solid var(--gold)}

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */
label{display:block; font-size:.85rem; font-weight:700; margin-bottom:5px}
input,select,textarea{
  width:100%; font:inherit; font-family:'Barlow',system-ui,sans-serif;
  padding:11px 12px; border:2px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--ink); min-height:46px;
}
input:focus,select:focus,textarea:focus{border-color:var(--navy); outline:none}
:root[data-hc="1"] input,:root[data-hc="1"] select{background:#000; color:#fff}
input[aria-invalid="true"]{border-color:var(--red)}
.campo{margin-bottom:15px}
.campo .ajuda{font-size:.8rem; color:var(--muted); margin-top:4px}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.check{display:flex; align-items:center; gap:9px}
.check input{width:19px; height:19px; min-height:auto; flex:0 0 auto}
.check label{margin:0; font-weight:600}

.erro{
  background:rgba(168,40,30,.09); color:var(--red);
  border:1.5px solid rgba(168,40,30,.35); border-radius:8px;
  padding:11px 13px; font-size:.92rem; margin-bottom:15px; font-weight:600;
}

/* --------------------------------------------------------------------------
   Tabelas
   -------------------------------------------------------------------------- */
.tabela-wrap{
  overflow-x:auto; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--raio); box-shadow:var(--sombra);
}
table{width:100%; border-collapse:collapse; font-size:.93rem}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--border)}
th{
  font-family:'Saira Condensed',sans-serif; font-style:italic; font-weight:800;
  text-transform:uppercase; letter-spacing:.03em; font-size:.82rem;
  color:var(--navy-txt); background:var(--bg); white-space:nowrap;
}
tr:last-child td{border-bottom:none}
tr.inativa td{opacity:.5}
.acoes{display:flex; gap:6px; flex-wrap:wrap}

/* --------------------------------------------------------------------------
   Selos e indicadores
   -------------------------------------------------------------------------- */
.selo{
  display:inline-block; font-size:.74rem; font-weight:800; padding:3px 10px;
  border-radius:999px; text-transform:uppercase; letter-spacing:.03em;
  border:1.5px solid var(--border); color:var(--muted); white-space:nowrap;
}
.selo-navy{background:var(--navy); color:#fff; border-color:transparent}
.selo-gold{background:var(--gold); color:var(--gold-ink); border-color:transparent}
.selo-ok{background:rgba(31,122,77,.13); color:var(--ok); border-color:transparent}
.selo-espera{background:rgba(201,154,38,.18); color:var(--alerta-txt); border-color:transparent}
.selo-erro{background:rgba(168,40,30,.11); color:var(--red); border-color:transparent}
:root[data-hc="1"] .selo{border-color:var(--gold); color:var(--gold); background:#000}
:root[data-hc="1"] .selo-gold{background:var(--gold); color:#000}

.lot{font-weight:800}
.lot.ok{color:var(--ok)}
.lot.cheia{color:var(--red)}

/* KPIs */
.resumo{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); margin-bottom:22px}
.kpi{
  background:var(--surface); border:1px solid var(--border);
  border-left:5px solid var(--navy); border-radius:var(--raio);
  padding:15px 17px; box-shadow:var(--sombra);
}
.kpi .n{font-family:'Saira Condensed',sans-serif; font-style:italic; font-weight:800;
        font-size:1.85rem; line-height:1; color:var(--navy-txt)}
.kpi .r{font-size:.83rem; color:var(--muted); font-weight:600}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.fundo{
  position:fixed; inset:0; background:rgba(10,42,37,.55); display:flex;
  align-items:center; justify-content:center; padding:18px; z-index:50;
}
.modal{
  background:var(--surface); border-radius:14px; width:100%; max-width:620px;
  max-height:92vh; overflow:auto; padding:26px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
:root[data-hc="1"] .modal{border:2px solid var(--gold)}
.modal h3{margin:0 0 16px; font-size:1.2rem}
.rodape-modal{display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap}

/* Aviso flutuante */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--navy); color:#fff; padding:13px 24px; border-radius:999px;
  font-weight:700; z-index:60; box-shadow:var(--sombra-alta);
  border-bottom:3px solid var(--gold);
}
.toast.erro{background:var(--red); border-bottom-color:#fff; color:#fff}

/* --------------------------------------------------------------------------
   Barra de acessibilidade — no TOPO, padrão e-MAG de portal público.
   Em site de governo ela é parte do cabeçalho, não um enfeite de canto.
   Mesma faixa da sessão do portal: petróleo escuro, texto sálvia, fio coral.
   -------------------------------------------------------------------------- */
.emag{background:var(--petroleo-esc); border-bottom:2px solid var(--coral)}
.emag .interno{
  max-width:1160px; margin:0 auto; padding:6px 16px; display:flex;
  flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between;
}
.emag .rotulo{color:var(--salvia); font-size:.8rem; font-weight:600}
.emag .grupo{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.emag button{
  background:transparent; color:#fff; border:1.5px solid rgba(195,216,198,.55); border-radius:5px;
  padding:4px 11px; font-family:inherit; font-style:normal; font-weight:700;
  font-size:.8rem; min-height:32px; text-transform:none; letter-spacing:0;
}
.emag button:hover{background:rgba(255,255,255,.14); filter:none}
.emag button.hc{background:var(--gold); color:var(--gold-ink); border-color:var(--gold)}
.emag button[aria-pressed="true"]{background:var(--gold); color:var(--gold-ink); border-color:var(--gold)}
.emag .direita{display:flex; gap:12px; align-items:center; color:var(--salvia); font-size:.82rem; font-weight:600}
.emag .direita a{color:var(--salvia)}
.emag .direita a:hover{color:#fff}
/* Com sessão o funec.js troca o "Entrar / Acessar" por saudação + atalho. */
.emag .direita .sair{
  background:transparent; color:#fff; border:1.5px solid rgba(195,216,198,.55); border-radius:5px;
  padding:4px 11px; font-family:inherit; font-style:normal; font-weight:700;
  font-size:.8rem; min-height:30px; text-transform:none; letter-spacing:0;
}
.emag .direita .sair:hover{background:rgba(255,255,255,.14); filter:none}
:root[data-hc="1"] .emag .direita .sair{border-color:var(--gold); color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}
@media (max-width:560px){
  .dupla{grid-template-columns:1fr}
  .conteudo{padding:20px 14px 56px}
}

/* --------------------------------------------------------------------------
   Retrato do aluno (assets/funec-foto.js)
   --------------------------------------------------------------------------
   O avatar é sempre um círculo com as INICIAIS por baixo e, quando existe, a
   foto por cima. Nunca fica um buraco: se a imagem falhar, o JS remove o <img>
   e as iniciais reaparecem. Ver o cabeçalho de funec-foto.js.

   `overflow:hidden` + `object-fit:cover` porque a 3x4 é retrato (480x640) e um
   círculo com a imagem esticada deforma o rosto — o que é o oposto do ponto de
   ter foto, que é reconhecer a criança.
   -------------------------------------------------------------------------- */
.retrato{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; overflow:hidden; flex:none; color:#fff;
  font-family:'Saira Condensed',sans-serif; font-weight:800; line-height:1;
  border:2px solid var(--border); background:var(--navy);
}
.retrato img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%;   /* rosto costuma ficar no alto */
}
.retrato .ini{user-select:none}

.retrato-mini  {width:40px;  height:40px;  font-size:.95rem}
.retrato-medio {width:64px;  height:64px;  font-size:1.4rem}
.retrato-grande{width:104px; height:104px; font-size:2.2rem; border-width:3px}

/* Em alto contraste a foto herdaria o grayscale de `img` e viraria um borrão
   cinza dentro de um círculo preto. A borda amarela é o que separa o avatar do
   fundo; a imagem continua em escala de cinza, que é o pedido do modo. */
:root[data-hc="1"] .retrato{border-color:var(--gold); background:#000}

@media (max-width:560px){
  .retrato-grande{width:84px; height:84px; font-size:1.8rem}
}