/* ═══════════════════════════════════════════════════════════════════════════
   ATLAS — Brand tokens (KONTORE ERP)
   Sprint Brand-ATLAS-Apply · 2026-05-30
   Conservador · Institucional · Confiable
   Fuente única de verdad: branding/atlas/DESIGN.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta institucional (navy: estructura) ── */
  --atlas-navy-900: #0E1A3A;   /* Background headers/footers, logo primary */
  --atlas-navy-700: #1E2D6B;   /* Primary brand */
  --atlas-navy-500: #3D4FA3;   /* Accents, hover states */

  /* ── Paleta señalética (bronce: acción) ── */
  --atlas-bronze-600: #B57536; /* Acción crítica: Aprobar, Firmar */
  --atlas-bronze-300: #E6C29A; /* Tints para badges, headers de sección */

  /* ── Paleta neutra (papel + stone) ── */
  --atlas-ivory-50:  #FAF8F2;  /* Surface principal (cálido, no white puro) */
  --atlas-stone-100: #F0EEE8;  /* Surface secundaria */
  --atlas-stone-200: #E5E2DA;  /* Borders, dividers suaves */
  --atlas-stone-300: #D4D2CC;  /* Borders default */
  --atlas-stone-500: #8A8E9C;  /* Texto terciario */
  --atlas-stone-700: #5D6477;  /* Texto secundario */
  --atlas-stone-900: #1A1D2A;  /* Texto primario */

  /* ── Estados semánticos (NO son brand — no se reemplazan) ── */
  --atlas-success: #15803D;
  --atlas-warning: #B45309;
  --atlas-danger:  #B91C1C;
  --atlas-info:    #1E2D6B;     /* mismo navy del brand */

  /* ── Semantic mapping ── */
  --color-bg:               var(--atlas-ivory-50);
  --color-surface:          #FFFFFF;
  --color-surface-2:        var(--atlas-stone-100);
  --color-text:             var(--atlas-stone-900);
  --color-text-secondary:   var(--atlas-stone-700);
  --color-text-tertiary:    var(--atlas-stone-500);
  --color-brand-primary:    var(--atlas-navy-700);
  --color-brand-strong:     var(--atlas-navy-900);
  --color-brand-soft:       var(--atlas-navy-500);
  --color-accent-action:    var(--atlas-bronze-600);
  --color-accent-soft:      var(--atlas-bronze-300);
  --color-border:           var(--atlas-stone-300);
  --color-border-soft:      var(--atlas-stone-200);

  /* ── Tipografía ── */
  --font-display: 'Söhne', 'Inter Display', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Söhne', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Söhne Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Escala tipográfica ── */
  --text-display-2xl: 72px;
  --text-display-xl:  56px;
  --text-display-lg:  44px;
  --text-display-md:  32px;
  --text-display-sm:  24px;
  --text-body-lg:     17px;
  --text-body-md:     15px;
  --text-body-sm:     13px;
  --text-body-xs:     12px;
  --text-label:       11px;

  /* ── Spacing tokens ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius tokens ── */
  --radius-sm: 4px;   /* Inputs, badges */
  --radius-md: 8px;   /* Buttons, cards small */
  --radius-lg: 12px;  /* Cards default */
  --radius-xl: 16px;  /* Modals */

  /* ── Shadows (calibradas para no parecer "playful") ── */
  --shadow-card:   0 1px 2px rgba(14,26,58,0.06), 0 0 0 1px rgba(14,26,58,0.04);
  --shadow-modal:  0 20px 60px rgba(14,26,58,0.18), 0 0 0 1px rgba(14,26,58,0.08);
  --shadow-hover:  0 4px 16px rgba(14,26,58,0.10), 0 0 0 1px rgba(14,26,58,0.06);

  /* ── Motion (ATLAS: lo menos posible) ── */
  --motion-fast:   150ms ease-out;
  --motion-modal:  180ms ease-out;
  --motion-toast:  220ms ease-out;
}

/* ───────────────────────────────────────────────────────────────────────────
   Bridge: variables --kn-* legacy → ATLAS
   Los módulos del Sprint UI-Rediseño 30 May 2026 referencian --kn-accent,
   --kn-border, etc. Las mapeamos a ATLAS para evitar romper la UI existente.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --kn-bg:              var(--color-bg);
  --kn-surface:         var(--color-surface);
  --kn-surface-2:       var(--color-surface-2);
  --kn-border:          var(--color-border);
  --kn-border-2:        var(--color-border-soft);
  --kn-ink:             var(--color-text);
  --kn-ink-2:           var(--color-text-secondary);
  --kn-ink-3:           var(--color-text-tertiary);
  --kn-navy:            var(--color-brand-strong);
  --kn-accent:          var(--color-brand-primary);
  --kn-accent-ink:      #FFFFFF;
  --kn-accent-soft:     #E6EAF5;                          /* navy-tint light */
  --kn-accent-soft-ink: var(--color-brand-primary);
}

/* ───────────────────────────────────────────────────────────────────────────
   Helpers tipográficos
   ─────────────────────────────────────────────────────────────────────────── */
