/* Sistema de Gestão Escolar — Instituto Kietto
   Reaproveita os tokens de cor/tipografia do site institucional. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --azul-900:#060B45; --azul-800:#0B1685; --azul-600:#1E2CB8; --azul-400:#4A5CE0; --azul-100:#E7E9FB;
  --laranja-700:#9C4415; --laranja-600:#C1561B; --laranja-400:#E37A32; --laranja-100:#FBE7D6;
  --osso:#F6F3EC; --branco:#FFFFFF; --grafite-900:#14151F; --grafite-700:#33354A; --grafite-500:#5D5F76; --grafite-200:#D8D8E2;
  --linha: rgba(11,22,133,0.14);
  --fonte-display:"Space Grotesk","Inter",sans-serif; --fonte-corpo:"Inter",sans-serif; --fonte-tecnica:"IBM Plex Mono",monospace;
}
*{ box-sizing: border-box; }
body{ margin:0; font-family: var(--fonte-corpo); background: var(--osso); color: var(--grafite-900); }

.tela-login{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-lateral{
  background: var(--azul-900);
  color: var(--branco);
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-lateral::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 20%, #000 40%, transparent 88%);
}
.login-lateral > *{ position: relative; }
.login-marca{ display:flex; align-items:center; gap:12px; }
.login-marca img{ height:42px; }
.login-marca strong{ display:block; font-family: var(--fonte-display); font-size:15px; }
.login-marca span{ display:block; font-family: var(--fonte-tecnica); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--laranja-400); }
.login-frase{ font-family: var(--fonte-display); font-size: 26px; line-height:1.35; max-width: 420px; }
.login-frase b{ color: var(--laranja-400); font-weight:700; }
.login-rodape-lateral{ font-family: var(--fonte-tecnica); font-size:12px; color: rgba(255,255,255,0.5); letter-spacing:0.05em; }

.login-formulario{
  display:flex; align-items:center; justify-content:center; padding: 50px;
}
.caixa-login{ width: 100%; max-width: 380px; }
.caixa-login .eyebrow{ font-family: var(--fonte-tecnica); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color: var(--laranja-600); display:flex; align-items:center; gap:8px; }
.caixa-login .eyebrow::before{ content:""; width:18px; height:1.5px; background: var(--laranja-600); }
.caixa-login h1{ font-family: var(--fonte-display); font-size: 26px; color: var(--azul-900); margin: 14px 0 6px; }
.caixa-login p.sub{ color: var(--grafite-500); font-size: 14px; margin-bottom: 30px; }

.selector-perfil{ display:grid; grid-template-columns: repeat(5,1fr); gap:6px; margin-bottom: 26px; }
.selector-perfil button{
  border: 1.5px solid var(--grafite-200);
  background: var(--branco);
  border-radius: 8px;
  padding: 10px 3px;
  font-size: 10.8px;
  font-family: var(--fonte-tecnica);
  color: var(--grafite-500);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.selector-perfil button.activo{ border-color: var(--azul-800); color: var(--azul-800); background: var(--azul-100); font-weight:600; }

.campo{ display:grid; gap:7px; margin-bottom:18px; }
.campo label{ font-size:12.5px; font-weight:600; color: var(--grafite-700); }
.campo input{
  border: 1.5px solid var(--grafite-200);
  border-radius: 6px;
  padding: 13px 14px;
  font-size: 14.5px;
  background: var(--osso);
  font-family: var(--fonte-corpo);
}
.campo input:focus{ outline: 2px solid var(--azul-800); outline-offset: 1px; border-color: var(--azul-800); }

.opcoes-login{ display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:24px; color: var(--grafite-500); }
.opcoes-login a{ color: var(--azul-800); font-weight:600; text-decoration:none; }

.btn-entrar{
  width:100%; padding: 14px; border-radius: 6px; border:none; cursor:pointer;
  background: var(--laranja-600); color:#fff; font-weight:700; font-size:15px;
  transition: background .2s;
}
.btn-entrar:hover{ background: var(--laranja-700); }

.nota-demo{
  margin-top: 22px; padding: 14px 16px; border-radius: 8px;
  background: var(--laranja-100); color: var(--laranja-700);
  font-size: 12.5px; line-height:1.6; font-family: var(--fonte-tecnica);
}

.voltar-site{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color: var(--grafite-500); margin-top: 28px; text-decoration:none; }
.voltar-site:hover{ color: var(--azul-800); }

@media (max-width: 860px){
  .tela-login{ grid-template-columns: 1fr; }
  .login-lateral{ display:none; }
}

/* ---------- Painéis internos (placeholder) ---------- */
.topo-painel{
  background: var(--branco); border-bottom: 1px solid var(--linha);
  padding: 18px 32px; display:flex; align-items:center; justify-content:space-between;
}
.topo-painel .marca{ display:flex; align-items:center; gap:12px; }
.topo-painel .marca img{ height:36px; }
.topo-painel .marca strong{ font-family: var(--fonte-display); color: var(--azul-900); font-size:14px; display:block; }
.topo-painel .marca span{ font-family: var(--fonte-tecnica); font-size:10.5px; color: var(--laranja-600); text-transform:uppercase; }
.corpo-painel{ max-width: 860px; margin: 90px auto; text-align:center; padding: 0 24px; }
.selo-construcao{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--fonte-tecnica); font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase; color: var(--laranja-600); background: var(--laranja-100);
  padding: 7px 14px; border-radius:999px; margin-bottom:22px;
}
.corpo-painel h1{ font-family: var(--fonte-display); font-size: 32px; color: var(--azul-900); margin-bottom:14px; }
.corpo-painel p{ color: var(--grafite-500); font-size:16px; line-height:1.7; max-width:560px; margin: 0 auto 30px; }
.grade-modulos{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; text-align:left; margin-top: 40px; }
.modulo-card{ border:1px solid var(--linha); border-radius:10px; padding:20px; background:var(--branco); }
.modulo-card .tag{ font-family: var(--fonte-tecnica); font-size:11px; color: var(--azul-800); background:var(--azul-100); padding:3px 8px; border-radius:4px; }
.modulo-card h4{ margin: 12px 0 6px; color: var(--azul-900); font-family: var(--fonte-display); font-size:15px; }
.modulo-card p{ font-size:13px; margin:0; text-align:left; }
@media (max-width: 720px){ .grade-modulos{ grid-template-columns: 1fr; } }

