/* ═══════════════════════════════════════════════════════════════════
   sm-ui.css — Design tokens + utilitários Solution Makers (semente)
   Uso: <link rel="stylesheet" href="/components/sm-ui.css">
   A página pode sobrescrever o tema redefinindo as variáveis --sm-*
   (ex.: MolGest define --sm-primary roxo; ERP mantém navy/gold).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Cores de marca */
  --sm-navy: #1E2761;
  --sm-navy-d: #0b1226;
  --sm-gold: #F59E0B;
  --sm-primary: var(--sm-navy);
  --sm-primary-d: var(--sm-navy-d);

  /* Semânticas */
  --sm-success: #16a34a;
  --sm-success-d: #15803d;
  --sm-warning: #d97706;
  --sm-danger: #dc2626;
  --sm-danger-d: #b91c1c;
  --sm-info: #2563eb;

  /* Neutros (escala slate) */
  --sm-bg: #f8fafc;
  --sm-surface: #ffffff;
  --sm-s1: #f1f5f9;
  --sm-s2: #e2e8f0;
  --sm-border: #cbd5e1;
  --sm-t1: #0f172a;
  --sm-t2: #475569;
  --sm-t3: #94a3b8;

  /* Tipografia */
  --sm-font: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --sm-fs-xs: 11px; --sm-fs-sm: 12px; --sm-fs-md: 13px; --sm-fs-base: 14px; --sm-fs-lg: 16px;

  /* Espaçamento / raio / sombra */
  --sm-sp-1: 4px; --sm-sp-2: 8px; --sm-sp-3: 12px; --sm-sp-4: 16px; --sm-sp-5: 20px; --sm-sp-6: 24px;
  --sm-radius: 8px; --sm-radius-lg: 12px;
  --sm-shadow: 0 1px 3px rgba(15,23,42,.08);
  --sm-shadow-lg: 0 20px 50px rgba(0,0,0,.30);

  /* Camadas */
  --sm-z-nav: 40; --sm-z-modal: 50; --sm-z-toast: 99;
}

/* ── Acessibilidade base ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.sm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Toast (usado por sm-ui.js → smToast) ────────────────────────── */
.sm-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  max-width: 520px; width: calc(100% - 40px);
  z-index: var(--sm-z-toast);
  padding: 12px 18px; border-radius: var(--sm-radius-lg);
  color: #fff; font-family: var(--sm-font); font-size: var(--sm-fs-md);
  line-height: 1.5; white-space: pre-line;
  box-shadow: var(--sm-shadow-lg);
  border-left: 4px solid transparent;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.sm-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.sm-toast--info    { background: var(--sm-navy);    border-left-color: var(--sm-gold); }
.sm-toast--sucesso { background: #065f46;           border-left-color: #10b981; }
.sm-toast--erro    { background: #7f1d1d;           border-left-color: #ef4444; }
.sm-toast--aviso   { background: #78350f;           border-left-color: var(--sm-gold); }

/* ── Tabela responsiva ───────────────────────────────────────────── */
.sm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sm-table-scroll table { min-width: 640px; }

/* ── Botão ocupado (sm-ui.js → SmUI.busy) ────────────────────────── */
.sm-busy { position: relative; pointer-events: none; opacity: .65; }
.sm-busy::after {
  content: ''; display: inline-block; vertical-align: -2px; margin-left: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: sm-spin .7s linear infinite;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* ── Estado vazio padrão ─────────────────────────────────────────── */
.sm-empty {
  text-align: center; color: var(--sm-t3); font-size: var(--sm-fs-md);
  padding: var(--sm-sp-6);
}
.sm-empty b { display: block; color: var(--sm-t2); margin-bottom: var(--sm-sp-1); }