/* SPSAM-Web — folha de estilos (mobile-first). Cores e tipografia SÓ através dos tokens
   definidos em config/branding/branding.yaml (servidos em /marca/tokens.css). Nenhuma cor literal. */

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

html { -webkit-text-size-adjust: 100%; }

/* O atributo hidden vence sempre regras de display dos componentes */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte-familia);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 { color: var(--cor-primaria-escura); line-height: 1.25; margin: 1.2em 0 .5em; }
h1 { font-size: 1.55rem; margin-top: .4em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.08rem; }
p { margin: .5em 0 .9em; }
img, svg, canvas { max-width: 100%; }

a { color: var(--cor-ligacao); text-underline-offset: .15em; }
a:hover { color: var(--cor-primaria-escura); }

/* Foco visível (WCAG 2.4.7) — contorno escuro de alto contraste + halo ciano do batimento */
:focus-visible {
  outline: 3px solid var(--cor-primaria-escura);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--cor-acento);
}

.saltar {
  position: absolute; left: .5rem; top: -4rem; z-index: 10;
  background: var(--cor-primaria-escura); color: var(--cor-texto-invertido);
  padding: .6rem 1rem; border-radius: .3rem;
}
.saltar:focus { top: .5rem; }

.texto-secundario { color: var(--cor-cinza-aco); font-weight: normal; }
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------------------------------------------------------------- cabeçalho */
.cabecalho { background: var(--cor-fundo); border-bottom: 4px solid var(--cor-primaria); }
.cabecalho__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; padding: .5rem 1rem; max-width: 76rem; margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: 1.25rem; text-decoration: none; color: var(--cor-primaria-escura); min-width: 0; }
/* Logótipo: altura ≥ 28 px; zona de proteção de meia altura do escudo (≈ 20 px) em todo o redor */
.marca__logo { height: 48px; width: auto; min-height: 28px; margin: 4px; }
.marca__wordmark {
  font-weight: 800; font-size: 1.6rem; letter-spacing: .08em; color: var(--cor-primaria);
  padding: .2rem .4rem;
}
.marca__texto { display: flex; flex-direction: column; min-width: 0; }
.marca__texto strong { font-size: 1.05rem; }
.marca__texto small { color: var(--cor-cinza-aco); font-size: .82rem; }
.cabecalho__sair { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cabecalho__utilizador { font-size: .88rem; color: var(--cor-cinza-aco); }

.navegacao { background: var(--cor-primaria); }
.navegacao ul {
  list-style: none; margin: 0 auto; padding: .25rem .5rem; max-width: 76rem;
  display: flex; flex-wrap: wrap; gap: .1rem .25rem;
}
.navegacao a {
  display: inline-block; padding: .55rem .7rem; min-height: 44px;
  color: var(--cor-texto-invertido); text-decoration: none; border-radius: .25rem;
  line-height: 1.6;
}
.navegacao a:hover { background: var(--cor-primaria-escura); color: var(--cor-texto-invertido); }
.navegacao a[aria-current="page"] {
  background: var(--cor-primaria-escura); box-shadow: inset 0 -3px 0 var(--cor-acento);
}
.nav-inicio { display: inline-flex !important; align-items: center; gap: .4rem; font-weight: 700; }
.nav-inicio__icone { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- estrutura */
.conteudo { max-width: 76rem; margin: 0 auto; padding: 1rem; min-height: 60vh; }
.conteudo:focus { outline: none; }

.cartao {
  background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: .5rem;
  padding: 1rem; margin: 0 0 1rem;
}
.cartao--superficie { background: var(--cor-superficie); }
.cartao > :first-child { margin-top: 0; }

.grelha { display: grid; gap: 1rem; grid-template-columns: 1fr; }

/* Traço de "pulso" (acento ciano) que sublinha títulos de painel */
.titulo-pulso { position: relative; padding-bottom: .35rem; }
.titulo-pulso::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 3px;
  background: var(--cor-acento); border-radius: 2px;
}

.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.cabecalho-pagina h1 { margin-bottom: .2em; }

/* ---------------------------------------------------------------- missão (página inicial) */
.missao {
  background: var(--cor-primaria-escura); color: var(--cor-texto-invertido);
  border-radius: .5rem; padding: 1.2rem 1.2rem .6rem; margin: 0 0 1rem; border-bottom: 4px solid var(--cor-acento);
}
.missao__rotulo { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 0 0 .3rem; }
.missao__texto { font-size: 1.3rem; line-height: 1.35; font-weight: 700; margin: 0 0 .6rem; }
.missao__detalhe { max-width: 60rem; }
@media (min-width: 48em) { .missao { padding: 1.8rem 2rem 1rem; } .missao__texto { font-size: 1.6rem; } }

/* ---------------------------------------------------------------- corpo diretivo (Sobre o SPSAM) */
.direcao { margin-top: 1.5rem; }
.direcao__lista {
  list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.25rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
.direcao__membro { text-align: center; }
.avatar { width: 6rem; height: 6rem; display: block; margin: 0 auto .6rem; filter: grayscale(1); }
.avatar__fundo { fill: var(--cor-borda); }
.avatar__figura { fill: var(--cor-cinza-aco); }
.direcao__nome { font-weight: 700; margin: 0; }
.direcao__cargo { margin: .15rem 0 0; font-size: .9rem; color: var(--cor-cinza-aco); }

.pergunta { border-bottom: 1px solid var(--cor-borda); padding: .2rem 0; }
.pergunta summary { cursor: pointer; list-style-position: outside; min-height: 44px; }
.pergunta summary h2 { display: inline; font-size: 1.05rem; }

/* ---------------------------------------------------------------- investigações públicas */
.evento-publico h2 { margin-top: .3rem; }
.evento-publico__meta { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.relatorios { padding-left: 1.2rem; }
.relatorios li { margin-bottom: .35rem; }
.opcoes.opcoes--linha { flex-direction: row; flex-wrap: wrap; gap: .2rem .8rem; }
.filtro-periodo { flex: 1 1 100%; margin: 0; }
.filtros .ajuda { flex: 1 1 100%; margin: 0; }
.em-linha { display: inline; }

/* ---------------------------------------------------------------- tráfego (mapa SVG) */
.estado-fontes p { margin: .2rem 0; }
.mapa-trafego { margin: .8rem 0 1rem; }
.mapa-trafego svg { display: block; width: 100%; height: auto; border: 1px solid var(--cor-borda); border-radius: .4rem; }
.mapa-mar { fill: var(--cor-superficie); }
.mapa-grelha { stroke: var(--cor-borda); stroke-width: 1; stroke-dasharray: 4 6; }
.mapa-grelha-rotulo { fill: var(--cor-cinza-aco); font-size: 13px; }
.mapa-ilha { fill: var(--cor-fundo); stroke: var(--cor-cinza-aco); stroke-width: 1.2; }
.mapa-ilha-rotulo { fill: var(--cor-cinza-aco); font-size: 14px; }
.contacto path { stroke: var(--cor-fundo); stroke-width: 1.5; }
.contacto-rotulo { fill: var(--cor-primaria-escura); font-size: 13px; font-weight: 700; }
.contacto--aeronave path { fill: var(--cor-primaria-escura); }
.contacto--navio path { fill: var(--cor-ligacao); }
.mapa-trafego figcaption { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .4rem; font-size: .9rem; }
.legenda::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -1px; border-radius: 2px; }
.legenda--aeronave::before { background: var(--cor-primaria-escura); }
.legenda--navio::before { background: var(--cor-ligacao); }

/* ---------------------------------------------------------------- botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1.1rem; border-radius: .35rem;
  border: 2px solid var(--cor-primaria); background: var(--cor-primaria);
  color: var(--cor-texto-invertido); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--cor-primaria-escura); border-color: var(--cor-primaria-escura); color: var(--cor-texto-invertido); }
.botao--secundario { background: var(--cor-fundo); color: var(--cor-primaria); }
.botao--secundario:hover { background: var(--cor-superficie); color: var(--cor-primaria-escura); }
.botao--discreto { background: transparent; color: var(--cor-primaria); border-color: var(--cor-borda); min-height: 44px; padding: .3rem .8rem; }
.botao--discreto:hover { background: var(--cor-superficie); color: var(--cor-primaria-escura); }
.botao--claro { background: var(--cor-fundo); color: var(--cor-primaria-escura); border-color: var(--cor-fundo); }
.botao--claro:hover { background: var(--cor-superficie); color: var(--cor-primaria-escura); border-color: var(--cor-superficie); }
.botao--perigo { background: var(--cor-vermelho); border-color: var(--cor-vermelho); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .6; cursor: progress; }
.acoes-botoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }

/* Indicador de progresso: só aparece em operações > 300 ms */
.indicador {
  display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 3px solid var(--cor-borda); border-top-color: var(--cor-acento);
  opacity: 0; visibility: hidden; vertical-align: middle;
}
.htmx-request .indicador, .htmx-request.indicador, .a-enviar .indicador {
  visibility: visible; opacity: 1; transition: opacity 0s linear .3s; animation: rodar .8s linear infinite;
}
@keyframes rodar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- formulários */
fieldset { border: 1px solid var(--cor-borda); border-radius: .5rem; padding: .8rem 1rem 1rem; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 700; color: var(--cor-primaria-escura); padding: 0 .3rem; }
.campo { margin: 0 0 1rem; }
.campo > label, .campo > .rotulo { display: block; font-weight: 600; margin-bottom: .25rem; }
.campo .ajuda { display: block; font-size: .88rem; color: var(--cor-cinza-aco); margin: .15rem 0 .35rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%; max-width: 40rem; min-height: 44px; padding: .5rem .6rem;
  font: inherit; color: var(--cor-texto); background: var(--cor-fundo);
  border: 2px solid var(--cor-cinza-aco); border-radius: .35rem;
}
textarea { min-height: 8rem; resize: vertical; }
input[type="file"] { font: inherit; max-width: 100%; }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--cor-erro); }
.erro-campo { display: block; color: var(--cor-erro); font-weight: 600; margin-top: .25rem; }
.erro-campo::before { content: "⚠ "; }
.opcoes { display: flex; flex-direction: column; gap: .35rem; }
.opcao { display: flex; align-items: flex-start; gap: .55rem; min-height: 44px; padding: .45rem .5rem; border-radius: .35rem; cursor: pointer; }
.opcao:hover { background: var(--cor-superficie); }
.opcao input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; accent-color: var(--cor-primaria); }
.linha-campos { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.obrigatorio { color: var(--cor-erro); }

/* ---------------------------------------------------------------- avisos (banners) */
.banner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  border-left: 6px solid var(--cor-primaria); background: var(--cor-superficie);
  padding: .6rem .8rem; border-radius: .35rem; margin: 0 0 1rem; flex-wrap: wrap;
}
.banner > p { flex: 1 1 12rem; }
.banner p { margin: .2rem 0; }
.banner--sucesso { border-left-color: var(--cor-verde); background: var(--cor-sucesso-fundo); }
.banner--erro { border-left-color: var(--cor-erro); background: var(--cor-erro-fundo); }
.banner--aviso { border-left-color: var(--cor-amarelo); background: var(--cor-aviso-fundo); }
.banner__fechar {
  flex: none; min-width: 44px; min-height: 44px; font-size: 1.4rem; line-height: 1;
  background: transparent; border: 0; color: var(--cor-texto); cursor: pointer; border-radius: .35rem;
}
.banner__fechar:hover { background: var(--cor-fundo); }
.garantia { border-left: 6px solid var(--cor-primaria); background: var(--cor-superficie); padding: .8rem 1rem; border-radius: .35rem; }
.garantia p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- tabelas (scroll interno, nunca da página) */
.tabela-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cor-borda); border-radius: .4rem; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
th { background: var(--cor-superficie); color: var(--cor-primaria-escura); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--cor-superficie); }