/* ==========================================================
   LAYOUT DOS PAINÉIS FUNCIONAIS (com barra lateral)
   ========================================================== */
.layout-painel{ display:flex; min-height:100vh; align-items:stretch; }

.barra-lateral{
  width: 248px;
  flex-shrink: 0;
  background: var(--azul-900);
  color: rgba(255,255,255,0.82);
  padding: 26px 18px;
  display:flex;
  flex-direction:column;
  gap: 26px;
}
.barra-lateral .marca-lateral{ display:flex; align-items:center; gap:10px; padding: 0 8px; }
.barra-lateral .marca-lateral img{ height:34px; }
.barra-lateral .marca-lateral strong{ display:block; font-family: var(--fonte-display); font-size:13.5px; color:#fff; }
.barra-lateral .marca-lateral span{ display:block; font-family: var(--fonte-tecnica); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--laranja-400); }

.barra-lateral nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.barra-lateral nav a{
  display:flex; align-items:center; gap:11px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 13.8px; font-weight: 500;
  color: rgba(255,255,255,0.62);
  transition: background .18s, color .18s;
}
.barra-lateral nav a svg{ flex-shrink:0; opacity:.85; }
.barra-lateral nav a:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.barra-lateral nav a.activo{ background: var(--laranja-600); color:#fff; }
.barra-lateral nav .separador{
  font-family: var(--fonte-tecnica); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(255,255,255,0.35); padding: 14px 12px 2px;
}
.barra-lateral .rodape-lateral{ padding: 0 8px; }
.barra-lateral .rodape-lateral a{
  display:flex; align-items:center; gap:8px; font-size:13px; color: rgba(255,255,255,0.55);
  padding: 9px 4px;
}
.barra-lateral .rodape-lateral a:hover{ color: var(--laranja-400); }
.barra-lateral .rodape-lateral a.activo{ color: var(--laranja-400); font-weight:600; }

.area-conteudo{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topo-conteudo{
  background: var(--branco); border-bottom: 1px solid var(--linha);
  padding: 20px 34px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.topo-conteudo-titulo{ display:flex; align-items:center; gap:14px; }
.topo-conteudo h1{ font-family: var(--fonte-display); font-size: 21px; color: var(--azul-900); }
.topo-conteudo .legenda{ font-family: var(--fonte-tecnica); font-size:11.5px; color: var(--grafite-500); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }
.topo-conteudo .utilizador-sessao{ display:flex; align-items:center; gap:14px; font-size:13.5px; color: var(--grafite-500); }
.topo-conteudo .utilizador-sessao b{ color: var(--azul-900); }

/* Botão de hambúrguer — só aparece em ecrãs pequenos, ver media query abaixo */
.hamburger-painel{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:38px; height:38px; border-radius:8px; border:1.5px solid var(--linha);
  background:#fff; cursor:pointer; flex-shrink:0; padding:0;
}
.hamburger-painel span{ width:18px; height:2px; background: var(--azul-900); margin:0 auto; display:block; }

/* Overlay do menu lateral em modo sobreposição (mobile/tablet) */
.overlay-painel{ display:none; }

/* Botão de fechar dentro da barra lateral — só visível em mobile */
.fechar-barra-lateral{
  display:none; margin-left:auto; background:none; border:none; color:#fff;
  cursor:pointer; padding:6px; opacity:.8;
}
.fechar-barra-lateral:hover{ opacity:1; }

.avatar-topo{ display:block; width:38px; height:38px; border-radius:999px; overflow:hidden; flex-shrink:0; border:1.5px solid var(--linha); }
.avatar-topo img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-topo .avatar-iniciais{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background: var(--azul-800); color:#fff; font-family: var(--fonte-display); font-size:14px; font-weight:700;
}

.cartao-conta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.avatar-conta{ width:84px; height:84px; border-radius:999px; overflow:hidden; flex-shrink:0; border:2px solid var(--linha); background: var(--azul-800); }
.avatar-conta img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-conta .avatar-iniciais{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-family: var(--fonte-display); font-size:28px; font-weight:700; }
.campo-ficheiro{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.corpo-conteudo{ padding: 30px 34px 60px; flex:1; }

/* Indicadores / cartões numéricos */
.grade-indicadores{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:16px; margin-bottom: 30px; }
.cartao-indicador{ background: var(--branco); border:1px solid var(--linha); border-radius:10px; padding:20px 22px; }
.cartao-indicador span{ font-family: var(--fonte-tecnica); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--grafite-500); }
.cartao-indicador strong{ display:block; font-family: var(--fonte-display); font-size:28px; color: var(--azul-900); margin-top:6px; }
.cartao-indicador strong.laranja{ color: var(--laranja-600); }

/* Blocos de secção dentro do conteúdo */
.bloco{ background: var(--branco); border:1px solid var(--linha); border-radius:10px; margin-bottom:26px; overflow:hidden; }
.bloco-cabecalho{ padding: 16px 20px; border-bottom:1px solid var(--linha); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bloco-cabecalho h2{ font-family: var(--fonte-display); font-size:15.5px; color: var(--azul-900); }
.bloco-cabecalho .sub{ font-size:12.5px; color: var(--grafite-500); margin-top:2px; }
.bloco-corpo{ padding: 20px; }
.bloco-corpo.sem-padding{ padding:0; }

/* Barra de acções / filtros */
.barra-acoes{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.barra-acoes select, .barra-acoes input{
  border:1.5px solid var(--grafite-200); border-radius:6px; padding:9px 12px; font-size:13.5px;
  font-family: var(--fonte-corpo); background: var(--osso);
}

/* Tabelas de dados */
.tabela-scroll{ overflow-x:auto; }
table.tabela-dados{ width:100%; border-collapse:collapse; font-size:13.6px; }
table.tabela-dados th{
  text-align:left; padding: 12px 18px; background: var(--osso); color: var(--grafite-500);
  font-family: var(--fonte-tecnica); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  border-bottom:1px solid var(--linha); white-space:nowrap;
}
table.tabela-dados td{ padding: 12px 18px; border-bottom:1px solid var(--linha); color: var(--grafite-700); vertical-align:middle; }
table.tabela-dados tr:last-child td{ border-bottom:none; }
table.tabela-dados tr:hover td{ background: rgba(11,22,133,0.02); }
table.tabela-dados input[type=number], table.tabela-dados input[type=text], table.tabela-dados select{
  border:1.5px solid var(--grafite-200); border-radius:6px; padding:7px 9px; font-size:13px; width:100%; max-width:120px;
}
.tabela-vazia{ padding: 40px 20px; text-align:center; color: var(--grafite-500); font-size:14px; }

/* Badges de estado */
.badge{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.02em; }
.badge-laranja{ background: var(--laranja-100); color: var(--laranja-700); }
.badge-azul{ background: var(--azul-100); color: var(--azul-800); }
.badge-verde{ background:#DDF3E4; color:#1C7C3F; }
.badge-vermelho{ background:#FBE0E0; color:#B03434; }
.badge-cinza{ background:#EDEDF2; color: var(--grafite-500); }

/* Formulários dentro dos painéis */
.form-painel{ display:grid; gap:16px; max-width: 560px; }
.form-painel.largo{ max-width: 100%; }
.form-painel .duas-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-painel .tres-col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-painel label{ font-size:12.5px; font-weight:600; color: var(--grafite-700); display:block; margin-bottom:6px; }
.form-painel input, .form-painel select, .form-painel textarea{
  width:100%; border:1.5px solid var(--grafite-200); border-radius:6px; padding:11px 13px;
  font-family: var(--fonte-corpo); font-size:14px; background: var(--osso);
}
.form-painel input:focus, .form-painel select:focus, .form-painel textarea:focus{ outline:2px solid var(--azul-800); outline-offset:1px; border-color:var(--azul-800); }
.form-painel textarea{ resize:vertical; min-height:90px; }

/* Botões pequenos de acção em linha */
.botoes-linha{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-mini{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:6px; font-size:12.5px; font-weight:600;
  border:1.5px solid var(--grafite-200); background:#fff; color: var(--grafite-700); cursor:pointer; transition: all .18s;
  text-decoration:none;
}
.btn-mini:hover{ border-color: var(--azul-800); color: var(--azul-800); }
.btn-mini.aprovar{ border-color:#1C7C3F; color:#1C7C3F; }
.btn-mini.aprovar:hover{ background:#1C7C3F; color:#fff; }
.btn-mini.rejeitar{ border-color:#B03434; color:#B03434; }
.btn-mini.rejeitar:hover{ background:#B03434; color:#fff; }
.btn-mini.principal{ background: var(--laranja-600); border-color:var(--laranja-600); color:#fff; }
.btn-mini.principal:hover{ background: var(--laranja-700); border-color:var(--laranja-700); }

/* Alertas de feedback */
.alerta{ padding:13px 16px; border-radius:8px; font-size:13.8px; margin-bottom:20px; }
.alerta-sucesso{ background:#DDF3E4; color:#1C7C3F; }
.alerta-erro{ background:#FBE0E0; color:#B03434; }
.alerta-info{ background: var(--azul-100); color: var(--azul-800); }
.alerta-aviso{ background:#FFF3D6; color:#8A5A00; border:1px solid #F0C35C; }

.texto-vazio{ color: var(--grafite-500); font-size:13.5px; font-style:italic; }

/* ==========================================================
   RESPONSIVO — tablets e telemóveis
   ========================================================== */

/* Tablets e ecrãs médios: a barra lateral passa a um menu em
   sobreposição (drawer), aberto pelo botão de hambúrguer */
@media (max-width: 940px){
  .layout-painel{ display:block; }

  .barra-lateral{
    display:flex !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(280px, 82vw);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 16px 0 40px rgba(6,11,69,0.28);
  }
  .barra-lateral.aberta{ transform: translateX(0); }

  .fechar-barra-lateral{ display:flex; }

  .overlay-painel{
    display:block;
    position: fixed; inset:0;
    background: rgba(6,11,69,0.5);
    z-index: 250;
    opacity:0; pointer-events:none;
    transition: opacity .22s ease;
  }
  .overlay-painel.activo{ opacity:1; pointer-events:auto; }

  .hamburger-painel{ display:flex; }

  .area-conteudo{ width:100%; }

  .form-painel .duas-col, .form-painel .tres-col{ grid-template-columns: 1fr; }
}

body.painel-sem-scroll{ overflow:hidden; }

/* Tablets em retrato / ecrãs pequenos */
@media (max-width: 720px){
  .topo-conteudo{ padding: 16px 18px; }
  .topo-conteudo h1{ font-size:18px; }
  .topo-conteudo .utilizador-sessao span{ display:none; }
  .corpo-conteudo{ padding: 20px 18px 50px; }

  .grade-indicadores{ grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:12px; }
  .cartao-indicador{ padding:16px 16px; }
  .cartao-indicador strong{ font-size:22px; }

  .bloco-cabecalho{ padding: 14px 16px; }
  .bloco-corpo{ padding: 16px; }

  .barra-acoes{ flex-direction:column; align-items:stretch; }
  .barra-acoes select, .barra-acoes input{ width:100%; }

  .cartao-conta{ flex-direction:column; align-items:flex-start; text-align:left; }

  table.tabela-dados{ font-size:12.8px; }
  table.tabela-dados th, table.tabela-dados td{ padding:10px 12px; }
  .tabela-scroll{ -webkit-overflow-scrolling: touch; }
}

/* Telemóveis pequenos */
@media (max-width: 480px){
  .login-formulario{ padding: 32px 22px; }
  .caixa-login h1{ font-size:22px; }

  .topo-conteudo-titulo{ gap:10px; }
  .grade-indicadores{ grid-template-columns: 1fr 1fr; }
  .botoes-linha{ flex-direction:column; align-items:stretch; }
  .botoes-linha .btn-mini{ width:100%; justify-content:center; }
  .form-painel .tres-col{ grid-template-columns: 1fr; }
}

/* ==========================================================
   COMPROVATIVO — impressão térmica (58/80mm)
   ========================================================== */
.pagina-comprovante{ display:flex; justify-content:center; padding: 30px 16px; }

.recibo-termico{
  width: 300px; max-width: 100%;
  background: #fff;
  padding: 18px 16px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px; line-height: 1.55; color: #111;
  border: 1px solid var(--linha); border-radius: 4px;
  box-shadow: 0 4px 18px rgba(6,11,69,0.08);
}
.recibo-termico .centro{ text-align:center; }
.recibo-termico .marca-recibo{ font-weight:700; font-size:14.5px; letter-spacing:.02em; }
.recibo-termico .subtitulo-recibo{ font-size:10.5px; color:#444; margin-top:2px; }
.recibo-termico hr{ border:none; border-top: 1px dashed #888; margin: 10px 0; }
.recibo-termico .linha-recibo{ display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; }
.recibo-termico .linha-recibo span:first-child{ color:#444; }
.recibo-termico .valor-total{ font-size:16px; font-weight:700; text-align:center; margin: 10px 0; }
.recibo-termico .rodape-recibo{ text-align:center; font-size:10.5px; color:#444; margin-top:10px; }
.recibo-termico .codigo-recibo{ text-align:center; font-size:13px; font-weight:700; letter-spacing:.08em; margin-top:6px; }

.acoes-comprovante{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }

@media print{
  body *{ visibility:hidden; }
  .recibo-termico, .recibo-termico *{ visibility:visible; }
  .recibo-termico{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width: 80mm; max-width:80mm; border:none; box-shadow:none; padding:4mm;
  }
  .acoes-comprovante, .barra-lateral, .topo-conteudo, .overlay-painel{ display:none !important; }
  @page{ margin: 0; }
}

/* ==========================================================
   Caixa de referência de pagamento (ATM / Multicaixa Express)
   ========================================================== */
.caixa-referencia-pagamento{
  margin-top: 14px; padding: 12px 16px; border-radius: 8px;
  background: var(--azul-50, #F0F4FF); border: 1px dashed var(--azul-200, #B9C7F5);
}
.caixa-referencia-pagamento > span{
  display:block; font-size:11.5px; font-weight:700; color: var(--azul-900);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.linhas-referencia{ display:flex; gap:22px; flex-wrap:wrap; }
.linhas-referencia div{ display:flex; flex-direction:column; gap:2px; }
.linhas-referencia span{ font-size:11px; color: var(--grafite-500); }
.linhas-referencia b{ font-size:15px; font-family: 'Courier New', monospace; letter-spacing:.03em; color: var(--azul-900); }

@media (max-width: 480px){
  .linhas-referencia{ gap:14px; }
}