/* SAE CEGLB - identidade turquesa + ambar do brasao da escola */
:root{
  --turquesa:#0FA3B1; --turquesa-escuro:#0B4A54; --ambar:#F2A900;
  --tinta:#10333A; --fundo:#F1F6F6; --cartao:#FFFFFF; --linha:#DCE8E9;
  --risco:#D64545; --atencao:#E8A200; --excelencia:#149078; --cinza:#66838A;
  --agua:#E4F3F4;
  --fonte-titulo:"Archivo","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --sombra-cartao:0 1px 2px rgba(11,74,84,.05),0 4px 14px rgba(11,74,84,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--fundo);color:var(--tinta);font-size:15px}
a{color:#0A6E7C}
h1{font-family:var(--fonte-titulo);font-size:1.45rem;font-weight:700;letter-spacing:-.015em;margin:.2rem 0 1rem}
h2{font-family:var(--fonte-titulo);font-size:1.08rem;font-weight:650;letter-spacing:-.01em;margin:1.4rem 0 .6rem;color:var(--turquesa-escuro)}
h3{font-family:var(--fonte-titulo);font-weight:650;letter-spacing:-.01em}
small{color:var(--cinza)}
:focus-visible{outline:3px solid var(--ambar);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* topo */
.topo{background:var(--cartao)}
.topo-conteudo{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tinta)}
.marca img{height:46px}
.marca strong{display:block;font-family:var(--fonte-titulo);font-weight:800;font-size:1.08rem;letter-spacing:-.01em}
.marca small{display:block;font-size:.75rem}
.usuario span{font-weight:600;margin-right:.8rem}
.sair{color:var(--risco);text-decoration:none;font-weight:600}
/* lamina d'agua: o Velho Chico visto de longe - uma linha de agua calma sob o fio ambar */
.faixa-dupla{height:10px;border-top:3px solid var(--ambar);background-color:var(--turquesa);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 7' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q30 2 60 4 T120 4 T180 4 T240 4 V7 H0 Z' fill='%230B4A54'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:bottom;background-size:240px 7px}
.menu{background:var(--turquesa-escuro)}
.menu-toggle{display:none;width:100%;background:none;border:none;color:#fff;font:inherit;font-weight:600;
  text-align:left;padding:.65rem 1rem;cursor:pointer}
.menu-toggle .tracos{font-size:1.05rem;margin-right:.4rem}
.menu-conteudo{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap}
.menu a{color:#fff;text-decoration:none;padding:.55rem .8rem;font-size:.88rem;opacity:.88;
  border-bottom:3px solid transparent;transition:border-color .12s,opacity .12s}
.menu a:hover{border-bottom-color:rgba(255,255,255,.45);opacity:1}
.menu a.ativo{border-bottom-color:var(--ambar);opacity:1;font-weight:600}

.conteudo{max-width:1200px;margin:1.2rem auto;padding:0 1rem}
.rodape{text-align:center;padding:1.4rem 1rem 2rem;color:var(--cinza);font-size:.82rem;border-top:1px solid var(--linha);margin-top:2rem}

/* cartoes e grades */
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1rem;box-shadow:var(--sombra-cartao)}
.grade-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;margin-bottom:1rem}
.indicador{background:var(--cartao);border:1px solid var(--linha);border-left:5px solid var(--turquesa);border-radius:12px;padding:.8rem 1rem;box-shadow:var(--sombra-cartao)}
.indicador .valor{font-family:var(--fonte-titulo);font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.indicador .rotulo{font-size:.8rem;color:var(--cinza)}

/* tabelas */
.tabela-rolagem{overflow:auto;max-height:72vh;background:var(--cartao);border:1px solid var(--linha);border-radius:10px;
  scrollbar-color:var(--turquesa) #E6F2F2}
.tabela-rolagem::-webkit-scrollbar{width:13px}
.tabela-rolagem::-webkit-scrollbar{height:13px}
.tabela-rolagem::-webkit-scrollbar-track{background:#E6F2F2;border-radius:7px}
.tabela-rolagem::-webkit-scrollbar-thumb{background:var(--turquesa);border-radius:7px;border:2px solid #E6F2F2}

/* barra de rolagem horizontal espelhada no topo da tabela (fica sempre ao alcance) */
.rolagem-topo{position:sticky;top:0;z-index:6;overflow-x:auto;overflow-y:hidden;height:15px;
  margin-bottom:.3rem;border-radius:7px;background:#E6F2F2;scrollbar-color:var(--turquesa) #E6F2F2}
.rolagem-topo::-webkit-scrollbar{height:13px}
.rolagem-topo::-webkit-scrollbar-track{background:#E6F2F2;border-radius:7px}
.rolagem-topo::-webkit-scrollbar-thumb{background:var(--turquesa);border-radius:7px;border:2px solid #E6F2F2}
.rolagem-topo>div{height:1px}

/* primeira coluna congelada: o nome do estudante acompanha a rolagem lateral */
.tabela-rolagem th:first-child,.tabela-rolagem td:first-child{position:sticky;left:0;z-index:2;
  background:var(--cartao);box-shadow:1px 0 0 var(--linha)}
.tabela-rolagem th:first-child{z-index:5;background:var(--turquesa-escuro)}
.tabela-rolagem tbody tr:nth-child(even) td:first-child{background:#F5FAFA}
.tabela-rolagem tr:hover td:first-child{background:#EAF6F6}
table{border-collapse:collapse;width:100%;font-size:.87rem}
th,td{padding:.45rem .6rem;border-bottom:1px solid var(--linha);text-align:left;white-space:nowrap}
th{background:var(--turquesa-escuro);color:#fff;font-weight:600;position:sticky;top:0;z-index:3}
th small{color:#CFEDEF;display:block;font-weight:400}
tbody tr:nth-child(even) td{background:#F5FAFA}
tr:hover td{background:#EAF6F6}
td.num,th.num{text-align:center;font-variant-numeric:tabular-nums}
td.destaque{font-weight:700;background:#EFF9F8;font-variant-numeric:tabular-nums}

/* formularios */
input,select,button,textarea{font:inherit}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=color]),textarea,select{
  padding:.55rem .75rem;border:1.5px solid #E3E8E8;border-radius:10px;background:#fff;max-width:100%;
  box-shadow:0 1px 2px rgba(18,52,59,.04);transition:border-color .15s, box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(10,166,183,.15)}
input[type=color]{padding:.15rem;border:1.5px solid #E3E8E8;border-radius:10px;height:2.4rem;width:3.6rem;background:#fff;cursor:pointer}
input[type=number].nota{width:4.6rem;text-align:center}
.botao{display:inline-block;background:var(--turquesa);color:#fff;border:none;border-radius:10px;
  padding:.5rem 1rem;font-weight:600;cursor:pointer;text-decoration:none;margin:.15rem .35rem .15rem 0;
  box-shadow:0 1px 2px rgba(11,74,84,.18);transition:background .12s,transform .06s,box-shadow .12s}
.botao:hover{background:#0C8A96;box-shadow:0 2px 6px rgba(11,74,84,.22)}
.botao:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(11,74,84,.18)}
.botao.ambar{background:var(--ambar);color:#4a3400}
.botao.ambar:hover{background:#DE9B00}
.botao.perigo{background:var(--risco)}
.botao.perigo:hover{background:#BE3A3A}
.botao.mini{padding:.22rem .55rem;font-size:.8rem;border-radius:8px}
form.linha{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;margin:.4rem 0}
form.linha label{display:flex;flex-direction:column;gap:.15rem;font-size:.8rem;color:var(--turquesa-escuro);font-weight:600}

/* avisos e badges */
.aviso{padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem;font-weight:500}
.aviso.ok{background:#E2F5F0;color:#0B5C4C;border:1px solid #B8E4D9}
.aviso.erro{background:#FBE7E7;color:#8C2323;border:1px solid #F0C4C4}
.badge{display:inline-block;color:#fff;border-radius:999px;padding:.12rem .6rem;font-size:.78rem;font-weight:600}
.badge.cinza{background:var(--cinza)}
.trava{color:var(--cinza);font-size:.78rem}

/* login */
.caixa-login{max-width:390px;margin:6vh auto;background:var(--cartao);border:1px solid var(--linha);
  border-radius:16px;padding:2rem;text-align:center;box-shadow:0 2px 6px rgba(11,74,84,.06),0 18px 44px rgba(11,74,84,.10)}
.caixa-login img{height:110px;margin-bottom:.6rem}
.caixa-login h1{font-family:var(--fonte-titulo);font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
body:has(.caixa-login){background:radial-gradient(1100px 500px at 50% -8%,#DDF0F1 0%,var(--fundo) 60%)}
.caixa-login form{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem;text-align:left}
.caixa-login .faixa-dupla{height:4px;border-top:none;background-image:none;border-radius:999px;margin:.9rem auto;
  width:72%;background:linear-gradient(to right,var(--turquesa) 0 72%,var(--ambar) 72% 100%)}

select{cursor:pointer}
.conceito-sel{min-width:5.2rem;text-align:center}

/* graficos de barras */
.gbar{display:flex;align-items:center;gap:.6rem;margin:.35rem 0}
.gbar .glabel{flex:0 0 160px;font-size:.82rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbar .gtrilha{flex:1;background:var(--agua);border-radius:6px;overflow:hidden;min-width:0}
.gbar .gbarra{font-variant-numeric:tabular-nums}
.gbar .gbarra{color:#fff;font-size:.75rem;padding:.15rem .4rem;white-space:nowrap;border-radius:6px 0 0 6px;min-width:fit-content}

/* ---------- responsividade ---------- */
@media(max-width:900px){
  .conteudo{padding:0 .7rem}
  .grade-cartoes{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
@media(max-width:640px){
  body{font-size:14px}
  .marca small{display:none}
  .marca img{height:36px}
  .topo-conteudo{padding:.45rem .7rem}
  .usuario span{display:none}
  .menu-toggle{display:block}
  .menu-conteudo{display:none;flex-direction:column}
  .menu-conteudo.aberto{display:flex}
  .menu a{padding:.7rem 1rem;font-size:.92rem;border-top:1px solid rgba(255,255,255,.12);border-bottom:none}
  .menu a:hover{border-bottom:none}
  .menu a.ativo{border-left:4px solid var(--ambar);background:rgba(255,255,255,.06)}
  h1{font-size:1.25rem}
  th,td{padding:.35rem .45rem;font-size:.82rem}
  .tabela-rolagem{max-height:66vh}
  .tabela-rolagem th:first-child,.tabela-rolagem td:first-child{max-width:8.5rem;overflow:hidden;text-overflow:ellipsis}
  form.linha{flex-direction:column;align-items:stretch}
  form.linha label{width:100%}
  form.linha input,form.linha select{width:100%}
  form.linha button{width:100%}
  .cartao{padding:.8rem .9rem}
  .botao{text-align:center}
  input[type=number].nota{width:4.2rem}
  .caixa-login{margin:3vh 1rem;padding:1.4rem}
}
@media(max-width:640px){
  .gbar{gap:.4rem}
  .gbar .glabel{flex-basis:96px;font-size:.75rem}
  .acoes form.linha{flex-direction:row;align-items:center}
  .acoes form.linha button,.acoes form.linha select{width:auto}
  td .botao.mini{padding:.3rem .6rem}
}
@media(max-width:400px){
  .indicador .valor{font-size:1.3rem}
  .grade-cartoes{grid-template-columns:1fr 1fr}
}

/* ---------- banners de aviso ---------- */
.banner-aviso{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;
  border-radius:10px;padding:.75rem 1rem;margin:.6rem 0;box-shadow:0 1px 3px rgba(18,52,59,.08)}
.banner-corpo{display:flex;align-items:flex-start;gap:.6rem;min-width:0}
.banner-icone{font-size:1.35em;line-height:1.2}
.banner-titulo{display:block;margin-bottom:.15rem}
.banner-fechar button{background:none;border:none;color:inherit;font-size:1.25rem;line-height:1;
  cursor:pointer;opacity:.65;padding:.1rem .3rem}
.banner-fechar button:hover{opacity:1}
.previa-aviso{border:1px dashed var(--linha);border-radius:10px;padding:.6rem;margin-top:.6rem}
@media(max-width:640px){.banner-aviso{padding:.6rem .7rem}}

/* ---------- bimestres em sanfona na ficha do estudante ---------- */
details.bim-cartao>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;
  font-weight:600;color:var(--turquesa-escuro);font-size:1.05rem}
details.bim-cartao>summary::-webkit-details-marker{display:none}
details.bim-cartao>summary::before{content:"\25B8";display:inline-block;transition:transform .15s;font-size:.9em}
details.bim-cartao[open]>summary::before{transform:rotate(90deg)}
details.bim-cartao>summary:hover{color:var(--turquesa)}
details.bim-cartao[open]>summary{padding-bottom:.5rem;margin-bottom:.6rem;border-bottom:1px solid var(--linha)}
details.bim-cartao summary .badge{font-size:.72rem}

/* celulas de texto corrido (motivo, observacoes): garantem largura minima para nao espremer */
td.cel-texto{white-space:normal;min-width:18rem;max-width:30rem;line-height:1.35;vertical-align:top}
tr:has(td.cel-texto) td{vertical-align:top}
@media(max-width:640px){td.cel-texto{min-width:12rem}}