/* mocoengine · os cinco componentes críticos do motor
 * D9-componentes · Equipa D · 19-08-2026
 *
 * Este ficheiro assenta EXCLUSIVAMENTE nos tokens de worker/ui/ds/
 * (cores · tipografia · espacamento · relevo · vidro · trama · aurora).
 * Nenhum hex novo, nenhum tamanho fora da escala 11·13·15·20·28·40·64,
 * nenhum espaçamento fora de --esp-1..9.
 *
 * A doutrina herdada do sense, intacta:
 *   · o relevo é para o que se toca e contém; nunca para o que se lê
 *   · cor semântica sempre com texto, nunca só cor
 *   · raio até 16px no chrome, nunca mais de 6px em superfície de dados
 *   · o vidro só sobrepõe temporariamente e só com contraste por baixo
 *   · nunca célula muda, nunca erro cru, nunca interpolação
 *
 * Onde o engine DIVERGE do sense, e porquê:
 *   · densidade — o sense lê-se; o engine opera-se. Linhas de tabela a
 *     28px (era ~37px), controlos a 32px em rato/teclado. Em ecrã táctil
 *     (pointer:coarse) tudo volta aos 44px — a densidade é do ofício,
 *     não uma desistência de acessibilidade.
 *   · teclado-primeiro — todos os componentes têm gramática de teclado
 *     declarada (engine-componentes.js); o sense não tinha nenhuma.
 *   · toda a linha é porta — no sense as linhas de tabela eram leitura;
 *     no engine cada linha abre a ficha do objecto (P5 da D1-arquitectura).
 */

/* ═══════════════════════════════════ 0 · a raiz do engine e a densidade */

.engine {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--texto-13);          /* o sense corre a 15px; o motor a 13px */
  line-height: 1.45;
  /* alturas de controlo: finas ao rato, largas ao dedo (ver media no fim) */
  --alvo: 32px;
  --alvo-fino: 24px;
}

.engine :focus-visible { outline: var(--foco); outline-offset: 2px; }

/* teclas desenhadas nas dicas de teclado — chrome miniatura, toca-se com o dedo mental */
.engine kbd {
  font-family: var(--fonte-mono);
  font-size: var(--texto-11);
  background: var(--superficie);
  border-radius: var(--raio-dados);
  box-shadow: var(--relevo-1);
  padding: 0 var(--esp-1);
  min-width: 18px;
  display: inline-block;
  text-align: center;
  color: var(--secundario);
}

/* ═══════════════════════════ 1 · <BarraEstado> — a moldura (D1, P4)
 * Duas linhas fixas no topo de TODAS as salas. Vidro, porque é a única
 * coisa do engine que sobrepõe conteúdo em permanência — e o vidro é
 * exactamente para barras fixas (ds/vidro.css). Os quatro factos são
 * texto medido, nunca ícone mudo, nunca só cor.
 */

.barra-estado {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--vidro-2);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-fio), var(--vidro-sombra);
}

.barra-estado .linha-marca {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--esp-2) var(--esp-4);
}

.barra-estado .wordmark {
  font-family: var(--fonte-display);
  font-size: var(--texto-20);
  letter-spacing: -0.03em;
  color: var(--secundario);
  white-space: nowrap;
  text-decoration: none;
}
.barra-estado .wordmark i { font-style: normal; font-weight: 300; }
.barra-estado .wordmark b { font-weight: 700; color: var(--azul-moco); }

/* os quatro factos — cada um é porta para a sala que o explica */
.factos {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-left: auto;
  flex-wrap: wrap;
}
.facto {
  font-size: var(--texto-11);
  color: var(--secundario);
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--alvo);
  display: inline-flex;
  align-items: center;
  border-radius: var(--raio-dados);
  font-variant-numeric: tabular-nums;
}
.facto b { color: var(--tinta); font-weight: 500; margin-left: 0.35em; }
.facto:hover b { color: var(--ambar); }

/* avaria na moldura: a palavra, nunca só a cor */
.facto.alerta { color: var(--fraca); font-weight: 500; }
.facto.alerta b { color: var(--fraca); }
.facto.alerta::before { content: '▲ '; }

