/* ==================================================================
   EBD — Sistema da Escola Bíblica Dominical
   Linguagem visual herdada da tela de login:
   azul-noite + dourado, marfim para o conteúdo, Playfair + Inter,
   e a fita de marcador de livro como elemento de assinatura.
   ================================================================== */

/* ---------- 1. Tokens --------------------------------------------- */
:root{
  /* Cores */
  --navy-deep:#0f172a;
  --navy-mid:#1b2a4a;
  --navy-soft:#26385c;
  --gold:#c9a227;
  --gold-light:#e2c467;
  --gold-wash:rgba(201,162,39,.12);
  --ivory:#faf6ee;
  --paper:#fffdf8;
  --ink:#26241d;
  --ink-soft:#6b6455;
  --linha:#e7e0cd;

  --ok:#2f7d55;
  --ok-bg:#e8f4ed;
  --alerta:#9a6a12;
  --alerta-bg:#fdf3dd;
  --erro:#8a2626;
  --erro-bg:#fdecec;
  --info:#1f5378;
  --info-bg:#e7f1f8;

  /* Tipografia */
  --fonte-titulo:'Playfair Display', Georgia, serif;
  --fonte-texto:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Medidas */
  --sidebar:264px;
  --topo:64px;
  --raio:12px;
  --raio-sm:8px;
  --sombra:0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.18);
  --sombra-alta:0 25px 50px -12px rgba(0,0,0,.35);
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  font-family:var(--fonte-texto);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--fonte-titulo); font-weight:700; color:var(--ink); margin:0; }

a{ color:var(--navy-mid); text-decoration:none; }
a:hover{ color:var(--gold); }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}

/* ==================================================================
   2. Tela de login e outras telas sem menu
   ================================================================== */
.auth{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(201,162,39,.28), transparent 65%),
    linear-gradient(160deg, var(--navy-mid) 0%, var(--navy-deep) 70%);
}
.auth::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(100deg,
    rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px,
    transparent 1px, transparent 90px);
}

.auth__palco{
  position:relative;
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Elemento de assinatura: a fita de marcador de livro */
.fita{
  position:relative;
  z-index:2;
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  color:var(--navy-deep);
  font-family:var(--fonte-titulo);
  font-weight:700;
  letter-spacing:.14em;
  font-size:.95rem;
  padding:10px 30px 22px;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  clip-path:polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  margin-bottom:-14px;
  animation:descer .5s ease-out both;
}

.cartao-auth{
  position:relative;
  z-index:1;
  width:100%;
  background:var(--ivory);
  border-radius:14px;
  padding:52px 36px 34px;
  box-shadow:var(--sombra-alta), 0 0 0 1px rgba(201,162,39,.15);
  animation:subir .6s ease-out both .08s;
}

@keyframes descer{ from{opacity:0;transform:translateY(-14px);} to{opacity:1;transform:translateY(0);} }
@keyframes subir { from{opacity:0;transform:translateY(18px);}  to{opacity:1;transform:translateY(0);} }

.emblema{
  width:64px;height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--gold-light), var(--gold));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(201,162,39,.35), inset 0 0 0 3px rgba(255,255,255,.35);
}
.emblema svg{ width:30px;height:30px; }

.auth__titulo{ text-align:center; font-size:1.5rem; margin:0 0 6px; }
.auth__sub{ text-align:center; color:var(--ink-soft); font-size:.85rem; margin:0 0 8px; }

