/* ---------------------------------------------------------------------------
   APAE - tela de acesso.
   Formulario a esquerda, vitrine com foto a direita. Sem cartao: as duas
   colunas ocupam a tela inteira, de borda a borda.

   A foto e opcional: basta enviar "capa.jpg" para a pasta publicada por SFTP
   (/srv/sftp/apae/html). Se o arquivo nao existir, a camada cai no degrade
   azul definido abaixo, sem quebrar nada.
--------------------------------------------------------------------------- */

:root {
  --papel: #f8f8f6;
  --superficie: #ffffff;
  --texto: #1b1b19;
  --texto-suave: #6a6a63;
  --texto-fraco: #75736a;
  --borda: #e2e0da;
  --borda-forte: #c9c6bd;

  --marca: #1a5fd0;
  --marca-forte: #14499f;
  --marca-contraste: #ffffff;

  --erro: #a52a1c;
  --erro-fundo: #fdf4f2;
  --erro-borda: #eecfc8;
  --ok: #1b6b45;
  --ok-fundo: #f1f8f4;
  --ok-borda: #c8e2d4;
  --alerta: #8a5210;

  --raio: 6px;
  --anel: 0 0 0 3px rgba(26, 95, 208, .18);
  --titulo: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #14140f;
    --superficie: #1b1b16;
    --texto: #f0efe9;
    --texto-suave: #a5a49a;
    --texto-fraco: #97958b;
    --borda: #302f28;
    --borda-forte: #47463c;

    --marca: #6ba3f8;
    --marca-forte: #8bb8fa;
    /* Branco sobre esse azul claro daria 3:1 e reprovaria no AA. */
    --marca-contraste: #07142a;

    --erro: #ffa79c;
    --erro-fundo: #2a1512;
    --erro-borda: #55251f;
    --ok: #7ce0ad;
    --ok-fundo: #0f2318;
    --ok-borda: #244c36;
    --alerta: #f0bc6c;

    --anel: 0 0 0 3px rgba(107, 163, 248, .25);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--texto);
  font: 16px/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------- estrutura ------------------------------ */

.tela {
  display: grid;
  grid-template-columns: 52fr 48fr;
  min-height: 100dvh;
}
/* Paginas de aviso (erro, 404) usam so a coluna do formulario. */
.tela.solo { grid-template-columns: 1fr; }

.painel {
  display: flex;
  flex-direction: column;
  padding: 40px clamp(24px, 7vw, 104px) 48px;
  background: var(--papel);
}
.tela.solo .painel { align-items: center; }
.tela.solo .painel > * { max-width: 460px; width: 100%; }

/* Logo no alto, conteudo um pouco acima do centro optico. */
.logo { margin-bottom: auto; display: flex; align-items: center; gap: 14px; }
.logo-selo {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--marca);
  color: #fff;
}
.logo b { display: block; font-size: 21px; font-weight: 900; letter-spacing: .01em; line-height: 1.1; }
.logo small {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 3px;
}

.miolo { margin-bottom: auto; width: 100%; max-width: 528px; padding-top: 56px; }

/* ------------------------------- tipografia ----------------------------- */

.chapeu {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--marca);
}

h1 {
  margin: 0 0 18px;
  font-family: var(--titulo);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.015em;
}

.linha-fina {
  margin: 0 0 54px;
  color: var(--texto-suave);
  font-size: 16px;
  max-width: 42ch;
}
/* Com aviso na tela o respiro encolhe: a mensagem ja separa os blocos. */
.linha-fina:has(+ .aviso) { margin-bottom: 30px; }

/* -------------------------------- vitrine ------------------------------- */

