/* ============================================================================
   🎨 SISTEMA DE DISEÑO COOTRAVIR C.T.A. 🎨
   
   📋 ¿QUÉ ES ESTE ARCHIVO?
   Este archivo contiene todos los estilos visuales (colores, tamaños, formas) 
   que se usan en las aplicaciones de COOTRAVIR. Es como el "manual de marca" 
   digital que asegura que todo se vea igual y profesional.
   
   🎯 ¿PARA QUÉ SIRVE?
   - Define los colores oficiales de COOTRAVIR
   - Establece tamaños de texto y botones
   - Crea botones, formularios y tarjetas
   - Permite cambiar entre modo claro y oscuro
   
   👥 ¿QUIÉN PUEDE USARLO?
   - Desarrolladores web
   - Diseñadores gráficos
   - Cualquier persona que trabaje en aplicaciones de COOTRAVIR
   
   📱 COMPATIBILIDAD: Funciona en computadoras, tablets y celulares
   ============================================================================ */

/* 🌙 CONFIGURACIÓN PARA MODO OSCURO */
/* Esta línea permite que la página cambie automáticamente entre modo claro y oscuro */

:root {
  /* ========== 🎨 PALETA DE COLORES OFICIALES COOTRAVIR ========== */
  /* Estos son los colores principales que identifican a COOTRAVIR */
  
  /* 🔵 AZUL PRINCIPAL - El color más importante de la marca */
  --cootravir-blue: #0e2455;           /* Azul principal (más usado) */
  --cootravir-blue-light: #4a6fa5;    /* Azul más claro */
  --cootravir-blue-lighter: #6b8bc0;  /* Azul aún más claro */
  --cootravir-blue-darker: #0f1d2f;   /* Azul más oscuro */
  
  /* 🟡 DORADO PRINCIPAL - El color secundario de la marca */
  --cootravir-gold: #d4af37;          /* Dorado principal */
  --cootravir-gold-light: #e8c96f;    /* Dorado más claro */
  --cootravir-gold-lighter: #f4e5b8;  /* Dorado muy claro */
  --cootravir-gold-darker: #dba425;   /* Dorado más oscuro */
  
  /* ========== 🚨 COLORES DE SEGURIDAD ========== */
  /* Estos colores se usan para indicar el estado de seguridad en tiempo real */
  --security-active: #16a34a;    /* 🟢 VERDE: Sistema activo y funcionando */
  --security-warning: #f59e0b;   /* 🟡 AMARILLO: Advertencia o precaución */
  --security-danger: #dc2626;    /* 🔴 ROJO: Peligro o sistema inactivo */
  --security-inactive: #6b7280; /* ⚫ GRIS: Sistema desactivado */
  
  /* ========== 📊 COLORES DE ESTADO GENERAL ========== */
  /* Colores para mostrar diferentes tipos de información */
  --status-success: #22c55e;     /* ✅ ÉXITO: Operación completada correctamente */
  --status-info: #3b82f6;         /* ℹ️ INFORMACIÓN: Datos o mensajes informativos */
  --status-warning: #eab308;     /* ⚠️ ADVERTENCIA: Algo requiere atención */
  --status-error: #ef4444;        /* ❌ ERROR: Algo salió mal */
  
  /* ========== 🖼️ FONDOS Y SUPERFICIES ========== */
  /* Colores de fondo que dan la apariencia general de la página */
  --background: #ffffff;                    /* 🏠 FONDO PRINCIPAL: Color base de la página */
  --background-secondary: #f8fafc;         /* 🏢 FONDO SECUNDARIO: Para secciones especiales */
  --background-tertiary: #f1f5f9;          /* 🏗️ FONDO TERCIARIO: Para áreas menos importantes */
  --surface: #ffffff;                      /* 📄 SUPERFICIE: Color de tarjetas y paneles */
  --surface-raised: #f8fafc;               /* 📋 SUPERFICIE ELEVADA: Para elementos que "flotan" */
  --surface-overlay: rgba(0, 0, 0, 0.05); /* 🌫️ SUPERFICIE TRANSPARENTE: Para capas superpuestas */
  
  /* ========== 📝 COLORES DE TEXTO ========== */
  /* Diferentes tonos de texto para crear jerarquía visual */
  --foreground: #0f172a;        /* 📖 TEXTO PRINCIPAL: El más oscuro y legible */
  --foreground-secondary: #475569; /* 📄 TEXTO SECUNDARIO: Para subtítulos y descripciones */
  --foreground-tertiary: #64748b;  /* 📝 TEXTO TERCIARIO: Para información menos importante */
  --foreground-inverse: #ffffff;   /* 🔄 TEXTO INVERSO: Texto blanco para fondos oscuros */
  
  /* ========== 🔲 COLORES DE BORDES ========== */
  /* Líneas que separan elementos y crean estructura visual */
  --border: rgba(0, 0, 0, 0.1);        /* 📏 BORDE NORMAL: Líneas sutiles para separar contenido */
  --border-light: rgba(0, 0, 0, 0.05); /* 📐 BORDE SUAVE: Líneas muy tenues */
  --border-medium: rgba(0, 0, 0, 0.15); /* 📏 BORDE MEDIO: Líneas más visibles */
  --border-strong: rgba(0, 0, 0, 0.2); /* 📏 BORDE FUERTE: Líneas bien definidas */
  
  /* ========== 🔤 CONFIGURACIÓN DE FUENTES ========== */
  /* Define qué tipos de letra se usan en toda la aplicación */
  --font-family-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* 📝 FUENTE PRINCIPAL: Plus Jakarta Sans (moderna y legible) con respaldos del sistema */
  --font-family-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* 📰 FUENTE PARA TÍTULOS: Misma que la principal para consistencia */
  --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;
  /* 💻 FUENTE MONOESPACIADA: Para código y números (todas las letras tienen el mismo ancho) */
  
  /* ========== 📏 TAMAÑOS DE TEXTO ========== */
  /* Diferentes tamaños para crear jerarquía visual (del más pequeño al más grande) */
  --font-size: 18px;              /* 📐 TAMAÑO BASE: El tamaño estándar de lectura */
  --font-size-xs: 0.75rem;        /* 🔤 MUY PEQUEÑO: Para notas y etiquetas (12px) */
  --font-size-sm: 0.875rem;       /* 📝 PEQUEÑO: Para descripciones y texto secundario (14px) */
  --font-size-base: 1rem;         /* 📖 NORMAL: Tamaño estándar para párrafos (16px) */
  --font-size-lg: 1.125rem;        /* 📄 GRANDE: Para subtítulos importantes (18px) */
  --font-size-xl: 1.375rem;       /* 📰 EXTRA GRANDE: Para títulos de sección (22px) */
  --font-size-2xl: 1.625rem;      /* 🏷️ MUY GRANDE: Para títulos principales (26px) */
  --font-size-3xl: 1.875rem;      /* 🎯 EXTRA GRANDE: Para títulos de página (30px) */
  --font-size-4xl: 2.25rem;       /* 🏆 GIGANTE: Para títulos de hero/banner (36px) */
  --font-size-5xl: 2.75rem;       /* 🌟 ENORME: Para títulos de impacto máximo (44px) */
  
  /* ========== 📏 ESPACIADO ENTRE LÍNEAS ========== */
  /* Controla qué tan separadas están las líneas de texto para mejor legibilidad */
  --line-height-tight: 1.25;     /* 📐 COMPACTO: Líneas muy juntas (para títulos) */
  --line-height-snug: 1.375;     /* 📏 APRETADO: Líneas cercanas (para subtítulos) */
  --line-height-normal: 1.5;     /* 📖 NORMAL: Espaciado cómodo para lectura */
  --line-height-relaxed: 1.625;  /* 📄 RELAJADO: Más espacio entre líneas (para párrafos largos) */
  --line-height-loose: 2;         /* 📰 SUELTO: Mucho espacio (para texto especial) */
  
  /* ========== 📐 SISTEMA DE ESPACIADO ========== */
  /* Distancias estándar para mantener consistencia visual en toda la aplicación */
  --spacing-0: 0;              /* 🚫 SIN ESPACIO: Elementos pegados */
  --spacing-1: 0.25rem;       /* 📏 MUY PEQUEÑO: Espacio mínimo (4px) */
  --spacing-2: 0.5rem;        /* 📐 PEQUEÑO: Para elementos muy cercanos (8px) */
  --spacing-3: 0.75rem;       /* 📏 MEDIO-PEQUEÑO: Espacio entre elementos relacionados (12px) */
  --spacing-4: 1rem;          /* 📖 NORMAL: Espacio estándar entre elementos (16px) */
  --spacing-5: 1.25rem;       /* 📄 MEDIO: Espacio entre secciones pequeñas (20px) */
  --spacing-6: 1.5rem;        /* 📰 GRANDE: Espacio entre secciones importantes (24px) */
  --spacing-8: 2rem;          /* 🏷️ MUY GRANDE: Espacio entre secciones principales (32px) */
  --spacing-10: 2.5rem;       /* 🎯 EXTRA GRANDE: Espacio entre páginas o módulos (40px) */
  --spacing-12: 3rem;         /* 🏆 GIGANTE: Espacio entre secciones de página (48px) */
  --spacing-16: 4rem;         /* 🌟 ENORME: Espacio entre páginas completas (64px) */
  --spacing-20: 5rem;         /* 🚀 MASIVO: Espacio para separar contenido principal (80px) */
  --spacing-24: 6rem;         /* 🎪 COLOSAL: Espacio para separar secciones grandes (96px) */
  --spacing-32: 8rem;         /* 🌌 ÉPICO: Espacio máximo para separar contenido (128px) */
  
  /* ========== 📏 ESPACIADO ESPECIAL ========== */
  --spacing-section: var(--spacing-12);    /* 📄 ESPACIO ENTRE SECCIONES: Distancia estándar entre secciones de página */
  --spacing-component: var(--spacing-6);   /* 🧩 ESPACIO ENTRE COMPONENTES: Distancia entre elementos de interfaz */
  
  /* ========== 🔄 BORDES REDONDEADOS ========== */
  /* Controla qué tan redondeadas se ven las esquinas de botones, tarjetas, etc. */
  --radius: 0.625rem;        /* 🔄 REDONDEADO ESTÁNDAR: El más usado en la aplicación (10px) */
  --radius-none: 0;          /* 📐 SIN REDONDEO: Esquinas completamente cuadradas */
  --radius-sm: 0.25rem;      /* 🔄 MUY POCO: Esquinas apenas redondeadas (4px) */
  --radius-base: 0.375rem;   /* 🔄 POCO: Redondeado mínimo (6px) */
  --radius-md: 0.5rem;       /* 🔄 MEDIO: Redondeado moderado (8px) */
  --radius-lg: 0.625rem;     /* 🔄 GRANDE: Redondeado notable (10px) */
  --radius-xl: 0.75rem;      /* 🔄 MUY GRANDE: Redondeado prominente (12px) */
  --radius-2xl: 1rem;        /* 🔄 EXTRA GRANDE: Redondeado muy notable (16px) */
  --radius-3xl: 1.5rem;      /* 🔄 GIGANTE: Redondeado máximo (24px) */
  --radius-full: 9999px;     /* ⭕ COMPLETAMENTE REDONDO: Para crear círculos perfectos */
  
  /* ========== 🌟 SISTEMA DE SOMBRAS ========== */
  /* Crea profundidad y hace que los elementos se vean "flotando" sobre la página */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* 🌫️ SOMBRA MUY SUTIL: Para elementos que apenas se elevan */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  /* 🌤️ SOMBRA SUAVE: Para tarjetas y elementos ligeros */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  /* ☁️ SOMBRA MEDIA: Para botones y elementos interactivos */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  /* 🌥️ SOMBRA GRANDE: Para modales y ventanas emergentes */
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* 🌩️ SOMBRA ENORME: Para elementos que "flotan" mucho */
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  /* 🌑 SOMBRA INTERNA: Para crear efecto de "hundimiento" */
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  
  /* ========== 🏗️ ELEVACIONES ESPECÍFICAS ========== */
  /* Sombras predefinidas para diferentes tipos de elementos */
  --elevation-card: var(--shadow-sm);      /* 📄 TARJETAS: Sombra sutil para tarjetas de contenido */
  --elevation-dialog: var(--shadow-xl);    /* 🪟 VENTANAS: Sombra fuerte para modales y diálogos */
  --elevation-tooltip: var(--shadow-lg);   /* 💬 TOOLTIPS: Sombra media para información flotante */
  --elevation-dropdown: var(--shadow-md);  /* 📋 MENÚS: Sombra moderada para menús desplegables */
  
  /* ========== 📚 SISTEMA DE CAPAS (Z-INDEX) ========== */
  /* Controla qué elementos aparecen encima de otros (como capas de papel) */
  --z-dropdown: 1000;        /* 📋 MENÚS: Menús desplegables sobre contenido normal */
  --z-sticky: 1020;          /* 📌 PEGAJOSO: Elementos que se quedan fijos al hacer scroll */
  --z-fixed: 1030;           /* 🔒 FIJO: Elementos que siempre están visibles (como navegación) */
  --z-modal-backdrop: 1040;  /* 🌫️ FONDO DE MODAL: La capa oscura detrás de ventanas emergentes */
  --z-modal: 1050;           /* 🪟 MODALES: Ventanas emergentes sobre todo lo demás */
  --z-popover: 1060;         /* 💬 POPOVERS: Información flotante sobre modales */
  --z-tooltip: 1070;         /* 💡 TOOLTIPS: Ayuda contextual sobre todo (la capa más alta) */
  
  /* ========== ⏱️ SISTEMA DE TRANSICIONES ========== */
  /* Controla qué tan rápido o lento se animan los elementos al cambiar */
  --transition-fast: 150ms;      /* ⚡ MUY RÁPIDO: Para cambios instantáneos (150 milisegundos) */
  --transition-base: 250ms;       /* 🏃 RÁPIDO: Para la mayoría de animaciones (250 milisegundos) */
  --transition-slow: 350ms;       /* 🚶 LENTO: Para cambios más suaves (350 milisegundos) */
  --transition-slower: 500ms;    /* 🐌 MUY LENTO: Para transiciones dramáticas (500 milisegundos) */
  
  /* ========== 🎭 TIPOS DE ANIMACIÓN ========== */
  /* Diferentes "estilos" de movimiento para crear sensaciones específicas */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* 🚀 ACELERACIÓN: Empieza lento y termina rápido (como un cohete) */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  /* 🛬 DESACELERACIÓN: Empieza rápido y termina lento (como un aterrizaje) */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* 🎢 SUAVE: Empieza lento, acelera en el medio, y termina lento (como una montaña rusa) */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* 🎯 REBOTE: Animación con efecto de rebote para elementos interactivos */
  
  /* ========== 🧩 COMPONENTES DE INTERFAZ ========== */
  /* Colores específicos para diferentes tipos de elementos de la interfaz */
  --card: #ffffff;                    /* 📄 TARJETAS: Fondo blanco para tarjetas de contenido */
  --card-foreground: #0f172a;        /* 📝 TEXTO EN TARJETAS: Color del texto dentro de tarjetas */
  
  --popover: #ffffff;                 /* 💬 VENTANAS EMERGENTES: Fondo para información flotante */
  --popover-foreground: #0f172a;     /* 📄 TEXTO EN POPOVERS: Color del texto en ventanas emergentes */
  
  /* ========== 🎨 COLORES PRINCIPALES ========== */
  --primary: var(--cootravir-blue);           /* 🔵 COLOR PRINCIPAL: El azul oficial de COOTRAVIR */
  --primary-foreground: #ffffff;             /* ⚪ TEXTO EN PRINCIPAL: Texto blanco sobre azul */
  --primary-hover: var(--cootravir-blue-lighter); /* 🔵 HOVER PRINCIPAL: Azul más claro al pasar el mouse */
  --primary-active: var(--cootravir-blue-darker);  /* 🔵 ACTIVO PRINCIPAL: Azul más oscuro al hacer clic */
  
  --secondary: #f1f5f9;                      /* 🔘 COLOR SECUNDARIO: Gris claro para elementos secundarios */
  --secondary-foreground: var(--cootravir-blue); /* 🔵 TEXTO EN SECUNDARIO: Azul sobre gris claro */
  --secondary-hover: #e2e8f0;                /* 🔘 HOVER SECUNDARIO: Gris más oscuro al pasar el mouse */
  --secondary-active: #cbd5e1;               /* 🔘 ACTIVO SECUNDARIO: Gris más oscuro al hacer clic */
  
  --accent: var(--cootravir-gold);           /* 🟡 COLOR DE ACENTO: El dorado oficial de COOTRAVIR */
  --accent-foreground: var(--cootravir-blue); /* 🔵 TEXTO EN ACENTO: Azul sobre dorado */
  --accent-hover: var(--cootravir-gold-light); /* 🟡 HOVER ACENTO: Dorado más claro al pasar el mouse */
  --accent-active: var(--cootravir-gold-darker); /* 🟡 ACTIVO ACENTO: Dorado más oscuro al hacer clic */
  
  --muted: #f1f5f9;                         /* 🔇 COLOR APAGADO: Gris muy claro para elementos discretos */
  --muted-foreground: #64748b;              /* 📝 TEXTO APAGADO: Gris para texto menos importante */
  
  --destructive: #dc2626;                   /* 🔴 COLOR DESTRUCTIVO: Rojo para acciones peligrosas */
  --destructive-foreground: #ffffff;        /* ⚪ TEXTO EN DESTRUCTIVO: Blanco sobre rojo */
  --destructive-hover: #ef4444;             /* 🔴 HOVER DESTRUCTIVO: Rojo más claro al pasar el mouse */
  --destructive-active: #b91c1c;            /* 🔴 ACTIVO DESTRUCTIVO: Rojo más oscuro al hacer clic */
  
  /* ========== 📝 FORMULARIOS Y ENTRADAS ========== */
  --input: transparent;                    /* 🔍 FONDO DE INPUT: Transparente para inputs limpios */
  --input-background: #f3f3f5;           /* 📄 FONDO DE INPUT: Gris muy claro para campos de texto */
  --input-border: rgba(0, 0, 0, 0.1);     /* 📏 BORDE DE INPUT: Línea sutil alrededor de campos */
  --input-placeholder: #94a3b8;           /* 💭 TEXTO PLACEHOLDER: Gris para texto de ayuda */
  --input-disabled: #f1f5f9;              /* 🚫 INPUT DESHABILITADO: Gris para campos no editables */
  
  /* ========== 🔄 INTERRUPTORES Y TOGGLES ========== */
  --switch-background: #cbd5e1;           /* 🔘 FONDO DE SWITCH: Gris para estado desactivado */
  --switch-checked: var(--cootravir-blue); /* 🔵 SWITCH ACTIVADO: Azul COOTRAVIR cuando está encendido */
  
  /* ========== 🎯 ANILLO DE ENFOQUE ========== */
  --ring: var(--cootravir-blue);          /* 🔵 ANILLO DE ENFOQUE: Azul para mostrar qué elemento está seleccionado */
  --ring-offset: #ffffff;                 /* ⚪ OFFSET DEL ANILLO: Blanco para separar el anillo del elemento */
  
  /* ========== 📊 COLORES PARA GRÁFICOS ========== */
  --chart-1: var(--cootravir-blue);        /* 🔵 GRÁFICO 1: Azul principal para primera serie de datos */
  --chart-2: var(--cootravir-gold);        /* 🟡 GRÁFICO 2: Dorado para segunda serie de datos */
  --chart-3: var(--cootravir-blue-light); /* 🔵 GRÁFICO 3: Azul claro para tercera serie */
  --chart-4: var(--cootravir-gold-lighter); /* 🟡 GRÁFICO 4: Dorado claro para cuarta serie */
  --chart-5: var(--cootravir-blue-darker); /* 🔵 GRÁFICO 5: Azul oscuro para quinta serie */
  
  /* ========== 📋 BARRA LATERAL (SIDEBAR) ========== */
  --sidebar: #f8fafc;                      /* 📄 FONDO DE SIDEBAR: Gris muy claro para barra lateral */
  --sidebar-foreground: #0f172a;          /* 📝 TEXTO EN SIDEBAR: Negro para texto en barra lateral */
  --sidebar-primary: var(--cootravir-blue); /* 🔵 ELEMENTO ACTIVO: Azul para elemento seleccionado */
  --sidebar-primary-foreground: #ffffff;   /* ⚪ TEXTO ACTIVO: Blanco para texto del elemento activo */
  --sidebar-accent: #e2e8f0;               /* 🔘 ELEMENTO HOVER: Gris para elemento al pasar el mouse */
  --sidebar-accent-foreground: var(--cootravir-blue); /* 🔵 TEXTO HOVER: Azul para texto al pasar el mouse */
  --sidebar-border: rgba(0, 0, 0, 0.1);   /* 📏 BORDE DE SIDEBAR: Línea sutil para separar */
  --sidebar-ring: var(--cootravir-blue);   /* 🔵 ANILLO DE ENFOQUE: Azul para elemento enfocado */
  --sidebar-width: 16rem;                 /* 📏 ANCHO NORMAL: 256px cuando está expandida */
  --sidebar-width-collapsed: 4rem;         /* 📏 ANCHO COLAPSADA: 64px cuando está contraída */
  
  /* ========== 📄 CONFIGURACIÓN DE TARJETAS ========== */
  --card-padding: var(--spacing-6);        /* 📏 RELLENO DE TARJETA: Espacio interno de 24px */
  --card-gap: var(--spacing-4);           /* 📐 ESPACIO ENTRE TARJETAS: 16px entre tarjetas */
  
  /* ========== 🏷️ CONFIGURACIÓN DE ETIQUETAS ========== */
  --badge-height: 1.5rem;                /* 📏 ALTURA DE ETIQUETA: 24px de alto estándar */
  --badge-padding-x: var(--spacing-2);    /* 📐 RELLENO HORIZONTAL: 8px a los lados */
  --badge-border-radius: var(--radius-full); /* ⭕ BORDE REDONDO: Completamente redondeadas */
  
  /* ========== 💡 CONFIGURACIÓN DE TOOLTIPS ========== */
  --tooltip-background: rgba(17, 24, 39, 0.95); /* 🌫️ FONDO DE TOOLTIP: Negro semi-transparente */
  --tooltip-foreground: #ffffff;                /* ⚪ TEXTO DE TOOLTIP: Blanco para contraste */
  --tooltip-padding: var(--spacing-2) var(--spacing-3); /* 📏 RELLENO: 8px vertical, 12px horizontal */
}

