:root{
  --verde:#1f5c3a; --verde-2:#2e7d50; --ouro:#c9a227;
  --tinta:#1e2229; --cinza:#5b6470; --linha:#e3e7ec;
  --fundo:#f4f6f9; --branco:#fff; --perigo:#c0392b; --ok:#2e7d50;
  --sombra:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--fundo);color:var(--tinta);font-size:15px;line-height:1.5}
a{color:var(--verde-2);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--verde);color:#e8f0ea;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.marca{padding:18px 18px;font-weight:700;font-size:17px;border-bottom:1px solid rgba(255,255,255,.12)}
.marca .fdl{color:var(--ouro);font-size:20px}
.sidebar nav{padding:10px 8px;flex:1;overflow:auto}
.sidebar nav a{display:block;color:#d7e4dc;padding:10px 14px;border-radius:8px;margin:2px 0;font-weight:500}
.sidebar nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.sidebar nav a.ativo{background:var(--verde-2);color:#fff}
.rodape-side{padding:14px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.rodape-side .quem{opacity:.85;margin-bottom:6px}
.rodape-side .sair{color:#ffd7d0;font-weight:600}
.conteudo{flex:1;padding:26px 30px;max-width:1100px}
.centro{max-width:420px;margin:8vh auto;padding:0 16px}

/* Cabeçalho de página */
.pagina-topo{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;gap:12px;flex-wrap:wrap}
.pagina-topo h1{font-size:22px;margin:0}
.sub{color:var(--cinza);font-size:13px;margin-top:2px}

/* Cartões */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:12px;
  padding:20px;box-shadow:var(--sombra);margin-bottom:18px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}.sidebar{width:64px}
  .marca span:not(.fdl){display:none}.sidebar nav a{font-size:0;text-align:center}
  .rodape-side .quem{display:none}}

/* Métricas */
.metrica{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:16px 18px;box-shadow:var(--sombra)}
.metrica .n{font-size:28px;font-weight:700;color:var(--verde)}
.metrica .r{color:var(--cinza);font-size:13px;text-transform:uppercase;letter-spacing:.03em}

/* Tabelas */
table{width:100%;border-collapse:collapse;background:var(--branco)}
.tabela-wrap{border:1px solid var(--linha);border-radius:12px;overflow:hidden;box-shadow:var(--sombra)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linha);font-size:14px}
th{background:#fafbfc;color:var(--cinza);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:0}
tr:hover td{background:#fbfcfe}

/* Botões */
.btn{display:inline-block;background:var(--verde);color:#fff;border:0;border-radius:8px;
  padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--verde-2);text-decoration:none;color:#fff}
.btn-sec{background:#eef1f4;color:var(--tinta)}
.btn-sec:hover{background:#e2e7ec;color:var(--tinta)}
.btn-perigo{background:var(--perigo)}
.btn-mini{padding:6px 10px;font-size:13px;border-radius:6px}

/* Formulários */
label{display:block;font-size:13px;font-weight:600;color:var(--cinza);margin:12px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--linha);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde-2);outline-offset:0;border-color:var(--verde-2)}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.linha{grid-template-columns:1fr}}
.acoes{margin-top:18px;display:flex;gap:10px}

/* Alertas / badges */
.alerta{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}
.alerta-ok{background:#e7f5ec;color:#1c6b3f;border:1px solid #b7e0c6}
.alerta-erro{background:#fdeceb;color:#a12a1e;border:1px solid #f3c3bd}
.alerta-info{background:#eaf2fb;color:#1c4e86;border:1px solid #c2d9f2}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.badge-ok{background:#e7f5ec;color:#1c6b3f}
.badge-off{background:#f1f2f4;color:#6b7280}
.badge-pend{background:#fef3d8;color:#8a6100}

/* Filtros */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.filtros > div{min-width:160px}
.filtros label{margin-top:0}

/* Login */
.login-box{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:30px;box-shadow:var(--sombra)}
.login-box h1{margin:0 0 4px;font-size:22px}
.login-marca{text-align:center;font-size:34px;color:var(--ouro);margin-bottom:6px}

.vazio{padding:30px;text-align:center;color:var(--cinza)}
.paginacao{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.paginacao a,.paginacao span{padding:7px 12px;border:1px solid var(--linha);border-radius:8px;background:#fff;font-size:14px}
.paginacao .atual{background:var(--verde);color:#fff;border-color:var(--verde)}

/* =====================================================================
   Portal do Responsável
   ===================================================================== */
.badge-perigo{background:#fdecea;color:#a12617}

body.portal{background:var(--fundo)}
.portal-topo{background:var(--verde);color:#fff;box-shadow:var(--sombra)}
.portal-topo-in{max-width:960px;margin:0 auto;padding:0 18px;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;min-height:60px}
.portal-marca{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px}
.portal-marca .fdl{color:var(--ouro);font-size:22px}
.portal-nav{display:flex;gap:4px;flex-wrap:wrap}
.portal-nav a{color:#eaf3ec;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500}
.portal-nav a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.portal-nav a.ativo{background:rgba(255,255,255,.18);color:#fff}
.portal-nav a.portal-sair{color:#ffe;opacity:.85}
.portal-main{max-width:960px;margin:0 auto;padding:22px 18px 60px}
.portal-saudacao{font-size:15px;color:var(--cinza);margin-bottom:16px}
.portal-h1{font-size:22px;margin:0 0 16px}
.portal-h2{font-size:17px;margin:26px 0 12px}
.portal-voltar{display:inline-block;margin-bottom:14px;font-weight:600}

.portal-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:8px}
.pcard{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:16px;box-shadow:var(--sombra)}
.pcard-num{font-size:26px;font-weight:700;color:var(--verde)}
.pcard-lbl{font-size:13px;color:var(--cinza);margin-top:2px}
.pcard-alerta{border-color:#f5d98b;background:#fffdf5}
.pcard-alerta .pcard-num{color:#8a6100}
.pcard-perigo{border-color:#f3b4ab;background:#fff8f7}
.pcard-perigo .pcard-num{color:var(--perigo)}

.portal-filhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.filho-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--linha);
  border-radius:12px;padding:14px;box-shadow:var(--sombra);color:inherit}
.filho-card:hover{border-color:var(--verde-2);text-decoration:none;transform:translateY(-1px);transition:.12s}
.filho-avatar{width:44px;height:44px;border-radius:50%;background:var(--verde);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:0 0 auto}
.filho-avatar-g{width:60px;height:60px;font-size:24px}
.filho-info{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.filho-info strong{font-size:15px}
.filho-info span{font-size:13px;color:var(--cinza)}
.filho-seta{margin-left:auto;color:var(--cinza);font-size:22px}

.jovem-topo{display:flex;align-items:center;gap:16px}
.lista-esp{list-style:none;margin:0;padding:0}
.lista-esp li{padding:9px 0;border-bottom:1px solid var(--linha);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.lista-esp li:last-child{border-bottom:0}
.lista-esp .sub{font-size:12px;color:var(--cinza)}

.portal-agenda{display:flex;flex-direction:column;gap:12px}
.agenda-item{display:flex;gap:14px;background:#fff;border:1px solid var(--linha);
  border-radius:12px;padding:14px;box-shadow:var(--sombra)}
.agenda-data{flex:0 0 56px;text-align:center;background:var(--verde);color:#fff;
  border-radius:10px;padding:8px 0;height:fit-content}
.agenda-dia{display:block;font-size:22px;font-weight:700;line-height:1}
.agenda-mes{display:block;font-size:11px;letter-spacing:.5px}
.agenda-corpo strong{font-size:15px}
.agenda-desc{margin:8px 0 0;font-size:14px;color:var(--tinta)}

.portal-abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.portal-abas a{padding:8px 14px;border:1px solid var(--linha);border-radius:20px;
  background:#fff;font-size:14px;color:var(--tinta)}
.portal-abas a:hover{text-decoration:none;border-color:var(--verde-2)}
.portal-abas a.aba-ativa{background:var(--verde);color:#fff;border-color:var(--verde)}

.portal-rodape{max-width:960px;margin:40px auto 0;padding:18px;text-align:center;
  color:var(--cinza);font-size:13px;border-top:1px solid var(--linha)}

@media (max-width:560px){
  .portal-topo-in{min-height:auto;padding:10px 14px}
  .portal-nav{width:100%}
}

/* =====================================================================
   Relatórios (tela + impressão)
   ===================================================================== */
.card-link{display:block;color:inherit}
.card-link:hover{text-decoration:none;border-color:var(--verde-2);transform:translateY(-1px);transition:.12s}
.rel-acoes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.rel-cab{display:none} /* aparece só na impressão */
.rel-total{font-weight:700}
.rel-resumo{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 16px}
.rel-resumo .item{background:#fff;border:1px solid var(--linha);border-radius:10px;padding:10px 14px}
.rel-resumo .n{font-size:20px;font-weight:700;color:var(--verde)}
.rel-resumo .l{font-size:12px;color:var(--cinza)}

@media print{
  body{background:#fff}
  .sidebar,.rel-acoes,.filtros,.no-print,.alerta{display:none !important}
  .app{display:block}
  main.conteudo{padding:0 !important}
  .card{box-shadow:none;border:0;padding:0}
  .rel-cab{display:block;margin-bottom:12px}
  .rel-cab h1{margin:0;font-size:18px}
  .rel-cab .sub{color:#444}
  table{font-size:12px;width:100%;border-collapse:collapse}
  th,td{border:1px solid #bbb;padding:4px 6px}
  thead{display:table-header-group}
  tr{page-break-inside:avoid}
  a{color:#000;text-decoration:none}
}

/* PIX no portal */
.pix-box{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;
  background:#f7faf8;border:1px solid var(--linha);border-radius:10px;padding:16px;margin:4px 0 10px}
.pix-qr{width:190px;height:190px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:#fff;border:1px solid var(--linha);border-radius:8px;color:var(--cinza);font-size:13px}
.pix-qr svg{display:block}
.pix-lado{flex:1;min-width:220px}
.pix-cc{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  border:1px solid var(--linha);border-radius:8px;padding:8px;resize:vertical;background:#fff}

/* 2FA / Segurança */
.qr-cx{width:190px;height:190px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--linha);border-radius:8px;color:var(--cinza);font-size:13px;margin:6px 0}
.qr-cx svg{display:block}
.chave-2fa{display:inline-block;background:#f1f3f5;border:1px solid var(--linha);border-radius:6px;
  padding:8px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:1px}
.cod-recup{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.cod-recup span{background:#fff;border:1px dashed var(--linha);border-radius:8px;padding:10px;
  text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:1px}

/* Progressão do jovem */
.barra{height:10px;background:var(--linha);border-radius:6px;overflow:hidden;margin:6px 0 12px}
.barra span{display:block;height:100%;background:var(--verde-2);border-radius:6px}
.barra-mini{height:7px;margin:2px 0}
.marco-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.marco-pct{font-size:22px;font-weight:700;color:var(--cinza)}
.marco-pct.ok{color:var(--verde)}
.checklist{list-style:none;margin:8px 0 0;padding:0}
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--linha)}
.checklist li:last-child{border-bottom:0}
.checklist .ck{flex:0 0 22px;height:22px;border-radius:50%;border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;background:#fff}
.checklist li.feito .ck{background:var(--verde-2);border-color:var(--verde-2)}
.checklist .ck-label{flex:1}
.marco-form{margin-top:14px;border-top:1px solid var(--linha);padding-top:12px}
.chk{display:flex;align-items:center;gap:8px;margin:6px 0;font-weight:500}
.chk input{width:auto}
.trilha{list-style:none;margin:0;padding:0}
.trilha li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linha)}
.trilha li:last-child{border-bottom:0}
.trilha .ck{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--cinza);background:#fff}
.trilha li.feito .ck{background:var(--verde-2);border-color:var(--verde-2);color:#fff}
.trilha .ck-label{flex:1}
.trilha .ck-acao{flex:0 0 auto}