.vitrine {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 56px clamp(28px, 4vw, 64px);
  color: #fff;
  overflow: hidden;
  /* Camadas: veu escuro > foto (se existir) > degrade de reserva.
     O veu e forte na faixa de baixo (>=.78) para o texto branco continuar
     legivel mesmo se a foto enviada for clara. */
  background-image:
    linear-gradient(to top,
      rgba(6, 15, 34, .92) 0%,
      rgba(6, 15, 34, .78) 30%,
      rgba(9, 22, 48, .32) 66%,
      rgba(9, 22, 48, .18) 100%),
    url("../capa.jpg"),
    radial-gradient(120% 70% at 78% 12%, rgba(255, 255, 255, .28), transparent 60%),
    linear-gradient(155deg, #3d7ae4 0%, #1a5fd0 45%, #0c2f74 100%);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}

.vitrine .chapeu { color: rgba(255, 255, 255, .82); margin-bottom: 12px; }

.vitrine p.frase {
  margin: 0;
  font-family: var(--titulo);
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.32;
  font-weight: 700;
  max-width: 22ch;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .45);
}

/* No celular a vitrine sai: o formulario fica com a tela toda. */
@media (max-width: 900px) {
  .tela { grid-template-columns: 1fr; }
  .vitrine { display: none; }
  .painel { padding: 32px 24px 48px; min-height: 100dvh; }
  .miolo { padding-top: 40px; max-width: none; }
}

/* -------------------------------- avisos -------------------------------- */

.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin: 0 0 26px;
  border-radius: var(--raio);
  font-size: 14px; line-height: 1.45;
  background: var(--erro-fundo); border: 1px solid var(--erro-borda); color: var(--erro);
}
.aviso svg { flex: 0 0 16px; margin-top: 2px; }
.aviso-ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok); }

/* -------------------------------- campos -------------------------------- */

.campo { margin-bottom: 22px; }

label {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 9px;
}

.entrada { position: relative; display: flex; align-items: center; }

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--texto-fraco); }
input:hover { border-color: var(--borda-forte); }
input:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: var(--anel);
}
/* So fica vermelho depois que a pessoa sai do campo, nunca enquanto digita. */
input:not(:placeholder-shown):user-invalid { border-color: var(--erro-borda); }
input:-webkit-autofill { -webkit-text-fill-color: var(--texto); transition: background-color 9999s; }

.tem-botao input { padding-right: 54px; }
.olho {
  position: absolute; right: 8px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--raio);
  background: transparent; color: var(--texto-fraco);
  cursor: pointer; transition: color .15s, background-color .15s;
}
.olho:hover { color: var(--texto); background: var(--papel); }
.olho:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.dica { margin: 9px 0 0; font-size: 13px; color: var(--texto-suave); }
.dica-alerta { color: var(--alerta); font-weight: 700; }

/* -------------------------------- botao --------------------------------- */

.botao {
  position: relative;
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
  padding: 0 20px;
  font: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--marca-contraste);
  background: var(--marca);
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background-color .15s, box-shadow .15s;
}
.botao:hover { background: var(--marca-forte); }
.botao:focus-visible { outline: none; box-shadow: var(--anel); }
.botao .rotulo { display: inline-flex; align-items: center; gap: 12px; }
.botao .seta { transition: transform .18s; }
.botao:hover .seta { transform: translateX(4px); }

/* Durante o envio: some o rotulo, entra o giro. Evita clique duplo. */
.botao[data-enviando] { pointer-events: none; }
.botao[data-enviando] .rotulo { visibility: hidden; }
.botao[data-enviando]::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gira .6s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  .botao[data-enviando]::after { animation-duration: 1.5s; }
}

/* ------------------------------- separador ------------------------------ */

