/*
 * Sistema de design do Sentinela — três camadas.
 *
 *   primitiva  →  valores brutos, sem significado (--cor-cinza-200)
 *   semântica  →  o papel de cada valor na interface (--cor-borda)
 *   componente →  o que cada peça consome (--card-borda)
 *
 * O motivo da separação: trocar o azul da marca ou passar a interface para
 * tema escuro deve mexer em UMA camada, não nos 15 lugares que hoje repetem
 * `border-slate-200 bg-white p-5 shadow-sm`.
 *
 * Regra de uso nos templates: use as classes de componente (.card, .btn,
 * .selo) para as peças recorrentes; utilitários do Tailwind ficam para
 * layout (grid, flex, gap) e ajustes pontuais.
 */

:root {
  /* ───────── camada primitiva ───────── */
  --cinza-50: #f8fafc;
  --cinza-100: #f1f5f9;
  --cinza-200: #e2e8f0;
  --cinza-300: #cbd5e1;
  --cinza-400: #94a3b8;
  --cinza-500: #64748b;
  --cinza-600: #475569;
  --cinza-700: #334155;
  --cinza-800: #1e293b;
  --cinza-900: #0f172a;

  --ciano-50: #ecfeff;
  --ciano-100: #cffafe;
  --ciano-200: #a5f3fc;
  --ciano-600: #0891b2;
  --ciano-700: #0e7490;
  --ciano-800: #155e75;

  --verde-50: #ecfdf5;
  --verde-200: #a7f3d0;
  --verde-600: #059669;
  --verde-700: #047857;

  --ambar-50: #fffbeb;
  --ambar-200: #fde68a;
  --ambar-500: #f59e0b;
  --ambar-800: #92400e;

  --vermelho-50: #fef2f2;
  --vermelho-200: #fecaca;
  --vermelho-500: #ef4444;
  --vermelho-600: #dc2626;
  --vermelho-700: #b91c1c;

  --branco: #ffffff;

  /* Escala de espaçamento em passos de 4px: usar a escala evita o
     "p-3 aqui, p-5 ali" que faz a interface parecer desalinhada. */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.25rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;

  --raio-sm: 0.375rem;
  --raio-md: 0.5rem;
  --raio-lg: 0.75rem;
  --raio-full: 9999px;

  /* Sombras discretas: a hierarquia vem de espaço e peso tipográfico,
     não de sombra pesada. */
  --sombra-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --sombra-md: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --sombra-lg: 0 8px 24px -8px rgb(15 23 42 / 0.14);

  /* ───────── camada semântica ───────── */
  --cor-fundo: var(--cinza-50);
  --cor-superficie: var(--branco);
  --cor-superficie-suave: var(--cinza-50);
  --cor-borda: var(--cinza-200);
  --cor-borda-forte: var(--cinza-300);

  --cor-texto: var(--cinza-900);
  --cor-texto-suave: var(--cinza-600);
  --cor-texto-fraco: var(--cinza-400);
  --cor-texto-invertido: var(--branco);

  --cor-marca: var(--ciano-700);
  --cor-marca-hover: var(--ciano-600);
  --cor-marca-suave: var(--ciano-50);
  --cor-marca-borda: var(--ciano-200);

  /* Estados: cada um com fundo, borda e texto próprios, para que um selo
     de "atenção" seja igual em qualquer tela. */
  --cor-ok: var(--verde-700);
  --cor-ok-fundo: var(--verde-50);
  --cor-ok-borda: var(--verde-200);

  --cor-atencao: var(--ambar-800);
  --cor-atencao-fundo: var(--ambar-50);
  --cor-atencao-borda: var(--ambar-200);

  --cor-erro: var(--vermelho-700);
  --cor-erro-fundo: var(--vermelho-50);
  --cor-erro-borda: var(--vermelho-200);

  /* Escala tipográfica: poucos degraus, usados com consistência. */
  --fonte-xs: 0.75rem;
  --fonte-sm: 0.875rem;
  --fonte-base: 1rem;
  --fonte-lg: 1.125rem;
  --fonte-xl: 1.5rem;
  --fonte-2xl: 1.875rem;
  --peso-medio: 500;
  --peso-semi: 600;

  /* ───────── camada de componente ───────── */
  --card-fundo: var(--cor-superficie);
  --card-borda: var(--cor-borda);
  --card-raio: var(--raio-lg);
  --card-padding: var(--esp-5);
  --card-sombra: var(--sombra-md);

  --btn-raio: var(--raio-md);
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 0.875rem;

  --selo-raio: var(--raio-full);
  --selo-padding: 0.125rem 0.5rem;
  --selo-fonte: var(--fonte-xs);

  --nav-item-raio: var(--raio-md);
  --nav-ativo-fundo: var(--cor-marca-suave);
  --nav-ativo-texto: var(--ciano-800);
}

/* ───────── componentes ───────── */

.card {
  background: var(--card-fundo);
  border: 1px solid var(--card-borda);
  border-radius: var(--card-raio);
  padding: var(--card-padding);
  box-shadow: var(--card-sombra);
}