/* ========== 🌙 TEMA OSCURO ========== */
/* Cuando se activa el modo oscuro, estos colores reemplazan a los del tema claro */
.dark {
  /* ========== 🖼️ FONDOS EN MODO OSCURO ========== */
  --background: #0f172a;                    /* 🌑 FONDO PRINCIPAL OSCURO: Azul muy oscuro para fondo principal */
  --background-secondary: #1e293b;         /* 🌚 FONDO SECUNDARIO OSCURO: Azul oscuro para secciones */
  --background-tertiary: #334155;          /* 🌘 FONDO TERCIARIO OSCURO: Gris azulado para áreas menos importantes */
  --surface: #1e293b;                      /* 📄 SUPERFICIE OSCURA: Azul oscuro para tarjetas */
  --surface-raised: #334155;               /* 📋 SUPERFICIE ELEVADA OSCURA: Gris azulado para elementos flotantes */
  --surface-overlay: rgba(255, 255, 255, 0.05); /* 🌫️ SUPERFICIE TRANSPARENTE OSCURA: Blanco muy tenue para capas */
  
  /* ========== 📝 TEXTOS EN MODO OSCURO ========== */
  --foreground: #f8fafc;                   /* 📖 TEXTO PRINCIPAL OSCURO: Blanco para texto principal */
  --foreground-secondary: #cbd5e1;         /* 📄 TEXTO SECUNDARIO OSCURO: Gris claro para subtítulos */
  --foreground-tertiary: #94a3b8;          /* 📝 TEXTO TERCIARIO OSCURO: Gris para texto menos importante */
  --foreground-inverse: #0f172a;           /* 🔄 TEXTO INVERSO OSCURO: Azul oscuro para texto sobre fondos claros */
  
  /* ========== 🔲 BORDES EN MODO OSCURO ========== */
  --border: rgba(255, 255, 255, 0.1);      /* 📏 BORDE NORMAL OSCURO: Blanco muy tenue para separar contenido */
  --border-light: rgba(255, 255, 255, 0.05); /* 📐 BORDE SUAVE OSCURO: Blanco casi invisible para líneas sutiles */
  --border-medium: rgba(255, 255, 255, 0.15); /* 📏 BORDE MEDIO OSCURO: Blanco más visible para separaciones */
  --border-strong: rgba(255, 255, 255, 0.2); /* 📏 BORDE FUERTE OSCURO: Blanco bien definido para elementos importantes */
  
  /* ========== 🧩 COMPONENTES UI EN MODO OSCURO ========== */
  --card: #1e293b;                         /* 📄 TARJETAS OSCURAS: Azul oscuro para tarjetas */
  --card-foreground: #f8fafc;             /* 📝 TEXTO EN TARJETAS OSCURAS: Blanco para texto en tarjetas */
  
  --popover: #1e293b;                      /* 💬 POPOVERS OSCUROS: Azul oscuro para ventanas emergentes */
  --popover-foreground: #f8fafc;          /* 📄 TEXTO EN POPOVERS OSCUROS: Blanco para texto en popovers */
  
  /* ========== 🎨 COLORES PRINCIPALES EN MODO OSCURO ========== */
  --primary: #4a6fa5;                      /* 🔵 COLOR PRINCIPAL OSCURO: Azul más claro para contraste */
  --primary-foreground: #ffffff;         /* ⚪ TEXTO EN PRINCIPAL OSCURO: Blanco sobre azul */
  --primary-hover: #6b8bc0;               /* 🔵 HOVER PRINCIPAL OSCURO: Azul más claro al pasar el mouse */
  --primary-active: #4a6fa5;              /* 🔵 ACTIVO PRINCIPAL OSCURO: Azul al hacer clic */
  
  --secondary: #334155;                    /* 🔘 COLOR SECUNDARIO OSCURO: Gris azulado para elementos secundarios */
  --secondary-foreground: #f8fafc;        /* ⚪ TEXTO EN SECUNDARIO OSCURO: Blanco sobre gris */
  --secondary-hover: #475569;             /* 🔘 HOVER SECUNDARIO OSCURO: Gris más claro al pasar el mouse */
  --secondary-active: #64748b;            /* 🔘 ACTIVO SECUNDARIO OSCURO: Gris al hacer clic */
  
  --accent: var(--cootravir-gold);        /* 🟡 COLOR DE ACENTO OSCURO: Dorado COOTRAVIR (se mantiene igual) */
  --accent-foreground: #0f172a;          /* 🔵 TEXTO EN ACENTO OSCURO: Azul oscuro sobre dorado */
  --accent-hover: var(--cootravir-gold-light); /* 🟡 HOVER ACENTO OSCURO: Dorado claro al pasar el mouse */
  --accent-active: var(--cootravir-gold-darker); /* 🟡 ACTIVO ACENTO OSCURO: Dorado oscuro al hacer clic */
  
  --muted: #334155;                       /* 🔇 COLOR APAGADO OSCURO: Gris azulado para elementos discretos */
  --muted-foreground: #94a3b8;            /* 📝 TEXTO APAGADO OSCURO: Gris para texto menos importante */
  
  --destructive: #ef4444;                 /* 🔴 COLOR DESTRUCTIVO OSCURO: Rojo para acciones peligrosas */
  --destructive-foreground: #ffffff;      /* ⚪ TEXTO EN DESTRUCTIVO OSCURO: Blanco sobre rojo */
  --destructive-hover: #f87171;           /* 🔴 HOVER DESTRUCTIVO OSCURO: Rojo claro al pasar el mouse */
  --destructive-active: #dc2626;          /* 🔴 ACTIVO DESTRUCTIVO OSCURO: Rojo oscuro al hacer clic */
  
  /* ========== 📝 FORMULARIOS EN MODO OSCURO ========== */
  --input: transparent;                      /* 🔍 FONDO DE INPUT OSCURO: Transparente para inputs limpios */
  --input-background: #1e293b;            /* 📄 FONDO DE INPUT OSCURO: Azul oscuro para campos de texto */
  --input-border: rgba(255, 255, 255, 0.1); /* 📏 BORDE DE INPUT OSCURO: Blanco tenue para bordes */
  --input-disabled: #334155;               /* 🚫 INPUT DESHABILITADO OSCURO: Gris para campos no editables */
  
  /* ========== 🔄 INTERRUPTORES EN MODO OSCURO ========== */
  --switch-background: #475569;            /* 🔘 FONDO DE SWITCH OSCURO: Gris para estado desactivado */
  --switch-checked: var(--cootravir-blue-light); /* 🔵 SWITCH ACTIVADO OSCURO: Azul claro cuando está encendido */
  
  /* ========== 🎯 ANILLO DE ENFOQUE OSCURO ========== */
  --ring: var(--cootravir-blue-light);     /* 🔵 ANILLO DE ENFOQUE OSCURO: Azul claro para mostrar selección */
  --ring-offset: #0f172a;                  /* 🌑 OFFSET DEL ANILLO OSCURO: Azul oscuro para separar el anillo */
  
  /* ========== 📊 GRÁFICOS EN MODO OSCURO ========== */
  --chart-1: var(--cootravir-blue-light);     /* 🔵 GRÁFICO 1 OSCURO: Azul claro para primera serie */
  --chart-2: var(--cootravir-gold);           /* 🟡 GRÁFICO 2 OSCURO: Dorado para segunda serie */
  --chart-3: var(--cootravir-blue-lighter);   /* 🔵 GRÁFICO 3 OSCURO: Azul más claro para tercera serie */
  --chart-4: var(--cootravir-gold-light);     /* 🟡 GRÁFICO 4 OSCURO: Dorado claro para cuarta serie */
  --chart-5: var(--cootravir-blue);           /* 🔵 GRÁFICO 5 OSCURO: Azul principal para quinta serie */
  
  /* ========== 📋 SIDEBAR EN MODO OSCURO ========== */
  --sidebar: #1e293b;                         /* 📄 FONDO DE SIDEBAR OSCURO: Azul oscuro para barra lateral */
  --sidebar-foreground: #f8fafc;             /* 📝 TEXTO EN SIDEBAR OSCURO: Blanco para texto en barra lateral */
  --sidebar-primary: var(--cootravir-blue-light); /* 🔵 ELEMENTO ACTIVO OSCURO: Azul claro para elemento seleccionado */
  --sidebar-primary-foreground: #ffffff;      /* ⚪ TEXTO ACTIVO OSCURO: Blanco para texto del elemento activo */
  --sidebar-accent: #334155;                 /* 🔘 ELEMENTO HOVER OSCURO: Gris azulado para elemento al pasar el mouse */
  --sidebar-accent-foreground: #f8fafc;      /* ⚪ TEXTO HOVER OSCURO: Blanco para texto al pasar el mouse */
  --sidebar-border: #334155;                 /* 📏 BORDE DE SIDEBAR OSCURO: Gris azulado para separar */
  --sidebar-ring: var(--cootravir-blue-light); /* 🔵 ANILLO DE ENFOQUE OSCURO: Azul claro para elemento enfocado */
  
  /* ========== 💡 TOOLTIPS EN MODO OSCURO ========== */
  --tooltip-background: rgba(248, 250, 252, 0.95); /* 🌫️ FONDO DE TOOLTIP OSCURO: Blanco semi-transparente */
  --tooltip-foreground: #0f172a;             /* 🔵 TEXTO DE TOOLTIP OSCURO: Azul oscuro para contraste */
  
  /* ========== 🌟 SOMBRAS EN MODO OSCURO ========== */
  /* Sombras más intensas para crear mejor contraste en fondos oscuros */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  /* 🌫️ SOMBRA MUY SUTIL OSCURA: Para elementos que apenas se elevan en modo oscuro */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  /* 🌤️ SOMBRA SUAVE OSCURA: Para tarjetas y elementos ligeros en modo oscuro */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  /* ☁️ SOMBRA MEDIA OSCURA: Para botones y elementos interactivos en modo oscuro */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  /* 🌥️ SOMBRA GRANDE OSCURA: Para modales y ventanas emergentes en modo oscuro */
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  /* 🌩️ SOMBRA ENORME OSCURA: Para elementos que "flotan" mucho en modo oscuro */
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* ========== 🏗️ ESTILOS BASE ========== */
/* Configuración fundamental que afecta a toda la página */
* {
  box-sizing: border-box;  /* 📐 INCLUIR BORDES: Los bordes se incluyen en el tamaño total del elemento */
  margin: 0;               /* 🚫 SIN MARGEN: Elimina márgenes automáticos del navegador */
  padding: 0;              /* 🚫 SIN RELLENO: Elimina rellenos automáticos del navegador */
}

body {
  font-family: var(--font-family-base);     /* 🔤 FUENTE PRINCIPAL: Inter como fuente base */
  font-size: var(--font-size);              /* 📏 TAMAÑO DE TEXTO: 16px como tamaño estándar */
  line-height: var(--line-height-normal);   /* 📐 ESPACIADO ENTRE LÍNEAS: 1.5 para lectura cómoda */
  color: var(--foreground);                 /* 📝 COLOR DE TEXTO: Negro para texto principal */
  background-color: var(--background);      /* 🖼️ COLOR DE FONDO: Blanco para fondo principal */
  transition: background-color var(--transition-base), color var(--transition-base);
  /* ⏱️ TRANSICIÓN SUAVE: Cambio gradual entre modo claro y oscuro */
}

/* ========== 📐 SISTEMA DE LAYOUT ========== */
/* Contenedores y estructura principal de la página */
.container {
  max-width: 1200px;              /* 📏 ANCHO MÁXIMO: 1200px para pantallas grandes */
  margin: 0 auto;                 /* 🎯 CENTRADO: Centra el contenido horizontalmente */
  padding: 0 var(--spacing-4);   /* 📏 RELLENO LATERAL: 16px a los lados en móviles */
}

.section {
  margin-bottom: var(--spacing-12); /* 📏 ESPACIO ENTRE SECCIONES: 48px entre secciones principales */
}

.section-title {
  font-size: var(--font-size-2xl);    /* 📰 TAMAÑO DE TÍTULO: 24px para títulos de sección */
  color: var(--foreground);          /* 📝 COLOR: Negro para texto principal */
  margin-bottom: var(--spacing-6);   /* 📏 ESPACIO INFERIOR: 24px debajo del título */
  border-bottom: 2px solid var(--cootravir-blue); /* 🔵 LÍNEA INFERIOR: Línea azul COOTRAVIR */
  padding-bottom: var(--spacing-2);  /* 📏 RELLENO INFERIOR: 8px entre texto y línea */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  transition: all var(--transition-base) var(--ease-out);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--cootravir-blue), var(--cootravir-gold));
  border-radius: 2px;
  transition: width var(--transition-base) var(--ease-out);
}

