/* ═══════════════════════════════════════════════════════════════════════════
   ZENYCK ADMIN — folha de estilo
   ───────────────────────────────────────────────────────────────────────────
   NASCEU NA FUNDAÇÃO VISUAL SAI (regra dele, 28/09): os tokens, as três
   superfícies, o cromo escuro nos dois temas e o mecanismo de tema são os
   mesmos dos outros sistemas, copiados do bloco do `SKILLS.md` — não
   reinventados. Um detector compara as cópias.

   ⚠️ O QUE MUDA AQUI, E SÓ ISTO: o ACENTO. Este sistema é da Zenyck, não da
   suíte SAI, e o acento é a cor da marca. As superfícies, as linhas e os
   tons de texto continuam idênticos — é o que faz os sistemas parecerem da
   mesma casa mesmo com marcas diferentes.
   🔬 Medido, não escolhido no olho:
     · branco sobre o azul do acento (#0170A3) ......... 5,46:1  ✅
     · navy sobre o ciano do botão da faixa (#01A0D6) .. 4,64:1  ✅
       (e o branco sobre o mesmo ciano daria 3,00:1 — reprovaria)
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* tipografia da casa */
  --font:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── TEMA CLARO (os valores padrão) ──
     A profundidade se lê pela QUANTIDADE DE MATIZ, nesta ordem:
     página (mais azul) → rebaixada → cartão (branco puro). */
  --bg:#e4ecf7;          /* página     — ⛔ nunca branco */
  --bg2:#ffffff;         /* cartão, modal */
  --bg3:#eef3fa;         /* REBAIXADA  — campo, zebra, cabeçalho de tabela */
  --bg4:#dde7f4;  --bg5:#cbd9ea;
  --border:#c7d4e4;      /* visível de propósito */
  --border2:#a2b4ca;
  --text:#0d1726;  --text2:#3d4e64;  --text3:#64778e;
  /* o acento é o da MARCA (ver o cabeçalho deste arquivo) */
  --accent:#0170A3;  --accent2:#042C59;  --accent-ink:#ffffff;
  --green:#12734a; --red:#b32424; --amber:#9a5b00; --purple:#7c3aed; --teal:#0e7490;
  /* os mesmos em COMPONENTES, para os fundos fracos:
     ⛔ `rgba()` não aceita hex dentro, e o número TEM de bater com o hex acima */
  --accent-rgb:1,112,163;  --green-rgb:18,115,74;   --red-rgb:179,36,36;
  --amber-rgb:154,91,0;    --purple-rgb:124,58,237; --teal-rgb:14,116,144;
  --blue-rgb:30,64,175;    --gray-rgb:100,119,142;
  /* o CROMO — a faixa do topo, escura nos DOIS temas */
  --cromo-ink:#eef3f9;  --cromo-ink-2:#a3b8ce;
  --cromo-btn:rgba(255,255,255,.08);  --cromo-btn-hover:rgba(255,255,255,.16);
  --cromo-linha:rgba(255,255,255,.18); --cromo-linha-forte:rgba(255,255,255,.32);
  /* ⚠️ A ação da faixa é o ciano da marca com tinta NAVY — a recomendação
     dele, e a que mede melhor (4,64:1 contra 3,00:1 do branco). */
  --cromo-acao:#01A0D6; --cromo-acao-ink:#042C59;
  --cromo-perigo:#ff9b9b; --cromo-perigo-linha:rgba(255,123,123,.38);
  --cromo-ok:#4ade9b; --cromo-atencao:#f2b457; --cromo-critico:#ff7b7b;
  /* o seletor de tema */
  --sai-seg-line:#c7d4e4; --sai-seg-ink:#64778e; --sai-seg-ink-forte:#0d1726;
  --sai-seg-ativo:#0170A3; --sai-seg-ativo-ink:#ffffff;
  /* a marca, para o que é identidade (e só para isso) */
  --zenyck-navy:#042C59; --zenyck-cyan:#01A0D6; --zenyck-cyan-bright:#07CCFC;
  --zenyck-gradient:linear-gradient(135deg,#042C59 0%,#0170A3 48%,#07CCFC 100%);
}
html[data-theme="dark"]{
  --bg:#0c121b;  --bg2:#131c27;  --bg3:#1a2634;  --bg4:#253242;  --bg5:#36485c;
  --border:#253242;  --border2:#36485c;
  --text:#e6edf5;  --text2:#a3b3c6;  --text3:#74879c;
  /* ⛔ no escuro o realce é CLARO: o azul do tema claro some aqui */
  --accent:#07CCFC;  --accent2:#6ADFFF;
  --accent-ink:#06101d;   /* ⛔ no escuro o realce é CLARO: branco por cima some */
  --green:#4ade9b; --red:#ff7b7b; --amber:#f2b457; --purple:#c08bff; --teal:#42dfc9;
  --accent-rgb:7,204,252; --green-rgb:74,222,155;  --red-rgb:255,123,123;
  --amber-rgb:242,180,87;  --purple-rgb:192,139,255; --teal-rgb:66,223,201;
  --blue-rgb:106,166,255;  --gray-rgb:116,135,156;
  --sai-seg-line:#253242; --sai-seg-ink:#74879c; --sai-seg-ink-forte:#e6edf5;
  --sai-seg-ativo:#07CCFC; --sai-seg-ativo-ink:#06101d;
}
/* ── O CROMO: a faixa do topo é escura NOS DOIS TEMAS ──
   ⚠️ Reescopa o CONJUNTO, redeclara os APELIDOS que apontam para ele, e
      declara o `color` — redefinir um token não alcança o que já foi
      resolvido acima (nem apelido, nem propriedade herdada). */
