/* =====================================================================
   INSTITUTO POLITÉCNICO COMUNITÁRIO FEMININO — style.css (v2)
   Baseado no index.html (modelo visual do site).

   Linguagem visual
   · Tipografia: DM Sans (h1 500, títulos 600, corpo 400, rótulos 600)
   · Neutros (como a Menzzo): fundo #fefefe, texto #1e1e1e, superfícies #f1f1f1 / #111, linhas a 14%
   · Acentos: ciano #3BCFDA · roxo #7B6CF6 · rosa #E0489B
     e o gradiente ciano→roxo→rosa (texto de destaque, palcos, números)
   · Formas: cantos 14 / 18 / 22 / 26, pílulas 999, botão em "chevron"
   · Design plano: linhas finas em vez de sombras; blocos invertidos
     (preto no claro, branco no escuro) para CTA e rodapé
   · Tema claro/escuro por :root[data-theme] (ou preferência do sistema)

   Organização
     01  Fontes, tokens, base e tipografia
     02  Componentes da página inicial (index)
     03  Estrutura da aplicação: barra do topo, gaveta, rodapé
     04  Botões, formulários, tabelas, etiquetas
     05  Cartões e painéis (dashboard, info-card, docentes, ...)
     06  Modais, popovers, notificações, definições
     07  Páginas: hero, page-header, login, contacto, inscrição
     08  Utilitários e comportamento (deslizáveis, reveal, animações)
     09  Ecrã de boas-vindas + logótipo animado
     10  Horas Extras (folha de cálculo — visual próprio, de propósito)
   ===================================================================== */

/* ------------------------------------------------------------------
   01 · FONTES
   DM Sans (como na Menzzo): ficheiros variáveis (pesos 100–1000),
   guardados em fonts/dm-sans/ — funciona offline.
   'Inter' e 'Poppins' continuam a ser referidas por CSS inline em
   algumas páginas; aqui ficam apontadas para o mesmo ficheiro, para
   tudo sair em DM Sans sem mexer nessas páginas.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('fonts/dm-sans/dm-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('fonts/dm-sans/dm-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 'Inter' e 'Poppins' (ainda referidas em CSS inline de algumas páginas)
   apontam para o mesmo ficheiro DM Sans. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/dm-sans/dm-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/dm-sans/dm-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  /* "block": não mostra nada antes de a fonte carregar, em vez de
     mostrar o nome do ícone em texto ("person_add") e depois saltar. */
  font-display: block;
  src: url('fonts/material-symbols/material-symbols-outlined.woff2') format('woff2');
}

/* ------------------------------------------------------------------
   01 · TOKENS
   ------------------------------------------------------------------ */
:root {
  /* — núcleo (igual ao index) — */
  color-scheme: light;
  --bg: #fefefe;
  --fg: #1e1e1e;
  --muted: #787878;                     /* = rgba(30,30,30,.6) sobre o fundo */
  --line: rgba(30, 30, 30, .14);
  --line-strong: rgba(30, 30, 30, .28);
  --surface: #f1f1f1;
  --surface-2: #e8e8e8;
  --invert-bg: #111111;
  --invert-fg: #fefefe;
  --accent: #3BCFDA;
  --accent-2: #E0489B;
  --accent-3: #7B6CF6;
  --on-accent: #001318;
  --grad: linear-gradient(92deg, #3BCFDA 0%, #7B6CF6 45%, #E0489B 100%);

  /* — estados (semânticos; as páginas também usam estes hex fixos) — */
  --ok: #16A34A;
  --warn: #D97706;
  --danger: #DC2626;
  --ok-text: #15803d;
  --warn-text: #b45309;
  --danger-text: #dc2626;
  --info-text: #5b4fd6;

  /* — medidas — */
  --maxw: 1520px;
  --gutter: clamp(16px, 4vw, 48px);
  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --topbar-h: 64px;
  --toggle: 40px;
  --drawer-w: 248px;
  --font: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* — nomes antigos (usados por páginas, scripts e CSS inline).
       Continuam a funcionar, mas já com a paleta nova. — */
  --azul: var(--fg);                    /* cor de título / rótulo / borda de destaque */
  --azul-escuro: var(--fg);
  --azul-medio: #2b2b33;
  --azul-claro: var(--accent-3);
  --dourado: var(--accent-2);           /* antigo destaque → rosa */
  --dourado-claro: #F4A9D0;
  --dourado-escuro: #B92F7C;
  --branco: #ffffff;                    /* branco puro, nunca muda com o tema */
  --superficie: var(--bg);
  --cinza-claro: var(--surface);
  --cinza: #6b6b6b;                     /* texto secundário (mais legível que --muted em tabelas) */
  --texto: var(--fg);
  --borda: var(--line);
  --card-bg: var(--bg);
  --card-blur: 0px;
  --sombra: 0 1px 0 rgba(0, 0, 0, .03);
  --sombra-hover: 0 18px 44px -18px rgba(0, 0, 0, .35);
  --radius: 0;
  --radius-sm: 0;
  --trans: all .25s var(--ease);

  /* — logótipo animado SUMMA (cores da marca, não do tema) — */
  --logo-navy-deep: #0a1f44;
  --logo-navy: #102a5e;
  --logo-blue: #1450c9;
  --logo-blue-bright: #2f8fe0;
  --logo-cyan: #22c3ee;
}

/* — tema escuro: preferência do sistema (se a página não forçar claro) — */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --fg: #ffffff;
    --muted: #8e8e8e;
    --line: rgba(255, 255, 255, .16);
    --line-strong: rgba(255, 255, 255, .34);
    --surface: #111111;
    --surface-2: #1b1b1b;
    --invert-bg: #ffffff;
    --invert-fg: #000000;
    --azul: #B9B1FF;
    --azul-medio: #d9d5ff;
    --cinza: #a3a3a3;
    --sombra: 0 1px 0 rgba(255, 255, 255, .04);
    --sombra-hover: 0 18px 44px -18px rgba(0, 0, 0, .95);
    --ok-text: #4ade80;
    --warn-text: #fbbf24;
    --danger-text: #f87171;
    --info-text: #b9b1ff;
  }
}
/* — tema escuro: escolha explícita (interruptor em Definições) — */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --fg: #ffffff;
  --muted: #8e8e8e;
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .34);
  --surface: #111111;
  --surface-2: #1b1b1b;
  --invert-bg: #ffffff;
  --invert-fg: #000000;
  --azul: #B9B1FF;
  --azul-medio: #d9d5ff;
  --cinza: #a3a3a3;
  --sombra: 0 1px 0 rgba(255, 255, 255, .04);
  --sombra-hover: 0 18px 44px -18px rgba(0, 0, 0, .95);
  --ok-text: #4ade80;
  --warn-text: #fbbf24;
  --danger-text: #f87171;
  --info-text: #b9b1ff;
}


/* ------------------------------------------------------------------
   01 · BASE
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip; /* "clip" não cria área de deslize — é o que permite o position: sticky (barra da pauta) no telemóvel */
  max-width: 100%;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  /* rodapé sempre no fundo, mesmo com pouco conteúdo */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
}
h1 { font-weight: 500; }
p { line-height: 1.5; text-align: justify; text-align-last: left; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; }
img, video { display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Ícones (Material Symbols) */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
}
.icon-inline { font-size: 1em; margin-right: .35rem; vertical-align: middle; }

.icon, .tag-icon, .dash-icon, .info-icon, .docente-modal-avatar,
.valor-icon, .docente-card-foto, .noticia-img {
  font-family: 'Material Symbols Outlined';
}
.icon, .tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
}
.icon-sm { width: 28px; height: 28px; font-size: 1rem; }
.tag-icon { width: 32px; height: 32px; font-size: 1rem; }

/* ------------------------------------------------------------------
   01 · TIPOGRAFIA E UTILITÁRIOS DE TEXTO (escala do index)
   ------------------------------------------------------------------ */
.h-xl { font-size: clamp(2.625rem, 7vw, 4.5rem); line-height: 1.1; font-weight: 500; letter-spacing: -.02em; }
.h-lg { font-size: clamp(1.625rem, 4vw, 2.5rem); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.1; font-weight: 600; }
.h-sm { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.15; font-weight: 600; }
.lead { font-size: clamp(1.05rem, 1.45vw, 1.45rem); line-height: 1.45; font-weight: 400; }
.small { font-size: .82rem; line-height: 1.5; }
.muted { color: var(--muted); }
.center { text-align: center; }
.measure { max-width: 64ch; margin-inline: auto; }
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 32px; }
.mt-l { margin-top: clamp(40px, 6vw, 72px); }

/* Texto em gradiente (destaque nos títulos e números) */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Contentores de largura (index) */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
/* variante estreita do .wrap — mesmo sistema de espaçamento (gutter) do
   resto do site, mas mais estreita para formulários e fluxos passo-a-passo
   (ex: Transição de Ano). Substitui a antiga .container-estreito, que não
   respeitava o alinhamento edge-to-edge nos ecrãs mais pequenos. */
.wrap-estreito { max-width: 900px; }
.section { padding-block: clamp(56px, 9vw, 130px); }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }

/* Compatibilidade com classes antigas de título/secção */
.container { max-width: 1280px; margin: 0 auto; }
.container-estreito { max-width: 900px; margin: 0 auto; } /* formulários e fluxos passo-a-passo, ex: Transição de Ano */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 6px 14px 6px 12px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-tag[data-icon]::before {
  content: attr(data-icon);
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 0;
}
.section-title {
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--fg);
  margin-bottom: 14px;
  line-height: 1.1;
}
.section-sub { font-size: 1rem; color: var(--cinza); max-width: 56ch; line-height: 1.45; margin-bottom: 36px; }
.circulo { position: relative; display: inline-block; }
.circulo::after {
  content: '';
  position: absolute;
  left: -8%; right: -8%; top: -10%; bottom: -8%;
  border: 3px solid var(--accent-2);
  border-radius: 50% 50% 48% 52% / 55% 48% 52% 45%;
  transform: rotate(-3deg);
  pointer-events: none;
}


/* ======================================================================
   02 · PÁGINA INICIAL (index.html) — componentes do modelo
   ====================================================================== */
:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.wrap { width: 100%; }
main { flex: 1 0 auto; }

/* ---------- botão base = "chevron" do index (cápsula + seta + rótulo) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.btn .cap { position: relative; width: 52px; height: 37px; flex: none; color: var(--accent); display: grid; place-items: center; }
.btn .cap svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.btn .cap .ico { position: relative; width: 15px; height: 15px; color: #001318; transition: transform .25s ease; }
.btn .label { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.btn:hover .cap .ico { transform: translateX(3px); }
.btn--lg .cap { width: 72px; height: 51px; }
.btn--lg .label { font-size: 1.1rem; }
.btn--pink .cap { color: var(--accent-2); }
.btn--pink .cap .ico { color: #fff; }

/* ---------- marca (também usada no rodapé, ver .fcol .brand) ---------- */
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.brand .mark { width: 38px; height: 38px; flex: none; }
.brand span { font-size: 1.02rem; max-width: 12ch; }