.section-title:hover::after {
  width: 100px;
}

.section-title i {
  font-size: var(--font-size-2xl);
  opacity: 0.8;
  transition: transform var(--transition-base) var(--ease-out);
}

.section-title:hover i {
  transform: scale(1.1) rotate(5deg);
}

.subsection-title {
  font-size: var(--font-size-xl);     /* 📄 TAMAÑO DE SUBTÍTULO: 20px para subtítulos */
  color: var(--foreground);          /* 📝 COLOR: Negro para texto principal */
  margin-bottom: var(--spacing-4);   /* 📏 ESPACIO INFERIOR: 16px debajo del subtítulo */
  position: relative;
  padding-left: var(--spacing-3);
  border-left: 3px solid var(--primary);
  transition: all var(--transition-base) var(--ease-out);
}

.subsection-title:hover {
  padding-left: var(--spacing-4);
  border-left-color: var(--cootravir-gold);
}

/* ========== 🏠 CABECERA DE PÁGINA ========== */
.header {
  background: linear-gradient(135deg, var(--cootravir-blue), var(--cootravir-blue-light));
  /* 🌈 FONDO GRADIENTE: Degradado diagonal de azul COOTRAVIR a azul claro */
  color: var(--foreground-inverse);        /* ⚪ TEXTO BLANCO: Texto blanco sobre fondo azul */
  padding: var(--spacing-6) 0;            /* 📏 RELLENO VERTICAL: 24px arriba y abajo */
  margin-bottom: var(--spacing-8);       /* 📏 MARGEN INFERIOR: 32px de separación con el contenido */
  backdrop-filter: blur(10px);           /* 🌫️ DESENFOQUE: Efecto de cristal esmerilado */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 📏 BORDE SUTIL: Línea blanca tenue */
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.header:hover::before {
  opacity: 1;
}

.header-content {
  display: flex;                          /* 📐 DISPLAY FLEX: Para alinear elementos horizontalmente */
  justify-content: space-between;        /* ↔️ ESPACIO ENTRE: Logo a la izquierda, controles a la derecha */
  align-items: center;                    /* 📏 ALINEACIÓN VERTICAL: Centra elementos verticalmente */
  gap: var(--spacing-4);                  /* 📏 ESPACIO ENTRE ELEMENTOS: 16px entre elementos */
}

.header-brand {
  flex: 1;                               /* 📐 CRECIMIENTO: Ocupa el espacio disponible */
}

.header-logo {
  display: flex;                          /* 📐 DISPLAY FLEX: Para alinear logo y texto */
  align-items: center;                    /* 📏 ALINEACIÓN VERTICAL: Centra elementos */
  gap: var(--spacing-3);                  /* 📏 ESPACIO ENTRE: 12px entre icono y texto */
}

.logo-icon {
  font-size: var(--font-size-2xl);        /* 🏷️ TAMAÑO GRANDE: 24px para el icono */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); /* 🌟 SOMBRA: Sombra sutil para profundidad */
  transition: transform var(--transition-base) var(--ease-out);
  display: inline-block;
}