/* Em ecrã estreito as tabelas marcadas como .tabela-lista colapsam para lista */
@media (max-width: 47.99em) {
  .tabela-lista thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-lista, .tabela-lista tbody, .tabela-lista tr, .tabela-lista td { display: block; width: 100%; }
  .tabela-lista tr { border-bottom: 2px solid var(--cor-borda); padding: .4rem 0; }
  .tabela-lista td { border: 0; padding: .2rem .6rem; text-align: left; }
  .tabela-lista td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--cor-primaria-escura); }
  .tabela-lista-wrap { border: 0; }
}

/* ---------------------------------------------------------------- etiquetas (estado e semáforo — sempre com texto) */
.etiqueta {
  display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .82rem; font-weight: 700;
  background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); white-space: nowrap;
}
.etiqueta--verde { background: var(--cor-verde); color: var(--cor-texto-invertido); border-color: var(--cor-verde); }
.etiqueta--amarelo { background: var(--cor-amarelo); color: var(--cor-texto); border-color: var(--cor-amarelo); }
.etiqueta--laranja { background: var(--cor-laranja); color: var(--cor-texto); border-color: var(--cor-laranja); }
.etiqueta--vermelho { background: var(--cor-vermelho); color: var(--cor-texto-invertido); border-color: var(--cor-vermelho); }
.etiqueta--primaria { background: var(--cor-primaria); color: var(--cor-texto-invertido); border-color: var(--cor-primaria); }
.suprimida { color: var(--cor-cinza-aco); font-style: italic; }