/* Divisor ornamentado */
.floreio{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin:6px 0 26px; color:var(--gold);
}
.floreio::before,.floreio::after{
  content:""; height:1px; width:56px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.floreio i{ font-size:.55rem; }

.auth__rodape{
  margin-top:26px; text-align:center; font-size:.75rem;
  color:rgba(250,246,238,.55); letter-spacing:.02em;
}
.auth__voltar{
  display:block; text-align:center; margin-top:20px;
  font-size:.82rem; color:var(--ink-soft);
}
.auth__voltar:hover{ color:var(--gold); text-decoration:underline; }

/* ==================================================================
   3. Formulários
   ================================================================== */
.rotulo{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.campo{ margin-bottom:18px; }
.campo--icone{ position:relative; }
.campo--icone i.icone{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:.9rem; pointer-events:none;
}
.campo--icone .controle{ padding-left:40px; }

.controle{
  width:100%;
  padding:11px 14px;
  border-radius:var(--raio-sm);
  border:1.5px solid var(--linha);
  background:var(--paper);
  font-family:var(--fonte-texto);
  font-size:.95rem;
  color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
}
.controle::placeholder{ color:#b8b09a; }
.controle:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
.controle:disabled,.controle[readonly]{ background:#f3efe4; color:var(--ink-soft); }
textarea.controle{ min-height:96px; resize:vertical; }
select.controle{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6455' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  padding-right:38px;
}

.ajuda{ font-size:.78rem; color:var(--ink-soft); margin:6px 0 0; }

/* Grade de campos */
.grade{ display:grid; gap:0 18px; grid-template-columns:1fr; }
@media (min-width:640px){
  .grade--2{ grid-template-columns:repeat(2,1fr); }
  .grade--3{ grid-template-columns:repeat(3,1fr); }
  .grade--4{ grid-template-columns:repeat(4,1fr); }
}

/* Opções lado a lado (rádio) */
.opcoes{ display:flex; flex-wrap:wrap; gap:10px; }
.opcao{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  border:1.5px solid var(--linha);
  border-radius:var(--raio-sm);
  background:var(--paper);
  cursor:pointer;
  font-size:.9rem;
  transition:border-color .15s, background .15s;
}
.opcao:hover{ border-color:var(--gold-light); }
.opcao input{ accent-color:var(--gold); margin:0; }
.opcao:has(input:checked){ border-color:var(--gold); background:var(--gold-wash); font-weight:600; }

/* ==================================================================
   4. Botões
   ================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px solid transparent;
  border-radius:var(--raio-sm);
  padding:11px 18px;
  font-family:var(--fonte-texto);
  font-weight:600;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s, filter .15s, background .15s, color .15s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(0); }

.btn--ouro{
  color:var(--navy-deep);
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow:0 8px 18px rgba(201,162,39,.35);
}
.btn--ouro:hover{ transform:translateY(-1px); box-shadow:0 12px 22px rgba(201,162,39,.45); filter:brightness(1.03); color:var(--navy-deep); }

.btn--escuro{ color:var(--ivory); background:var(--navy-mid); }
.btn--escuro:hover{ background:var(--navy-deep); color:var(--ivory); }

.btn--linha{ color:var(--navy-mid); background:transparent; border-color:var(--linha); }
.btn--linha:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-wash); }

.btn--perigo{ color:var(--erro); background:var(--erro-bg); border-color:#f3b9b9; }
.btn--perigo:hover{ background:#f9dcdc; color:var(--erro); }

.btn--bloco{ width:100%; }
.btn--sm{ padding:7px 12px; font-size:.82rem; }

.btn:disabled,.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; }

.acoes{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.acoes--fim{ justify-content:flex-end; }
.acoes--entre{ justify-content:space-between; }

/* Botão apenas com ícone, usado nas tabelas */
.btn-icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:var(--raio-sm);
  border:1.5px solid var(--linha);
  background:var(--paper);
  color:var(--navy-mid);
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.btn-icone:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-wash); }
.btn-icone--perigo:hover{ border-color:#f3b9b9; color:var(--erro); background:var(--erro-bg); }

/* ==================================================================
   5. Estrutura do sistema (menu + conteúdo)
   ================================================================== */
.app{ min-height:100vh; min-height:100dvh; }

/* --- Menu lateral --- */
.menu{
  position:fixed; inset:0 auto 0 0;
  width:var(--sidebar);
  background:linear-gradient(175deg, var(--navy-mid) 0%, var(--navy-deep) 65%);
  color:rgba(250,246,238,.82);
  display:flex; flex-direction:column;
  z-index:60;
  transform:translateX(-100%);
  transition:transform .25s ease;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.menu.is-aberto{ transform:translateX(0); }

@media (min-width:1024px){
  .menu{ transform:translateX(0); }
  .conteudo{ margin-left:var(--sidebar); }
}

.menu__marca{
  display:flex; align-items:center; gap:12px;
  padding:20px 20px 18px;
  border-bottom:1px solid rgba(201,162,39,.2);
}
.menu__brasao{
  width:38px;height:38px;flex:0 0 38px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--gold-light), var(--gold));
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);
}
.menu__brasao svg{ width:20px;height:20px; }
.menu__nome{ font-family:var(--fonte-titulo); font-size:1.15rem; color:var(--ivory); letter-spacing:.08em; line-height:1.1; }
.menu__igreja{ font-size:.7rem; color:rgba(250,246,238,.5); letter-spacing:.04em; }

.menu__secao{
  padding:20px 20px 6px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:.85;
}

.menu__lista{ list-style:none; margin:0; padding:0 12px; }

.menu__item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:var(--raio-sm);
  color:rgba(250,246,238,.82);
  font-size:.9rem;
  transition:background .15s, color .15s;
}
.menu__item i{ width:18px; text-align:center; font-size:.9rem; opacity:.8; }
.menu__item:hover{ background:rgba(255,255,255,.07); color:var(--ivory); }
.menu__item.is-ativo{
  background:var(--gold-wash);
  color:var(--gold-light);
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold);
}
.menu__item.is-ativo i{ opacity:1; }