/* ---------- hero ---------- */
.crumbs { display: flex; gap: 10px; justify-content: center; align-items: center; font-size: .85rem; color: var(--muted); }
.hero { padding-top: clamp(40px, 7vw, 86px); }
.hero.center h1 { max-width: 20ch; margin-inline: auto; }
.stage {
  position: relative; border-radius: 0; overflow: hidden;
  aspect-ratio: 16/9; max-width: 1000px; margin-inline: auto;
  background: var(--grad);
  display: grid; place-items: center; isolation: isolate;
}
.stage::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 13px);
  mix-blend-mode: multiply;
}
.stage-quote {
  position: relative; z-index: 2; color: #fff; text-align: center; padding: 24px;
  font-size: clamp(1.3rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
  max-width: 16ch; text-wrap: balance;
}

/* ---------- pills ---------- */
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pills li { border: 1px solid var(--line); border-radius: 0; padding: 9px 18px; font-size: .93rem; }

/* ---------- parceiros ---------- */
.partners {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 0; overflow: hidden; grid-template-columns: repeat(2, 1fr);
}
.partners > div {
  background: var(--bg); display: grid; place-items: center; min-height: 96px; padding: 18px;
  font-weight: 600; letter-spacing: -.02em; color: var(--muted); text-align: center; font-size: .95rem;
}

/* ---------- cards de curso ---------- */
.courses { display: grid; gap: 14px; grid-template-columns: 1fr; }
.course { display: block; }
.course .thumb {
  position: relative; border-radius: 0; overflow: hidden; aspect-ratio: 4/3;
  display: grid; place-items: center; color: #fff;
}
.course .thumb > span:not(.arrow) {
  font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -.05em; opacity: .9;
}
.course .thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .05); transition: background .3s ease; }
.course:hover .thumb::after { background: rgba(0, 0, 0, .22); }
.t1 { background: linear-gradient(140deg, #3BCFDA, #2C7BE5); }
.t2 { background: linear-gradient(140deg, #7B6CF6, #E0489B); }
.t3 { background: linear-gradient(140deg, #F4A62A, #E0489B); }
.t4 { background: linear-gradient(140deg, #17C08B, #3BCFDA); }
.course .arrow {
  position: absolute; right: 14px; top: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #000; display: grid; place-items: center; transition: transform .3s ease;
}
.course:hover .arrow { transform: translate(3px, -3px); }
.course h3 { margin-top: 20px; }
.tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: .78rem; border: 1px solid var(--line); border-radius: 0; padding: 5px 12px; color: var(--muted); }

/* ---------- cards de dado (canto cortado) ---------- */
.stats { display: grid; gap: 12px; grid-template-columns: 1fr; }
.stats > .stat {
  position: relative; background: var(--surface); border-radius: 0; padding: clamp(28px, 3.2vw, 48px);
  min-height: 260px; display: flex; align-items: flex-end; overflow: hidden;
}
.stats > .stat::before {
  content: ""; position: absolute; top: 0; right: 0; width: 84px; height: 102px;
  background: var(--bg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}
.stats > .stat h3 { font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; }
.stat .n { font-weight: 800; letter-spacing: -.04em; }

/* ---------- caminhos (cards coloridos) ---------- */
.paths { display: grid; gap: 14px; grid-template-columns: 1fr; }
.path { border-radius: 0; padding: clamp(28px, 3vw, 44px); border: 1px solid transparent; display: flex; flex-direction: column; gap: 22px; }
.path--a { background: var(--accent); color: #001318; }
.path--b { background: var(--accent-2); color: #fff; }
.path--c { background: var(--surface); color: var(--fg); border-color: var(--line); }
.path svg.glyph { width: 42px; height: 42px; }
.path .btn { margin-top: auto; }
.path--a .cap { color: #001318; }
.path--a .cap .ico { color: var(--accent); }
.path--b .cap { color: #fff; }
.path--b .cap .ico { color: var(--accent-2); }

/* ---------- faixa de inscrição (bloco invertido) ---------- */
.cta-band { background: var(--invert-bg); color: var(--invert-fg); border-radius: 0; padding: clamp(32px, 5vw, 72px); }
.cta-band .row { display: grid; gap: 28px; }
.cta-band .form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cta-band .form input {
  flex: 1 1 260px; min-width: 0; background: transparent; border: 1px solid rgba(128, 128, 128, .5);
  color: inherit; border-radius: 0; padding: 15px 22px; font: inherit;
}
.cta-band .form input::placeholder { color: rgba(150, 150, 150, .9); }
.cta-band .form input:focus { border-color: var(--accent); box-shadow: none; }

/* ---------- rodapé do index ---------- */
.footer { background: var(--invert-bg); color: var(--invert-fg); border-radius: 0; padding: clamp(32px, 4.5vw, 64px); margin-bottom: clamp(20px, 3vw, 40px); }
.fgrid { display: grid; gap: 40px; grid-template-columns: 1fr; }
.fcol h4 { line-height: 1.5; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; font-weight: 700; }
.flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .98rem; }
.flist a:hover { text-decoration: underline; text-underline-offset: 3px; }
.flist .sub { display: block; color: var(--muted); font-size: .86rem; }
.footer .legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(128, 128, 128, .35); display: grid; gap: 14px; color: var(--muted); }

@media (max-width: 640px) {
  .brand span { display: none; }
}
@media (min-width: 700px) {
  .partners { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .courses { grid-template-columns: repeat(2, 1fr); }
  .cta-band .row { grid-template-columns: 1.1fr 1fr; align-items: end; }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .partners { grid-template-columns: repeat(5, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .courses { grid-template-columns: repeat(3, 1fr); }
  .course--wide { grid-column: span 2; }
  .course--wide .thumb { aspect-ratio: 16/9; }
  .paths { grid-template-columns: repeat(3, 1fr); }
  .fgrid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer .legal { grid-template-columns: 1fr 2fr; gap: 40px; }
}


/* ======================================================================
   03 · ESTRUTURA DA APLICAÇÃO
   <a.top-brand> + <button.home-sidebar-toggle> flutuam sobre uma barra
   de vidro fixa (o ::before do .app-shell). O <header> (sem classe) é a
   gaveta de navegação: começa escondida à esquerda em QUALQUER ecrã e
   abre por cima do conteúdo (script.js alterna .sidebar-aberta no
   header e no body). A partir de 1024px, esta mesma gaveta vira a
   navbar de computador (ver bloco mais abaixo) — é o único <header> do
   site; o index e o sobre deixaram de ter uma barra própria (unificado
   em 23/09).
   ====================================================================== */
:root {
  --pad: clamp(16px, 3.2vw, 40px);
  --grad-v: linear-gradient(180deg, #3BCFDA 0%, #7B6CF6 50%, #E0489B 100%);
}
@media (max-width: 480px) {
  :root { --topbar-h: 58px; --toggle: 36px; }
}

.app-shell { display: flex; align-items: flex-start; flex: 1 0 auto; }

/* barra de vidro fixa por trás da marca e do botão de menu */
.app-shell::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--bg);
  
  border-bottom: 1px solid var(--line);
  z-index: 2010;
  pointer-events: none;
}

/* marca (logótipo + nome) — sempre visível, à esquerda */
.top-brand {
  position: fixed;
  top: calc((var(--topbar-h) - var(--toggle)) / 2);
  left: var(--pad);
  z-index: 2050;
  height: var(--toggle);
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  transition: var(--trans);
}
.top-brand:hover { opacity: .8; }
.top-brand-icon {
  width: calc(var(--toggle) - 6px);
  height: calc(var(--toggle) - 6px);
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px;
  flex-shrink: 0;
}
.top-brand-text {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--fg);
  white-space: normal; /* nome completo da instituição: quebra em 2 linhas */
  max-width: min(58vw, 300px);
}
@media (max-width: 380px) { .top-brand-text { font-size: .7rem; } }

/* botão de 3 barras — abre/fecha a gaveta */
.home-sidebar-toggle {
  position: fixed;
  top: calc((var(--topbar-h) - var(--toggle)) / 2);
  right: var(--pad);
  z-index: 2100;
  width: var(--toggle);
  height: var(--toggle);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: var(--trans);
}
.home-sidebar-toggle:hover { border-color: var(--fg); }
.home-sidebar-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--fg);
  border-radius: 0;
  transition: var(--trans);
  transform-origin: center;
}
.home-sidebar-toggle.aberto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.home-sidebar-toggle.aberto span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.home-sidebar-toggle.aberto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* o hamburger antigo (dentro da gaveta) nunca aparece: só existe UM controlo de menu */
.hamburger { display: none !important; }

/* ---------- gaveta de navegação ---------- */
header:not(.header) {
  position: fixed;
  top: 0; left: 0;
  width: var(--drawer-w);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 2000;
  background: var(--bg);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .32s var(--ease);
}
header:not(.header).sidebar-aberta { transform: translateX(0); }

.nav-container {
  width: 100%;
  height: 100%;
  padding: calc(var(--topbar-h) + 14px) 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* o logótipo interno ficaria duplicado com a marca fixa */
header:not(.header) .logo { display: none; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 38px; height: 38px; object-fit: contain; border-radius: 50%; background: #fff; border: 1px solid var(--line); padding: 4px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; min-width: 0; }
.logo-text strong { font-size: 1rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; color: var(--fg); white-space: normal; }
.logo-text span { font-size: .68rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }

:where(header:not(.header)) nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
:where(header:not(.header)) nav ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
  flex: 1;
}
:where(header:not(.header)) nav ul li { width: 100%; flex-shrink: 0; }
:where(header:not(.header)) nav ul li a:not(.btn-login) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  color: var(--fg);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.01em;
  border-radius: 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}
:where(header:not(.header)) nav ul li a:not(.btn-login):hover { background: var(--surface); }
:where(header:not(.header)) nav ul li a.active:not(.btn-login) { background: var(--surface); font-weight: 700; }
:where(header:not(.header)) nav ul li a.active:not(.btn-login)::before {
  content: '';
  position: absolute;
  left: 0; top: 11px; bottom: 11px;
  width: 3px;
  border-radius: 0;
  background: var(--grad-v);
}

/* ---------- itens da nav com sub-secções (mega-menu flutuante) ----------
   Usado em "Área Administrativa" e "Área do Professor". O <ul class="nav-submenu">
   começa dentro do <li>, mas o script.js move-o para o fim do <body> assim
   que a página carrega — a gaveta (header) tem overflow:hidden + transform,
   por isso qualquer coisa presa lá dentro fica sempre cortada e nunca
   conseguiria flutuar por cima do conteúdo. Já fora da gaveta, o painel é
   posicionado (position:fixed, coordenadas calculadas em JS) ao lado do
   item, por cima do conteúdo da página — é suposto tapar temporariamente
   o que estiver por baixo, tal como nos "tiles" da Área Administrativa. */
.nav-tem-submenu { display: flex; flex-direction: column; }
.nav-item-principal { display: flex; align-items: center; width: 100%; }
.nav-tem-submenu .nav-item-principal a { flex: 1; min-width: 0; width: auto; }
.nav-submenu-toggle {
  flex-shrink: 0;
  width: 34px; height: 34px;
  margin-right: 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0;
  color: var(--muted); cursor: pointer;
  transition: var(--trans);
}
.nav-submenu-toggle:hover { background: var(--surface); color: var(--fg); }
.nav-submenu-toggle svg { transition: transform .25s var(--ease); }
.nav-tem-submenu.aberto .nav-submenu-toggle svg { transform: rotate(90deg); }

.nav-submenu {
  position: fixed;
  z-index: 3000;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 260px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  margin: 0;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--sombra-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  pointer-events: none;
}
.nav-submenu.aberto { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-submenu li { width: 100%; }
.nav-submenu li a:not(.btn-login) {
  min-height: 38px !important;
  padding: 0 10px !important;
  font-size: .86rem !important;
  font-weight: 500 !important;
  color: var(--fg) !important;
  border-radius: 0 !important;
}
.nav-submenu li a:not(.btn-login):hover { background: var(--surface) !important; }
/* ícone de cada opção dentro do painel — dá a leitura tipo organograma */
.nav-submenu-icon { font-size: 17px !important; margin-right: 9px; color: var(--muted); flex-shrink: 0; }
.nav-submenu li a:hover .nav-submenu-icon,
.nav-submenu-grupo.aberto > .nav-item-principal .nav-submenu-icon { color: var(--accent); }

/* ---- grupo de 2º nível dentro do painel (ex: "Financeiro") ----
   Não é um link: é ele próprio um gatilho de mega-menu (reaproveita
   .nav-tem-submenu / .nav-item-principal / .nav-submenu-toggle), que ao
   passar o mouse abre UM SEGUNDO painel flutuante ao lado, com as suas
   sub-opções — estas ficam escondidas até esse hover, tal como pedido. */
.nav-submenu-grupo { margin-top: 2px; }
.nav-submenu-grupo-rotulo {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--fg);
  border-radius: 0;
  cursor: default;
}
.nav-submenu-grupo:hover > .nav-item-principal > .nav-submenu-grupo-rotulo,
.nav-submenu-grupo.aberto > .nav-item-principal > .nav-submenu-grupo-rotulo { background: var(--surface); }
.nav-submenu-grupo .nav-submenu-toggle svg { transform: rotate(0deg); }
.nav-submenu-grupo:hover .nav-submenu-toggle svg,
.nav-submenu-grupo.aberto .nav-submenu-toggle svg { transform: rotate(90deg); color: var(--accent); }

/* painel do 2º nível: mesma cara do painel principal, mas ligeiramente
   mais estreito e com uma "seta" a apontar para o grupo que o abriu —
   reforça a leitura de organograma (ramo a sair do item-mãe). */
.nav-submenu-nivel2 { width: 230px; padding: 8px; }
.nav-submenu-nivel2::before {
  content: '';
  position: absolute;
  left: -6px; top: 16px;
  width: 11px; height: 11px;
  background: var(--bg);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
  border-radius: 0;
}
.nav-submenu-nivel2.nav-submenu-abaixo::before { display: none; }

/* zona de baixo: quem está logado + definições + Login/Sair */
#nav-login-item {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.user-status { align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; }
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
  animation: acsStatusPulse 2s ease-in-out infinite;
}
@keyframes acsStatusPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .06); }
}
.user-status-name { font-size: .82rem; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.btn-login {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .92rem;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0;
  border: 0;
  cursor: pointer;
  transition: var(--trans);
}
.btn-login:hover { background: color-mix(in srgb, var(--accent) 82%, #000); transform: translateY(-1px); }
#nav-login-item.logado .btn-login { width: auto; flex-shrink: 0; padding: 10px 18px; }

/* botão "Definições" (injectado por definicoes.js) */
.acs-settings-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  transition: var(--trans);
}
.acs-settings-btn:hover { border-color: var(--fg); background: var(--surface); }
.acs-settings-btn .material-symbols-outlined { font-size: 20px; }

/* grupo dos 3 ícones (Definições + Mensagens + Notificações), sempre
   juntos e na mesma ordem, à esquerda do avatar/nome — ver
   _acsGetIconsGroup em auth-guard.js */
.acs-nav-icons { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }

/* linha vertical fina entre os grupos de #nav-login-item:
   [ícones] | [Sair] */
.acs-nav-divider {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--line);
  flex-shrink: 0;
}

/* ---------- conteúdo ---------- */
.main-content {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding-top: var(--topbar-h);
  padding-bottom: 8px;
  transition: margin-left .32s var(--ease);
}
.main-content section { padding-block: clamp(24px, 4vw, 48px); }
.main-content .container { padding-inline: var(--pad); max-width: calc(1280px + 2 * var(--pad)); } /* mesmo eixo do .page-header-inner */

/* com a gaveta aberta (computador), o conteúdo desliza para a direita */
@media (min-width: 769px) {
  header.sidebar-aberta ~ .main-content { margin-left: var(--drawer-w); }
  body.sidebar-aberta footer:not(.wrap) { margin-left: calc(var(--drawer-w) + var(--pad)); }
  header.sidebar-aberta ~ .main-content .admin-modal-overlay,
  header.sidebar-aberta ~ .main-content .docente-modal-overlay { left: var(--drawer-w); }
}
footer:not(.wrap), .main-content { transition: margin-left .32s var(--ease); }

/* telemóvel/tablet estreito: a gaveta cobre parte do ecrã, sem empurrar */
@media (max-width: 768px) {
  .app-shell { display: block; }
  header:not(.header) { width: min(84vw, 320px); border-radius: 0; }
  :where(header:not(.header)) nav ul li a:not(.btn-login) { min-height: 42px; }
}

/* ---------- a partir de 1024px: a gaveta deixa de ser gaveta e vira navbar ----------
   Antes vivia copiada à mão (21 regras) em 7 páginas diferentes — cada uma
   com o mesmo comentário "fica isolado nesta página". Centralizado aqui
   em 23/09 para chegar a TODAS as páginas que ligam este ficheiro,
   incluindo as que nunca tinham recebido a cópia (login.html,
   transicao-ano.html) e o index/sobre, que agora usam este mesmo
   <header> em vez de uma barra própria. */
@media (min-width: 1024px) {
  :root { --topbar-h: 78px; --nav-edge: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }

  /* a marca fixa, o botão de 3 barras e a barra de vidro deixam de fazer sentido */
  .top-brand, .home-sidebar-toggle, .app-shell::before { display: none; }

  /* position: sticky precisa que o body não seja "scroll container" */
  html, body { overflow-x: clip; }

  .app-shell { display: block; }
  .main-content { padding-top: 0; }

  /* o header sai da gaveta: barra de ponta a ponta, colada ao topo */
  .app-shell > header:not(.header),
  .app-shell > header:not(.header).sidebar-aberta {
    position: sticky; top: 0; left: auto;
    width: 100%; height: auto; overflow: visible;
    transform: none; transition: none;
    /* Sólido (var(--bg) a 100%), não translúcido: antes, o efeito de
       vidro (86% + blur) deixava o header com um tom acinzentado/em
       gradiente consoante o que estivesse por trás a fazer scroll —
       agora fica sempre branco (ou preto, no tema escuro), em todas
       as secções e subsecções. */
    background: var(--bg);
    border-right: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  }

  /* conteúdo da barra: mesmo eixo lateral do .wrap, altura sempre igual
     (--topbar-h) — assim os modais, popovers e o scroll-padding batem certo */
  .app-shell > header:not(.header) .nav-container {
    max-width: var(--maxw); margin: 0 auto;
    height: var(--topbar-h); min-height: 0;
    padding: 0 var(--gutter);
    flex-direction: row; align-items: center; gap: 0 16px;
  }
  .app-shell > header:not(.header) .logo { display: flex; flex-shrink: 0; }
  /* só o ícone do logótipo até haver largura para o nome (ver 1500px) */
  .app-shell > header:not(.header) .logo-text { display: none; }

  .app-shell > header:not(.header) nav {
    flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; overflow: visible;
  }
  /* uma só linha, sempre. Se um perfil tiver tantos links que não caibam
     (ex: Administrador em janelas estreitas), a lista desliza na horizontal
     em vez de quebrar para uma 2ª linha e tapar o conteúdo. */
  .app-shell > header:not(.header) nav ul {
    flex: 1 1 auto; min-width: 0; width: auto;
    flex-direction: row; flex-wrap: nowrap; align-items: center;
    gap: 2px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .app-shell > header:not(.header) nav ul::-webkit-scrollbar { display: none; }
  /* espaçador: encosta os links à direita quando sobra espaço e deixa
     de contar quando não sobra (ao contrário de justify-content: flex-end) */
  .app-shell > header:not(.header) nav ul::before { content: ''; margin-left: auto; }
  .app-shell > header:not(.header) nav ul li { width: auto; flex: 0 0 auto; }
  .app-shell > header:not(.header) nav ul li a:not(.btn-login) {
    width: auto; min-height: 0; padding: 8px 8px; border-radius: 0;
    background: none; border-bottom: 1px solid transparent;
    font-size: .84rem; white-space: nowrap;
  }
  .app-shell > header:not(.header) nav ul li a:not(.btn-login):hover,
  .app-shell > header:not(.header) nav ul li a.active:not(.btn-login) { background: none; border-bottom-color: var(--fg); }
  .app-shell > header:not(.header) nav ul li a.active:not(.btn-login)::before { content: none; }

  /* Login / estado do utilizador: encostado à direita, sempre visível
     mesmo quando a lista de links desliza */
  .app-shell > header:not(.header) #nav-login-item {
    position: sticky; right: 0; z-index: 1;
    width: auto; margin: 0 0 0 8px; padding: 0 0 0 12px; border-top: 0;
    background: var(--bg); box-shadow: -14px 0 12px -6px var(--bg);
  }
  .app-shell > header:not(.header) #nav-login-item .btn-login { width: auto; padding: 9px 18px; }
  .app-shell > header:not(.header) .user-status { flex: 0 1 auto; max-width: 150px; }
  .app-shell > header:not(.header) .user-status-name { display: none; }

  /* ícones de mensagens/notificações (só Admin): vivem dentro do grupo
     flex .acs-nav-icons, já não precisam de deslocamento manual (right) */
  body:has(.acs-header-icon) .app-shell > header:not(.header) .nav-container {
    padding-right: calc(var(--gutter) + (var(--toggle) + 10px) * 2);
  }

  /* a gaveta já não empurra nada, mesmo que o script.js a marque como aberta */
  .app-shell > header.sidebar-aberta ~ .main-content { margin-left: 0; }
  .app-shell > header.sidebar-aberta ~ .main-content .admin-modal-overlay,
  .app-shell > header.sidebar-aberta ~ .main-content .docente-modal-overlay { left: 0; }
  body.sidebar-aberta footer:not(.wrap) { margin-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
}
/* um pouco mais de respiro nos links */
@media (min-width: 1280px) {
  .app-shell > header:not(.header) nav ul li a:not(.btn-login) { padding: 8px 10px; font-size: .88rem; }
}
/* com esta largura já cabem o nome da escola e o nome do utilizador */
@media (min-width: 1500px) {
  .app-shell > header:not(.header) .logo-text { display: flex; }
  /* o nome do utilizador fica sempre escondido na barra (só o avatar/iniciais aparece) */
}

/* ---------- rodapé da aplicação (bloco invertido, como no index) ---------- */
footer:not(.wrap) {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin: 0 var(--pad) var(--pad);
  padding: 28px clamp(20px, 3vw, 40px) 20px;
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-radius: 0;
  overflow: visible;
}
footer .footer-grid, footer .footer-bottom { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.footer-grid {
  width: 100%;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.footer-brand p { font-size: .92rem; line-height: 1.45; margin: 8px 0 12px; max-width: 42ch; color: var(--muted); }
.footer-brand .logo-text strong { color: var(--invert-fg); }
.footer-brand .logo-text span { color: var(--muted); }
.footer-col h4 { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { font-size: .95rem; color: var(--invert-fg); transition: var(--trans); }
.footer-col ul li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid rgba(128, 128, 128, .35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--muted);
}
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
/* Botões sociais: quadrado arredondado escuro; ao passar o rato ganha a cor
   da rede e o ícone entra por cima (adaptado de um componente Uiverse). */
.social-link {
  --brand: var(--accent);
  width: 44px; height: 44px;
  border-radius: 0;
  background: var(--fg); color: var(--bg);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: background .3s ease, transform .2s ease, box-shadow .3s ease;
}
.social-link:hover, .social-link:focus-visible {
  background: var(--brand); color: #fff;
  box-shadow: 0 10px 22px -10px var(--brand);
}
.social-link:active { transform: scale(.92); }
.social-link svg { display: block; }
.social-link:hover svg, .social-link:focus-visible svg { animation: social-slide-in .3s both; }
@keyframes social-slide-in {
  from { transform: translateY(-36px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.social-link--facebook  { --brand: #1877F2; }
.social-link--linkedin  { --brand: #0A66C2; }
.social-link--youtube   { --brand: #E62117; }
.social-link--email     { --brand: var(--accent-3); }
.social-link--whatsapp  { --brand: #128C7E; }
.social-link--instagram { --brand: #D62976; }
/* No rodapé (fundo escuro) os botões partem de um tom translúcido. */
.footer .social-link { background: rgba(255, 255, 255, .12); color: #fff; }
.footer .social-link:hover, .footer .social-link:focus-visible { background: var(--brand); }
.footer .social-links { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) {
  .social-link:hover svg, .social-link:focus-visible svg { animation: none; }
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { text-align: center; justify-content: center; }
}


/* ======================================================================
   04 · BOTÕES, FORMULÁRIOS, TABELAS, ETIQUETAS
   ====================================================================== */

/* ---------- botões de acção da aplicação (pílula, plana) ---------- */
.btn-primary, .btn-azul, .btn-outline, .btn-outline-azul {
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 0;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1;
  text-align: center;
  transition: var(--trans);
}
.btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent-2) 86%, #000); border-color: color-mix(in srgb, var(--accent-2) 86%, #000); transform: translateY(-1px); }
.btn-azul { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg); }
.btn-azul:hover { background: color-mix(in srgb, var(--invert-bg) 80%, var(--bg)); transform: translateY(-1px); }
/* contorno: herda a cor do sítio onde está (funciona em fundo claro, escuro ou blocos invertidos) */
.btn-outline, .btn-outline-azul { background: transparent; color: inherit; border-color: var(--line-strong); }
.btn-outline:hover, .btn-outline-azul:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: currentColor;
  transform: translateY(-1px);
}
.btn[disabled], .btn:disabled, .btn-login:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- formulários ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
.form-grid-compacto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 16px; }
.form-grid-compacto .form-group { gap: 6px; }
.form-grid-compacto label { font-size: .75rem; }
.form-grid-compacto input, .form-grid-compacto select { padding: 9px 12px; font-size: .82rem; }
.di-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; }
.di-form-grid .form-group { gap: 4px; }
.di-form-grid label { font-size: .72rem; }
.di-form-grid input, .di-form-grid select { padding: 8px 10px; font-size: .78rem; }
@media (min-width: 1100px) { .di-form-grid { grid-template-columns: repeat(4, 1fr); } }

label { font-size: .82rem; font-weight: 600; color: var(--fg); letter-spacing: -.005em; }

/* :where() → especificidade zero: qualquer regra de página sobrepõe estas sem esforço */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]), textarea, select) {
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: inherit;
  font-size: .92rem;
  color: var(--fg);
  background: var(--bg);
  transition: var(--trans);
  outline: none;
}
:where(input, textarea, select):focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
}
:where(input, textarea, select):disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent-2); }
textarea { resize: vertical; min-height: 120px; }
select { max-width: 100%; }

/* campo de senha com "olho" (script.js embrulha os <input type=password>) */
.acs-campo-senha-wrap { position: relative; display: block; width: 100%; }
.acs-campo-senha-wrap input { width: 100%; padding-right: 44px !important; }
.acs-btn-mostrar-senha {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 6px; margin: 0; cursor: pointer;
  color: var(--cinza); display: flex; align-items: center; line-height: 0;
}
.acs-btn-mostrar-senha .material-symbols-outlined { font-size: 20px; }
.acs-btn-mostrar-senha:hover { color: var(--fg); }

.forgot-link { font-size: .78rem; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.forgot-link:hover { text-decoration-color: currentColor; }

/* selector de forma de pagamento / presença (quadradinhos clicáveis) */
.metodo-pagamento-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 6px; }
.metodo-pagamento-btn, .presenca-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: var(--trans);
  text-align: center;
}
.metodo-pagamento-btn { flex-direction: column; gap: 6px; padding: 14px 8px; font-size: .8rem; }
.metodo-pagamento-btn .material-symbols-outlined { font-size: 22px; color: var(--muted); transition: var(--trans); }
.presenca-toggle-btn { display: inline-flex; flex-direction: row; gap: 5px; padding: 5px 12px; font-size: .75rem; white-space: nowrap; border-radius: 0; }
.presenca-toggle-btn .material-symbols-outlined { font-size: 15px; color: var(--muted); transition: var(--trans); }
.metodo-pagamento-btn:hover, .presenca-toggle-btn:hover { border-color: var(--fg); }
.metodo-pagamento-btn.seleccionado, .presenca-toggle-btn.seleccionado { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg); }
.metodo-pagamento-btn.seleccionado .material-symbols-outlined,
.presenca-toggle-btn.seleccionado .material-symbols-outlined { color: var(--accent); }

/* ---------- tabelas ---------- */
.table-wrapper {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; }
.table-wrapper table { min-width: 100%; }
thead { background: var(--surface); }
thead th {
  padding: 12px 14px;
  color: var(--fg);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.005em;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
tbody tr { border-bottom: 1px solid var(--line); transition: background .2s var(--ease); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface); }
tbody td { padding: 11px 14px; font-size: .9rem; color: var(--fg); }
@media (max-width: 768px) { .table-wrapper table { min-width: 560px; } }
@media (max-width: 480px) {
  thead th { padding: 11px 12px; font-size: .72rem; }
  tbody td { padding: 10px 12px; font-size: .82rem; }
}

/* ---------- etiquetas, estados, notas ---------- */
.badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 0; font-size: .75rem; font-weight: 700; }
.badge-verde { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-text); }
.badge-amarelo { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-text); }
.badge-vermelho { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger-text); }
.badge-azul { background: color-mix(in srgb, var(--accent-3) 15%, transparent); color: var(--info-text); }
/* "Expulso": mais escuro que "Desistente" (carácter disciplinar) */
.badge-escuro { background: color-mix(in srgb, #7f1d1d 18%, transparent); color: var(--danger-text); border: 1px solid color-mix(in srgb, var(--danger-text) 45%, transparent); }

.tag { display: inline-flex; padding: 4px 12px; border-radius: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--line); }
.tag-azul { border-color: color-mix(in srgb, var(--accent-3) 45%, transparent); color: var(--info-text); }
.tag-dourado { border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); color: var(--accent-2); }
.tag-verde { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok-text); }
.disciplina { display: inline-block; border: 1px solid var(--line); color: var(--cinza); padding: 4px 14px; border-radius: 0; font-size: .75rem; font-weight: 600; }

.nota-alta { color: var(--ok-text); font-weight: 700; }
.nota-media { color: var(--warn-text); font-weight: 700; }
.nota-baixa { color: var(--danger-text); font-weight: 700; }
.freq-barra { height: 8px; background: var(--surface-2); border-radius: 0; overflow: hidden; min-width: 80px; }
.freq-fill { height: 100%; background: var(--grad); border-radius: 0; }

/* utilitários de cor usados por páginas e scripts (antes remendos do modo escuro) */
.txt-azul-escuro, .acs-azul-titulo, .acs-azul-cta { color: var(--fg); }
.borda-azul-escuro, .acs-azul-cta-borda { border-color: var(--fg); }


/* ======================================================================
   05 · CARTÕES E PAINÉIS
   Receita do index: fundo --surface sem sombra, ou fundo transparente
   com linha fina; cantos 18–22px; ícones num quadrado/círculo simples;
   destaque de cor só no que é importante (número, barra, ícone).
   ====================================================================== */

/* ---------- dashboard (Área dos Pais) ---------- */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 40px; }
.dash-card {
  --c: var(--accent);
  position: relative;
  background: var(--surface);
  border-radius: 0;
  padding: 26px 24px 22px;
  overflow: hidden;
  transition: var(--trans);
}
.dash-card::before { content: ''; position: absolute; left: 24px; top: 0; width: 44px; height: 4px; border-radius: 0; background: var(--c); }
.dash-card:hover { transform: translateY(-3px); }
.dash-card.azul { --c: var(--accent-3); }
.dash-card.dourado { --c: var(--accent-2); }
.dash-card.verde { --c: var(--ok); }
.dash-card.vermelho { --c: var(--danger); }
.dash-card .dash-icon { font-size: 26px; margin-bottom: 12px; color: var(--c); }
.dash-card h4 { font-size: .82rem; color: var(--cinza); font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.dash-card .dash-val { font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-card .dash-sub { font-size: .75rem; color: var(--cinza); margin-top: 8px; }

/* ---------- cartões-resumo do painel (.admin-stat-card) ---------- */
.prof-dash-saudacao { font-size: .68rem; }
.prof-dash-avatar-wrap { position: relative; flex-shrink: 0; }
.prof-dash-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--cinza); overflow: hidden;
}
.prof-dash-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-dash-avatar-dot {
  position: absolute; bottom: 0; right: 0; width: 13px; height: 13px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--bg); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
  animation: acsStatusPulse 2s ease-in-out infinite;
}
.admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; margin-bottom: 0; grid-area: stats; min-width: 0; }
.admin-stat-card {
  position: relative;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  padding: 14px 16px 13px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  overflow: hidden;
}
.admin-stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.admin-stat-icon {
  width: 32px; height: 32px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon, var(--acc, var(--fg)));
  color: #fff; flex-shrink: 0;
}
.admin-stat-icon .material-symbols-outlined { font-size: 17px; }
.admin-stat-dots { color: var(--muted); font-size: 18px; line-height: 1; }
.admin-stat-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; min-width: 0; }
.admin-stat-text { min-width: 0; }
.admin-stat-card h4 { color: var(--cinza); font-size: .7rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-stat-val { font-weight: 800; font-size: 1.45rem; letter-spacing: -.04em; line-height: 1; color: var(--fg); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-stat-spark { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.admin-stat-spark svg { width: 48px; height: 20px; display: block; }
.admin-stat-spark path { fill: none; stroke: var(--icon, var(--acc, var(--fg))); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-stat-sub { font-size: .6rem; font-weight: 700; color: var(--icon, var(--acc, var(--cinza))); white-space: nowrap; }

/* cartão "caderneta" que alterna entre trimestres/turmas */
.caderneta-progress-dots { display: flex; align-items: center; gap: 4px; }
.cpd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); transition: var(--trans); }
.cpd-dot.cpd-activo { width: 12px; border-radius: 0; background: var(--icon, var(--acc, var(--fg))); }
.admin-stat-card--caderneta .admin-stat-val,
.admin-stat-card--caderneta h4,
.admin-stat-card--caderneta .admin-stat-sub { transition: opacity .25s ease; }
.admin-stat-card--caderneta.a-mudar-trimestre .admin-stat-val,
.admin-stat-card--caderneta.a-mudar-trimestre h4,
.admin-stat-card--caderneta.a-mudar-trimestre .admin-stat-sub,
.admin-stat-card--caderneta.a-mudar-turma .admin-stat-val,
.admin-stat-card--caderneta.a-mudar-turma h4,
.admin-stat-card--caderneta.a-mudar-turma .admin-stat-sub { opacity: 0; }
@media (max-width: 900px) {
  .admin-stats-grid { gap: 6px; }
  .admin-stat-card { padding: 10px 10px 9px; gap: 9px; }
  .admin-stat-icon { width: 26px; height: 26px; }
  .admin-stat-icon .material-symbols-outlined { font-size: 15px; }
  .admin-stat-card h4 { font-size: .6rem; }
  .admin-stat-val { font-size: 1.1rem; }
  .admin-stat-spark svg { width: 38px; height: 16px; }
  .admin-stat-sub { font-size: .5rem; }
}
@media (max-width: 700px) {
  .admin-stats-grid { gap: 6px; margin-top: 10px; }
  .admin-stat-card { padding: 14px 12px 12px; border-radius: 0; gap: 10px; }
  .admin-stat-dots { display: none; }
  .admin-stat-bottom { flex-wrap: wrap; align-items: flex-start; gap: 4px 6px; }
  .admin-stat-spark { align-items: flex-start; }
  .admin-stat-spark svg { width: 36px; height: 15px; }
  .admin-stat-sub { font-size: .47rem; }
  .admin-stat-icon { width: 30px; height: 30px; }
  .admin-stat-card h4 { font-size: .68rem; }
  .admin-stat-val { font-size: 1.3rem; margin-bottom: 2px; }
  .prof-dash-saudacao { display: none; }
  .prof-dash-avatar { width: 44px; height: 44px; font-size: 19px; }
}
@media (max-width: 480px) {
  .admin-stat-card { padding: 11px 10px 10px; }
  .admin-stat-icon { width: 26px; height: 26px; }
  .admin-stat-icon .material-symbols-outlined { font-size: 15px; }
  .admin-stat-card h4 { font-size: .6rem; }
  .admin-stat-val { font-size: 1.1rem; }
  .admin-stat-spark svg { width: 30px; height: 13px; }
  .admin-stat-sub { font-size: .42rem; }
}

/* ---------- info-card: cartão de acção/navegação ---------- */
.info-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.info-card {
  background: var(--surface);
  border-radius: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-align: left;
  border: 0;
  cursor: pointer;
  transition: var(--trans);
}
.info-card:hover { transform: translateY(-4px); }
.info-card-top {
  background: var(--grad);
  padding: 34px 24px 28px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  isolation: isolate;
}
.info-card-top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 13px); mix-blend-mode: multiply; }
.info-card-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg); color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-card-icon svg { width: 32px; height: 32px; }
.info-card-body { padding: 24px 22px 26px; flex-grow: 1; display: flex; flex-direction: column; }
.info-card-body h3 { color: var(--fg); font-size: 1.15rem; margin-bottom: 10px; }
.info-card-body p { color: var(--cinza); font-size: .9rem; line-height: 1.45; margin-bottom: 20px; flex-grow: 1; }
.info-card-badge { display: inline-block; font-weight: 700; font-size: .8rem; margin-bottom: 12px; color: var(--fg); }
.info-card-body .btn { width: 100%; justify-content: center; text-align: center; pointer-events: none; }

/* ---------- missão / valores / notícias / professores / eventos ---------- */
.sobre-section { background: var(--surface); }
.sobre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* estas grelhas são carrosséis horizontais com encaixe (scroll-snap) */
.noticias-grid, .eventos-grid, .professores-grid, .depoimentos-grid, .valores-grid {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 8px 4px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.noticias-grid::-webkit-scrollbar, .eventos-grid::-webkit-scrollbar, .professores-grid::-webkit-scrollbar,
.depoimentos-grid::-webkit-scrollbar, .valores-grid::-webkit-scrollbar { height: 6px; }
.noticias-grid::-webkit-scrollbar-thumb, .eventos-grid::-webkit-scrollbar-thumb, .professores-grid::-webkit-scrollbar-thumb,
.depoimentos-grid::-webkit-scrollbar-thumb, .valores-grid::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; }

.noticia-card, .evento-card, .professor-card, .depoimento-card, .valor-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 0;
  transition: var(--trans);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.noticia-card:hover, .evento-card:hover, .professor-card:hover, .depoimento-card:hover, .valor-card:hover { transform: translateY(-4px); }
.noticia-card.selected, .evento-card.selected, .professor-card.selected, .depoimento-card.selected, .valor-card.selected {
  border-color: var(--fg); background: var(--bg); transform: scale(1.03) translateY(-6px); z-index: 2;
}
@media (max-width: 480px) { .noticia-card, .professor-card, .valor-card { flex: 0 0 80vw; } }
@media (max-width: 380px) { .noticia-card, .professor-card, .valor-card { flex: 0 0 84vw; } }

.valores-grid .valor-card, .valor-card { padding: 24px; }
.valor-card::before { content: ""; position: absolute; top: 0; right: 0; width: 56px; height: 68px; background: var(--bg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); }
.valor-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--bg); border-radius: 0; margin-bottom: 16px; }
.valor-card h4 { font-size: 1.05rem; color: var(--fg); margin-bottom: 6px; }
.valor-card p { font-size: .88rem; color: var(--cinza); line-height: 1.45; }
.valor-card .valor-lista { list-style: disc; padding-left: 18px; font-size: .88rem; color: var(--cinza); line-height: 1.5; }