/* ---------------------------------------------------------------- painéis */
.semaforos { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.semaforo { border: 1px solid var(--cor-borda); border-radius: .5rem; padding: .8rem; background: var(--cor-fundo); border-top: 6px solid var(--cor-borda); }
.semaforo--verde { border-top-color: var(--cor-verde); }
.semaforo--amarelo { border-top-color: var(--cor-amarelo); }
.semaforo--laranja { border-top-color: var(--cor-laranja); }
.semaforo--vermelho { border-top-color: var(--cor-vermelho); }
.semaforo__valor { font-size: 1.9rem; font-weight: 800; color: var(--cor-primaria-escura); line-height: 1.1; }
.semaforo__nome { font-weight: 600; margin: 0 0 .3rem; }
.semaforo__meta { font-size: .85rem; color: var(--cor-cinza-aco); margin: .3rem 0 0; }
.funil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.funil div { background: var(--cor-superficie); border-radius: .4rem; padding: .6rem; text-align: center; }
.funil strong { display: block; font-size: 1.5rem; color: var(--cor-primaria-escura); }
.grafico { position: relative; width: 100%; height: 16rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }
.filtros .campo { margin: 0; flex: 1 1 10rem; }
.nota-k { font-size: .88rem; color: var(--cor-cinza-aco); }

/* ---------------------------------------------------------------- inquérito: itens como cartões + escala de toque */
/* Em 360 px: 7 alvos × 44 px + 6 × 2 px = 320 px ≤ 328 px úteis — por isso o cartão não tem margens laterais no telemóvel */
.item { border: 0; border-bottom: 1px solid var(--cor-borda); padding: .7rem 0 .8rem; margin: 0 0 .5rem; min-width: 0; }
.seccao-inq { border: 0; padding: 0; margin: 0 0 1rem; }
@media (min-width: 48em) {
  .item { border: 1px solid var(--cor-borda); border-radius: .5rem; padding: .7rem .9rem .8rem; }
}
.item legend { font-weight: 600; color: var(--cor-texto); padding: 0; float: left; width: 100%; margin-bottom: .5rem; }
.item legend + * { clear: both; }
.escala { display: flex; gap: 2px; width: 100%; max-width: 32rem; }
.escala label {
  flex: 1 1 0; min-width: 44px; min-height: 44px; position: relative;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.escala input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.escala span {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 44px;
  border: 2px solid var(--cor-cinza-aco); border-radius: .35rem; font-weight: 700; background: var(--cor-fundo);
  color: var(--cor-primaria-escura);
}
.escala input:checked + span { background: var(--cor-primaria); color: var(--cor-texto-invertido); border-color: var(--cor-primaria); }
.escala input:focus-visible + span { outline: 3px solid var(--cor-primaria-escura); outline-offset: 2px; box-shadow: 0 0 0 6px var(--cor-acento); }
.escala-legenda { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--cor-cinza-aco); max-width: 32rem; margin-top: .25rem; }
.chave-escala { font-size: .88rem; margin: 0 0 .8rem; padding-left: 1.2rem; }
.progresso { height: .5rem; background: var(--cor-superficie); border-radius: .3rem; overflow: hidden; margin: .5rem 0 1rem; }
.progresso__barra { height: 100%; width: 0; background: var(--cor-acento); transition: width .2s ease; }
.seccao-inq[hidden] { display: none; }
.navegacao-seccoes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1rem; }

