/**
 * SISTEMA UNIFICADO DE VARIABLES CSS PARA TEMAS
 * Centraliza todas las variables de color y tema en un solo lugar
 */

:root {
  /* ===== VARIABLES BASE DEL SISTEMA ===== */
  
  /* Colores de Branding Principal */
  --brand-primary: #2563eb;
  --brand-primary-dark: #1d4ed8;
  --brand-primary-light: #dbeafe;
  --brand-secondary: #64748b;
  --brand-accent: #06b6d4;
  
  /* Estados de Color */
  --color-success: #059669;
  --color-success-light: #d1fae5;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-info: #0284c7;
  --color-info-light: #e0f2fe;

  /* ===== TEMA CLARO (DEFAULT) ===== */
  
  /* Fondos */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8fafc;
  --theme-bg-tertiary: #f1f5f9;
  --theme-bg-quaternary: #e2e8f0;
  --theme-surface: #ffffff;
  --theme-surface-hover: #f8fafc;
  --theme-surface-active: #f1f5f9;
  
  /* Textos */
  --theme-text-primary: #0f172a;
  --theme-text-secondary: #475569;
  --theme-text-tertiary: #64748b;
  --theme-text-muted: #94a3b8;
  --theme-text-inverse: #ffffff;
  
  /* Bordes */
  --theme-border-primary: #e2e8f0;
  --theme-border-secondary: #cbd5e1;
  --theme-border-tertiary: #94a3b8;
  --theme-border-focus: var(--brand-primary);
  
  /* Sombras */
  --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --theme-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Estados Interactivos */
  --theme-hover-overlay: rgba(0, 0, 0, 0.05);
  --theme-active-overlay: rgba(0, 0, 0, 0.1);
  --theme-focus-ring: rgba(37, 99, 235, 0.2);
  
  /* ===== SISTEMA DE TRANSICIONES ===== */
  --theme-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Propiedades que deben tener transición */
  --theme-transition-properties: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  
  /* ===== ESPACIADO Y DIMENSIONES ===== */
  --theme-border-radius-sm: 4px;
  --theme-border-radius-base: 8px;
  --theme-border-radius-lg: 12px;
  --theme-border-radius-xl: 16px;
  --theme-border-radius-full: 9999px;
  
  /* ===== COMPONENTES ESPECÍFICOS ===== */
  
  /* Navbar */
  --navbar-bg: var(--theme-surface);
  --navbar-border: var(--theme-border-primary);
  --navbar-text: var(--theme-text-primary);
  --navbar-text-hover: var(--brand-primary);
  --navbar-shadow: var(--theme-shadow-sm);
  
  /* Cards */
  --card-bg: var(--theme-surface);
  --card-border: var(--theme-border-primary);
  --card-shadow: var(--theme-shadow-base);
  --card-shadow-hover: var(--theme-shadow-md);
  
  /* Forms */
  --form-bg: var(--theme-surface);
  --form-border: var(--theme-border-primary);
  --form-border-focus: var(--theme-border-focus);
  --form-text: var(--theme-text-primary);
  --form-placeholder: var(--theme-text-tertiary);
  
  /* Buttons */
  --btn-shadow: var(--theme-shadow-sm);
  --btn-shadow-hover: var(--theme-shadow-md);
  --btn-border-radius: var(--theme-border-radius-base);
  
  /* Tables */
  --table-bg: var(--theme-surface);
  --table-border: var(--theme-border-primary);
  --table-stripe: var(--theme-bg-secondary);
  --table-hover: var(--theme-surface-hover);
  
  /* Dropdowns */
  --dropdown-bg: var(--theme-surface);
  --dropdown-border: var(--theme-border-primary);
  --dropdown-shadow: var(--theme-shadow-lg);
  --dropdown-item-hover: var(--theme-surface-hover);
  
  /* Modals */
  --modal-bg: var(--theme-surface);
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --modal-shadow: var(--theme-shadow-xl);
  
  /* Z-index hierarchy para evitar superposiciones */
  --z-dropdown: 1060;
  --z-modal: 1050;
  --z-tooltip: 1070;
  --z-calendar-buttons: 10;
  --z-calendar-events: 5;
  
  /* Theme Toggle Button */
  --theme-toggle-bg: var(--theme-surface);
  --theme-toggle-border: var(--theme-border-primary);
  --theme-toggle-text: var(--theme-text-secondary);
  --theme-toggle-hover-bg: var(--theme-surface-hover);
  --theme-toggle-shadow: var(--theme-shadow-base);
  --theme-toggle-shadow-hover: var(--theme-shadow-md);
}