.noticia-img { width: 100%; height: 180px; object-fit: cover; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 42px; color: #fff; }
.noticia-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.noticia-meta { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.noticia-date { font-size: .75rem; color: var(--cinza); font-weight: 500; position: relative; padding-left: 22px; }
.noticia-date::before {
  content: 'calendar_month';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--cinza);
}
.noticia-body h3 { font-size: 1.15rem; color: var(--fg); margin-bottom: 10px; }
.noticia-body p { font-size: .88rem; color: var(--cinza); flex: 1; }
.noticia-link { margin-top: 16px; font-size: .88rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: var(--trans); }
.noticia-link:hover { gap: 10px; }

.professor-card { padding: 28px 20px; text-align: center; }
.prof-avatar {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em;
}
.professor-card h3 { font-size: 1.05rem; color: var(--fg); margin-bottom: 8px; }
.professor-card .disciplina { margin-bottom: 12px; }
.professor-card p { font-size: .82rem; color: var(--cinza); }

.carousel-wrapper { position: relative; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong); color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; z-index: 3; transition: var(--trans);
}
.carousel-arrow:hover { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.carousel-arrow.prev { left: -6px; }
.carousel-arrow.next { right: -6px; }
@media (max-width: 640px) { .carousel-arrow { display: none; } }

/* premiações: fila deslizável */
.premiacoes-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.premiacao-card { flex: 0 0 200px; scroll-snap-align: start; background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 20px 18px; text-align: center; transition: var(--trans); }
.premiacao-card:hover { border-color: var(--fg); transform: translateY(-3px); }
@media (max-width: 480px) { .premiacao-card { flex: 0 0 160px; padding: 16px 14px; } }

/* ---------- carrossel "coverflow" do corpo docente ----------
   O destaque (transform/opacity/filter por cartão) é feito por JS com
   estilos inline — aqui só a base e o encaixe do scroll. */
.carrossel-docentes { display: block; }
.carrossel-viewport { overflow: hidden; padding: 6px 0; }
.carrossel-viewport::-webkit-scrollbar { display: none; }
.carrossel-trilho { display: flex; align-items: stretch; width: max-content; animation: docentes-scroll var(--docentes-dur, 40s) linear infinite; }
.carrossel-trilho:hover, .carrossel-trilho.pausado { animation-play-state: paused; }
@keyframes docentes-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .carrossel-viewport { overflow-x: auto; } .carrossel-trilho { animation: none; } }
/* cartão compacto: foto rectangular tipo passe (~70% do cartão) e, por baixo, disciplina, nome e lápis */
.docente-card {
  flex: 0 0 180px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  margin-right: 8px;
}
.docente-card.ativo { box-shadow: var(--sombra-hover); }
.docente-card-foto {
  width: 100%; aspect-ratio: 20 / 21; border-radius: 0; border: 0;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: var(--cinza);
  overflow: hidden;
}
.docente-card-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.docente-card-corpo { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.docente-card-corpo .disciplina {
  display: block; width: 100%; padding: 3px 6px; font-size: .66rem; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docente-card-linha { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.docente-card-linha h3 {
  flex: 1; min-width: 0; margin: 0; font-size: .78rem; line-height: 1.2; color: var(--fg); text-align: left;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.docente-card-foto-editar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: var(--accent-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; appearance: none; padding: 0; transition: var(--trans);
}
.docente-card-foto-editar:hover { transform: scale(1.08); }
.docente-card-foto-editar .material-symbols-outlined { font-size: 15px; }
.docente-card-corpo p.docente-desc { display: none; }
.docentes-grid-admin { display: flex; flex-wrap: wrap; gap: 24px; }
.carrossel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.main-content .equipa-compacta { padding-block: 12px 4px; }
.equipa-compacta .section-tag { margin-bottom: 8px; }
.carrossel-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); border: none; cursor: pointer; padding: 0; transition: var(--trans); }
.carrossel-dot.activo { background: var(--fg); width: 22px; border-radius: 0; }

@media (max-width: 768px) { .docente-card { flex-basis: 158px; } .docente-card-linha h3 { font-size: .72rem; } }

/* ---------- contacto, mapa e CTA ---------- */
.contato-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.contato-info-card { background: var(--invert-bg); color: var(--invert-fg); border-radius: 0; padding: 36px; }
.contato-info-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.contato-info-card p { color: var(--muted); margin-bottom: 28px; font-size: .92rem; }
.info-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.info-icon { width: 40px; height: 40px; border: 1px solid rgba(128, 128, 128, .5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.info-item strong { display: block; font-size: .8rem; color: var(--accent); margin-bottom: 3px; font-weight: 700; }
.info-item span { font-size: .92rem; color: inherit; line-height: 1.4; }
/* o span do ícone não pode herdar a fonte de texto (senão aparece "place", "call"...) */
.info-item .info-icon span.material-symbols-outlined, .info-item .info-icon .material-symbols-outlined { font-family: 'Material Symbols Outlined'; color: inherit; }

.mapa-wrapper {
  border-radius: 0; overflow: hidden; height: 320px; min-height: 340px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--fg);
}
.mapa-wrapper span { font-size: 40px; }
.mapa-wrapper p { font-size: .92rem; color: var(--cinza); }
.mapa-wrapper a { margin-top: 12px; }

.cta-pais {
  background: var(--invert-bg); color: var(--invert-fg);
  border-radius: 0; padding: 48px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-pais::before { content: 'school'; position: absolute; right: -20px; bottom: -30px; font-family: 'Material Symbols Outlined'; font-size: 170px; opacity: .08; }
.cta-pais h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); max-width: 22ch; }
.cta-pais p { color: var(--muted); margin-top: 8px; font-size: .95rem; }

@media (max-width: 900px) {
  .sobre-grid, .contato-grid, .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cta-pais { padding: 36px 24px; flex-direction: column; text-align: center; }
  .contato-info-card { padding: 28px; }
}
@media (max-width: 480px) {
  .contato-info-card, .cta-pais { padding: 32px 20px; }
  .info-icon { width: 34px; height: 34px; font-size: 14px; }
  .form-grid { gap: 14px; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-card { padding: 22px 16px 16px; }
  .dash-card .dash-icon { font-size: 20px; margin-bottom: 8px; }
  .dash-card h4 { font-size: .72rem; }
  .dash-card .dash-sub { font-size: .66rem; }
}
@media (max-width: 380px) { .dashboard-grid { grid-template-columns: 1fr; } }


/* ======================================================================
   06 · MODAIS, POPOVERS, NOTIFICAÇÕES, DEFINIÇÕES
   Os z-index seguem a ordem de sempre:
   conteúdo < modais de página (999) < gaveta (2000) < barra (2010) <
   marca (2050) < menu/ícones (2100) < painéis (2200) < modal de mensagem
   (2400) < definições (5000) < boas-vindas/login (9999+)
   ====================================================================== */

/* ---------- ícones de mensagens/notificações (só Admin; auth-guard.js) ----------
   Deixaram de ser "position: fixed" soltos no canto do ecrã: agora
   vivem dentro do grupo .acs-nav-icons, em #nav-login-item, ao lado
   da engrenagem de Definições (ver .acs-nav-icons mais abaixo). */
.acs-header-icon {
  position: relative;
  flex-shrink: 0;
  width: var(--toggle);
  height: var(--toggle);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  transition: var(--trans);
}
.acs-header-icon:hover { border-color: var(--fg); background: var(--surface); }
.acs-header-icon .material-symbols-outlined { font-size: 20px; }
.acs-header-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 0;
  background: var(--accent-2); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
@media (max-width: 480px) {
  .acs-header-icon .material-symbols-outlined { font-size: 18px; }
  .acs-header-badge { min-width: 16px; height: 16px; font-size: .6rem; line-height: 16px; top: -4px; right: -4px; }
}

.acs-header-painel {
  position: fixed;
  top: calc(var(--topbar-h) + 6px);
  right: var(--pad);
  width: 350px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--sombra-hover);
  z-index: 2200;
}
@media (max-width: 480px) { .acs-header-painel { right: 10px; width: calc(100vw - 20px); } }
.acs-painel-header { position: sticky; top: 0; padding: 14px 18px; font-weight: 700; font-size: .9rem; letter-spacing: -.01em; color: var(--fg); background: var(--bg); border-bottom: 1px solid var(--line); }
.acs-painel-vazio { padding: 26px 18px; color: var(--cinza); font-size: .85rem; text-align: center; margin: 0; }
.acs-painel-lista { display: flex; flex-direction: column; }
.acs-painel-item { padding: 12px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s ease; }
.acs-painel-item:hover { background: var(--surface); }
.acs-painel-item:last-child { border-bottom: none; }
.acs-painel-item.acs-nao-lido { background: color-mix(in srgb, var(--accent-2) 7%, transparent); }
.acs-painel-item-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; color: var(--fg); }
.acs-painel-item-topo strong { font-size: .85rem; }
.acs-painel-item-topo span { color: var(--cinza); font-size: .7rem; white-space: nowrap; }
.acs-painel-item-assunto { font-size: .8rem; color: var(--fg); margin-top: 2px; font-weight: 600; }
.acs-painel-item-corpo { font-size: .78rem; color: var(--cinza); margin-top: 3px; line-height: 1.4; }
.acs-painel-categoria { padding: 12px 18px 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza); font-weight: 700; }
.acs-painel-rodape { padding: 10px 18px; text-align: center; border-top: 1px solid var(--line); }
.acs-painel-rodape a { font-size: .8rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.acs-painel-item-rodape { display: flex; justify-content: flex-end; margin-top: 8px; }
.acs-painel-item-apagar { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--danger-text); font-size: .72rem; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 0; transition: var(--trans); }
.acs-painel-item-apagar:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.acs-painel-item-apagar .material-symbols-outlined { font-size: 14px; }

/* ---------- modal de detalhe da mensagem / confirmações ---------- */
.acs-msg-modal-overlay {
  position: fixed; inset: 0; z-index: 2400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: calc(var(--topbar-h) + 22px) 20px 20px;
}
.acs-msg-modal {
  position: relative; width: 100%; max-width: 440px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: 0;
  padding: 28px 26px 24px;
  box-shadow: var(--sombra-hover);
}
.acs-msg-modal-fechar, .docente-modal-fechar {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: none; color: var(--fg);
  cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--trans);
}
.acs-msg-modal-fechar:hover, .docente-modal-fechar:hover { background: var(--surface-2); }
.acs-msg-modal-icone { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--fg); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; }
.acs-msg-modal-centro .acs-msg-modal-icone { margin-left: auto; margin-right: auto; }
.acs-msg-modal-nome { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; color: var(--fg); margin-bottom: 4px; }
.acs-msg-modal-contacto { font-size: .8rem; color: var(--cinza); margin-bottom: 12px; }
.acs-msg-modal-assunto { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--fg); border: 1px solid var(--line-strong); border-radius: 0; padding: 5px 12px; margin-bottom: 16px; }
.acs-msg-modal-corpo { background: var(--surface); border-radius: 0; padding: 16px; font-size: .88rem; line-height: 1.55; color: var(--fg); white-space: pre-wrap; text-align: left; max-height: 40vh; overflow-y: auto; }
.acs-msg-modal-data { font-size: .72rem; color: var(--cinza); margin-top: 12px; text-align: right; }
.acs-msg-modal-acoes { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- modais da Área Administrativa / Turmas (layout vem da página) ---------- */
.admin-modal-close:hover { background: var(--surface); color: var(--fg); }
/* Cadastro de Alunos reutiliza o modal sem cabeçalho nem fundo */
/* Esta aba não tem barra de título: o painel branco flutua sobre o fundo escuro. O "x" fica na
   faixa escura LOGO ACIMA do painel, alinhado pelo canto direito dele (mesmos limites do .wrap),
   a 8px do topo do painel (o painel começa 56px abaixo; o "x" ocupa os 14–48px). */
#aba-inscricoes .admin-modal-head {
  display: flex; position: absolute; top: 14px; left: auto; min-height: 0;
  right: max(var(--gutter, 20px), calc((100% - var(--maxw, 1200px)) / 2 + var(--gutter, 20px)));
}
#aba-inscricoes .admin-modal-head strong { display: none; }
#aba-inscricoes .admin-modal-close { color: #fff; background: rgba(255, 255, 255, .14); }
#aba-inscricoes .admin-modal-close:hover { background: rgba(255, 255, 255, .28); color: #fff; }
#aba-inscricoes section { padding-top: 56px; padding-bottom: 0; }
#aba-inscricoes .admin-modal { background: transparent; box-shadow: none; }

/* ---------- ficha do aluno / fotos: só onde a página usava azul como fundo ---------- */
body .cartao-aluno-topo { background: linear-gradient(140deg, var(--accent-3), var(--accent-2)); }
body .cartao-aluno { border: 1px solid var(--line); border-radius: 0; }
body .cartao-aluno-corpo { border-radius: 0; }
body .cartao-aluno-foto-editar, body .prof-foto-editar { background: var(--accent-2); color: #fff; border-color: var(--bg); }

/* ---------- corpo docente: modal, popover da foto, câmara ---------- */
.docente-modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: calc(var(--topbar-h) + 22px) 20px 20px;
}
.docente-modal {
  position: relative; width: 100%; max-width: 380px; text-align: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 0;
  padding: 32px 28px; box-shadow: var(--sombra-hover);
}
.docente-modal-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--surface); border: 3px solid var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--cinza); overflow: hidden;
}
.docente-modal-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.docente-foto-popover {
  display: none; position: fixed; z-index: 1250; min-width: 200px; padding: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--sombra-hover);
}
.docente-foto-popover.aberto { display: block; }
.docente-foto-popover button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  appearance: none; border: none; background: transparent;
  padding: 10px 12px; border-radius: 0;
  font: inherit; font-size: .85rem; color: var(--fg); cursor: pointer; text-align: left; transition: var(--trans);
}
.docente-foto-popover button:hover { background: var(--surface); }
.docente-foto-popover .material-symbols-outlined { font-size: 19px; color: var(--accent-3); }

.docente-foto-camera-overlay { display: none; position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, .8); align-items: center; justify-content: center; padding: 16px; }
.docente-foto-camera-overlay.aberto { display: flex; }
.docente-foto-camera-modal { background: var(--bg); border: 1px solid var(--line); border-radius: 0; max-width: 420px; width: 100%; padding: 20px; text-align: center; }
.docente-foto-camera-modal h4 { color: var(--fg); font-size: 1rem; margin-bottom: 14px; }
.docente-foto-camera-box { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #000; border-radius: 0; overflow: hidden; margin-bottom: 16px; }
.docente-foto-camera-box video, .docente-foto-camera-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.docente-foto-camera-erro { color: var(--danger-text); font-size: .82rem; margin-bottom: 12px; }
.docente-foto-camera-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@keyframes docente-foto-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 480px) { .docente-modal-overlay, .acs-msg-modal-overlay { padding-top: calc(var(--topbar-h) + 14px); } }

/* ---------- Definições (definicoes.js) ---------- */
.acs-def-overlay { display: none; position: fixed; inset: 0; z-index: 5000; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 40px 16px; overflow-y: auto; }
.acs-def-overlay.aberto { display: block; }
.acs-def-modal { max-width: 560px; margin: 0 auto; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--sombra-hover); overflow: hidden; }
.acs-def-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: var(--invert-bg); color: var(--invert-fg); }
.acs-def-head strong { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; letter-spacing: -.02em; }
.acs-def-close { background: transparent; border: none; color: inherit; font-size: 26px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.acs-def-body { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 24px; max-height: 70vh; overflow-y: auto; }
.acs-def-section h4 { display: flex; align-items: center; gap: 8px; font-size: .98rem; color: var(--fg); margin-bottom: 10px; }
.acs-def-section p { font-size: .85rem; color: var(--cinza); line-height: 1.55; margin-bottom: 10px; }
.acs-def-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .9rem; color: var(--fg); padding: 10px 0; border-top: 1px solid var(--line); }
.acs-def-row:first-of-type { border-top: none; padding-top: 0; }
.acs-def-select { border: 1px solid var(--line-strong); border-radius: 0; padding: 8px 10px; font-size: .85rem; background: var(--bg); color: var(--fg); }
.acs-def-switch { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--fg); transition: var(--trans); }
.acs-def-switch:hover { border-color: var(--fg); }
.acs-def-switch .acs-def-switch-icon-dark { display: none; }
:root[data-theme="dark"] .acs-def-switch .acs-def-switch-icon-light { display: none; }
:root[data-theme="dark"] .acs-def-switch .acs-def-switch-icon-dark { display: inline-flex; }
.acs-def-legal { font-size: .82rem; color: var(--cinza); line-height: 1.6; margin-bottom: 10px; }
.acs-def-legal-accordion { border-top: 1px solid var(--line); margin-top: 2px; }
.acs-def-legal-item { border-bottom: 1px solid var(--line); }
.acs-def-legal-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 2px; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--fg); list-style: none; background: transparent; transition: var(--trans); }
.acs-def-legal-summary::-webkit-details-marker { display: none; }
.acs-def-legal-seta { font-size: 20px; flex-shrink: 0; color: var(--cinza); transition: transform .2s ease; }
.acs-def-legal-item[open] > .acs-def-legal-summary .acs-def-legal-seta { transform: rotate(180deg); color: var(--fg); }
.acs-def-legal-content { padding: 0 2px 16px; background: transparent; max-height: 320px; overflow-y: auto; }
.acs-def-legal-content h5 { font-size: .85rem; color: var(--fg); margin: 14px 0 6px; letter-spacing: -.01em; }
.acs-def-legal-content h5:first-child { margin-top: 10px; }
.acs-def-legal-content p { font-size: .82rem; color: var(--cinza); line-height: 1.6; margin-bottom: 8px; }
.acs-def-legal-content ul { margin: 0 0 8px; padding-left: 18px; list-style: disc; }
.acs-def-legal-content li { font-size: .82rem; color: var(--cinza); line-height: 1.6; margin-bottom: 4px; }
.acs-def-backup-btn { margin-top: 4px; }
.acs-def-backup-status { font-size: .82rem; color: var(--fg); margin-top: 10px; }
/* "Minha Conta": mesmo acordeão, como secção isolada */
.acs-def-conta-item { border-bottom: none; }
.acs-def-conta-summary { padding: 0; font-size: .98rem; font-weight: 700; color: var(--fg); }
.acs-def-conta-summary span:first-child { display: flex; align-items: center; gap: 8px; }
.acs-def-conta-item[open] > .acs-def-conta-summary { margin-bottom: 10px; }
.acs-def-conta-content { padding: 0; max-height: none; overflow: visible; }
@media (max-width: 480px) {
  .acs-def-overlay { padding: 20px 10px; }
  .acs-def-head { padding: 16px 18px; }
  .acs-def-body { padding: 16px 18px 22px; gap: 18px; }
}


/* ======================================================================
   07 · PÁGINAS: hero, cabeçalho de página, login, inscrição
   ====================================================================== */

/* ---------- hero das páginas públicas (marcação antiga) ----------
   Escopo em .hero-content para não mexer no hero do index (secção 02). */
.hero { position: relative; }
.hero-content { max-width: 1000px; width: 100%; min-width: 0; padding: clamp(28px, 5vw, 64px) var(--pad); position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); color: var(--fg);
  padding: 7px 16px 7px 12px; border-radius: 0;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  margin-bottom: 18px; position: relative;
}
.hero-badge[data-icon]::before {
  content: attr(data-icon);
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 2px;
  color: var(--on-accent); background: var(--accent); border-radius: 50%;
}
.hero-content h1 { font-size: clamp(2.625rem, 7vw, 4.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; max-width: 18ch; margin-bottom: 16px; }
.hero-content h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-content p { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--cinza); max-width: 56ch; margin-bottom: 26px; line-height: 1.45; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.hero-stats { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats .stat { background: var(--surface); border-radius: 0; padding: 18px 24px; text-align: left; }
.stat-num { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { font-size: .8rem; color: var(--cinza); margin-top: 6px; font-weight: 500; }

/* variante com fotografia de fundo: aqui o texto é sempre branco */
.hero.hero-foto { min-height: 100vh; min-height: 100dvh; background: #000; padding-top: 0; display: flex; align-items: center; }
.hero-media { position: absolute; inset: 0; z-index: 0; background-image: url("images/image.png"); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #000; }
.hero.hero-foto::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .66) 34%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .05) 85%); }
.hero.hero-foto .hero-content { z-index: 2; color: #fff; }
.hero.hero-foto .hero-content p { color: rgba(255, 255, 255, .82); }
.hero.hero-foto .hero-badge { border-color: rgba(255, 255, 255, .4); color: #fff; }
.hero.hero-foto .hero-stats .stat { background: rgba(255, 255, 255, .1); }
.hero.hero-foto .stat-label { color: rgba(255, 255, 255, .7); }
.hero.hero-foto .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .5); }
@media (max-width: 900px) { .hero.hero-foto::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .88) 100%); } }
@media (max-width: 768px) {
  .hero-stats { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad) 14px; scrollbar-width: none; }
  .hero-stats::-webkit-scrollbar { display: none; }
  .hero-stats .stat { flex: 0 0 auto; min-width: 140px; scroll-snap-align: start; }
}
@media (max-width: 480px) { .hero-actions { flex-direction: column; align-items: stretch; } .stat-num { font-size: 1.7rem; } }

/* ---------- cabeçalho de página (título / breadcrumb) ---------- */
.page-header { padding: 22px var(--pad) 6px; position: relative; }
.page-header-inner { max-width: 1280px; margin: 0 auto; position: relative; }
.page-header h1 { font-size: clamp(1.625rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: var(--fg); margin-bottom: 8px; }
.page-header p { color: var(--cinza); font-size: 1rem; max-width: 60ch; text-align: left; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: .85rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); transition: var(--trans); }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb span { color: var(--fg); font-weight: 600; }

.pais-hero { padding: 26px var(--pad) 10px; text-align: left; }
.pais-hero h1 { font-size: clamp(1.625rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -.035em; margin-bottom: 10px; }
.pais-hero p { color: var(--cinza); font-size: 1rem; }
.admin-panel-content h1 { margin-bottom: 8px; }
.admin-hero-sub { margin: 0 auto 20px; }
.admin-panel-tabs-wrap { margin-top: 12px; padding: 14px 24px; }
.container.admin-panel-content { padding-inline: 0; }

/* ---------- login ---------- */
.login-wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(76vh, 720px);
  margin: 8px var(--pad) 0;
  padding: clamp(28px, 6vw, 72px) 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad);
  border-radius: 0;
}
.login-wrapper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 13px); mix-blend-mode: multiply; }
.login-card {
  position: relative; z-index: 1; width: 100%; max-width: 400px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: 0;
  padding: 30px 30px 24px;
}
.login-header { text-align: center; margin-bottom: 22px; }
.login-logo { width: 58px; height: 58px; margin: 0 auto 12px; background: #fff; border: 1px solid var(--line); border-radius: 50%; padding: 9px; display: flex; align-items: center; justify-content: center; }
.login-logo img { width: 100%; height: 100%; object-fit: contain; }
.login-card h2 { font-size: 1.6rem; color: var(--fg); margin-bottom: 4px; }
.login-card p { font-size: .82rem; color: var(--cinza); }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { color: var(--fg); }
.login-form .btn { width: 100%; justify-content: center; }
.login-footnote { margin-top: 18px; padding-top: 16px; }
@media (max-width: 480px) { .login-card { padding: 24px 20px 20px; } .login-wrapper { margin-inline: 12px; border-radius: 0; } }

/* Efeito "vidro fosco" no card de login: uma mancha de cor (ciano, roxo e
   rosa da marca) percorre o contorno do card por trás de um painel
   translúcido. Adaptado de um componente Uiverse, só com CSS: usa os
   pseudo-elementos ::before (mancha) e ::after (vidro), sem mexer no HTML. */
.login-card {
  --glass-gap: 5px;
  isolation: isolate; overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45);
}
.login-card > * { position: relative; z-index: 2; }
.login-card::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; top: 0; width: 220px; height: 220px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3) 50%, var(--accent-2));
  filter: blur(18px);
  transform: translate(-50%, -50%);
  animation: login-blob-orbita 6s infinite ease-in-out;
}
.login-card::after {
  content: ""; position: absolute; z-index: 1; inset: var(--glass-gap);
  border-radius: 0;
  background: rgba(255, 255, 255, .9);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  outline: 1px solid rgba(255, 255, 255, .55);
}
@keyframes login-blob-orbita {
  0%, 100% { left: 0;    top: 0; }
  25%      { left: 100%; top: 0; }
  50%      { left: 100%; top: 100%; }
  75%      { left: 0;    top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .login-card::before { animation: none; left: 100%; top: 0; }
}

/* cartão de login sobre o ecrã de boas-vindas (index antigo) */
@keyframes summaCardFadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-card-overlay { position: fixed; inset: 0; z-index: 20001; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: summaCardFadeIn .35s ease; }
.login-card-overlay .login-card { max-width: 400px; }
.login-card-close { position: absolute; top: 12px; right: 12px; background: var(--surface); border: none; color: var(--fg); cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--trans); }
.login-card-close:hover { background: var(--surface-2); }
.login-card-close .material-symbols-outlined { font-size: 20px; }

/* ---------- inscrição online / câmara ---------- */
.inscricao-section { padding: 48px var(--pad) 72px; }
.inscricao-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 32px; align-items: start; }
.inscricao-form, .inscricao-camera { background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 32px; }
.inscricao-camera { text-align: center; }
.inscricao-camera h4 { color: var(--fg); font-size: 1.15rem; margin-bottom: 4px; }
.camera-hint { font-size: .82rem; color: var(--cinza); margin-bottom: 20px; }
.camera-box { position: relative; width: 100%; aspect-ratio: 4/3; background: #0b0b0f; border-radius: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.camera-box video, .camera-box img { width: 100%; height: 100%; object-fit: cover; }
.camera-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, .6); }
.camera-placeholder span { font-size: 40px; }
.camera-placeholder p { font-size: .8rem; }
.camera-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.camera-erro { margin-top: 14px; font-size: .82rem; color: var(--danger-text); background: color-mix(in srgb, var(--danger) 10%, transparent); padding: 10px 14px; border-radius: 0; }
.camera-box-compact { width: 150px; max-width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 14px; background: transparent; }
.camera-box-compact .camera-placeholder span { font-size: 16px; }
.camera-box-compact .camera-placeholder p { font-size: .62rem; padding: 0 6px; }
.inscricao-camera-flat { background: transparent; border: 0; padding: 0; text-align: left; }
.inscricao-camera-flat .camera-actions { justify-content: flex-start; }
.inscricao-msg { margin-top: 16px; font-size: .88rem; font-weight: 600; }
.inscricao-msg.sucesso { color: var(--ok-text); }
.inscricao-msg.erro { color: var(--danger-text); }
@media (max-width: 900px) { .inscricao-grid { grid-template-columns: 1fr; } }
/* inscrição: o .container já dá o respiro lateral, por isso a secção não repete */
.inscricao-section { padding-inline: 0; }
.inscricao-section .section-title { margin-bottom: 20px; }
.inscricao-enviar { text-align: center; margin-top: 32px; }
.inscricao-enviar .btn { padding: 16px 40px; }
.label-nota { font-weight: 400; color: var(--muted); }