/* ── as salas: fila única, agrupada por ala (P2 — navegação plana) */
.salas {
  border-top: var(--traco);
  overflow-x: auto;
}
.salas .fila {
  display: flex;
  align-items: stretch;
  gap: var(--esp-2);
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--esp-1) var(--esp-4);
}
.ala {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  padding-left: var(--esp-3);
  border-left: var(--traco);          /* o separador fino entre alas */
}
.ala:first-child { border-left: 0; padding-left: 0; }
.ala .etiqueta { margin-right: var(--esp-1); user-select: none; }

.sala {
  font: inherit;
  font-size: var(--texto-13);
  color: var(--azul-moco);
  background: none;
  border: 0;
  border-radius: var(--raio-dados);
  padding: 0 var(--esp-2);
  min-height: var(--alvo);
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow var(--transicao), background var(--transicao);
}
.sala:hover { background: var(--superficie); box-shadow: var(--relevo-1); }
.sala[aria-current='page'] {
  background: var(--fundo);
  box-shadow: var(--relevo-in);
  font-weight: 600;
}

/* ═══════════════ 2 · <ProcuraUnica> — a segunda porta de tudo (D1 §4)
 * Combobox ARIA. «/» ou Ctrl+K foca de qualquer sítio; ↑↓ navega;
 * Enter abre a ficha; Esc fecha. Procura → ficha → prova.
 */

.procura-unica { position: relative; flex: 1 1 260px; max-width: 520px; }

.procura-unica input {
  font: inherit;
  font-size: var(--texto-13);
  color: var(--tinta);
  width: 100%;
  min-height: var(--alvo);
  background: var(--fundo);
  border: 0;
  border-radius: var(--raio-dados);
  box-shadow: var(--relevo-in);
  padding: 0 var(--esp-7) 0 var(--esp-3);
}
.procura-unica input::placeholder { color: var(--secundario); }
.procura-unica .dica-tecla {
  position: absolute;
  right: var(--esp-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* a paleta de resultados: vidro, porque sobrepõe temporariamente */
.paleta {
  position: absolute;
  top: calc(100% + var(--esp-2));
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--vidro-2);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  border-radius: var(--raio-chrome);
  box-shadow: var(--vidro-fio), var(--vidro-sombra);
  padding: var(--esp-2);
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  list-style: none;
}
.paleta [role='group'] > .etiqueta {
  display: block;
  padding: var(--esp-2) var(--esp-2) var(--esp-1);
}
.paleta [role='option'] {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-2);
  min-height: var(--alvo);
  align-items: center;
  border-radius: var(--raio-dados);
  cursor: pointer;
  font-size: var(--texto-13);
  color: var(--tinta);
}
.paleta [role='option'] .tipo {
  font-size: var(--texto-11);
  color: var(--secundario);
  margin-left: auto;
  white-space: nowrap;
}
.paleta [role='option'][aria-selected='true'] {
  background: var(--fundo);
  box-shadow: var(--relevo-in);
}
.paleta [role='option'][aria-selected='true'] .tipo { color: var(--tinta); }
.paleta .sem-resultado {
  padding: var(--esp-3);
  font-size: var(--texto-13);
  color: var(--secundario);
  text-align: center;
}

/* ═══════════════ 3 · <TabelaDensa> — 100 linhas, teclado-primeiro
 * Herda do sense: linhas de 1px, sem zebra, algarismos tabulares,
 * cabeçalho 11px maiúsculas, plana sobre painel com relevo.
 * Diverge: 28px por linha, cabeçalho pegajoso, ordenação por coluna,
 * filtro local («f»), navegação por setas com tabindex itinerante,
 * e toda a linha é porta para a ficha (Enter).
 */

.painel-engine {
  background: var(--fundo);
  border-radius: var(--raio-chrome);
  box-shadow: var(--relevo-2);
  padding: var(--esp-5);
  margin-bottom: var(--esp-5);
  max-width: var(--largura-max);
  margin-left: auto;
  margin-right: auto;
}
.painel-engine > header {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--esp-4);
}
.painel-engine > header h2 {
  font-family: var(--fonte-display);
  font-size: var(--texto-20);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--azul-moco);
  margin: 0;
}
.painel-engine > header .contagem {
  font-size: var(--texto-11);
  color: var(--secundario);
  font-variant-numeric: tabular-nums;
}
.painel-engine > header .dicas {
  margin-left: auto;
  font-size: var(--texto-11);
  color: var(--secundario);
  display: flex;
  gap: var(--esp-3);
  align-items: center;
  flex-wrap: wrap;
}