.separador {
  display: flex; align-items: center; gap: 14px;
  margin: 30px 0 18px;
  color: var(--texto-suave); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

.botao-provedor {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borda-forte);
  margin-bottom: 10px;
}
.botao-provedor:hover { background: var(--papel); }
.botao-apple { background: #000; color: #fff; border-color: #000; }
.botao-apple:hover { background: #1c1c1e; }
@media (prefers-color-scheme: dark) {
  .botao-apple { background: #fff; color: #000; border-color: #fff; }
  .botao-apple:hover { background: #e6e6e6; }
}
.botao-provedor .rotulo, .botao-apple .rotulo { gap: 10px; }

/* -------------------------------- rodape -------------------------------- */

.rodape { margin: 26px 0 0; text-align: center; font-size: 15px; color: var(--texto-suave); }
.rodape a { color: var(--marca); text-decoration: none; font-weight: 700; }
.rodape a:hover { text-decoration: underline; }

.nota-config {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--texto-suave);
}

/* ------------------------- login no computador ------------------------- */
/* As medidas acima foram pensadas para uma tela alta. Num notebook comum
   (1366x768, uns 650px uteis depois das barras do navegador) a pagina pedia
   ~790px e o botao Entrar ficava abaixo da dobra. Aqui o respiro vertical e o
   tamanho dos controles acompanham a altura da janela: em tela alta nada muda,
   em tela baixa tudo encolhe junto ate caber sem rolar.

   So a partir de 901px -- abaixo disso vale o layout de celular, que rola.
   Tudo preso a .tela, para nao vazar para o painel, que usa h1 e .linha-fina. */

@media (min-width: 901px) {
  .tela { height: 100dvh; min-height: 520px; }
  .tela .painel {
    overflow-y: auto;
    padding-block: clamp(18px, 4.2vh, 40px) clamp(18px, 5vh, 48px);
  }
  .tela .miolo { padding-top: clamp(12px, 4vh, 56px); max-width: min(528px, 100%); }

  .tela .chapeu { margin-bottom: clamp(6px, 1.4vh, 14px); }
  .tela h1 {
    font-size: clamp(24px, min(3.4vw, 5.2vh), 44px);
    margin-bottom: clamp(8px, 1.8vh, 18px);
  }
  .tela .linha-fina { margin-bottom: clamp(18px, 5vh, 54px); }
  .tela .linha-fina:has(+ .aviso) { margin-bottom: clamp(12px, 2.6vh, 30px); }
  .tela .aviso { margin-bottom: clamp(12px, 2.4vh, 26px); }

  .tela .campo { margin-bottom: clamp(12px, 2.3vh, 22px); }
  .tela label { margin-bottom: clamp(5px, .9vh, 9px); }
  .tela input[type="text"], .tela input[type="email"], .tela input[type="password"] {
    height: clamp(42px, 6.4vh, 54px);
  }
  .tela .botao { min-height: clamp(44px, 6.6vh, 56px); }
  .tela .separador { margin: clamp(14px, 3vh, 30px) 0 clamp(10px, 1.8vh, 18px); }
  .tela .rodape { margin-top: clamp(12px, 2.6vh, 26px); }

  .tela .logo-selo { width: clamp(36px, 5.4vh, 46px); height: clamp(36px, 5.4vh, 46px); flex-basis: auto; }
  .tela .vitrine { padding-block: clamp(28px, 6vh, 56px); }
}

/* Janela bem baixa (notebook com zoom, barra de favoritos, tela 1280x720):
   a linha de apoio sai antes de o formulario ter de rolar. */
@media (min-width: 901px) and (max-height: 600px) {
  .tela .linha-fina { display: none; }
  .tela .miolo .chapeu { display: none; }
  /* Sem a linha de apoio, o respiro dela passa para o titulo. */
  .tela h1 { margin-bottom: 20px; }
}

/* -------------------------------- painel -------------------------------- */

.perfil { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; }
.perfil img, .perfil .inicial {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--marca); color: var(--marca-contraste);
  display: grid; place-items: center;
  font-weight: 900; font-size: 21px;
}
.perfil strong { display: block; font-size: 17px; }
.perfil span { color: var(--texto-suave); font-size: 14px; }

dl.dados {
  margin: 0 0 30px;
  font-size: 14px;
  border-top: 1px solid var(--borda);
}
dl.dados div {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--borda);
}
dl.dados dt { color: var(--texto-suave); margin: 0; }
dl.dados dd { margin: 0; font-weight: 700; text-align: right; }

/* ===========================================================================
   PAINEL ADMINISTRATIVO
   ---------------------------------------------------------------------------
   A tela de acesso e uma pagina so, larga e arejada. O painel e o oposto:
   muita linha de tabela, muito campo, uso diario. Por isso os controles aqui
   sao mais baixos e mais densos que os do login, e a barra do topo fica fixa.
   Tudo abaixo desta linha vale apenas dentro de body.app.
   =========================================================================== */

:root {
  --info: #14499f;
  --info-fundo: #eef3fd;
  --info-borda: #cfdcf6;
  --aviso-fundo: #fdf6ec;
  --aviso-borda: #eddcc0;
  --neutro-fundo: #f1f0ec;
  --neutro-borda: #e2e0da;
  --sombra-cartao: 0 1px 2px rgba(20, 20, 15, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --info: #9dc0fb;
    --info-fundo: #131c2c;
    --info-borda: #24354f;
    --aviso-fundo: #241d10;
    --aviso-borda: #443a1e;
    --neutro-fundo: #201f1a;
    --neutro-borda: #302f28;
    --sombra-cartao: none;
  }
}

/* --------------------------------- estrutura ------------------------------ */

.pular {
  position: absolute; left: -9999px;
  padding: 12px 18px; z-index: 20;
  background: var(--marca); color: var(--marca-contraste);
  border-radius: 0 0 var(--raio) 0; font-weight: 700;
}
.pular:focus { left: 0; top: 0; }

body.app { background: var(--papel); }

.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  height: 62px;
  padding: 0 clamp(14px, 3vw, 30px);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo-marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.topo-marca .logo-selo { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 7px; }
.topo-marca .logo-selo svg { width: 20px; height: 20px; }
.topo-marca b { display: block; font-size: 16px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.topo-marca small {
  display: block; margin-top: 1px;
  font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-suave);
}

.nav { display: flex; gap: 2px; margin-right: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 13px; border-radius: var(--raio);
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--texto-suave);
  transition: background-color .15s, color .15s;
}
.nav-item:hover { background: var(--papel); color: var(--texto); }
.nav-item.atual { background: var(--info-fundo); color: var(--info); }
.nav-item svg { flex: 0 0 18px; }