/* Cartão que reage ao passar o mouse — para itens clicáveis (quadro). */
.card-interativo {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.card-interativo:hover {
  box-shadow: var(--sombra-lg);
  border-color: var(--cor-borda-forte);
}

/* Título de seção: um só tratamento, em vez de cinco variações de
   uppercase/tracking espalhadas pelos templates. */
.titulo-seccao {
  font-size: var(--fonte-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-fraco);
}

.titulo-pagina {
  font-size: var(--fonte-2xl);
  font-weight: var(--peso-semi);
  letter-spacing: -0.02em;
  color: var(--cor-texto);
}

.subtitulo {
  font-size: var(--fonte-sm);
  color: var(--cor-texto-suave);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  border-radius: var(--btn-raio);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--fonte-sm);
  font-weight: var(--peso-medio);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

.btn-primario {
  background: var(--cor-marca);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-sm);
}
.btn-primario:hover {
  background: var(--cor-marca-hover);
}

.btn-secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  border-color: var(--cor-borda-forte);
}
.btn-secundario:hover {
  background: var(--cor-superficie-suave);
}

.btn-perigo {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
  border-color: var(--cor-erro-borda);
}
.btn-perigo:hover {
  background: var(--vermelho-200);
}

.btn-sucesso {
  background: var(--cor-ok);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-sm);
}
.btn-sucesso:hover {
  background: var(--verde-600);
}

.btn-sm {
  padding: 0.3125rem 0.625rem;
  font-size: var(--fonte-xs);
}

/* Selo: rótulo curto de estado. As variantes cobrem os quatro papéis que
   a interface realmente usa. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  border-radius: var(--selo-raio);
  padding: var(--selo-padding);
  font-size: var(--selo-fonte);
  font-weight: var(--peso-medio);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  white-space: nowrap;
}
.selo-marca {
  background: var(--cor-marca-suave);
  border-color: var(--cor-marca-borda);
  color: var(--ciano-800);
}
.selo-ok {
  background: var(--cor-ok-fundo);
  border-color: var(--cor-ok-borda);
  color: var(--cor-ok);
}
.selo-atencao {
  background: var(--cor-atencao-fundo);
  border-color: var(--cor-atencao-borda);
  color: var(--cor-atencao);
}
.selo-erro {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
  color: var(--cor-erro);
}

/* Item de navegação da barra lateral. */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  border-radius: var(--nav-item-raio);
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--fonte-sm);
  color: var(--cor-texto-suave);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover {
  background: var(--cinza-100);
  color: var(--cor-texto);
}
.nav-item[aria-current="page"] {
  background: var(--nav-ativo-fundo);
  color: var(--nav-ativo-texto);
  font-weight: var(--peso-medio);
}
.nav-item svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.75;
}
.nav-item[aria-current="page"] svg {
  opacity: 1;
}

/* Campo de formulário (já existia como .field; agora sobre tokens). */
.field {
  width: 100%;
  border-radius: var(--raio-md);
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie);
  padding: var(--esp-2) var(--esp-3);
  color: var(--cor-texto);
  font-size: var(--fonte-sm);
}
.field:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px rgb(8 145 178 / 0.12);
}

/* Faixa de destaque para avisos dentro de uma página. */
.aviso {
  border-radius: var(--raio-md);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie-suave);
  padding: var(--esp-4);
}
.aviso-atencao {
  background: var(--cor-atencao-fundo);
  border-color: var(--cor-atencao-borda);
}
.aviso-erro {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
}

[x-cloak] {
  display: none !important;
}

/* ───────── tela de login ─────────
   Mesma linguagem visual do Liotto Comunica: painel escuro à esquerda com
   órbitas, formulário claro à direita. Os valores vêm do globals.css do
   Comunica para que as duas telas sejam reconhecidamente do mesmo sistema. */

.login-marca {
  background:
    radial-gradient(circle at 18% 12%, rgb(14 165 233 / 16%), transparent 30%),
    linear-gradient(145deg, #071b3a 0%, #0b2d62 58%, #123f83 100%);
}

/* Círculos concêntricos decorativos: dão profundidade ao painel sem
   depender de imagem, que teria de ser baixada e versionada. */
.login-orbita {
  position: absolute;
  border: 1px solid rgb(147 197 253 / 14%);
  border-radius: var(--raio-full);
  pointer-events: none;
}
.login-orbita-1 { right: -19rem; top: 13%; width: 43rem; height: 43rem; }
.login-orbita-2 { right: -12rem; top: 23%; width: 27rem; height: 27rem; border-color: rgb(34 211 238 / 15%); }
.login-orbita-mobile { right: -6rem; top: -8rem; width: 20rem; height: 20rem; }

@keyframes login-marca-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes login-form-entra {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
.login-marca-entra { animation: login-marca-entra 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.login-form-entra { animation: login-form-entra 520ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Campo com ícone à esquerda — mesma altura e anel de foco do Comunica. */
.login-campo {
  width: 100%;
  height: 3rem;
  border-radius: var(--raio-md);
  border: 1px solid var(--cinza-300);
  background: var(--branco);
  padding: 0 var(--esp-4) 0 2.75rem;
  font-size: 0.9375rem;
  color: var(--cinza-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-campo::placeholder { color: var(--cinza-400); }
.login-campo:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px #dbeafe;
}

.login-botao {
  width: 100%;
  height: 3rem;
  border-radius: var(--raio-md);
  background: #2563eb;
  color: var(--branco);
  font-size: var(--fonte-sm);
  font-weight: var(--peso-semi);
  transition: background-color 0.15s ease;
}
.login-botao:hover { background: #1d4ed8; }
.login-botao:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  .login-marca-entra,
  .login-form-entra { animation: none; }
}