.filtro-tabela {
  font: inherit;
  font-size: var(--texto-13);
  color: var(--tinta);
  background: var(--fundo);
  border: 0;
  border-radius: var(--raio-dados);
  box-shadow: var(--relevo-in);
  padding: 0 var(--esp-3);
  min-height: var(--alvo);
  width: min(320px, 100%);
  margin-bottom: var(--esp-3);
}

/* o rolo: só ele rola; o cabeçalho fica */
.rolagem {
  overflow: auto;
  max-height: 70vh;
  border-radius: var(--raio-dados);
  /* o relevo interior diz «isto é um poço de dados» sem pôr borda cinzenta */
  box-shadow: var(--relevo-in);
  background: var(--superficie);
}

.tabela-densa {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-13);
  font-variant-numeric: tabular-nums;
}
.tabela-densa caption {
  position: absolute;
  clip-path: inset(50%);              /* para leitores de ecrã; o h2 já o diz visualmente */
  width: 1px; height: 1px; overflow: hidden;
}
.tabela-densa th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie);
  font-size: var(--texto-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secundario);
  font-weight: 500;
  text-align: right;
  padding: 0;
  border-bottom: var(--traco);
  white-space: nowrap;
}
.tabela-densa th:first-child, .tabela-densa td:first-child,
.tabela-densa th.texto, .tabela-densa td.texto { text-align: left; }
.tabela-densa th .ordenar {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: inherit;
  padding: var(--esp-2) var(--esp-2);
  min-height: var(--alvo);
}
.tabela-densa th .ordenar:hover { color: var(--tinta); }
.tabela-densa th[aria-sort='ascending'] .ordenar::after { content: ' ↑'; color: var(--ambar); }
.tabela-densa th[aria-sort='descending'] .ordenar::after { content: ' ↓'; color: var(--ambar); }

.tabela-densa td {
  padding: var(--esp-1) var(--esp-2);   /* 4px vertical → linha de ~28px */
  border-bottom: var(--traco);
  text-align: right;
  white-space: nowrap;
  height: var(--alvo-fino);
}
.tabela-densa tbody tr:last-child td { border-bottom: 0; }

.tabela-densa .codigo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-11);
  color: var(--secundario);
}
.tabela-densa .nome {
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabela-densa .num { color: var(--tinta); }
.tabela-densa .num.zero { color: var(--secundario); }
.tabela-densa .destaque { font-weight: 500; color: var(--azul-moco); }

/* a linha é porta: foco itinerante, Enter abre a ficha */
.tabela-densa tbody tr { cursor: pointer; }
.tabela-densa tbody tr:hover td { background: var(--fundo); }
.tabela-densa tbody tr:focus-visible {
  outline: var(--foco);
  outline-offset: -2px;
}
.tabela-densa tbody tr[aria-selected='true'] td {
  background: var(--fundo);
  box-shadow: inset 2px 0 0 var(--ambar);
}
.tabela-densa tbody tr[aria-selected='true'] td + td { box-shadow: none; }

/* célula vazia não existe: existe «por recolher», com motivo (regra 7) */
.tabela-densa .por-recolher {
  color: var(--secundario);
  font-style: italic;
  white-space: normal;
}

.rodape-tabela {
  display: flex;
  gap: var(--esp-4);
  flex-wrap: wrap;
  padding-top: var(--esp-3);
  font-size: var(--texto-11);
  color: var(--secundario);
  font-variant-numeric: tabular-nums;
}
.rodape-tabela .consulta { font-family: var(--fonte-mono); }

/* ═══════════════ 4 · <Matriz> — 74 segmentos × 2 indicadores
 * A fotografia do IIMS. Primeira coluna pegajosa (o rótulo nunca se perde
 * ao rolar), valores com barra plana na própria célula — a barra é
 * superfície de dados: raio pequeno, sem sombra, escala --dados.
 * Uma percentagem nunca aparece sem o universo por cima (denominador).
 */

.matriz-cabeca {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--esp-2);
}
.matriz-cabeca .universo {
  font-size: var(--texto-11);
  color: var(--secundario);
  max-width: 68ch;
}

