/*
 * NetScreen AI — tokens e base
 *
 * Os valores vêm de docs/plano-desenvolvimento.md (FASE 0).
 * Só dark mode: a plataforma gere painéis LED e vive em salas escuras.
 *
 * Desde 23 Set, a versão C do sistema visual (Efferd + NetScreen, aprovada pelo
 * Ricardo): cartões com superfície e cantos de 8–14px, Geist na interface, o
 * Bebas só no logótipo e nos números grandes, o laranja só no que é accionável
 * ou está em uso. A regra antiga "raio 0 em todo o lado" caiu com ela. Ver
 * docs/efferd/sistema-visual.md.
 */

/*
 * Os HSL abaixo foram calculados para dar exactamente os hex da marca.
 * Os valores arredondados do plano (ex.: `16 90% 48%`) davam #e9470c em vez
 * de #e8400c, e o accent saía visivelmente mais claro. O hex é a marca —
 * é ele que manda.
 */
:root {
  --background: 0 0% 3.9%;             /* #0a0a0a */
  --foreground: 37.5 28.6% 94.5%;      /* #f5f2ed */
  --primary: 14.2 90.2% 47.8%;         /* #e8400c */
  --primary-foreground: 37.5 28.6% 94.5%;
  --secondary: 24 7% 12.5%;            /* #221f1d */
  --secondary-foreground: 37.5 28.6% 94.5%;
  --muted: 24 7% 12.5%;                /* #221f1d — neutro com um toque quente */
  /* Era #5a5a5a, o valor do plano: 2,8:1 sobre o fundo, abaixo do mínimo de
     4,5:1 para texto, e o texto pequeno não se lia. #9e9e9e dá 7,4:1 e fica
     perto do muted-foreground do shadcn/Efferd em dark (#a3a3a3). */
  --muted-foreground: 24 5% 64%;       /* #a8a29e — 7,6:1 sobre o fundo */
  --accent: 37.4 91.3% 54.9%;          /* #f5a623 */
  --accent-foreground: 0 0% 3.9%;
  --card: 30 5% 7.5%;                  /* #141312 */
  --card-foreground: 37.5 28.6% 94.5%;
  --border: rgba(245, 242, 237, 0.09);
  --raio: 12px;      /* cartões */
  --raio-sm: 8px;    /* botões, campos, menu */

  /* Estados do hardware — usados em painéis e no mapa da rede */
  --online: 142 60% 45%;
  --offline: 0 72% 51%;
  --unknown: 0 0% 35%;

  color-scheme: dark;
}

* {
  border-color: var(--border);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Geist', 'DM Sans', system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* Bebas Neue só tem um peso e é toda em caixa alta por desenho.
   Tracking ligeiro para não colar as letras em corpos grandes. */
.font-display {
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* Etiquetas de secção e eyebrows */
.label-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* Foco visível — obrigatório em toda a navegação por teclado */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Barra de navegação activa: filete laranja à esquerda, sem pill arredondado */
.nav-item {
  position: relative;
  border-left: 2px solid transparent;
}
.nav-item[aria-current='page'] {
  border-left-color: hsl(var(--primary));
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

/*
 * Skeleton com varrimento horizontal em vez do pulse habitual —
 * é o gesto de um painel LED a refrescar, que é o que a plataforma gere.
 */
.loading-skeleton {
  position: relative;
  overflow: hidden;
  background: hsl(var(--muted));
}
.loading-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 242, 237, 0.06) 50%,
    transparent 100%
  );
  animation: scan 1.4s ease-in-out infinite;
}

@keyframes scan {
  to {
    transform: translateX(100%);
  }
}

/*
 * A trabalhar (8 Out): o utilizador sabe sempre que alguma coisa está a acontecer.
 * - `.ns-a-trabalhar`: o indicador a rodar, na cor do texto à volta.
 * - um botão com `aria-busy="true"` (posto pelo vigia dos pedidos, utils/api.js) ganha-o antes
 *   do texto e não fica desmaiado como um botão desligado.
 * - `#ns-actividade`: a barra do topo enquanto há uma gravação por responder.
 */
