/* LucaFlow Frontend Bridge
   Unifica clases Tailwind personalizadas con las mismas CSS vars usadas en el admin.
   Fecha: 2025-10-02
*/
:root {
  /* Garantizar que si el admin theme no está cargado, tenemos fallback */
  --primary: #FF8000;
  --deep-blue: #0A1929;
  --light-gray: #F2F2F2;
  --accent-cyan: #2DE2E6;
  --error-red: #FF3B30;
  --success-green: #22c55e;
  --warning-yellow: #f59e0b;

  --bg-primary: var(--deep-blue);
  --bg-secondary: #102A43;
  --bg-tertiary: #1E3A52;
  --text-primary: #FFFFFF;
  --text-secondary: #A0AEC0;
  --border-color: #2D3748;
}

/* Modo claro (si se aplica .light en html externamente) */
html.light, :root.light {
  --bg-primary: var(--light-gray);
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f5f7;
  --text-primary: var(--deep-blue);
  --text-secondary: #4b5563;
  --border-color: #d1d5db;
}

/* Bridge de clases usadas en monthly_analysis */
.bg-background-dark { background: var(--bg-primary) !important; }
.bg-surface-dark { background: var(--bg-secondary) !important; }
.bg-surface-elevated { background: var(--bg-tertiary) !important; }
.text-text-dark-primary { color: var(--text-primary) !important; }
.text-text-dark-secondary { color: var(--text-secondary) !important; }
.border-border-dark { border-color: var(--border-color) !important; }
.text-danger { color: var(--error-red) !important; }
.text-success { color: var(--success-green) !important; }

/* Interactive states */
.hover\:border-primary:hover { border-color: var(--primary) !important; }
.hover\:text-primary:hover { color: var(--primary) !important; }
.hover\:bg-primary\/10:hover { background: color-mix(in srgb, var(--primary) 12%, transparent) !important; }

/* Scrollbar refinado usando las mismas variables */
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Botones */
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #e67300; }

/* Utilidades */
.text-accent { color: var(--accent-cyan) !important; }
