/* ============================================
   VARIABLES & RESET
   Diseño SaaS — Sistema de tokens
   ============================================ */

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

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ---- COLORES BASE ---- */
  --white: #ffffff;
  --black: #0a0a0a;

  /* Grises (neutros fríos — base del UI) */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Azul primario */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  /* Teal */
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;

  /* Coral */
  --coral-50: #fff5f3;
  --coral-100: #ffe4de;
  --coral-500: #f97060;
  --coral-600: #ef4d39;
  --coral-700: #d93826;

  /* Semánticos — teal */
  --color-teal-bg: var(--teal-50);
  --color-teal-text: var(--teal-600);

  /* Semánticos — coral */
  --color-coral-bg: var(--coral-50);
  --color-coral-text: var(--coral-600);

  /* Code blocks (visor JSON) */
  --color-code-bg: var(--gray-900);
  --color-code-text: var(--gray-50);

  /* Semánticos */
  --color-success-bg: #f0fdf4;
  --color-success-text: #16a34a;
  --color-success-hover: #15803d;
  --color-warning-bg: #fffbeb;
  --color-warning-text: #d97706;
  --color-warning-hover: #b45309;
  --color-danger-bg: #fef2f2;
  --color-danger-text: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-info-bg: var(--blue-50);
  --color-info-text: var(--blue-600);

  /* ---- TOKENS DE DISEÑO ---- */
  /*
   * Los colores primarios se definen aqui como fallback.
   * theme-init.js los sobreescribe en runtime con los valores
   * de Firebase (branding_template: primary_color, secondary_color, accent_color).
   *
   * theme-init.js genera por cada color:
   *   --color-{name}, --color-{name}-rgb, --color-{name}-hover,
   *   --color-{name}-active, --color-{name}-dark, --color-{name}-light,
   *   --color-{name}-bg, --color-{name}-soft
   */

  /* Colores primarios (fallbacks — Firebase/theme-init los sobreescribe) */
  --color-primary: var(--blue-600);
  --color-primary-rgb: 37, 99, 235;
  --color-primary-hover: var(--blue-700);
  --color-primary-light: var(--blue-100);
  --color-primary-subtle: var(--blue-50);
  --color-primary-bg: rgba(var(--color-primary-rgb, 37, 99, 235), 0.1);
  --color-primary-soft: #eef2ff;

  /* Colores secundarios (fallbacks — Firebase los sobreescribe) */
  --color-secondary: var(--teal-600);
  --color-secondary-hover: var(--teal-700);
  --color-secondary-light: var(--teal-100);
  --color-secondary-subtle: var(--teal-50);
  --color-secondary-bg: rgba(13, 148, 136, 0.1);

  /* Color acento (fallback — Firebase lo sobreescribe) */
  --color-accent: var(--coral-600);
  --color-accent-hover: var(--coral-700);
  --color-accent-light: var(--coral-100);
  --color-accent-subtle: var(--coral-50);
  --color-accent-bg: rgba(239, 77, 57, 0.1);

  /* ── SUPERFICIES (fallbacks — theme-init.js los sobreescribe) ── */
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: #ffffff;

  /* ── TEXTO ── */
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-text-disabled: var(--gray-300);
  --color-text-link: var(--color-primary);

  /* ── BORDES ── */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-focus: var(--color-primary);

  /* ── SIDEBAR (theme-init.js sobreescribe hover/activo con primary) ── */
  --color-sidebar-bg: #f4f6f9;
  --color-sidebar-text: #475569;
  --color-sidebar-text-hover: var(--color-primary);
  --color-sidebar-icon: #94a3b8;
  --color-sidebar-icon-hover: var(--color-primary);
  --color-sidebar-active-bg: var(--color-primary-subtle);
  --color-sidebar-active-text: var(--color-primary);
  --color-sidebar-active-icon: var(--color-primary);
  --color-sidebar-hover-bg: rgba(0, 0, 0, 0.03);
  --color-sidebar-divider: #e8eaed;

  /* ── TOPBAR ── */
  --color-topbar-bg: #f4f6f9;

  /* Popup */
  --color-popup-bg: var(--white);
  --color-popup-border: var(--gray-200);
  --color-popup-item-text: var(--gray-700);
  --color-popup-item-hover: var(--gray-50);
  --color-popup-header-text: var(--gray-900);

  /* ---- TIPOGRAFÍA ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;
  --font-size-4xl: 34px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;
  --font-size-7xl: 56px;
  --font-size-8xl: 64px;
  --font-size-9xl: 72px;
  --font-size-10xl: 80px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-loose: 1.75;

  /* ---- ESPACIADO (base 4px) ---- */
  --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;

  /* ---- DIMENSIONES ---- */
  --sidebar-width-collapsed: 52px;
  --sidebar-width-expanded: 224px;
  --topbar-height: 48px;

  /* ---- RADIO DE BORDE ---- */
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ---- SOMBRAS ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);

  /* ---- TRANSICIONES ---- */
  --transition-fast: 100ms ease;
  --transition-base: 180ms ease;
  --transition-slow: 280ms ease;

  /* ---- ESTADOS DE INTERACCIÓN ---- */
  --hover-opacity: 0.9;
  --focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.12);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.1);
  --disabled-opacity: 0.45;

  /* ---- Z-INDEX ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1050;
  --z-tooltip: 1100;

  /* ---- BREAKPOINTS ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---- CONTENEDOR ---- */
  --container-max-width: 1440px;
}