/* login: linha "lembrar / esqueceu" e mensagens */
.login-opcoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.login-lembrar { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; font-size: .8rem; color: var(--cinza); }
.login-lembrar input { width: auto; padding: 0; }
.login-erro { color: var(--danger-text); font-size: .85rem; margin-top: 12px; text-align: center; }
.login-footnote { text-align: center; border-top: 1px solid var(--line); }
.login-footnote p { font-size: .78rem; }
.login-contacto { font-size: .78rem; font-weight: 600; color: var(--fg); }

/* selector de ano lectivo (vive dentro do .page-header-inner, por baixo do breadcrumb) */
.ano-lectivo-selector { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ano-lectivo-selector select { width: auto; padding: 8px 14px; border-radius: 0; font-size: .85rem; }
.page-header-inner > .ano-lectivo-badge { display: inline-block; margin-top: 4px; }
.ano-lectivo-badge {
  font-size: .75rem; font-weight: 600; padding: 5px 12px; border-radius: 0;
  color: var(--warn-text);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}

/* sobre: história */
.sobre-texto { color: var(--cinza); font-size: 1rem; line-height: 1.55; margin-bottom: 18px; max-width: 62ch; }
.sobre-numeros { display: flex; flex-direction: column; gap: 14px; }
.sobre-fundacao {
  background: var(--invert-bg); color: var(--invert-fg);
  border-radius: 0; padding: 40px 32px; text-align: center;
}
.sobre-fundacao strong {
  display: block; font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 700; letter-spacing: -.05em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sobre-fundacao span { display: block; margin-top: 10px; color: color-mix(in srgb, var(--invert-fg) 70%, transparent); font-size: .95rem; }
.sobre-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sobre-stat { background: var(--surface); border-radius: 0; padding: 22px 16px; text-align: center; }
.sobre-stat strong { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -.04em; color: var(--fg); line-height: 1.1; }
.sobre-stat span { display: block; margin-top: 4px; font-size: .82rem; color: var(--cinza); }

/* sobre: missão, visão, valores — grelha fixa (não é carrossel) sobre fundo cinza */
.valores-grid--fixa {
  display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: auto auto;
  gap: 14px; overflow: visible; padding: 0; margin-top: 32px; scroll-snap-type: none;
}
.valores-grid--fixa .valor-card { flex: none; cursor: default; }
.valores-grid--fixa .valor-card:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.valores-grid--fixa .valor-card:hover { transform: none; }
.sobre-section .valor-card { background: var(--bg); border-color: var(--line); }
.sobre-section .valor-card::before { background: var(--surface); }
.valor-lista--2col { columns: 2; column-gap: 24px; }
.valor-lista--2col li { break-inside: avoid; padding-bottom: 2px; }
@media (max-width: 768px) {
  .valores-grid--fixa { grid-template-columns: 1fr; }
  .valores-grid--fixa .valor-card:nth-child(3) { grid-column: auto; grid-row: auto; }
  .sobre-fundacao { padding: 30px 20px; }
}
@media (max-width: 380px) { .valor-lista--2col { columns: 1; } }

/* sobre: três cartões lado a lado (não é carrossel) */
.trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: visible; padding: 0; margin-top: 32px; scroll-snap-type: none; }
.trio-grid .valor-card { flex: none; cursor: default; }
.trio-grid .valor-card:hover { transform: none; }
.trio-grid .valor-lista { display: grid; gap: 10px; list-style: none; padding-left: 0; }
.trio-grid .valor-lista strong { color: var(--fg); }
@media (max-width: 900px) { .trio-grid { grid-template-columns: 1fr; } }

/* sobre: níveis CV3–CV5 (sequência real) e linha do tempo */
.niveis-lista, .linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.niveis-lista li, .linha-tempo li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.niveis-lista strong, .linha-tempo strong {
  font-size: 2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.niveis-lista span, .linha-tempo span { color: var(--cinza); font-size: .98rem; line-height: 1.45; }
@media (max-width: 480px) { .niveis-lista li, .linha-tempo li { grid-template-columns: 1fr; gap: 6px; } }


@media (max-width: 480px) { .inscricao-form, .inscricao-camera { padding: 22px; } .inscricao-camera h4 { font-size: 1rem; } .camera-placeholder span { font-size: 32px; } }


/* ======================================================================
   08 · UTILITÁRIOS E COMPORTAMENTO
   ====================================================================== */

/* entradas suaves ao rolar (script.js → IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
.reveal.reveal-lateral { transform: translateX(-34px); }
.reveal.visible { opacity: 1; transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible { transition: none !important; opacity: 1 !important; transform: none !important; } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero-badge, .hero-content h1, .hero-content p, .hero-actions, .hero-stats { animation: fadeUp .7s ease both; }
.hero-content h1 { animation-delay: .1s; }
.hero-content p { animation-delay: .2s; }
.hero-actions { animation-delay: .3s; }
.hero-stats { animation-delay: .4s; }

/* grupos de 3+ botões: no telemóvel deslizam na horizontal (script.js marca .acs-deslizavel) */
@media (max-width: 768px) {
  .acs-deslizavel {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    gap: 10px !important; padding-bottom: 6px; scrollbar-width: thin;
  }
  .acs-deslizavel::-webkit-scrollbar { height: 5px; }
  .acs-deslizavel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; }
  .acs-deslizavel > * { flex: 0 0 auto !important; scroll-snap-align: start; white-space: nowrap; }
}

/* três pontinhos animados ("A preparar o painel…") e spinner */
.acs-dots { display: inline-block; width: 1.2em; }
.acs-dots span { opacity: 0; animation: acs-dots-pulsar 1.4s infinite; }
.acs-dots span:nth-child(1) { animation-delay: 0s; }
.acs-dots span:nth-child(2) { animation-delay: .2s; }
.acs-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes acs-dots-pulsar { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
.acs-loading-spinner { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--accent); animation: acs-loading-girar .8s linear infinite; }
@keyframes acs-loading-girar { to { transform: rotate(360deg); } }

/* Loader "duo": duas bolas (ciano e rosa da marca) que giram e pulsam.
   Adaptado de um componente Uiverse. Uso: <span class="loader-duo" role="status" aria-label="A carregar"></span> */
.loader-duo {
  --duo-size: 44px;
  display: block; position: relative; box-sizing: border-box;
  width: var(--duo-size); height: var(--duo-size); margin: 14px auto;
  animation: loader-duo-girar 1s linear infinite;
}
.loader-duo::before, .loader-duo::after {
  content: ""; box-sizing: border-box; position: absolute; left: 0;
  width: 50%; height: 50%; border-radius: 50%;
  animation: loader-duo-pulsar 1s ease-in-out infinite;
}
.loader-duo::after  { top: 0;    background: var(--accent); }
.loader-duo::before { bottom: 0; background: var(--accent-2); animation-delay: .5s; }
.loader-duo--sm { --duo-size: 28px; margin: 8px auto; }
@keyframes loader-duo-girar { to { transform: rotate(360deg); } }
@keyframes loader-duo-pulsar { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .loader-duo { animation-duration: 3s; }
  .loader-duo::before, .loader-duo::after { animation: none; transform: scale(.8); }
}
.acs-loading-logo { width: 108px; height: 108px; margin: 0 auto 20px; border-radius: 50%; background: #fff; border: 1px solid rgba(255, 255, 255, .5); display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.acs-loading-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
@media (max-width: 700px) { .acs-loading-logo { width: 92px; height: 92px; } }

/* boas-vindas depois do login: nome + visto a desenhar-se */
.login-welcome-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 20% 0%, rgba(59, 207, 218, .28), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgba(224, 72, 155, .3), transparent 55%), #000;
  transition: opacity .5s ease;
}
.login-welcome-overlay.login-welcome-sair { opacity: 0; pointer-events: none; }
.login-welcome-card { text-align: center; color: #fff; padding: 20px; }
.login-welcome-check { width: 84px; height: 84px; margin: 0 auto 20px; }
.login-welcome-check circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; animation: login-welcome-circulo .6s ease forwards; }
.login-welcome-check path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: login-welcome-certo .35s ease forwards .55s; }
@keyframes login-welcome-circulo { to { stroke-dashoffset: 0; } }
@keyframes login-welcome-certo { to { stroke-dashoffset: 0; } }
.login-welcome-titulo { font-family: var(--font); font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; color: #fff; opacity: 0; animation: login-welcome-texto .5s ease forwards .7s; }
.login-welcome-sub { margin-top: 8px; font-size: .9rem; color: rgba(255, 255, 255, .75); text-align: center; opacity: 0; animation: login-welcome-texto .5s ease forwards .85s; }
@keyframes login-welcome-texto { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .login-welcome-check { width: 68px; height: 68px; } }

/* ---------- fundo decorativo do index antigo (canvas/blobs), agora nas cores do index ---------- */
#auroraBg { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
#auroraBg .aurora-blob { position: absolute; border-radius: 50%; filter: blur(90px); animation: auroraDrift 22s ease-in-out infinite; will-change: transform; }
#auroraBg .ab1 { width: 46vw; height: 46vw; top: -14vw; left: -10vw; background: radial-gradient(circle, rgba(59, 207, 218, .22), transparent 70%); animation-duration: 26s; }
#auroraBg .ab2 { width: 40vw; height: 40vw; bottom: -14vw; right: -8vw; background: radial-gradient(circle, rgba(224, 72, 155, .2), transparent 70%); animation-duration: 30s; animation-delay: -6s; }
#auroraBg .ab3 { width: 30vw; height: 30vw; top: 40%; left: 60%; background: radial-gradient(circle, rgba(123, 108, 246, .18), transparent 70%); animation-duration: 24s; animation-delay: -12s; }
#auroraBg .ab4 { width: 26vw; height: 26vw; top: 10%; left: 30%; background: radial-gradient(circle, rgba(59, 207, 218, .12), transparent 70%); animation-duration: 34s; animation-delay: -3s; }
@keyframes auroraDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4%, 6%) scale(1.08); } 66% { transform: translate(-5%, -3%) scale(.96); } }
#particlesCanvas { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
#cursorGlow { position: fixed; top: 0; left: 0; width: 340px; height: 340px; z-index: -1; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(123, 108, 246, .14), transparent 70%); opacity: 0; transition: opacity .4s ease; will-change: transform; }
#cursorGlow.visible { opacity: 1; }
@media (hover: none) { #cursorGlow { display: none; } }


/* ======================================================================
   09 · ECRÃ DE BOAS-VINDAS + LOGÓTIPO ANIMADO SUMMA
   (index antigo com ecrã de entrada). O logótipo mantém as cores da
   marca; o fundo passa a seguir o modelo: superfície limpa com brilhos
   ciano/rosa, sem as ondas azuis.
   ====================================================================== */
.welcome-screen {
  position: relative; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px 90px;
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(70% 55% at 15% 0%, rgba(59, 207, 218, .30), transparent 60%),
    radial-gradient(70% 55% at 100% 100%, rgba(224, 72, 155, .26), transparent 60%),
    var(--bg);
}
.welcome-btn {
  position: relative; z-index: 1; margin-top: 36px;
  background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg);
  opacity: 0; animation: welcomeFadeUp .8s ease forwards .8s;
}
.welcome-btn:hover { background: color-mix(in srgb, var(--invert-bg) 80%, var(--bg)); }
@keyframes welcomeFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---- Ícone animado (S de SUMMA) + wordmark ---- */
.summa-anim-stage { display:flex; flex-direction:column; align-items:center; gap:18px; position:relative; z-index:1; }
.summa-icon-wrap {
  width: 210px;
  filter: drop-shadow(0 12px 22px rgba(20,60,140,0.28));
  animation: summaFloat 4.5s ease-in-out infinite;
}
.summa-icon-wrap.summa-icon-wrap--small { width: 34px; filter: drop-shadow(0 4px 8px rgba(20,60,140,0.28)); animation: none; }
@keyframes summaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.summa-svg { overflow: visible; display: block; }
.summa-outline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.summa-outline-top {
  stroke: var(--logo-navy-deep); stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: summaDraw 1s ease-out forwards .1s, summaOutlineFade .4s ease-out forwards 1.3s;
}
.summa-outline-bottom {
  stroke: var(--logo-navy-deep); stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: summaDraw 1s ease-out forwards .35s, summaOutlineFade .4s ease-out forwards 1.45s;
}
@keyframes summaDraw { to { stroke-dashoffset: 0; } }
@keyframes summaOutlineFade { from { opacity: 1; } to { opacity: 0; } }
.summa-fill-top, .summa-fill-bottom { opacity: 0; animation: summaFillIn .5s ease-out forwards; }
.summa-fill-top { animation-delay: 1.05s; }
.summa-fill-bottom { animation-delay: 1.15s; }
@keyframes summaFillIn { to { opacity: 1; } }
.summa-paper-group {
  opacity: 0; transform: scale(0.85) translateY(10px); transform-origin: center;
  animation: summaPopIn .4s ease-out forwards 1.55s;
}
@keyframes summaPopIn { to { opacity: 1; transform: scale(1) translateY(0); } }
.summa-doc-dot { opacity: 0; animation: summaDotFade .3s ease-out forwards; }
.summa-doc-dot.summa-d1 { animation-delay: 1.7s; }
.summa-doc-dot.summa-d2 { animation-delay: 1.85s; }
.summa-doc-dot.summa-d3 { animation-delay: 2.0s; }
@keyframes summaDotFade { to { opacity: 1; } }
.summa-doc-line { stroke-dasharray: 130; stroke-dashoffset: 130; animation: summaLineDraw .45s ease-out forwards; }
.summa-doc-line.summa-l1 { animation-delay: 1.75s; }
.summa-doc-line.summa-l2 { animation-delay: 1.9s; }
.summa-doc-line.summa-l3 { animation-delay: 2.05s; stroke-dasharray: 95; stroke-dashoffset: 95; }
@keyframes summaLineDraw { to { stroke-dashoffset: 0; } }
.summa-shine-rect { animation: summaShineSweep 2.8s ease-in-out infinite; animation-delay: 2.3s; }
@keyframes summaShineSweep {
  0% { transform: translateX(-40px) skewX(-18deg); }
  60%, 100% { transform: translateX(420px) skewX(-18deg); }
}
.summa-wordmark {
  font-family: var(--font); font-weight: 800;
  font-size: 2.9rem; letter-spacing: .11em; color: var(--logo-navy-deep);
}
.summa-wordmark span {
  display: inline-block; opacity: 0; transform: translateY(14px);
  animation: summaLetterUp .45s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes summaLetterUp { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .summa-outline-top, .summa-outline-bottom, .summa-fill-top, .summa-fill-bottom,
  .summa-paper-group, .summa-doc-dot, .summa-doc-line, .summa-icon-wrap, .summa-wordmark span {
    animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important;
  }
  .summa-outline-top, .summa-outline-bottom { display: none; }
}
@media (max-width: 640px) {
  .welcome-screen .summa-icon-wrap { width: 105px; }
  .welcome-screen .summa-svg { width: 105px; height: 136px; }
  .welcome-screen .summa-wordmark { font-size: 1.9rem; }
}

/* ======================================================================
   10 · HORAS EXTRAS — folha de cálculo
   Visual próprio DE PROPÓSITO: imita o modelo Excel usado nas exportações
   (verde Excel, grelha cinza). Tudo isolado sob .horas-extras-sheet.
   ====================================================================== */
.horas-extras-sheet {
  --he-verde: #217346;
  --he-verde-escuro: #185C37;
  --he-cabecalho-fundo: #F3F3F3;
  --he-cabecalho-texto: #333333;
  --he-linha-grelha: #C6C6C6;
  --he-linha-grelha-clara: #E1E1E1;
  --he-celula-fundo: #FFFFFF;
  --he-linha-alt: #F9F9F9;
  --he-linha-hover: #EEF6F1;
  --he-select-borda: #217346;
  --he-select-fundo: #E9F5EE;
  --he-coluna-cabecalho-fundo: #EFEFEF;

  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #1F1F1F;
  background: #FAFAFA;
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(14,42,82,0.07);
  overflow: hidden;
}
.horas-extras-sheet * { box-sizing: border-box; }

/* Cabeçalho estilo "ribbon" — gradiente + sombra em vez de uma cor
   chapada, para dar profundidade em vez de um bloco plano. */
.horas-extras-sheet .he-ribbon {
  background: linear-gradient(135deg, var(--he-verde) 0%, var(--he-verde-escuro) 100%);
  color: white;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 10px rgba(24,92,55,0.25);
  position: relative;
  z-index: 1;
}
.horas-extras-sheet .he-ribbon-badge {
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--he-verde-escuro);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.horas-extras-sheet .he-ribbon h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 0;
  color: white;
}

.horas-extras-sheet .he-toolbar {
  background: var(--he-cabecalho-fundo);
  border-bottom: 1px solid var(--he-linha-grelha);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.horas-extras-sheet .he-toolbar label {
  font-size: 13px;
  font-weight: 600;
  color: var(--he-cabecalho-texto);
}
.horas-extras-sheet .he-toolbar input[type="month"] {
  padding: 6px 10px;
  border: 1px solid var(--he-linha-grelha);
  border-radius: 0;
  font-size: 13px;
  font-family: inherit;
  background: white;
  transition: var(--trans, all .2s ease);
}
.horas-extras-sheet .he-toolbar input[type="month"]:focus {
  outline: none;
  border-color: var(--he-select-borda);
  box-shadow: 0 0 0 3px var(--he-select-fundo);
}

.horas-extras-sheet .he-btn-group {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.horas-extras-sheet .he-btn {
  border: 1px solid var(--he-verde-escuro);
  background: var(--he-verde);
  color: white;
  padding: 7px 15px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(24,92,55,0.25);
  transition: var(--trans, all .2s ease);
}
.horas-extras-sheet .he-btn:hover {
  background: var(--he-verde-escuro);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(24,92,55,0.32);
}
.horas-extras-sheet .he-btn.secondary {
  background: white;
  color: var(--he-cabecalho-texto);
  border: 1px solid var(--he-linha-grelha);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.horas-extras-sheet .he-btn.secondary:hover {
  background: var(--he-cabecalho-fundo);
  border-color: #B7B7B7;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.horas-extras-sheet .he-sheet-wrap {
  overflow-x: auto;
  padding: 20px;
}

.horas-extras-sheet table.he-sheet {
  border-collapse: collapse;
  background: var(--he-celula-fundo);
  min-width: 1000px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Linha de letras de coluna (A, B, C...) */
.horas-extras-sheet .he-col-letters th {
  background: var(--he-coluna-cabecalho-fundo);
  border: 1px solid var(--he-linha-grelha);
  color: #757575;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
  padding: 2px 4px;
  height: 18px;
}

.horas-extras-sheet thead tr.he-col-titles th {
  background: var(--he-cabecalho-fundo);
  border: 1px solid var(--he-linha-grelha);
  border-bottom: 2px solid var(--he-verde);
  color: var(--he-cabecalho-texto);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
}

.horas-extras-sheet tbody th.he-row-num {
  background: var(--he-coluna-cabecalho-fundo);
  border: 1px solid var(--he-linha-grelha);
  color: #757575;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  width: 34px;
  min-width: 34px;
}

.horas-extras-sheet tbody td {
  border: 1px solid var(--he-linha-grelha-clara);
  padding: 0;
  height: 34px;
  transition: background .15s ease;
}

.horas-extras-sheet tbody tr:nth-child(even) td { background: var(--he-linha-alt); }
.horas-extras-sheet tbody tr:hover td { background: var(--he-linha-hover); }
.horas-extras-sheet tbody tr:nth-child(even) td:has(input:focus),
.horas-extras-sheet tbody tr:hover td:has(input:focus) { background: var(--he-select-fundo); }

.horas-extras-sheet tbody input {
  width: 100%;
  height: 34px;
  border: none;
  background: transparent;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  color: #1F1F1F;
  transition: background .15s ease, box-shadow .15s ease;
}
.horas-extras-sheet tbody input:focus {
  outline: 2px solid var(--he-select-borda);
  outline-offset: -2px;
  background: var(--he-select-fundo);
}
.horas-extras-sheet tbody input[readonly] {
  color: #6B6B6B;
  background: #F5F5F5;
}
.horas-extras-sheet tbody input.he-numero { text-align: right; font-variant-numeric: tabular-nums; }
.horas-extras-sheet tbody select.he-select-tsu {
  width: 100%;
  height: 34px;
  border: none;
  background: transparent;
  padding: 0 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: #1F1F1F;
}
.horas-extras-sheet tbody select.he-select-tsu:focus {
  outline: 2px solid var(--he-select-borda);
  outline-offset: -2px;
  background: var(--he-select-fundo);
}
.horas-extras-sheet tbody select.he-select-tsu:disabled {
  color: #6B6B6B;
  background: #F5F5F5;
}
.horas-extras-sheet td.he-valor-cell input {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--he-verde-escuro);
}

.horas-extras-sheet .he-col-delete {
  width: 32px;
  min-width: 32px;
  text-align: center;
}
.horas-extras-sheet .he-del-btn {
  border: none;
  background: transparent;
  border-radius: 0;
  color: #B00020;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
  height: 34px;
  transition: background .15s ease, transform .15s ease;
}
.horas-extras-sheet .he-del-btn:hover { background: #FBE4E4; transform: scale(1.1); }

.horas-extras-sheet tfoot td {
  border: 1px solid var(--he-linha-grelha);
  border-top: 2px solid var(--he-verde);
  background: var(--he-cabecalho-fundo);
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 10px;
  color: var(--he-cabecalho-texto);
}
.horas-extras-sheet tfoot td.he-valor-cell { color: var(--he-verde-escuro); text-align: right; font-variant-numeric: tabular-nums; }

/* Estado de "arrastar para preencher" — a classe fica no próprio
   contentor (.horas-extras-sheet), nunca no <body> da página, para
   nunca interferir com outras secções abertas ao mesmo tempo. */
.horas-extras-sheet.he-filling {
  cursor: crosshair;
  user-select: none;
}
.horas-extras-sheet .he-cell {
  position: relative;
  width: 100%;
  height: 34px;
}
.horas-extras-sheet .he-cell input {
  width: 100%;
  height: 100%;
}
.horas-extras-sheet .he-fill-handle {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--he-verde-escuro);
  border: 1px solid white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  cursor: crosshair;
  display: none;
  z-index: 5;
}
.horas-extras-sheet .he-cell:hover .he-fill-handle,
.horas-extras-sheet .he-cell:focus-within .he-fill-handle {
  display: block;
}


/* ======================================================================
   TRANSIÇÃO DE ANO (transicao-ano.html)
   ====================================================================== */
.ta-aviso-bloqueio p { color: var(--danger); font-weight: 600; }

.ta-texto-intro { color: var(--cinza); margin-bottom: 24px; }
.ta-texto-ajuda { color: var(--cinza); font-size: 13px; margin-bottom: 12px; }
.ta-texto-ajuda-espacado { margin-bottom: 16px; }

.ta-subtitulo { margin-bottom: 12px; }
.ta-subtitulo-espacado { margin: 28px 0 12px; }
.ta-subtitulo-apertado { margin-bottom: 4px; }

.ta-campo-ano { max-width: 200px; }
.ta-campo-senha { max-width: 320px; }

.ta-acoes-passo1 { text-align: right; margin-top: 24px; }
.ta-acoes-passo2 { display: flex; justify-content: space-between; margin-top: 24px; }

.ta-linha-turma {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cinza-claro);
}
.ta-linha-turma-nome { min-width: 160px; }
.ta-linha-turma-seta { color: var(--cinza); }
.ta-input-nome-destino { flex: 1; }

.ta-grupo-turma { margin-bottom: 20px; }
.ta-grupo-turma-titulo { margin-bottom: 8px; }
.ta-grupo-turma-contagem { color: var(--cinza); font-weight: 400; }

.ta-linha-aluno { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ta-linha-aluno-nome { flex: 1; }

.ta-caixa-confirmacao {
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--cinza-claro);
  border-radius: 0;
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}
.ta-aviso-irreversivel {
  font-weight: 600;
  color: var(--danger);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ta-aviso-irreversivel .material-symbols-outlined { font-size: 18px; }

.ta-msg { margin-top: 16px; }
.ta-msg-erro { color: var(--danger); }
.ta-msg-sucesso { color: var(--ok); }

@media (max-width: 640px) {
  .ta-linha-turma { flex-wrap: wrap; }
  .ta-linha-turma-nome { min-width: 0; }
  .ta-input-nome-destino { flex-basis: 100%; }
  .ta-acoes-passo2 { flex-direction: column; gap: 12px; align-items: stretch; }
  .ta-acoes-passo2 .btn { width: 100%; }
}

/* ==================================================================
   PÁGINA DOS PAIS (pais.html)
   Só tokens: sem cores fixas, funciona no tema claro e no escuro.
   ================================================================== */

/* utilitários de texto */
.txt-cinza { color: var(--cinza); }
.txt-danger { color: var(--danger-text); }

/* layout edge-to-edge (pais.html, inscricoes-admin.html) */
body.pagina-edge-a-edge { margin: 0; width: 100%; max-width: none; overflow-x: hidden; }

/* cabeçalho: título/educando à esquerda, selectores à direita */
.pais-linha-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.pais-acoes-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pais-select-wrapper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pais-breadcrumb-compacto { margin-bottom: 4px; }
.select-compacto { width: auto; padding: 8px 14px; border-radius: 0; font-size: .85rem; }
.pais-nome-aluno { color: var(--accent-2); font-weight: 700; }
#pais-aluno-info { margin-top: 2px; }

/* estados vazios e notas */
.pais-vazio { background: var(--surface); border-radius: 0; padding: 24px; }
.pais-nota-filtro { font-size: .82rem; margin-top: 14px; }
.pais-nota-leve { font-weight: 400; font-size: .78rem; }

/* cartão de filtros (dashboard do administrador) */
.pais-cartao { background: var(--card-bg); border: 1px solid var(--line); border-radius: 0; padding: 22px 24px; margin-bottom: 18px; }
.pais-cartao-titulo, .pais-secao-titulo { display: flex; align-items: center; font-size: 1.15rem; color: var(--fg); letter-spacing: -.02em; }
.pais-cartao-titulo { margin-bottom: 18px; }
.pais-secao-titulo { margin: 8px 0 14px; }
.pais-secao-titulo:not(:first-child) { margin-top: 40px; }
.pais-cartao-titulo .icon-inline, .pais-secao-titulo .icon-inline { color: var(--accent-2); }

/* cartões e tabelas */
.dash-val-compacto { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.2; }
.table-wrapper-espacado { margin-bottom: 8px; }
.pais-btn-gerir-acesso { padding: 7px 14px; font-size: .8rem; white-space: nowrap; }

/* comunicados */
.pais-comunicados-lista { display: flex; flex-direction: column; gap: 10px; }
.pais-comunicado-card { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border-radius: 0; padding: 18px 20px; }
.pais-comunicado-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); }
.pais-comunicado-titulo { display: block; color: var(--fg); margin-bottom: 4px; }
.pais-comunicado-texto { font-size: .9rem; line-height: 1.5; text-align: left; margin-bottom: 8px; }
.pais-comunicado-data { display: inline-flex; align-items: center; font-size: .75rem; }

/* modal "Gerir Acesso" (reutiliza .docente-modal, mas alinhado à esquerda e mais largo) */
.pais-modal-conteudo { max-width: 460px; text-align: left; }
.pais-modal-titulo { display: flex; align-items: center; font-size: 1.25rem; color: var(--fg); margin-bottom: 4px; padding-right: 36px; }
.pais-modal-subtitulo { font-size: .9rem; margin-bottom: 20px; text-align: left; }
.pais-login-preview { font-size: .78rem; }
.pais-login-preview strong { color: var(--fg); }
.pais-modal-msg { border-radius: 0; padding: 10px 14px; font-size: .85rem; margin-bottom: 14px; text-align: left; }
.pais-modal-acoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.pais-modal-btn { min-width: 110px; justify-content: center; }
.pais-modal-btn-azul { color: var(--fg); }

@media (max-width: 640px) {
  .pais-linha-cabecalho, .pais-acoes-topo, .pais-select-wrapper { align-items: stretch; width: 100%; }
  .pais-select-wrapper .btn, .pais-select-wrapper select { flex: 1 1 100%; width: 100%; justify-content: center; }
  .pais-comunicado-card { padding: 14px; }
  .pais-modal-acoes .btn { flex: 1 1 100%; }
}
.pais-modal-conteudo .form-group { margin-bottom: 16px; }
.pais-modal-acoes { margin-top: 20px; }

/* ==================================================================
   CONTACTO (contato.html)
   ================================================================== */
.contato-titulo-form { margin-bottom: 32px; }
.contato-btn-enviar { width: fit-content; }
.contato-msg { margin-top: 10px; font-size: .86rem; }

.contato-info-card .contato-redes { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(128, 128, 128, .35); }
.contato-info-card .contato-redes-titulo { color: var(--muted); font-size: .78rem; font-weight: 600; margin-bottom: 14px; }

.contato-mapa-secao { margin-top: 56px; }
.mapa-wrapper-contato { margin-top: 24px; min-height: 380px; }
.mapa-wrapper-contato > .material-symbols-outlined { font-size: 48px; }
.mapa-wrapper .mapa-endereco { font-size: 1rem; font-weight: 600; color: var(--fg); }

/* cartão de contacto mais compacto no telemóvel */
@media (max-width: 768px) {
  .contato-info-card-compacta { padding: 24px; }
  .contato-info-card-compacta h3 { font-size: 1.1rem; margin-bottom: 4px; }
  .contato-info-card-compacta p { font-size: .8rem; margin-bottom: 18px; }
  .contato-info-card-compacta .info-item { gap: 10px; margin-bottom: 14px; }
  .contato-info-card-compacta .info-icon { width: 32px; height: 32px; }
  .contato-info-card-compacta .info-icon svg { width: 15px; height: 15px; }
  .contato-info-card-compacta .info-item strong { font-size: .75rem; margin-bottom: 1px; }
  .contato-info-card-compacta .info-item span { font-size: .8rem; }
  .contato-info-card-compacta .social-link { width: 36px; height: 36px; border-radius: 0; }
  .contato-info-card-compacta .social-link svg { width: 14px; height: 14px; }
}

/* ==================================================================
   DESTAQUES (destaques.html): premiações e galeria
   ================================================================== */
.destaques-titulo-premiacoes { margin-bottom: 20px; }
.destaques-vazio { color: var(--cinza); padding: 24px; }
.destaques-erro { color: var(--danger-text); padding: 24px; }
.galeria-cabecalho { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }

/* premiações */
.premiacao-icone { font-size: 34px; margin-bottom: 10px; color: var(--accent-2); }
.premiacao-titulo { display: block; color: var(--fg); font-size: .95rem; }
.premiacao-aluno { color: var(--cinza); font-size: .82rem; }
.premiacao-tag { margin-top: 8px; }
.premiacao-foto-wrap { position: relative; width: 76px; height: 76px; margin: 0 auto 10px; }
.premiacao-foto { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-2); display: block; }
.premiacao-selo {
  position: absolute; bottom: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-2); color: var(--branco);
  display: flex; align-items: center; justify-content: center;
}
.premiacao-selo .material-symbols-outlined { font-size: 15px; }

