/* ============================================================
   Sondagem EI — 2 e 3 anos | SME São Gonçalo do Amarante (CE)
   Design System SGA — Cloudflare Pages
   ============================================================ */
:root{
  --sme-primary:#1565C0; --sme-primary-hover:#0d47a1; --sme-soft:#E3F2FD;
  --sme-border:#dbe3ec; --sme-text:#1f2937; --sme-text-muted:#64748b; --sme-blue-light:#90caf9;
  --dev-des:#16a34a; --dev-des-soft:#dcfce7; --dev-ed:#f59e0b; --dev-ed-soft:#fef3c7; --dev-na:#dc2626; --dev-na-soft:#fee2e2;
  --radius:14px; --shadow:0 2px 8px rgba(0,0,0,0.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;color:var(--sme-text);background:linear-gradient(135deg,#f0f4f8,#e2e8f0);min-height:100vh;font-size:14px;line-height:1.5;padding-bottom:70px}
.container{max-width:1100px;margin:0 auto;padding:0 18px}

/* ---- LOGIN ---- */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sme-primary),var(--sme-primary-hover));padding:30px 16px}
.login-card{background:#fff;width:100%;max-width:420px;border-radius:20px;padding:40px 36px;box-shadow:0 18px 50px rgba(0,0,0,.25);text-align:center}
.login-card>img{height:80px;margin-bottom:14px}
.login-card h2{font-size:20px;color:var(--sme-primary);font-weight:700}
.login-sub{font-size:12.5px;color:var(--sme-text-muted);margin-bottom:22px}
.login-group{text-align:left;margin-bottom:14px;position:relative}
.login-group label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sme-text-muted);margin-bottom:6px}
.login-group label i{color:var(--sme-primary);margin-right:6px}
.login-group .in-icon{position:absolute;left:13px;top:34px;color:var(--sme-blue-light)}
.login-group input{width:100%;padding:11px 12px 11px 38px;border:1px solid var(--sme-border);border-radius:10px;font-family:inherit;font-size:14px}
.login-group input:focus{outline:none;border-color:var(--sme-primary);box-shadow:0 0 0 3px var(--sme-soft)}
.btn-acessar{width:100%;margin-top:6px;background:var(--sme-primary);color:#fff;border:none;border-radius:10px;padding:13px;font-family:inherit;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn-acessar:hover{background:var(--sme-primary-hover)}
.btn-acessar:disabled{opacity:.6;cursor:not-allowed}
.login-footer{margin-top:18px;font-size:11.5px;color:var(--sme-text-muted)}
.login-lgpd{margin-top:16px;font-size:10.5px;color:var(--sme-text-muted);background:#f8fafc;border:1px solid var(--sme-border);border-radius:10px;padding:10px 12px;text-align:left;line-height:1.45}
.login-lgpd i{color:var(--sme-primary)}

/* ---- HEADER ---- */
header.app{background:#fff;border-bottom:4px solid var(--sme-primary);box-shadow:var(--shadow)}
.header-row{max-width:1100px;margin:0 auto;padding:13px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.header-row>img{height:48px}
.htitle small{display:block;color:var(--sme-text-muted);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.htitle h1{font-size:17px;font-weight:700;color:var(--sme-primary);line-height:1.15}
.hspacer{flex:1}
.user-block{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.user-block strong{font-size:13px}
.user-block span{font-size:11px;color:var(--sme-text-muted)}
.perfil-badge{margin-top:3px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:var(--sme-soft);color:var(--sme-primary-hover);padding:2px 9px;border-radius:999px}
.btn-sair{margin-left:6px;background:#fff;border:1px solid var(--sme-border);color:var(--sme-text-muted);border-radius:9px;padding:9px 14px;font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn-sair:hover{border-color:var(--dev-na);color:var(--dev-na)}

/* ---- tabs ---- */
.nav-tabs{display:flex;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.tab-btn{padding:11px 24px;border:1px solid var(--sme-border);background:#fff;color:var(--sme-text-muted);font-family:inherit;font-weight:700;font-size:13px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.4px}
.tab-btn:hover{border-color:var(--sme-primary);color:var(--sme-primary)}
.tab-btn.active{background:var(--sme-primary);color:#fff;border-color:var(--sme-primary);box-shadow:0 4px 12px rgba(21,101,192,.25)}

/* ---- cards ---- */
.card{background:#fff;border:1px solid var(--sme-border);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:18px;padding:20px 22px}
.card-titulo{font-weight:700;font-size:13.5px;color:var(--sme-primary);display:flex;align-items:center;gap:9px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.4px}

/* ---- form ---- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row.trio{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.form-row,.form-row.trio{grid-template-columns:1fr}}
.form-group{margin-bottom:13px}
.form-group label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--sme-text-muted);margin-bottom:5px}
.form-group label i{color:var(--sme-primary);margin-right:5px}
select,input,textarea{width:100%;font-family:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--sme-border);border-radius:9px;background:#fff;color:var(--sme-text)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--sme-primary);box-shadow:0 0 0 3px var(--sme-soft)}
select:disabled{background:#f1f5f9;color:#94a3b8}
input[readonly]{background:#f8fafc;color:#94a3b8}

/* ---- blocos de preenchimento ---- */
.campo-bloco{border:1px solid var(--sme-border);border-radius:12px;overflow:hidden;margin-top:14px}
.campo-bloco-head{background:linear-gradient(90deg,var(--sme-soft),#fff);padding:11px 16px;font-weight:700;color:var(--sme-primary-hover);display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--sme-border);flex-wrap:wrap}
.campo-bloco-body{padding:6px 16px 14px}
.hab-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px dashed #eef2f7;flex-wrap:wrap}
.hab-row:last-child{border-bottom:none}
.hab-txt{font-size:12.5px;color:#334155;flex:1;min-width:180px}
.hab-txt .bncc-chip{margin-left:6px}
.radio-group{display:inline-flex;gap:6px;flex-wrap:wrap}
.radio-chip{font-size:11px;font-weight:600;border:1px solid var(--sme-border);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--sme-text-muted);white-space:nowrap;transition:.12s;user-select:none}
.radio-chip:hover{border-color:var(--sme-primary)}
.radio-chip.sel-pos{background:var(--dev-des);border-color:var(--dev-des);color:#fff}
.radio-chip.sel-par{background:var(--dev-ed);border-color:var(--dev-ed);color:#fff}
.radio-chip.sel-neg{background:var(--dev-na);border-color:var(--dev-na);color:#fff}

.bncc-chip{font-size:10px;font-weight:600;background:var(--sme-soft);color:var(--sme-primary-hover);padding:2px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}

/* ---- devolutiva ---- */
.escola-travada{font-size:11px;color:var(--sme-primary);background:var(--sme-soft);border-radius:8px;padding:6px 10px;margin-top:6px;display:flex;align-items:center;gap:6px}
.filtros-acoes{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{font-family:inherit;font-weight:700;font-size:13px;border-radius:10px;padding:11px 20px;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:var(--sme-primary);color:#fff} .btn-primary:hover{background:var(--sme-primary-hover)}
.btn-ghost{background:#fff;border-color:var(--sme-border);color:var(--sme-text-muted)} .btn-ghost:hover{border-color:var(--sme-primary);color:var(--sme-primary)}
.btn-outline{background:#fff;border-color:var(--sme-primary);color:var(--sme-primary)} .btn-outline:hover{background:var(--sme-soft)}
.btn.uppercase{text-transform:uppercase;letter-spacing:.5px}

.legenda{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.leg-titulo{font-size:12px;font-weight:700;color:var(--sme-primary);display:flex;align-items:center;gap:6px}
.leg-nivel{display:flex;align-items:center;gap:7px;font-size:12px;color:#475569}

.painel-pedagogico h3{font-size:15px;color:var(--sme-primary);display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.painel-pedagogico p{font-size:12.5px;color:#475569;margin-bottom:7px}
.observar-bloco{background:#f8fafc;border-left:3px solid var(--sme-primary);border-radius:8px;padding:10px 13px;margin:9px 0}
.observar-bloco-titulo{font-size:12px;font-weight:700;color:var(--sme-primary);display:flex;align-items:center;gap:7px;margin-bottom:5px}
.observar-bloco ul{margin-left:18px;font-size:12px;color:#475569}
.bncc-ementa{border:1px dashed var(--sme-blue-light);border-radius:8px;padding:9px 13px;margin-top:9px;background:#fbfdff}
.ementa-label{font-size:11.5px;font-weight:700;color:var(--sme-primary);display:flex;align-items:center;gap:6px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:#fff;border:1px solid var(--sme-border);border-radius:12px;padding:15px 17px;box-shadow:var(--shadow);border-top:4px solid var(--sme-primary)}
.kpi.pos{border-top-color:var(--dev-des)} .kpi.par{border-top-color:var(--dev-ed)} .kpi.neg{border-top-color:var(--dev-na)}
.kpi-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--sme-text-muted);display:flex;align-items:center;gap:7px}
.kpi-value{font-size:28px;font-weight:800;color:var(--sme-primary);margin:5px 0 2px}
.kpi-value.pos{color:var(--dev-des)} .kpi-value.par{color:var(--dev-ed)} .kpi-value.neg{color:var(--dev-na)}
.kpi-sub{font-size:11px;color:var(--sme-text-muted)}

.dev-category{border:1px solid var(--sme-border);border-radius:12px;overflow:hidden;margin-bottom:14px}
.dev-category-header{background:linear-gradient(90deg,var(--sme-soft),#fff);padding:10px 16px;font-weight:700;color:var(--sme-primary-hover);display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--sme-border)}
.dev-category-body{padding:13px 16px;display:flex;flex-direction:column;gap:12px}
.dev-skill{padding:11px 13px;border:1px solid var(--sme-border);border-radius:10px}
.dev-skill.destaque{border-color:var(--dev-na);background:var(--dev-na-soft)}
.dev-skill-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.dev-skill-title{font-size:12.5px;font-weight:600;color:#334155}
.dev-skill-count{font-size:11px;color:var(--sme-text-muted);white-space:nowrap}
.alert-chip{font-size:9.5px;font-weight:700;background:var(--dev-na);color:#fff;padding:2px 7px;border-radius:999px;margin-left:6px}
.dev-bar{display:flex;height:22px;border-radius:7px;overflow:hidden;background:#f1f5f9}
.seg{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff}
.seg-des{background:var(--dev-des)} .seg-ed{background:var(--dev-ed)} .seg-na{background:var(--dev-na)}
.dev-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.leg-item{font-size:11px;color:var(--sme-text-muted);display:flex;align-items:center;gap:6px}
.leg-dot{width:10px;height:10px;border-radius:50%}
.dot-des{background:var(--dev-des)} .dot-ed{background:var(--dev-ed)} .dot-na{background:var(--dev-na)}
.leg-val{font-weight:700;color:#334155}

table.tab-alunos{width:100%;border-collapse:collapse;font-size:12.5px}
table.tab-alunos th{background:var(--sme-primary);color:#fff;text-align:left;padding:9px 11px;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
table.tab-alunos td{padding:9px 11px;border-bottom:1px solid #eef2f7}
table.tab-alunos tbody tr:nth-child(even){background:#f8fafc}
.mini-bar{display:inline-flex;height:11px;width:120px;border-radius:5px;overflow:hidden;background:#f1f5f9;vertical-align:middle}
.mini-bar .seg{font-size:0}
.contador-pill{font-size:11px;font-weight:700;color:var(--sme-primary);background:var(--sme-soft);padding:3px 11px;border-radius:999px}

.btn-print{font-family:inherit;font-weight:700;font-size:12.5px;border-radius:10px;padding:10px 16px;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px}
.btn-print.primario{background:var(--sme-primary);color:#fff} .btn-print.primario:hover{background:var(--sme-primary-hover)}
.btn-print.lote{background:var(--dev-des);color:#fff} .btn-print.lote:hover{filter:brightness(.93)}

.vazio{padding:38px 20px;text-align:center;color:var(--sme-text-muted)}
.vazio i{font-size:30px;color:var(--sme-blue-light);display:block;margin-bottom:10px}

/* ---- footer bar ---- */
.footer-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--sme-border);box-shadow:0 -2px 10px rgba(0,0,0,.06);padding:10px 18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;z-index:50}
.footer-bar .btn,.footer-bar .btn-print{padding:9px 16px}

/* ---- ficha individual ---- */
#fichasLote{display:none}
.ficha-aluno{background:#fff;padding:18px 22px}
.ficha-header{display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--sme-primary);padding-bottom:10px;margin-bottom:12px}
.ficha-header img{height:46px}
.ficha-header small{color:var(--sme-text-muted);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.ficha-header h2{font-size:15px;color:var(--sme-primary)}
.ficha-nome{font-size:17px;font-weight:700;margin-bottom:8px}
.ficha-info{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px;font-size:11.5px;margin-bottom:12px}
.ficha-info>div{display:flex;flex-direction:column}
.ficha-info span:first-child{color:var(--sme-text-muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px}
.ficha-info span:last-child{font-weight:600}
.ficha-campo{margin-bottom:9px}
.ficha-campo-titulo{font-size:12px;font-weight:700;color:var(--sme-primary-hover);background:var(--sme-soft);padding:5px 10px;border-radius:6px;margin-bottom:5px}
table.ficha-tab{width:100%;border-collapse:collapse;font-size:11px}
table.ficha-tab td{padding:4px 8px;border-bottom:1px solid #eef2f7}
.ficha-nivel-inline{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:999px;color:#fff}
.ficha-nivel-inline.pos{background:var(--dev-des)} .ficha-nivel-inline.par{background:var(--dev-ed)} .ficha-nivel-inline.neg{background:var(--dev-na)} .ficha-nivel-inline.nul{background:#cbd5e1;color:#475569}
.ficha-assinaturas{display:flex;gap:40px;margin-top:26px}
.ficha-assinaturas .linha{flex:1;border-top:1px solid #475569;text-align:center;font-size:10.5px;color:var(--sme-text-muted);padding-top:5px}

/* ---- toast + loading ---- */
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;font-size:13px;font-weight:600;padding:12px 20px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.25s;z-index:120;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{background:var(--dev-des)} #toast.erro{background:var(--dev-na)}
#loadingOverlay{position:fixed;inset:0;background:rgba(255,255,255,.78);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:200;backdrop-filter:blur(2px)}
#loadingOverlay.show{display:flex}
.spinner{width:42px;height:42px;border:4px solid var(--sme-soft);border-top-color:var(--sme-primary);border-radius:50%;animation:spin .8s linear infinite}
#loadingOverlay span{font-size:13px;font-weight:600;color:var(--sme-primary)}
@keyframes spin{to{transform:rotate(360deg)}}

@page{size:A4 portrait;margin:12mm}
.analise-card{border-color:var(--sme-primary)}
.painel-pedagogico{background:var(--sme-soft);border:1px solid var(--sme-border);border-left:4px solid var(--sme-primary);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.painel-pedagogico h3{font-size:15px;color:var(--sme-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.painel-pedagogico p{font-size:13px;color:var(--sme-text);line-height:1.5;margin:4px 0}
.observar-bloco{background:#fff;border:1px solid var(--sme-border);border-radius:10px;padding:10px 14px;margin-top:10px}
.observar-bloco-titulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--sme-primary);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.observar-bloco ul{margin:0;padding-left:18px}
.observar-bloco li{font-size:12.5px;color:var(--sme-text);line-height:1.5;margin:2px 0}
.bncc-ementa{background:#fff;border:1px solid var(--sme-border);border-radius:10px;padding:10px 14px;margin-top:10px}
.bncc-ementa.hab{border-color:#fbbf24;background:#fffbeb}
.ementa-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--sme-primary);display:flex;align-items:center;gap:6px;margin-bottom:4px}
.bncc-ementa.hab .ementa-label{color:#b45309}
.ementa-texto{font-size:12.5px;color:var(--sme-text-muted);line-height:1.5;font-style:italic}
@media print{
  body{background:#fff;padding-bottom:0}
  .nav-tabs,.footer-bar,.filtros-card,.no-print,#toast,#loadingOverlay{display:none !important}
  .card{box-shadow:none;border:none;break-inside:avoid}
  .dev-category,.dev-skill,.kpi,.ficha-aluno{break-inside:avoid}
  body.modo-lote header.app,body.modo-lote #conteudo{display:none !important}
  body.modo-lote #fichasLote{display:block !important}
  body.modo-lote .ficha-aluno{page-break-after:always}
}