.topo-conta { display: flex; align-items: center; gap: 6px; }
.conta-eu {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 5px; border-radius: 999px;
  text-decoration: none; color: inherit;
}
.conta-eu:hover { background: var(--papel); }
.conta-eu .inicial {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marca); color: var(--marca-contraste);
  font-weight: 900; font-size: 14px;
}
.conta-texto b { display: block; font-size: 13px; line-height: 1.2; }
.conta-texto small { display: block; font-size: 11px; color: var(--texto-suave); }

.botao-icone {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--raio);
  background: transparent; color: var(--texto-suave);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.botao-icone:hover { background: var(--papel); color: var(--texto); border-color: var(--borda); }

.conteudo {
  width: 100%; max-width: 880px;
  margin: 0 auto;
  padding: 30px clamp(14px, 3vw, 30px) 80px;
}
.conteudo.largo { max-width: 1240px; }

/* --------------------------------- cabecalho ------------------------------ */

.cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin: 0 0 24px;
}
.app h1 { margin: 0; font-size: clamp(23px, 2.4vw, 31px); letter-spacing: -.015em; }
.app .linha-fina { margin: 8px 0 0; max-width: 68ch; font-size: 14.5px; color: var(--texto-suave); }
.app .linha-fina strong { color: var(--texto); font-weight: 700; }

.volta {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 10px;
  font-size: 13px; font-weight: 700; text-decoration: none; color: var(--texto-suave);
}
.volta:hover { color: var(--marca); }
.cabecalho .acoes { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------------------------------- botoes -------------------------------- */
/* .bt e o botao do painel: mais baixo que o .botao do login, e nunca ocupa a
   largura toda -- aqui eles aparecem lado a lado. */

.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--raio);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bt:focus-visible { outline: none; box-shadow: var(--anel); }
.bt svg { flex: 0 0 auto; }

.bt-principal { background: var(--marca); border-color: var(--marca); color: var(--marca-contraste); }
.bt-principal:hover { background: var(--marca-forte); border-color: var(--marca-forte); }

.bt-discreto { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.bt-discreto:hover { background: var(--papel); border-color: var(--borda-forte); }

.bt-perigo { background: var(--superficie); border-color: var(--erro-borda); color: var(--erro); }
.bt-perigo:hover { background: var(--erro-fundo); }

.bt-mini { height: 32px; padding: 0 10px; font-size: 12.5px; }
.bt.desligado { opacity: .45; pointer-events: none; }
.bt[data-enviando] { opacity: .6; pointer-events: none; }

/* --------------------------------- cartoes -------------------------------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  padding: 20px clamp(16px, 2.2vw, 24px);
  margin: 0 0 18px;
}
.cartao-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 0 0 16px;
}
.cartao-topo h2 { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.cartao-risco { border-color: var(--erro-borda); }
.cartao .linha-fina { margin: 0 0 16px; }

/* ---------------------------------- numeros ------------------------------- */

.numeros {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0 0 18px;
}
.numero {
  display: block; text-decoration: none; color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  padding: 16px 18px;
  transition: border-color .15s;
}
a.numero:hover { border-color: var(--marca); }
.numero-rotulo {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-suave);
}
.numero-valor {
  display: block; margin: 7px 0 3px;
  font-family: var(--titulo);
  font-size: 27px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
}
.numero-detalhe { display: block; font-size: 12.5px; color: var(--texto-suave); }

/* --------------------------------- tabelas -------------------------------- */
/* A tabela nao encolhe: quem rola e o container, para a coluna de valor nunca
   virar duas linhas num celular. */