.ns-a-trabalhar,
:is(button, [role='button'])[aria-busy='true']::before {
  content: '';
  display: inline-block;
  flex: none;
  width: 0.85em;
  height: 0.85em;
  border-radius: 9999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ns-girar 0.75s linear infinite;
  vertical-align: -0.1em;
}
:is(button, [role='button'])[aria-busy='true'] { cursor: progress; }
:is(button, [role='button'])[aria-busy='true']::before { margin-right: 0.5em; }
:is(button, [role='button'])[aria-busy='true']:disabled { opacity: 0.85; }
@keyframes ns-girar { to { transform: rotate(360deg); } }

#ns-actividade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483000;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#ns-actividade.ns-actividade-visivel { opacity: 1; }
#ns-actividade::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
  animation: ns-barra 1.1s ease-in-out infinite;
}
@keyframes ns-barra { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Uma gravação que passou do prazo (9 Out, utils/api.js): diz que pode já ter ficado feita, e
   «Ver o estado» relê a página antes de se repetir. */
#ns-demora {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(640px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid hsl(var(--accent) / 0.5);
  border-radius: var(--raio);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#ns-demora button {
  flex: none;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--raio-sm);
  background: hsl(var(--primary-botao));
  color: hsl(var(--primary-foreground));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .loading-skeleton::after {
    animation: none;
  }
  /* Parado, o indicador continua a ler-se: o anel fica aberto e a barra cheia. */
  #ns-actividade::after { width: 100%; animation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollbar discreta na sidebar e nas tabelas */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--secondary));
  border: 3px solid hsl(var(--background));
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/*
 * Drawer — painel lateral que entra pela direita.
 * O prefers-reduced-motion acima anula a animação.
 */
.drawer-overlay {
  animation: fade-in 160ms ease-out;
}
.drawer-panel {
  animation: drawer-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}