html[data-theme="light"] .topbar{
  --bg2:#101c2c; --bg3:#1a2b3f; --border:#294058; --border2:#3b5675;
  --text:#eef3f9; --text2:#a3b8ce; --text3:#7b90a7;
  --accent:#07CCFC; --accent-ink:#06101d; --accent-rgb:7,204,252;
  --green:#4ade9b; --red:#ff7b7b; --amber:#f2b457;
  background:var(--bg2); color:var(--text);
}

/* ═══════════════════════════════════════ base ═══════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.oculto{display:none!important}

/* ═══════════════════════════════════ a faixa do topo ════════════════════
   QUATRO PAPÉIS, E SÓ QUATRO: identidade · estado · controle · ação.
   ⚠️ 34px é a altura de TUDO que é controle aqui — botão, seletor de idioma
   e seletor de tema. Foi a mistura de alturas que fez a faixa do Mapa
   parecer "desconfigurada" sem nenhum botão estar errado sozinho. */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:0 18px;height:60px;
  border-bottom:1px solid var(--cromo-linha);
}
html[data-theme="dark"] .topbar{background:var(--bg2);color:var(--text)}
.marca{display:flex;align-items:center;gap:11px;min-width:0}
/* ⚠️ O LOGOTIPO OFICIAL NUMA PLACA BRANCA, nos dois temas. As letras são
   navy (#052B57) sobre transparente: na faixa escura ou no tema escuro
   sumiriam. A placa é a superfície em que ele foi desenhado — mesma solução
   do site. ⛔ Nada de `filter`/inversão: a cor da marca não se altera. */
.logo-placa{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:#ffffff;border-radius:8px;padding:3px 8px;height:34px;
}
.logo-placa img{display:block;height:100%;width:auto}
.marca-textos{display:flex;flex-direction:column;min-width:0;line-height:1.25;
  padding-left:11px;border-left:1px solid var(--cromo-linha)}
.marca-nome{font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--cromo-ink);white-space:nowrap}
.marca-sub{font-size:11px;color:var(--cromo-ink-2);white-space:nowrap}
.topbar-dir{margin-left:auto;display:flex;align-items:center;gap:8px}