.rolagem { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left; white-space: nowrap;
  padding: 0 12px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
}
.tabela td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.tabela tbody tr:hover { background: var(--papel); }
.tabela tr.inativa td { opacity: .6; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: -.02em;
}
.tabela small.sub { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-suave); }
.tabela .atrasada { color: var(--erro); font-weight: 700; }
.tabela .acoes-celula { text-align: right; white-space: nowrap; }
.tabela .col-marca { width: 34px; padding-right: 0; }
.celula-vazia { padding: 22px 12px; text-align: center; color: var(--texto-suave); }

.link-forte { color: var(--texto); font-weight: 700; text-decoration: none; }
.link-forte:hover { color: var(--marca); text-decoration: underline; }
.sub { color: var(--texto-suave); }

.lista-simples { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.lista-simples li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--borda);
}
.lista-simples li:last-child { border-bottom: 0; }

/* ----------------------------------- selos -------------------------------- */

.selo {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.selo-ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok); }
.selo-aviso { background: var(--aviso-fundo); border-color: var(--aviso-borda); color: var(--alerta); }
.selo-info { background: var(--info-fundo); border-color: var(--info-borda); color: var(--info); }
.selo-neutro { background: var(--neutro-fundo); border-color: var(--neutro-borda); color: var(--texto-suave); }
/* Ficha aberta por quem so consulta: os campos travam, mas continuam legiveis
   -- o cinza padrao do navegador para campo desabilitado apagaria o dado. */
.so-leitura { border: 0; margin: 0; padding: 0; min-width: 0; }
.so-leitura input, .so-leitura select, .so-leitura textarea {
  color: var(--texto); -webkit-text-fill-color: var(--texto); opacity: 1; cursor: default;
}

/* Imita o carimbo da etiqueta: o texto e o fundo trocam de lugar, e o tema
   escuro continua lendo bem. */
.selo-agente {
  background: var(--texto); color: var(--papel); border-radius: 4px;
  letter-spacing: .04em; vertical-align: 1px;
}

.valor-destaque {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px; padding: 0 0 18px;
  border-bottom: 1px solid var(--borda);
}
.valor-destaque strong {
  font-family: var(--titulo);
  font-size: clamp(30px, 4vw, 40px); font-weight: 900; letter-spacing: -.025em;
}

/* -------------------------------- formularios ----------------------------- */
/* Os campos do painel sao mais baixos que os do login: aqui costuma haver dez
   deles na tela, e 54px cada empurraria metade do formulario para fora. */

.app .campo { margin-bottom: 0; }
.app .grupo { border: 0; margin: 0 0 22px; padding: 0; }
.app .grupo:last-of-type { margin-bottom: 0; }
.app .grupo legend {
  padding: 0 0 9px; margin: 0 0 14px; width: 100%;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--marca);
  border-bottom: 1px solid var(--borda);
}
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.campo-largo, .campo-marcador { grid-column: 1 / -1; }
.app .campo:has(textarea) { grid-column: 1 / -1; }

.app label { font-size: 11px; letter-spacing: .12em; margin-bottom: 7px; }
.app label em { font-style: normal; color: var(--erro); }
.rotulo-grupo {
  display: block; margin: 0 0 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave);
}

.app .entrada input, .app .entrada select, .app .entrada textarea {
  width: 100%; height: 44px; padding: 0 13px;
  font: inherit; font-size: 15px; color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  transition: border-color .15s, box-shadow .15s;
}
.app .entrada textarea { height: auto; padding: 11px 13px; line-height: 1.5; resize: vertical; }
.app .entrada select { appearance: none; padding-right: 34px; cursor: pointer; }
.app .entrada:has(select)::after {
  content: ""; position: absolute; right: 14px; pointer-events: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave);
  transform: translateY(-2px) rotate(45deg);
}
.app .entrada input:hover, .app .entrada select:hover, .app .entrada textarea:hover {
  border-color: var(--borda-forte);
}
.app .entrada input:focus, .app .entrada select:focus, .app .entrada textarea:focus {
  outline: none; border-color: var(--marca); box-shadow: var(--anel);
}
.com-erro .entrada input, .com-erro .entrada select { border-color: var(--erro-borda); }
.dica-erro { color: var(--erro); font-weight: 700; }
.app .dica { margin-top: 7px; font-size: 12.5px; }

/* Prefixo grudado no campo: "R$" fica dentro da moldura, nao ao lado. */
.com-prefixo .prefixo {
  position: absolute; left: 13px;
  font-size: 14px; font-weight: 700; color: var(--texto-suave); pointer-events: none;
}
.com-prefixo input { padding-left: 40px; }

