/* Painel da bloom. Os valores de cor vêm de tokens-bloom.css, que é espelho:
   a fonte é ../bloom-site/tokens-bloom.css. Mudou lá, copie para cá. */

*{box-sizing:border-box}

/* ⚠️ SEM ESTA LINHA, `hidden` NÃO ESCONDE NADA AQUI, e o defeito não dá erro.
   A folha do navegador declara `[hidden]{display:none}` com a menor
   precedência que existe, então QUALQUER regra de classe com `display` a
   vence. `.entrar` logo abaixo diz `display:grid`, e por isso
   `$("#tela-entrar").hidden = true` não fazia efeito: no primeiro login de
   verdade, em 21/09/2026, o painel apareceu EMBAIXO da tela de entrada, com o
   formulário ainda visível por cima.
   A folha do site já trazia esta linha; o painel não, porque ele nunca tinha
   sido aberto com sessão. */
[hidden]{display:none !important}
body{margin:0;background:var(--creme);color:var(--tinta);
  font-family:"DM Sans",system-ui,sans-serif;font-size:16px;line-height:1.55}
h1,h2,h3{font-family:"Quicksand",system-ui,sans-serif;margin:0}
p{margin:0}
a{color:var(--primaria)}

.envolve{width:100%;max-width:980px;margin:0 auto;padding:0 24px 64px}

/* ---------- entrar ----------
   Duas metades: a escura carrega a marca, a clara carrega o formulário.
   ⚠️ A metade escura NÃO inverte com o tema, igual à faixa de ecossistemas do
   site: ela é escura por desenho. Se invertesse, viraria uma faixa clara com
   texto branco, e os valores calibrados sobre ela deixariam de valer de uma vez. */
.entrar{min-height:100dvh;display:grid;grid-template-columns:1fr}
@media(min-width:900px){.entrar{grid-template-columns:1.05fr .95fr}}

.entrar-marca{position:relative;background:#2E3A6B;color:#DDE3F5;
  background-image:url("fundo.svg");background-size:cover;background-position:center right;
  display:grid;align-items:center;padding:44px 32px}
@media(min-width:900px){.entrar-marca{padding:56px 60px}}
.entrar-marca-dentro{max-width:440px;margin-inline:auto;width:100%}
.simbolo{width:76px;height:auto;display:block}
.entrar-marca-nome{font-family:"Quicksand",system-ui,sans-serif;font-weight:700;
  font-size:30px;letter-spacing:-.02em;color:#FFFFFF;margin-top:16px}
.entrar-marca-t{font-family:"Quicksand",system-ui,sans-serif;font-weight:600;
  font-size:clamp(22px,2.6vw,29px);line-height:1.2;letter-spacing:-.02em;
  color:#FFFFFF;margin-top:22px;text-wrap:balance}
.entrar-marca-p{color:#C3CCEA;font-size:15.5px;margin-top:14px;max-width:44ch}
.entrar-marca-lista{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:11px}
.entrar-marca-lista li{display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;color:#C3CCEA}
.ponto{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;margin-top:7px}

.entrar-lado{display:grid;place-items:center;padding:44px 24px;background:var(--creme)}
.entrar-caixa{width:100%;max-width:392px}
.entrar-caixa h1{font-size:31px;letter-spacing:-.02em;margin-top:10px}
.entrar-nota{color:var(--tinta-2);font-size:14.5px;margin-top:12px}
#form-entrar{display:grid;gap:6px;margin-top:26px}
#form-entrar label{font-size:14px;font-weight:600;margin-top:10px}
#form-entrar .campo{width:100%}
#form-entrar .botao{margin-top:20px;width:100%}
.entrar-pe{font-size:12.5px;color:var(--tinta-3);margin-top:22px;
  border-top:1px solid var(--linha);padding-top:16px}

/* ---------- topo ---------- */
.topo{background:var(--branco);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:5}
.topo-envolve{max-width:980px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:10px}
.topo-simbolo{width:30px;height:auto;flex:none}
.marca{font-family:"Quicksand",system-ui,sans-serif;font-weight:700;font-size:20px;color:var(--primaria)}
.topo-sep{font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3)}
.espaco{flex:1}
.quem{font-size:14px;color:var(--tinta-2)}

/* ---------- resumo: o painel abre por AQUI ---------- */
.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:28px}
.cartao-num{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px}
.cartao-num .num{font-family:"Quicksand",system-ui,sans-serif;font-weight:700;font-size:38px;
  line-height:1;letter-spacing:-.03em;color:var(--primaria);font-variant-numeric:tabular-nums}
.cartao-num .rot{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-3);margin-top:8px}
.cartao-num .sub{font-size:12.5px;color:var(--tinta-3);margin-top:4px}
/* ⚠️ A cor de ALERTA só entra quando há algo fora do prazo. Cartão vermelho
   permanente vira paisagem, e paisagem não avisa ninguém. */
.cartao-num.alerta{border-color:var(--erro);background:var(--erro-fundo,#FDEEEE)}
.cartao-num.alerta .num{color:var(--erro)}

/* ---------- barra ---------- */
.barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.filtros{display:flex;gap:8px;flex-wrap:wrap}
.filtro{font-family:inherit;font-size:14px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--linha);background:var(--branco);color:var(--tinta-2);cursor:pointer}
.filtro.ativo{background:var(--primaria);color:var(--tinta-sobre-primaria);border-color:var(--primaria);font-weight:600}
.barra .botao-peq{margin-left:auto}

/* ---------- lista ---------- */
.lista{display:grid;gap:10px;margin-top:18px}
.item{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
/* ⚠️ Faixa lateral, não fundo colorido: o fora do prazo precisa ser visível na
   varredura da lista sem tornar o texto mais difícil de ler. */
.item-fora{border-left:4px solid var(--erro)}
.item summary{padding:16px 20px;cursor:pointer;display:grid;gap:6px;list-style:none}
.item summary::-webkit-details-marker{display:none}
.item summary:focus-visible{outline:3px solid var(--turquesa);outline-offset:-3px}
.item-topo{display:flex;gap:6px;flex-wrap:wrap}
.item-titulo{font-size:16px;font-weight:600}
.item-meta{font-size:13px;color:var(--tinta-3)}
.item-corpo{padding:4px 20px 20px;border-top:1px solid var(--linha);display:grid;gap:12px}
.campo-linha{display:grid;grid-template-columns:110px 1fr;gap:10px;font-size:14.5px;margin-top:12px}
.campo-linha b{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3)}
.texto{font-size:15.5px;color:var(--tinta-2);white-space:normal;
  background:var(--creme);border-radius:10px;padding:14px 16px}
.leituras-t{font-size:13px;color:var(--tinta-3)}

/* ---------- responder ---------- */
.responder{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.responder label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--tinta-2)}
.responder .cresce{flex:1 1 260px}
.campo-peq{height:42px;font-size:14.5px}
.aviso-declaracao{font-size:12.5px;color:var(--tinta-3);margin-top:8px}
.respondida-em{font-size:14px;color:var(--tinta-2);margin-top:12px}

.erro{color:var(--erro);font-size:14px;margin-top:10px}
.vazio{color:var(--tinta-3);font-size:15px;text-align:center;padding:40px 0}

@media (max-width:560px){
  .campo-linha{grid-template-columns:1fr;gap:2px}
  .barra .botao-peq{margin-left:0}
}