.atlas-mono-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.atlas-display  { font-family: var(--font-display); letter-spacing: -0.02em; }
.atlas-label    { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ───────────────────────────────────────────────────────────────────────────
   Botones señaléticos ATLAS (uso opcional — para "Aprobar", "Firmar", etc.)
   Bronce mate sobre navy = peso institucional sin ser cliché corporate.
   ─────────────────────────────────────────────────────────────────────────── */
.btn-atlas-primary {
  background: var(--color-brand-primary);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  transition: background var(--motion-fast);
}
.btn-atlas-primary:hover { background: var(--color-brand-strong); }

.btn-atlas-action {
  background: var(--color-accent-action);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  transition: background var(--motion-fast);
}
.btn-atlas-action:hover { background: #9A6028; }

/* ───────────────────────────────────────────────────────────────────────────
   Tipografía base (aplicada al body de cada página)
   No fuerza la familia — los HTMLs heredan via font-family: var(--font-body).
   ─────────────────────────────────────────────────────────────────────────── */
.atlas-body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ATLAS palette override sobre Tailwind sky/indigo/blue legacy
   ─────────────────────────────────────────────────────────────────────────
   Los módulos del Sprint UI-Rediseño usan ~300 clases sky-* en el ERP +
   200 en HTMLs. Reescribir cada call site es ruidoso y arriesga regresiones.
   Lo limpio es reasignar la clase Tailwind → token ATLAS. !important porque
   Tailwind Play CDN inyecta los utilities después de este stylesheet.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Backgrounds ── */
.bg-sky-50      { background-color: #E6EAF5 !important; }    /* navy tint muy claro */
.bg-sky-100     { background-color: #DCE2F0 !important; }
.bg-sky-200     { background-color: #C5CEE5 !important; }
.bg-sky-700     { background-color: var(--atlas-navy-700) !important; }
.bg-sky-800     { background-color: var(--atlas-navy-900) !important; }
.bg-sky-900     { background-color: var(--atlas-navy-900) !important; }
.bg-indigo-600  { background-color: var(--atlas-navy-700) !important; }
.bg-indigo-700  { background-color: var(--atlas-navy-700) !important; }
.bg-indigo-800  { background-color: var(--atlas-navy-900) !important; }
.bg-blue-600    { background-color: var(--atlas-navy-700) !important; }
.bg-blue-700    { background-color: var(--atlas-navy-700) !important; }
.bg-blue-800    { background-color: var(--atlas-navy-900) !important; }

/* ── Hover backgrounds ── */
.hover\:bg-sky-50:hover    { background-color: #E6EAF5 !important; }
.hover\:bg-sky-100:hover   { background-color: #DCE2F0 !important; }
.hover\:bg-sky-200:hover   { background-color: #C5CEE5 !important; }
.hover\:bg-sky-700:hover   { background-color: var(--atlas-navy-700) !important; }
.hover\:bg-sky-800:hover   { background-color: var(--atlas-navy-900) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--atlas-navy-700) !important; }
.hover\:bg-blue-700:hover  { background-color: var(--atlas-navy-700) !important; }

/* ── Text colors ── */
.text-sky-500   { color: var(--atlas-navy-500) !important; }
.text-sky-600   { color: var(--atlas-navy-700) !important; }
.text-sky-700   { color: var(--atlas-navy-700) !important; }
.text-sky-800   { color: var(--atlas-navy-900) !important; }
.text-sky-900   { color: var(--atlas-navy-900) !important; }
.text-indigo-600 { color: var(--atlas-navy-700) !important; }
.text-indigo-700 { color: var(--atlas-navy-700) !important; }
.text-blue-400  { color: var(--atlas-navy-500) !important; }
.text-blue-500  { color: var(--atlas-navy-700) !important; }
.text-blue-600  { color: var(--atlas-navy-700) !important; }
.text-blue-700  { color: var(--atlas-navy-700) !important; }
.text-blue-800  { color: var(--atlas-navy-900) !important; }

.hover\:text-sky-700:hover { color: var(--atlas-navy-700) !important; }
.hover\:text-sky-800:hover { color: var(--atlas-navy-900) !important; }
.hover\:text-sky-900:hover { color: var(--atlas-navy-900) !important; }
.hover\:text-blue-600:hover { color: var(--atlas-navy-700) !important; }

/* ── Borders ── */
.border-sky-200 { border-color: #C5CEE5 !important; }
.border-sky-300 { border-color: #A8B5DA !important; }
.border-sky-700 { border-color: var(--atlas-navy-700) !important; }
.border-indigo-500 { border-color: var(--atlas-navy-500) !important; }
.border-blue-400 { border-color: var(--atlas-navy-500) !important; }
.border-blue-500 { border-color: var(--atlas-navy-700) !important; }
.border-blue-600 { border-color: var(--atlas-navy-700) !important; }

/* ── File inputs ── */
.file\:bg-sky-100::file-selector-button { background-color: #DCE2F0 !important; }
.file\:text-sky-800::file-selector-button { color: var(--atlas-navy-900) !important; }
.hover\:file\:bg-sky-200:hover::file-selector-button { background-color: #C5CEE5 !important; }

/* ── Focus rings sky → navy ── */
.focus\:ring-sky-500:focus { --tw-ring-color: var(--atlas-navy-500) !important; }
.focus\:ring-sky-600:focus { --tw-ring-color: var(--atlas-navy-700) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--atlas-navy-500) !important; }
.focus\:border-blue-500:focus { border-color: var(--atlas-navy-500) !important; }
.focus\:border-sky-500:focus { border-color: var(--atlas-navy-500) !important; }
.focus\:border-sky-700:focus { border-color: var(--atlas-navy-700) !important; }

/* ── Slate dark headers → atlas-navy (más warmth + identidad) ── */
.bg-slate-800   { background-color: var(--atlas-navy-900) !important; }
.bg-slate-900   { background-color: #0A1024 !important; }   /* slightly darker than navy-900 */

/* ── Tab active legacy override (línea 96 index.html: tab-active border azul) ── */
.tab-active {
  border-bottom: 2px solid var(--atlas-navy-700) !important;
  color: var(--atlas-navy-700) !important;
}

/* ── Bronce señalético para acciones críticas (opt-in) ── */
.atlas-action-bronze { background-color: var(--atlas-bronze-600) !important; color: #FFF !important; }
.atlas-action-bronze:hover { background-color: #9A6028 !important; }