.opcoes { display: flex; gap: 9px; flex-wrap: wrap; }
.opcao {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 15px; margin: 0;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie);
  font-size: 14.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--texto); cursor: pointer;
}
.opcao:has(input:checked) { border-color: var(--marca); background: var(--info-fundo); color: var(--info); }
.opcao:has(input:focus-visible) { box-shadow: var(--anel); }

.marcador {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 14.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--texto); cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
  width: 17px; height: 17px; accent-color: var(--marca); margin: 0; cursor: pointer;
}

.rodape-form {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 24px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--borda);
}

/* ---------------------------------- filtros ------------------------------- */

.filtros {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  margin: 0 0 18px;
}
.filtros .entrada { flex: 0 1 auto; }
.filtros .entrada input, .filtros .entrada select { height: 40px; font-size: 14px; }
.entrada-busca { flex: 1 1 240px; min-width: 200px; }
.entrada-busca svg { position: absolute; left: 12px; color: var(--texto-fraco); pointer-events: none; }
.entrada-busca input { padding-left: 36px; }
.marcador-filtro {
  height: 40px; padding: 0 13px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); font-size: 14px;
}

/* -------------------------------- paginacao ------------------------------- */

.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-size: 13.5px; color: var(--texto-suave);
}
.paginacao-bts { display: flex; align-items: center; gap: 9px; }
.paginacao-pos { font-weight: 700; color: var(--texto); }

/* ------------------------------- barra do lote ---------------------------- */
/* Aparece so quando ha cobranca marcada, e gruda no rodape da tela: a lista
   pode ser longa, e o botao nao pode ficar la em cima, fora de vista. */

.barra-lote {
  position: sticky; bottom: 14px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--marca); border-radius: 10px;
  box-shadow: 0 6px 22px rgba(20, 20, 15, .12);
}
.barra-lote-conta { font-size: 14px; color: var(--texto-suave); }
.barra-lote-conta strong { font-size: 17px; color: var(--texto); }
/* A opcao de estender para o filtro inteiro fica embaixo da contagem: e uma
   decisao com consequencia maior, nao pode passar por engano. */
