/* ============================================================
   Recomendados.cl — design tokens
   Cambiar cualquier variable acá afecta todo el sitio.
   ============================================================ */
:root {
  /* === Colores primarios === */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* === Verdes (success / escrow released) === */
  --color-green-50:  #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-900: #14532d;

  /* === Amarillos (pending / warning) === */
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef3c7;
  --color-yellow-500: #ca8a04;
  --color-yellow-700: #92400e;

  /* === Naranjos (urgencia media) === */
  --color-orange-100: #ffedd5;
  --color-orange-600: #ea580c;

  /* === Rojos (urgencia / disputa / error) === */
  --color-red-100: #fee2e2;
  --color-red-500: #dc2626;
  --color-red-600: #b91c1c;
  --color-red-700: #991b1b;

  /* === Violetas (IA / cotizaciones formales) === */
  --color-purple-100: #ede9fe;
  --color-purple-500: #7c3aed;
  --color-purple-700: #6d28d9;

  /* === Teal (chat / cobro garantizado) === */
  --color-teal: #0d9488;

  /* === Grises === */
  --color-gray-50:  #fafbfc;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --color-white:    #ffffff;

  /* === Aliases semánticos (úsalos en los componentes) === */
  --bg-page:        var(--color-gray-100);
  --bg-card:        var(--color-white);
  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-500);
  --text-muted:     var(--color-gray-300);
  --border-default: var(--color-gray-200);
  --link:           var(--color-primary-700);

  /* Estados */
  --state-pending:    var(--color-yellow-500);
  --state-pending-bg: var(--color-yellow-100);
  --state-success:    var(--color-green-600);
  --state-success-bg: var(--color-green-100);
  --state-danger:     var(--color-red-500);
  --state-danger-bg:  var(--color-red-100);
  --state-info:       var(--color-primary-700);
  --state-info-bg:    var(--color-primary-100);

  /* === 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;

  /* === Border radius === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 100px;

  /* === Sombras === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 2px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 18px rgba(0,0,0,.08);
  --shadow-xl: 0 8px 30px rgba(0,0,0,.15);

  /* === Tipografía === */
  --font-stack: 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs:   .72rem;
  --text-sm:   .82rem;
  --text-base: .92rem;
  --text-md:   1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.35rem;
  --text-2xl:  1.6rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-extra:  800;
  --weight-black:  900;

  /* === Aliases legacy (compat con estilos inline existentes) === */
  --gray-50:  var(--color-gray-50);
  --gray-100: var(--color-gray-100);
  --gray-200: var(--color-gray-200);
  --gray-300: var(--color-gray-300);
  --gray-500: var(--color-gray-500);
  --gray-700: var(--color-gray-700);
  --gray-900: var(--color-gray-900);
  --blue-700: var(--color-primary-700);
  --blue-800: var(--color-primary-800);
  --blue-900: var(--color-primary-900);
  --green:    var(--color-green-600);
  --green-bg: var(--color-green-100);
  --red:      var(--color-red-500);
  --red-bg:   var(--color-red-100);
  --orange:   var(--color-orange-600);
  --yellow:   var(--color-yellow-500);
  --yellow-bg:var(--color-yellow-100);
  --teal:     var(--color-teal);
  --purple:   var(--color-purple-500);
  --purple-bg:var(--color-purple-100);
}

/* ============================================================
   Modo oscuro (toggle con html[data-theme="dark"])
   ============================================================ */
html[data-theme="dark"] {
  --bg-page:        #0f172a;
  --bg-card:        #1e293b;
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --border-default: #334155;
  --color-gray-50:  #1e293b;
  --color-gray-100: #1e293b;
  --color-gray-200: #334155;
  --color-gray-500: #94a3b8;
  --color-gray-700: #cbd5e1;
  --color-gray-900: #f1f5f9;
  --gray-50:        #1e293b;
  --gray-100:       #1e293b;
  --gray-200:       #334155;
  --gray-500:       #94a3b8;
  --gray-700:       #cbd5e1;
  --gray-900:       #f1f5f9;
}
html[data-theme="dark"] body { background: #0f172a; color: #f1f5f9; }
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .rc-navbar { background: #0a0f1f; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: #1e293b; color: #f1f5f9; border-color: #334155; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .rc-card { background: #1e293b; box-shadow: 0 2px 12px rgba(0,0,0,.4); }