/* ============================================
   SISTEMA VISUAL PREMIUM - ESTILO APPLE
   Jerarquía Visual Clara | Modo Claro y Oscuro
   ============================================ */

:root {
    /* ===== MODO CLARO (Light Mode) - Estilo Apple ===== */
    
    /* JERARQUÍA DE FONDOS (3 niveles como Apple) */
    --bg-base: 245 245 247;              /* #f5f5f7 - Fondo base estilo Apple (gris muy claro) */
    --bg-elevated: 255 255 255;          /* #ffffff - Tarjetas elevadas (blanco puro) */
    --bg-elevated-hover: 250 250 250;    /* #fafafa - Hover sobre tarjetas */
    --bg-modal: 255 255 255;             /* #ffffff - Modales (máxima elevación) */
    --bg-secondary: 246 246 248;         /* #f6f6f8 - Fondos secundarios */
    
    /* TEXTOS (Jerarquía tipográfica Apple) */
    --text-primary: 29 29 31;            /* #1d1d1f - Negro Apple (no es puro) */
    --text-secondary: 134 134 139;       /* #86868b - Gris Apple secundario */
    --text-tertiary: 174 174 178;        /* #aeaeb2 - Gris Apple terciario */
    --text-inverse: 255 255 255;         /* #ffffff - Texto sobre oscuro */
    
    /* BORDES CON TRANSPARENCIA (Estilo Apple) */
    --border-color: rgba(0, 0, 0, 0.1);          /* Negro 10% - Sutil pero visible */
    --border-color-medium: rgba(0, 0, 0, 0.15);  /* Negro 15% - Medio */
    --border-color-strong: rgba(0, 0, 0, 0.2);   /* Negro 20% - Fuerte */
    --border-focus: 0 122 255;                    /* #007aff - Azul Apple */
    
    /* DIVISORES (Líneas sutiles) */
    --divider-light: rgba(0, 0, 0, 0.08);        /* Muy sutil */
    --divider-medium: rgba(0, 0, 0, 0.12);       /* Mediano */
    
    /* OVERLAYS Y CAPAS */
    --overlay: rgba(0, 0, 0, 0.4);               /* Backdrop oscuro */
    --overlay-light: rgba(0, 0, 0, 0.1);         /* Overlay sutil */
    
    /* SOMBRAS MULTICAPA ESTILO APPLE */
    --shadow-sm: 
        0 1px 1px rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.04);
    
    --shadow-md: 
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.06),
        0 8px 16px rgba(0, 0, 0, 0.08);
    
    --shadow-lg: 
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.08),
        0 16px 32px rgba(0, 0, 0, 0.12);
    
    --shadow-xl: 
        0 8px 16px rgba(0, 0, 0, 0.08),
        0 16px 32px rgba(0, 0, 0, 0.12),
        0 32px 64px rgba(0, 0, 0, 0.16);
    
    /* COLORES DE MARCA (Estilo Apple) */
    --primary: 0 122 255;                /* #007aff - Azul Apple */
    --primary-hover: 0 102 220;          /* Azul hover */
    --primary-light: 230 243 255;        /* Azul claro */
    
    --secondary: 52 199 89;              /* #34c759 - Verde Apple */
    --secondary-hover: 40 180 74;        /* Verde hover */
    --secondary-light: 234 249 239;      /* Verde claro */
    
    /* ESTADOS (Apple System Colors) */
    --success: 52 199 89;                /* Verde */
    --success-light: 234 249 239;
    --warning: 255 204 0;                /* Amarillo Apple */
    --warning-light: 255 248 230;
    --danger: 255 59 48;                 /* Rojo Apple */
    --danger-light: 255 239 238;
    --info: 0 122 255;                   /* Azul Apple */
    --info-light: 230 243 255;
}