/* filtros da galeria */
.galeria-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.galeria-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.galeria-pill {
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg);
  font: inherit; font-size: .82rem; font-weight: 600; padding: 8px 18px; border-radius: 0;
  cursor: pointer; transition: var(--trans); white-space: nowrap;
}
.galeria-pill:hover { border-color: var(--fg); }
.galeria-pill.activa { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg); }

/* fotos: mosaico com tamanhos variados */
.galeria-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 14px; }
.galeria-item.tam-grande { grid-column: span 2; grid-row: span 2; }
.galeria-item.tam-medio { grid-column: span 2; grid-row: span 1; }
.galeria-item.tam-pequeno { grid-column: span 1; grid-row: span 1; }
.galeria-item { border-radius: 0; overflow: hidden; position: relative; background: var(--surface-2); transition: var(--trans); cursor: pointer; }
.galeria-item:hover { transform: translateY(-3px); }
.galeria-item img.galeria-media { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.galeria-bento > .destaques-vazio { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .galeria-bento { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) { .galeria-bento { grid-auto-rows: 130px; } }

.galeria-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
  color: var(--branco); opacity: 0; transform: translateY(6px); transition: var(--trans); pointer-events: none;
}
.galeria-item:hover .galeria-caption { opacity: 1; transform: translateY(0); }
.galeria-caption strong { display: block; font-size: .85rem; line-height: 1.3; }
.galeria-caption span { font-size: .72rem; opacity: .8; }

.galeria-del-btn {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--danger); color: var(--branco); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: var(--trans); z-index: 2;
}
.galeria-item:hover .galeria-del-btn, .galeria-video-card:hover .galeria-del-btn { opacity: 1; }
.galeria-del-btn .material-symbols-outlined { font-size: 15px; }
@media (hover: none) { .galeria-del-btn { opacity: 1; } }

/* vídeos: fila horizontal própria */
.galeria-videos-secao { margin-top: 40px; margin-bottom: 40px; }
.galeria-videos-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.galeria-video-card {
  position: relative; flex: 0 0 280px; scroll-snap-align: start;
  background: var(--invert-bg); color: var(--invert-fg);
  border-radius: 0; overflow: hidden; transition: var(--trans);
}
.galeria-video-card:hover { transform: translateY(-3px); }
.galeria-video-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--invert-bg); overflow: hidden; }
.galeria-video-thumb-wrap img, .galeria-video-thumb-wrap iframe, .galeria-video-thumb-wrap video { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; cursor: pointer; }
.galeria-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent-2); color: var(--branco);
  display: flex; align-items: center; justify-content: center; pointer-events: none; transition: var(--trans);
}
.galeria-video-play .material-symbols-outlined { font-size: 28px; }
.galeria-video-card:hover .galeria-video-play { transform: translate(-50%, -50%) scale(1.08); }
.galeria-video-thumb-generico { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.galeria-video-thumb-generico .material-symbols-outlined { font-size: 40px; color: var(--muted); }
.galeria-video-info { padding: 14px 16px 16px; }
.galeria-video-info strong { display: block; font-size: .9rem; margin-bottom: 4px; }
.galeria-video-info span { font-size: .75rem; opacity: .72; }
@media (max-width: 480px) { .galeria-video-card { flex: 0 0 220px; } }

/* modal de fotos/vídeos (fundo sempre escuro, como um visualizador) */
.galeria-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .94); display: none; align-items: center; justify-content: center; z-index: 999; padding: 24px; }
.galeria-modal-overlay.aberto { display: flex; }
.galeria-modal-card { position: relative; width: 100%; max-width: 880px; background: #000; color: var(--branco); border-radius: 0; overflow: hidden; }
.galeria-modal-img-wrap { position: relative; width: 100%; max-height: 78vh; min-height: 240px; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }
.galeria-modal-conteudo { width: 100%; height: 100%; max-height: 78vh; display: flex; align-items: center; justify-content: center; }
.galeria-modal-img { max-width: 100%; max-height: 78vh; display: block; object-fit: contain; }
.galeria-modal-video-wrap { display: none; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; }
.galeria-modal-video-wrap iframe, .galeria-modal-video-wrap video { width: 100%; height: 100%; display: block; border: 0; }
.galeria-modal-nav, .galeria-modal-close {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--branco); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--trans);
}
.galeria-modal-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; z-index: 2; }
.galeria-modal-nav:hover { background: var(--accent-2); }
.galeria-modal-nav.prev { left: 14px; }
.galeria-modal-nav.next { right: 14px; }
.galeria-modal-close { top: 14px; right: 14px; width: 36px; height: 36px; z-index: 3; }
.galeria-modal-close:hover { background: rgba(255, 255, 255, .28); }
.galeria-modal-caption { padding: 16px 22px; background: #111; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.galeria-modal-caption strong { font-size: .95rem; }
.galeria-modal-caption .gm-evento { font-size: .78rem; opacity: .7; margin-left: 8px; }
.galeria-modal-counter { font-size: .78rem; opacity: .6; white-space: nowrap; }
@media (max-width: 600px) {
  .galeria-modal-nav { width: 38px; height: 38px; }
  .galeria-modal-nav .material-symbols-outlined { font-size: 20px; }
}

/* painel de gestão (só admin) */
.galeria-admin-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: .85rem; }
.galeria-admin-painel { display: none; background: var(--card-bg); border: 1px solid var(--line); border-radius: 0; padding: 24px; margin-bottom: 28px; }
.galeria-admin-painel.aberto { display: block; }
.galeria-tipo-switch { display: flex; gap: 8px; margin-bottom: 18px; }
.galeria-tipo-switch button {
  flex: 1; padding: 10px; border-radius: 0; border: 1px solid var(--line-strong); background: transparent;
  color: var(--fg); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: var(--trans);
}
.galeria-tipo-switch button.activa { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg); }
/* <label> é inline por defeito: precisa de block para ocupar a sua linha */
.galeria-upload-drop {
  display: block; width: 100%; box-sizing: border-box; margin-top: 18px; padding: 26px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line-strong); border-radius: 0; color: var(--cinza); transition: var(--trans);
}
.galeria-upload-drop:hover { border-color: var(--fg); background: var(--surface); }
.galeria-upload-drop .material-symbols-outlined { font-size: 30px; display: block; margin-bottom: 6px; }
.galeria-admin-msg { font-size: .85rem; margin-top: 12px; }

/* ==================================================================
   TURMAS (turmas.html): lista em acordeão, modal de secção,
   cartão do aluno, edição de foto. Só tokens.
   ================================================================== */

/* ---------- lista em acordeão ---------- */
.admin-list { border-top: 1px solid var(--line); }
.admin-list-item { border-bottom: 1px solid var(--line); }
.admin-list-header {
  display: flex; align-items: center; gap: 12px; padding: 18px 6px; cursor: pointer;
  color: var(--fg); font-weight: 600; font-size: 1rem; transition: var(--trans);
}
.admin-list-header:hover { background: var(--surface); }
.admin-list-seta, .admin-list-seta-sub { display: inline-flex; color: var(--fg); transition: transform .2s ease; flex-shrink: 0; }
.admin-list-item-unico .admin-list-seta { opacity: .5; }
.admin-list-item.aberto > .admin-list-header .admin-list-seta { transform: rotate(90deg); }
.admin-list-sub { display: none; }
.admin-list-item.aberto .admin-list-sub { display: block; }
.admin-list-subitem {
  display: flex; align-items: center; gap: 10px; padding: 15px 6px 15px 40px; color: var(--fg);
  font-weight: 500; font-size: .95rem; cursor: pointer; border-top: 1px solid var(--line); transition: var(--trans);
}
.admin-list-subitem:hover { background: var(--surface); }
@media (max-width: 560px) {
  .admin-list-header { font-size: .92rem; }
  .admin-list-subitem { font-size: .85rem; padding-left: 32px; }
}

/* ---------- modal de secção (ecrã inteiro, por baixo da barra do topo) ---------- */
.admin-modal-overlay { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .66); padding: var(--topbar-h) 0 0; overflow-y: auto; }
.admin-modal-overlay.aberto { display: block; }
.admin-modal { position: relative; background: var(--bg); width: 100%; min-height: calc(100vh - var(--topbar-h)); overflow: hidden; }
/* Cabeçalho do modal: mesma lógica da Área Administrativa — título à esquerda e "x" à direita, na mesma linha */
.admin-modal-head { position: absolute; top: 14px; left: 32px; right: 20px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.admin-modal-head strong { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 19px; font-weight: 700; color: var(--azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .admin-modal-head { top: 10px; left: 16px; right: 12px; } .admin-modal-head strong { font-size: 17px; } }
.admin-modal-close {
  appearance: none; border: none; background: transparent; color: var(--cinza); width: 34px; height: 34px; border-radius: 0;
  font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; transition: var(--trans);
  display: flex; align-items: center; justify-content: center;
}
.admin-modal-close:hover { background: rgba(14,42,82,0.08); color: var(--azul); }
.admin-modal-body { padding: 0 4px 28px; }
.admin-modal-acao-texto {
  background: none; border: none; padding: 0; margin: 0; color: var(--fg); font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.admin-modal-acao-texto .material-symbols-outlined { font-size: 17px; margin: 0; }
.admin-modal-secao { padding-top: 56px; padding-bottom: 0; }
.admin-modal-secao .container { padding-inline: var(--pad); }
.admin-modal-head-acoes { display: flex; align-items: center; gap: 14px; }

/* ---------- alunos por classe ---------- */
.classe-bloco { margin-bottom: 32px; }
.classe-bloco:last-child { margin-bottom: 0; }
.classe-titulo { display: inline-block; color: var(--fg); font-size: 1rem; font-weight: 700; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-2); }
.acc-espacado { margin-top: 36px; }
.col-ordem { width: 90px; }
.col-sexo { width: 130px; }
tr.linha-aluno-clicavel { cursor: pointer; transition: var(--trans); }
tr.linha-aluno-clicavel:hover { background: var(--surface); }
.celula-vazia { color: var(--cinza); }
.celula-erro { color: var(--danger-text); }

/* ---------- criar turma ---------- */
.nova-turma-form { margin-bottom: 28px; padding: 16px; background: var(--surface); border-radius: 0; border: 1px solid var(--line); }
.nova-turma-titulo { color: var(--fg); font-size: .95rem; margin-bottom: 12px; }
.nova-turma-titulo .material-symbols-outlined { font-size: 17px; }
.nova-turma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nova-turma-grid .form-group label { font-size: .78rem; }
.nova-turma-acoes { margin-top: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nova-turma-acoes .btn { padding: 9px 18px; font-size: .82rem; }
.btn-texto { background: none; border: none; padding: 0; color: var(--cinza); font: inherit; font-size: .82rem; cursor: pointer; }
.btn-texto:hover { color: var(--fg); }
.nova-turma-msg { font-size: .82rem; margin: 0; }
@media (max-width: 480px) { .nova-turma-grid { grid-template-columns: 1fr; } }

/* ---------- horários dos turnos ---------- */
.horarios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.horario-card { --c: var(--accent-3); background: var(--surface); border-radius: 0; padding: 32px; border-top: 4px solid var(--c); }
.horario-card-tarde { --c: var(--accent-2); }
.horario-icone { font-size: 32px; margin-bottom: 12px; color: var(--c); }
.horario-card h3 { color: var(--fg); font-size: 1.25rem; margin-bottom: 10px; }
.horario-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.horario-lista li { display: flex; justify-content: space-between; font-size: .88rem; color: var(--fg); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.horario-lista li:last-child { border-bottom: none; padding-bottom: 0; }

/* ---------- cartão do aluno ---------- */
.cartao-aluno-overlay { display: none; position: fixed; inset: 0; z-index: 2200; background: rgba(0, 0, 0, .72); padding: 24px 16px; align-items: center; justify-content: center; }
.cartao-aluno-overlay.aberto { display: flex; }
.cartao-aluno { position: relative; background: var(--bg); max-width: 560px; width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; }
#cartao-aluno-conteudo { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cartao-aluno-close {
  position: absolute; top: 12px; right: 14px; z-index: 2; appearance: none; border: none; background: rgba(255, 255, 255, .2); color: var(--branco);
  width: 32px; height: 32px; border-radius: 50%; font-size: 19px; line-height: 1; cursor: pointer; transition: var(--trans);
  display: flex; align-items: center; justify-content: center;
}
.cartao-aluno-close:hover { background: rgba(255, 255, 255, .35); }
.cartao-aluno-topo { padding: 28px 24px 44px; display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.cartao-aluno-foto, .cartao-aluno-foto-placeholder { width: 92px; height: 92px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .15); flex-shrink: 0; }
.cartao-aluno-foto { object-fit: cover; }
.cartao-aluno-foto-placeholder { display: flex; align-items: center; justify-content: center; color: var(--branco); }
.cartao-aluno-foto-placeholder .material-symbols-outlined { font-size: 36px; }
.cartao-aluno-topo h3 { color: var(--branco); font-size: 1.2rem; margin-bottom: 4px; }
.cartao-aluno-topo span { color: rgba(255, 255, 255, .8); font-size: .85rem; }
.cartao-aluno-corpo { padding: 24px; margin-top: -22px; background: var(--bg); border-radius: 0; overflow-y: auto; flex: 1; min-height: 0; }
.cartao-aluno-carregar { padding: 60px 24px; text-align: center; color: rgba(255, 255, 255, .85); }
.cartao-aluno-erro { padding: 40px 24px; color: var(--danger-text); }
.cartao-aluno-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; }
.cartao-aluno-campo strong { display: block; color: var(--muted); font-size: .72rem; font-weight: 600; margin-bottom: 3px; }
.cartao-aluno-campo span { color: var(--fg); font-size: .92rem; }
.cartao-aluno-campo-cheio { grid-column: 1 / -1; }
.cartao-aluno-campo input, .cartao-aluno-campo select, .cartao-aluno-campo textarea { width: 100%; padding: 8px 10px; font-size: .85rem; border-radius: 0; }
.cartao-aluno-campo textarea { min-height: 70px; }
.cartao-aluno-seccao-titulo { color: var(--fg); font-size: .85rem; font-weight: 700; margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.cartao-aluno-seccao-titulo:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.cartao-aluno-situacao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cartao-aluno-btn-eliminar { padding: 6px 12px; font-size: .78rem; flex-shrink: 0; border-color: var(--danger); color: var(--danger-text); }
.cartao-aluno-badge-situacao { margin-left: 8px; vertical-align: middle; }
.badge-margem { margin-left: 8px; }
.btn-outline-neutro { border-color: var(--line-strong); color: var(--fg); }
@media (max-width: 480px) {
  .cartao-aluno-situacao-cabecalho { flex-wrap: wrap; }
  .cartao-aluno-topo { padding: 22px 18px 40px; gap: 14px; }
  .cartao-aluno-foto, .cartao-aluno-foto-placeholder { width: 72px; height: 72px; }
  .cartao-aluno-corpo { padding: 20px; }
}

/* aviso quando o aluno já não está activo */
.cartao-aluno-aviso-situacao { margin: -22px 24px 18px; padding: 12px 16px; border-radius: 0; font-size: .82rem; line-height: 1.5; position: relative; z-index: 1; }
.cartao-aluno-aviso-situacao strong { display: block; margin-bottom: 2px; }
.cartao-aluno-aviso-situacao.vindo_transferido { background: color-mix(in srgb, var(--accent-3) 14%, transparent); color: var(--info-text); }
.cartao-aluno-aviso-situacao.transferido { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-text); }
.cartao-aluno-aviso-situacao.desistente { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger-text); }
.cartao-aluno-aviso-situacao.expulso { background: color-mix(in srgb, #7f1d1d 18%, transparent); color: var(--danger-text); }

/* situação do aluno (só em edição) */
.cartao-aluno-situacao-opcoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cartao-aluno-situacao-btn {
  flex: 1; min-width: 110px; padding: 10px 12px; border-radius: 0; border: 2px solid var(--line);
  background: transparent; color: var(--fg); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: var(--trans); text-align: center;
}
.cartao-aluno-situacao-btn.activo[data-valor="ativo"] { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: var(--ok); color: var(--ok-text); }
.cartao-aluno-situacao-btn.activo[data-valor="vindo_transferido"] { background: color-mix(in srgb, var(--accent-3) 14%, transparent); border-color: var(--accent-3); color: var(--info-text); }
.cartao-aluno-situacao-btn.activo[data-valor="transferido"] { background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: var(--warn); color: var(--warn-text); }
.cartao-aluno-situacao-btn.activo[data-valor="desistente"] { background: color-mix(in srgb, var(--danger) 13%, transparent); border-color: var(--danger); color: var(--danger-text); }
.cartao-aluno-situacao-btn.activo[data-valor="expulso"] { background: color-mix(in srgb, #7f1d1d 18%, transparent); border-color: #7f1d1d; color: var(--danger-text); }

.cartao-aluno-acoes { display: flex; gap: 10px; justify-content: flex-end; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cartao-aluno-acoes-info { color: var(--cinza); font-size: .78rem; margin-right: auto; align-self: center; }
.cartao-aluno-msg { font-size: .82rem; margin-top: 10px; text-align: right; }

/* editar foto (selo de lápis + popover + câmara) */
.cartao-aluno-foto-wrap { position: relative; flex-shrink: 0; }
.cartao-aluno-foto-editar .material-symbols-outlined { font-size: 15px; }
.cartao-aluno-foto-editar { position: absolute; bottom: -2px; right: -2px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; appearance: none; padding: 0; transition: var(--trans); }
.cartao-aluno-foto-editar:hover { transform: scale(1.08); }
.foto-popover { display: none; position: fixed; background: var(--bg); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--sombra-hover); padding: 8px; z-index: 2250; min-width: 190px; }
.foto-popover.aberto { display: block; }
.foto-popover button {
  display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; border: none; background: transparent; padding: 10px 12px;
  border-radius: 0; font: inherit; font-size: .85rem; color: var(--fg); cursor: pointer; text-align: left; transition: var(--trans);
}
.foto-popover button:hover { background: var(--surface); }
.foto-popover .material-symbols-outlined { font-size: 19px; color: var(--accent-3); }
.camera-foto-overlay { display: none; position: fixed; inset: 0; z-index: 2300; background: rgba(0, 0, 0, .8); align-items: center; justify-content: center; padding: 16px; }
.camera-foto-overlay.aberto { display: flex; }
.camera-foto-modal { background: var(--bg); border: 1px solid var(--line); border-radius: 0; max-width: 420px; width: 100%; padding: 20px; text-align: center; }
.camera-foto-modal h4 { color: var(--fg); font-size: 1rem; margin-bottom: 14px; }
.camera-foto-box { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #000; border-radius: 0; overflow: hidden; margin-bottom: 16px; }
.camera-foto-box video, .camera-foto-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-foto-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6); }
.camera-foto-placeholder .material-symbols-outlined { font-size: 48px; }
.camera-foto-erro { color: var(--danger-text); font-size: .82rem; margin-bottom: 12px; }
.camera-foto-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.icone-a-rodar { animation: spin 1s linear infinite; }

/* ==================================================================
   PROFESSOR (professor.html): caderneta, pauta, relatórios, gráficos
   ================================================================== */
/* ============================================
   CADERNETA / PAUTA DA TURMA — mesmo modelo de lista em
   accordion (.admin-list) usado na Área Administrativa
   (inscricoes-admin.html): linha com seta SVG + título,
   que expande a secção correspondente ao clicar.
   ============================================ */
body.pagina-professor .admin-list {
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  margin-bottom: 40px;
  background: var(--card-bg);
  border-radius: 0;
  overflow: hidden;
}
body.pagina-professor .admin-list-item {
  border-bottom: 1px solid var(--borda);
}
body.pagina-professor .admin-list-item:last-child {
  border-bottom: none;
}
body.pagina-professor .admin-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  color: var(--fg);
  font-weight: 600;
  font-size: 15.5px;
  transition: var(--trans);
}
body.pagina-professor .admin-list-header:hover { background: var(--cinza-claro); }
body.pagina-professor .admin-list-seta {
  display: inline-flex;
  color: var(--fg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
body.pagina-professor .admin-list-item.aberto > .admin-list-header .admin-list-seta { transform: rotate(90deg); }
body.pagina-professor .admin-list-sub {
  display: none;
  padding: 0 20px 24px;
}
body.pagina-professor .admin-list-item.aberto .admin-list-sub { display: block; }

/* ============================================
   RELATÓRIOS DA ÁREA PEDAGÓGICA — accordion aninhado
   (.acc) para os Mapas Estatísticos, sub-itens
   de histórico (.admin-list-subitem) do Relatório do Dia, e
   grelha de gráficos (Chart.js). Estilos trazidos tal e qual
   de inscricoes-admin.html, onde estas secções viviam antes
   da divisão Financeiro (Área Administrativa) / Pedagógico
   (Área Pedagógica, aqui).
   ============================================ */
body.pagina-professor .acc { background: var(--card-bg); border: 1px solid var(--borda); border-radius: 0; margin-bottom: 20px; overflow: hidden; }
body.pagina-professor .acc-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; cursor: pointer; user-select: none; transition: var(--trans); }
body.pagina-professor .acc-header:hover { background: var(--cinza-claro); }
body.pagina-professor .acc-titulo { display: flex; align-items: flex-start; gap: 14px; }
body.pagina-professor .acc-seta { display: inline-flex; font-size: 13px; color: var(--fg); transition: transform 0.2s ease; margin-top: 4px; flex-shrink: 0; }
body.pagina-professor .acc.aberto .acc-seta { transform: rotate(90deg); }
body.pagina-professor .acc-body { display: none; padding: 0 24px 24px; border-top: 1px solid var(--borda); }
body.pagina-professor .acc.aberto .acc-body { display: block; padding-top: 20px; }
body.pagina-professor .acc-contador { font-size: 13px; color: var(--cinza); font-weight: 600; white-space: nowrap; flex-shrink: 0; }

body.pagina-professor .admin-list-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 6px 15px 40px;
  color: var(--fg);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  border-top: 1px solid var(--borda);
  transition: var(--trans);
}
body.pagina-professor .admin-list-subitem:hover { background: var(--cinza-claro); }
body.pagina-professor .admin-list-badge {
  margin-left: auto;
  font-size: 12px;
  color: var(--cinza);
  font-weight: 600;
  background: var(--cinza-claro);
  padding: 2px 10px;
  border-radius: 0;
  flex-shrink: 0;
}
body.pagina-professor .admin-list-badge:empty { display: none; }
body.pagina-professor .admin-list-subitem:hover .admin-list-badge { background: var(--superficie); }

.graficos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.grafico-card {
  background: var(--card-bg);
  border: 1px solid var(--borda);
  border-radius: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.grafico-card-largo { grid-column: span 2; }
.grafico-card h4 {
  font-size: 13.5px;
  color: var(--cinza);
  font-weight: 600;
  margin-bottom: 14px;
  align-self: flex-start;
}
.grafico-donut-wrapper {
  position: relative;
  width: 100%;
  max-width: 190px;
  height: 190px;
  margin: 0 auto;
}
.grafico-donut-centro {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 800;
  color: var(--fg);
  pointer-events: none;
}
.grafico-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 220px;
}
.grafico-legenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  text-align: left;
}
.grafico-legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto);
}
.grafico-legenda-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.grafico-legenda-item strong { margin-left: auto; color: var(--fg); }
.grafico-legenda-sub {
  font-size: 12px;
  color: var(--cinza);
  margin-top: 12px;
}
@media (max-width: 900px) {
  .graficos-grid { grid-template-columns: 1fr; }
  .grafico-card-largo { grid-column: span 1; }
}
@media (max-width: 640px) {
  .graficos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grafico-card-largo { grid-column: span 2; }
  .grafico-card { padding: 12px 10px; }
  .grafico-card h4 { font-size: 11.5px; margin-bottom: 8px; }
  .grafico-donut-wrapper { max-width: 110px; height: 110px; }
  .grafico-donut-centro { font-size: 15px; }
  .grafico-canvas-wrapper { height: 150px; }
  .grafico-legenda-item { font-size: 11px; }
  .grafico-legenda-sub { font-size: 10.5px; margin-top: 8px; }
}