/* ===== TEMA OSCURO ===== */
[data-theme="dark"] {
  /* Fondos */
  --theme-bg-primary: #0f172a;
  --theme-bg-secondary: #1e293b;
  --theme-bg-tertiary: #334155;
  --theme-bg-quaternary: #475569;
  --theme-surface: #1e293b;
  --theme-surface-hover: #334155;
  --theme-surface-active: #475569;
  
  /* Textos */
  --theme-text-primary: #f8fafc;
  --theme-text-secondary: #cbd5e1;
  --theme-text-tertiary: #94a3b8;
  --theme-text-muted: #64748b;
  --theme-text-inverse: #0f172a;
  
  /* Bordes */
  --theme-border-primary: #334155;
  --theme-border-secondary: #475569;
  --theme-border-tertiary: #64748b;
  
  /* Sombras - Más sutiles en tema oscuro */
  --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --theme-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --theme-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  
  /* Estados Interactivos */
  --theme-hover-overlay: rgba(255, 255, 255, 0.05);
  --theme-active-overlay: rgba(255, 255, 255, 0.1);
  --theme-focus-ring: rgba(37, 99, 235, 0.4);
}

/* ===== APLICACIÓN AUTOMÁTICA DE TRANSICIONES ===== */
* {
  transition: var(--theme-transition-properties) var(--theme-transition-fast);
}

/* Elementos que no deben tener transición automática */
*:where(
  .no-transition,
  [data-no-transition],
  .fc-event, /* FullCalendar events */
  .calendar-event,
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb
) {
  transition: none !important;
}

/* ===== ESTILOS BASE USANDO VARIABLES ===== */

/* Aplicar colores base al documento */
html {
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

body {
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

/* ===== COMPONENTES BOOTSTRAP OVERRIDE ===== */

/* Navbar */
.navbar {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border);
  box-shadow: var(--navbar-shadow);
}

.navbar-nav .nav-link {
  color: var(--navbar-text) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--navbar-text-hover) !important;
}

/* Cards */
.card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Forms */
.form-control,
.form-select {
  background-color: var(--form-bg);
  border-color: var(--form-border);
  color: var(--form-text);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--form-border-focus);
  box-shadow: 0 0 0 0.2rem var(--theme-focus-ring);
}

.form-control::placeholder {
  color: var(--form-placeholder);
}

/* Buttons */
.btn {
  border-radius: var(--btn-border-radius);
  box-shadow: var(--btn-shadow);
}

.btn:hover {
  box-shadow: var(--btn-shadow-hover);
}

/* Tables */
.table {
  background-color: var(--table-bg);
  color: var(--theme-text-primary);
}

.table th {
  background-color: var(--theme-bg-secondary);
  border-color: var(--table-border);
  color: var(--theme-text-primary);
}

.table td {
  border-color: var(--table-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--table-stripe);
}

.table-hover > tbody > tr:hover > td {
  background-color: var(--table-hover);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--dropdown-bg);
  border-color: var(--dropdown-border);
  box-shadow: var(--dropdown-shadow);
  z-index: var(--z-dropdown) !important;
}

.dropdown-item {
  color: var(--theme-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--dropdown-item-hover);
  color: var(--theme-text-primary);
}

/* Modals */
.modal-content {
  background-color: var(--modal-bg);
  box-shadow: var(--modal-shadow);
}

.modal-backdrop {
  background-color: var(--modal-backdrop);
}

/* ===== THEME TOGGLE BUTTON STYLES ===== */
#theme-toggle,
.theme-toggle {
  background-color: var(--theme-toggle-bg);
  border: 1px solid var(--theme-toggle-border);
  color: var(--theme-toggle-text);
  border-radius: var(--theme-border-radius-full);
  box-shadow: var(--theme-toggle-shadow);
  transition: all var(--theme-transition-fast);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

#theme-toggle:hover,
.theme-toggle:hover {
  background-color: var(--theme-toggle-hover-bg);
  box-shadow: var(--theme-toggle-shadow-hover);
  transform: scale(1.05);
}

#theme-toggle:active,
.theme-toggle:active {
  transform: scale(0.95);
}

#theme-toggle:focus,
.theme-toggle:focus {
  outline: 2px solid var(--theme-border-focus);
  outline-offset: 2px;
}

#theme-toggle i,
.theme-toggle i {
  font-size: 16px;
  transition: transform var(--theme-transition-fast);
}

#theme-toggle:active i,
.theme-toggle:active i {
  transform: scale(0.9);
}

/* ===== UTILIDADES DE TEMA ===== */

/* Clases de utilidad para colores de tema */
.text-theme-primary { color: var(--theme-text-primary) !important; }
.text-theme-secondary { color: var(--theme-text-secondary) !important; }
.text-theme-muted { color: var(--theme-text-muted) !important; }

.bg-theme-primary { background-color: var(--theme-bg-primary) !important; }
.bg-theme-secondary { background-color: var(--theme-bg-secondary) !important; }
.bg-theme-surface { background-color: var(--theme-surface) !important; }

.border-theme { border-color: var(--theme-border-primary) !important; }
.border-theme-secondary { border-color: var(--theme-border-secondary) !important; }

/* ===== RESPONSIVE DESIGN ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  * {
    background-color: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}