/* =========================================================================
   PAINEL SAI-SIE — Identidade visual
   Paleta extraída do brasão do Centro de Inteligência:
   azul-noite do manto, dourado da coroa, vermelho do galão, verde do louro.
   ========================================================================= */
:root{
  --azul-noite:#0A1428;
  --azul-profundo:#0E1B36;
  --azul-farda:#142647;
  --azul-claro:#23407A;
  --dourado:#D2A33C;
  --dourado-claro:#E8C36A;
  --vermelho:#B3242E;
  --verde:#3E7C4F;
  --areia:#EFE8D6;
  --areia-suave:#C8C2B2;
  --linha:rgba(210,163,60,.28);
  --sombra:0 10px 26px rgba(0,0,0,.45);
  --raio:12px;
  --fonte-display:'Staatliches', 'Arial Narrow', sans-serif;
  --fonte-corpo:'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(35,64,122,.35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(179,36,46,.12), transparent 55%),
    var(--azul-noite);
  color:var(--areia);
  font-family:var(--fonte-corpo);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
}
a{color:var(--dourado-claro)}
button, select, input{font-family:inherit;font-size:1rem}

/* ---- Tarja de classificação (assinatura visual) ---------------------- */
.tarja{
  background:repeating-linear-gradient(135deg,
    var(--vermelho) 0 14px, #8f1c25 14px 28px);
  color:#fff;
  font-family:var(--fonte-display);
  letter-spacing:.22em;
  text-align:center;
  font-size:.78rem;
  padding:.35rem .5rem;
  text-transform:uppercase;
  border-bottom:2px solid var(--dourado);
}

/* ---- Cabeçalho institucional ----------------------------------------- */
header.topo{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.25rem;
  background:linear-gradient(180deg, var(--azul-profundo), var(--azul-noite));
  border-bottom:1px solid var(--linha);
}
header.topo img.brasao{
  width:64px;height:64px;object-fit:contain;border-radius:8px;
  background:#fff;padding:3px;border:2px solid var(--dourado);
}
.hierarquia{flex:1;min-width:240px}
.hierarquia .org{
  font-family:var(--fonte-display);
  font-size:1.45rem;letter-spacing:.08em;color:var(--dourado-claro);line-height:1.1;
}
.hierarquia .sub{font-size:.78rem;color:var(--areia-suave);letter-spacing:.06em;text-transform:uppercase}
.sessao{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:var(--areia-suave)}
.sessao a.sair{
  border:1px solid var(--linha);padding:.35rem .8rem;border-radius:8px;
  text-decoration:none;color:var(--areia);
}
.sessao a.sair:hover{border-color:var(--dourado);color:var(--dourado-claro)}

/* ---- Barra de filtros -------------------------------------------------- */
.filtros{
  display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;
  padding:1rem 1.25rem;
}
.filtros label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--areia-suave)}
.filtros .campo{display:flex;flex-direction:column;gap:.25rem}
.filtros select{
  background:var(--azul-farda);color:var(--areia);
  border:1px solid var(--linha);border-radius:8px;padding:.5rem .75rem;min-width:140px;
}
.filtros select:focus{outline:2px solid var(--dourado);outline-offset:1px}
.filtros .acoes{margin-left:auto;display:flex;gap:.5rem;align-items:flex-end}
.botao{
  display:inline-block;background:var(--dourado);color:#1d1607;font-weight:700;
  border:none;border-radius:8px;padding:.55rem 1rem;cursor:pointer;text-decoration:none;
}
.botao:hover{background:var(--dourado-claro)}
.botao.fantasma{background:transparent;color:var(--areia);border:1px solid var(--linha)}
.botao.fantasma:hover{border-color:var(--dourado);color:var(--dourado-claro)}

/* ---- Conteúdo ----------------------------------------------------------- */
main{padding:0 1.25rem 3rem;max-width:1280px;margin:0 auto}
h2.secao{
  font-family:var(--fonte-display);letter-spacing:.12em;color:var(--dourado);
  font-size:1.05rem;margin:1.75rem 0 .75rem;text-transform:uppercase;
  display:flex;align-items:center;gap:.6rem;
}
h2.secao::after{content:"";flex:1;height:1px;background:var(--linha)}

/* ---- Cartões KPI -------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.85rem}
.kpi{
  background:linear-gradient(180deg, var(--azul-farda), var(--azul-profundo));
  border:1px solid var(--linha);border-top:3px solid var(--dourado);
  border-radius:var(--raio);padding:.9rem 1rem;box-shadow:var(--sombra);
}
.kpi .rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--areia-suave)}
.kpi .valor{
  font-family:var(--fonte-display);font-size:2.2rem;line-height:1.05;
  color:#fff;font-variant-numeric:tabular-nums;
}
.kpi .detalhe{font-size:.78rem;color:var(--dourado-claro)}
.kpi.alerta{border-top-color:var(--vermelho)}

/* ---- Gráficos ------------------------------------------------------------ */
.grade-graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.85rem}
.painel{
  background:var(--azul-profundo);border:1px solid var(--linha);
  border-radius:var(--raio);padding:1rem;box-shadow:var(--sombra);
}
.painel h3{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--areia-suave);margin-bottom:.6rem;font-weight:600;
}
.painel .area-grafico{position:relative;height:260px}
.painel.largo{grid-column:1/-1}
.painel.largo .area-grafico{height:300px}

