/* ===========================================================================
   HOSPPITAL · TOKENS DA PLATAFORMA
   Servido pelo núcleo em /marca/tokens.css. Todo módulo importa com UMA linha:

       @import url("/marca/tokens.css");            no domínio do portal
       @import url("https://…/marca/tokens.css");   módulo em outro host

   ATENÇÃO AO EDITAR ESTE CABEÇALHO (corrigido em 26/08/2026)
   --------------------------------------------------------------------------
   As duas linhas acima tinham os rótulos dentro de marcadores de
   comentário. Comentário de CSS NÃO ANINHA: aquele primeiro fechamento
   encerrava ESTE bloco, e da linha seguinte em diante o navegador passava
   a ler prosa como CSS. O estrago
   não era cosmético — o parser consumia a prosa como se fosse um seletor e
   engolia o bloco `:root { … }` inteiro como corpo dele.

   Resultado: ESTE ARQUIVO NÃO ENTREGAVA UM ÚNICO TOKEN. Todo módulo que o
   importava ficava sem paleta, sem raio, sem sombra e sem altura — e sem
   erro nenhum no console, porque CSS inválido é descartado em silêncio.
   Descoberto pelo módulo de Protocolos ao medir `--azul` no navegador e
   receber vazio.

   Por isso, aqui dentro: nunca abrir nem fechar comentário. Se precisar
   citar um, escreva por extenso — "abre-comentário", "fecha-comentário".

   POR QUE UM ARQUIVO SERVIDO, E NÃO COPIADO (19/08/2026)
   --------------------------------------------------------------------------
   Cada módulo nasceu com sua própria cópia da paleta. O resultado, medido na
   tela: duas escalas tipográficas, três alturas de botão, sombras em uns
   lugares e não em outros, e o mesmo azul escrito de quatro jeitos. Copiar
   token é o mecanismo da divergência — não o descuido de quem copiou.
   Servindo de um lugar só, a próxima calibragem de marca acontece uma vez.

   DE ONDE VEM
   --------------------------------------------------------------------------
   A PALETA é a do Hosppital 360 (brand book 2026, inegociável): #0d76f3,
   #0c2967, #111119. A ESTRUTURA — famílias de quatro níveis, sombras
   derivadas do navy, alturas canônicas de controle, anel de foco e o padrão
   de micro-rótulo — vem do design system "Clinical Calm", da Central de
   Transferências, que já roda em produção há mais tempo e resolveu essas
   perguntas antes de nós. O que não veio de lá: a casca (aquele produto não
   tem barra lateral, e o NORA tem doze destinos), a biblioteca de gráficos e
   a fonte de ícones.
   =========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --azul: #0d76f3;
  --azul-escuro: #0c2967;
  --azul-claro: #7bb2f6;
  --azul-suave: #e8f1fe;
  --azul-linha: #bcd8fb;

  /* --- Neutros ---------------------------------------------------------- */
  --deep: #111119;             /* texto principal          */
  --texto-secundario: #565d6b; /* rótulos, apoio           */
  --texto-terciario: #8b8d93;  /* placeholder, micro-label */
  --borda: #e5e7ee;
  --borda-forte: #d3d6e0;
  --cinza-claro: #f0f0f4;      /* fundo da página          */
  --superficie: #ffffff;

  /* --- Semânticas, em famílias de quatro níveis -------------------------- */
  /* base = cheia · escuro = texto sobre suave · suave = fundo · linha = borda.
     Quatro níveis por família é o que faz chip, alerta, badge e botão saírem
     do mesmo lugar em vez de cada tela inventar sua mistura. */
  --ok: #248e5b;        --ok-escuro: #176b42;      --ok-suave: #e9f7ef;      --ok-linha: #c7e9d5;
  --alerta: #b57905;    --alerta-escuro: #7a5408;  --alerta-suave: #fff6df;  --alerta-linha: #ecdca6;
  --critico: #ce4036;   --critico-escuro: #a83228; --critico-suave: #fdf0ef; --critico-linha: #f2cdc9;

  /* --- Raio -------------------------------------------------------------- */
  --raio-sm: 8px;    /* campos            */
  --raio-md: 12px;   /* botões grandes    */
  --raio-lg: 16px;   /* cartões, painéis  */

  /* --- Elevação ---------------------------------------------------------- */
  /* Derivada do navy da marca — rgb(12,41,103). Sombra cinza sobre fundo
     azulado suja; sombra azulada some no fundo e só deixa a profundidade. */
  --sombra-1: 0 1px 2px rgba(12, 41, 103, .04), 0 3px 10px rgba(12, 41, 103, .05);
  --sombra-2: 0 14px 38px rgba(12, 41, 103, .12);
  --sombra-3: 0 24px 70px rgba(12, 41, 103, .24);

  /* --- Alturas canônicas de controle ------------------------------------- */
  /* O que ninguém sabe nomear e todo mundo sente como desalinhado. */
  --altura-campo: 42px;
  --altura-botao: 41px;
  --altura-botao-sm: 35px;
  --altura-botao-lg: 48px;
  --altura-icone: 36px;
  --altura-chip: 38px;

  /* --- Tipografia -------------------------------------------------------- */
  --fonte: var(--font-jakarta), "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto-base: 14px;
  --linha-base: 1.55;
}

/* Anel de foco: 3,5px da cor de acento a 14%. Visível sem gritar, e nunca
   deslocando layout (é sombra, não borda). */
.foco-anel:focus,
.campo:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--azul) 14%, transparent);
}

/* MICRO-RÓTULO — o padrão que aparece em cabeçalho de tabela, KPI, filtro e
   grupo de campos. Estava sendo imitado de olho em cada tela; agora é regra. */
.micro-rotulo {
  font-size: 11.5px;
  font-weight: 650;      /* exige a fonte variável; num fallback arredonda */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

/* Movimento desligado para quem pediu. Tela de comando é olhada por horas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
}