.hbtn{
  height:34px;padding:0 14px;border-radius:8px;cursor:pointer;
  background:var(--cromo-btn);border:1px solid var(--cromo-linha);
  color:var(--cromo-ink);font-family:var(--font);font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
}
.hbtn:hover{background:var(--cromo-btn-hover);border-color:var(--cromo-linha-forte)}
.hbtn-add{background:var(--cromo-acao);color:var(--cromo-acao-ink);border-color:transparent}
.hbtn-add:hover{background:var(--cromo-acao);filter:brightness(1.08)}
.hbtn-logout{background:transparent;color:var(--cromo-perigo);border-color:var(--cromo-perigo-linha)}
.hbtn-logout:hover{background:var(--cromo-btn-hover);border-color:var(--cromo-perigo)}
/* pílula de ESTADO — não tem cara de clicável, de propósito */
.pill{
  height:26px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;background:var(--cromo-btn);color:var(--cromo-ink-2);
  border:1px solid var(--cromo-linha);
}

/* seletor de tema — 2px de folga + 28px de botão + 2px de borda = 34px, que
   é a altura de TUDO que é controle na faixa. Os quatro pixels de diferença
   ninguém sabe nomear, e o olho lê como desalinhado. */
.theme-seg,.lang-pick{display:inline-flex;gap:2px;padding:2px;border-radius:9px;border:1px solid var(--sai-seg-line);background:var(--cromo-btn)}
/* ⚠️ REGRA PRÓPRIA, não uma lista de seletores: a altura de 28px é cobrada
   por detector que procura `.theme-seg button{…height:28px}`. Agrupar com o
   seletor de idioma escondia o número de quem confere. */
.theme-seg button{
  height:28px;padding:0 9px;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--cromo-ink-2);font-family:var(--font);font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.lang-pick button{
  height:28px;padding:0 9px;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--cromo-ink-2);font-family:var(--font);font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.theme-seg button svg{width:16px;height:16px;display:block}
.theme-seg button[aria-pressed="true"],.lang-pick button[aria-pressed="true"]{
  background:var(--sai-seg-ativo);color:var(--sai-seg-ativo-ink);
}

/* ═══════════════════════════════════ navegação ══════════════════════════ */
.abas{display:flex;gap:4px;padding:10px 18px 0;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.aba{
  padding:9px 16px;border:1px solid transparent;border-bottom:0;cursor:pointer;
  border-radius:9px 9px 0 0;background:transparent;color:var(--text2);
  font-family:var(--font);font-size:13.5px;font-weight:600;
}
.aba:hover{color:var(--text);background:var(--bg4)}
.aba[aria-selected="true"]{background:var(--bg2);color:var(--text);border-color:var(--border);margin-bottom:-1px}

/* ═══════════════════════════════════ conteúdo ═══════════════════════════ */
.area{padding:22px 18px 60px;max-width:1180px;margin:0 auto}
.cartao{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px}
.cartao + .cartao{margin-top:16px}
.cartao h2{font-size:16px;font-weight:700;margin-bottom:4px}
.cartao .desc{color:var(--text2);font-size:13px;margin-bottom:16px;max-width:72ch}

.vazio{
  background:var(--bg3);border:1px dashed var(--border2);border-radius:12px;
  padding:34px 20px;text-align:center;color:var(--text2);font-size:13.5px;
}

/* tabela */
table{width:100%;border-collapse:collapse;font-size:13.5px}
/* 🔴 ERA `--text3` E REPROVOU: 4,12:1 no claro, 4,15:1 no escuro. Mesmo erro
   que o nome da coluna do quadro, e a auditoria da fase 2 NÃO o pegou — ela
   mede o que está NA TELA, e a tabela estava numa aba escondida.
   ⚠️ A lição não é sobre a cor, é sobre o instrumento: varredura de contraste
   só vale na tela que está aberta. Rodar aba por aba, não uma vez. */
th{
  text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text2);background:var(--bg3);padding:9px 12px;border-bottom:1px solid var(--border);
}
td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg3)}

/* etiquetas de situação — cor de ESTADO, nunca de botão */
.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
.tag-ok{background:rgba(var(--green-rgb),.14);color:var(--green)}
.tag-off{background:rgba(var(--gray-rgb),.16);color:var(--text3)}
.tag-papel{background:rgba(var(--accent-rgb),.14);color:var(--accent)}

