/* ==========================================================================
   Somax Central — camada de tema
   Carregada DEPOIS do style.css compilado. Fica separada de propósito: o
   style.css é saída de build do Tailwind e seria sobrescrito num rebuild;
   este arquivo é escrito à mão e sobrevive.

   Objetivo: layout claro, com movimento e destaque em azul.
   ========================================================================== */

:root {
  /* Escala azul da marca */
  --somax-50:  #eef5ff;
  --somax-100: #dbe8ff;
  --somax-200: #bcd5ff;
  --somax-300: #8fb8ff;
  --somax-400: #5b93f7;
  --somax-500: #2f7ef0;
  --somax-600: #1c62d8;
  --somax-700: #1a4fb4;
  --somax-800: #17408d;
  --somax-900: #10243b;

  /* Token de marca já usado pelo app (bg-custom-blue, text-custom-blue, ring-custom-blue).
     Era #10243b — um navy quase preto. Passa a azul de verdade, mantendo
     contraste suficiente para texto branco por cima. */
  --color-custom-blue: var(--somax-700);

  /* Superfícies claras, com leve viés azul em vez de cinza neutro */
  --somax-surface: #ffffff;
  --somax-canvas: #f5f8fe;
  --somax-hover: rgba(47, 126, 240, 0.07);
  --somax-ring: rgba(47, 126, 240, 0.35);
  --somax-glow: rgba(28, 98, 216, 0.28);

  --somax-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --somax-fast: 160ms;
  --somax-slow: 420ms;

  /* ---- identidade "moderno e leve" ----------------------------------------
     Três alavancas, aplicadas igual aqui e no portal do vendedor:

     TIPOGRAFIA  Manrope. Geométrica com um toque humanista — tem
                 personalidade nas letras sem virar fonte decorativa, e os
                 números ficam legíveis em tabela. `system-ui` continua como
                 reserva: se a fonte não carregar, a tela não desmonta.
     RAIOS       maiores. Card de 12px vira 18px; o que é pílula vira redondo
                 de verdade. É o que mais muda a sensação de "leve".
     SOMBRAS     difusas e baixas, no lugar de borda dura. A borda vira um
                 traço quase invisível, e é a sombra que separa o cartão do
                 fundo.
     -------------------------------------------------------------------- */
  --somax-fonte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --somax-raio-sm: 10px;
  --somax-raio-md: 14px;
  --somax-raio-lg: 18px;
  --somax-raio-xl: 24px;

  --somax-sombra-sm: 0 1px 2px rgba(16, 36, 59, .04), 0 2px 8px rgba(16, 36, 59, .04);
  --somax-sombra-md: 0 1px 3px rgba(16, 36, 59, .05), 0 10px 28px -8px rgba(16, 36, 59, .10);
  --somax-sombra-lg: 0 2px 6px rgba(16, 36, 59, .06), 0 22px 48px -16px rgba(16, 36, 59, .16);
}

/* --------------------------------------------------------------------------
   0. Identidade compartilhada
   -------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
  font-family: var(--somax-fonte);
}

/* Dinheiro em coluna só alinha com número de largura fixa. */
table td,
table th {
  font-variant-numeric: tabular-nums;
}

/* Raios: o Tailwind compilado define estes valores; aqui eles crescem. */
.rounded-sm  { border-radius: 8px; }
.rounded     { border-radius: var(--somax-raio-sm); }
.rounded-md  { border-radius: var(--somax-raio-sm); }
.rounded-lg  { border-radius: var(--somax-raio-md); }
.rounded-xl  { border-radius: var(--somax-raio-lg); }
.rounded-2xl { border-radius: var(--somax-raio-lg); }
.rounded-3xl { border-radius: var(--somax-raio-xl); }

/* Sombras difusas no lugar das duras. */
.shadow-sm  { box-shadow: var(--somax-sombra-sm); }
.shadow-lg  { box-shadow: var(--somax-sombra-md); }
.shadow-xl  { box-shadow: var(--somax-sombra-lg); }
.shadow-2xl { box-shadow: var(--somax-sombra-lg); }

