/* =====================================================================
   Sistema de Emissão de Certificados — estilo institucional
   Tons de pergaminho e verde, tipografia com serifa nos títulos.
   ===================================================================== */
:root{
  --pergaminho:#f4f1e6;
  --pergaminho-2:#efe9d6;
  --verde:#3a5a40;
  --verde-escuro:#2c4530;
  --verde-claro:#dbe2cd;
  --ocre:#b07d2b;
  --ocre-claro:#e8d9b5;
  --tinta:#2b2a25;
  --tinta-suave:#5c594f;
  --linha:#cfc7ad;
  --erro:#9a3b2e;
  --ok:#3a5a40;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--pergaminho);
  color:var(--tinta);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  color:var(--verde-escuro);
  font-weight:600;
  line-height:1.2;
  margin:0 0 .4em;
}
a{color:var(--verde)}
a:hover{color:var(--ocre)}

/* ---------------------------------------------------------- cabeçalho */
.topo{
  background:var(--verde-escuro);
  color:#f4f1e6;
  border-bottom:4px solid var(--ocre);
}
.topo .marca{
  max-width:1080px;margin:0 auto;padding:16px 24px 6px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.topo .marca-info{display:flex;flex-direction:column}
.topo .marca h1{color:#fff;font-size:1.4rem;margin:0}
.topo .marca-sub{color:var(--ocre-claro);font-size:.85rem}
.topo .marca-conta{margin-left:auto;color:var(--ocre-claro);font-size:.9rem}
.topo .marca-conta a{color:#e8d9b5}
.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:40px;padding:0 9px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:4px;
}
.menu-toggle span{display:block;height:2px;background:#f4f1e6;border-radius:2px;transition:.2s}
.menu-toggle.aberto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.aberto span:nth-child(2){opacity:0}
.menu-toggle.aberto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;gap:2px}
.nav a{
  color:#e7e3d4;text-decoration:none;padding:10px 16px;font-size:.96rem;
  border-bottom:3px solid transparent;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a.activo{color:#fff;border-bottom-color:var(--ocre);font-weight:600}

/* ---------------------------------------------------------- conteúdo */
.envolto{max-width:1080px;margin:28px auto;padding:0 24px}
.seccao{
  background:#fffdf6;
  border:1px solid var(--linha);
  padding:22px 26px;margin-bottom:24px;
}
.seccao h2{font-size:1.3rem;border-bottom:1px solid var(--linha);padding-bottom:8px;margin-bottom:16px}
.descr{color:var(--tinta-suave);margin-top:-8px;margin-bottom:18px;font-size:.96rem}

/* ---------------------------------------------------------- formulários */
.linha{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:4px}
.campo{flex:1 1 220px;margin-bottom:14px}
.campo.larga{flex:1 1 100%}
label{display:block;font-weight:600;font-size:.9rem;color:var(--verde-escuro);margin-bottom:5px}
input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linha);border-radius:3px;
  background:#fff;font:inherit;color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 2px rgba(58,90,64,.15)}
small.ajuda{color:var(--tinta-suave);font-size:.82rem}

/* ---------------------------------------------------------- botões */
.btn{
  display:inline-block;border:none;border-radius:3px;cursor:pointer;
  padding:10px 20px;font:inherit;font-weight:600;text-decoration:none;
  background:var(--verde);color:#fff;
}
.btn:hover{background:var(--verde-escuro);color:#fff}
.btn.ocre{background:var(--ocre)}
.btn.ocre:hover{background:#8f6420}
.btn.vazio{background:transparent;border:1px solid var(--verde);color:var(--verde)}
.btn.vazio:hover{background:var(--verde-claro)}
.btn.pequeno{padding:6px 12px;font-size:.85rem}
.btn.perigo{background:transparent;border:1px solid var(--erro);color:var(--erro)}
.btn.perigo:hover{background:var(--erro);color:#fff}

/* ---------------------------------------------------------- tabelas */
table.lista{width:100%;border-collapse:collapse;font-size:.95rem}
table.lista th,table.lista td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--linha)}
table.lista th{background:var(--verde-claro);color:var(--verde-escuro);font-family:"Spectral",serif}
table.lista tr:hover td{background:#faf7ee}
.acoes{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------------------------------------------------- mensagens */
.aviso{padding:12px 16px;border-radius:3px;margin-bottom:18px;border:1px solid}
.aviso.ok{background:#e9f0e4;border-color:var(--ok);color:var(--verde-escuro)}
.aviso.erro{background:#f6e6e2;border-color:var(--erro);color:var(--erro)}

/* ---------------------------------------------------------- diversos */
.barra-topo{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.vazio-msg{text-align:center;color:var(--tinta-suave);padding:36px 12px;font-style:italic}
.emblema-actual{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.emblema-actual img{width:84px;height:84px;object-fit:contain;border:1px solid var(--linha);background:#fff;padding:4px}
.rodape{max-width:1080px;margin:30px auto;padding:14px 24px;color:var(--tinta-suave);font-size:.85rem;border-top:1px solid var(--linha)}
.notas-grelha{display:flex;flex-wrap:wrap;gap:10px}
.notas-grelha .nota{flex:1 1 calc(33% - 10px);min-width:200px;display:flex;align-items:center;gap:8px}
.notas-grelha .nota label{flex:0 0 130px;margin:0;font-weight:400;color:var(--tinta)}
fieldset{border:1px solid var(--linha);border-radius:3px;padding:14px 16px;margin-bottom:18px}
legend{font-family:"Spectral",serif;color:var(--verde-escuro);font-weight:600;padding:0 8px}

/* ---------------------------------------------------------- definições e saldo */
.etiqueta{background:var(--verde-claro);color:var(--verde-escuro);border:1px solid var(--linha);border-radius:999px;padding:3px 12px;font-size:.82rem;font-weight:600}
.def-lista{display:flex;flex-wrap:wrap;gap:10px 28px;margin:6px 0 18px}
.def-lista>div{flex:1 1 240px}
.def-lista dt{font-size:.82rem;color:var(--tinta-suave);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.def-lista dd{margin:2px 0 0;font-size:1.05rem}
.lista-simples{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.lista-simples li{background:var(--pergaminho-2);border:1px solid var(--linha);border-radius:3px;padding:6px 14px;font-size:.95rem}
.cartao-saldo{display:flex;flex-wrap:wrap;gap:30px;margin:6px 0 14px}
.cartao-saldo>div{display:flex;flex-direction:column;align-items:flex-start;background:var(--verde-claro);border:1px solid var(--linha);padding:14px 22px;min-width:200px}
.cartao-saldo .rotulo{font-size:.82rem;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.03em}
.cartao-saldo .valor{font-family:"Spectral",serif;font-size:2.4rem;font-weight:600;color:var(--verde-escuro);line-height:1.1}
code{background:var(--pergaminho-2);border:1px solid var(--linha);border-radius:3px;padding:1px 6px;font-size:.9em}

/* =====================================================================
   Variações de etiqueta de estado
   ===================================================================== */
.etiqueta.verde{background:#dfeAd5;background:#e0ecd8;color:var(--verde-escuro);border-color:#bcd0a8}
.etiqueta.cinza{background:#ece8db;color:var(--tinta-suave)}
.etiqueta.vermelha{background:#f6e0db;color:var(--erro);border-color:#e0b3aa}
.btn.larga{width:100%;justify-content:center;text-align:center}

/* =====================================================================
   Página de entrada (login) com emblema da escola
   ===================================================================== */
.pagina-entrada{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:30px 16px;
  background:var(--pergaminho);
  background-image:radial-gradient(circle at 50% 0,#eef0e4,var(--pergaminho) 60%);
}
.cartao-entrada{
  width:100%;max-width:430px;background:#fff;border:1px solid var(--linha);
  padding:30px 30px 22px;
  box-shadow:0 10px 40px rgba(44,69,48,.08);
}
.entrada-topo{text-align:center;margin-bottom:18px}
.emblema-login{width:84px;height:84px;object-fit:contain;margin-bottom:8px}
.escola-nome{font-size:1.35rem;margin:.2em 0 .1em}
.escola-sub{color:var(--tinta-suave);font-size:.9rem;margin:0}
.form-entrada{margin-top:6px}
.entrada-links{text-align:center;font-size:.9rem;margin-top:16px;color:var(--tinta-suave)}
.entrada-rodape{text-align:center;margin-top:20px;padding-top:16px;border-top:1px dashed var(--linha)}
.emblema-rodape{width:42px;height:42px;object-fit:contain;opacity:.45}

/* =====================================================================
   Páginas públicas (início e consulta)
   ===================================================================== */
.pagina-publica{background:var(--pergaminho)}
.cabecalho-publico{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  max-width:1080px;margin:0 auto;padding:16px 24px;
}
.marca-publica{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--verde-escuro);font-family:"Spectral",serif;font-weight:700;font-size:1.3rem}
.marca-publica img{height:38px;width:auto}
.cabecalho-publico nav{display:flex;flex-wrap:wrap;gap:4px}
.cabecalho-publico nav a{padding:8px 14px;text-decoration:none;color:var(--tinta);font-size:.95rem}
.cabecalho-publico nav a:hover{color:var(--ocre)}
.ligacao-destaque{background:var(--verde);color:#fff!important;border-radius:3px}
.ligacao-destaque:hover{background:var(--verde-escuro);color:#fff!important}

.hero{max-width:760px;margin:0 auto;padding:46px 24px 30px;text-align:center}
.hero-logo{max-width:140px;height:auto;margin-bottom:14px}
.hero h1{font-size:2.3rem;margin-bottom:.2em}
.hero-lema{font-size:1.15rem;color:var(--tinta-suave);max-width:620px;margin:0 auto 26px}
.hero-accoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.bloco-publico{max-width:760px;margin:0 auto;padding:26px 24px;border-top:1px solid var(--linha)}
.bloco-publico h2{font-size:1.5rem}
.bloco-publico p{margin:.4em 0 .9em;font-size:1.04rem}
.destaque-preco{background:var(--verde-claro);border:1px solid var(--linha);max-width:712px;margin:18px auto;padding:22px 26px}
.destaque-preco strong{color:var(--verde-escuro)}

.envolto-publico{max-width:1000px;margin:0 auto;padding:10px 24px 40px}
.bloco-intro{padding:24px 0 6px}
.bloco-intro h1{font-size:2rem}
.bloco-intro p{color:var(--tinta-suave);max-width:680px;font-size:1.05rem}
.form-consulta{background:#fff;border:1px solid var(--linha);padding:20px 22px;margin:18px 0}
.resultado-consulta{margin-top:22px}
.nota-resultado{color:var(--tinta-suave);margin-bottom:10px}

.rodape-publico{
  background:var(--verde-escuro);color:#e7e3d4;margin-top:30px;
  padding:26px 24px;text-align:center;border-top:4px solid var(--ocre);
}
.rodape-publico a{color:var(--ocre-claro)}
.rodape-publico p{margin:.3em 0}
.miudinho{font-size:.82rem;color:#bcc4b3;max-width:680px;margin:10px auto 0}

.aviso-cookies{
  position:fixed;left:16px;right:16px;bottom:16px;max-width:760px;margin:0 auto;
  background:var(--verde-escuro);color:#f4f1e6;padding:14px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;
  box-shadow:0 6px 24px rgba(0,0,0,.2);
}
.aviso-cookies span{font-size:.92rem}

@media(max-width:560px){
  .hero h1{font-size:1.8rem}
  .cabecalho-publico{justify-content:center}
}

/* =====================================================================
   Tabela com rolamento horizontal (pautas largas em ecrãs pequenos)
   ===================================================================== */
.tabela-rolavel{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela-rolavel table{min-width:640px}
.resultado-aprovado{color:var(--verde-escuro);font-weight:600}

/* =====================================================================
   Adaptação a ecrãs pequenos (telemóveis a partir de ~4 polegadas)
   ===================================================================== */
@media (max-width:760px){
  .topo .marca{padding:12px 16px 6px}
  .topo .marca-conta{order:3;margin-left:0;width:100%;font-size:.85rem;padding-top:4px}
  .menu-toggle{display:flex;margin-left:auto}
  .nav{display:none;flex-direction:column;padding:0 0 8px;gap:0}
  .nav.aberto{display:flex}
  .nav a{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav a.activo{border-bottom-color:rgba(255,255,255,.08);background:rgba(255,255,255,.06)}
  .envolto{padding:0 14px;margin:18px auto}
  .seccao{padding:18px 15px}
  .cabecalho-publico{padding:12px 16px}
  .cabecalho-publico nav{width:100%;justify-content:flex-start}
  .hero{padding:32px 16px 22px}
  .bloco-publico,.envolto-publico{padding-left:16px;padding-right:16px}
  table.lista{font-size:.9rem}
  table.lista th,table.lista td{padding:8px 8px}
  .acoes{gap:6px}
}
@media (max-width:430px){
  body{font-size:15px}
  .topo .marca h1{font-size:1.18rem}
  .hero h1{font-size:1.5rem}
  .hero-lema{font-size:1rem}
  .btn{padding:9px 14px}
  .envolto{padding:0 10px}
  .seccao{padding:16px 12px}
  .cartao-saldo .valor{font-size:2rem}
  .linha{gap:10px}
}