.header-logo:hover .logo-icon {
  transform: scale(1.1) rotate(5deg);
}

.logo-text h1 {
  font-size: var(--font-size-xl);         /* 📰 TAMAÑO EXTRA GRANDE: 20px para título principal */
  margin: 0;                             /* 🚫 SIN MARGEN: Elimina márgenes automáticos */
  line-height: var(--line-height-tight); /* 📐 LÍNEA COMPACTA: Para títulos */
}

.logo-text p {
  font-size: var(--font-size-sm);        /* 📝 TAMAÑO PEQUEÑO: 14px para subtítulo */
  opacity: 0.9;                         /* 👻 TRANSPARENCIA: 90% de opacidad para efecto sutil */
  margin: 0;                             /* 🚫 SIN MARGEN: Elimina márgenes automáticos */
}

.header-actions {
  display: flex;                          /* 📐 DISPLAY FLEX: Para alinear controles */
  align-items: center;                    /* 📏 ALINEACIÓN VERTICAL: Centra elementos */
  gap: var(--spacing-2);                  /* 📏 ESPACIO ENTRE: 8px entre controles */
}

.header-nav {
  display: flex;                          /* 📐 DISPLAY FLEX: Para botones de navegación */
  gap: var(--spacing-1);                  /* 📏 ESPACIO ENTRE: 4px entre botones */
}

.header-controls {
  display: flex;                          /* 📐 DISPLAY FLEX: Para controles */
  align-items: center;                    /* 📏 ALINEACIÓN VERTICAL: Centra elementos */
  gap: var(--spacing-2);                  /* 📏 ESPACIO ENTRE: 8px entre controles */
}

/* ========== 📌 HEADER FIJO ========== */
/* Estilos para hacer el header estático (fijo en la parte superior) */
.header-fixed {
  position: fixed;                      /* 📌 POSICIÓN FIJA: Se mantiene en la parte superior */
  top: 0;                              /* 🔝 ARRIBA: Pegado al borde superior */
  left: 0;                             /* ⬅️ IZQUIERDA: Pegado al borde izquierdo */
  right: 0;                            /* ➡️ DERECHA: Se extiende hasta el borde derecho */
  z-index: 1000;                        /* 📚 Z-INDEX ALTO: Se mantiene por encima de otros elementos */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 🌫️ SOMBRA: Sombra sutil para separación visual */
}

/* Ajuste del contenido principal para compensar el header fijo */
body {
  padding-top: 120px;                   /* 📏 PADDING SUPERIOR: Espacio para el header fijo */
}

/* ========== 🌙 BOTÓN DE MODO OSCURO ========== */
.dark-mode-toggle {
  background: var(--cootravir-gold);      /* 🟡 FONDO DORADO: Color dorado COOTRAVIR */
  color: var(--cootravir-blue);          /* 🔵 TEXTO AZUL: Texto azul sobre dorado */
  border: none;                           /* 🚫 SIN BORDE: Elimina borde por defecto */
  padding: var(--spacing-2) var(--spacing-4); /* 📏 RELLENO: 8px vertical, 16px horizontal */
  border-radius: var(--radius-md);       /* 🔄 BORDES REDONDEADOS: 8px de radio */
  cursor: pointer;                        /* 👆 CURSOR MANO: Indica que es clickeable */
  transition: all var(--transition-base); /* ⏱️ TRANSICIÓN: Cambio suave de 200ms */
}

.dark-mode-toggle:hover {
  background: var(--cootravir-gold-light); /* 🟡 HOVER DORADO: Dorado más claro al pasar el mouse */
  transform: translateY(-1px);            /* ⬆️ ELEVACIÓN: Se eleva 1px para efecto de "flotación" */
}

/* ========== 📊 SISTEMA DE GRID ========== */
/* Sistema de cuadrícula para organizar elementos en filas y columnas */
.grid {
  display: grid;                    /* 📐 DISPLAY GRID: Activa el sistema de cuadrícula */
  gap: var(--spacing-4);           /* 📏 ESPACIO ENTRE ELEMENTOS: 16px entre elementos del grid */
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr); /* 📐 2 COLUMNAS: Dos columnas de igual tamaño */
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr); /* 📐 3 COLUMNAS: Tres columnas de igual tamaño */
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr); /* 📐 4 COLUMNAS: Cuatro columnas de igual tamaño */
}

