:root{
  --azul:#1f4e79; --azul-claro:#2d6ba3; --azul-fraco:#eaf2fa;
  --verde:#1a7f4b; --vermelho:#b3261e; --ambar:#a86400;
  --tinta:#1c1f23; --tinta-fraca:#5b6470; --linha:#dfe3e8;
  --fundo:#f6f7f9; --branco:#fff; --raio:8px;
  --sombra:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--tinta);background:var(--fundo)}
a{color:var(--azul-claro);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0 0 .6rem}
h1{font-size:1.5rem}h2{font-size:1.2rem}h3{font-size:1rem}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* Cabeçalho */
.topo{background:var(--azul);color:#fff;padding:.7rem 0}
.topo .container{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.marca{font-weight:700;color:#fff;font-size:1.05rem}
.marca:hover{text-decoration:none}
.nav{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a{color:#cfe0f0;padding:.35rem .7rem;border-radius:var(--raio);font-size:.9rem}
.nav a:hover,.nav a.ativo{background:rgba(255,255,255,.15);color:#fff;text-decoration:none}
.nav form{display:inline}
.nav button{background:none;border:0;color:#cfe0f0;cursor:pointer;font-size:.9rem;padding:.35rem .7rem}
.nav button:hover{color:#fff}

main{padding:1.5rem 0 3rem}
.cabecalho-pagina{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.cabecalho-pagina .acoes{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.sub{color:var(--tinta-fraca);font-size:.9rem;margin:.1rem 0 0}

/* Cartões */
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:1.1rem;margin-bottom:1rem}
.cartao h2{margin-bottom:.8rem}
.grade{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* Botões */
.btn{display:inline-block;background:var(--azul);color:#fff;border:1px solid var(--azul);
  padding:.45rem .9rem;border-radius:var(--raio);cursor:pointer;font-size:.9rem;font-family:inherit}
.btn:hover{background:var(--azul-claro);text-decoration:none;color:#fff}
.btn.secundario{background:#fff;color:var(--azul);border-color:var(--linha)}
.btn.secundario:hover{background:var(--azul-fraco);color:var(--azul)}
.btn.perigo{background:#fff;color:var(--vermelho);border-color:#f0c9c6}
.btn.perigo:hover{background:#fdeceb;color:var(--vermelho)}
.btn.pequeno{padding:.25rem .6rem;font-size:.82rem}

/* Formulários */
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.25rem;color:var(--tinta-fraca)}
input,select,textarea{width:100%;padding:.45rem .6rem;border:1px solid var(--linha);
  border-radius:var(--raio);font:inherit;font-size:.92rem;background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul-claro);outline-offset:-1px;border-color:var(--azul-claro)}
textarea{min-height:90px;resize:vertical}
.campo{margin-bottom:.9rem}
.linha{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ajuda{font-size:.8rem;color:var(--tinta-fraca);margin-top:.25rem}
.checkbox{display:flex;align-items:center;gap:.45rem}
.checkbox input{width:auto}
.checkbox label{margin:0;font-weight:400;color:var(--tinta)}
code{background:var(--azul-fraco);padding:.1rem .35rem;border-radius:4px;
  font:.85em ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--azul)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem}

/* Tabelas */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--linha)}
th{background:#f2f4f7;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--tinta-fraca);font-weight:700;white-space:nowrap}
tbody tr:hover{background:var(--azul-fraco)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
.rolagem table{font-size:.88rem}

/* Avisos */
.aviso{padding:.7rem .9rem;border-radius:var(--raio);margin-bottom:1rem;font-size:.9rem;border:1px solid}
.aviso.sucesso{background:#e8f5ee;border-color:#a8d8be;color:#0f5a34}
.aviso.erro{background:#fdeceb;border-color:#f0c9c6;color:#8c1d18}
.aviso.info{background:var(--azul-fraco);border-color:#bcd6ee;color:var(--azul)}
.vazio{text-align:center;padding:2rem 1rem;color:var(--tinta-fraca)}

/* Selos */
.selo{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.selo.ok{background:#e8f5ee;color:var(--verde)}
.selo.ruim{background:#fdeceb;color:var(--vermelho)}
.selo.atencao{background:#fdf3e3;color:var(--ambar)}
.selo.neutro{background:#eef0f3;color:var(--tinta-fraca)}

/* Grade de notas */
.grade-notas{border-collapse:separate;border-spacing:0}
.grade-notas th,.grade-notas td{border-bottom:1px solid var(--linha);border-right:1px solid var(--linha)}
.grade-notas .fixa{position:sticky;left:0;background:#fff;z-index:2;min-width:200px;box-shadow:1px 0 0 var(--linha)}
.grade-notas thead .fixa{background:#f2f4f7;z-index:3}
.grade-notas tbody tr:hover .fixa{background:var(--azul-fraco)}
.celula-nota{width:70px;padding:0!important;text-align:center}
.celula-nota input{width:100%;border:0;border-radius:0;text-align:center;padding:.5rem .2rem;
  font-variant-numeric:tabular-nums;background:transparent}
.celula-nota input:focus{outline:2px solid var(--azul-claro);outline-offset:-2px;background:#fff}
.celula-nota.salvando{background:#fff8e6}
.celula-nota.salvo{background:#eefaf3}
.celula-nota.erro{background:#fdeceb}
.col-media{background:#f2f4f7;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap;min-width:78px}
.dica-teclado{font-size:.82rem;color:var(--tinta-fraca);margin:.5rem 0 0}

/* Abas do editor de esquema */
.abas{display:flex;gap:.3rem;border-bottom:2px solid var(--linha);margin-bottom:1rem;flex-wrap:wrap}
.abas button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-2px;
  padding:.5rem .9rem;cursor:pointer;font:inherit;font-size:.92rem;color:var(--tinta-fraca)}
.abas button.ativa{color:var(--azul);border-bottom-color:var(--azul);font-weight:600}
.painel{display:none}.painel.ativo{display:block}

/* Simulador de fórmula */
.simulador{margin-top:.5rem;padding:.6rem .8rem;border-radius:var(--raio);
  background:#f2f4f7;font-size:.86rem;border:1px solid var(--linha)}
.simulador.ok{background:#e8f5ee;border-color:#a8d8be;color:#0f5a34}
.simulador.falha{background:#fdeceb;border-color:#f0c9c6;color:#8c1d18}

.pilha{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.entre{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
details.bloco{border:1px solid var(--linha);border-radius:var(--raio);background:#fff;margin-bottom:.6rem}
details.bloco>summary{padding:.7rem .9rem;cursor:pointer;font-weight:600;font-size:.95rem}
details.bloco>div{padding:0 .9rem .9rem}
.formulario-inline{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:end}

/* Autenticação */
.auth{max-width:400px;margin:8vh auto;padding:0 1rem}
.auth .cartao{padding:1.6rem}
.auth h1{text-align:center;color:var(--azul)}
.auth .sub{text-align:center;margin-bottom:1.4rem}
.auth .btn{width:100%;padding:.6rem}
.auth footer{text-align:center;margin-top:1rem;font-size:.88rem;color:var(--tinta-fraca)}

/* Impressão */
@media print{
  .topo,.acoes,.nao-imprime{display:none!important}
  body{background:#fff;font-size:12px}
  .cartao{border:0;box-shadow:none;padding:0}
  main{padding:0}
  table{font-size:11px}
  th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}