.marcador-todos {
  display: flex; margin-top: 8px;
  font-size: 13.5px; font-weight: 400; color: var(--texto-suave);
}
.marcador-todos strong { font-size: inherit; font-weight: 700; }
.barra-lote-campos { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.barra-lote-campos input[type="text"],
.barra-lote-campos input[type="month"],
.barra-lote-campos select {
  height: 40px; padding: 0 12px; font: inherit; font-size: 14px;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.barra-lote-campos input[type="text"] { min-width: 200px; }
.rotulo-inline {
  margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave); white-space: nowrap;
}
.barra-lote-campos input:focus, .barra-lote-campos select:focus {
  outline: none; border-color: var(--marca); box-shadow: var(--anel);
}

/* --------------------------------- diversos ------------------------------- */

.vazio { padding: 44px 20px; text-align: center; }
.vazio p { margin: 0 0 18px; color: var(--texto-suave); font-size: 15px; }

.atalhos { display: flex; gap: 9px; flex-wrap: wrap; }
.acoes-linha { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.forma-baixa { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.forma-baixa .entrada { width: 150px; }
.forma-baixa .entrada input { height: 40px; }

.app .aviso { margin-bottom: 20px; }
.app dl.dados { margin-bottom: 0; }
.app .perfil { margin-bottom: 22px; }

/* ---------------------------------- telas --------------------------------- */

/* A barra so aparece com algo marcado. Sem isto o display:flex de .barra-lote
   vencia o atributo hidden, e a barra "0 marcado(s)" cobria a lista sempre. */
.barra-lote[hidden] { display: none; }

/* O icone da lupa fica dentro do campo; o recuo geral dos campos do painel
   (mais especifico) empurrava o texto para baixo dele. */
.app .entrada-busca input { padding-left: 36px; }

/* ------------------------ menu: telas intermediarias ---------------------- */
/* Entre 1024 e 1399px os sete itens nao cabiam com o nome da APAE e da conta
   ao lado: o nome quebrava em tres linhas e Usuarios/Instituicao sumiam para
   fora da barra. Aqui fica so a logo e a inicial; o menu inteiro cabe. */

@media (min-width: 1024px) and (max-width: 1399px) {
  .topo { gap: 10px; }
  .topo-marca > span:not(.logo-selo) { display: none; }
  .conta-texto { display: none; }
  .botao-icone .so-leitor { display: none; }
  .nav-item { padding: 8px 10px; gap: 6px; font-size: 13.5px; }
}

/* ---------------------------- celular: modo app --------------------------- */
/* Abaixo de 1024px o painel vira aplicativo: barra fina no topo so com a marca
   e a conta, e as secoes em abas fixas no rodape, ao alcance do polegar. O que
   nao cabe em aba (Agentes, Usuarios, Instituicao, conta, sair) fica na folha
   "Mais", que sobe de baixo. */

.abas { display: none; }

@media (max-width: 1023px) {
  body.app { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  .topo {
    height: calc(56px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    gap: 10px;
  }
  .topo .nav { display: none; }
  .topo-marca { margin-right: auto; min-width: 0; }
  .topo-marca > span:not(.logo-selo) { min-width: 0; }
  .topo-marca b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conta-texto { display: none; }
  .topo-conta form { display: none; }       /* sair mora na folha "Mais" */

  .abas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    display: flex; align-items: stretch;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--superficie);
    border-top: 1px solid var(--borda);
    box-shadow: 0 -6px 20px rgba(20, 20, 15, .06);
  }
  .aba {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 2px;
    font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
    color: var(--texto-suave); text-decoration: none;
    cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .aba span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* A secao atual ganha a "pilula" atras do icone, como nos apps Android/iOS. */
  .aba svg {
    width: 22px; height: 22px; box-sizing: content-box;
    padding: 4px 14px; border-radius: 999px;
    transition: background-color .15s;
  }
  .aba.atual { color: var(--marca); }
  .aba.atual svg { background: var(--info-fundo); }
  .aba:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: 10px; }

  .aba-mais { flex: 1 1 0; min-width: 0; display: flex; }
  .aba-mais > summary { width: 100%; }
  .aba-mais > summary::-webkit-details-marker { display: none; }
  .aba-mais[open] > summary { color: var(--marca); }
  .aba-mais[open] > summary svg { background: var(--info-fundo); }
  /* Fundo escurecido atras da folha. Fica abaixo da barra de abas, que
     continua visivel e tocavel. */
  .aba-mais[open]::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(10, 10, 8, .32);
  }

  .folha {
    position: fixed; left: 8px; right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 150px); overflow-y: auto;
    padding: 8px;
    background: var(--superficie);
    border: 1px solid var(--borda); border-radius: 18px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
    animation: folha-sobe .18s ease-out;
  }
  @keyframes folha-sobe { from { transform: translateY(12px); opacity: 0; } }

  .folha-conta {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px 14px; margin: 0 0 6px;
    border-bottom: 1px solid var(--borda);
  }
  .folha-conta .inicial {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--marca); color: var(--marca-contraste); font-weight: 900;
  }
  .folha-conta b { display: block; font-size: 15px; line-height: 1.2; }
  .folha-conta small { display: block; font-size: 12.5px; color: var(--texto-suave); }

  .folha form { margin: 0; }
  .folha-item {
    display: flex; align-items: center; gap: 14px; width: 100%;
    min-height: 50px; padding: 0 12px;
    border: 0; border-radius: 12px; background: none;
    font: inherit; font-size: 15.5px; font-weight: 700; text-align: left;
    color: var(--texto); text-decoration: none; cursor: pointer;
  }
  .folha-item svg { color: var(--texto-suave); }
  .folha-item:hover, .folha-item:active { background: var(--papel); }
  .folha-item.atual { background: var(--info-fundo); color: var(--info); }
  .folha-item.atual svg { color: var(--info); }
  .folha-sair, .folha-sair svg { color: var(--erro); }

  /* A barra de "gerar" gruda acima das abas, e nao atras delas. */
  .barra-lote { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .conteudo { padding-top: 20px; }
}

/* --------------------------- celular: listas em cartao -------------------- */
/* Tabela larga num celular obriga a rolar para o lado e quebra nome e telefone
   em tres linhas. Aqui cada linha vira um cartao: o nome (o link forte) vem
   em cima, ocupando a largura, e o resto se acomoda embaixo, lado a lado. O
   titulo das colunas some -- valor, telefone e situacao se explicam sozinhos. */

@media (max-width: 640px) {
  .app .rolagem { overflow: visible; margin: 0; padding: 0; }
  .app .tabela, .app .tabela tbody { display: block; }
  .app .tabela thead { display: none; }
  .app .tabela tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--borda);
  }
  .app .tabela tbody tr:hover { background: transparent; }
  .app .tabela tr:last-child { border-bottom: 0; }
  .app .tabela td { padding: 0; border: 0; }
  .app .tabela td.num { text-align: left; font-weight: 700; }
  .app .tabela .col-marca { order: -2; width: auto; }
  .app .tabela td:has(> .link-forte) { order: -1; flex: 1 1 calc(100% - 40px); font-size: 15px; }
  .app .tabela .col-marca:empty { display: none; }
  .app .tabela .col-marca:empty ~ td:has(> .link-forte) { flex-basis: 100%; }
  .app .tabela small.sub { display: inline; margin: 0 0 0 5px; }
  .app .tabela .acoes-celula { margin-left: auto; }
  .app .tabela .celula-vazia { flex: 1 1 100%; }
  /* Coluna sem dado ("—") nao precisa de lugar no cartao. */
  .app .tabela td:has(> .traco) { display: none; }

  /* Numeros do resumo em duas colunas, como os blocos de um app. */
  .numeros { grid-template-columns: 1fr 1fr; gap: 10px; }
  .numero { padding: 13px 14px; }
  .numero-rotulo { font-size: 10px; letter-spacing: .08em; }
  .numero-valor { font-size: 21px; }
  .numero-detalhe { font-size: 11.5px; }

  /* Barra de "gerar" enxuta: no celular ela divide a tela com a lista. */
  .barra-lote { padding: 10px 12px; gap: 8px; border-radius: 14px; }
  .barra-lote-conta { font-size: 13px; }
  .marcador-todos { margin-top: 4px; font-size: 12.5px; }
  .barra-lote .rotulo-inline { display: none; }
  .barra-lote-campos { width: 100%; }
  .barra-lote-campos > * { min-width: 0; }
  /* Cobrar: so mes e botao, lado a lado. */
  .barra-lote-campos:has(> input[type="month"]) { flex-wrap: nowrap; }
  .barra-lote-campos > input[type="month"] { flex: 1 1 auto; }
  .barra-lote-campos:has(> input[type="month"]) > .bt { flex: 0 0 auto; }
  /* Etiquetas: nome do lote na linha inteira, modelo e QR embaixo. */
  .barra-lote-campos input[type="text"] { flex: 1 1 100%; min-width: 0; }

  .filtros .entrada, .filtros .marcador-filtro { flex: 1 1 140px; }
  .filtros > .bt { flex: 1 1 100%; }
  .entrada-busca { flex-basis: 100%; }
}