/* Bordas mais leves: quem separa os blocos passa a ser a sombra. */
.border-gray-50  { border-color: #f2f6fd; }
.border-gray-100 { border-color: #eaf0fb; }
.border-gray-200 { border-color: #dfe8f7; }

/* Fundo da aplicação levemente azulado, para o branco dos cards destacar. */
body {
  background-color: var(--somax-canvas);
}

/* --------------------------------------------------------------------------
   1. Botão primário — gradiente azul, com brilho ao passar o mouse
   -------------------------------------------------------------------------- */

.bg-custom-blue {
  background-image: linear-gradient(135deg, var(--somax-600) 0%, var(--somax-800) 100%);
  box-shadow: 0 1px 2px rgba(16, 36, 59, 0.14);
  transition:
    box-shadow var(--somax-fast) var(--somax-ease),
    transform var(--somax-fast) var(--somax-ease),
    filter var(--somax-fast) var(--somax-ease);
}

button.bg-custom-blue:hover:not(:disabled),
a.bg-custom-blue:hover {
  box-shadow: 0 6px 18px -4px var(--somax-glow);
  transform: translateY(-1px);
  filter: saturate(1.12);
}

button.bg-custom-blue:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(16, 36, 59, 0.2);
}

/* --------------------------------------------------------------------------
   2. Foco visível sempre azul (acessibilidade + identidade)
   -------------------------------------------------------------------------- */

:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--somax-500);
  outline-offset: 2px;
  border-radius: 6px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--somax-400) !important;
  box-shadow: 0 0 0 3px var(--somax-ring);
  transition: box-shadow var(--somax-fast) var(--somax-ease),
              border-color var(--somax-fast) var(--somax-ease);
}

/* --------------------------------------------------------------------------
   3. Linhas de tabela — realce azul em vez de cinza
   -------------------------------------------------------------------------- */

tbody tr {
  transition: background-color var(--somax-fast) var(--somax-ease),
              box-shadow var(--somax-fast) var(--somax-ease);
}

tbody tr:hover {
  background-color: var(--somax-hover) !important;
  box-shadow: inset 3px 0 0 0 var(--somax-500);
}

thead th {
  transition: color var(--somax-fast) var(--somax-ease);
}

/* --------------------------------------------------------------------------
   4. Cards — elevação azulada ao interagir
   -------------------------------------------------------------------------- */

.rounded-3xl.border,
.rounded-2xl.border {
  transition: box-shadow var(--somax-slow) var(--somax-ease),
              transform var(--somax-slow) var(--somax-ease),
              border-color var(--somax-slow) var(--somax-ease);
}

.rounded-3xl.border:hover,
.rounded-2xl.border:hover {
  border-color: var(--somax-200);
  box-shadow: 0 10px 30px -12px var(--somax-glow);
}

/* --------------------------------------------------------------------------
   5. Animações
   -------------------------------------------------------------------------- */

/* Pulso de atenção em azul da marca (antes era sky-500 solto). */
@keyframes pulse-attention {
  0%, 100% {
    border-color: rgba(47, 126, 240, 0.30);
    box-shadow: 0 0 0 0 rgba(47, 126, 240, 0.18);
  }
  50% {
    border-color: rgba(47, 126, 240, 0.75);
    box-shadow: 0 0 14px 3px rgba(47, 126, 240, 0.22);
  }
}

/* Esqueleto de carregamento: varredura azul em vez de piscar opacidade.
   Só afeta blocos cinzas de placeholder — ícones com animate-pulse ficam intactos. */
@keyframes somax-shimmer {
  from { background-position: -180% 0; }
  to   { background-position: 180% 0; }
}

.animate-pulse[class*="bg-gray-"],
.animate-pulse[class*="bg-slate-"] {
  animation: somax-shimmer 1.5s linear infinite;
  background-image: linear-gradient(
    90deg,
    var(--somax-100) 0%,
    var(--somax-200) 45%,
    var(--somax-100) 90%
  );
  background-size: 220% 100%;
}

/* Spinner na cor da marca. */
.animate-spin {
  color: var(--somax-600);
}

