/* Incubadora FACEE-UniRovuma
   Paleta institucional retirada de unirovuma.ac.mz:
   marinho #00225A, azul #1E3A8A/#2563EB, amarelo #EAB308, laranja #F97316.
   Folha própria em vez de framework: o ToR fixa 300 KB de payload inicial. */

/* Tipografia institucional, alojada connosco.
   Três ficheiros woff2 com o subconjunto latino, 54 KB no total: a Source Sans
   3 no corpo e nos formulários, a Source Serif 4 nos títulos. Alojadas no
   próprio servidor e não no Google Fonts — em Nampula, o pedido a um servidor
   externo é o primeiro a falhar, e o ToR fixa a primeira página útil abaixo de
   três segundos em 3G. O `font-display: swap` garante que o texto aparece de
   imediato na letra do sistema e troca quando a nossa chega: nunca há ecrã em
   branco à espera de uma fonte. */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400.27ab01c4cb50.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-600.9a35cba76eda.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-700.45959eeff97f.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --letra: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --letra-titulo: "Source Serif 4", Georgia, "Times New Roman", serif;

  --marinho: #00225a;
  --azul: #1e3a8a;
  --azul-claro: #2563eb;
  --amarelo: #eab308;
  --amarelo-suave: #fdf6d8;
  --laranja: #f97316;
  --laranja-suave: #fff0e3;

  --fundo: #f1f5f9;
  --superficie: #ffffff;
  --superficie-2: #e8eef6;
  --linha: #d3dce8;
  --linha-forte: #bcc8d8;
  --texto: #0f172a;
  --texto-suave: #475569;
  --texto-ténue: #94a3b8;

  --bom: #2e7d4f;
  --bom-suave: #e3f2e9;
  --aviso: #b7791f;
  --aviso-suave: #fdf2dc;
  --mau: #dc2626;
  --mau-suave: #fbe5e3;

  --sombra: 0 1px 2px rgba(0, 34, 90, 0.06), 0 4px 14px rgba(0, 34, 90, 0.06);
  --raio: 10px;
  --largura: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.6 var(--letra);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--letra-titulo);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Os títulos pequenos de secção e os rótulos continuam na sem-serifa: em corpo
   reduzido e em maiúsculas, a serifa perde legibilidade e ganha ruído. */
h4, .titulo-seccao, legend, th { font-family: var(--letra); font-weight: 600; }
a { color: var(--azul-claro); }
img { max-width: 100%; }

.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.discreto { color: var(--texto-suave); font-size: 13px; }
.centro { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.salta-para-conteudo {
  position: absolute; left: -9999px; top: 0; background: var(--amarelo);
  color: var(--marinho); padding: 10px 16px; z-index: 100; font-weight: 700;
}
.salta-para-conteudo:focus { left: 0; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto);
  padding: 9px 16px; border-radius: 8px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--superficie-2); }
.botao--principal { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.botao--principal:hover { background: var(--azul); }
.botao--amarelo { background: var(--amarelo); border-color: var(--amarelo); color: var(--marinho); }
.botao--laranja { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.botao--perigo { border-color: var(--mau); color: var(--mau); }
.botao--largo { width: 100%; padding: 12px 16px; }

/* Botão de regresso. Uma ligação azul sublinhada no meio de um cartão com
   botões próprios lê-se como texto por acabar, não como navegação. Isto é
   discreto de propósito — não compete com a acção principal do ecrã — mas tem
   forma, área de toque e um comportamento visível ao passar o rato. */
.botao--voltar {
  border-color: transparent;
  background: transparent;
  color: var(--texto-suave);
  font-weight: 600;
  padding: 8px 12px;
}
.botao--voltar:hover {
  background: var(--superficie-2);
  border-color: var(--linha);
  color: var(--marinho);
}
.botao--voltar .seta { font-size: 1.1em; line-height: 1; }
.botao:focus-visible, .campo:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--amarelo); outline-offset: 2px;
}