/* ========== 📱 RESPONSIVE PARA MÓVILES ========== */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;     /* 📱 UNA COLUMNA: En móviles, todo se apila en una columna */
  }
  
  /* Header responsive */
  .header-content {
    flex-direction: column;         /* 📐 DIRECCIÓN COLUMNA: Apila elementos verticalmente */
    gap: var(--spacing-3);          /* 📏 ESPACIO ENTRE: 12px entre elementos */
  }
  
  .header-nav {
    display: none;                  /* 🚫 OCULTAR NAVEGACIÓN: Ocultar botones de navegación en móvil */
  }
  
  .logo-text h1 {
    font-size: var(--font-size-lg); /* 📄 TAMAÑO GRANDE: 18px para móvil */
  }
  
  .logo-text p {
    font-size: var(--font-size-xs); /* 🔤 TAMAÑO MUY PEQUEÑO: 12px para móvil */
  }
  
  /* Sidebar responsive */
  .sidebar {
    width: 100vw;                   /* 📱 ANCHO COMPLETO: Ocupa toda la pantalla en móvil */
    max-width: 320px;               /* 📏 ANCHO MÁXIMO: Máximo 320px */
  }
  
  .sidebar.collapsed {
    width: 100vw;                   /* 📱 ANCHO COMPLETO: También en móvil colapsado */
  }
  
  /* Cards responsive */
  .card {
    padding: var(--spacing-4);       /* 📏 RELLENO REDUCIDO: 16px en móvil */
  }
  
  /* Buttons responsive */
  .btn {
    padding: var(--spacing-3) var(--spacing-4); /* 📏 RELLENO AUMENTADO: Más fácil de tocar */
    font-size: var(--font-size-base); /* 📖 TAMAÑO NORMAL: 16px para mejor legibilidad */
  }
  
  /* Forms responsive */
  .form-group {
    margin-bottom: var(--spacing-6); /* 📏 ESPACIO AUMENTADO: 24px entre campos */
  }
  
  /* Tables responsive */
  .table {
    font-size: var(--font-size-sm);  /* 📝 TAMAÑO PEQUEÑO: 14px para tablas */
  }
  
  .table th,
  .table td {
    padding: var(--spacing-2) var(--spacing-3); /* 📏 RELLENO REDUCIDO: 8px vertical, 12px horizontal */
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .container {
    padding: 0 var(--spacing-3);    /* 📏 RELLENO REDUCIDO: 12px en pantallas muy pequeñas */
  }
  
  .section-title {
    font-size: var(--font-size-xl);  /* 📄 TAMAÑO EXTRA GRANDE: 20px para títulos */
  }
  
  .subsection-title {
    font-size: var(--font-size-lg);  /* 📄 TAMAÑO GRANDE: 18px para subtítulos */
  }
}

/* ========== 📄 SISTEMA DE TARJETAS ========== */
/* Tarjetas para mostrar contenido organizado en bloques */
.card {
  background: var(--card);                 /* 📄 FONDO BLANCO: Fondo blanco para la tarjeta */
  color: var(--card-foreground);          /* 📝 TEXTO NEGRO: Texto negro sobre fondo blanco */
  border: 1px solid var(--border);        /* 📏 BORDE SUTIL: Línea sutil alrededor de la tarjeta */
  border-radius: var(--radius-lg);        /* 🔄 ESQUINAS REDONDEADAS: 10px de radio para suavidad */
  padding: var(--card-padding);           /* 📏 RELLENO INTERNO: 24px de espacio interno */
  box-shadow: var(--elevation-card);       /* 🌟 SOMBRA SUTIL: Sombra ligera para elevar la tarjeta */
  transition: all var(--transition-base) var(--ease-out); /* ⏱️ TRANSICIÓN: Cambio suave al interactuar */
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cootravir-blue), var(--cootravir-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-lg);           /* 🌤️ SOMBRA MEDIA: Sombra más fuerte al pasar el mouse */
  transform: translateY(-3px);            /* ⬆️ ELEVACIÓN: Se eleva 3px para efecto de "flotación" */
  border-color: var(--border-medium);
}

.card:hover::before {
  transform: scaleX(1);
}

.card:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.card-header {
  margin-bottom: var(--spacing-4);        /* 📏 ESPACIO INFERIOR: 16px debajo del encabezado */
}

.card-title {
  font-size: var(--font-size-lg);        /* 📄 TAMAÑO GRANDE: 18px para títulos de tarjeta */
  margin-bottom: var(--spacing-2);       /* 📏 ESPACIO INFERIOR: 8px debajo del título */
}

.card-description {
  color: var(--foreground-secondary);     /* 📝 COLOR SECUNDARIO: Gris para descripción */
  font-size: var(--font-size-sm);        /* 📝 TAMAÑO PEQUEÑO: 14px para descripción */
}

/* ========== 🔘 SISTEMA DE BOTONES ========== */
/* Botones para acciones e interacciones del usuario */
.btn {
  display: inline-flex;                    /* 📐 DISPLAY FLEX: Para alinear iconos y texto */
  align-items: center;                     /* 📏 ALINEACIÓN VERTICAL: Centra elementos verticalmente */
  justify-content: center;                 /* 🎯 CENTRADO HORIZONTAL: Centra contenido horizontalmente */
  padding: var(--spacing-2) var(--spacing-4); /* 📏 RELLENO: 8px vertical, 16px horizontal */
  border-radius: var(--radius-md);         /* 🔄 ESQUINAS REDONDEADAS: 8px de radio */
  font-size: var(--font-size-sm);         /* 📝 TAMAÑO PEQUEÑO: 14px para texto del botón */
  text-decoration: none;                  /* 🚫 SIN DECORACIÓN: Elimina subrayado de enlaces */
  border: none;                           /* 🚫 SIN BORDE: Elimina borde por defecto */
  cursor: pointer;                        /* 👆 CURSOR MANO: Indica que es clickeable */
  transition: all var(--transition-base) var(--ease-out); /* ⏱️ TRANSICIÓN: Cambio suave */
  gap: var(--spacing-2);                  /* 📏 ESPACIO ENTRE ELEMENTOS: 8px entre icono y texto */
  position: relative;
  overflow: hidden;
  user-select: none;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width var(--transition-slow), height var(--transition-slow);
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: 2px solid var(--ring);        /* 🔵 ANILLO DE ENFOQUE: Línea azul de 2px cuando está enfocado */
  outline-offset: 2px;                    /* 📏 SEPARACIÓN DEL ANILLO: 2px de separación del botón */
}

/* ========== 🎨 VARIANTES DE BOTONES ========== */
.btn-primary {
  background: var(--primary);              /* 🔵 FONDO AZUL: Color azul COOTRAVIR principal */
  color: var(--primary-foreground);       /* ⚪ TEXTO BLANCO: Texto blanco sobre azul */
}

.btn-primary:hover {
  background: var(--primary-hover);       /* 🔵 HOVER AZUL: Azul más claro al pasar el mouse */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 36, 85, 0.3);
}

.btn-secondary {
  background: var(--secondary);            /* 🔘 FONDO GRIS: Color gris claro para secundario */
  color: var(--secondary-foreground);      /* 🔵 TEXTO AZUL: Texto azul sobre gris */
}

.btn-secondary:hover {
  background: var(--secondary-hover);      /* 🔘 HOVER GRIS: Gris más oscuro al pasar el mouse */
}

.btn-accent {
  background: var(--accent);               /* 🟡 FONDO DORADO: Color dorado COOTRAVIR */
  color: var(--accent-foreground);        /* 🔵 TEXTO AZUL: Texto azul sobre dorado */
}

.btn-accent:hover {
  background: var(--accent-hover);         /* 🟡 HOVER DORADO: Dorado más claro al pasar el mouse */
}

.btn-destructive {
  background: var(--destructive);          /* 🔴 FONDO ROJO: Color rojo para acciones peligrosas */
  color: var(--destructive-foreground);   /* ⚪ TEXTO BLANCO: Texto blanco sobre rojo */
}

.btn-destructive:hover {
  background: var(--destructive-hover);    /* 🔴 HOVER ROJO: Rojo más claro al pasar el mouse */
}

.btn-outline {
  background: transparent;                 /* 👻 FONDO TRANSPARENTE: Sin fondo, solo borde */
  border: 1px solid var(--border);        /* 📏 BORDE SUTIL: Línea sutil alrededor del botón */
  color: var(--foreground);               /* 📝 TEXTO NEGRO: Texto negro para contraste */
}

.btn-outline:hover {
  background: var(--muted);               /* 🔘 HOVER GRIS: Fondo gris claro al pasar el mouse */
}

.btn-ghost {
  background: transparent;                 /* 👻 FONDO TRANSPARENTE: Sin fondo ni borde */
  color: var(--foreground);               /* 📝 TEXTO NEGRO: Texto negro para contraste */
}

.btn-ghost:hover {
  background: var(--muted);               /* 🔘 HOVER GRIS: Fondo gris claro al pasar el mouse */
}

.btn-sm {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-lg);
}

/* ========== INPUTS ========== */
.input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-background);
  color: var(--foreground);
  font-size: var(--font-size-sm);
  transition: all var(--transition-base) var(--ease-out);
}

.input:hover {
  border-color: var(--border-medium);
}

.input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(14, 36, 85, 0.1);
  transform: translateY(-1px);
}

.input::placeholder {
  color: var(--input-placeholder);
}

.input:disabled {
  background: var(--input-disabled);
  cursor: not-allowed;
}

.label {
  display: block;
  margin-bottom: var(--spacing-2);
  color: var(--foreground);
}

.form-group {
  margin-bottom: var(--spacing-4);
}

/* ========== BADGES ========== */
.badge {
  display: inline-flex;
  align-items: center;
  height: var(--badge-height);
  padding: 0 var(--badge-padding-x);
  border-radius: var(--badge-border-radius);
  font-size: var(--font-size-xs);
}

.badge-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.badge-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.badge-accent {
  background: var(--accent);
  color: var(--accent-foreground);
}

.badge-success {
  background: var(--status-success);
  color: white;
}

.badge-warning {
  background: var(--status-warning);
  color: white;
}

.badge-error {
  background: var(--status-error);
  color: white;
}

/* ========== STATUS INDICATORS ========== */
.status-active {
  color: var(--security-active);
}

.status-warning {
  color: var(--security-warning);
}

.status-danger {
  color: var(--security-danger);
}

.status-inactive {
  color: var(--security-inactive);
}