/* Entrada suave do conteúdo principal a cada navegação.
 *
 * Aqui já não bastava evitar `transform`. Qualquer animação de OPACIDADE cria
 * contexto de empilhamento enquanto está em efeito — e `fill-mode: both`
 * mantém a animação em efeito PARA SEMPRE depois de terminar. O conteúdo de
 * <main> virava um contexto permanente, e todo modal `fixed inset-0 z-50`
 * ficava preso dentro dele: o menu superior (z-40, na raiz) passava a ser
 * pintado por cima, cobrindo o X e os botões de situação da venda.
 *
 * `backwards` aplica o quadro inicial só ANTES de começar. Terminada a
 * animação, o elemento volta a ser um elemento comum e o modal sobe. */
@keyframes somax-rise {
  from { opacity: 0; }
  to   { opacity: 1; }
}

main > * {
  animation: somax-rise var(--somax-slow) var(--somax-ease) backwards;
}

/* E enquanto houver um diálogo aberto, nem os 420ms de animação: o modal não
 * pode nascer atrás do menu nem por um instante. */
main > *:has([role="dialog"]) {
  animation: none;
}

/* Diálogos entram com leve escala. Aplicado no PAINEL interno, nunca no overlay
 * `fixed` — transformar o overlay reposicionaria o modal inteiro.
 *
 * `backwards` pelo mesmo motivo de cima: com `both`, o `transform` do painel
 * continuava em efeito e virava bloco de referência para o que estivesse
 * dentro — a confirmação "Marcar como pago?" nasce `fixed` DENTRO do modal do
 * repasse e se ancorava no painel em vez da janela. */
@keyframes somax-pop {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: none; }
}

[role="dialog"] > * {
  animation: somax-pop 200ms var(--somax-ease) backwards;
}

/* Menu superior fora do caminho enquanto houver diálogo aberto.
 *
 * `z-index` mais baixo NÃO resolve sozinho: se o modal estiver preso num
 * contexto de empilhamento aninhado, o menu vence a disputa esteja em que
 * número estiver. `position: static` resolve de verdade — elemento não
 * posicionado é pintado numa etapa ANTERIOR à de qualquer elemento
 * posicionado, em qualquer navegador, com ou sem contexto aninhado.
 *
 * O menu fica escondido atrás do véu do modal de qualquer jeito; ele só
 * precisa voltar a ser fixo quando o diálogo fecha.
 *
 * Duas formas de detectar, de propósito: a classe é posta pelo próprio app ao
 * abrir o modal e funciona em qualquer navegador; o `:has()` é a reserva para
 * qualquer diálogo que não passe por esse caminho. */
body.somax-modal-aberto nav.sticky,
body:has([role="dialog"]) nav.sticky {
  position: static;
  z-index: 0;
}

body.somax-modal-aberto main > *,
body:has([role="dialog"]) main > * {
  animation: none;
}

/* Badge/indicador azul ganha halo pulsante. */
.animate-pulse.text-blue-500,
.animate-pulse.text-custom-blue {
  filter: drop-shadow(0 0 4px rgba(47, 126, 240, 0.55));
}

/* --------------------------------------------------------------------------
   6. Barra de rolagem azulada (WebKit)
   -------------------------------------------------------------------------- */

* {
  scrollbar-color: var(--somax-300) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--somax-200);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color var(--somax-fast) var(--somax-ease);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--somax-300); }

/* --------------------------------------------------------------------------
   7. Respeita quem pediu menos movimento no sistema
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button.bg-custom-blue:hover:not(:disabled) { transform: none; }
}

/* ==========================================================================
   8. MODO ESCURO — identidade "tech premium" em azul
   --------------------------------------------------------------------------
   O style.css é saída de build do Tailwind e não tem variantes `dark:`. Então
   o modo escuro aqui é feito redefinindo as UTILIDADES de cor que o app usa —
   `.bg-white`, `.text-gray-500`, `.border-gray-200` e companhia — só dentro de
   `[data-tema="escuro"]`.

   Parece bruto, e é de propósito: é a única forma de virar o tema de um bundle
   compilado sem recompilar nada. O modo claro não é tocado em lugar nenhum —
   toda regra abaixo está atrás do seletor de tema.
   ========================================================================== */