/* ---------------------------------------------------------------- recibo / referência */
.referencia { font-family: var(--fonte-familia-mono); font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; color: var(--cor-primaria-escura); background: var(--cor-superficie); padding: .3rem .6rem; border-radius: .3rem; display: inline-block; }
.mensagens { list-style: none; padding: 0; margin: 0 0 1rem; }
.mensagens li { border-radius: .45rem; padding: .6rem .8rem; margin: 0 0 .5rem; background: var(--cor-superficie); border-left: 5px solid var(--cor-cinza-aco); }
.mensagens li.mensagem--analista { border-left-color: var(--cor-primaria); }
.mensagens .quem { font-size: .82rem; color: var(--cor-cinza-aco); display: block; }
dl.detalhes { display: grid; grid-template-columns: 1fr; gap: .15rem 1rem; margin: 0; }
dl.detalhes dt { font-weight: 700; color: var(--cor-primaria-escura); }
dl.detalhes dd { margin: 0 0 .5rem; }

/* ---------------------------------------------------------------- impressão de tokens */
.tokens { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.token-cartao { border: 1px dashed var(--cor-cinza-aco); border-radius: .4rem; padding: .6rem; text-align: center; break-inside: avoid; }
.token-cartao img { width: 9rem; height: 9rem; }
.token-cartao code { display: block; font-size: 1.05rem; font-weight: 700; }

/* ---------------------------------------------------------------- rodapé */
.rodape { background: var(--cor-primaria-escura); color: var(--cor-texto-invertido); padding: 1.2rem 1rem; margin-top: 2rem; }
.rodape p, .rodape ul { max-width: 76rem; margin-left: auto; margin-right: auto; }
.rodape a { color: var(--cor-texto-invertido); }
.rodape__ligacoes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.rodape__ligacoes a { display: inline-block; min-height: 44px; padding: .6rem 0; }
.rodape__lema { font-size: .85rem; }

/* ---------------------------------------------------------------- pontos de quebra */
@media (min-width: 48em) {
  h1 { font-size: 1.8rem; }
  .conteudo { padding: 1.5rem; }
  .grelha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grelha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .semaforos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funil { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .linha-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dl.detalhes { grid-template-columns: max-content 1fr; }
  dl.detalhes dd { margin: 0; }
}
@media (min-width: 75em) {
  .semaforos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grelha--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .cabecalho, .navegacao, .rodape, .nao-imprimir { display: none !important; }
  .conteudo { max-width: none; padding: 0; }
  .token-cartao { page-break-inside: avoid; }
}

/* ------------------------------------------------- módulo preditivo (demonstração da Fase 2) */
.preditivo-moldura { width: 100%; height: 78vh; border: 1px solid var(--cor-primaria-escura); border-radius: 8px; background: var(--cor-fundo); }
.aviso--ficticio { border-left: 4px solid var(--cor-erro); font-weight: 600; }