.bg-status-active {
  background-color: var(--security-active);
}

.bg-status-warning {
  background-color: var(--security-warning);
}

.bg-status-danger {
  background-color: var(--security-danger);
}

.bg-status-inactive {
  background-color: var(--security-inactive);
}

/* ========== COLOR PALETTE ========== */
.color-swatch {
  width: 100%;
  height: 60px;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-sm);
}

.color-info {
  text-align: center;
}

.color-name {
  margin-bottom: var(--spacing-1);
}

.color-value {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--foreground-secondary);
}

/* ========== TYPOGRAPHY ========== */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }


/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fade-in {
  animation: fadeIn var(--transition-base) var(--ease-out);
}

.animate-slide-in-right {
  animation: slideInRight var(--transition-base) var(--ease-out);
}

.animate-slide-in-left {
  animation: slideInLeft var(--transition-base) var(--ease-out);
}

.animate-scale-in {
  animation: scaleIn var(--transition-base) var(--ease-out);
}

.animate-pulse {
  animation: pulse 2s var(--ease-in-out) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ========== SCROLLBARS ========== */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--background-secondary);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--muted-foreground);
  border-radius: var(--radius-sm);
  border: 2px solid var(--background-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--foreground-secondary);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--muted-foreground) var(--background-secondary);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 639px) {
  :root {
    --font-size: 14px;
    --spacing-section: var(--spacing-8);
  }
}

@media (min-width: 768px) {
  :root {
    --font-size: 16px;
  }
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --border: rgba(0, 0, 0, 0.3);
    --border-strong: rgba(0, 0, 0, 0.5);
    --foreground-secondary: #000000;
    --foreground-tertiary: #000000;
  }
  
  .dark {
    --border: rgba(255, 255, 255, 0.3);
    --border-strong: rgba(255, 255, 255, 0.5);
    --foreground-secondary: #ffffff;
    --foreground-tertiary: #ffffff;
  }
}

/* Focus styles for better accessibility */
.btn:focus-visible,
.input:focus-visible,
.select-input:focus-visible,
.checkbox-input:focus-visible,
.radio-input:focus-visible,
.toggle-input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }
  
  .card {
    border: 2px solid var(--border-strong);
  }
  
  .input {
    border: 2px solid var(--border-strong);
  }
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== UTILITIES ========== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