.menu__rodape{
  margin-top:auto;
  padding:18px 20px 22px;
  border-top:1px solid rgba(201,162,39,.2);
  font-size:.72rem;
  color:rgba(250,246,238,.45);
}

/* Fundo escuro quando o menu abre no celular */
.veu{
  position:fixed; inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(2px);
  z-index:55;
  opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s;
}
.veu.is-visivel{ opacity:1; visibility:visible; }
@media (min-width:1024px){ .veu{ display:none; } }

/* --- Barra superior --- */
.topo{
  position:sticky; top:0; z-index:40;
  height:var(--topo);
  display:flex; align-items:center; gap:14px;
  padding:0 18px;
  background:rgba(250,246,238,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo__menu{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px;height:40px;
  border:1.5px solid var(--linha); border-radius:var(--raio-sm);
  background:var(--paper); color:var(--navy-mid); cursor:pointer;
}
@media (min-width:1024px){ .topo__menu{ display:none; } }

.topo__titulo{ font-family:var(--fonte-titulo); font-size:1.05rem; }
.topo__espaco{ flex:1; }

.topo__usuario{
  display:flex; align-items:center; gap:10px;
  padding:6px 6px 6px 12px;
  border-radius:999px;
  border:1.5px solid var(--linha);
  background:var(--paper);
}
.topo__dados{ text-align:right; line-height:1.2; }
.topo__nome{ font-size:.82rem; font-weight:600; }
.topo__perfil{ font-size:.7rem; color:var(--ink-soft); }
.topo__avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(160deg, var(--gold-light), var(--gold));
  color:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;
}
@media (max-width:560px){ .topo__dados{ display:none; } }

/* --- Área de conteúdo --- */
.conteudo{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.pagina{ padding:26px 18px 48px; flex:1; }
@media (min-width:768px){ .pagina{ padding:32px 32px 56px; } }

.limite{ max-width:1180px; margin:0 auto; }
.limite--estreito{ max-width:720px; }
.limite--medio{ max-width:920px; }

/* Cabeçalho de página, com a fita como marcador */
.cabecalho{
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--linha);
}
.cabecalho__eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:6px;
}
.cabecalho__titulo{ font-size:1.6rem; line-height:1.15; }
@media (max-width:520px){ .cabecalho__titulo{ font-size:1.32rem; } }
.cabecalho__sub{ color:var(--ink-soft); font-size:.88rem; margin:6px 0 0; }

/* ==================================================================
   6. Cartões e painéis
   ================================================================== */
.cartao{
  background:var(--paper);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  overflow:hidden;
}
.cartao + .cartao{ margin-top:20px; }