/* ============================================
   DARK MODE
   Activado por clase .dark en <html>
   Solo sobreescribe tokens semanticos.
   NO invierte --gray-* para no romper badges/botones.
   ============================================ */
:root.dark {
  /* Superficies — más contraste entre bg y surface */
  --color-bg: #0b1120;
  --color-surface: #1a2744;
  --color-surface-raised: #1e2d4d;
  --color-surface-overlay: #1e2d4d;

  /* Texto */
  --color-text-primary: #e8ecf1;
  --color-text-secondary: #8896a8;
  --color-text-muted: #5a6a7e;
  --color-text-disabled: #3d4f65;

  /* Bordes — visibles para separar cards del fondo */
  --color-border: #2a3d5a;
  --color-border-strong: #3a5275;

  /* Sombra más notoria en cards */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);

  /* Colores semanticos — fondo mas visible, texto mas brillante */
  --color-success-bg: rgba(22, 163, 74, 0.25);
  --color-success-text: #4ade80;
  --color-warning-bg: rgba(217, 119, 6, 0.25);
  --color-warning-text: #fbbf24;
  --color-danger-bg: rgba(220, 38, 38, 0.25);
  --color-danger-text: #f87171;
  --color-info-bg: rgba(59, 130, 246, 0.25);
  --color-info-text: #60a5fa;

  /* Sombras mas pronunciadas */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3);
  --shadow-popup: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);

  /* Sidebar */
  --color-sidebar-bg: #0c1222;
  --color-sidebar-text: #8896a8;
  --color-sidebar-icon: #5a6a7e;
  --color-sidebar-divider: #253348;
  --color-sidebar-section-label: #5a6a7e;
  --color-sidebar-hover-bg: rgba(255, 255, 255, 0.04);

  /* Topbar */
  --color-topbar-bg: #0c1222;

  /* Tabs (legibilidad the activo) */
  --tab-active-color: var(--color-primary-light);

  /* Popup / Dropdowns */
  --color-popup-bg: #162032;
  --color-popup-border: #253348;
  --color-popup-item-text: #e8ecf1;
  --color-popup-item-hover: #1a2640;
  --color-popup-header-text: #f1f5f9;

  /* Grises base para dark (componentes que usan --gray-* directos) */
  --gray-50: #1a2640;
  --gray-100: #253348;
  --gray-200: #344966;
  --gray-300: #4a6180;
  --gray-400: #607898;
  --gray-500: #7a90a8;
  --gray-600: #9dafc4;

  /* Colores semanticos teal / coral en dark */
  --color-teal-bg: rgba(20, 184, 166, 0.18);
  --color-teal-text: #5eead4;
  --color-coral-bg: rgba(249, 112, 96, 0.18);
  --color-coral-text: #fc9a8e;

  /* Code blocks en dark: fondo oscuro legible */
  --color-code-bg: #0d1117;
  --color-code-text: #e6edf3;
}


/* ---- BASE HTML VISTAS ---- */
html,
body {
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--line-height-base);
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Focus ring accesible */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}