.p-2 { padding: var(--spacing-2); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.space-y-2 > * + * { margin-top: var(--spacing-2); }
.space-y-3 > * + * { margin-top: var(--spacing-3); }
.space-y-4 > * + * { margin-top: var(--spacing-4); }
.space-y-6 > * + * { margin-top: var(--spacing-6); }

.font-mono { font-family: var(--font-family-mono); }

/* ========== COOTRAVIR SPECIFIC ========== */
.bg-cootravir-blue { background-color: var(--cootravir-blue); }
.bg-cootravir-gold { background-color: var(--cootravir-gold); }
.bg-cootravir-blue-light { background-color: var(--cootravir-blue-light); }
.bg-cootravir-gold-light { background-color: var(--cootravir-gold-light); }

.bg-green-50 { background-color: #f0fdf4; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-yellow-50 { background-color: #fefce8; }

.border-green-500 { border-color: #22c55e; }
.border-blue-500 { border-color: #3b82f6; }
.border-gray-500 { border-color: #6b7280; }
.border-yellow-500 { border-color: #eab308; }

.text-green-800 { color: #166534; }
.text-blue-800 { color: #1e40af; }
.text-gray-800 { color: #1f2937; }
.text-yellow-800 { color: #854d0e; }

.text-green-700 { color: #15803d; }
.text-blue-700 { color: #1d4ed8; }
.text-gray-700 { color: #374151; }
.text-yellow-700 { color: #a16207; }

.text-green-500 { color: #22c55e; }

.bg-white { background-color: #ffffff; }
.border-gray-200 { border-color: #e5e7eb; }
.text-gray-900 { color: #111827; }

.text-cootravir-blue { color: var(--cootravir-blue); }
.text-cootravir-gold { color: var(--cootravir-gold); }

.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-blue-300 { background-color: #93c5fd; }
.bg-blue-400 { background-color: #60a5fa; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-green-500 { background-color: #22c55e; }
.bg-yellow-500 { background-color: #eab308; }
.bg-red-500 { background-color: #ef4444; }

.border-gray-300 { border-color: #d1d5db; }
.border-blue-400 { border-color: #60a5fa; }
.border-yellow-500 { border-color: #eab308; }

.text-gray-600 { color: #4b5563; }
.text-gray-800 { color: #1f2937; }
.text-blue-900 { color: #1e3a8a; }
.text-yellow-900 { color: #713f12; }
.text-white { color: #ffffff; }

.text-foreground { color: var(--foreground); }
.text-foreground-secondary { color: var(--foreground-secondary); }
.text-foreground-tertiary { color: var(--foreground-tertiary); }
.text-foreground-inverse { color: #ffffff !important; }

.text-status-success { color: var(--status-success); }
.text-status-warning { color: var(--status-warning); }
.text-status-error { color: var(--status-error); }
.text-status-info { color: var(--status-info); }

.border-cootravir-blue { border-color: var(--cootravir-blue); }
.border-cootravir-gold { border-color: var(--cootravir-gold); }

/* ========== RIPPLE EFFECT ========== */
.btn {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ========== COMPONENTES BASE ========== */

/* Icon */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1em;
}

.icon-sm { font-size: 0.875rem; }
.icon-base { font-size: 1rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.5rem; }
.icon-2xl { font-size: 2rem; }

/* Text */
.text {
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
}

.text-display {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
}

.text-heading-1 {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

.text-heading-2 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-snug);
}

.text-heading-3 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
}

.text-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.text-caption {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.text-overline {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Image */
.image {
  display: block;
  max-width: 100%;
  height: auto;
}

.image-rounded { border-radius: var(--radius); }
.image-circle { border-radius: 50%; }

/* Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  overflow: hidden;
}

.avatar-sm { width: 2rem; height: 2rem; font-size: var(--font-size-xs); }
.avatar-base { width: 2.5rem; height: 2.5rem; font-size: var(--font-size-sm); }
.avatar-lg { width: 3rem; height: 3rem; font-size: var(--font-size-base); }
.avatar-xl { width: 4rem; height: 4rem; font-size: var(--font-size-lg); }

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Divider */
.divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: var(--spacing-4) 0;
}

.divider-vertical {
  width: 1px;
  height: auto;
  margin: 0 var(--spacing-4);
}

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  position: absolute;
  background: var(--tooltip-background);
  color: var(--tooltip-foreground);
  padding: var(--tooltip-padding);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  z-index: var(--z-tooltip);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all var(--transition-base);
}

.tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tooltip-top .tooltip-content {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.tooltip-top:hover .tooltip-content {
  transform: translateX(-50%) translateY(0);
}

.tooltip-bottom .tooltip-content {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}

.tooltip-bottom:hover .tooltip-content {
  transform: translateX(-50%) translateY(0);
}

.tooltip-left .tooltip-content {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}

.tooltip-left:hover .tooltip-content {
  transform: translateY(-50%) translateX(0);
}

.tooltip-right .tooltip-content {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

.tooltip-right:hover .tooltip-content {
  transform: translateY(-50%) translateX(0);
}

/* Spinner / Loader */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--muted);
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-sm { width: 0.75rem; height: 0.75rem; }
.spinner-lg { width: 1.5rem; height: 1.5rem; }
.spinner-xl { width: 2rem; height: 2rem; }

/* Progress Bar */
.progress {
  width: 100%;
  height: 0.5rem;
  background: var(--muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.progress-sm { height: 0.25rem; }
.progress-lg { height: 0.75rem; }

.progress-success .progress-bar { background: var(--status-success); }
.progress-warning .progress-bar { background: var(--status-warning); }
.progress-error .progress-bar { background: var(--status-error); }

/* ========== COMPONENTES DE NAVEGACIÓN ========== */

/* Navbar / AppBar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  font-size: var(--font-size-xl);
  color: var(--foreground);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.navbar-link {
  color: var(--foreground-secondary);
  text-decoration: none;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.navbar-link:hover {
  color: var(--foreground);
  background: var(--muted);
}

.navbar-link.active {
  color: var(--primary);
  background: var(--primary);
  background: rgba(30, 58, 95, 0.1);
}

/* Sidebar / Drawer */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  transition: transform var(--transition-base), width var(--transition-base);
  transform: translateX(-100%);
  backdrop-filter: blur(10px);           /* 🌫️ DESENFOQUE: Efecto de cristal esmerilado */
  box-shadow: var(--shadow-xl);          /* 🌟 SOMBRA: Sombra fuerte para separación */
  display: flex;                         /* 📐 DISPLAY FLEX: Para estructura vertical */
  flex-direction: column;               /* 📐 DIRECCIÓN: Columna para header, nav, footer */
}

.sidebar.sidebar-open {
  transform: translateX(0);
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar.collapsed .sidebar-text {
  opacity: 0;
  visibility: hidden;
}

.sidebar-text {
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.sidebar-brand {
  display: flex;                         /* 📐 DISPLAY FLEX: Para alinear logo y texto */
  align-items: center;                   /* 📏 ALINEACIÓN VERTICAL: Centra elementos */
  gap: var(--spacing-2);                 /* 📏 ESPACIO ENTRE: 8px entre icono y texto */
}

.sidebar-section {
  margin-bottom: var(--spacing-4);        /* 📏 MARGEN INFERIOR: 16px entre secciones */
}

.sidebar-section-title {
  display: flex;                          /* 📐 DISPLAY FLEX: Para alinear icono y texto */
  align-items: center;                    /* 📏 ALINEACIÓN VERTICAL: Centra elementos */
  gap: var(--spacing-2);                  /* 📏 ESPACIO ENTRE: 8px entre icono y texto */
  padding: var(--spacing-2) var(--spacing-3); /* 📏 RELLENO: 8px vertical, 12px horizontal */
  font-size: var(--font-size-xs);        /* 🔤 TAMAÑO MUY PEQUEÑO: 12px para títulos de sección */
 /* 💪 SEMI-NEGRITA: Para destacar */
  color: var(--foreground-tertiary);      /* 📝 COLOR TERCIARIO: Gris para títulos */
  text-transform: uppercase;              /* 📝 MAYÚSCULAS: Para estilo de categoría */
  letter-spacing: 0.05em;                /* 📏 ESPACIADO: Para legibilidad */
  border-bottom: 1px solid var(--border-light); /* 📏 BORDE INFERIOR: Línea sutil */
  margin-bottom: var(--spacing-2);        /* 📏 MARGEN INFERIOR: 8px debajo del título */
}

.sidebar-footer {
  margin-top: auto;                       /* 📐 MARGEN AUTOMÁTICO: Empuja hacia abajo */
  padding: var(--spacing-4);              /* 📏 RELLENO: 16px alrededor */
  border-top: 1px solid var(--border-light); /* 📏 BORDE SUPERIOR: Línea sutil */
}

.sidebar-info {
  display: flex;                          /* 📐 DISPLAY FLEX: Para alinear icono y texto */
  align-items: center;                    /* 📏 ALINEACIÓN VERTICAL: Centra elementos */
  gap: var(--spacing-2);                  /* 📏 ESPACIO ENTRE: 8px entre icono y texto */
  font-size: var(--font-size-xs);        /* 🔤 TAMAÑO MUY PEQUEÑO: 12px para información */
  color: var(--foreground-tertiary);      /* 📝 COLOR TERCIARIO: Gris para información */
}

.sidebar-close {
  margin-left: auto;                      /* 📐 MARGEN IZQUIERDO: Empuja hacia la derecha */
}

.sidebar-header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-nav {
  padding: var(--spacing-4);
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-1);
  border-radius: var(--radius-md);
  color: var(--sidebar-foreground);
  text-decoration: none;
  transition: all var(--transition-base) var(--ease-out);
  position: relative;
}

.sidebar-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
  transition: height var(--transition-base) var(--ease-out);
}

.sidebar-item:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  padding-left: var(--spacing-4);
}

.sidebar-item:hover::before {
  height: 60%;
}

.sidebar-item.active {
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
  padding-left: var(--spacing-4);
}

.sidebar-item.active::before {
  height: 100%;
}

.sidebar-icon {
  margin-right: var(--spacing-3);
  width: 1.25rem;
  height: 1.25rem;
}

/* Sidebar Demo - Para mostrar en la documentación */
.sidebar-demo {
  width: var(--sidebar-width);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform var(--transition-base), width var(--transition-base);
  transform: translateX(-100%);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}

.sidebar-demo.sidebar-open {
  transform: translateX(0);
}

.sidebar-demo.collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar-demo.collapsed .sidebar-text {
  opacity: 0;
  visibility: hidden;
}

.sidebar-demo .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-demo .sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.sidebar-demo .logo-icon {
  font-size: var(--font-size-lg);
}

/* Tabs */
.tabs {
  border-bottom: 1px solid var(--border);
}

.tabs-nav {
  display: flex;
  gap: var(--spacing-2);
}

.tab {
  padding: var(--spacing-3) var(--spacing-4);
  border: none;
  background: transparent;
  color: var(--foreground-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-base);
}

.tab:hover {
  color: var(--foreground);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-content {
  padding: var(--spacing-6);
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.breadcrumb-item {
  color: var(--foreground-secondary);
  text-decoration: none;
}

.breadcrumb-item:hover {
  color: var(--primary);
}

.breadcrumb-separator {
  color: var(--foreground-tertiary);
}

.breadcrumb-current {
  color: var(--foreground);
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: var(--spacing-2) 0;
  z-index: var(--z-fixed);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-2);
  color: var(--foreground-secondary);
  text-decoration: none;
  font-size: var(--font-size-xs);
  transition: all var(--transition-base);
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: var(--primary);
}

.bottom-nav-icon {
  margin-bottom: var(--spacing-1);
  width: 1.25rem;
  height: 1.25rem;
}

/* Stepper / Wizard */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--spacing-6) 0;
  padding: var(--spacing-4) 0;
  position: relative;
}

.step {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}

.step:last-child {
  flex: 0;
}

.step-number {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: 600;
  background: #6b7280;
  color: white;
  border: none;
  transition: all var(--transition-base);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step.active .step-number {
  background: #3b82f6;
  color: white;
  border: none;
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.step.completed .step-number {
  background: #22c55e;
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.step-label {
  margin-left: var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.step.active .step-label {
  color: #94a3b8;
}

.step.completed .step-label {
  color: white;
}

.step-line {
  position: absolute;
  top: 50%;
  left: calc(2.5rem + var(--spacing-4));
  width: calc(100% - 2.5rem - var(--spacing-4));
  height: 3px;
  background: #374151;
  z-index: 0;
  transform: translateY(-50%);
  transition: background-color var(--transition-base);
  border-radius: 2px;
}

.step:last-child .step-line {
  display: none;
}

.step.completed .step-line {
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.3);
}

.step.active .step-line {
  background: #374151;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  text-decoration: none;
  transition: all var(--transition-base);
}

.pagination-item:hover {
  background: var(--muted);
  border-color: var(--primary);
}

.pagination-item.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.pagination-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== COMPONENTES DE FORMULARIOS ========== */

/* Textarea */
.textarea {
  width: 100%;
  padding: var(--spacing-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-background);
  color: var(--foreground);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  resize: vertical;
  min-height: 6rem;
  transition: all var(--transition-base);
}

.textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
}

.textarea::placeholder {
  color: var(--input-placeholder);
}

.textarea:disabled {
  background: var(--input-disabled);
  cursor: not-allowed;
}

/* Checkbox */
.checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.checkbox-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-background);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-base);
}

.checkbox-input:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.checkbox-input:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: var(--font-size-xs);
}

.checkbox-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

.checkbox-label {
  color: var(--foreground);
}

/* Radio Button */
.radio {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.radio-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--input-background);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-base);
}

.radio-input:checked {
  border-color: var(--primary);
}

.radio-input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--primary);
  border-radius: 50%;
}

.radio-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

.radio-label {
  color: var(--foreground);
}

/* Select / Dropdown */
.select {
  position: relative;
  width: 100%;
}

.select-input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  padding-right: 2.5rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-background);
  color: var(--foreground);
  font-size: var(--font-size-sm);
  cursor: pointer;
  appearance: none;
  transition: all var(--transition-base);
}

.select-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
}

.select-arrow {
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  color: var(--foreground-secondary);
}

/* Toggle / Switch */
.toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.toggle-input {
  position: relative;
  width: 3rem;
  height: 1.5rem;
  background: var(--switch-background);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
}

.toggle-input:checked {
  background: var(--switch-checked);
}

.toggle-thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.toggle-input:checked .toggle-thumb {
  transform: translateX(1.5rem);
}

.toggle-label {
  color: var(--foreground);
}

/* DatePicker */
.datepicker {
  position: relative;
}

.datepicker-input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-background);
  color: var(--foreground);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

.datepicker-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
}

/* TimePicker */
.timepicker {
  position: relative;
}

.timepicker-input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-background);
  color: var(--foreground);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

.timepicker-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
}

/* Range Slider */
.range-slider {
  width: 100%;
  height: 0.5rem;
  background: var(--muted);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
  appearance: none;
}

.range-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.range-slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-sm);
}

/* File Upload */
.file-upload {
  position: relative;
  display: inline-block;
  width: 100%;
}

.file-upload-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-8);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--foreground-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.file-upload-label:hover {
  border-color: var(--primary);
  background: rgba(30, 58, 95, 0.05);
}

.file-upload-label.dragover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  transform: scale(1.02);
}

.file-upload-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--spacing-2);
  color: var(--foreground-tertiary);
}

.file-upload-text {
  margin-bottom: var(--spacing-1);
}

.file-upload-hint {
  font-size: var(--font-size-xs);
  color: var(--foreground-tertiary);
}

/* OTP Input */
.otp-input {
  display: flex;
  gap: var(--spacing-2);
  justify-content: center;
}

.otp-digit {
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--input-background);
  color: var(--foreground);
  font-size: var(--font-size-lg);
  text-align: center;
  transition: all var(--transition-base);
}

.otp-digit:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
}

/* Search Bar */
.search-bar {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  padding-left: 2.5rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-background);
  color: var(--foreground);
  font-size: var(--font-size-sm);
  transition: all var(--transition-base);
}

.search-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--ring);
}

.search-icon {
  position: absolute;
  left: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--foreground-secondary);
}

/* ========== COMPONENTES DE VISUALIZACIÓN DE DATOS ========== */

/* Table */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table th,
.table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.table th {
  background: var(--muted);
  color: var(--foreground);
  font-size: var(--font-size-sm);
}

.table td {
  color: var(--foreground-secondary);
  font-size: var(--font-size-sm);
}

.table tbody tr:hover {
  background: var(--muted);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* DataGrid / List */
.datagrid {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.datagrid-header {
  padding: var(--spacing-4);
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}

.datagrid-title {
  font-size: var(--font-size-lg);
  color: var(--foreground);
}

.datagrid-content {
  max-height: 20rem;
  overflow-y: auto;
}

.datagrid-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-base);
}

.datagrid-item:hover {
  background: var(--muted);
}

.datagrid-item:last-child {
  border-bottom: none;
}

/* Accordion */
.accordion {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-trigger {
  width: 100%;
  padding: var(--spacing-4);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--foreground);
  transition: background var(--transition-base);
}

.accordion-trigger:hover {
  background: var(--muted);
}

.accordion-icon {
  transition: transform var(--transition-base);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--spacing-4);
  color: var(--foreground-secondary);
  line-height: var(--line-height-relaxed);
  transition: max-height var(--transition-base) var(--ease-in-out), 
              padding var(--transition-base) var(--ease-in-out);
}

/* Carousel / Slider */
.carousel {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.carousel-container {
  position: relative;
  display: flex;
  transition: transform var(--transition-slow);
}

.carousel-slide {
  min-width: 100%;
  background: var(--card);
  padding: var(--spacing-8);
  text-align: center;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.carousel-slide.active {
  display: flex;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
}

.carousel-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.carousel-nav.prev {
  left: var(--spacing-4);
}

.carousel-nav.next {
  right: var(--spacing-4);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
}

.carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base);
}

.carousel-dot.active {
  background: var(--primary);
}

/* Chart */
.chart {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-sm);
}

.chart-header {
  margin-bottom: var(--spacing-4);
}

.chart-title {
  font-size: var(--font-size-lg);
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

.chart-subtitle {
  color: var(--foreground-secondary);
  font-size: var(--font-size-sm);
}

.chart-container {
  height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  border-radius: var(--radius-md);
  color: var(--foreground-secondary);
}

/* Tag / Chip */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  gap: var(--spacing-1);
}

.tag-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.tag-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.tag-success {
  background: var(--status-success);
  color: white;
}

.tag-warning {
  background: var(--status-warning);
  color: white;
}

.tag-error {
  background: var(--status-error);
  color: white;
}

.tag-removable {
  padding-right: var(--spacing-1);
}

.tag-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: var(--spacing-1);
  opacity: 0.7;
  transition: opacity var(--transition-base);
}

.tag-remove:hover {
  opacity: 1;
}

/* Empty State / Placeholder */
.empty-state {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
  color: var(--foreground-secondary);
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--spacing-4);
  color: var(--foreground-tertiary);
}