/* ---- Mapa de calor (dia × faixa) ----------------------------------------- */
.heatmap{display:grid;grid-template-columns:auto repeat(4,1fr);gap:4px;font-size:.78rem}
.heatmap .cab{color:var(--areia-suave);text-align:center;padding:.2rem;font-size:.7rem}
.heatmap .rot{color:var(--areia-suave);padding:.35rem .4rem;white-space:nowrap}
.heatmap .cel{
  border-radius:6px;text-align:center;padding:.45rem 0;color:#fff;
  font-variant-numeric:tabular-nums;border:1px solid rgba(255,255,255,.06);
}

/* ---- Insights -------------------------------------------------------------- */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem}
.insight{
  background:var(--azul-farda);border-left:4px solid var(--verde);
  border-radius:8px;padding:.75rem .9rem;font-size:.92rem;
}
.insight:nth-child(2n){border-left-color:var(--dourado)}
.insight:nth-child(3n){border-left-color:var(--vermelho)}

/* ---- Tabela ---------------------------------------------------------------- */
.tabela-envolto{overflow-x:auto;border-radius:var(--raio);border:1px solid var(--linha)}
table.registros{width:100%;border-collapse:collapse;background:var(--azul-profundo);font-size:.9rem;min-width:640px}
table.registros th{
  font-family:var(--fonte-display);letter-spacing:.08em;font-weight:400;
  text-align:left;color:var(--dourado);padding:.6rem .8rem;
  border-bottom:2px solid var(--linha);white-space:nowrap;
}
table.registros td{padding:.55rem .8rem;border-bottom:1px solid rgba(255,255,255,.05)}
table.registros tr:hover td{background:rgba(210,163,60,.06)}
.selo{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  padding:.12rem .5rem;border-radius:99px;border:1px solid;
}
.selo.INFOR{color:#9fd0ff;border-color:#3f6ea8}
.selo.RELINT{color:var(--dourado-claro);border-color:var(--dourado)}
.selo.RI{color:#ffb1b7;border-color:var(--vermelho)}
.selo.RT{color:#bfe8c9;border-color:var(--verde)}
.selo.RB{color:#e6d0ff;border-color:#7b5ea8}
.paginacao{display:flex;gap:.5rem;align-items:center;justify-content:flex-end;padding:.75rem 0;font-size:.85rem;color:var(--areia-suave)}

footer{
  text-align:center;color:var(--areia-suave);font-size:.75rem;
  padding:1.25rem;border-top:1px solid var(--linha);letter-spacing:.05em;
}

/* ---- Login -------------------------------------------------------------------- */
body.tela-login{display:flex;flex-direction:column;min-height:100vh}
.login-caixa{
  margin:auto;width:min(420px,92vw);
  background:linear-gradient(180deg,var(--azul-farda),var(--azul-profundo));
  border:1px solid var(--linha);border-top:4px solid var(--dourado);
  border-radius:16px;box-shadow:var(--sombra);padding:2rem 1.75rem;text-align:center;
}
.login-caixa img{width:108px;height:108px;object-fit:contain;background:#fff;border-radius:12px;padding:6px;border:2px solid var(--dourado);margin-bottom:1rem}
.login-caixa .org{font-family:var(--fonte-display);font-size:1.5rem;letter-spacing:.08em;color:var(--dourado-claro);line-height:1.15}
.login-caixa .sub{font-size:.74rem;color:var(--areia-suave);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.4rem}
.login-caixa form{display:flex;flex-direction:column;gap:.8rem;text-align:left}
.login-caixa label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--areia-suave)}
.login-caixa input{
  width:100%;background:var(--azul-noite);border:1px solid var(--linha);
  border-radius:8px;padding:.7rem .8rem;color:var(--areia);
}
.login-caixa input:focus{outline:2px solid var(--dourado);outline-offset:1px}
.erro{
  background:rgba(179,36,46,.18);border:1px solid var(--vermelho);
  color:#ffd3d6;border-radius:8px;padding:.6rem .8rem;font-size:.88rem;margin-bottom:.4rem;
}
.carregando{color:var(--areia-suave);font-size:.9rem;padding:2rem;text-align:center}

@media (max-width:640px){
  header.topo{padding:.8rem 1rem}
  .hierarquia .org{font-size:1.15rem}
  main{padding:0 .8rem 2.5rem}
  .filtros{padding:.8rem 1rem}
  .filtros .acoes{margin-left:0;width:100%}
  .kpi .valor{font-size:1.8rem}
  .painel .area-grafico{height:220px}
}
@media (prefers-reduced-motion:no-preference){
  .kpi,.painel,.insight{animation:surgir .4s ease both}
  @keyframes surgir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}