/* ============================================
   PAUTA DE FREQUÊNCIA — "Visualizar Notas". Réplica do
   modelo impresso da escola: caixa de "Visto" no canto,
   cabeçalho com logótipo, tabela com 1º/2º/3º/F por
   disciplina (só as já preenchidas) + NF + Resultado, e o
   bloco de assinaturas/conselho de nota no rodapé.
   ============================================ */
.pauta-wrapper {
  background: var(--superficie);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 28px;
  overflow-x: auto;
}
.pauta-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pauta-visto {
  min-width: 170px;
  font-size: 12px;
  color: var(--texto);
}
.pauta-visto span { display: block; margin-bottom: 34px; }
.pauta-visto .pauta-linha-assinatura {
  border-top: 1px solid var(--texto);
  padding-top: 4px;
  max-width: 220px;
}
.pauta-titulo-bloco { flex: 1; text-align: center; min-width: 260px; }
.pauta-titulo-bloco img { height: 54px; margin-bottom: 6px; }
.pauta-titulo-bloco h3 {
  color: var(--fg);
  font-size: 15px;
  letter-spacing: 0.3px;
  margin: 0;
}
.pauta-titulo-bloco p { font-size: 11px; color: var(--texto); margin: 2px 0 0; }
.pauta-titulo-bloco .pauta-titulo-doc { font-weight: 700; font-size: 13.5px; margin-top: 8px; }
.pauta-info-linha {
  text-align: center;
  font-size: 12.5px;
  color: var(--texto);
  margin-bottom: 18px;
}
.pauta-cabecalho-oficial { align-items: center; }
.pauta-brasao-wrap { min-width: 70px; text-align: center; }
.pauta-brasao { height: 64px; width: auto; }
.pauta-titulo-bloco .pauta-rep { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; margin: 0; }
.pauta-titulo-bloco .pauta-min { font-size: 11.5px; margin: 2px 0 6px; }
/* O "p" global é justificado com a última linha à esquerda: no cabeçalho da pauta
   cada linha é uma frase curta, por isso tem de ficar centrada como o resto do bloco. */
.pauta-titulo-bloco p { text-align: center; text-align-last: center; }
.pauta-visto .assinatura-inst p { text-align: inherit; text-align-last: inherit; }
/* Cabeçalho oficial no ecrã: emblema ao centro, por cima do texto; a assinatura da
   directora fica no canto superior direito (como na pauta exportada). */
.pauta-cabecalho-oficial { flex-direction: column; justify-content: flex-start; gap: 8px; position: relative; }
.pauta-cabecalho-oficial .pauta-titulo-bloco { flex: 0 1 auto; width: 100%; }
.pauta-cabecalho-oficial .pauta-visto { position: absolute; top: 0; right: 0; }
@media (max-width: 900px) { .pauta-cabecalho-oficial .pauta-visto { position: static; } }
.pauta-info-oficial {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
  font-size: 12.5px;
}
.pauta-info-oficial span { white-space: nowrap; }
.pauta-tabela-oficial th { font-size: 10px; }
.pauta-wrapper td.pauta-genero { text-align: center; font-weight: 600; }
.pauta-wrapper td.pauta-observacao { min-width: 0; width: 34px; text-align: center; font-weight: 700; }
.pauta-wrapper th.pauta-th-obs { width: 34px; min-width: 0; }
.pauta-wrapper td.pauta-obs-editavel { cursor: pointer; }
.pauta-wrapper td.pauta-obs-editavel:hover { background: rgba(0,0,0,.06); }
.pauta-wrapper td.pauta-mf { font-weight: 700; text-align: center; }
.pauta-obs-nota { margin-top: 4px; }
.pauta-wrapper td.pauta-faltas { text-align: center; color: var(--cinza); }
.pauta-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.pauta-wrapper thead { background: transparent; }
.pauta-wrapper th,
.pauta-wrapper td {
  border: 1px solid var(--line-strong);
  padding: 5px 6px;
  text-align: center;
  color: var(--texto);
}
.pauta-wrapper thead th {
  background: var(--cinza-claro);
  color: var(--fg);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.pauta-wrapper td.pauta-nome-aluno { text-align: left; font-weight: 600; white-space: nowrap; }
.pauta-wrapper td.pauta-nf { font-weight: 700; color: var(--fg); }
/* ---- Pauta editável — a pauta funciona como a Caderneta: as
   células com nota são campos de edição directa. ---- */
.pauta-wrapper .pauta-input {
  width: 56px; padding: 4px 2px; text-align: center; border: 1px solid var(--line-strong);
  border-radius: 0; font: inherit; font-weight: 700; color: var(--fg); background: var(--superficie);
}
.pauta-wrapper .pauta-input:focus { border-color: var(--fg); outline: none; }
.pauta-wrapper .pauta-input-alterado { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: var(--warn); }
.pauta-wrapper .pauta-select-qual {
  width: 82px; padding: 4px 2px; text-align: center; border: 1px solid var(--line-strong);
  border-radius: 0; font: inherit; font-size: 11px; font-weight: 700; color: var(--fg); background: var(--superficie);
}
.pauta-wrapper .pauta-select-qual:focus { border-color: var(--fg); outline: none; }
.pauta-wrapper .pauta-select-qual:disabled { background: var(--cinza-claro); color: var(--cinza); cursor: not-allowed; opacity: 0.85; }

/* ============================================
   CAMPOS DE NOTA TRANCADOS (Caderneta / Lançar Notas) — depois de
   gravada, uma nota já preenchida (ACS1, ACS2, AT ou MT) fica
   bloqueada para o(a) professor(a) da disciplina; só o(a)
   Director(a) de Turma e a Administração continuam a poder
   alterá-la. Um campo vazio nunca fica trancado. Ver JS em
   renderTabelaNotas().
   ============================================ */
.input-nota:disabled,
.input-mt:disabled {
  background: var(--cinza-claro);
  color: var(--cinza);
  cursor: not-allowed;
  opacity: 0.85;
  border-color: var(--cinza-claro);
}
.celula-nota-trancada { position: relative; }
.celula-nota-trancada .icone-trancado {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 12px;
  color: var(--cinza);
  pointer-events: none;
}
.celula-nota-trancada input { padding-right: 18px ; }
.pauta-actions-bar {
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
.pauta-actions-bar > * { flex: 0 0 auto; scroll-snap-align: start; }
.pauta-actions-bar::-webkit-scrollbar { height: 5px; }
.pauta-actions-bar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; }
#sel-trimestre-fichas {
  padding:10px 12px; border-radius:0; border:1px solid var(--cinza-claro);
  font-size:13px; color:var(--fg); background:var(--bg);
}
.pauta-wrapper td.pauta-resultado { font-weight: 700; }
.pauta-wrapper td.pauta-resultado.aprovado { color: var(--ok-text); }
.pauta-wrapper td.pauta-resultado.reprovado { color: var(--danger-text); }
.pauta-wrapper td.pauta-resultado.transferido { color: var(--warn-text); }
.pauta-wrapper td.pauta-resultado.desistente { color: var(--danger-text); }
.pauta-wrapper td.pauta-resultado.expulso { color: var(--fg); }
.pauta-wrapper tfoot td { text-align: left; font-size: 10.5px; }
.pauta-wrapper tfoot td.pauta-conselho-label { font-weight: 700; color: var(--fg); }
.pauta-rodape { margin-top: 28px; font-size: 12.5px; color: var(--texto); }
.pauta-rodape .pauta-linha-obs {
  display: block;
  border-bottom: 1px solid var(--texto);
  height: 24px;
  margin-bottom: 6px;
}
.pauta-assinatura-final { text-align: center; margin-top: 44px; font-size: 12.5px; color: var(--texto); }
.pauta-assinatura-final .pauta-linha-assinatura {
  border-top: 1px solid var(--texto);
  width: 280px;
  margin: 44px auto 6px;
}
@media (max-width: 640px) {
  .pauta-cabecalho { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- utilitários (substituem estilos inline repetidos) ---------- */
.mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-20 { margin-top: 20px; } .mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-40 { margin-bottom: 40px; }
.fs-12 { font-size: .75rem; } .fs-13 { font-size: .82rem; } .fs-135 { font-size: .85rem; } .fs-14 { font-size: .88rem; }
.fw-600 { font-weight: 600; }
.txt-ok { color: var(--ok-text); }
.txt-fg { color: var(--fg); }
.p-24 { padding: 24px; }
.w-70 { width: 70px; } .w-19 { width: 19%; } .w-20 { width: 20%; } .w-26 { width: 26%; } .w-35 { width: 35%; }
.max-w-280 { max-width: 280px; } .max-w-820 { max-width: 820px; } .max-w-1100 { max-width: 1100px; }
.btn-compacto { padding: 9px 12px; font-size: .82rem; }
.btn-mini-perigo { padding: 4px 10px; font-size: .72rem; border-color: var(--danger-text); color: var(--danger-text); }
.flex-linha { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.prof-bloco { border: 1px solid var(--line); border-radius: 0; padding: 20px; margin-bottom: 20px; }
.prof-subtitulo { color: var(--fg); font-size: .97rem; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.prof-subtitulo-14 { margin-bottom: 14px; }
.prof-subtitulo-0 { margin-bottom: 0; }
.prof-camara-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6); }
.prof-camara-placeholder .material-symbols-outlined { font-size: 48px; }
.prof-icone-aviso { color: var(--accent-2); font-size: 20px; margin-top: 1px; }


/* ==========================================================================
   RITMO VERTICAL DO INDEX — aplicado a todas as páginas
   Medido no painel do index (.dash-section):
     • navbar → 1º bloco ............ 14px
     • entre blocos ................. 14px  (e 12–16px entre cartões)
     • último bloco → rodapé ........ clamp(24px, 3vw, 40px)
   Seletores com ">" + classe (0,2,1) para vencerem as regras inline
   ".main-content .section--tight" (0,2,0) que algumas páginas trazem.
   ========================================================================== */
:root {
  --gap-bloco: 14px;                  /* espaço entre blocos / topo */
  --gap-cartoes: 16px;                /* entre cartões de uma grelha */
  --gap-fim: clamp(24px, 3vw, 40px);  /* fundo da página, antes do rodapé */
}
.main-content > .page-header,
.main-content > .pais-hero { padding: var(--gap-bloco) 0 0; }
.page-header-inner > .breadcrumb:last-child { margin-bottom: 0; }

.main-content > section,
.main-content > section.section,
.main-content > section.section--tight { padding-block: var(--gap-bloco) 0; }
.main-content > section.sobre-section { padding-block: var(--gap-bloco); } /* faixa com fundo precisa de respiro dos dois lados */
.main-content > section:last-of-type { padding-bottom: var(--gap-fim); }

/* inscrição online */
.inscricao-section .section-title { margin-bottom: var(--gap-bloco); }
.inscricao-grid { margin-top: var(--gap-bloco); gap: var(--gap-cartoes); }
.inscricao-form, .inscricao-camera { padding: 22px; }
.inscricao-enviar { margin-top: var(--gap-bloco); }


/* ==========================================================================
   DEPOIS DO LOGIN: Contacto e Sobre não aparecem em nenhuma parte do site.
   A classe .logado-hint é posta no <html> por um pequeno script em cada
   página (e pelo index) quando existe sessão iniciada.
   ========================================================================== */
html.logado-hint li:has(> a[href^="contato.html"]),
html.logado-hint li:has(> a[href^="sobre.html"]),
html.logado-hint a[href^="contato.html"],
html.logado-hint a[href^="sobre.html"] { display: none; }


/* ==========================================================================
   NAVBAR: sem "luz" de sessão, sem nome do utilizador, sem avatar,
   ícones planos (definições/mensagens/notificações) e botão "Sair" a
   condizer com o ecrã de referência enviado pelo cliente.
   A estrutura final de #nav-login-item (ver auth-guard.js/definicoes.js):
     [.acs-nav-icons: engrenagem + notificações + mensagens]
     [.acs-nav-divider]
     [#user-status: existe no DOM mas fica sem nada visível — sem luz,
      sem avatar, sem nome — serve só de espaçador para empurrar o
      "Sair" para a direita]
     [.btn-login "Sair"]
   ========================================================================== */

/* a "luz" verde de sessão iniciada não aparece em nenhuma secção */
.status-dot { display: none !important; }

/* o nome do utilizador não aparece em nenhuma secção (nem gaveta, nem barra) */
.user-status-name { display: none !important; }

@media (min-width: 1024px) {
  /* ícones de definições / mensagens / notificações: sem círculo nem
     contorno — só o traço do ícone, mais pequeno, como no ecrã enviado */
  .acs-settings-btn,
  .acs-header-icon {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 28px !important;
    height: 28px !important;
    color: var(--muted) !important;
  }
  .acs-settings-btn:hover,
  .acs-header-icon:hover { color: var(--fg) !important; }
  .acs-settings-btn .material-symbols-outlined,
  .acs-header-icon .material-symbols-outlined { font-size: 19px !important; }
  .acs-header-badge { top: -3px !important; right: -3px !important; }

  /* espaço mais apertado entre os 3 ícones, já sem contorno próprio */
  .acs-nav-icons { gap: 12px; }

  /* linhas divisórias mais discretas, do tamanho dos ícones achatados */
  .acs-nav-divider { min-height: 20px; }

  /* botão "Sair": contorno claro, ícone e texto a vermelho (já é o último
     elemento da barra, por vir depois do avatar na ordem do documento) */
  #nav-login-item.logado .btn-login {
    background: transparent !important;
    color: #ef4444 !important;
    border: 1px solid var(--line) !important;
  }
  #nav-login-item.logado .btn-login:hover {
    background: color-mix(in srgb, #ef4444 8%, transparent) !important;
    border-color: #ef4444 !important;
  }
}

/* ============================================================
   Bloco de texto legal/rodapé do formulário — partilhado entre
   index.html e sobre.html (antes duplicado em CSS embutido em
   cada página; centralizado aqui em 22/09 para as duas páginas
   ficarem alinhadas com o resto do site).
   ============================================================ */
.legal{margin-top:20px;padding-top:14px;border-top:1px solid rgba(128,128,128,.35);display:grid;gap:8px;color:var(--muted)}
@media (min-width:1024px){
  .legal{grid-template-columns:1fr 2fr;gap:24px}
}

/* ============================================================
   PÁGINA INICIAL (index.html) – hero, pílulas e painel pós-login
   ============================================================ */

.pill-group{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.btn-pill{
  display:inline-flex;align-items:center;gap:10px;border-radius:0;
  padding:16px 26px;font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;transition:transform .2s ease,opacity .2s ease;
}

.btn-pill:hover{transform:translateY(-2px)}

.btn-pill--solid{background:var(--accent-2);color:#fff;box-shadow:0 10px 30px -8px rgba(224,72,155,.65)}

.btn-pill--solid svg{width:15px;height:15px;transition:transform .25s ease}

.btn-pill--solid:hover svg{transform:translateX(3px)}

.btn-pill--outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85)}

.hero-entrar-mobile{display:none}

.btn-entrar-mini{
  box-sizing:border-box;border:1.5px solid var(--accent);border-radius:0;
  padding:0 20px;gap:10px;
}

.btn-entrar-mini .cap{width:30px;height:30px}

.btn-entrar-mini .cap .ico{width:11px;height:11px}

.btn-entrar-mini .label{font-size:.8rem;color:#fff}

@media (max-width:699px){
.hero-entrar-mobile{display:flex;justify-content:center;margin-top:12px}
.pill-group .btn-pill{box-sizing:border-box;height:46px;padding:0 24px}
.btn-entrar-mini{height:46px}
}

/* .arrow, .course:hover .arrow, .form, .form input e
   .form input::placeholder NÃO precisam de ser repetidos: os
   componentes ".course .arrow" e ".cta-band .form ..." já existem,
   completos e idênticos, no style.css partilhado (o bloco de
   inscrição do index usa exatamente essa estrutura .cta-band > .form).
   Aplicam-se automaticamente. */

/* ------------------------------------------------------------
   Painel pós-login: mostra/esconde o painel (#dashboard) e as
   secções públicas (.pub). Regras próprias do index — style.css
   tem uma .dash-card diferente (cartões KPI do pais.html), por isso
   as regras do painel da homepage estão restritas a #dashboard,
   para não alterarem os cartões das outras páginas. */
html.logado-hint .pub{display:none}
html.logado-hint #dashboard{display:block}
#dashboard[hidden]{display:none}
#dash-stats:empty{display:none}
#dash-charts:empty{display:none}
#dashboard .dash-card{border:1px solid var(--line);border-radius:0;padding:22px 22px 20px;background:var(--bg)}
#dashboard .dash-card::before{content:none}
#dashboard .dash-card:hover{transform:none}
#dashboard .dash-card h4{font-size:.98rem;font-weight:700;letter-spacing:-.01em;margin:0}
#dashboard .dash-card .dash-card-sub{font-size:.8rem;color:var(--muted);margin:3px 0 14px}
@media (max-width:699px){
  .dash-card:has(#dash-cal-grid){display:none}
}

.dash-section{padding-block:14px clamp(24px,3vw,40px)}

.dash-kpis{margin-top:14px}

.dash-grid{margin-top:14px}

.dash-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}

.dash-titulo{margin:2px 0 0;font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:clamp(1.5rem,2.6vw,2.2rem)}

.dash-top-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.dash-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:0;padding:7px 16px;font-size:.83rem;color:var(--muted);white-space:nowrap}

.dash-chip strong{color:var(--fg);font-weight:600}

.dash-kpis{display:grid;gap:8px;grid-template-columns:repeat(4,1fr)}

.dash-kpi{position:relative;border:1px solid var(--line);border-radius:0;padding:12px 8px;background:var(--surface);display:flex;flex-direction:column;gap:6px;min-height:0;justify-content:flex-start}

.dash-kpi .ic{width:26px;height:26px;border-radius:0;display:grid;place-items:center;background:var(--bg);color:var(--fg);flex:none}

.dash-kpi .n{font-size:1.05rem;font-weight:800;letter-spacing:-.03em;line-height:1;display:block}

.dash-kpi .lbl{font-size:.6rem;line-height:1.25;color:var(--muted);display:block;margin-top:2px}

.dash-grid{display:grid;gap:16px;grid-template-columns:1fr}

.dash-col-main{display:grid;gap:16px}

.dash-col-side{display:grid;gap:16px;align-content:start}

.dash-chart-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}

.dash-chart-wrap{position:relative;height:190px;flex:1 1 180px;min-width:160px}

.dash-chart-wrap.bar{height:220px;flex-basis:100%}

.dash-chart-centro{position:absolute;inset:0;display:grid;place-items:center;font-size:1.3rem;font-weight:800;letter-spacing:-.03em;pointer-events:none}

.dash-legend{display:flex;flex-direction:column;gap:9px;font-size:.85rem;flex:1 1 160px;min-width:150px}

.dash-legend .row{display:flex;align-items:center;gap:8px}

.dash-legend .dot{width:9px;height:9px;border-radius:50%;flex:none}

.dash-legend .name{color:var(--muted);flex:1}

.dash-legend strong{color:var(--fg);white-space:nowrap}

.dash-empty{font-size:.85rem;color:var(--muted);padding:30px 0;text-align:center}

.dash-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}

.dash-cal-head button{border:1px solid var(--line);background:none;color:inherit;width:26px;height:26px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:.95rem;line-height:1;padding:0}

.dash-cal-head button:hover{border-color:var(--fg)}

.dash-cal-label{font-weight:700;font-size:.85rem;letter-spacing:-.01em;text-transform:capitalize}

.dash-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}

.dash-cal-grid .dow{font-size:.64rem;color:var(--muted);padding-bottom:5px;text-transform:uppercase;letter-spacing:.04em}

.dash-cal-day{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:0;font-size:.78rem;color:var(--fg)}

.dash-cal-day.outside{color:var(--muted);opacity:.32}

.dash-cal-day.today{background:var(--fg);color:var(--bg);font-weight:700}

.dash-cal-day.has-event::after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--accent-2)}

.dash-cal-day.today.has-event::after{background:var(--bg)}

.dash-agenda-list{display:grid;gap:2px}

.dash-agenda-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}

.dash-agenda-item:first-child{border-top:0;padding-top:0}

.dash-agenda-date{flex:none;width:42px;text-align:center;border-radius:0;background:var(--surface);padding:6px 0}

.dash-agenda-date .d{font-weight:800;font-size:1rem;line-height:1;display:block}

.dash-agenda-date .m{font-size:.6rem;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px}

.dash-agenda-body{min-width:0}

.dash-agenda-body h5{margin:0;font-size:.87rem;font-weight:600;letter-spacing:-.01em}