/* Modal e toast — entradas curtas, anuladas pelo prefers-reduced-motion */
.modal-panel {
  animation: modal-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast {
  animation: toast-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ═══ Versão C — Efferd + NetScreen (23 Set) ═══════════════════════════════
 * Estas regras começaram como pré-visualização (?tema=efferd) e passaram a ser
 * a regra. Actuam por selectores largos sobre o que os ecrãs já usam, e por
 * isso não obrigaram a reescrever os 23 ecrãs: `.border.bg-card` passa a
 * cartão, as grelhas `gap-px` de linhas partilhadas passam a cartões
 * separados, `h1.font-display` passa a caixa normal, `.uppercase.tracking-wider`
 * perde as maiúsculas.
 *
 * Todas começam por `:root`: dá-lhes o mesmo peso que tinham na pré-visualização
 * (html[data-tema]), e ganham às classes do Tailwind, que o CDN injecta depois.
 */

/* ─── Tipografia ──────────────────────────────────────────────────────── */

/* Os títulos passam a caixa normal. O Bebas fica para os números grandes
   (os KPI, que levam tabular-nums) e para o monograma do shell. */
:root h1.font-display {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}
:root .font-display:not(h1):not(.tabular-nums):not(.text-5xl):not(.text-base) {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Botões, separadores e etiquetas deixam as maiúsculas espaçadas. */
:root .uppercase.tracking-wider {
  text-transform: none;
  letter-spacing: 0;
}
:root .label-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* ─── Superfícies ─────────────────────────────────────────────────────── */

/* As caixas deixam de ser linhas a passar dos cantos e passam a cartões. */
:root .border.bg-card:not(.border-dashed) {
  background: hsl(var(--card));
  border-color: transparent;
  border-radius: var(--raio);
  box-shadow: inset 0 0 0 1px var(--border);
}
:root .border.bg-card::before,
:root .border.bg-card::after {
  display: none;
}
:root .border-dashed {
  border-radius: var(--raio);
}

/* O Painel do dashboard (components/painel.jsx). */
:root .ns-painel {
  background: hsl(var(--card));
  border-radius: var(--raio);
  box-shadow: inset 0 0 0 1px var(--border);
}
:root .ns-painel-bordas {
  display: none;
}
:root .ns-painel.border-dashed {
  background: transparent;
  box-shadow: none;
}

/* As grelhas de "linhas partilhadas" (gap de 1px sobre a cor da linha) passam
   a cartões separados — os KPI do dashboard, as integrações da Rede, a vez em
   A minha marca. */
:root [class~='gap-px'][class*='bg-[var(--border)]'] {
  gap: 12px;
  background: transparent !important;
  box-shadow: none;
}
:root [class~='gap-px'][class*='bg-[var(--border)]'] > * {
  background: hsl(var(--card));
  border-radius: var(--raio);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ─── Controlos ───────────────────────────────────────────────────────── */

:root button,
:root input,
:root select,
:root textarea {
  border-radius: var(--raio-sm);
}
:root input[type='checkbox'],
:root input[type='radio'] {
  border-radius: 4px;
}
:root .modal-panel,
:root .toast {
  border-radius: 14px;
}

/* ─── Navegação ───────────────────────────────────────────────────────── */

:root .nav-item {
  margin-inline: 8px;
  border-left: 0;
  border-radius: var(--raio-sm);
}
:root .nav-item[aria-current='page'] {
  background: hsl(var(--muted));
}
:root .nav-item[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: hsl(var(--primary));
}
:root .nav-item[aria-current='page'] svg {
  color: hsl(var(--primary));
}

/* O cartão do plano, ao fundo do menu: deixa a moldura de cor e as maiúsculas. */
:root .ns-plano {
  border-color: transparent;
  border-radius: var(--raio-sm);
  background: hsl(var(--card));
  box-shadow: inset 0 0 0 1px var(--border);
  color: hsl(var(--foreground));
}
:root .ns-plano span:last-child {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
  font-weight: 500;
}

/* O ritmo do Efferd: 16px entre cartões, e não os 36px de hoje. */
:root main .gap-9 {
  gap: 1rem;
}

/* As caixas de dentro dos cartões (cada criativo, cada canal) acompanham o
   raio, mais pequeno — cantos rectos dentro de um cartão redondo destoavam. */
:root .border.border-border[class*=' p-'],
:root .border.border-border[class^='p-'] {
  border-radius: var(--raio-sm);
}

/* ═══ Ordem visual — fundações (28 Set) ══════════════════════════════════
 * Pedido do Ricardo: "notar melhor as zonas que podemos seleccionar, os campos
 * a preencher". Os campos tinham o fundo da página e uma borda a 9%, e liam-se
 * como texto; os botões secundários tinham o cinzento do texto de apoio e
 * pareciam desligados; as escolhas marcadas só mudavam a cor da borda.
 *
 * Seguem as primitivas do shadcn/ui em que o Efferd assenta (Input, Button,
 * Toggle, Checkbox): campo com véu claro e borda a 15%, anel de foco de 3px,
 * aria-invalid a vermelho, escolha marcada com borda, fundo e visto.
 * Como a camada de 23 Set, actua sobre as classes que os ecrãs já usam, e
 * acrescenta classes ns-* para o que se escreve de novo.
 * Ver docs/design/2026-09-28-ordem-visual.md.
 */
:root {
  --campo-fundo: rgba(245, 242, 237, 0.04);
  --campo-fundo-hover: rgba(245, 242, 237, 0.06);
  --campo-borda: rgba(245, 242, 237, 0.15);
  --campo-borda-hover: rgba(245, 242, 237, 0.26);
  --anel: hsl(var(--primary) / 0.35);
  --escolha-fundo: hsl(var(--primary) / 0.12);
  --escolha-hover: rgba(245, 242, 237, 0.05);
  --perigo: 0 72% 51%;
  /* O perigo e o laranja como texto e como fundo de texto (A1, 5 Out; parecer do Codex):
     o --perigo dava 3,87:1 sobre o cartão e o texto claro sobre o laranja 3,64:1, abaixo dos
     4,5:1 do texto pequeno. O --offline e o --primary ficam: são o estado do hardware e a
     marca nas bordas, no menu e nas escolhas. */
  --perigo-texto: 0 72% 64%;           /* #e56161: 5,50:1 no cartão, 4,86:1 em #221f1d */
  --primary-botao: 14.2 90.2% 41%;     /* #c7370a: 4,73:1 com o texto claro */
  --primary-botao-hover: 14.2 90.2% 37%; /* #b33209: 5,56:1; o hover escurece, não clareia */
  --primary-texto: 14.2 90.2% 60%;     /* texto laranja sobre o véu laranja das etiquetas: ≥4,5:1 */
  /* o visto das escolhas marcadas, desenhado com a cor do texto (mask) */
  --visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ─── Campos ──────────────────────────────────────────────────────────── */

/* Todo o campo de escrever; os de edição em linha (border-0) ficam de fora. */
:root :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='color']):not([type='range']):not([type='hidden']):not([type='submit']):not([type='button']), textarea, select):not(.border-0),
:root .ns-campo {
  background-color: var(--campo-fundo);
  border: 1px solid var(--campo-borda);
  color: hsl(var(--foreground));
  transition: border-color 120ms, box-shadow 120ms, background-color 120ms;
}
:root :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='color']):not([type='range']):not([type='hidden']), textarea, select):not(.border-0):not(:disabled):not(:focus):hover {
  border-color: var(--campo-borda-hover);
  background-color: var(--campo-fundo-hover);
}
:root :is(input, textarea, select):not(.border-0):not([type='checkbox']):not([type='radio']):focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px var(--anel);
}
:root :is(input, textarea, select):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
:root :is(input, textarea, select)[aria-invalid='true'] {
  border-color: hsl(var(--perigo));
}
:root :is(input, textarea, select)[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px hsl(var(--perigo) / 0.3);
}
/* O placeholder é um exemplo, não um valor: mais baixo que o texto escrito,
   e ainda legível (cerca de 4:1). */