.dark {
    /* ===== MODO OSCURO (Dark Mode) - Estilo Apple ===== */
    
    /* JERARQUÍA DE FONDOS (3 niveles oscuros) */
    --bg-base: 0 0 0;                    /* #000000 - Negro puro Apple */
    --bg-elevated: 28 28 30;             /* #1c1c1e - Tarjetas elevadas */
    --bg-elevated-hover: 38 38 40;       /* #262628 - Hover sobre tarjetas */
    --bg-modal: 44 44 46;                /* #2c2c2e - Modales (máxima elevación) */
    --bg-secondary: 18 18 20;            /* #121214 - Fondos secundarios */
    
    /* TEXTOS (Jerarquía oscura Apple) */
    --text-primary: 255 255 255;         /* #ffffff - Blanco puro */
    --text-secondary: 152 152 157;       /* #98989d - Gris Apple secundario oscuro */
    --text-tertiary: 99 99 102;          /* #636366 - Gris Apple terciario oscuro */
    --text-inverse: 0 0 0;               /* #000000 - Texto sobre claro */
    
    /* BORDES CON TRANSPARENCIA (Más sutiles en oscuro) */
    --border-color: rgba(255, 255, 255, 0.1);         /* Blanco 10% */
    --border-color-medium: rgba(255, 255, 255, 0.15); /* Blanco 15% */
    --border-color-strong: rgba(255, 255, 255, 0.2);  /* Blanco 20% */
    --border-focus: 10 132 255;                        /* Azul Apple más claro */
    
    /* DIVISORES (Líneas sutiles oscuras) */
    --divider-light: rgba(255, 255, 255, 0.08);       /* Muy sutil */
    --divider-medium: rgba(255, 255, 255, 0.12);      /* Mediano */
    
    /* OVERLAYS Y CAPAS */
    --overlay: rgba(0, 0, 0, 0.6);                    /* Backdrop más oscuro */
    --overlay-light: rgba(255, 255, 255, 0.05);       /* Overlay sutil claro */
    
    /* SOMBRAS MULTICAPA (Más sutiles en oscuro) */
    --shadow-sm: 
        0 1px 1px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.25);
    
    --shadow-md: 
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.35);
    
    --shadow-lg: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.35),
        0 16px 32px rgba(0, 0, 0, 0.4);
    
    --shadow-xl: 
        0 8px 16px rgba(0, 0, 0, 0.35),
        0 16px 32px rgba(0, 0, 0, 0.4),
        0 32px 64px rgba(0, 0, 0, 0.5);
    
    /* COLORES DE MARCA (Ajustados para oscuro) */
    --primary: 10 132 255;               /* Azul Apple más claro */
    --primary-hover: 64 156 255;         /* Azul hover más claro */
    --primary-light: 0 40 90;            /* Azul oscuro */
    
    --secondary: 48 209 88;              /* Verde Apple claro */
    --secondary-hover: 80 220 115;       /* Verde hover claro */
    --secondary-light: 20 65 35;         /* Verde oscuro */
    
    /* ESTADOS (Ajustados para oscuro) */
    --success: 48 209 88;
    --success-light: 20 65 35;
    --warning: 255 214 10;               /* Amarillo más claro */
    --warning-light: 80 65 0;
    --danger: 255 69 58;                 /* Rojo Apple claro */
    --danger-light: 90 25 20;
    --info: 10 132 255;
    --info-light: 0 40 90;
}

/* ============================================
   CLASES UTILITARIAS ESTILO APPLE
   ============================================ */

/* === FONDOS CON JERARQUÍA VISUAL === */

.bg-app {
    background-color: rgb(var(--bg-base));
}

.bg-card {
    background-color: rgb(var(--bg-elevated));
}

.bg-card-hover:hover {
    background-color: rgb(var(--bg-elevated-hover));
}

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

.bg-secondary {
    background-color: rgb(var(--bg-secondary));
}

/* === TEXTOS CON JERARQUÍA === */

.text-app {
    color: rgb(var(--text-primary));
}

.text-secondary {
    color: rgb(var(--text-secondary));
}

.text-tertiary {
    color: rgb(var(--text-tertiary));
}

.text-inverse {
    color: rgb(var(--text-inverse));
}

/* === BORDES CON TRANSPARENCIA === */

