/* =========================================================
   RENTEE · DESIGN TOKENS
   Estilo Apple + Qonto sobre fondo gris frío azulado #eef2f7.
   Indigo = marca operativa. Mint = celebración financiera reservada.
   ========================================================= */

:root {

  /* ---------- FONDOS / SUPERFICIES ---------- */
  --bg:           #F3F6FA;          /* fondo app — gris frío azulado, 10% más claro */
  --surface:      #FFFFFF;          /* tarjetas y paneles */
  --surface-2:    #F7F9FC;          /* superficie secundaria, cabeceras de tabla, chips ghost */
  --surface-3:    #E9EEF5;          /* hover de fila (un punto más oscuro que el fondo) */
  /* Alias cálidos que usan las pantallas v2 (CLAUDE.md). Se definen aquí para
     que existan en ambos temas: en claro mantienen el aspecto aprobado. */
  --surface-0:    #FFFFFF;
  --surface-50:   #F7F7F7;
  --surface-100:  #F5F1EA;
  --surface-200:  #EFEAE0;
  --sidebar-bg:   var(--bg);        /* sidebar = mismo fondo que la app */
  --topbar-bg:    rgba(243,246,250,0.72); /* topbar = fondo app translúcido */
  --topbar-bg-scrolled: rgba(238,242,247,0.88); /* topbar al hacer scroll */
  --topbar-shadow-scrolled: 0 1px 0 rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.18);

  /* ---------- HAIRLINES (bordes Apple) ---------- */
  --border:        rgba(15, 23, 42, 0.06);
  --border-strong: rgba(15, 23, 42, 0.10);
  --divider:       rgba(15, 23, 42, 0.05);

  /* ---------- TEXTO (slate frío, coherente con el fondo) ---------- */
  --ink-950: #0F172A;   /* texto principal */
  --ink-900: #1E293B;
  --ink-800: #243043;
  --ink-700: #334155;
  --ink-600: #475569;   /* texto secundario */
  --ink-500: #64748B;   /* texto auxiliar / labels */
  --ink-400: #94A3B8;   /* placeholders, iconos suaves */
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;

  /* ---------- MARCA INDIGO (operativa) ---------- */
  --brand-50:  #F4F6FF;
  --brand-100: #E8EBFF;
  --brand-200: #C9CFF8;
  --brand-300: #A2A9F1;
  --brand-400: #767EE8;
  --brand-500: #4C5BE0;
  --brand-600: #3340C7;
  --brand-700: #1E27AD;
  --brand-800: #182084;
  --brand-900: #11185F;

  /* ---------- MINT (reservado, KPI positivos y conciliación OK) ---------- */
  --mint-50:  #EDFDF6;
  --mint-100: #D1FAE8;
  --mint-200: #A7F3CE;
  --mint-300: #6FE7AF;
  --mint-400: #34D891;
  --mint-500: #10C57A;
  --mint-600: #06C97F;
  --mint-700: #058A5E;
  --mint-800: #066C4C;
  --mint-900: #05553E;

  /* ---------- SEMÁNTICOS ---------- */
  --success-50:  #EDFDF6;
  --success-100: #D1FAE8;
  --success-600: #06C97F;
  --success-700: #058A5E;

  --warning-50:  #FFFBEB;
  --warning-100: #FDE68A;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --danger-50:   #FEF2F2;
  --danger-100:  #FECACA;
  --danger-600:  #DC2626;
  --danger-700:  #B91C1C;

  --info-50:     #EFF6FF;
  --info-100:    #DBEAFE;
  --info-600:    #2563EB;
  --info-700:    #1D4ED8;

  /* ---------- CANALES (colores corporativos oficiales) ---------- */
  --ch-airbnb:       #FF385C;   /* Rausch (rebrand 2014+) */
  --ch-airbnb-text:  #FFFFFF;
  --ch-booking:      #003580;   /* Booking blue */
  --ch-booking-text: #FFFFFF;
  --ch-vrbo:         #245ABC;   /* VRBO blue */
  --ch-vrbo-text:    #FFFFFF;
  --ch-direct:       #06C97F;   /* mint Rentee para reservas directas/web */
  --ch-direct-text:  #FFFFFF;
  --ch-expedia:      #FFC72C;   /* Expedia yellow */
  --ch-expedia-text: #0F172A;   /* texto oscuro sobre amarillo */

  /* ---------- TIPOGRAFÍA ---------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Inconsolata', monospace;

  /* ---------- RADIOS (mucho más redondos · iOS/Notion-like) ---------- */
  --r-xs:   11px;
  --r-sm:   14px;
  --r-md:   18px;   /* botones, inputs */
  --r-lg:   24px;   /* cards, tablas */
  --r-xl:   32px;   /* drawers, modales */
  --r-2xl:  40px;
  --r-pill: 9999px;

  /* ---------- SOMBRAS (Apple-style: casi inexistentes) ---------- */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow:    0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 12px 28px -8px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 16px 36px -12px rgba(15, 23, 42, 0.18);
  --shadow-pop:0 24px 48px -16px rgba(15, 23, 42, 0.22);
  --shadow-mint: 0 0 0 4px rgba(7, 169, 126, 0.10);

  /* ---------- FOCUS RING ---------- */
  --ring-brand:  0 0 0 4px rgba(76, 91, 224, 0.18);
  --ring-mint:   0 0 0 4px rgba(7, 169, 126, 0.18);
  --ring-danger: 0 0 0 4px rgba(220, 38, 38, 0.18);

  /* ---------- ESPACIO ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-10: 56px;
  --space-12: 72px;

  /* Layout */
  --sidebar-w:           252px;
  --sidebar-w-collapsed:  72px;
  --topbar-h:             70px;
  --content-max:        1320px;

  /* ---------- MOTION ---------- */
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);     /* Apple ease */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:  120ms;
  --d-base:  200ms;
  --d-slow:  320ms;

  /* ---------- Z-INDEX ---------- */
  --z-sidebar:  40;
  --z-topbar:   50;
  --z-overlay:  90;
  --z-modal:   100;
  --z-toast:   110;

  /* Hint nativo del navegador → form controls + scrollbar coherentes */
  color-scheme: light;
}


