/* Css/themes.css - Degradados Animados Ferrari Edition */

/* ===== ANIMACIÓN DE FONDO (Global) ===== */
@keyframes panBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== TEMA CLARO (Animado: Blanco → Celeste → Azul Profundo) ===== */
:root, html.theme-light {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-inverse: #ffffff;
  
  --brand-primary: #0F2A4A;
  --brand-secondary: #1e293b;
  --brand-accent: #3B82F6;
  --brand-accent-hover: #2563EB;
  
  --alert-roja: #dc3545;
  --alert-roja-light: #fee2e2;
  --alert-roja-text: #b91c1c;
  --alert-amarilla: #ffc107;
  --alert-amarilla-light: #fef3c7;
  --alert-amarilla-text: #b45309;
  --alert-verde: #28a745;
  --alert-verde-light: #dcfce7;
  --alert-verde-text: #166534;
  
  --estado-aprobado: #10b981;
  --estado-rechazado: #ef4444;
  --estado-tentativa: #f59e0b;
  
  --border: rgba(226, 232, 240, 0.6); /* Bordes translúcidos */
  --border-focus: #3b82f6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  
  /* 🔥 DEGRADADO ANIMADO POTENTE (Claro) */
  --body-bg: linear-gradient(125deg, #ffffff, #f8fafc, #e2e8f0, #bfdbfe);
  --body-bg-size: 300% 300%; /* Tamaño grande para moverse */
}

html.theme-light body {
  background: var(--body-bg);
  background-size: var(--body-bg-size);
  animation: panBackground 25s ease infinite; /* Movimiento suave de 25s */
  background-attachment: fixed;
}

/* ===== TEMA OSCURO (Animado: Navy → Verde → Morado Oscuro) ===== */
html.theme-dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  
  --text-primary: #f8fafc; /* Texto claro garantizado */
  --text-secondary: #cbd5e1;
  --text-inverse: #ffffff;
  
  --brand-primary: #93c5fd;
  --brand-secondary: #475569;
  --brand-accent: #60a5fa;
  --brand-accent-hover: #93c5fd;
  
  --alert-roja: #f87171;
  --alert-roja-light: rgba(248, 113, 113, 0.15);
  --alert-roja-text: #fca5a5;
  --alert-amarilla: #fbbf24;
  --alert-amarilla-light: rgba(251, 191, 36, 0.15);
  --alert-amarilla-text: #fde68a;
  --alert-verde: #4ade80;
  --alert-verde-light: rgba(74, 222, 128, 0.15);
  --alert-verde-text: #bbf7d0;
  
  --estado-aprobado: #4ade80;
  --estado-rechazado: #f87171;
  --estado-tentativa: #fbbf24;
  
  --border: rgba(51, 65, 85, 0.6); /* Bordes translúcidos */
  --border-focus: #60a5fa;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6);
  
  /* 🔥 DEGRADADO ANIMADO POTENTE (Oscuro) */
  --body-bg: linear-gradient(135deg, #020617, #0f172a, #115e59, #1e1b4b);
  --body-bg-size: 300% 300%;
}

html.theme-dark body {
  background: var(--body-bg);
  background-size: var(--body-bg-size);
  animation: panBackground 30s ease infinite; /* Movimiento un poco más lento en oscuro */
  background-attachment: fixed;
}

/* Transiciones suaves para componentes */
body, .card, .btn, .form-control, .modal, .data-table, .sidebar, .topbar, .filter-bar {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 4px; opacity: 0.5; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-accent); }
html.theme-dark ::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }

/* ===== FONDO ANIMADO ===== */
@keyframes panBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Tema Claro - Fondo Celeste Animado */
html.theme-light body {
  background: linear-gradient(125deg, #ffffff 0%, #f0f9ff 40%, #e0f2fe 100%);
  background-size: 300% 300%;
  animation: panBackground 15s ease infinite;
  background-attachment: fixed;
}

/* Tema Oscuro - Fondo Navy/Verde Animado */
html.theme-dark body {
  background: linear-gradient(135deg, #020617 0%, #0f172a 40%, #115e59 100%);
  background-size: 300% 300%;
  animation: panBackground 18s ease infinite;
  background-attachment: fixed;
}

/* Transiciones suaves */
body, .card, .btn, .form-control, .modal, .data-table {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}