.border-app {
    border-color: var(--border-color);
}

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

.border-app-strong {
    border-color: var(--border-color-strong);
}

.divide-app > * + * {
    border-color: var(--divider-medium);
}

.divide-app-light > * + * {
    border-color: var(--divider-light);
}

/* === INPUTS ESTILO APPLE === */

.input-app {
    background-color: rgb(var(--bg-elevated));
    border: 1px solid var(--border-color-medium);
    color: rgb(var(--text-primary));
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.input-app:focus {
    outline: none;
    border-color: rgb(var(--border-focus));
    box-shadow: 
        0 0 0 4px rgba(var(--border-focus), 0.1),
        var(--shadow-sm);
}

.input-app::placeholder {
    color: rgb(var(--text-tertiary));
}

/* === CARDS ESTILO APPLE === */

.card-app {
    background-color: rgb(var(--bg-elevated));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-app:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-medium);
}

.card-app-borderless {
    background-color: rgb(var(--bg-elevated));
    border: none;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-app-borderless:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* === BOTONES ESTILO APPLE === */

.btn-primary {
    background-color: rgb(var(--primary));
    color: white;
    border: none;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    background-color: rgb(var(--primary-hover));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background-color: rgb(var(--secondary));
    color: white;
    border: none;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
    background-color: rgb(var(--secondary-hover));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-outline {
    background-color: transparent;
    color: rgb(var(--text-primary));
    border: 1px solid var(--border-color-medium);
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline:hover {
    background-color: var(--overlay-light);
    border-color: var(--border-color-strong);
}

.btn-outline:active {
    background-color: var(--overlay-light);
    transform: scale(0.98);
}

/* === DIVISORES === */

.divider-app {
    border-color: var(--divider-medium);
}

.divider-app-light {
    border-color: var(--divider-light);
}

/* === TABLAS ESTILO APPLE === */

.table-app {
    background-color: rgb(var(--bg-elevated));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.table-app thead {
    background-color: rgb(var(--bg-secondary));
    border-bottom: 1px solid var(--border-color);
}

.table-app tbody tr {
    border-bottom: 1px solid var(--divider-light);
    transition: background-color 0.15s ease;
}

.table-app tbody tr:hover {
    background-color: rgb(var(--bg-elevated-hover));
}

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

/* === BADGES DE ESTADO === */

.badge-success {
    background-color: rgb(var(--success-light));
    color: rgb(var(--success));
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.badge-warning {
    background-color: rgb(var(--warning-light));
    color: rgb(var(--warning));
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.badge-danger {
    background-color: rgb(var(--danger-light));
    color: rgb(var(--danger));
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.badge-info {
    background-color: rgb(var(--info-light));
    color: rgb(var(--info));
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

/* === SOMBRAS POR NIVEL === */

.shadow-level-1 {
    box-shadow: var(--shadow-sm);
}

.shadow-level-2 {
    box-shadow: var(--shadow-md);
}

.shadow-level-3 {
    box-shadow: var(--shadow-lg);
}

.shadow-level-4 {
    box-shadow: var(--shadow-xl);
}

/* === OVERLAYS === */

.overlay-dark {
    background-color: var(--overlay);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.overlay-light {
    background-color: var(--overlay-light);
}

/* ============================================
   ANIMACIONES Y TRANSICIONES
   ============================================ */

.transition-theme {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Body con fondo base */
body {
    background-color: rgb(var(--bg-base));
    color: rgb(var(--text-primary));
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selección de texto */
::selection {
    background-color: rgba(var(--primary), 0.2);
    color: rgb(var(--text-primary));
}

/* Scrollbar estilo Apple */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--bg-base));
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--text-tertiary), 0.5);
    border-radius: 6px;
    border: 2px solid rgb(var(--bg-base));
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--text-secondary), 0.7);
}

/* Focus visible (accesibilidad) */
*:focus-visible {
    outline: 2px solid rgb(var(--border-focus));
    outline-offset: 2px;
}

/* Reducción de movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}