/* 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, 68 KB no total: a Lato em
   toda a interface, nos pesos 400, 700 e 900.

   A escolha segue o que a Universidade Rovuma faz no seu portal. Fomos ver:
   o unirovuma.ac.mz não carrega nenhuma letra da Web — usa a pilha do sistema
   (`ui-sans-serif, system-ui`) e distingue-se pelo peso, com os títulos a 900
   em maiúsculas e o corpo a 16px com entrelinha 1,5. Não há serifa nenhuma no
   sítio da Universidade.

   Copiar a pilha do sistema seria copiar também o seu defeito: o mesmo título
   sai Segoe UI no Windows, Roboto no Android e San Francisco no iPhone, e a
   instituição nunca se parece consigo própria duas vezes. A Lato dá o mesmo
   efeito com um desenho só — é humanista, de traço aberto, tem o peso Black
   que os títulos da Universidade pedem, e foi desenhada para ecrãs pequenos e
   de baixa densidade, que é o que a maioria dos empreendedores tem na mão.

   Alojada 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: "Lato";
  src: url("../fonts/lato-400.e1b3b5908c9c.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.de69cf9e514d.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-900.1c6c65523675.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --letra: "Lato", "Segoe UI", system-ui, -apple-system, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Mesma família nos títulos: como no portal da Universidade, o que os
     distingue é o peso, não um segundo desenho. */
  --letra-titulo: var(--letra);

  --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: 12px;
  --largura: 1280px;
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  /* 16px com entrelinha 1,5, como no portal da Universidade. A Lato tem
     altura-de-x menor que a Source Sans 3 e agradece o ponto a mais. */
  font: 16px/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--letra-titulo);
  /* 900, o peso dos títulos da Universidade. */
  font-weight: 900;
  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 #e3eaf2;
  border-radius: var(--raio); padding: 20px 22px;
}
.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: 3px; }
.kpi .valor {
  font-size: 32px; font-weight: 900; color: var(--marinho);
  font-variant-numeric: tabular-nums; line-height: 1.05; order: 2;
}
.kpi .rotulo {
  font-size: 11px; color: var(--texto-suave); text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 700; order: 1;
}
/* Qualquer nota do indicador — «1 nos últimos sete dias» — vai para o fim,
   debaixo do número. Sem isto a ordem de leitura fica ao contrário. */
.kpi > *:not(.rotulo):not(.valor) { order: 3; font-size: 12.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: separate; border-spacing: 0; font-size: 14px;
  border: 1px solid #e3eaf2; border-radius: var(--raio); overflow: hidden;
  background: var(--superficie);
}
table.dados th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--marinho); padding: 11px 12px; font-weight: 700;
}
table.dados td { padding: 11px 12px; border-top: 1px solid #eef2f7; vertical-align: middle; }
table.dados tbody tr:nth-child(even) td { background: #fafcfe; }
table.dados tbody tr:hover td { background: #f1f5fb; }

/* Dentro de um cartão a tabela não repete a moldura: o cartão já é a moldura. */
.cartao > table.dados,
.cartao table.dados { border: 0; border-radius: 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);
}

/* O atributo hidden tem de esconder sempre. Sem esta regra, um botão com
   display próprio (.botao) continuava à vista — foi assim que o «Submeter
   candidatura» aparecia logo no primeiro passo. */
[hidden] { display: none !important; }

/* Contador de palavras das respostas abertas. */
.contador-palavras { display: block; margin-top: 4px; font-size: 12.5px; color: var(--texto-suave); text-align: right; font-variant-numeric: tabular-nums; }
.contador-palavras--excedido { color: var(--mau); font-weight: 700; }
/* Nas respostas com limite de palavras, a instrução vem antes da caixa:
   lê-se o que se pede e só depois se escreve. */
.grupo:has(textarea[data-max-palavras]) > label { order: -2; }
.grupo:has(textarea[data-max-palavras]) > .ajuda { order: -1; margin-bottom: 2px; }