.empty-state-title {
  font-size: var(--font-size-lg);
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

.empty-state-description {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-6);
}

/* ========== COMPONENTES DE LAYOUT ========== */

/* Grid System */
.grid-system {
  display: grid;
  gap: var(--spacing-4);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 768px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
    grid-template-columns: 1fr;
  }
}

/* Flex Layout */
.flex-layout {
  display: flex;
  gap: var(--spacing-4);
}

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

/* Container */
.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-4);
}

.container-sm {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.container-md {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.container-lg {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.container-xl {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

/* Section / Block */
.section-block {
  padding: var(--spacing-8) 0;
}

.section-block-sm {
  padding: var(--spacing-4) 0;
}

.section-block-lg {
  padding: var(--spacing-12) 0;
}

.section-block-xl {
  padding: var(--spacing-16) 0;
}

/* Modal / Dialog */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-dialog);
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn var(--transition-base) var(--ease-out);
}

.modal-header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: var(--font-size-lg);
  color: var(--foreground);
}

.modal-close {
  background: none;
  border: none;
  color: var(--foreground-secondary);
  cursor: pointer;
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.modal-close:hover {
  background: var(--muted);
  color: var(--foreground);
}

.modal-body {
  padding: var(--spacing-6);
}

.modal-footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

/* Drawer / Sheet */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24rem;
  background: var(--card);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--transition-base);
}

.drawer.open {
  transform: translateX(0);
}

.drawer-header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-title {
  font-size: var(--font-size-lg);
  color: var(--foreground);
}

.drawer-body {
  padding: var(--spacing-6);
  flex: 1;
  overflow-y: auto;
}

.drawer-footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--border);
}

/* Tabs Container */
.tabs-container {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.tabs-container .tabs-nav {
  background: var(--muted);
  padding: 0 var(--spacing-4);
}

.tabs-container .tab {
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-right: var(--spacing-1);
}

.tabs-container .tab.active {
  background: var(--card);
  border-bottom: 1px solid var(--card);
}

/* Scroll Container */
.scroll-container {
  max-height: 20rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.scroll-container::-webkit-scrollbar {
  width: 8px;
}

.scroll-container::-webkit-scrollbar-track {
  background: var(--muted);
}

.scroll-container::-webkit-scrollbar-thumb {
  background: var(--foreground-tertiary);
  border-radius: var(--radius-sm);
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--foreground-secondary);
}

/* ========== COMPONENTES DE FEEDBACK ========== */

/* Toast / Snackbar */
.toast {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-4);
  max-width: 24rem;
  z-index: var(--z-tooltip);
  animation: slideInRight var(--transition-base) var(--ease-out);
}

.toast-success {
  border-left: 4px solid var(--status-success);
}

.toast-warning {
  border-left: 4px solid var(--status-warning);
}

.toast-error {
  border-left: 4px solid var(--status-error);
}

.toast-info {
  border-left: 4px solid var(--status-info);
}

.toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.toast-title {
  color: var(--foreground);
  font-size: var(--font-size-sm);
}

.toast-close {
  background: none;
  border: none;
  color: var(--foreground-secondary);
  cursor: pointer;
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.toast-close:hover {
  background: var(--muted);
  color: var(--foreground);
}

.toast-message {
  color: var(--foreground-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* Alert / Notification */
.alert {
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid;
  margin-bottom: var(--spacing-4);
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--status-success);
  color: var(--status-success);
}

.alert-warning {
  background: rgba(234, 179, 8, 0.1);
  border-color: var(--status-warning);
  color: var(--status-warning);
}

.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--status-error);
  color: var(--status-error);
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--status-info);
  color: var(--status-info);
}

.alert-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.alert-icon {
  margin-right: var(--spacing-2);
  font-size: var(--font-size-lg);
}

.alert-title {
  font-size: var(--font-size-sm);
}

.alert-message {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* Confirm Dialog */
.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
}

.confirm-dialog-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.confirm-dialog-content {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-dialog);
  max-width: 24rem;
  width: 100%;
  animation: scaleIn var(--transition-base) var(--ease-out);
}

.confirm-dialog-header {
  padding: var(--spacing-6);
  text-align: center;
}

.confirm-dialog-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--spacing-4);
  color: var(--status-warning);
}

.confirm-dialog-title {
  font-size: var(--font-size-lg);
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

.confirm-dialog-message {
  color: var(--foreground-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.confirm-dialog-footer {
  padding: var(--spacing-6);
  display: flex;
  gap: var(--spacing-3);
  justify-content: center;
}

/* Skeleton Loader */
.skeleton {
  background: linear-gradient(90deg, var(--muted) 25%, var(--background-secondary) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-text {
  height: 1rem;
  margin-bottom: var(--spacing-2);
}

.skeleton-text:last-child {
  margin-bottom: 0;
  width: 60%;
}

.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.skeleton-button {
  height: 2.5rem;
  width: 6rem;
}

.skeleton-card {
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* Shimmer Effect */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ========== COMPONENTES DE USUARIO ========== */

/* User Card */
.user-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.user-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.user-card-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.user-card-avatar {
  margin-right: var(--spacing-3);
}

.user-card-info h3 {
  font-size: var(--font-size-lg);
  color: var(--foreground);
  margin-bottom: var(--spacing-1);
}

.user-card-info p {
  color: var(--foreground-secondary);
  font-size: var(--font-size-sm);
}

.user-card-actions {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

/* Profile Card */
.profile-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

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

.profile-card-header {
  background: linear-gradient(135deg, var(--cootravir-blue), var(--cootravir-blue-light));
  padding: var(--spacing-8) var(--spacing-6) var(--spacing-6);
  text-align: center;
  color: white;
}

.profile-card-avatar {
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--spacing-3);
  border: 3px solid white;
}

.profile-card-name {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-1);
}

.profile-card-role {
  opacity: 0.9;
  font-size: var(--font-size-sm);
}

.profile-card-body {
  padding: var(--spacing-6);
}

.profile-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.profile-stat {
  text-align: center;
}

.profile-stat-value {
  font-size: var(--font-size-lg);
  color: var(--foreground);
  margin-bottom: var(--spacing-1);
}

.profile-stat-label {
  font-size: var(--font-size-xs);
  color: var(--foreground-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Login Form */
.login-form {
  max-width: 24rem;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-8);
  box-shadow: var(--shadow-lg);
}

.login-form-header {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.login-form-title {
  font-size: var(--font-size-2xl);
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

.login-form-subtitle {
  color: var(--foreground-secondary);
  font-size: var(--font-size-sm);
}

.login-form-body {
  margin-bottom: var(--spacing-6);
}

.login-form-footer {
  text-align: center;
}

.login-form-link {
  color: var(--primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-base);
}

.login-form-link:hover {
  color: var(--primary-hover);
}

/* ========== COMPONENTES DE COMERCIO ========== */

/* Product Card */
.product-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card-image {
  width: 100%;
  height: 12rem;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground-tertiary);
  font-size: var(--font-size-2xl);
}

.product-card-body {
  padding: var(--spacing-4);
}

.product-card-title {
  font-size: var(--font-size-lg);
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

.product-card-description {
  color: var(--foreground-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-relaxed);
}

.product-card-price {
  font-size: var(--font-size-xl);
  color: var(--primary);
  margin-bottom: var(--spacing-4);
}

.product-card-actions {
  display: flex;
  gap: var(--spacing-2);
}

/* Cart */
.cart {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cart-header {
  padding: var(--spacing-4);
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}

.cart-title {
  font-size: var(--font-size-lg);
  color: var(--foreground);
}

.cart-items {
  max-height: 20rem;
  overflow-y: auto;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--border);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-image {
  width: 3rem;
  height: 3rem;
  background: var(--muted);
  border-radius: var(--radius-md);
  margin-right: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground-tertiary);
}

.cart-item-info {
  flex: 1;
}

.cart-item-name {
  color: var(--foreground);
  margin-bottom: var(--spacing-1);
}

.cart-item-price {
  color: var(--foreground-secondary);
  font-size: var(--font-size-sm);
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 var(--spacing-4);
}

.cart-quantity-btn {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  background: var(--input-background);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

.cart-quantity-btn:hover {
  background: var(--muted);
}

.cart-footer {
  padding: var(--spacing-4);
  border-top: 1px solid var(--border);
  background: var(--muted);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
  color: var(--foreground);
}

.cart-actions {
  display: flex;
  gap: var(--spacing-3);
}

/* Rating */
.rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.rating-star {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
  transition: color var(--transition-base);
  cursor: pointer;
}

.rating-star.active {
  color: var(--cootravir-gold);
}

.rating-star:hover {
  color: var(--cootravir-gold);
}

.rating-text {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--foreground-secondary);
}

/* ========== FONT AWESOME ICONS ========== */
/* Estilos para asegurar que los iconos de Font Awesome se vean correctamente */
.logo-icon,
.sidebar-icon,
.alert-icon,
.search-icon,
.confirm-dialog-icon,
.icon i,
.section-title i {
  display: inline-block;
}

.icon i {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title i {
  margin-right: var(--spacing-2);
}

/* ========== ANIMACIONES Y EFECTOS MEJORADOS ========== */

/* Animaciones de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes spin {
  to { 
    transform: rotate(360deg); 
  }
}

/* Aplicar animaciones a elementos */
.section {
  animation: fadeInUp 0.6s var(--ease-out) backwards;
}

.card {
  animation: fadeInUp 0.5s var(--ease-out) backwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

/* Loading states */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

/* Mejoras de accesibilidad */
*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Navegación con teclado */
body.keyboard-navigation *:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

body:not(.keyboard-navigation) *:focus:not(:focus-visible) {
  outline: none;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Mejoras de rendimiento */
.card,
.btn,
.sidebar-item,
.input {
  will-change: transform;
}

/* Mejoras de hover para dispositivos táctiles */
/* Los efectos hover se aplican automáticamente en dispositivos con mouse */

/* Mejoras de impresión */
@media print {
  .header,
  .sidebar,
  .header-controls,
  .btn {
    display: none !important;
  }
  
  .card {
    box-shadow: none !important;
    border: 1px solid #000 !important;
    page-break-inside: avoid;
  }
  
  .section {
    page-break-before: always;
  }
}

/* Mejoras de contraste para modo de alto contraste */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid var(--foreground);
  }
  
  .btn {
    border: 2px solid currentColor;
  }
  
  .input {
    border: 2px solid var(--foreground);
  }
}

/* Mejoras de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}