:root{
  --kanitech:#00354C;
  --ifs-green:#2f9e41;
  --ifs-red:#cd191e;


  --text:#eef4f7;
  --muted:#b6c6cf;
  --focus:#7bd0ff;

/* ***** ORIGINAL
  --bg:#0d1c24;
  --panel:#0f2732;
  --card:#112d39;
  --stroke:#1c3a46;
*/

/* ***** TEMA 01
  --bg:#163040;
  --panel:#1b3c50;
  --card:#204660;
  --stroke:#2a5870;
*/

  --bg:#122833;
  --panel:#163545;
  --card:#1a3e51;
  --stroke:#224a5a;



  /* espaço para o popup do chat não cobrir conteúdo */
  --safe-bottom: 110px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom: var(--safe-bottom);
}

/* Cabeçalho escuro com badges brancos nas logos */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:12px 20px;
  background:linear-gradient(90deg, var(--kanitech), #0b2f42 60%);
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#ffffff;
}
.topbar .brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar .brand .divider{
  width:1px;height:28px;background:rgba(255,255,255,.25);display:inline-block;border-radius:1px;
}
.topbar .context{font-weight:600;color:#ffffff}
.topbar .muted{opacity:.85;color:#d7e4ea}

.logo-badge{
  display:flex;align-items:center;
  padding:6px 10px;
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.15);
}
.topbar .brand img{ display:block; height:34px }

/* Container central (coluna única) */
.container{
  max-width: 980px;
  margin: 24px auto;
  padding: 0 20px;
}

/* Painel informativo */
.info{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:20px;
}
.info h1{
  margin:0 0 14px;
  font-size:1.35rem;
  line-height:1.2;
}
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:16px;
  margin:14px 0;
}
.card-title{
  margin:0 0 8px;
  font-size:1rem;
  letter-spacing:.2px;
}
.warning{
  border-color: rgba(205,25,30,.5);
  box-shadow:0 0 0 1px rgba(205,25,30,.2) inset;
}
.bullets{margin:10px 0 0 0;padding-left:20px}
.bullets li{margin:6px 0}
.small{font-size:.9rem}
.muted{color:var(--muted)}

/* Acessibilidade: foco visível */
a, button, .btn, [tabindex]{outline:none}
a:focus-visible, .btn:focus-visible, button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:8px;
}

/* Rodapé */
.footer{
  padding:14px 20px;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  text-align:center;
}


/* *********************** */
/* FOOTER: gradiente + acento IFS (vermelho) */
:root{
  --footer-text:#eef4f7;
  --footer-muted:#b6c6cf;
}
.footer{
  background:linear-gradient(180deg, #143243 0%, #0c2130 100%);
  color:var(--footer-text);
  border-top:3px solid #cd191e; /* IFS vermelho */
  text-align:center;
}
.footer .muted{ color:var(--footer-muted); }
.footer a{ color:#bfe3ff; }
.footer a:hover{ text-decoration:underline; }


/* Responsividade */
@media (max-width: 980px){
  .topbar .brand img{height:30px}
  :root{ --safe-bottom: 120px; }
}