.dash-agenda-body p{margin:2px 0 0;font-size:.78rem;color:var(--muted)}

@media (min-width:700px){
.dash-kpis{gap:12px}
.dash-kpi{border-radius:0;padding:20px 22px;gap:12px;min-height:118px;justify-content:space-between}
.dash-kpi .ic{width:34px;height:34px;border-radius:0}
.dash-kpi .n{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.dash-kpi .lbl{font-size:.83rem;margin-top:4px}
}

@media (max-width:699px){
.dash-chip{padding:5px 11px;font-size:.72rem;gap:4px}
}

@media (min-width:1024px){
.dash-grid{grid-template-columns:1.55fr 1fr}
}

/* ------------------------------------------------------------
   Painel (desktop): o calendário fica compacto e da mesma altura
   que o primeiro gráfico. As colunas deixam de ser caixas
   independentes (display:contents) e os cartões passam a
   partilhar as mesmas linhas da grelha: 1.º gráfico + calendário
   na linha 1, 2.º gráfico + compromissos na linha 2, etc. Assim a
   altura acompanha sempre o gráfico, seja qual for o perfil. */
@media (min-width:1024px){
.dash-grid{grid-auto-flow:row dense}
.dash-col-main,.dash-col-side{display:contents}
.dash-col-main>*{grid-column:1}
.dash-col-side>*{grid-column:2}
}

/* Cartão do calendário, versão compacta */
.dash-card:has(#dash-cal-grid){display:flex;flex-direction:column;padding:16px 18px 14px}
.dash-card:has(#dash-cal-grid) h4{font-size:.9rem;margin-bottom:10px}
#dash-cal-sub{display:none}
.dash-cal-head{margin-bottom:6px}
.dash-cal-head button{width:24px;height:24px}
.dash-cal-grid{flex:1;gap:2px;grid-template-rows:auto;grid-auto-rows:minmax(22px,1fr)}
.dash-cal-grid .dow{padding-bottom:2px;font-size:.6rem}
.dash-cal-day{aspect-ratio:auto;font-size:.72rem;border-radius:0}
.dash-cal-day.has-event::after{bottom:2px;width:3px;height:3px}

/* ============================================================
   Movido do <style> inline do index.html (ordem original mantida)
   ============================================================ */

/* ===== Factos: 6 blocos horizontais empilhados (position: sticky) ===== */
#impacto{
  --stack-top:120px;   /* onde o 1.º bloco prende (altura do cabeçalho + folga) */
  --stack-step:36px;   /* quanto de cada bloco fica visível por baixo do seguinte */
  --stats-gap:24px;
  overflow:visible;    /* overflow:hidden/clip nos pais desactiva o sticky */
}
#impacto .wrap{overflow:visible}
#impacto .stats{
  display:flex;
  flex-direction:column;
  gap:var(--stats-gap);
  grid-template-columns:none;
}
#impacto .stat{
  width:100%;
  min-height:260px;
  display:flex;
  align-items:center;
  box-sizing:border-box;
}
#impacto .stat h3{max-width:900px}

@media (prefers-reduced-motion:no-preference){
  #impacto .stat{position:sticky}
  #impacto .stat:nth-child(1){top:calc(var(--stack-top) + 0*var(--stack-step));z-index:1}
  #impacto .stat:nth-child(2){top:calc(var(--stack-top) + 1*var(--stack-step));z-index:2}
  #impacto .stat:nth-child(3){top:calc(var(--stack-top) + 2*var(--stack-step));z-index:3}
  #impacto .stat:nth-child(4){top:calc(var(--stack-top) + 3*var(--stack-step));z-index:4}
  #impacto .stat:nth-child(5){top:calc(var(--stack-top) + 4*var(--stack-step));z-index:5}
  #impacto .stat:nth-child(6){top:calc(var(--stack-top) + 5*var(--stack-step));z-index:6}
  /* sombra que respeita o canto cortado */
  #impacto .stat:nth-child(n+2){filter:drop-shadow(0 -8px 18px rgba(0,0,0,.10))}
}
@media (max-width:700px){
  #impacto{--stack-step:24px;--stats-gap:16px}
  #impacto .stat{min-height:0}
}

/* ===== Hero: botão do WhatsApp (à direita, na mesma linha do INSCREVA-SE) ===== */
.hero{position:relative}
.hero > .wrap{position:relative;z-index:1}
.hero-acoes{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-wa{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;padding:10px;box-sizing:border-box;
  background:#fff;border-radius:0;box-shadow:0 8px 32px rgba(0,0,0,.12);
  text-decoration:none;cursor:pointer;transition:box-shadow .2s;
  animation:iconFloat 6s ease-in-out infinite;
}
.hero-wa svg{width:100%;height:100%;display:block}
.hero-wa:hover{box-shadow:0 10px 36px rgba(37,211,102,.45)}
@keyframes iconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){ .hero-wa{animation:none} }

/* Hero: tudo até ao botão INSCREVA-SE visível sem rolar (cabeçalho ≈ 100px) */
section.pub.section.hero{
  min-height:calc(100vh - var(--hero-top,100px))!important;      /* --hero-top = altura real do cabeçalho (medida em JS) */
  min-height:calc(100svh - var(--hero-top,100px))!important;
  padding-top:24px!important;padding-bottom:24px!important;
  display:flex;align-items:center;justify-content:center;
}
section.pub.section.hero > .wrap{width:100%}
section.pub.section.hero .h-xl{font-size:clamp(30px,min(5.2vw,7.5vh),68px);line-height:1.1}
section.pub.section.hero .mt-l{margin-top:clamp(14px,3vh,32px)}
section.pub.section.hero .lead{font-size:clamp(15px,2.2vh,19px)}

/* Hero com a imagem images/fundo.png (película escura à esquerda para o texto ler bem) */
section.pub.section.hero{
  background-color:#000;
  background-image:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.26) 55%,rgba(0,0,0,.05) 100%),url("images/fundo.png");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#fff;
}
section.pub.section.hero .h-xl{color:#fff}
@media (max-width:900px){
  section.pub.section.hero{background-image:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.6) 100%),url("images/fundo.png")}
}

/* Hero alinhado à esquerda, com espaço livre à direita */
section.pub.section.hero{text-align:left}
section.pub.section.hero > .wrap > *{max-width:min(100%,820px);margin-left:0;margin-right:auto}
section.pub.section.hero .measure{margin-inline:0}
section.pub.section.hero > .wrap > .hero-acoes{max-width:none;margin-right:0}
section.pub.section.hero .pill-group{justify-content:flex-start}
@media (max-width:699px){ section.pub.section.hero .hero-entrar-mobile{justify-content:flex-start} }