/* botões do corpo */
.btn{
  height:36px;padding:0 15px;border-radius:9px;cursor:pointer;font-family:var(--font);
  font-size:13.5px;font-weight:600;border:1px solid var(--border2);
  background:var(--bg2);color:var(--text);display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{background:var(--bg3)}
.btn-acao{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn-acao:hover{background:var(--accent2);color:var(--accent-ink)}
.btn-risco{background:transparent;color:var(--red);border-color:rgba(var(--red-rgb),.4)}
.btn-risco:hover{background:rgba(var(--red-rgb),.1)}
.btn-pequeno{height:30px;padding:0 11px;font-size:12.5px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* campos — ⛔ o fundo vem de token; campo branco sobre cartão branco é
   exatamente o defeito que a fundação mais nomeia */
label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px}
input,select,textarea{
  width:100%;height:38px;padding:0 11px;border-radius:9px;
  border:1px solid var(--border2);background:var(--bg3);color:var(--text);
  font-family:var(--font);font-size:13.5px;
}
textarea{height:auto;padding:10px 11px;min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--bg2)}
.campo + .campo{margin-top:13px}
.dica{font-size:12px;color:var(--text3);margin-top:5px}

/* ═══════════════════════════════════ login ═════════════════════════════ */
.login-tela{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-cartao{
  width:100%;max-width:420px;background:var(--bg2);border:1px solid var(--border);
  border-radius:16px;padding:30px;
}
.login-marca{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px;text-align:center}
/* no claro o cartão já é branco: a borda é que separa a placa dele */
.logo-placa-grande{height:auto;width:100%;max-width:260px;padding:12px 16px;
  border-radius:12px;border:1px solid var(--border)}
.logo-placa-grande img{width:100%;height:auto}
.login-modulo strong{font-size:17px;display:block}
.login-modulo span{font-size:12px;color:var(--text2)}
.login-cartao h1{font-size:19px;margin-bottom:6px}
.login-cartao .intro{color:var(--text2);font-size:13px;margin-bottom:20px}
.login-cartao .btn{width:100%;justify-content:center;margin-top:18px}
.aviso{
  margin-top:14px;padding:11px 13px;border-radius:9px;font-size:13px;
  background:rgba(var(--red-rgb),.1);color:var(--red);border:1px solid rgba(var(--red-rgb),.3);
}
.nota{margin-top:16px;font-size:12px;color:var(--text3);line-height:1.5}

/* ═══════════════════════════════════ modal ═════════════════════════════ */
.fundo-modal{position:fixed;inset:0;background:rgba(4,20,40,.55);display:grid;place-items:center;padding:20px;z-index:60}
.modal{width:100%;max-width:470px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.modal header{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700}
.modal .corpo{padding:20px}
.modal footer{padding:14px 20px;border-top:1px solid var(--border);background:var(--bg3);display:flex;justify-content:flex-end;gap:9px}

/* ═══════════════════════════════════ recado ════════════════════════════ */
#recado{
  position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:90;
  padding:12px 18px;border-radius:10px;font-size:13.5px;font-weight:600;
  background:var(--bg2);color:var(--text);border:1px solid var(--border2);
  box-shadow:0 14px 34px -14px rgba(4,20,40,.5);max-width:92vw;
}
#recado.erro{background:rgba(var(--red-rgb),.12);border-color:var(--red);color:var(--red)}
#recado.ok{background:rgba(var(--green-rgb),.12);border-color:var(--green);color:var(--green)}

/* ═══════════════════════════════════ telas estreitas ═══════════════════ */
@media (max-width:620px){
  .topbar{height:auto;padding:10px 12px;flex-wrap:wrap}
  .topbar-dir{width:100%;margin-left:0;justify-content:flex-end}
  .marca-sub{display:none}
  .area{padding:16px 12px 50px}
  .cartao{padding:16px}
  /* tabela estreita: o cabeçalho vira rótulo de cada célula */
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
  td{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}
  td::before{content:attr(data-rotulo);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:700}
}

/* ═══════════════════════════════════ o quadro de tarefas ════════════════
   Três colunas em telas largas, uma embaixo da outra no celular. ⚠️ Sem
   arrastar-e-soltar de propósito: no telefone o arrasto briga com a rolagem
   da página, e o cartão ganha botões de mover que funcionam nos dois. */
.cartao-topo{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.cartao-acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chave{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text2);cursor:pointer;font-weight:600}
.chave input{width:16px;height:16px;accent-color:var(--accent)}

.quadro{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.coluna{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:12px;min-height:120px}
.coluna-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
/* ⛔ `--text3` É TOM DE LEGENDA e não serve a texto que precisa ser lido —
   está escrito na fundação, e eu furei a regra aqui: o nome da coluna e a
   contagem saíram em 4,12:1 e 3,68:1, abaixo do mínimo. Medido, não visto:
   a varredura de contraste os acusou nos DOIS temas. */
.coluna-nome{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.coluna-conta{font-size:12px;font-weight:700;color:var(--text2);background:var(--bg4);border-radius:999px;padding:1px 9px}
.coluna-vazia{font-size:12.5px;color:var(--text2);text-align:center;padding:16px 8px}

.tcard{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:11px 12px;cursor:pointer;text-align:left;width:100%;font-family:var(--font);
  display:block;color:var(--text);
}
.tcard + .tcard{margin-top:9px}
.tcard:hover{border-color:var(--border2)}
.tcard-titulo{font-size:13.5px;font-weight:600;line-height:1.35;word-break:break-word}
.tcard-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.tcard-mover{display:flex;gap:6px;margin-top:10px}
.tcard-mover button{
  flex:1;height:28px;border-radius:7px;cursor:pointer;border:1px solid var(--border2);
  background:var(--bg3);color:var(--text2);font-family:var(--font);font-size:12px;font-weight:600;
}
.tcard-mover button:hover{background:var(--bg4);color:var(--text)}
.tcard-mover button[disabled]{opacity:.4;cursor:not-allowed}

/* etiquetas do cartão — cor de ESTADO, e só isso */
.sel{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px}
.sel-quem{background:rgba(var(--accent-rgb),.13);color:var(--accent)}
.sel-prazo{background:rgba(var(--gray-rgb),.16);color:var(--text2)}
.sel-hoje{background:rgba(var(--amber-rgb),.16);color:var(--amber)}
.sel-atraso{background:rgba(var(--red-rgb),.14);color:var(--red)}
.sel-check{background:rgba(var(--gray-rgb),.16);color:var(--text2)}
.sel-check.completo{background:rgba(var(--green-rgb),.15);color:var(--green)}

/* checklist dentro do modal */
.itens{margin-top:6px}
.item{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--border)}
.item:last-child{border-bottom:0}
.item input[type=checkbox]{width:16px;height:16px;margin-top:2px;accent-color:var(--accent);flex:0 0 auto}
.item span{flex:1;font-size:13.5px;line-height:1.4;word-break:break-word}
.item.feito span{text-decoration:line-through;color:var(--text3)}
.item button{
  background:none;border:0;cursor:pointer;color:var(--text3);font-size:16px;line-height:1;
  padding:0 2px;flex:0 0 auto;
}
.item button:hover{color:var(--red)}
.item-novo{display:flex;gap:8px;margin-top:10px}
.item-novo input{flex:1}
.modal-rodape-esq{margin-right:auto}

@media (max-width:860px){ .quadro{grid-template-columns:1fr} }

/* ═══════════════════════════════════ o resumo do mês ════════════════════ */
.resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.numero{background:var(--bg3);border:1px solid var(--border);border-radius:11px;padding:14px 16px}
.numero-rotulo{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.numero-valor{display:block;margin-top:6px;font-size:21px;font-weight:700;letter-spacing:-.01em}
.numero-valor.ok{color:var(--green)}
.numero-valor.ruim{color:var(--red)}
/* O campo do mês fica dentro da etiqueta, na mesma altura dos controles. */
.chave input[type=month]{width:auto;height:30px;font-size:12.5px;padding:0 8px}
@media (max-width:700px){ .resumo{grid-template-columns:1fr} }