/* EduBC · azul do logo como cor principal, amarelo para destaque, verde só para sucesso */
:root {
  --azul: #0b2e7a; --azul-2: #1747a6; --azul-claro: #e8eefb; --amarelo: #fcb400; --amarelo-claro: #fff4d6;
  --verde: #1e7d47; --verde-claro: #e2f3e8; --vermelho: #b42318; --vermelho-claro: #fdecea;
  --tinta: #14213d; --apagado: #5b6780; --linha: #d7deea; --papel: #f4f6fb; --folha: #ffffff;
  --r: 8px; --sombra: 0 1px 2px rgba(20,33,61,.06), 0 4px 14px rgba(20,33,61,.06);
  --fonte: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.45 var(--fonte) }
a { color: var(--azul-2) }
h1, h2, h3 { margin: 0; line-height: 1.2; color: var(--azul) }
h1 { font-size: 1.45rem } h2 { font-size: 1.15rem } h3 { font-size: 1rem }
.num { font-variant-numeric: tabular-nums }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 1px }

/* topo */
.topo { background: var(--folha); border-bottom: 3px solid var(--azul); }
.topo .dentro { max-width: 1400px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.topo .marca { display: flex; align-items: center; gap: 10px; text-decoration: none }
.topo .marca img { height: 46px; width: auto }
.topo nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center }
.topo nav a, .topo nav button { color: var(--azul); text-decoration: none; padding: 6px 10px; border-radius: 6px; font-weight: 600; font-size: .9rem; background: none; border: 0; cursor: pointer; font-family: inherit }
.topo nav a:hover, .topo nav button:hover { background: var(--azul-claro) }
.topo .quem { font-size: .82rem; color: var(--apagado); text-align: right }
.faixa { height: 4px; background: linear-gradient(90deg, var(--azul) 0 70%, var(--amarelo) 70% 90%, var(--verde) 90%) }

main { max-width: 1400px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 16px }
main > *, form > * { min-width: 0 }
.abas { display: grid; gap: 12px }
.migalha { font-size: .85rem; color: var(--apagado) } .migalha a { color: var(--apagado) }
.cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px }
.sub { color: var(--apagado); margin: 4px 0 0 }

.cartao { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--r); box-shadow: var(--sombra) }
.cartao > .cab { padding: 12px 16px; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center }
.cartao > .corpo { padding: 16px }

.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--azul-2); background: var(--folha); color: var(--azul-2); padding: 8px 14px; border-radius: var(--r); font: 600 .9rem var(--fonte); cursor: pointer; text-decoration: none; white-space: nowrap }
.btn:hover { background: var(--azul-claro) }
.btn.prim { background: var(--azul); border-color: var(--azul); color: #fff }
.btn.prim:hover { background: var(--azul-2) }
.btn.destaque { background: var(--amarelo); border-color: var(--amarelo); color: var(--tinta) }
.btn.perigo { border-color: var(--vermelho); color: var(--vermelho) }
.btn.mini { padding: 3px 9px; font-size: .8rem }
.btn:disabled { opacity: .5; cursor: not-allowed }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }

.msgs { display: grid; gap: 8px }
.msg { padding: 10px 14px; border-radius: var(--r); border: 1px solid; font-weight: 600 }
.msg.success { background: var(--verde-claro); border-color: var(--verde); color: var(--verde) }
.msg.error { background: var(--vermelho-claro); border-color: var(--vermelho); color: var(--vermelho) }
.msg.info, .msg.warning { background: var(--amarelo-claro); border-color: var(--amarelo); color: #6b4a00 }

/* formulários */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
.campo { display: grid; gap: 4px; min-width: 0 }
.campo label { font-size: .78rem; font-weight: 700; color: var(--apagado); text-transform: uppercase; letter-spacing: .04em }
.campo input, .campo select, .busca input { font: inherit; padding: 9px 10px; border: 1px solid #b9c4d8; border-radius: var(--r); background: #fff; width: 100%; min-width: 0 }
.campo .ajuda { font-size: .8rem; color: var(--apagado) }
.campo .erro, .errorlist { color: var(--vermelho); font-size: .85rem; margin: 0; padding: 0; list-style: none }
.check { display: flex; gap: 8px; align-items: center } .check input { width: auto }

/* tabelas */
.rolagem { overflow-x: auto }
table.lista { width: 100%; border-collapse: collapse; font-size: .9rem }
table.lista th, table.lista td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle }
table.lista th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); background: var(--papel) }
table.lista tr:hover td { background: #fafbfe }
table.lista td.nome { white-space: nowrap }
.pilula { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--azul-claro); color: var(--azul) }
.pilula.ok { background: var(--verde-claro); color: var(--verde) }
.pilula.ruim { background: var(--vermelho-claro); color: var(--vermelho) }
.pilula.alerta { background: var(--amarelo-claro); color: #6b4a00 }
.vazio { color: var(--apagado); padding: 24px; text-align: center }

/* grade de lançamento */
.grade-wrap { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--linha); border-radius: var(--r); background: #fff }
table.grade { border-collapse: separate; border-spacing: 0; font-size: .85rem }
table.grade th, table.grade td { border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 0; text-align: center }
table.grade thead th { position: sticky; top: 0; background: var(--azul); color: #fff; z-index: 2; padding: 6px 4px; font-size: .72rem; font-weight: 700; min-width: 64px; max-width: 110px; line-height: 1.15 }
table.grade thead tr:nth-child(2) th { top: 44px; background: var(--azul-2); font-weight: 600 }
table.grade thead th.nuc-3 { background: #0f6b3f }
table.grade .fixa { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 4px 10px; min-width: 260px; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
table.grade thead .fixa { z-index: 3; background: var(--azul) }
table.grade .nro { position: sticky; left: 0; z-index: 1; background: #fff; width: 44px; min-width: 44px; font-weight: 700; color: var(--apagado) }
table.grade input { width: 100%; min-width: 58px; border: 0; padding: 7px 4px; text-align: center; font: 600 .9rem var(--fonte); background: transparent; font-variant-numeric: tabular-nums }
table.grade input:focus { background: var(--amarelo-claro); outline: 2px solid var(--amarelo); outline-offset: -2px }
table.grade input.mudou { background: #fff8e1 }
table.grade input.invalido { background: var(--vermelho-claro); color: var(--vermelho) }
table.grade tr.inativo td { background: #f3f3f3; color: #999 } table.grade tr.inativo input { color: #999 }
table.grade td.falta input { color: var(--azul-2); font-weight: 500 }
.legenda { font-size: .82rem; color: var(--apagado); display: flex; gap: 16px; flex-wrap: wrap }
.periodos { display: flex; gap: 4px; flex-wrap: wrap }
.periodos a { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--linha); text-decoration: none; color: var(--azul); font-weight: 600; background: #fff; font-size: .9rem }
.periodos a.atual { background: var(--azul); color: #fff; border-color: var(--azul) }
.rodape-fixo { position: sticky; bottom: 0; background: var(--folha); border-top: 1px solid var(--linha); padding: 10px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; z-index: 5; box-shadow: 0 -4px 12px rgba(20,33,61,.06) }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, var(--azul) 0 45%, var(--papel) 45%) }
.login .caixa { background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(11,46,122,.18); padding: 28px; width: min(420px, 100%); display: grid; gap: 16px }
.login img { width: 100%; max-width: 330px; margin: 0 auto; display: block }

@media (max-width: 700px) {
  .topo .marca img { height: 34px } .topo .quem { display: none }
  table.grade .fixa { min-width: 170px; max-width: 190px }
}
@media print { .topo, .faixa, .rodape-fixo, .acoes, .periodos { display: none } body { background: #fff } }
.dados{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 24px;margin:0}
.dados dt{font-size:.78rem;color:#5a6782;text-transform:uppercase;letter-spacing:.03em}
.dados dd{margin:2px 0 0;font-weight:600}
.grade select{width:100%;min-width:52px;padding:4px 2px;border:1px solid #b9c4d8;border-radius:4px;background:#fff;font:inherit;text-align:center}
.grade select.mudou{background:#fff8d6;border-color:#e0b100}
.grade .repetir{display:block;margin:4px auto 0;padding:2px 6px;font-size:.68rem;font-weight:700;border:1px solid #0b3a8c;border-radius:10px;background:#fff;color:#0b3a8c;cursor:pointer;white-space:nowrap}
.grade .repetir:hover{background:#0b3a8c;color:#fff}
.grade td.conv-cel{white-space:nowrap}
.grade td.conv-cel input{width:52px}
.grade .conv{display:inline-block;min-width:16px;margin-left:3px;font-weight:700;color:#0b6b3a;font-size:.8rem}
fieldset.opcoes{border:1px solid #d5ddeb;border-radius:8px;padding:12px 16px;display:grid;gap:8px;margin:0}
fieldset.opcoes legend{font-weight:700;color:#0b3a8c;padding:0 6px}
.grade-disc{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px}
.desc-tab textarea{width:100%;min-width:260px;min-height:84px;padding:6px 8px;border:1px solid #b9c4d8;border-radius:6px;font:inherit;font-size:.86rem;line-height:1.35;resize:vertical}
.desc-tab textarea.mudou{background:#fff8d6;border-color:#e0b100}
.desc-tab td{vertical-align:top}
.desc-tab tr.inativo{opacity:.55}
.desc-sec{margin-top:16px}
.topo nav a.atual{color:#0b3a8c;box-shadow:inset 0 -3px 0 #f5b301}
.submenu{background:#fff;border-bottom:1px solid #d5ddeb}
.submenu .dentro{max-width:1400px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center}
.submenu strong{color:#0b3a8c;margin-right:10px;font-size:.9rem}
.submenu a{padding:6px 12px;border-radius:16px;color:#1d2b4f;text-decoration:none;font-size:.88rem;font-weight:600}
.submenu a:hover{background:#eef2fa}
.submenu a.atual{background:#0b3a8c;color:#fff}
.modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.modulo{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:12px;background:#fff;border:1px solid #d5ddeb;border-top:5px solid #0b3a8c}
.modulo.alunos{border-top-color:#0b6b3a}.modulo.cadastros{border-top-color:#f5b301}.modulo.acesso{border-top-color:#5a6782}
.modulo h2{margin:0;font-size:1.15rem;color:#0b3a8c}
.modulo p{margin:0;color:#5a6782;font-size:.9rem}
.modulo ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.modulo ul a{font-weight:600}
.permgrupo{display:grid;gap:6px}
.grupos-abas{display:grid;gap:6px}
.rotulo-abas{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#5a6782;align-self:center;margin-right:4px;min-width:58px}