/* ===== Cursos: cartões em acordeão (lógica dos cartões 01–04 da Menzzo) ===== */
.cx-panel{background:#000;border-radius:0;padding:20px 24px 24px}
.cx-hint{margin:0 0 16px;text-align:center;font-size:14px;color:rgba(255,255,255,.55)}
.cx{display:flex;gap:24px;height:340px}
.cx-card{
  --g:linear-gradient(135deg,#2fb0dc,#2b6fd8);
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  padding:40px;border-radius:0;
  background:#131313;border:1px solid rgba(255,255,255,.06);color:#fff;
  cursor:pointer;outline:none;
  transition:flex-grow .6s cubic-bezier(.22,1,.36,1),background-color .4s,color .4s,border-color .4s;
}
.cx-card.g1{--g:linear-gradient(135deg,#2fb0dc,#2b6fd8)}
.cx-card.g2{--g:linear-gradient(135deg,#8a5cdc,#d0449a)}
.cx-card.g3{--g:linear-gradient(135deg,#e8a02a,#dc5a7a)}
.cx-card.g4{--g:linear-gradient(135deg,#14b886,#2ec4c4)}
.cx-card.is-active{flex-grow:2.1;background:#fff;color:#111;border-color:#fff;cursor:default}
.cx-card:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px #2b6fd8}

.cx-head{display:flex;align-items:center;gap:14px}
.cx-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;border-radius:0;
  background:#fff;color:#111;font-size:22px;font-weight:500;letter-spacing:-.05em;
  transition:background .4s,color .4s;
}
.cx-card.is-active .cx-num{background:var(--g);color:#fff}

/* título curto visível só nos cartões recolhidos */
.cx-mini{
  position:absolute;left:40px;right:28px;bottom:36px;
  font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1.2;
  color:rgba(255,255,255,.72);transition:opacity .25s;
}
.cx-card.is-active .cx-mini{opacity:0}

/* conteúdo (aparece no cartão activo) */
.cx-body{
  margin-top:26px;min-width:340px;max-width:520px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s,transform .4s,visibility 0s .3s;
}
.cx-card.is-active .cx-body{opacity:1;visibility:visible;transform:none;transition:opacity .45s .25s,transform .5s .25s,visibility 0s}
.cx-title{margin:0;font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.cx-desc{margin:14px 0 0;font-size:15px;line-height:1.55;color:rgba(0,0,0,.66)}
.cx-tags{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.cx-tags li{padding:8px 14px;border:1px solid rgba(0,0,0,.12);border-radius:0;font-size:14px;color:rgba(0,0,0,.7)}

/* botão de seta (ligação à inscrição) */
.cx-go{
  position:absolute;top:34px;right:34px;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--g);color:#fff;text-decoration:none;
  opacity:0;visibility:hidden;transform:scale(.8);
  transition:opacity .3s,transform .4s,visibility 0s .3s;
}
.cx-card.is-active .cx-go{opacity:1;visibility:visible;transform:none;transition:opacity .4s .3s,transform .5s .3s,visibility 0s}
.cx-go:hover{filter:brightness(1.1)}

/* telemóvel/tablet: acordeão vertical (como a Menzzo faz nos breakpoints pequenos) */
@media (max-width:900px){
  .cx-panel{border-radius:0;padding:16px}
  .cx{flex-direction:column;height:auto;gap:12px}
  .cx-card{flex:none;padding:22px}
  .cx-mini{position:static;flex:1;font-size:18px}
  .cx-body{
    display:grid;grid-template-rows:0fr;margin-top:0;min-width:0;max-width:none;transform:none;
    transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1),opacity .3s,margin-top .5s,visibility 0s .5s;
  }
  .cx-inner{overflow:hidden;min-height:0}
  .cx-card.is-active .cx-body{grid-template-rows:1fr;margin-top:20px;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1),opacity .45s .15s,margin-top .5s,visibility 0s}
  .cx-card.is-active .cx-mini{display:none}
  .cx-title{font-size:26px}
  .cx-go{top:16px;right:16px;width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .cx-card,.cx-body,.cx-go,.cx-num,.cx-mini{transition:none!important}
}

/* ============================================================
   PÁGINA SOBRE (sobre.html) – migalhas e lista de valores
   ============================================================ */

.crumbs-line{padding-block:16px 0}

/* O style.css partilhado já estiliza ".valor-card" (a caixa) para todo o
   site, mas com uma lista de marcadores (list-style:disc) pensada para
   outras páginas. Repetimos o mesmo seletor composto ".valor-card
   .valor-lista" (mesma especificidade) para que, estando mais abaixo no
   ficheiro, o layout em grelha sem marcadores desta página continue a
   prevalecer. */
.valor-card .valor-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}

.valor-lista li{font-size:.92rem;color:var(--muted);line-height:1.45}

.valor-lista li strong{color:var(--fg)}

/* ============================================================
   ÁREA ADMINISTRATIVA (inscricoes-admin.html) – cartões no modelo
   dos cursos do index (.cx-*): ícone no lugar do número, badge,
   sub-secções dentro do cartão expandido.
   ============================================================ */
/* compacto: as duas linhas cabem no ecrã sem rolar */
.cx-panel.admin-cx{padding:14px 16px 16px;border-radius:0}
.admin-cx .cx-hint{margin:0 0 10px;font-size:13px}
.admin-cx .cx{height:200px;gap:14px}
.admin-cx .cx + .cx{margin-top:14px}
.admin-cx .cx-card{padding:22px 26px;border-radius:0}
.admin-cx .cx-num{min-width:38px;height:38px}
.admin-cx .cx-mini{left:26px;right:20px;bottom:22px;font-size:17px}
.admin-cx .cx-body{margin-top:16px}
.admin-cx .cx-title{font-size:24px}
.admin-cx .cx-tags{margin-top:14px;gap:8px}
.admin-cx .cx-go{top:18px;right:18px;width:42px;height:42px}

/* tema: claro = painel branco + cartões cinza (ativo preto); escuro = painel preto + cartões escuros (ativo branco).
   Tudo vem das variáveis do tema (--bg, --surface, --fg, --invert-*). */
.cx-panel.admin-cx{background:var(--bg);border:1px solid var(--line)}
.admin-cx .cx-hint{color:var(--muted)}
.admin-cx .cx-card{background:var(--surface);color:var(--fg);border-color:color-mix(in srgb,var(--fg) 7%,transparent)}
.admin-cx .cx-card.is-active{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.admin-cx .cx-card:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent-3)}
.admin-cx .cx-mini{color:color-mix(in srgb,var(--fg) 72%,transparent)}
.admin-cx .cx-num{background:var(--invert-bg);color:var(--invert-fg)}
.admin-cx .cx-card.is-active .cx-num{background:var(--g);color:#fff}
.admin-cx .cx-sub{color:var(--invert-fg);border-color:color-mix(in srgb,var(--invert-fg) 28%,transparent);padding:7px 14px;font-size:13px}
.admin-cx .cx-sub:hover,.admin-cx .cx-sub:focus-visible{background:var(--g);color:#fff;border-color:transparent}
.cx-num .material-symbols-outlined{font-size:24px;letter-spacing:0;line-height:1}
.cx-badge{background:var(--accent-2);color:#fff;border-radius:0;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.cx-badge:empty{display:none}
.cx-subs li{padding:0;border:0;border-radius:0}
.cx-sub{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgba(0,0,0,.12);border-radius:0;background:transparent;color:rgba(0,0,0,.78);font:inherit;font-size:14px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.cx-sub .material-symbols-outlined{font-size:19px;letter-spacing:0}
.cx-sub:hover,.cx-sub:focus-visible{background:var(--g);color:#fff;border-color:transparent;outline:none}
button.cx-go{border:0;cursor:pointer;font:inherit}
@media (max-width:900px){
  .admin-cx .cx{height:auto}
  .admin-cx .cx + .cx{margin-top:12px}
}

/* ============================================================
   ÁREA PEDAGÓGICA (professor.html) – os 6 itens do acordeão passam a
   cartões (.cx-*, ver bloco da Área Administrativa); o cabeçalho em
   lista fica escondido e a secção aberta aparece por baixo dos cartões.
   ============================================================ */
/* prefixo body.pagina-professor: as regras do professor (0,2,1) vencem seletores mais curtos */
body .admin-list-item--cx > .admin-list-header{display:none}
body .admin-list-item--cx,body.pagina-professor .admin-list-item--cx{border-bottom:0}
/* fechado: sem moldura nem margem (não sobra caixa vazia); aberto: mantém o cartão com a secção */
body .admin-list:has(> .admin-list-item--cx:not(.aberto)){margin:0;border:0;background:none;box-shadow:none}
.admin-cx .cx-card[hidden]{display:none}
.admin-cx .cx:not(:has(.cx-card:not([hidden]))){display:none}
.cx-panel.prof-cx{margin-bottom:20px}

/* ===== GALERIA: carrossel contínuo de fotos ===== */
.galeria{padding:16px 0 56px;overflow:hidden}
.galeria[hidden]{display:none}
/* menos espaço entre a faixa de fotos e as secções vizinhas */
body section.galeria#galeria{padding-block:0;margin-block:-12px}
.galeria-track{display:flex;width:max-content;padding:10px 0;animation:galeria-scroll var(--galeria-dur,40s) linear infinite}
.galeria-track:hover{animation-play-state:paused}
.galeria-item{width:300px;height:420px;margin-right:20px;border-radius:0;overflow:hidden;flex-shrink:0;border:1px solid rgba(0,0,0,.06);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.galeria-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.galeria-item:hover img{transform:scale(1.05)}
@keyframes galeria-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){.galeria-item{width:210px;height:300px}}
@media (prefers-reduced-motion:reduce){.galeria{overflow-x:auto}.galeria-track{animation:none}}

/* ===== Hero: foto a cobrir o ecrã todo; WhatsApp no canto inferior direito ===== */
section.pub.section.hero > .wrap{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
section.pub.section.hero .hero-wa{position:absolute;right:var(--gutter);bottom:0;margin:0}
@media (max-width:699px){ section.pub.section.hero .hero-wa{width:52px;height:52px} }

/* ===== Hero: foto FIXA (parallax) — a foto fica parada e o conteúdo/secções passam por cima ===== */
section.pub.section.hero{background-attachment:fixed;background-position:center center}
/* Telemóveis/tablets (toque): o iOS ignora "fixed" e Android costuma ficar pesado -> foto normal */
@media (hover:none) and (pointer:coarse){ section.pub.section.hero{background-attachment:scroll} }
@media (prefers-reduced-motion:reduce){ section.pub.section.hero{background-attachment:scroll} }

/* ===== Cursos (index): segue o tema do site =====
   Escuro = exactamente como antes (painel preto, cartões escuros, activo branco).
   Claro  = painel branco, cartões cinza claro, activo preto (igual à área administrativa). */
:root{--cx-pb:var(--line);--cx-desc-a:78%;--cx-tag-b:30%;--cx-tag-a:82%}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--cx-pb:transparent;--cx-desc-a:66%;--cx-tag-b:12%;--cx-tag-a:70%} }
:root[data-theme="dark"]{--cx-pb:transparent;--cx-desc-a:66%;--cx-tag-b:12%;--cx-tag-a:70%}

.cx-panel{background:var(--bg);border:1px solid var(--cx-pb)}
.cx-hint{color:color-mix(in srgb,var(--fg) 55%,transparent)}
.cx-card{
  background:color-mix(in srgb,var(--fg) 7.5%,var(--bg));
  border-color:color-mix(in srgb,var(--fg) 6%,transparent);
  color:var(--fg);
}
.cx-card.is-active{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.cx-card:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent-3,#2b6fd8)}
.cx-num{background:var(--invert-bg);color:var(--invert-fg)}
.cx-card.is-active .cx-num{background:var(--g);color:#fff}
.cx-mini{color:color-mix(in srgb,var(--fg) 72%,transparent)}
.cx-desc{color:color-mix(in srgb,var(--invert-fg) var(--cx-desc-a),transparent)}
.cx-tags li{border-color:color-mix(in srgb,var(--invert-fg) var(--cx-tag-b),transparent);color:color-mix(in srgb,var(--invert-fg) var(--cx-tag-a),transparent)}


/* ------------------------------------------------------------------
   Alinhamento com a Menzzo — título principal no telemóvel (36 px)
   ------------------------------------------------------------------ */
@media (max-width: 809.98px) {
  .h-xl, .hero-content h1 { font-size: 2.25rem; }
}

/* Filtros dos Mapas Estatísticos Oficiais: tudo na mesma linha (ecrã largo) */
.mapas-filtros{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.mapas-filtros select,.mapas-filtros input{min-width:0;width:100%;text-overflow:ellipsis}
@media (max-width:1100px){.mapas-filtros{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.mapas-filtros{grid-template-columns:1fr}}

/* Listas de alunos em dropdown: classe > turma */
.lista-dd{border:1px solid var(--line);border-radius:0;background:var(--surface);margin-bottom:10px;overflow:hidden}
.lista-dd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-weight:700;color:var(--fg)}
.lista-dd>summary::-webkit-details-marker{display:none}
.lista-dd>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;flex-shrink:0;margin-right:4px}
.lista-dd[open]>summary::before{transform:rotate(45deg)}
.lista-dd-titulo{flex:1}
.lista-dd-contagem{font-weight:500;font-size:.8rem;opacity:.7;white-space:nowrap}
.lista-dd>summary:hover{background:var(--surface-2)}
.lista-dd-corpo{padding:4px 18px 16px}
.lista-dd-turma{margin:10px 0 0;background:transparent}
.lista-dd-turma>summary{padding:10px 14px;font-size:.92rem}
.lista-dd-turma .lista-dd-corpo{padding:2px 14px 12px}

/* Cartão do aluno mais largo em ecrãs grandes (menos linhas, sem precisar de rolar).
   A altura máxima mantém-se; no telemóvel nada muda. */
@media (min-width: 769px) {
  .cartao-aluno { max-width: 1040px; }
  .cartao-aluno-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Botão "Comprovativo" com menu (Carregar / Tirar foto / Escanear) ---------- */
.comprovativo-wrap { position: relative; display: inline-block; }
.comprovativo-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 190px; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; }
.comprovativo-menu button { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); font: inherit; font-size: .9rem; cursor: pointer; text-align: left; }
.comprovativo-menu button:last-child { border-bottom: 0; }
.comprovativo-menu button:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.comprovativo-menu .material-symbols-outlined { font-size: 20px; }
.comprovativo-preview { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.comprovativo-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: 0; border: 1px solid var(--line); }
.comprovativo-estado { margin-top: 12px; font-size: .85rem; color: var(--cinza); }
.comprovativo-estado a { color: var(--fg); text-decoration: underline; }

/* Câmara do comprovativo em ecrã inteiro */
.camera-cheia { padding: 0; background: #000; align-items: stretch; justify-content: stretch; z-index: 3000; }
.camera-cheia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.camera-cheia-barra { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(0,0,0,.65), transparent); }
.camera-cheia-barra .btn { width: 96px; }
.camera-cheia-disparo { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.camera-cheia-disparo:active { background: #fff; }
.comprovativo-ficheiro { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 0; font-size: .85rem; max-width: 240px; }
.comprovativo-ficheiro span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Hero (index): imagem clara, película escura SÓ atrás do texto =====
   - a película passa a ser um pseudo-elemento (acompanha o texto ao rolar,
     em vez de ficar presa à imagem fixa);
   - no ecrã largo cobre apenas a coluna do texto e desvanece até ao
     transparente; o resto da foto fica com as cores naturais;
   - WhatsApp passa a círculo verde; destaques na base do hero. */
section.pub.section.hero{
  background-image:url("images/fundo.png");
}
section.pub.section.hero::before{
  content:'';position:absolute;top:0;bottom:0;left:0;z-index:0;pointer-events:none;
  width:min(100%,1100px);
  background:
    linear-gradient(90deg,rgba(8,20,30,.74) 0%,rgba(8,20,30,.60) 40%,rgba(8,20,30,.30) 70%,rgba(8,20,30,0) 100%),
    radial-gradient(ellipse 80% 40% at 0% 100%,rgba(8,20,30,.40) 0%,rgba(8,20,30,0) 100%);
}
@media (max-width:900px){
  section.pub.section.hero{background-image:url("images/fundo.png")}
  section.pub.section.hero::before{
    width:100%;
    background:linear-gradient(180deg,rgba(8,20,30,.22) 0%,rgba(8,20,30,.50) 40%,rgba(8,20,30,.55) 100%);
  }
}
section.pub.section.hero .h-xl,
section.pub.section.hero .lead{text-shadow:0 2px 18px rgba(0,0,0,.35)}

/* WhatsApp: círculo turquesa (mesma cor dos ícones) com o símbolo branco */
section.pub.section.hero .hero-wa{
  width:70px;height:70px;padding:16px;border-radius:50%;
  background:var(--accent);bottom:16px;
  box-shadow:0 10px 28px rgba(59,207,218,.40),0 4px 14px rgba(0,0,0,.25);
}
section.pub.section.hero .hero-wa svg path{fill:#fff}
section.pub.section.hero .hero-wa:hover{box-shadow:0 12px 34px rgba(59,207,218,.60),0 4px 14px rgba(0,0,0,.25)}
@media (max-width:699px){ section.pub.section.hero .hero-wa{width:56px;height:56px;padding:13px} }

/* Destaques na base do hero */
section.pub.section.hero .h-xl{margin-top:auto}
section.pub.section.hero > .wrap > .hero-destaques{
  max-width:none;margin:auto 0 24px 0;padding:28px 0 0;list-style:none;
  display:flex;align-items:center;flex-wrap:wrap;gap:18px 0;
}
.hero-destaques li{display:flex;align-items:center;gap:14px;color:#fff}
.hero-destaques li + li{margin-left:40px;padding-left:40px;border-left:1px solid rgba(255,255,255,.55)}
.hd-ico{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.hd-ico svg{width:24px;height:24px;display:block}
.hd-ico--ciano{background:var(--accent)}
.hd-ico--rosa{background:var(--accent-2)}
.hd-txt{font-size:15px;font-weight:500;line-height:1.35;text-shadow:0 1px 10px rgba(0,0,0,.45)}
@media (max-width:699px){
  section.pub.section.hero > .wrap > .hero-destaques{gap:14px 22px;padding-right:72px}
  .hero-destaques li + li{margin-left:0;padding-left:0;border-left:0}
  .hd-ico{width:40px;height:40px}
  .hd-ico svg{width:20px;height:20px}
  .hd-txt{font-size:13.5px}
}

/* ===== Sem texto em gradiente: tudo o que era "cor composta" passa a uma cor sólida =====
   Para mudar a cor de todos os destaques de uma vez, altere só --destaque. */
:root{ --destaque: var(--accent); }
.grad,
.dash-card .dash-val,
.hero-content h1 em,
.stat-num,
.sobre-fundacao strong,
.niveis-lista strong,
.linha-tempo strong{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:var(--destaque);
}

/* ===== Factos (index): cartões com foto, todos com as mesmas proporções =====
   .stat--dir -> foto à direita | .stat--esq -> foto à esquerda
   A foto mantém as cores originais; só os últimos ~25% junto ao texto esvanecem.
   Fotos: images/factos/facto-1.webp … facto-6.webp (sem ficheiro -> cartão sem foto). */
#impacto{ --stack-step:30px; --stats-gap:16px; --facto-pad:clamp(22px,2.6vw,36px); --facto-foto:36%; --facto-fade:26%; }
#impacto .stat{
  min-height:156px;
  padding:20px var(--facto-pad);
  border-radius:0;
  display:flex; align-items:center;
  overflow:hidden;
}
#impacto .stat::before{ display:none; }           /* sem cantos diagonais */
#impacto .stat--esq{ padding-left:calc(var(--facto-foto) + var(--facto-pad)); }
#impacto .stat--esq.sem-foto{ padding-left:var(--facto-pad); }
#impacto .stat-body{ position:relative; z-index:1; width:100%; max-width:60ch; }
#impacto .stat--dir .stat-body{ max-width:min(60ch,calc(100% - var(--facto-foto) - 8px)); }

/* hierarquia: número + rótulo -> descrição -> ligação */
#impacto .stat-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-bottom:6px; }
#impacto .stat .n{
  display:block; margin:0;
  font-size:clamp(1.6rem,2.2vw,2rem); font-weight:800; letter-spacing:-.04em; line-height:1;
  color:var(--destaque);
}
#impacto .stat-rot{ font-size:1.05rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
#impacto .stat p{ margin:0; text-align:left; font-size:1.02rem; font-weight:500; line-height:1.45; letter-spacing:-.01em; color:var(--muted-strong, inherit); }
#impacto .stat-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-size:.92rem; font-weight:700; letter-spacing:-.01em; color:inherit; text-decoration:none;
  border-bottom:1.5px solid var(--accent); padding-bottom:1px;
}
#impacto .stat-link svg{ transition:transform .2s ease; }
#impacto .stat-link:hover svg,
#impacto .stat-link:focus-visible svg{ transform:translateX(3px); }

/* foto: mesma largura, mesmo recorte e mesmo esvanecimento em todos os cartões */
#impacto .stat-media{ position:absolute; top:0; bottom:0; width:var(--facto-foto); z-index:0; pointer-events:none; }
#impacto .stat--dir .stat-media{
  right:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 var(--facto-fade));
          mask-image:linear-gradient(to right,transparent 0%,#000 var(--facto-fade));
}
#impacto .stat--esq .stat-media{
  left:0;
  -webkit-mask-image:linear-gradient(to left,transparent 0%,#000 var(--facto-fade));
          mask-image:linear-gradient(to left,transparent 0%,#000 var(--facto-fade));
}
#impacto .stat-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; }
#impacto .stat.sem-foto .stat-media{ display:none; }

@media (max-width:700px){
  #impacto{ --stack-step:16px; --stats-gap:12px; }
  #impacto .stat,
  #impacto .stat--esq{ flex-direction:column; align-items:stretch; padding:0 0 20px; min-height:0; }
  #impacto .stat-media{
    position:relative; order:-1; width:100%; height:120px;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%) !important;
            mask-image:linear-gradient(to bottom,#000 70%,transparent 100%) !important;
  }
  #impacto .stat-body,
  #impacto .stat--dir .stat-body{ max-width:none; padding:0 20px; }
  #impacto .stat.sem-foto,
  #impacto .stat--esq.sem-foto{ padding-top:20px; }
}


/* ===== Factos: teste de cores (cinzento, azul, rosa) e títulos sem número =====
   Para voltar ao normal, apagar este bloco. */
#impacto .stat .stat-rot{ display:block; margin:0 0 6px; max-width:none; font-size:1.2rem; font-weight:800; letter-spacing:-.025em; line-height:1.2; }
#impacto{ --facto-azul:#ffffff; --facto-rosa:#fbe3ee; }
#impacto .stat{ background:var(--facto-azul); box-shadow:0 0 0 1px rgba(0,0,0,.07); }   /* cartões brancos */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #impacto{ --facto-azul:#12253f; --facto-rosa:#34162a; }
}
:root[data-theme="dark"] #impacto{ --facto-azul:#12253f; --facto-rosa:#34162a; }

/* Factos: menos espaço vazio acima e abaixo do título */
#impacto.section{ padding-block:clamp(20px,3vw,40px); }
#impacto .stats.mt-l{ margin-top:clamp(14px,2vw,24px); }


/* ======================================================================
   AZUL DA MARCA — só no tema claro, e só em dois sítios:
   (1) ícones em "selo"; (2) botões ao passar o rato (hover).
   O resto do site, o tema escuro e o rodapé ficam como estavam.
   Degradê de referência: botão "Funcionários" (#2fa9dc → #2b78d8).
   ====================================================================== */
:root {
  --brand-1: #2fa9dc;
  --brand-2: #2b78d8;
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
}

/* (1) Ícones em selo */
:root:not([data-theme="dark"]) .icon,
:root:not([data-theme="dark"]) .tag-icon,
:root:not([data-theme="dark"]) .valor-icon,
:root:not([data-theme="dark"]) .acs-msg-modal-icone {
  background: var(--brand-grad);
  color: #fff;
}
:root:not([data-theme="dark"]) .section-tag .icon-inline { color: var(--brand-2); }

/* (2) Botões: azul ao passar o rato */
:root:not([data-theme="dark"]) .btn-azul:hover,
:root:not([data-theme="dark"]) .welcome-btn:hover,
:root:not([data-theme="dark"]) .carousel-arrow:hover {
  background: var(--brand-grad);
  border-color: var(--brand-2);
  color: #fff;
}
:root:not([data-theme="dark"]) .btn-outline:hover,
:root:not([data-theme="dark"]) .btn-outline-azul:hover {
  background: var(--brand-grad);
  border-color: var(--brand-2);
  color: #fff;
}


/* ---------- Definições: Backup / Ano lectivo / Transição no mesmo modelo
   das linhas de Minha Conta e dos documentos legais ---------- */
.acs-def-acao { width: 100%; border: 0; font-family: inherit; text-align: left; -webkit-appearance: none; appearance: none; }
.acs-def-acao:disabled { opacity: .5; cursor: wait; }
.acs-def-section .acs-def-backup-status { font-size: .82rem; color: var(--fg); margin: -4px 2px 12px; }
.acs-def-ano-linha { cursor: default; padding-top: 8px; padding-bottom: 8px; }
.acs-def-ano-linha select { width: auto; min-width: 130px; padding: 7px 14px; border-radius: 0; font-size: .85rem; }

/* Janela "Transição de Ano" dentro das Definições (antes: transicao-ano.html) */
.acs-ta-modal { max-width: 720px; }
.acs-ta-modal .section-title { font-size: 1.35rem; margin-bottom: 10px; }


/* ======================================================================
   MENU: painéis a abrir como na referência (EPM-CELP)
   • o painel cola-se por baixo do item da barra (sem folga), cantos
     rectos, sombra suave, itens em maiúsculas separados por linhas finas;
   • grupos com sub-opções mostram ▶ e abrem o 2º painel ao lado, colado;
   • na barra, o item aberto / com o rato por cima / activo ganha uma
     linha de destaque no fundo da barra e uma seta ▾;
   • a gaveta (menu lateral) usa os mesmos painéis, colados à sua borda.
   O posicionamento em si está no script.js (acsPosicionarSubmenu).
   ====================================================================== */
:root { --nav-accent-bg: linear-gradient(90deg, var(--brand-1, #2fa9dc), var(--brand-2, #2b78d8)); }
:root[data-theme="dark"] { --nav-accent-bg: var(--fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-accent-bg: var(--fg); } }

/* ---------- painel ---------- */
.nav-submenu {
  width: auto; min-width: 250px; max-width: min(92vw, 380px);
  padding: 0; gap: 0;
  border: 0; border-radius: 0;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .35);
  transform: translateY(-4px);
}
.nav-submenu-nivel2 { width: auto; min-width: 250px; padding: 0; }
.nav-submenu-nivel2::before { display: none; }

.nav-submenu > li { border-bottom: 1px solid var(--line); }
.nav-submenu > li:last-child { border-bottom: 0; }
.nav-submenu-grupo { margin-top: 0; }

.nav-submenu li a:not(.btn-login),
.nav-submenu-grupo-rotulo {
  display: flex; align-items: center; width: 100%;
  min-height: 52px !important;
  padding: 0 30px !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--fg) !important;
  border-radius: 0 !important;
  white-space: nowrap;
}
.nav-submenu li a:not(.btn-login):hover { background: var(--surface) !important; }
.nav-submenu-grupo:hover > .nav-item-principal > .nav-submenu-grupo-rotulo,
.nav-submenu-grupo.aberto > .nav-item-principal > .nav-submenu-grupo-rotulo { background: var(--surface); }
/* sem ícones nos painéis (a referência é só texto) */
.nav-submenu .nav-submenu-icon { display: none !important; }

/* ---------- gatilho: seta sólida (no lugar do botão redondo com chevron) ---------- */
.nav-submenu-toggle {
  width: 22px; height: auto; align-self: stretch; min-height: 24px;
  margin: 0 8px 0 0; border-radius: 0; background: none;
}
.nav-submenu-toggle:hover { background: none; color: var(--fg); }
.nav-submenu-toggle svg { display: none; }
.nav-submenu-toggle::after {
  content: ''; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;            /* ▶ */
}
.nav-submenu-grupo > .nav-item-principal { align-items: stretch; }
.nav-submenu-grupo .nav-submenu-toggle { width: 44px; margin: 0; }
.nav-submenu-grupo .nav-submenu-toggle:hover,
.nav-submenu-grupo:hover .nav-submenu-toggle,
.nav-submenu-grupo.aberto .nav-submenu-toggle { color: var(--fg); }

/* ---------- gaveta (menu lateral): o item aberto fica marcado ---------- */
@media (max-width: 1023.98px) {
  .nav-tem-submenu.aberto > .nav-item-principal > a:not(.btn-login) { background: var(--surface); }
}

/* ---------- barra de computador (≥1024px) ---------- */
@media (min-width: 1024px) {
  .app-shell > header:not(.header) nav,
  .app-shell > header:not(.header) nav ul { align-self: stretch; }

  .app-shell > header:not(.header) #main-nav > li:not(#nav-login-item) {
    position: relative; display: flex; flex-direction: row; align-items: stretch; align-self: stretch;
  }
  .app-shell > header:not(.header) #main-nav > li:not(#nav-login-item) > .nav-item-principal { width: auto; height: 100%; align-items: stretch; }
  .app-shell > header:not(.header) #main-nav > li:not(#nav-login-item) a:not(.btn-login) {
    display: flex; align-items: center; height: 100%; padding: 0 10px;
    border-bottom: 0 !important;
  }
  /* linha de destaque no fundo da barra */
  .app-shell > header:not(.header) #main-nav > li:not(#nav-login-item)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: var(--nav-accent-bg); opacity: 0; transition: opacity .2s var(--ease);
  }
  .app-shell > header:not(.header) #main-nav > li:not(#nav-login-item):hover::after,
  .app-shell > header:not(.header) #main-nav > li:not(#nav-login-item).aberto::after,
  .app-shell > header:not(.header) #main-nav > li:not(#nav-login-item):has(a.active)::after { opacity: 1; }

  /* seta ▾ ao lado do nome */
  .app-shell > header:not(.header) #main-nav > li > .nav-item-principal > .nav-submenu-toggle {
    width: 12px; margin: 0 8px 0 -6px;
  }
  .app-shell > header:not(.header) #main-nav > li > .nav-item-principal > .nav-submenu-toggle::after {
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; border-bottom: 0;                 /* ▾ */
  }
}

/* tema escuro: borda fina, para o painel (preto) se distinguir do fundo */
:root[data-theme="dark"] .nav-submenu { border: 1px solid var(--line); }

/* ecrãs estreitos: nomes longos quebram linha em vez de encostar na seta */
@media (max-width: 480px) {
  .nav-submenu li a:not(.btn-login),
  .nav-submenu-grupo-rotulo { white-space: normal; padding: 8px 18px !important; }
  .nav-submenu-grupo-rotulo { min-width: 0; }
}


/* ======================================================================
   MODELO PAINEL (experiência: Área do Professor)
   Mesmo modelo do painel do menu: caixas planas de cantos retos,
   linhas finas a separar as linhas, tudo o que é título em MAIÚSCULAS,
   ▶ nas linhas que abrem. Ativa-se com  <body class="modelo-painel">;
   para levar o modelo a outra página, basta acrescentar essa classe.
   ====================================================================== */

/* cantos retos em todas as caixas que usam os raios do tema */
body.modelo-painel {
  --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;
  --radius: 0; --radius-sm: 0;
}
/* ...e nas que têm o raio escrito à mão */
.modelo-painel :is(.section-tag, .cx-badge, .admin-list-badge, .disciplina, .select-compacto,
                   .stat, .admin-stat-card, .dash-kpi, .dash-card, .docente-foto-popover button,
                   .cx-panel, .cx-card) { border-radius: 0; }
.modelo-painel .main-content :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { border-radius: 0; }

/* títulos em MAIÚSCULAS */
.modelo-painel :is(h1, h2, h3, h4, h5, h6, .section-title, .section-tag, .cx-mini, th) {
  text-transform: uppercase;
  letter-spacing: .02em;
}
.modelo-painel :is(h3, h4, h5, h6, .section-tag, .cx-mini, th) { font-weight: 600; }

/* ===== Boas-vindas (logo a seguir ao hero) ===== */
/* O "p" global é justificado com a última linha à esquerda (linha 237);
   aqui tudo é centrado, incluindo a última linha. */
.boas-vindas .wrap{ display:flex; flex-direction:column; align-items:center; }
.boas-vindas h2{ max-width:26ch; margin:0; text-wrap:balance; text-align:center; }
.boas-vindas .bv-sub{ margin:14px 0 0; max-width:48ch; text-align:center; text-align-last:center; text-wrap:balance; font-style:italic; font-weight:500; font-size:clamp(1.05rem,1.6vw,1.4rem); line-height:1.35; color:var(--accent); }
.boas-vindas .bv-sub::after{ content:""; display:block; width:56px; height:3px; border-radius:0; background:var(--accent); margin:20px auto 0; }
.boas-vindas .measure{ width:100%; max-width:min(100%,1040px); margin-top:clamp(20px,2.6vw,32px); }
.boas-vindas .lead{ text-align:center; text-align-last:center; text-wrap:pretty; hyphens:none; margin:0; }
.boas-vindas .lead + .lead{ margin-top:14px; }
.boas-vindas .bv-pontos{ list-style:none; margin:clamp(26px,3.4vw,40px) 0 0; padding:0; width:100%; max-width:min(100%,1040px); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.boas-vindas .bv-pontos li{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:18px 16px; border-radius:0; background:var(--surface); text-align:center; text-align-last:center; }
.boas-vindas .bv-pontos strong{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.boas-vindas .bv-pontos span{ font-size:.88rem; line-height:1.35; color:var(--cinza); }
.boas-vindas .mt-l:not(.measure){ display:flex; justify-content:center; width:100%; margin-top:clamp(26px,3.4vw,40px); }
@media (max-width:700px){
  .boas-vindas .bv-pontos{ grid-template-columns:1fr; max-width:420px; }
}

/* Janela "Dados Institucionais" dentro das Definições */
.acs-di-modal { max-width: 900px; }
.acs-di-modal .acs-def-body { max-height: 75vh; }

/* ============================================
   PAUTAS (TODAS) — cabeçalho, colunas dos nomes e barra de acções
   sempre visíveis. Aplica-se à Pauta da Turma e aos Mapas da Área
   Pedagógica (qualquer tabela dentro de um ".pauta-wrapper").
   - O JS acsPautaFixar() (script.js) mede as tabelas depois de
     desenhadas, junta a classe ".pauta-fixa" ao contentor e marca as
     células coladas (".pauta-col-fixa") com o "left" certo; o "top" de
     cada linha do cabeçalho também é medido (há tabelas com 1, 3 ou
     mais linhas de cabeçalho).
   - A pauta passa a ter a sua própria área de deslize, com a altura
     do ecrã: o cabeçalho cola no topo e a(s) coluna(s) do nome colam
     à esquerda ao deslizar para o lado.
   - A barra GUARDAR / EXCEL / PDF / WORD / Fichas fica colada por baixo
     do menu quando a página desce.
   - O PDF, o Word e o Excel são gerados a partir dos dados, não deste
     HTML — não são afectados.
   ============================================ */
#pauta-container > .pauta-actions-bar,
#mapas-viewer-container > .pauta-actions-bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 40;
  background: var(--bg);
  margin-top: -8px;
  padding-top: 8px;
  border-bottom: 1px solid var(--line);
}

.pauta-wrapper.pauta-fixa {
  padding: 0; /* o padding do contentor desloca as colunas/linhas coladas; a margem passa para os filhos */
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 96px);
  max-height: calc(100dvh - var(--topbar-h) - 96px);
  overscroll-behavior: contain;
}
.pauta-fixa > :not(table) { margin-inline: 28px; }
.pauta-fixa > :first-child { margin-top: 28px; }
.pauta-fixa > :last-child { margin-bottom: 28px; }

/* Com colunas coladas, o modelo "collapse" perde as linhas — usa-se
   "separate" com a linha só em baixo e à direita de cada célula. */
.pauta-fixa table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.pauta-fixa th,
.pauta-fixa td {
  border-width: 0 1px 1px 0;
}

/* cabeçalho colado no topo */
.pauta-fixa thead th {
  position: sticky;
  z-index: 3;
  white-space: nowrap;
  background: var(--cinza-claro);
}
/* coluna(s) do nome coladas à esquerda */
.pauta-fixa .pauta-col-fixa {
  position: sticky;
  z-index: 2;
  background: var(--superficie);
  box-shadow: 1px 0 0 var(--line-strong);
}
.pauta-fixa .pauta-col-ultima { box-shadow: 1px 0 0 var(--line-strong), 6px 0 8px -6px rgba(0, 0, 0, .28); }
/* cantos (cabeçalho × coluna colada) ficam por cima de tudo */
.pauta-fixa thead th.pauta-col-fixa { z-index: 5; background: var(--cinza-claro); }

#pauta-conteudo td.pauta-nome-aluno { min-width: 190px; }
@media (max-width: 640px) {
  .pauta-fixa > :not(table) { margin-inline: 14px; }
  #pauta-conteudo td.pauta-nome-aluno,
  #pauta-conteudo thead th.pauta-col-fixa:nth-child(2) {
    min-width: 112px;
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================
   Dropdown "Configurar exames" (Pauta da Turma):
   classes e disciplinas de exame escondidas por defeito.
   ============================================ */
.exame-acc { border: 1px solid var(--borda, var(--line)); border-radius: 0; background: var(--card-bg, #fff); overflow: hidden; }
.exame-acc-header {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; background: none; border: 0; cursor: pointer;
  color: var(--fg); font: inherit; font-weight: 600; font-size: 15px; text-align: left;
}
.exame-acc-header:hover { background: var(--cinza-claro, var(--surface)); }
.exame-acc-seta { display: inline-flex; flex-shrink: 0; transition: transform .2s ease; }
.exame-acc.aberto .exame-acc-seta { transform: rotate(90deg); }
.exame-acc-corpo { display: none; padding: 4px 18px 20px; border-top: 1px solid var(--borda, var(--line)); padding-top: 16px; }
.exame-acc.aberto .exame-acc-corpo { display: block; }


/* Melhor aluna por classe — cards reduzidos, todos na mesma linha horizontal */
.melhor-aluna-grid { --n: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(210px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.melhor-aluna-grid .melhor-aluna-card { padding: 10px 10px 8px; min-width: 0; }
.melhor-aluna-grid .melhor-aluna-card h4 { font-size: 11px; margin-bottom: 4px; }
.melhor-aluna-escola { border: 2px solid #D4A017; background: color-mix(in srgb, #D4A017 7%, transparent); }
.melhor-aluna-nome { font-weight: 700; font-size: 12.5px; margin-top: 2px; line-height: 1.25; }
.melhor-aluna-info { font-size: 10.5px; color: var(--cinza); margin: 2px 0 6px; line-height: 1.3; }
.melhor-aluna-canvas { height: 150px; }
.melhor-aluna-grid .grafico-legenda-sub { font-size: 10px; margin: 4px 0 0; }

/* Alunas com 3 ou mais negativas — um card compacto por turma */
.negativas-titulo { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 0 8px; }
.negativas-titulo .material-symbols-outlined { font-size: 18px; color: #DC2626; }
.negativas-total, .negativas-contagem { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 0; font-size: 11px; font-weight: 700; background: color-mix(in srgb, #DC2626 14%, transparent); color: #DC2626; }
.negativas-contagem { margin-left: 8px; vertical-align: middle; }
.negativas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.negativas-grid .negativas-card { padding: 10px 10px 8px; min-width: 0; }
.negativas-grid .negativas-card h4 { font-size: 11.5px; margin-bottom: 6px; }
.negativas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.negativas-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.negativas-nome { font-weight: 600; font-size: 12.5px; line-height: 1.25; }
.negativas-qtd { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #DC2626; }
.negativas-qtd::after { content: ' neg.'; font-weight: 500; }
.negativas-discs { font-size: 10.5px; color: var(--cinza); line-height: 1.35; margin-top: 1px; }
.negativas-vazia { font-size: 11.5px; color: var(--cinza); margin: 0; }


/* ---------- Pauta de exame (modelo por júris: NF · Exame 1.ª/2.ª chamada · NFD) ---------- */
.exame-tabela { width: auto; min-width: 100%; font-size: 11px; }
.exame-tabela th, .exame-tabela td { padding: 2px 3px; white-space: nowrap; }
.exame-tabela th.exame-th-v { vertical-align: middle; padding: 4px 2px; }
.exame-tabela th.exame-th-v span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 130px; }
.exame-tabela td.exame-nf { font-weight: 600; }
.exame-tabela td.exame-nfd { background: color-mix(in srgb, var(--line-strong) 35%, transparent); min-width: 28px; font-weight: 700; }
.exame-tabela td.exame-mg { font-weight: 700; min-width: 30px; }
.exame-tabela td.exame-cel-ex { padding: 1px; }
.exame-tabela .exame-input { width: 44px; min-width: 0; padding: 3px 2px; text-align: center; font-size: 12px; }
.exame-tabela .exame-input-invalido { border-color: var(--danger-text); background: color-mix(in srgb, var(--danger-text) 14%, transparent); }
/* O deslize é do .pauta-wrapper (acsPautaFixar); cada júri cresce com a tabela para as colunas coladas funcionarem. */
.exame-juri { margin-bottom: 36px; width: max-content; min-width: 100%; }
.pauta-fixa > .exame-juri { margin-inline: 0; }
.exame-juri[hidden] { display: none; }
.pauta-fixa > .exame-juri > :not(table) { margin-inline: 28px; position: sticky; left: 0; width: min(calc(100vw - 80px), 960px); }
.exame-tabela td:nth-child(2) { min-width: 190px; }
#exame-conteudo:focus-visible { outline: 2px solid var(--line-strong); outline-offset: -2px; }
/* Botões dos júris: um por júri, sempre visíveis à esquerda ao deslizar */
.exame-juri-botoes { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; left: 0; padding-block: 4px 14px; }
.exame-juri-btn { padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface, transparent); color: var(--fg); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.exame-juri-btn:hover { background: var(--cinza-claro, var(--surface)); }
.exame-juri-btn.activo { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (max-width: 640px) {
  .pauta-fixa > .exame-juri > :not(table) { margin-inline: 14px; width: calc(100vw - 60px); }
  .exame-tabela td:nth-child(2) { min-width: 112px; max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Propinas na Área dos Pais (pais-propinas.js) ---------- */
.pp-aviso { display:flex; align-items:center; gap:12px; background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-left:4px solid var(--warn); border-radius:0; padding:14px 18px; margin-bottom:24px; }
.pp-aviso .material-symbols-outlined { color:var(--warn); font-size:26px; flex-shrink:0; }
.pp-aviso p { margin:0; color:var(--warn-text); font-size:.9rem; }
.pp-resumo { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:12px; }
.pp-resumo > div { background:var(--surface); border-radius:0; padding:12px 16px; }
.pp-rotulo { display:block; font-size:.75rem; color:var(--cinza); margin-bottom:4px; }
.pp-barra { height:8px; border-radius:0; background:var(--surface); overflow:hidden; margin-bottom:24px; }
.pp-barra span { display:block; height:100%; background:var(--ok); border-radius:0; transition:width .4s; }
.pp-parcial { font-size:.72rem; color:var(--cinza); margin-left:6px; }
.pp-btn-recibo { padding:6px 12px; font-size:.78rem; white-space:nowrap; }

/* ---------- Diálogo "Baixar: Pauta ou Lista" (pauta de exame) ---------- */
.exame-dialogo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); padding: 16px; }
.exame-dialogo[hidden] { display: none; }
.exame-dialogo-caixa { background: var(--bg, #fff); color: var(--fg, #111); border: 1px solid var(--line-strong, #888); border-radius: 0; padding: 22px; width: min(420px, 100%); max-height: 90vh; overflow: auto; }
.exame-dialogo-caixa h4 { margin: 0 0 14px; }
.exame-dlg-grupo { border: 1px solid var(--line-strong, #888); border-radius: 0; margin: 0 0 12px; padding: 10px 12px; }
.exame-dlg-grupo[hidden] { display: none; }
.exame-dlg-grupo legend { font-size: 12.5px; font-weight: 600; padding: 0 6px; }
.exame-dlg-grupo label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; cursor: pointer; }
#votadas-grelha { max-height: 420px; overflow: auto; }
#votadas-grelha .votada-input { width: 56px; text-align: center; }