:root :is(input, textarea)::placeholder {
  color: hsl(var(--muted-foreground) / 0.72);
  opacity: 1;
}
/* O select nativo desenha a seta à sua maneira em cada browser; esta é a do shadcn. */
:root select:not(.border-0):not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a8a29e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 14px;
  cursor: pointer;
}
:root select option {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}
:root input[type='date']::-webkit-calendar-picker-indicator,
:root input[type='time']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}

/* Visto e rádio nativos: maiores, com a cor da marca, e com mão. */
:root input[type='checkbox'],
:root input[type='radio'] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}
:root input[type='checkbox']:disabled,
:root input[type='radio']:disabled {
  cursor: not-allowed;
}
:root label:has(input[type='checkbox']:not(:disabled)),
:root label:has(input[type='radio']:not(:disabled)) {
  cursor: pointer;
}

/* Rótulo de campo (acima) e ajuda (abaixo). Um <label> com label-eyebrow é
   sempre o rótulo de um campo, e não o título de uma secção: passa a caixa
   normal e a cor do texto, para o campo se ler como "isto preenche-se". */
:root label.label-eyebrow,
:root .ns-rotulo {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: hsl(var(--foreground));
}
:root label.label-eyebrow + :is(input, textarea, select) {
  margin-top: 0.375rem;
}
.ns-rotulo {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.375rem;
}
.ns-ajuda {
  display: block;
  font-size: 0.75rem;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
  margin-top: 0.375rem;
}
.ns-erro {
  display: block;
  font-size: 0.75rem;
  color: hsl(var(--perigo-texto));
  margin-top: 0.375rem;
}

/* ─── Cartões de escolha ─────────────────────────────────────────────────
 * Uma linha com moldura que tem um visto ou rádio lá dentro é uma escolha:
 * convida ao clique no hover e, marcada, ganha a borda e o fundo da marca. */