/* =========================================================
   DARK THEME
   Soft slate (no negro puro). Activado con [data-theme="dark"]
   en <html>. Mantiene la misma jerarquía visual y los mismos
   nombres de tokens — sólo cambian los valores.
   ========================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  /* ---------- FONDOS / SUPERFICIES ---------- */
  --bg:           #0B1120;          /* fondo app — slate muy oscuro */
  --surface:      #131B2E;          /* tarjetas y paneles, un step más claro */
  --surface-2:    #1A2440;          /* superficie secundaria, headers de tabla */
  --surface-3:    #243056;          /* hover de fila */
  /* Alias cálidos → en dark se mapean a las superficies oscuras */
  --surface-0:    var(--surface);
  --surface-50:   var(--surface-2);
  --surface-100:  var(--surface-3);
  --surface-200:  var(--surface-3);
  --sidebar-bg:   var(--bg);
  --topbar-bg:    rgba(11, 17, 32, 0.72);
  --topbar-bg-scrolled: rgba(11, 17, 32, 0.92);
  --topbar-shadow-scrolled: 0 8px 24px -12px rgba(255, 255, 255, 0.10);

  /* ---------- HAIRLINES — blancos con baja opacidad ---------- */
  --border:        rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --divider:       rgba(255, 255, 255, 0.05);

  /* ---------- TEXTO — invertido ----------
     ink-950 era texto principal oscuro → ahora es texto claro.
     ink-100 era superficie sutil clara → ahora es superficie sutil oscura. */
  --ink-950: #F8FAFC;
  --ink-900: #E2E8F0;
  --ink-800: #CBD5E1;
  --ink-700: #B4C0D2;
  --ink-600: #94A3B8;
  --ink-500: #7E8DA3;
  --ink-400: #64748B;
  --ink-300: #475569;
  --ink-200: #334155;
  --ink-100: #1E293B;

  /* ---------- BRAND INDIGO — más brillante para destacar en dark ---------- */
  --brand-50:  #1A2244;
  --brand-100: #1E2A52;
  --brand-200: #2A3A75;
  --brand-300: #4759AF;
  --brand-400: #6E78D8;
  --brand-500: #7C8AFF;
  --brand-600: #98A2FF;
  --brand-700: #B5BBFF;
  --brand-800: #D5D8FF;
  --brand-900: #ECEEFF;

  /* ---------- MINT ---------- */
  --mint-50:  #052614;
  --mint-100: #073E22;
  --mint-200: #0E5D38;
  --mint-300: #0F8055;
  --mint-400: #34D08F;
  --mint-500: #4DDDA3;
  --mint-600: #6FE0AE;
  --mint-700: #95EFC2;
  --mint-800: #B5F5D5;
  --mint-900: #D1FAE5;

  /* ---------- SEMÁNTICOS ---------- */
  --success-50:  #052614;
  --success-100: #073E22;
  --success-600: #4DDDA3;
  --success-700: #95EFC2;

  --warning-50:  #2C1B05;
  --warning-100: #4A2C0B;
  --warning-600: #FBBF24;
  --warning-700: #FCD34D;

  --danger-50:   #2D0F0F;
  --danger-100:  #4F1818;
  --danger-600:  #F87171;
  --danger-700:  #FCA5A5;

  --info-50:     #0C1E3D;
  --info-100:    #142B5F;
  --info-600:    #60A5FA;
  --info-700:    #93C5FD;

  /* ---------- SOMBRAS — más opacas en dark ---------- */
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 28px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 36px -12px rgba(0, 0, 0, 0.7);
  --shadow-pop:0 24px 48px -16px rgba(0, 0, 0, 0.8);
  --shadow-mint: 0 0 0 4px rgba(77, 221, 163, 0.18);

  /* ---------- FOCUS RING — más opacos para dark ---------- */
  --ring-brand:  0 0 0 4px rgba(124, 138, 255, 0.35);
  --ring-mint:   0 0 0 4px rgba(77, 221, 163, 0.35);
  --ring-danger: 0 0 0 4px rgba(248, 113, 113, 0.35);
}

/* Selection en dark */
[data-theme="dark"] ::selection { background: var(--brand-200); color: var(--brand-900); }

/* =========================================================
   GLOBAL RESET / TYPOGRAFÍA
   ========================================================= */

html, body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
}

body { margin: 0; }

* { box-sizing: border-box; }

a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); }

/* Números tabulares por defecto donde importa comparar */
.tabnum, td, th, .num, .amount, .kpi-value, .r-stat-value {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; border: 2px solid transparent; }

/* Focus accesible */
*:focus-visible {
  outline: none;
  box-shadow: var(--ring-brand);
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-100); color: var(--brand-900); }