/* ---------- Formulários ---------- */
.campo {
  width: 100%; border: 1px solid var(--linha-forte); background: var(--superficie);
  color: var(--texto); border-radius: 8px; padding: 10px 12px; font: inherit;
}
.campo:focus { border-color: var(--azul-claro); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.campo--area { min-height: 96px; resize: vertical; }
.campo-caixa { width: 18px; height: 18px; accent-color: var(--azul); }
.campo-opcao { accent-color: var(--azul); }

.grupo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.grupo > label, .rotulo { font-weight: 600; font-size: 14px; color: var(--texto); }
.grupo .ajuda { font-size: 13px; color: var(--texto-suave); }
.grupo .erro { font-size: 13px; color: var(--mau); font-weight: 600; }
.grupo--erro .campo { border-color: var(--mau); background: var(--mau-suave); }
.obrigatorio::after { content: " *"; color: var(--mau); }

.grelha { display: grid; gap: 0 20px; }
.grelha--2 { grid-template-columns: 1fr 1fr; }
.grelha--3 { grid-template-columns: repeat(3, 1fr); }
.grelha--4 { grid-template-columns: repeat(4, 1fr); }
.grelha--2-1 { grid-template-columns: 2fr 1fr; gap: 20px; }
.completo { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .grelha--2, .grelha--3, .grelha--4, .grelha--2-1 { grid-template-columns: 1fr; }
}

/* Opções de escolha única, desenhadas para toque */
.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcoes label {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie);
  cursor: pointer; font-size: 14.5px;
}
.opcoes label:hover { border-color: var(--azul-claro); background: #f8fafd; }
.opcoes input { margin-top: 3px; }
.opcoes input:checked + span,
.opcoes label:has(input:checked) { border-color: var(--azul); background: #eef4ff; font-weight: 600; }

/* ---------- Cartões e etiquetas ---------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 18px 20px;
}
.cartao h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cartao h3 .direita { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--texto-suave); }

.etiqueta {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.etiqueta--bom { background: var(--bom-suave); color: var(--bom); }
.etiqueta--aviso { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta--mau { background: var(--mau-suave); color: var(--mau); }
.etiqueta--neutro { background: var(--superficie-2); color: var(--texto-suave); }
.etiqueta--amarelo { background: var(--amarelo-suave); color: #8a6d0b; }
.etiqueta--laranja { background: var(--laranja-suave); color: #b45309; }

.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi .valor { font-size: 30px; font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .rotulo { font-size: 13.5px; color: var(--texto-suave); }

.barra { height: 8px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--azul); border-radius: 4px; }
.barra > i.amarelo { background: var(--amarelo); }
.barra > i.bom { background: var(--bom); }

/* ---------- Tabelas ---------- */
.tabela-envolvente { overflow-x: auto; }
table.dados { width: 100%; border-collapse: collapse; font-size: 14px; }
table.dados th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texto-suave); padding: 9px 10px; border-bottom: 1px solid var(--linha);
}
table.dados td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.dados tbody tr:hover td { background: var(--superficie-2); }
table.dados tr:last-child td { border-bottom: 0; }

/* ---------- Mensagens ---------- */
.mensagens { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.mensagem { padding: 11px 16px; border-radius: 8px; border-left: 4px solid; font-size: 14.5px; }
.mensagem--success { background: var(--bom-suave); border-color: var(--bom); color: #1b5334; }
.mensagem--error { background: var(--mau-suave); border-color: var(--mau); color: #8c1c17; }
.mensagem--warning { background: var(--aviso-suave); border-color: var(--aviso); color: #7a4f10; }
.mensagem--info { background: #e4ecf8; border-color: var(--azul-claro); color: #17356e; }

/* ---------- Marca ---------- */
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
/* O selo da Universidade. Fundo branco sempre, mesmo sobre o marinho da barra
   lateral: o logótipo tem azul-escuro no traço e desapareceria sobre azul. */
.marca .simbolo {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: #fff; object-fit: contain;
}
.marca b { display: block; color: var(--marinho); font-size: 15px; line-height: 1.2; }
.marca b em { font-style: normal; color: var(--laranja); }
.marca span { font-size: 12.5px; color: var(--texto-suave); }

/* ---------- Critérios da senha ----------
   Acendem a verde à medida que a pessoa escreve. Antes de escrever seja o que
   for, ficam neutros: uma lista toda a vermelho na primeira vez que se abre o
   ecrã é castigo sem culpa. */
.criterios {
  margin: -6px 0 16px;
  padding: 12px 14px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
}
.criterios__titulo {
  margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave);
}
.criterios ul { margin: 0; padding: 0; list-style: none; }
.criterios li {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; font-size: 13px; color: var(--texto-suave);
}
.criterios .marca-criterio {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--linha-forte);
  display: grid; place-items: center;
  font-size: 10px; line-height: 1; color: #fff;
}
.criterios li.cumprida { color: var(--bom); }
.criterios li.cumprida .marca-criterio {
  background: var(--bom); border-color: var(--bom);
}
.criterios li.cumprida .marca-criterio::after { content: "✓"; }
.criterios li.falhada .marca-criterio { border-color: var(--linha-forte); }
.criterios__nota {
  margin: 9px 0 0; font-size: 11.5px; color: var(--texto-ténue);
}