/* ============================================================
   SAE-CL Design Tokens — PropTech Edition
   Dark mode por defecto. Light mode via [data-bs-theme="light"].
   ============================================================ */

/* ── FUENTES ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── DARK MODE (default) ──────────────────────────────────── */
:root,
[data-bs-theme="dark"] {
  /* Superficies */
  --surface-base:       #0B0F19;
  --surface-elevated-1: #151B2B;
  --surface-elevated-2: #1E293B;
  --surface-elevated-3: #27354F;
  --surface-glass:      rgba(21, 27, 43, 0.72);

  /* Textos */
  --text-primary:   #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary:  #64748B;
  --text-disabled:  #475569;

  /* Acentos */
  --accent-primary:       #2563EB;
  --accent-primary-hover: #1D4ED8;
  --accent-primary-glow:  rgba(37, 99, 235, 0.25);
  --accent-success:       #059669;
  --accent-success-glow:  rgba(5, 150, 105, 0.20);
  --accent-warning:       #D97706;
  --accent-danger:        #DC2626;
  --accent-pending:       #7C3AED;

  /* Bordes */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-focus:  rgba(37, 99, 235, 0.55);

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 0 0 1px var(--border-subtle);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.65), 0 0 0 1px var(--border-subtle);
  --shadow-glow-primary: 0 0 20px var(--accent-primary-glow);

  /* Tipografía */
  --font-sans: 'Inter', 'Söhne', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Escala tipográfica */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Espaciado */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Transiciones */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout — sidebar, topbar ────────────────────────────── */
  --sidebar-bg-start: #0f1623;
  --sidebar-bg-end:   #151b2b;
  --topbar-bg:        var(--surface-elevated-1);
  --topbar-border:    var(--border-subtle);

  /* ── Auth — login y pantallas de acceso ───────────────────── */
  --auth-bg-gradient:  linear-gradient(135deg, #0d1b3e 0%, #1a1040 50%, #0f1a3a 100%);
  --auth-card-bg:      rgba(21, 27, 43, 0.80);
  --auth-card-border:  rgba(255,255,255,0.10);
  --auth-card-shadow:  0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
  --auth-label-size:   0.78rem;
  --auth-label-track:  0.06em;

  /* ── Bootstrap — mapeo de tokens SAE-CL a variables Bootstrap ─
     Permite que cards, inputs, modales, dropdowns, badges y botones
     respondan a cambios en --radius-*, --font-sans y --font-mono
     sin tocar ninguna vista.
     ──────────────────────────────────────────────────────────── */

  /* Tipografía */
  --bs-body-font-family:  var(--font-sans);
  --bs-font-monospace:    var(--font-mono);

  /* Radios de borde — un cambio en --radius-md redondea todo el sistema */
  --bs-border-radius:     var(--radius-md);
  --bs-border-radius-sm:  var(--radius-sm);
  --bs-border-radius-lg:  var(--radius-lg);
  --bs-border-radius-xl:  var(--radius-xl);
  --bs-border-radius-xxl: var(--radius-xl);

  /* Colores de superficie */
  --bs-body-bg:           var(--surface-base);
  --bs-body-color:        var(--text-primary);
  --bs-border-color:      var(--border-subtle);
  --bs-card-bg:           var(--surface-elevated-1);
  --bs-card-border-color: var(--border-subtle);
}

/* ── LIGHT MODE ───────────────────────────────────────────── */
[data-bs-theme="light"] {
  --surface-base:       #F1F5F9;
  --surface-elevated-1: #FFFFFF;
  --surface-elevated-2: #F8FAFC;
  --surface-elevated-3: #EEF2F7;
  --surface-glass:      rgba(255, 255, 255, 0.80);

  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-tertiary:  #64748B;

  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-focus:  rgba(37, 99, 235, 0.45);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.09), 0 0 0 1px var(--border-subtle);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.13), 0 0 0 1px var(--border-subtle);
  --shadow-glow-primary: 0 0 20px rgba(37, 99, 235, 0.12);

  /* Bootstrap info — teal profundo en lugar del neon #0dcaf0 */
  --bs-info:     #0891b2;
  --bs-info-rgb: 8,145,178;

  /* Bootstrap danger — rojo ligeramente más oscuro y menos agresivo */
  --bs-danger:     #b91c1c;
  --bs-danger-rgb: 185,28,28;

  /* Body text ligeramente más rico en light mode */
  --bs-body-color: #1e293b;

  /* ── Layout light mode — sidebar usa azul de marca ─────── */
  --sidebar-bg-start: #1e3a8a;
  --sidebar-bg-end:   #1d4ed8;
  --topbar-bg:        var(--surface-elevated-1);
  --topbar-border:    var(--border-subtle);

  /* ── Auth light mode ──────────────────────────────────── */
  --auth-bg-gradient:  linear-gradient(135deg, #1e3a8a 0%, #4338ca 50%, #1e40af 100%);
  --auth-card-bg:      rgba(255,255,255,0.88);
  --auth-card-border:  rgba(255,255,255,0.6);
  --auth-card-shadow:  0 24px 64px rgba(0,0,0,0.20);
  --auth-label-size:   0.78rem;
  --auth-label-track:  0.06em;

  --bs-body-bg:           var(--surface-base);
  --bs-body-color:        var(--text-primary);
  --bs-border-color:      var(--border-subtle);
  --bs-card-bg:           var(--surface-elevated-1);
  --bs-card-border-color: var(--border-subtle);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--surface-base);
  color: var(--text-primary);
  transition: background-color var(--transition-slow), color var(--transition-slow);
}