.matriz-rolagem {
  overflow: auto;
  max-height: 70vh;
  border-radius: var(--raio-dados);
  box-shadow: var(--relevo-in);
  background: var(--superficie);
}

.matriz {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-13);
  font-variant-numeric: tabular-nums;
}
.matriz th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--superficie);
  font-size: var(--texto-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secundario);
  font-weight: 500;
  text-align: right;
  padding: var(--esp-2);
  border-bottom: var(--traco);
  white-space: nowrap;
}
.matriz th:first-child {
  left: 0;
  z-index: 4;                          /* canto: vence a coluna e a linha */
  text-align: left;
}
.matriz td {
  padding: var(--esp-1) var(--esp-2);
  border-bottom: var(--traco);
  white-space: nowrap;
  height: var(--alvo-fino);
}
.matriz tbody tr:last-child td { border-bottom: 0; }
.matriz td.segmento {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--superficie);
  text-align: left;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tinta);
}
.matriz tbody tr:hover td { background: var(--fundo); }
.matriz tbody tr:hover td.segmento { background: var(--fundo); }
.matriz tbody tr:focus-visible { outline: var(--foco); outline-offset: -2px; }

/* a célula-valor: número à direita, barra por baixo do número, plana */
.matriz .celula-valor {
  min-width: 150px;
}
.matriz .celula-valor .par {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--esp-2);
}
.matriz .barra {
  height: 4px;
  border-radius: 2px;
  background: var(--linha);
  overflow: hidden;
  min-width: 60px;
}
.matriz .barra i {
  display: block;
  height: 100%;
  background: var(--dados-2);
  border-radius: 2px;
}
.matriz .celula-valor + .celula-valor .barra i { background: var(--dados-4); }
.matriz .valor-num {
  text-align: right;
  min-width: 5ch;
  color: var(--tinta);
}

/* dimensões do segmento como texto secundário, nunca cor sozinha */
.matriz .dimensao {
  font-size: var(--texto-11);
  color: var(--secundario);
}

/* ═══════════════ 5 · <Ficha> — o esqueleto único (D1, P5)
 * identidade → números → estado → proveniência → dependentes → acções.
 * Folha lateral em vidro (sobreposição temporária — doutrina do vidro),
 * conteúdo interior plano. Serve série, fonte, loja, conta, família,
 * documento e cliente com o MESMO esqueleto.
 */

.folha {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  background: rgba(20, 20, 15, 0.28);  /* véu sobre a sala; a folha é o vidro */
}
.folha[hidden] { display: none; }

.folha .ficha {
  width: min(480px, 100vw);
  height: 100%;
  overflow-y: auto;
  background: var(--vidro-2);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-fio), var(--vidro-sombra);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.ficha .identidade h3 {
  font-family: var(--fonte-display);
  font-size: var(--texto-20);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--azul-moco);
  margin: 0 0 var(--esp-1);
}
.ficha .identidade .codigo-objecto {
  font-family: var(--fonte-mono);
  font-size: var(--texto-11);
  color: var(--secundario);
}
.ficha .fechar {
  float: right;
  font: inherit;
  font-size: var(--texto-13);
  background: var(--fundo);
  border: 0;
  border-radius: var(--raio-dados);
  box-shadow: var(--relevo-1);
  min-height: var(--alvo);
  min-width: var(--alvo);
  cursor: pointer;
  color: var(--secundario);
}
.ficha .fechar:hover { box-shadow: var(--relevo-2); color: var(--tinta); }

/* chips de estado: planos, com texto — reaproveitados do sense (.chip) */
.ficha .chips { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-top: var(--esp-2); }
.chip-engine {
  display: inline-block;
  padding: 2px var(--esp-2);
  border-radius: var(--raio-dados);
  background: var(--creme-moco);
  color: var(--tinta);
  font-size: var(--texto-11);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.chip-engine.parada { background: var(--linha); color: var(--fraca); }

/* números: o <Valor> do sense, comprimido — 28px, nunca 40, porque a
 * ficha é consulta rápida, não montra */
.ficha .numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--esp-3);
}
.ficha .numeros .valor-mini {
  background: var(--fundo);
  border-radius: var(--raio-dados);
  box-shadow: var(--relevo-1);
  padding: var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}
