:root{
  --verde:#1f3d2b; --verde-claro:#2e5a3f; --areia:#c9b98f;
  --tinta:#1c1c1c; --cinza:#6b6b6b; --linha:#e3e3e3; --fundo:#f5f5f2;
  --ok:#1f7a3d; --falta:#b02a2a; --just:#b3801f;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--tinta);background:var(--fundo);line-height:1.5}
a{color:var(--verde-claro);text-decoration:none}
a:hover{text-decoration:underline}

/* topo */
/* ===================== BANNER DO TOPO ===================== */
.banner{
  background:var(--verde);
  background-image:linear-gradient(135deg,#16301f 0%,#1f3d2b 45%,#2e5a3f 100%);
  border-bottom:3px solid var(--areia);
  position:relative;
  overflow:hidden;
}
/* faixa sutil nas cores do brasão, na base do banner */
.banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#FF0000 0 33.3%,#0098DA 33.3% 66.6%,#0F8A2F 66.6% 100%);
  opacity:.9;
}
/* foto da fachada (opcional): basta existir img/fachada.jpg */
.banner.com-fachada{
  background-image:
    linear-gradient(90deg, rgba(22,48,31,.94) 0%, rgba(22,48,31,.82) 45%, rgba(22,48,31,.55) 100%),
    url("img/fachada.jpg");
  background-size:cover;
  background-position:center 40%;
}
.banner-conteudo{
  max-width:900px;margin:0 auto;padding:.85rem 1rem;
  display:flex;align-items:center;gap:.9rem;
  color:#fff;text-decoration:none;
}
a.banner-conteudo:hover{text-decoration:none}
.banner-brasao{
  height:58px;width:auto;display:block;flex:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.banner-texto{min-width:0}
.banner-nome{
  font-size:1.7rem;font-weight:800;line-height:1.05;letter-spacing:.01em;
  text-shadow:0 2px 5px rgba(0,0,0,.5);
}
.banner-sub{
  font-size:.9rem;color:var(--areia);font-weight:600;line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.banner-orgao{
  font-size:.72rem;color:rgba(255,255,255,.75);margin-top:.15rem;
  text-transform:uppercase;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* celular: um pouco mais compacto */
@media (max-width:520px){
  .banner-brasao{height:46px}
  .banner-nome{font-size:1.35rem}
  .banner-sub{font-size:.8rem}
  .banner-orgao{font-size:.65rem}
}
/* barra de navegação encosta no banner */
.topo{border-top:0}

.topo{background:#16301f;color:#fff;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;padding:.6rem 1rem;gap:.5rem}
.topo .marca{color:#fff;font-weight:600;font-size:.95rem;
  display:flex;align-items:center;gap:.45rem}
.marca-icone{width:26px;height:26px;display:block;flex:none}
.topo .marca:hover{text-decoration:none}
.topo .links{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.topo .links a{color:#e8e8e0}
.topo .quem{color:var(--areia);font-size:.85rem}
.topo .sair{color:#ffd9d0}

/* conteúdo */
.conteudo{max-width:900px;margin:0 auto;padding:1.2rem 1rem 3rem}
h1{font-size:1.4rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:1.4rem 0 .6rem}

/* cartões */
.card{background:#fff;border:1px solid var(--linha);border-radius:10px;
  padding:1rem;margin-bottom:1rem}
.card h3{margin:0 0 .3rem;font-size:1.05rem}
.meta{color:var(--cinza);font-size:.85rem;margin-bottom:.4rem}

/* formulários */
label{display:block;font-weight:600;margin:.7rem 0 .25rem;font-size:.9rem}
input,select,textarea{width:100%;padding:.6rem;border:1px solid #cfcfcf;
  border-radius:8px;font-size:1rem;font-family:inherit;background:#fff}
textarea{min-height:80px;resize:vertical}
.btn{display:inline-block;background:var(--verde);color:#fff;border:0;
  padding:.65rem 1.1rem;border-radius:8px;font-size:1rem;cursor:pointer}
.btn:hover{background:var(--verde-claro);text-decoration:none}
.btn.sec{background:#fff;color:var(--verde);border:1px solid var(--verde)}
.btn.pequeno{padding:.35rem .7rem;font-size:.85rem}
.acoes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}

/* botões grandes de registro rápido (um toque) */
.rapido{display:flex;gap:.6rem}
.btn-grande{flex:1;border:0;border-radius:12px;color:#fff;cursor:pointer;
  font-size:1.25rem;font-weight:700;padding:1.4rem .5rem}
.btn-grande.presente{background:var(--ok)}
.btn-grande.falta{background:var(--falta)}
.btn-grande:active{transform:scale(.98)}

/* login */
.login-wrap{max-width:380px;margin:6vh auto;padding:0 1rem}
.login-logo{display:block;width:100%;max-width:330px;height:auto;margin:0 auto 1.2rem}
.login-wrap .card{padding:1.5rem}
.login-titulo{text-align:center;margin-bottom:1rem}

/* etiquetas de status */
.tag{display:inline-block;padding:.15rem .55rem;border-radius:999px;
  font-size:.8rem;font-weight:600;color:#fff}
.tag.presente{background:var(--ok)}
.tag.falta{background:var(--falta)}
.tag.justificado{background:var(--just)}
.tag.pendente{background:#888}

/* tabela */
table{width:100%;border-collapse:collapse;background:#fff}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--linha);
  font-size:.9rem;vertical-align:top}
th{background:#efefe9}
.tabela-rolavel{overflow-x:auto}

.alerta{background:#eef6ef;border:1px solid #cfe3d2;color:#1f4d2c;
  padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem}
.erro{background:#fbecec;border-color:#eecccc;color:#7a1f1f}

/* quadro de avisos (mural público) */
.quadro{background:#fff;border:1px solid var(--linha);border-left:5px solid var(--verde);
  border-radius:10px;overflow:hidden;margin-bottom:1rem}
.quadro-cabeca{background:var(--verde);color:#fff;font-weight:700;
  padding:.5rem .9rem;font-size:.95rem;letter-spacing:.02em}
.quadro-lista{margin:0;padding:.8rem .9rem;display:grid;
  grid-template-columns:auto 1fr;gap:.35rem .8rem}
.quadro-lista dt{font-weight:700;color:var(--cinza);font-size:.85rem;white-space:nowrap}
.quadro-lista dd{margin:0;font-size:.95rem;font-weight:600}
.quadro-obs{padding:0 .9rem .8rem;font-size:.9rem;color:#444}
.quadro-pe{border-top:1px solid var(--linha);padding:.4rem .9rem;
  font-size:.75rem;color:var(--cinza);background:#fafaf7}
.tag.just{background:var(--just)}

/* faixa de identificação do militar (nome + função) */
.identificacao{background:#fff;border:1px solid var(--linha);border-radius:10px;
  padding:.8rem 1rem;margin-bottom:1rem}
.ident-nome{font-size:1.15rem;font-weight:700}
.ident-funcao{display:inline-block;background:var(--areia);color:#3a2f10;
  font-weight:700;font-size:.85rem;padding:.1rem .6rem;border-radius:999px;margin-top:.25rem}
.ident-grupo{color:var(--cinza);font-size:.78rem;margin-top:.3rem}

.topo .quem .funcao{color:#fff;background:rgba(255,255,255,.18);
  padding:.05rem .45rem;border-radius:999px;margin-left:.25rem;font-size:.8rem}

/* impressão do relatório */
@media print{
  .topo,.acoes,.nao-imprime{display:none!important}
  /* o banner SAI no papel, em versão compacta e sem fundo (economiza tinta) */
  .banner{background:none!important;border-bottom:1px solid #000;overflow:visible}
  .banner::after{display:none}
  .banner-conteudo{padding:0 0 .3rem;gap:.6rem;color:#000}
  .banner-brasao{height:52px;filter:none}
  .banner-nome{font-size:1.2rem;color:#000;text-shadow:none}
  .banner-sub{font-size:.8rem;color:#000;text-shadow:none}
  .banner-orgao{font-size:.7rem;color:#333}
  .conteudo{max-width:none;padding:0}
  .card{border:0;padding:0}
  th{background:#ddd!important;-webkit-print-color-adjust:exact}
}

/* rodapé de crédito */
.rodape-credito{
  max-width:900px;margin:2rem auto 1rem;padding:1rem;
  text-align:center;font-size:.75rem;color:#9aa39b;border-top:1px solid var(--linha);
}
@media print{ .rodape-credito{display:none} }

/* grade de tiragem por tempo */
.grade-tiragem select.sel-status{padding:.2rem;border-radius:6px;font-weight:700}
.sel-status.st-presente{background:#e6f4ea;color:#1f7a3d}
.sel-status.st-atraso{background:#fff4e0;color:#a5680a}
.sel-status.st-falta_just{background:#fdeede;color:#b5710c}
.sel-status.st-falta_nao{background:#fde5e5;color:#b02a2a}
.grade-tiragem th, .grade-tiragem td{text-align:center}
.grade-tiragem td:first-child, .grade-tiragem th:first-child{text-align:left}

/* detalhamento da pontuação */
.det-aluno summary{cursor:pointer}
.ref-lista{margin:.3rem 0 .2rem .8rem;border-left:2px solid var(--linha);padding-left:.6rem}
.ref-item{font-size:.82rem;margin:.15rem 0}
@media print{
  .det-aluno > .ref-lista{display:block !important}
  .det-aluno summary{list-style:none}
}