:root[data-tema="escuro"] {
  /* Escala do escuro: azul de verdade, nunca preto. */
  --sx-bg-0:   #050b16;   /* mais profundo que a página */
  --sx-bg-1:   #08111f;   /* fundo da aplicação */
  --sx-bg-2:   #0d1b30;   /* cartões */
  --sx-bg-3:   #132844;   /* elevado, hover, cabeçalho de tabela */
  --sx-bg-4:   #1a3557;   /* realce de linha */

  --sx-line:   #1b3251;   /* divisórias discretas */
  --sx-line-2: #26456e;   /* bordas visíveis */

  --sx-text:   #eaf2ff;   /* branco azulado — texto principal */
  --sx-text-2: #a6c3e8;   /* secundário */
  --sx-text-3: #6d8db6;   /* terciário, legendas */

  --sx-neon:   #4cc9ff;   /* destaque */
  --sx-neon-2: #1ba6f0;   /* ação principal */
  --sx-glow:   rgba(76, 201, 255, .28);
  --sx-glow-forte: rgba(76, 201, 255, .45);

  --somax-canvas: var(--sx-bg-1);
  --somax-surface: var(--sx-bg-2);
  --somax-hover: rgba(76, 201, 255, .09);
  --somax-ring: rgba(76, 201, 255, .40);
  --somax-glow: var(--sx-glow);
  --color-custom-blue: var(--sx-neon-2);

  color-scheme: dark;
}

/* A troca de tema é animada, não instantânea. Só cor: animar layout aqui
   custaria caro numa página cheia de tabela. */
:root[data-tema] body,
:root[data-tema] .bg-white,
:root[data-tema] .bg-gray-50,
:root[data-tema] .bg-gray-100,
:root[data-tema] [class*="border-"],
:root[data-tema] [class*="text-gray"] {
  transition: background-color 320ms var(--somax-ease),
              border-color 320ms var(--somax-ease),
              color 320ms var(--somax-ease);
}

/* ---------- superfícies ---------- */

:root[data-tema="escuro"] body { background-color: var(--sx-bg-1); color: var(--sx-text); }

:root[data-tema="escuro"] .bg-white { background-color: var(--sx-bg-2); }
:root[data-tema="escuro"] .bg-gray-50 { background-color: var(--sx-bg-3); }
:root[data-tema="escuro"] .bg-gray-100 { background-color: var(--sx-bg-1); }
:root[data-tema="escuro"] .bg-gray-200 { background-color: var(--sx-bg-4); }

/* Botão escuro do modo claro (bg-gray-900) é ação principal: no escuro ele
   some no fundo. Vira o azul vibrante — que é o que a identidade pede. */
:root[data-tema="escuro"] .bg-gray-900,
:root[data-tema="escuro"] .bg-gray-800 {
  background-color: var(--sx-neon-2);
  color: #04121f;
}
:root[data-tema="escuro"] .bg-gray-900:hover,
:root[data-tema="escuro"] .bg-gray-800:hover {
  background-color: var(--sx-neon);
  box-shadow: 0 0 18px -2px var(--sx-glow-forte);
}