.ficha .valor-mini .numero {
  font-family: var(--fonte-display);
  font-size: var(--texto-28);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--azul-moco);
  font-variant-numeric: tabular-nums;
}

/* estado: a razão em texto corrente. Nunca célula muda, nunca erro cru. */
.ficha .estado-razao {
  font-size: var(--texto-13);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--creme-moco);
  border-radius: var(--raio-dados);
  padding: var(--esp-3);
  margin: 0;
}
.ficha .estado-razao b { color: var(--fraca); font-weight: 600; }

/* proveniência: o dl do sense, tal e qual — não se mexe no que funciona */
.ficha .proveniencia {
  font-size: var(--texto-13);
  display: grid;
  gap: var(--esp-1);
  margin: 0;
}
.ficha .proveniencia dt {
  font-size: var(--texto-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secundario);
}
.ficha .proveniencia dd { margin: 0 0 var(--esp-2); word-break: break-word; }
.ficha .proveniencia code {
  font-family: var(--fonte-mono);
  font-size: var(--texto-11);
  background: var(--creme-moco);
  padding: 1px var(--esp-1);
  border-radius: 3px;
}

/* dependentes: o raio — cada contagem é porta (o que a arquitectura
 * actual não tem em lado nenhum) */
.ficha .dependentes { display: flex; flex-direction: column; gap: var(--esp-1); }
.ficha .dependentes a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo);
  padding: 0 var(--esp-2);
  border-radius: var(--raio-dados);
  text-decoration: none;
  color: var(--tinta);
  font-size: var(--texto-13);
  border-bottom: var(--traco);
}
.ficha .dependentes a:last-child { border-bottom: 0; }
.ficha .dependentes a:hover { background: var(--fundo); }
.ficha .dependentes .contagem {
  font-variant-numeric: tabular-nums;
  color: var(--azul-moco);
  font-weight: 500;
}

/* acções: só as reversíveis. As que apagam NÃO EXISTEM em ecrã nenhum. */
.ficha .accoes-ficha { display: flex; gap: var(--esp-3); flex-wrap: wrap; }
.ficha .accoes-ficha button {
  font: inherit;
  font-size: var(--texto-13);
  font-weight: 500;
  color: var(--azul-moco);
  background: var(--fundo);
  border: 0;
  border-radius: var(--raio-dados);
  box-shadow: var(--relevo-1);
  min-height: var(--alvo);
  padding: 0 var(--esp-4);
  cursor: pointer;
  transition: box-shadow var(--transicao);
}
.ficha .accoes-ficha button:hover { box-shadow: var(--relevo-2); }
.ficha .accoes-ficha button:active { box-shadow: var(--relevo-in); }
.ficha .regra-accoes {
  font-size: var(--texto-11);
  color: var(--secundario);
  margin: var(--esp-1) 0 0;
  max-width: 52ch;
}

.ficha section > .etiqueta { display: block; margin-bottom: var(--esp-2); }

/* ═══════════════════════════════════════ 6 · limites e acessibilidade */

/* dedo em vez de rato: os alvos voltam aos 44px do sense */
@media (pointer: coarse) {
  .engine { --alvo: 44px; --alvo-fino: 36px; }
  .tabela-densa td { padding: var(--esp-2) var(--esp-3); }
}

/* ecrã estreito: a moldura comprime sem perder a barra de estado (D1 §4) */
@media (max-width: 767px) {
  .painel-engine { padding: var(--esp-4); border-radius: 0; }
  .folha .ficha { width: 100vw; }
  .factos { gap: var(--esp-3); }
  .facto:not(.alerta) b { font-weight: 400; }
}

/* sem relevo nem vidro: tudo continua legível e delimitado */
@media (prefers-contrast: more), (forced-colors: active) {
  .painel-engine, .rolagem, .matriz-rolagem, .paleta, .folha .ficha,
  .procura-unica input, .filtro-tabela, .ficha .valor-mini,
  .ficha .accoes-ficha button, .ficha .fechar, .sala, .engine kbd {
    box-shadow: none;
    border: 1px solid var(--tinta);
    background: var(--superficie);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .barra-estado, .paleta, .folha .ficha {
    background: var(--superficie);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}