.cartao__topo{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--linha);
  background:linear-gradient(180deg, rgba(201,162,39,.06), transparent);
}
.cartao__titulo{ font-size:1rem; display:flex; align-items:center; gap:9px; }
.cartao__titulo i{ color:var(--gold); font-size:.9rem; }
.cartao__corpo{ padding:20px; }
.cartao__rodape{
  padding:14px 20px;
  border-top:1px solid var(--linha);
  background:rgba(201,162,39,.04);
}

/* Indicadores numéricos */
.indicadores{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }

.indicador{
  position:relative;
  background:var(--paper);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:18px 20px 18px 22px;
  box-shadow:var(--sombra);
  overflow:hidden;
}
.indicador::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
}
.indicador__rotulo{
  font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.indicador__valor{
  font-family:var(--fonte-titulo);
  font-size:1.85rem; line-height:1.1; margin-top:6px;
  color:var(--navy-deep);
}
.indicador__nota{ font-size:.78rem; color:var(--ink-soft); margin-top:4px; }
.indicador__icone{
  position:absolute; right:16px; top:16px;
  color:var(--gold); opacity:.35; font-size:1.5rem;
}
.indicador--verde::before{ background:linear-gradient(180deg,#5aa87d,var(--ok)); }
.indicador--verde .indicador__icone{ color:var(--ok); }
.indicador--vermelho::before{ background:linear-gradient(180deg,#c96a6a,var(--erro)); }
.indicador--vermelho .indicador__icone{ color:var(--erro); }
.indicador--azul::before{ background:linear-gradient(180deg,#4a86ad,var(--info)); }
.indicador--azul .indicador__icone{ color:var(--info); }

/* Atalhos do painel inicial */
.atalhos{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }

.atalho{
  display:block;
  background:var(--paper);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:20px;
  box-shadow:var(--sombra);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.atalho:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  box-shadow:0 12px 28px -14px rgba(201,162,39,.5);
}
.atalho__icone{
  width:42px;height:42px;border-radius:10px;
  background:var(--gold-wash); color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem; margin-bottom:12px;
}
.atalho__titulo{ font-family:var(--fonte-titulo); font-size:1.05rem; color:var(--ink); }
.atalho__texto{ font-size:.84rem; color:var(--ink-soft); margin-top:5px; }

/* ==================================================================
   7. Tabelas
   ================================================================== */
.tabela-area{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

.tabela{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:520px; }
.tabela th,.tabela td{ padding:12px 14px; text-align:left; vertical-align:middle; }
.tabela thead th{
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
  background:rgba(201,162,39,.07);
  border-bottom:1px solid var(--linha);
  white-space:nowrap;
}
.tabela tbody tr{ border-bottom:1px solid var(--linha); }
.tabela tbody tr:last-child{ border-bottom:none; }
.tabela tbody tr:hover{ background:rgba(201,162,39,.05); }
.tabela td.num,.tabela th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tabela td.centro,.tabela th.centro{ text-align:center; }
.tabela td.acoes-col{ white-space:nowrap; text-align:right; }
.tabela tfoot td{
  font-weight:700; background:rgba(201,162,39,.07);
  border-top:2px solid var(--linha);
}
.tabela .destaque{ font-weight:600; color:var(--navy-deep); }

/* ==================================================================
   8. Selos, avisos e estados
   ================================================================== */
.selo{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
.selo--sim{ background:var(--ok-bg); color:var(--ok); }
.selo--nao{ background:var(--erro-bg); color:var(--erro); }
.selo--neutro{ background:#efeade; color:var(--ink-soft); }
.selo--ouro{ background:var(--gold-wash); color:#8a6d12; }
.selo--azul{ background:var(--info-bg); color:var(--info); }
.selo--alerta{ background:var(--alerta-bg); color:var(--alerta); }

.aviso{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 16px;
  border-radius:var(--raio-sm);
  border:1px solid transparent;
  font-size:.88rem;
  margin-bottom:18px;
}
.aviso i{ margin-top:2px; }
.aviso--sucesso{ background:var(--ok-bg); border-color:#b9dcc8; color:var(--ok); }
.aviso--erro{ background:var(--erro-bg); border-color:#f3b9b9; color:var(--erro); }
.aviso--aviso{ background:var(--alerta-bg); border-color:#ecd79b; color:var(--alerta); }
.aviso--info{ background:var(--info-bg); border-color:#b9d5e8; color:var(--info); }

.vazio{
  text-align:center;
  padding:44px 20px;
  color:var(--ink-soft);
}
.vazio i{ font-size:2rem; color:var(--gold); opacity:.45; display:block; margin-bottom:12px; }
.vazio__titulo{ font-family:var(--fonte-titulo); font-size:1.05rem; color:var(--ink); margin-bottom:6px; }
.vazio__texto{ font-size:.88rem; max-width:420px; margin:0 auto 16px; }

/* ==================================================================
   9. Filtros
   ================================================================== */
.filtros{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  padding:16px 20px;
  background:var(--paper);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  margin-bottom:20px;
}
.filtros .campo{ margin-bottom:0; flex:1 1 170px; min-width:150px; }
.filtros .acoes{ flex:0 0 auto; }
@media (max-width:560px){
  .filtros{ flex-direction:column; align-items:stretch; }
  .filtros .acoes .btn{ flex:1; }
}

.busca{ position:relative; flex:1 1 240px; }
.busca i{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:.85rem; pointer-events:none;
}
.busca .controle{ padding-left:38px; }

/* ==================================================================
   10. Blocos específicos
   ================================================================== */

/* Cartão de aluno no painel do professor */
.aluno{
  background:var(--paper);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:18px 20px;
  box-shadow:var(--sombra);
}
.aluno + .aluno{ margin-top:14px; }
.aluno--alerta{ border-color:#e9b7b7; box-shadow:0 0 0 1px rgba(138,38,38,.08), var(--sombra); }
.aluno__topo{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.aluno__nome{ font-family:var(--fonte-titulo); font-size:1.08rem; }
.aluno__meta{ font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.aluno__numeros{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.aluno__numero{ text-align:center; padding:10px 6px; border-radius:var(--raio-sm); background:rgba(201,162,39,.07); }
.aluno__numero b{ display:block; font-family:var(--fonte-titulo); font-size:1.15rem; }
.aluno__numero span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.aluno__numero--ok b{ color:var(--ok); }
.aluno__numero--falta b{ color:var(--erro); }
.aluno__numero--freq b{ color:var(--info); }

/* Pódio de destaques */
.podio{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.podio__item{
  background:var(--paper); border:1px solid var(--linha);
  border-radius:var(--raio); padding:16px; text-align:center;
  box-shadow:var(--sombra);
}
.podio__medalha{ font-size:1.6rem; line-height:1; }
.podio__periodo{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:8px 0 4px; }
.podio__nome{ font-family:var(--fonte-titulo); font-size:1rem; }
.podio__pontos{ font-size:.8rem; color:var(--gold); font-weight:600; margin-top:3px; }
.podio__item--campeao{ border-color:var(--gold); background:linear-gradient(180deg, var(--gold-wash), var(--paper)); }

/* Área de gráfico */
.grafico{ position:relative; width:100%; height:300px; }
@media (max-width:600px){ .grafico{ height:240px; } }

/* Lista simples com marcador dourado */
.lista{ list-style:none; margin:0; padding:0; }
.lista li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--linha);
  font-size:.88rem;
}
.lista li:last-child{ border-bottom:none; }
.lista li.is-destaque{ color:var(--gold); font-weight:600; }
.lista__data{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.82rem; }

/* Barra de progresso */
.barra{ height:7px; border-radius:999px; background:#efeade; overflow:hidden; }
.barra__preenchida{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--gold-light), var(--gold)); }

/* ==================================================================
   11. Utilidades
   ================================================================== */
.esconde{ display:none !important; }
.so-leitor{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.centro{ text-align:center; }
.direita{ text-align:right; }
.suave{ color:var(--ink-soft); }
.pequeno{ font-size:.82rem; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:8px; } .mt-2{ margin-top:16px; } .mt-3{ margin-top:24px; }
.mb-0{ margin-bottom:0; } .mb-1{ margin-bottom:8px; } .mb-2{ margin-bottom:16px; } .mb-3{ margin-bottom:24px; }
.flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.entre{ justify-content:space-between; }

/* ==================================================================
   12. Impressão
   Sai igual ao PDF: paisagem, cabeçalho da igreja, o quadro
   consolidado e a pontuação por classe na mesma folha.
   ================================================================== */
.folha-cabecalho{ display:none; }
.so-papel{ display:none; }

@media print{
  @page{ size:A4 landscape; margin:10mm; }

  html, body{
    background:#fff !important;
    color:#000;
    font-size:8.5pt;
    margin:0; padding:0;
  }

  /* Tudo o que é navegação some */
  .menu, .topo, .veu, .filtros, .acoes, .chamada-salvar,
  .nao-imprime, .aviso, .detalhe-erro, form.filtros,
  .cartao__topo, .cartao__rodape, .selo--neutro{
    display:none !important;
  }

  .conteudo{ margin-left:0 !important; }
  .pagina{ padding:0 !important; }
  .limite, .limite--medio, .limite--estreito{ max-width:none !important; }

  /* O cabeçalho de tela dá lugar ao cabeçalho de papel */
  .cabecalho{ display:none !important; }

  .folha-cabecalho{
    display:block;
    text-align:center;
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:2px solid #c9a227;
  }
  .folha-cabecalho h1{
    font-size:13pt; margin:0; color:#0f172a;
    font-family:var(--fonte-titulo);
  }
  .folha-cabecalho p{ font-size:9pt; margin:3px 0 0; color:#555; }

  /* Os dois quadros na mesma folha, sem quebrar no meio */
  .cartao, .folha-bloco{
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    margin:0 0 10px !important;
    break-inside:avoid;
    page-break-inside:avoid;
  }

  .tabela-area{ overflow:visible !important; }

  .tabela{
    min-width:0 !important;
    width:100%;
    font-size:8pt;
    border-collapse:collapse;
  }
  .tabela th, .tabela td{
    padding:3px 5px !important;
    border:0.5pt solid #999;
  }
  .tabela thead th{
    background:#f3ecd8 !important;
    color:#26241d !important;
    font-size:7pt;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .tabela tbody tr:nth-child(even) td{
    background:#fbf8f1 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .tabela tbody tr:hover{ background:none !important; }
  .tabela tfoot td{
    background:#f3ecd8 !important;
    font-weight:700;
    border-top:1pt solid #666;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* Título de cada quadro, já que o .cartao__topo sumiu */
  .folha-bloco::before{
    content:attr(data-folha-titulo);
    display:block;
    font-family:var(--fonte-titulo);
    font-size:10pt;
    color:#0f172a;
    margin:0 0 4px;
    padding-bottom:2px;
    border-bottom:0.5pt solid #c9a227;
  }

  /* Emoji de medalha não imprime bem: vira o número */
  .so-papel{ display:inline !important; }
  .nao-papel{ display:none !important; }

  .selo{
    border:0.5pt solid #999;
    background:none !important;
    color:#000 !important;
    padding:1px 5px;
  }

  a{ color:#000; text-decoration:none; }
  .suave{ color:#555 !important; }
}

/* ==================================================================
   13. Movimento reduzido
   ================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ==================================================================
   14. Chamada
   Um toque por aluno. Todos começam presentes, com bíblia e revista;
   o professor só marca as exceções. Nada de :has() aqui — o estado
   vem do próprio checkbox, com seletores irmãos que funcionam em
   qualquer navegador.
   ================================================================== */

/* ---- Progresso ---- */
.chamada-topo{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 22px; margin-bottom:20px;
  background:linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  border-radius:var(--raio); color:var(--ivory);
  box-shadow:var(--sombra);
}
.chamada-topo__anel{
  --pct:0;
  position:relative; width:62px; height:62px; flex:0 0 62px;
  border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(255,255,255,.14) 0);
  display:grid; place-items:center;
}
.chamada-topo__anel::after{
  content:""; position:absolute; inset:6px;
  border-radius:50%; background:var(--navy-deep);
}
.chamada-topo__pct{
  position:relative; z-index:1;
  font-family:var(--fonte-titulo); font-size:.9rem; color:var(--gold-light);
}
.chamada-topo__texto{ flex:1 1 200px; min-width:0; }
.chamada-topo__titulo{ display:block; font-family:var(--fonte-titulo); font-size:1.12rem; line-height:1.2; }
.chamada-topo__nota{ display:block; margin-top:3px; font-size:.82rem; color:rgba(250,246,238,.62); }

/* ---- Busca ---- */
.chamada-busca{
  position:relative; padding:14px 20px;
  border-bottom:1px solid var(--linha);
  background:rgba(201,162,39,.04);
}
.chamada-busca i{
  position:absolute; left:33px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:.85rem; pointer-events:none;
}
.chamada-busca .controle{ padding-left:38px; }

/* ---- Lista ---- */
.ch{ list-style:none; margin:0; padding:0; }

.ch__linha{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:0 18px 0 0;
  border-bottom:1px solid var(--linha);
  transition:background .18s;
}
.ch__linha:last-child{ border-bottom:none; }

/* O checkbox de presença fica fora da tela, mas acessível pelo teclado */
.ch__estado{
  position:absolute; width:1px; height:1px;
  opacity:0; margin:0; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden;
}

/* Área grande e clicável: o nome inteiro é o botão */
.ch__toque{
  flex:1 1 240px;
  display:flex; align-items:center; gap:14px;
  padding:15px 8px 15px 18px;
  min-height:64px;
  cursor:pointer; user-select:none;
  min-width:0;
}

/* Círculo de estado */
.ch__marca{
  position:relative;
  width:30px; height:30px; flex:0 0 30px;
  border-radius:50%;
  border:2px solid var(--linha);
  background:var(--paper);
  transition:background .18s, border-color .18s;
}
.ch__marca::after{
  content:""; position:absolute;
  left:9px; top:4px; width:7px; height:13px;
  border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(.4);
  opacity:0; transition:opacity .18s, transform .18s;
}

.ch__dados{ min-width:0; flex:1; }
.ch__nome{
  display:block;
  font-family:var(--fonte-titulo);
  font-size:1.05rem; line-height:1.25;
  overflow-wrap:anywhere;
  transition:color .18s;
}
.ch__tipo{
  display:block; margin-top:2px;
  font-size:.74rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.07em;
}

/* Rótulo do estado, à direita do nome */
.ch__situacao{
  flex:0 0 auto;
  font-size:.74rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
  transition:background .18s, color .18s;
}

/* ---------- Estado: PRESENTE (checkbox marcado) ---------- */
.ch__estado:checked ~ .ch__toque .ch__marca{
  background:var(--ok); border-color:var(--ok);
}
.ch__estado:checked ~ .ch__toque .ch__marca::after{
  opacity:1; transform:rotate(45deg) scale(1);
}
.ch__estado:checked ~ .ch__toque .ch__situacao{
  background:var(--ok-bg); color:var(--ok);
}
.ch__estado:checked ~ .ch__toque .ch__situacao::after{ content:"Presente"; }

/* ---------- Estado: FALTOU (checkbox desmarcado) ---------- */
.ch__estado:not(:checked) ~ .ch__toque .ch__marca{
  background:var(--erro-bg); border-color:#e0a5a5;
}
.ch__estado:not(:checked) ~ .ch__toque .ch__nome{
  color:var(--ink-soft); text-decoration:line-through;
  text-decoration-color:#d8a5a5; text-decoration-thickness:1.5px;
}
.ch__estado:not(:checked) ~ .ch__toque .ch__situacao{
  background:var(--erro-bg); color:var(--erro);
}
.ch__estado:not(:checked) ~ .ch__toque .ch__situacao::after{ content:"Faltou"; }

.ch__estado:not(:checked) ~ .ch__extras{
  opacity:.3; pointer-events:none;
}

/* Foco pelo teclado */
.ch__estado:focus-visible ~ .ch__toque{
  outline:3px solid var(--gold); outline-offset:-3px; border-radius:var(--raio-sm);
}

/* ---- Bíblia e revista: dois chips discretos ---- */
.ch__extras{
  display:flex; gap:8px; flex:0 0 auto;
  padding:8px 0;
  transition:opacity .18s;
}
.ch__extras input{
  position:absolute; width:1px; height:1px;
  opacity:0; clip:rect(0 0 0 0); overflow:hidden;
}
.ch__chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:0 13px; min-height:40px;
  border:1.5px solid var(--linha); border-radius:999px;
  background:var(--paper);
  font-size:.82rem; color:var(--ink-soft);
  cursor:pointer; user-select:none;
  transition:border-color .15s, background .15s, color .15s;
}
.ch__chip i{ font-size:.8rem; opacity:.6; transition:opacity .15s; }
.ch__extras input:checked + .ch__chip{
  border-color:var(--gold); background:var(--gold-wash);
  color:#8a6d12; font-weight:600;
}
.ch__extras input:checked + .ch__chip i{ opacity:1; color:var(--gold); }
.ch__extras input:focus-visible + .ch__chip{ outline:3px solid var(--gold); outline-offset:2px; }

/* ---- Barra de salvar ---- */
.chamada-salvar{
  position:sticky; bottom:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-top:18px; padding:14px 20px;
  background:rgba(250,246,238,.94);
  backdrop-filter:blur(10px);
  border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:0 -6px 22px -12px rgba(15,23,42,.35);
}
.chamada-salvar__resumo{ font-size:.86rem; color:var(--ink-soft); }
.chamada-salvar__resumo strong{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---- Resumo dos já lançados ---- */
.ch--resumo .ch__toque{ cursor:default; min-height:56px; padding:12px 18px; }
.ch__linha--presente .ch__marca{ background:var(--ok); border-color:var(--ok); }
.ch__linha--presente .ch__marca::after{ opacity:1; transform:rotate(45deg) scale(1); }
.ch__linha--ausente .ch__marca{ background:var(--erro-bg); border-color:#e0a5a5; }
.ch__linha--ausente .ch__nome{ color:var(--ink-soft); }

/* ---- Celular ---- */
@media (max-width:640px){
  .chamada-topo{ padding:16px; gap:14px; }
  .ch__linha{ padding:0 14px 10px; }
  .ch__toque{ padding:14px 0 10px; flex:1 1 100%; }
  .ch__extras{ flex:1 1 100%; padding:0 0 4px; }
  .ch__chip{ flex:1; justify-content:center; }
  .chamada-busca{ padding:12px 16px; }
  .chamada-busca i{ left:29px; }
  .chamada-salvar{ padding:12px 16px; }
  .chamada-salvar .btn{ flex:1; justify-content:center; }
}

/* ==================================================================
   15. Detalhe técnico na página de erro
   ================================================================== */
.detalhe-erro{
  margin:0 0 20px;
  text-align:left;
  border:1px solid var(--linha);
  border-radius:var(--raio-sm);
  background:var(--paper);
  overflow:hidden;
}
.detalhe-erro summary{
  cursor:pointer;
  padding:11px 14px;
  font-size:.8rem;
  font-weight:600;
  color:var(--ink-soft);
  list-style:none;
}
.detalhe-erro summary::-webkit-details-marker{ display:none; }
.detalhe-erro summary::before{ content:"▸ "; color:var(--gold); }
.detalhe-erro[open] summary::before{ content:"▾ "; }
.detalhe-erro__texto{
  margin:0;
  padding:0 14px 12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.76rem;
  line-height:1.5;
  color:var(--erro);
  overflow-wrap:anywhere;
}
.detalhe-erro__nota{
  margin:0;
  padding:0 14px 12px;
  font-size:.72rem;
  color:var(--ink-soft);
}

/* ==================================================================
   16. Quebra de valores dentro do indicador
   O número grande responde "quantos"; a linha abaixo responde
   "de que tipo", sem competir com ele.
   ================================================================== */
.indicador__partes{
  display:flex; flex-wrap:wrap; gap:4px 14px;
  margin-top:7px;
  padding-top:8px;
  border-top:1px dashed var(--linha);
}
.indicador__parte{
  font-size:.76rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.indicador__parte b{
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.indicador__partes + .indicador__nota{ margin-top:6px; }