:root label.border:has(input[type='checkbox'], input[type='radio']),
:root .ns-escolha {
  cursor: pointer;
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms;
}
:root label.border:has(input[type='checkbox']:not(:disabled), input[type='radio']:not(:disabled)):hover,
:root .ns-escolha:not(:disabled):hover {
  background-color: var(--escolha-hover);
  border-color: var(--campo-borda-hover);
}
:root label.border:has(input[type='checkbox']:checked, input[type='radio']:checked),
:root .ns-escolha[aria-pressed='true'],
:root .ns-escolha[aria-checked='true'] {
  border-color: hsl(var(--primary));
  background-color: var(--escolha-fundo);
}
:root label.border:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--anel);
}

/* ─── Chips (alternar e escolher um) ──────────────────────────────────────
 * Tudo o que tem aria-pressed ou role=radio é uma escolha, esteja onde estiver.
 * Marcada: borda e fundo laranja e texto claro; nos chips (ns-chip) também um
 * visto antes do rótulo, para não depender só da cor. */
:root button[aria-pressed],
:root [role='radio'] {
  cursor: pointer;
  transition: border-color 120ms, background-color 120ms, color 120ms;
}
:root button[aria-pressed='false']:not(:disabled):hover,
:root [role='radio'][aria-checked='false']:not(:disabled):hover {
  background-color: var(--escolha-hover);
  border-color: var(--campo-borda-hover);
  color: hsl(var(--foreground));
}
:root button.border[aria-pressed='true'],
:root [role='radio'].border[aria-checked='true'] {
  border-color: hsl(var(--primary));
  background-color: var(--escolha-fundo);
  color: hsl(var(--foreground));
}
/* Opções em lista (sem moldura, largura toda): a marcada ganha o fundo da marca
   e um filete à esquerda, como o menu. */
:root button[aria-pressed='true'].w-full:not(.border):not(.ns-chip) {
  background-color: var(--escolha-fundo);
  box-shadow: inset 3px 0 0 hsl(var(--primary));
  color: hsl(var(--foreground));
}
:root .ns-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--campo-borda);
  border-radius: 9999px;
  background-color: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  outline: none;
}
:root .ns-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
:root .ns-chip[aria-pressed='true']::before,
:root .ns-chip[aria-checked='true']::before {
  content: '';
  width: 12px;
  height: 12px;
  margin-left: -2px;
  background-color: hsl(var(--primary));
  -webkit-mask: var(--visto) center / contain no-repeat;
  mask: var(--visto) center / contain no-repeat;
}

/* ─── Botões ──────────────────────────────────────────────────────────────
 * Quatro níveis, como o Button do shadcn: principal (laranja cheio), secundário
 * (moldura com véu), fantasma (só texto, fundo no hover) e ligação. Os
 * secundários existentes (border border-border) ganham o véu e o texto claro:
 * em cinzento pareciam desligados. */
:root button.border.border-border:not(.bg-card):not(.bg-primary):not([aria-pressed]):not([role='radio']):not([role='tab']):not(.ns-escolha),
:root a.border.border-border[href],
:root .ns-btn-secundario {
  background-color: var(--campo-fundo);
  border-color: var(--campo-borda);
  color: hsl(var(--foreground));
  font-weight: 500;
  transition: border-color 120ms, background-color 120ms;
}
:root button.border.border-border:not(.bg-card):not(.bg-primary):not([aria-pressed]):not([role='radio']):not([role='tab']):not(.ns-escolha):not(:disabled):hover,
:root a.border.border-border[href]:hover,
:root .ns-btn-secundario:not(:disabled):hover {
  background-color: rgba(245, 242, 237, 0.09);
  border-color: var(--campo-borda-hover);
}
/* Texto claro sobre o laranja, seja botão ou não (o passo do Início, o visto das escolhas):
   o fundo com contraste. A sombra e o peso de botão, só nos botões (revisor, 5 Out). */
:root .bg-primary.text-primary-foreground {
  background-color: hsl(var(--primary-botao));
}
:root button.bg-primary,
:root .ns-btn-primario {
  background-color: hsl(var(--primary-botao));
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background-color 120ms, filter 120ms;
}
:root button.bg-primary:not(:disabled):hover,
:root .ns-btn-primario:not(:disabled):hover {
  background-color: hsl(var(--primary-botao-hover));
}
/* O principal desligado continua a ler-se como o principal (laranja apagado),
   e não como mais um botão cinzento ao lado do Cancelar. */