@media (max-width: 860px) {
  .cabecalho { align-items: flex-start; }
  .cabecalho .acoes { width: 100%; }
  .cabecalho .acoes .bt { flex: 1 1 auto; }
  .barra-lote-campos { width: 100%; }
  .barra-lote-campos > * { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .topo, .abas, .filtros, .barra-lote, .paginacao, .cabecalho .acoes, .acoes-celula { display: none; }
  body.app { padding-bottom: 0; }
  .conteudo { max-width: none; padding: 0; }
  .cartao { border: 0; box-shadow: none; padding: 0; }
}

/* ------------------------------- instituição ------------------------------ */

/* Esconde do olho sem esconder do leitor de tela nem do teclado: o input de
   arquivo continua acessivel, e quem clica clica no <label> estilizado. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* O label vira botao, entao precisa reagir ao foco do input escondido. */
.logo-controles:focus-within .bt-discreto {
  outline: none; box-shadow: var(--anel); border-color: var(--marca);
}

.logo-editor { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.logo-previa {
  flex: 0 0 auto;
  width: 160px; min-height: 96px;
  display: grid; place-items: center;
  padding: 12px;
  /* Fundo xadrez claro: mostra onde a imagem termina, mesmo sendo branca. */
  background: var(--superficie);
  background-image:
    linear-gradient(45deg, var(--papel) 25%, transparent 25%, transparent 75%, var(--papel) 75%),
    linear-gradient(45deg, var(--papel) 25%, transparent 25%, transparent 75%, var(--papel) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.logo-previa img { max-width: 100%; max-height: 120px; display: block; }
.logo-vazia { font-size: 12.5px; color: var(--texto-fraco); text-align: center; }
.logo-controles { flex: 1 1 240px; min-width: 220px; }
.logo-controles .bt { margin-bottom: 10px; }

/* A logo no topo do painel entra no lugar do selo desenhado. */
.logo-selo-imagem { background: transparent; padding: 0; overflow: hidden; }
.logo-selo-imagem img { width: 100%; height: 100%; object-fit: contain; }