/* Barra superior: vidro azul, com o brilho por baixo. */
:root[data-tema="escuro"] nav.sticky,
:root[data-tema="escuro"] .bg-white\/90 {
  background-color: rgba(13, 27, 48, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-color: var(--sx-line);
  box-shadow: 0 1px 0 0 rgba(76, 201, 255, .10);
}

/* ---------- texto ---------- */

:root[data-tema="escuro"] .text-gray-900 { color: var(--sx-text); }
:root[data-tema="escuro"] .text-gray-800 { color: var(--sx-text); }
:root[data-tema="escuro"] .text-gray-700 { color: #d5e6fb; }
:root[data-tema="escuro"] .text-gray-600 { color: var(--sx-text-2); }
:root[data-tema="escuro"] .text-gray-500 { color: var(--sx-text-2); }
:root[data-tema="escuro"] .text-gray-400 { color: var(--sx-text-3); }
:root[data-tema="escuro"] .text-gray-300 { color: var(--sx-text-3); }
:root[data-tema="escuro"] .text-black { color: var(--sx-text); }

:root[data-tema="escuro"] ::placeholder { color: var(--sx-text-3); }

/* ---------- bordas e divisórias ---------- */

:root[data-tema="escuro"] .border-gray-100,
:root[data-tema="escuro"] .border-gray-100\/70 { border-color: var(--sx-line); }
:root[data-tema="escuro"] .border-gray-200 { border-color: var(--sx-line-2); }
:root[data-tema="escuro"] .border-gray-300 { border-color: var(--sx-line-2); }
:root[data-tema="escuro"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--sx-line);
}

/* Sombra cinza vira sombra azul: é o que dá a sensação de profundidade
   iluminada em vez de mancha preta. */
:root[data-tema="escuro"] [class*="shadow-gray"],
:root[data-tema="escuro"] .shadow-xl,
:root[data-tema="escuro"] .shadow-2xl,
:root[data-tema="escuro"] .shadow-lg {
  box-shadow: 0 18px 40px -22px rgba(3, 10, 22, .95),
              0 0 0 1px rgba(76, 201, 255, .06);
}

/* ---------- cores de estado ---------- */
/* Fundos pastel do modo claro viram tinta translúcida sobre o azul escuro:
   mantêm o significado da cor sem clarear o cartão inteiro. */

:root[data-tema="escuro"] .bg-amber-50   { background-color: rgba(245, 158, 11, .12); }
:root[data-tema="escuro"] .bg-amber-100  { background-color: rgba(245, 158, 11, .18); }
:root[data-tema="escuro"] .text-amber-600,
:root[data-tema="escuro"] .text-amber-700,
:root[data-tema="escuro"] .text-amber-800,
:root[data-tema="escuro"] .text-amber-900 { color: #fbbf5a; }
:root[data-tema="escuro"] .border-amber-200,
:root[data-tema="escuro"] .border-amber-300,
:root[data-tema="escuro"] .border-amber-400 { border-color: rgba(245, 158, 11, .38); }

:root[data-tema="escuro"] .bg-rose-50,
:root[data-tema="escuro"] .bg-red-50     { background-color: rgba(244, 63, 94, .12); }
:root[data-tema="escuro"] .bg-rose-100,
:root[data-tema="escuro"] .bg-red-100    { background-color: rgba(244, 63, 94, .18); }
:root[data-tema="escuro"] .text-rose-600,
:root[data-tema="escuro"] .text-rose-700,
:root[data-tema="escuro"] .text-rose-800,
:root[data-tema="escuro"] .text-red-600,
:root[data-tema="escuro"] .text-red-700,
:root[data-tema="escuro"] .text-red-800  { color: #ff8095; }
:root[data-tema="escuro"] .border-rose-200,
:root[data-tema="escuro"] .border-red-200 { border-color: rgba(244, 63, 94, .35); }

:root[data-tema="escuro"] .bg-emerald-50,
:root[data-tema="escuro"] .bg-green-50   { background-color: rgba(16, 185, 129, .12); }
:root[data-tema="escuro"] .bg-emerald-100,
:root[data-tema="escuro"] .bg-green-100  { background-color: rgba(16, 185, 129, .18); }
:root[data-tema="escuro"] .text-emerald-600,
:root[data-tema="escuro"] .text-emerald-700,
:root[data-tema="escuro"] .text-emerald-800,
:root[data-tema="escuro"] .text-green-700,
:root[data-tema="escuro"] .text-green-800 { color: #4ade9f; }
:root[data-tema="escuro"] .border-emerald-200,
:root[data-tema="escuro"] .border-green-200 { border-color: rgba(16, 185, 129, .35); }

/* Azuis: aqui é onde o neon entra, porque é a cor da ação. */
:root[data-tema="escuro"] .bg-blue-50,
:root[data-tema="escuro"] .bg-sky-50     { background-color: rgba(76, 201, 255, .12); }
:root[data-tema="escuro"] .bg-blue-100,
:root[data-tema="escuro"] .bg-sky-100    { background-color: rgba(76, 201, 255, .20); }
:root[data-tema="escuro"] .bg-blue-300   { background-color: rgba(76, 201, 255, .28); }
:root[data-tema="escuro"] .text-blue-600,
:root[data-tema="escuro"] .text-blue-700,
:root[data-tema="escuro"] .text-blue-800,
:root[data-tema="escuro"] .text-sky-700,
:root[data-tema="escuro"] .text-custom-blue { color: var(--sx-neon); }
:root[data-tema="escuro"] .border-blue-100,
:root[data-tema="escuro"] .border-sky-200 { border-color: rgba(76, 201, 255, .30); }
:root[data-tema="escuro"] .border-sky-500 { border-color: var(--sx-neon); }

/* ---------- realces com brilho, com parcimônia ---------- */

/* Só o botão primário e a linha da tabela sob o cursor ganham glow. Neon em
   tudo vira ruído e cansa em dez minutos de uso. */
:root[data-tema="escuro"] .bg-custom-blue {
  background-image: linear-gradient(135deg, var(--sx-neon-2) 0%, #0b6ea8 100%);
  box-shadow: 0 0 0 1px rgba(76, 201, 255, .35), 0 6px 20px -8px var(--sx-glow-forte);
  color: #f2fbff;
}
:root[data-tema="escuro"] button.bg-custom-blue:hover:not(:disabled),
:root[data-tema="escuro"] a.bg-custom-blue:hover {
  box-shadow: 0 0 0 1px var(--sx-neon), 0 10px 28px -8px var(--sx-glow-forte);
}

:root[data-tema="escuro"] tbody tr:hover {
  background-color: rgba(76, 201, 255, .07) !important;
  box-shadow: inset 3px 0 0 0 var(--sx-neon);
}

/* Campos: fundo mais fundo que o cartão, para o cursor ter onde pousar. */
:root[data-tema="escuro"] input,
:root[data-tema="escuro"] select,
:root[data-tema="escuro"] textarea {
  background-color: var(--sx-bg-1) !important;
  border-color: var(--sx-line-2) !important;
  color: var(--sx-text);
}
:root[data-tema="escuro"] input:focus,
:root[data-tema="escuro"] select:focus,
:root[data-tema="escuro"] textarea:focus {
  border-color: var(--sx-neon) !important;
  box-shadow: 0 0 0 3px rgba(76, 201, 255, .22);
}

/* Véu do modal: azul profundo, não preto. */
:root[data-tema="escuro"] .bg-black\/40,
:root[data-tema="escuro"] .bg-black\/60 {
  background-color: rgba(3, 9, 20, .74);
  backdrop-filter: blur(3px);
}

/* Esqueleto de carregamento na escala azul do tema. */
:root[data-tema="escuro"] .animate-pulse[class*="bg-gray-"],
:root[data-tema="escuro"] .animate-pulse[class*="bg-slate-"] {
  background-image: linear-gradient(90deg,
    var(--sx-bg-2) 0%, var(--sx-bg-4) 45%, var(--sx-bg-2) 90%);
}

/* A logo é escura sobre fundo claro; no escuro precisa clarear para aparecer. */
:root[data-tema="escuro"] nav img[alt="Somax"],
:root[data-tema="escuro"] nav img[src*="logo"] {
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(76, 201, 255, .35));
}

/* ==========================================================================
   9. O BOTÃO DE TEMA
   ========================================================================== */

.smx-tema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--somax-line, #e5e7eb);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  order: 2;
  transition: border-color var(--somax-fast) var(--somax-ease),
              box-shadow var(--somax-fast) var(--somax-ease),
              background-color 320ms var(--somax-ease),
              color 320ms var(--somax-ease);
}
.smx-tema:hover { border-color: var(--somax-300); box-shadow: 0 4px 14px -6px var(--somax-glow); }
.smx-tema:active { transform: scale(.97); }

/* O trilho é a metáfora do interruptor: a bola anda de um lado para o outro,
   e é isso que diz qual modo está ativo sem precisar ler o rótulo. */
.smx-tema__trilho {
  position: relative;
  display: block;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dbe8ff, #bcd5ff);
  transition: background 320ms var(--somax-ease);
}

.smx-tema__bola {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(16, 36, 59, .28);
  /* Curva com leve exagero no fim: dá o "clique" físico do interruptor. */
  transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1),
              background 320ms var(--somax-ease);
}

.smx-tema__rotulo { min-width: 42px; text-align: left; }

:root[data-tema="escuro"] .smx-tema {
  background: rgba(19, 40, 68, .8);
  border-color: var(--sx-line-2);
  color: var(--sx-text-2);
}
:root[data-tema="escuro"] .smx-tema:hover {
  border-color: var(--sx-neon);
  box-shadow: 0 0 16px -4px var(--sx-glow-forte);
}
:root[data-tema="escuro"] .smx-tema__trilho {
  background: linear-gradient(135deg, #0b2440, #174a72);
  box-shadow: inset 0 0 0 1px rgba(76, 201, 255, .28);
}
:root[data-tema="escuro"] .smx-tema__bola {
  transform: translateX(20px);
  background: var(--sx-neon);
  box-shadow: 0 0 10px var(--sx-glow-forte);
}

/* ==========================================================================
   10. MICROINTERAÇÕES
   --------------------------------------------------------------------------
   Regra que vale para tudo aqui: `transform` só em FOLHA (botão, selo, ícone).
   Ancestral com transform vira bloco de referência de descendente `fixed`, e
   foi assim que o modal já ficou preso atrás do menu uma vez. Container ganha
   sombra e borda, nunca movimento.
   ========================================================================== */

/* Botões secundários também respondem ao toque. */
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: scale(.975);
}
button, [role="button"] {
  transition: transform 120ms var(--somax-ease),
              background-color var(--somax-fast) var(--somax-ease),
              border-color var(--somax-fast) var(--somax-ease),
              box-shadow var(--somax-fast) var(--somax-ease);
}

/* Selo/badge cresce de leve quando a linha é percorrida. */
tbody tr:hover .rounded-full,
tbody tr:hover .rounded-md {
  transform: scale(1.04);
  transition: transform 180ms var(--somax-ease);
}

/* Ícone dentro de botão acompanha o clique. */
button:hover svg { transition: transform 180ms var(--somax-ease); }
button:hover:not(:disabled) svg { transform: scale(1.08); }

/* Números que mudam (KPIs, totais) entram deslizando de baixo. Curto: é
   informação, não espetáculo. */
@keyframes somax-numero {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.tabular-nums,
[class*="text-3xl"],
[class*="text-2xl"] {
  animation: somax-numero 340ms var(--somax-ease) backwards;
}

/* Linhas de tabela entram em cascata curta — dá a sensação de dado chegando.
   Limitado às 12 primeiras: além disso vira espera. */
@keyframes somax-linha {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
tbody tr {
  animation: somax-linha 260ms var(--somax-ease) backwards;
}
tbody tr:nth-child(1) { animation-delay: 0ms; }
tbody tr:nth-child(2) { animation-delay: 24ms; }
tbody tr:nth-child(3) { animation-delay: 48ms; }
tbody tr:nth-child(4) { animation-delay: 72ms; }
tbody tr:nth-child(5) { animation-delay: 96ms; }
tbody tr:nth-child(6) { animation-delay: 120ms; }
tbody tr:nth-child(7) { animation-delay: 144ms; }
tbody tr:nth-child(8) { animation-delay: 168ms; }
tbody tr:nth-child(9) { animation-delay: 192ms; }
tbody tr:nth-child(10) { animation-delay: 216ms; }
tbody tr:nth-child(n+11) { animation-delay: 240ms; }

/* Barras e fatias de gráfico crescem em vez de aparecer prontas. */
svg .recharts-bar-rectangle,
svg .recharts-rectangle {
  animation: somax-numero 420ms var(--somax-ease) backwards;
}

/* Spinner: além de girar, pulsa o brilho — leitura de "trabalhando", não
   de "travado". */
@keyframes somax-pulso-brilho {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 6px var(--somax-ring)); }
}
.animate-spin { animation: spin 1s linear infinite, somax-pulso-brilho 1.6s ease-in-out infinite; }

/* Cartão sob o cursor: eleva pela sombra e acende a borda. Sem mover. */
.rounded-3xl.border:hover,
.rounded-2xl.border:hover {
  box-shadow: 0 14px 34px -14px var(--somax-glow);
}
:root[data-tema="escuro"] .rounded-3xl.border:hover,
:root[data-tema="escuro"] .rounded-2xl.border:hover {
  border-color: rgba(76, 201, 255, .40);
  box-shadow: 0 14px 34px -14px rgba(3, 10, 22, .9),
              0 0 0 1px rgba(76, 201, 255, .22);
}