:root button.bg-primary:disabled {
  box-shadow: none;
  background-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground) / 0.55);
  opacity: 1;
  filter: none;
}
:root button:disabled {
  cursor: not-allowed;
}
/* O principal do Criar também tem moldura (border-border) e fica com o véu do secundário; a regra
   de cima punha-lhe opacidade 1 e desligado parecia igual ao ligado (cliente simulado, 14 Out). */
:root button.border.border-border.bg-primary:disabled {
  opacity: 0.5;
}
/* Acções em texto ("Corrigir o texto", "Ver porquê"): a linha por baixo diz
   que se carrega, mesmo antes do hover. */
:root button[class*='underline-offset']:not(.underline):not(:disabled) {
  text-decoration-line: underline;
  text-decoration-color: hsl(var(--muted-foreground) / 0.45);
  text-underline-offset: 3px;
}
:root button[class*='underline-offset']:not(:disabled):not([class*='hover:text-']):hover {
  text-decoration-color: currentColor;
  color: hsl(var(--foreground));
}
/* Foco de teclado: o mesmo anel de 3px em tudo o que se carrega. */
:root :is(button, a, [role='button'], [role='tab'], summary):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--anel);
}

.ns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  border-radius: var(--raio-sm);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.ns-btn:disabled { opacity: 0.5; }
.ns-btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.ns-btn-primario { background: hsl(var(--primary-botao)); color: hsl(var(--primary-foreground)); }
.ns-btn-secundario { border: 1px solid var(--campo-borda); }
.ns-btn-fantasma { background: transparent; color: hsl(var(--muted-foreground)); }
.ns-btn-fantasma:not(:disabled):hover { background: var(--escolha-hover); color: hsl(var(--foreground)); }
/* Suave: o próximo passo de uma linha numa lista de trabalho. Laranja na
   moldura e não no fundo, para o principal da página continuar a ser um só. */
.ns-btn-suave { background: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.55); color: hsl(var(--foreground)); }
.ns-btn-suave:not(:disabled):hover { background: hsl(var(--primary) / 0.2); border-color: hsl(var(--primary)); }
.ns-btn-perigo { background: transparent; border: 1px solid hsl(var(--perigo) / 0.45); color: hsl(var(--perigo-texto)); }
.ns-btn-perigo:not(:disabled):hover { background: hsl(var(--perigo) / 0.12); }

/* ─── Disclosure ("Mais opções") ──────────────────────────────────────── */
:root summary {
  cursor: pointer;
  user-select: none;
}
:root summary:hover {
  color: hsl(var(--foreground));
}

/* ─── Secções dentro de uma página ───────────────────────────────────────
 * Um título de secção por nível: 14px, peso 600, cor clara; a descrição por
 * baixo em cinzento. */
.ns-seccao-titulo {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -0.005em;
}
.ns-seccao-desc {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

/* O painel LED do ecrã de entrada (3 Nov): a grelha de pontos do logótipo, em grande, com um
   brilho lento a atravessá-la. Um só movimento, parado com «reduzir movimento». */
.ns-led {
  background-color: hsl(var(--card));
  background-image: radial-gradient(circle at center, hsl(var(--primary) / 0.28) 1.4px, transparent 1.9px);
  background-size: 13px 13px;
}
.ns-led::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(45% 40% at 50% 50%, hsl(var(--primary) / 0.22), transparent 70%);
  animation: ns-led-brilho 14s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
  pointer-events: none;
}
.ns-led::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(var(--background)) 0%, hsl(var(--background) / 0.55) 38%, transparent 70%);
  pointer-events: none;
}
@keyframes ns-led-brilho {
  from { transform: translate(-18%, -12%); }
  to   { transform: translate(16%, 14%); }
}
@media (prefers-reduced-motion: reduce) {
  .ns-led::before { animation: none; }
}
.ns-led-titulo {
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-wrap: balance;
}