/* =========================================================================
 * ILLAN PRO - MANIFIESTO DE ESTILOS ROOT (V.11 - 5 PILARES Y CUBO WORK)
 * Ubicación: /var/ecosystem/kernel/assets/css/ui.css
 * Cumplimiento: Variables globales (:root), paleta semántica de los cubos
 *               e identidad cromática de Categorías. Cero color-mix() fuera de :root.
 * ========================================================================= */

/* =========================================================================
 * VARIABLES ROOT
 * ========================================================================= */
:root {

    /* =====================================================================
       1. SISTEMA DE CONTENEDORES Y LAYOUT
       ===================================================================== */
    --container-landing: 1600px;
    --container-fluid: 100%;
    --container-lg: 1200px;
    --container-md: 800px;
    --container-sm: 420px;
    --container-wrapper-public: 960px;

    --grid-cols-xl: repeat(4, 1fr);
    --grid-cols-desktop: repeat(3, 1fr);
    --grid-cols-tablet: repeat(2, 1fr);
    --grid-cols-mobile: repeat(1, 1fr);

    --header-clearance: 80px;
    --footer-clearance: 70px;
    
    --spacing-section: 3rem;
    --spacing-box: 2rem;
    --spacing-box-mobile: 1.5rem;

    --sidebar-width-pc: 380px;
    --sidebar-width-mobile: 100vw;
    --messenger-width-superadmin: 500px;
    --header-height-mobile: 60px;

    /* Dimensiones maestras Portada Pro de Invitados (3 Espacios) */
    --guest-right-column-width: 460px;
    --guest-footer-height: 54px;

    /* =====================================================================
       2. COLORES SEMÁNTICOS Y DERIVADOS DEL ECOSISTEMA DARK
       ===================================================================== */
    --color-bg-absolute: #0d0f12;
    --color-surface-solid: #161a20;

    --color-primary: #38bdf8;    /* Azul acento principal (Cubo 3: GymPro) */
    --color-secondary: #94a3b8;  /* Gris pizarra (textos mutados) */
    --color-vip: #eab308;        /* Dorado premium (Cubo 1: Hitos / Gold VIP) */
    --color-playroom: #f43f5e;   /* Rojo coral / carmesí (Cubo 2: PlayRoom) */
    --color-warning: #f59e0b;    /* Ámbar (Cubo 4: Vodcast / Avisos / Admin) */
    --color-success: #10b981;    /* Verde esmeralda (Cubo 5: Explora / Éxito / Master) */
    --color-onirico: #a855f7;    /* Violeta místico (Cubo 6: Onírico) */
    --color-mensajes: #6366f1;   /* Índigo eléctrico (Cubo 7: Mensajes) */
    --color-cuenta: #06b6d4;     /* Cian turquesa (Cubo 8: Usuario / Cuenta) */
    --color-work: #84cc16;       /* Lima eléctrico (Cubo 9: Work / EngineWorkSpace Master) */
    --color-calendario: #ec4899; /* Rosa magenta / fucsia (Paleta Categorías) */
    --color-explorador: #14b8a6; /* Verde azulado / teal (Paleta Categorías) */
    --color-privado: #84cc16;    /* Lima eléctrico (Alias semántico compatible) */
    --color-error: #ef4444;      /* Rojo (peligro / burbujas de notificación) */

    /* 1. Derivados Cubo Hitos / VIP (Dorado) */
    --color-vip-soft-bg: color-mix(in srgb, var(--color-vip) 14%, transparent);
    --color-vip-soft-border: color-mix(in srgb, var(--color-vip) 38%, transparent);
    --color-vip-glow-soft: color-mix(in srgb, var(--color-vip) 22%, transparent);
    --color-vip-glow-medium: color-mix(in srgb, var(--color-vip) 35%, transparent);
    --color-vip-glow-strong: color-mix(in srgb, var(--color-vip) 65%, transparent);

    /* 2. Derivados Cubo PlayRoom (Rojo Coral) */
    --color-playroom-soft-bg: color-mix(in srgb, var(--color-playroom) 15%, transparent);
    --color-playroom-soft-border: color-mix(in srgb, var(--color-playroom) 35%, transparent);
    --color-playroom-glow-soft: color-mix(in srgb, var(--color-playroom) 20%, transparent);
    --color-playroom-glow-medium: color-mix(in srgb, var(--color-playroom) 35%, transparent);
    --color-playroom-glow-strong: color-mix(in srgb, var(--color-playroom) 65%, transparent);

    /* 3. Derivados Cubo GymPro / Primarios (Azul) */
    --color-primary-soft-bg: color-mix(in srgb, var(--color-primary) 15%, transparent);
    --color-primary-soft-border: color-mix(in srgb, var(--color-primary) 35%, transparent);
    --color-primary-glow-soft: color-mix(in srgb, var(--color-primary) 20%, transparent);
    --color-primary-glow-medium: color-mix(in srgb, var(--color-primary) 35%, transparent);
    --color-primary-glow-strong: color-mix(in srgb, var(--color-primary) 65%, transparent);

    /* 4. Derivados Cubo Vodcast / Warning (Ámbar) */
    --color-warning-soft-bg: color-mix(in srgb, var(--color-warning) 15%, transparent);
    --color-warning-soft-border: color-mix(in srgb, var(--color-warning) 35%, transparent);
    --color-warning-glow-soft: color-mix(in srgb, var(--color-warning) 20%, transparent);
    --color-warning-glow-medium: color-mix(in srgb, var(--color-warning) 35%, transparent);
    --color-warning-glow-strong: color-mix(in srgb, var(--color-warning) 65%, transparent);

    /* 5. Derivados Cubo Explora / Éxito (Verde Esmeralda) */
    --color-success-soft-bg: color-mix(in srgb, var(--color-success) 15%, transparent);
    --color-success-soft-border: color-mix(in srgb, var(--color-success) 35%, transparent);
    --color-success-glow-soft: color-mix(in srgb, var(--color-success) 20%, transparent);
    --color-success-glow-medium: color-mix(in srgb, var(--color-success) 35%, transparent);
    --color-success-glow-strong: color-mix(in srgb, var(--color-success) 65%, transparent);

    /* 6. Derivados Cubo Onírico (Violeta Místico) */
    --color-onirico-soft-bg: color-mix(in srgb, var(--color-onirico) 15%, transparent);
    --color-onirico-soft-border: color-mix(in srgb, var(--color-onirico) 35%, transparent);
    --color-onirico-glow-soft: color-mix(in srgb, var(--color-onirico) 20%, transparent);
    --color-onirico-glow-medium: color-mix(in srgb, var(--color-onirico) 35%, transparent);
    --color-onirico-glow-strong: color-mix(in srgb, var(--color-onirico) 65%, transparent);

    /* 7. Derivados Cubo Mensajes (Índigo Eléctrico) */
    --color-mensajes-soft-bg: color-mix(in srgb, var(--color-mensajes) 15%, transparent);
    --color-mensajes-soft-border: color-mix(in srgb, var(--color-mensajes) 35%, transparent);
    --color-mensajes-glow-soft: color-mix(in srgb, var(--color-mensajes) 20%, transparent);
    --color-mensajes-glow-medium: color-mix(in srgb, var(--color-mensajes) 35%, transparent);
    --color-mensajes-glow-strong: color-mix(in srgb, var(--color-mensajes) 65%, transparent);

    /* 8. Derivados Cubo Usuario / Cuenta (Cian Turquesa) */
    --color-cuenta-soft-bg: color-mix(in srgb, var(--color-cuenta) 15%, transparent);
    --color-cuenta-soft-border: color-mix(in srgb, var(--color-cuenta) 35%, transparent);
    --color-cuenta-glow-soft: color-mix(in srgb, var(--color-cuenta) 20%, transparent);
    --color-cuenta-glow-medium: color-mix(in srgb, var(--color-cuenta) 35%, transparent);
    --color-cuenta-glow-strong: color-mix(in srgb, var(--color-cuenta) 65%, transparent);

    /* 9. Derivados Cubo Work (Lima Eléctrico - Exclusivo Admin Master) */
    --color-work-soft-bg: color-mix(in srgb, var(--color-work) 15%, transparent);
    --color-work-soft-border: color-mix(in srgb, var(--color-work) 35%, transparent);
    --color-work-glow-soft: color-mix(in srgb, var(--color-work) 20%, transparent);
    --color-work-glow-medium: color-mix(in srgb, var(--color-work) 35%, transparent);
    --color-work-glow-strong: color-mix(in srgb, var(--color-work) 65%, transparent);

    /* Derivados adicionales de Paleta Semántica (Rosa Magenta, Teal y Lima) */
    --color-calendario-soft-bg: color-mix(in srgb, var(--color-calendario) 15%, transparent);
    --color-calendario-soft-border: color-mix(in srgb, var(--color-calendario) 35%, transparent);
    --color-calendario-glow-soft: color-mix(in srgb, var(--color-calendario) 20%, transparent);
    --color-calendario-glow-medium: color-mix(in srgb, var(--color-calendario) 35%, transparent);
    --color-calendario-glow-strong: color-mix(in srgb, var(--color-calendario) 65%, transparent);

    --color-explorador-soft-bg: color-mix(in srgb, var(--color-explorador) 15%, transparent);
    --color-explorador-soft-border: color-mix(in srgb, var(--color-explorador) 35%, transparent);
    --color-explorador-glow-soft: color-mix(in srgb, var(--color-explorador) 20%, transparent);
    --color-explorador-glow-medium: color-mix(in srgb, var(--color-explorador) 35%, transparent);
    --color-explorador-glow-strong: color-mix(in srgb, var(--color-explorador) 65%, transparent);

    --color-privado-soft-bg: color-mix(in srgb, var(--color-privado) 15%, transparent);
    --color-privado-soft-border: color-mix(in srgb, var(--color-privado) 35%, transparent);
    --color-privado-glow-soft: color-mix(in srgb, var(--color-privado) 20%, transparent);
    --color-privado-glow-medium: color-mix(in srgb, var(--color-privado) 35%, transparent);
    --color-privado-glow-strong: color-mix(in srgb, var(--color-privado) 65%, transparent);

    /* Derivados semánticos de error */
    --color-error-glow-soft: color-mix(in srgb, var(--color-error) 20%, transparent);
    --color-error-border: color-mix(in srgb, var(--color-error) 40%, transparent);

    /* Scrollbar y divisores */
    --scrollbar-thumb-bg: color-mix(in srgb, var(--color-primary) 40%, transparent);
    --scrollbar-thumb-track: color-mix(in srgb, var(--color-primary) 50%, transparent);
    --sidebar-divider-line: color-mix(in srgb, var(--color-primary) 45%, var(--glass-border-focus));
    --sidebar-divider-pill: color-mix(in srgb, var(--color-primary) 60%, transparent);
    --sidebar-divider-glow: color-mix(in srgb, var(--color-primary) 50%, transparent);

    /* Velos sombreados para Hero, Tarjetas de Componentes UI y Paywall ("Miel") */
    --wrapper-hero-overlay-top: color-mix(in srgb, var(--color-bg-absolute) 65%, transparent);
    --guest-hero-overlay: color-mix(in srgb, var(--color-bg-absolute) 72%, transparent);
    --card-shaded-overlay-top: color-mix(in srgb, var(--color-bg-absolute) 55%, transparent);
    --card-shaded-overlay-bottom: color-mix(in srgb, var(--color-bg-absolute) 88%, transparent);
    --card-fallback-gradient-start: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface-solid));
    --card-fallback-gradient-end: color-mix(in srgb, var(--color-success) 12%, var(--color-bg-absolute));
    --paywall-fade-transparent: color-mix(in srgb, var(--color-bg-absolute) 0%, transparent);

    /* =====================================================================
       3. SISTEMA GLASSMORPHISM (Opacidades y Cajas)
       ===================================================================== */
    --glass-bg-heavy: rgba(13, 15, 18, 0.90);
    --glass-bg-medium: rgba(22, 26, 32, 0.75);
    --glass-bg-light: rgba(255, 255, 255, 0.02);
    
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-focus: rgba(255, 255, 255, 0.30);
    
    --glass-blur: 12px;
    --box-radius: 12px;
    --box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);

    /* =====================================================================
       4. TIPOGRAFÍA Y ESCALA DE TEXTOS
       ===================================================================== */
    --font-general-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-title: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --color-text-main: #f8fafc;
    --color-text-title: #ffffff;
    --color-text-muted: #94a3b8;
    --color-link-general-text: #38bdf8;

    /* Escala fluida estandarizada (1rem = 16px) */
    --size-general-text: 1rem;       /* 16px: Textos base, botones, inputs */
    --size-h1-title: 2.2rem;         /* ~35px: H1 - Landing o grandes cabeceras */
    --size-h2-title: 1.8rem;         /* ~28px: H2 - Títulos de sección principal */
    --size-h3-title: 1.4rem;         /* ~22px: H3 - Tarjetas y bloques medios */
    --size-h4-title: 1.1rem;         /* ~17px: H4 - Destacados menores */
    --size-h5-title: 1rem;           /* 16px: H5 - Equivalente al texto pero en bold */
    --size-h6-title: 0.9rem;         /* ~14px: H6 - Fechas, roles de usuario */
    --size-h7-title: 0.85rem;        /* ~13px: Etiquetas form, meta datos */
    --size-h8-title: 0.75rem;        /* ~12px: Badges, avisos minúsculos */

    /* =====================================================================
       5. FÍSICAS E INTERACCIONES (BOTONES GLOBALES)
       ===================================================================== */
    --button-size-xs: 1.8rem;
    --button-margin-xs: 0.8rem;

    --button-size-sm: 2.2rem;
    --button-margin-sm: 1rem;
    
    --button-size: 2.8rem;           /* Altura táctil estándar (~44px) */
    --button-margin-space: 1.5rem;   /* Espaciado interno lateral (padding) */
    
    --button-size-lg: 3.5rem;
    --button-margin-lg: 2.5rem;
    
    --button-radius: 8px;            /* Curvatura de botones compartida */
    
    /* Variante: Primary */
    --button-bg-primary: #f8fafc;
    --button-text-primary: #0d0f12;
    --button-hover-bg: #e2e8f0;
    --button-hover-text: #0d0f12;

    /* Variante: Acceso Móvil Azulado */
    --button-bg-access-blue: color-mix(in srgb, var(--color-primary) 26%, var(--color-surface-solid));
    --button-border-access-blue: color-mix(in srgb, var(--color-primary) 55%, transparent);
    --button-hover-bg-access-blue: color-mix(in srgb, var(--color-primary) 38%, var(--color-surface-solid));
    --button-text-access-blue: #ffffff;

    /* Variante: Secondary / Outline */
    --button-bg-secondary: transparent;
    --button-text-secondary: var(--color-text-muted);
    --button-border-secondary: var(--glass-border);
    --button-hover-bg-secondary: var(--glass-bg-light);
    --button-hover-text-secondary: var(--color-text-title);

    /* Variante: Success */
    --button-bg-success: color-mix(in srgb, var(--color-success) 15%, transparent);
    --button-text-success: var(--color-success);
    --button-border-success: color-mix(in srgb, var(--color-success) 30%, transparent);
    --button-hover-bg-success: color-mix(in srgb, var(--color-success) 25%, transparent);

    /* Variante: Danger */
    --button-bg-danger: color-mix(in srgb, var(--color-error) 15%, transparent);
    --button-text-danger: var(--color-error);
    --button-border-danger: color-mix(in srgb, var(--color-error) 30%, transparent);
    --button-hover-bg-danger: color-mix(in srgb, var(--color-error) 25%, transparent);
    
    --button-transition: all 0.3s ease;
    --button-press-transform: scale(0.98);

    /* =====================================================================
       6. CONTROLES DE FORMULARIO
       ===================================================================== */
    --form-bg: #0d0f12;
    --form-bg-focus: #161a20;
    --form-border: rgba(255, 255, 255, 0.1);
    
    --form-padding: 0.8rem 1rem;
    --form-radius: 8px;
    
    --form-text-color: #f8fafc;
    --form-placeholder-color: #94a3b8;
    
    --form-label-size: var(--size-h7-title);
    --form-label-weight: 500;
    --form-label-color: var(--color-text-muted);
    --form-label-spacing: 0.5rem;
    
    --form-focus-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);

    /* =====================================================================
       7. EJE Z (PROFUNDIDAD ESTRICTA)
       ===================================================================== */
    --z-base: 1;
    --z-elevated: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-tooltip: 300;
    --z-modal: 400;
    --z-loader: 500;
}

/* =========================================================================
 * CLASES ROOT
 * ========================================================================= */

/* =====================================================================
   1. CLASES UTILITARIAS DE UI (BOTONES GLOBALES)
   ===================================================================== */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-success,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: var(--button-size);
    padding: 0 var(--button-margin-space);
    border-radius: var(--button-radius);
    font-size: var(--size-general-text);
    font-family: var(--font-general-text);
    font-weight: 600;
    cursor: pointer;
    transition: var(--button-transition);
    border: 1px solid transparent;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-success:active,
.btn-danger:active {
    transform: var(--button-press-transform);
}

/* Variantes de Color */
.btn-primary {
    background-color: var(--button-bg-primary);
    color: var(--button-text-primary);
}
.btn-primary:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

.btn-outline,
.btn-secondary {
    background-color: var(--button-bg-secondary);
    color: var(--button-text-secondary);
    border-color: var(--button-border-secondary);
}
.btn-outline:hover,
.btn-secondary:hover {
    background-color: var(--button-hover-bg-secondary);
    color: var(--button-hover-text-secondary);
}

.btn-success {
    background-color: var(--button-bg-success);
    color: var(--button-text-success);
    border-color: var(--button-border-success);
}
.btn-success:hover {
    background-color: var(--button-hover-bg-success);
}

.btn-danger {
    background-color: var(--button-bg-danger);
    color: var(--button-text-danger);
    border-color: var(--button-border-danger);
}
.btn-danger:hover {
    background-color: var(--button-hover-bg-danger);
}

/* Variantes de Tamaño y Modificadores */
.btn-xs {
    height: var(--button-size-xs);
    padding: 0 var(--button-margin-xs);
    font-size: var(--size-h8-title);
}

.btn-sm {
    height: var(--button-size-sm);
    padding: 0 var(--button-margin-sm);
    font-size: var(--size-h7-title);
}

.btn-lg {
    height: var(--button-size-lg);
    padding: 0 var(--button-margin-lg);
    font-size: var(--size-h4-title);
}

.btn-auto {
    width: auto;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--color-text-main);
    cursor: pointer;
    transition: color var(--button-transition);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover {
    color: var(--color-primary);
}

/* =====================================================================
   2. SISTEMA DE CONTENEDORES Y CUADRÍCULAS (LAYOUT ESTRUCTURAL)
   ===================================================================== */
.panel-container,
.panel-container-lg,
.panel-container-fluid,
.panel-container-sm,
.panel-container-public,
.panel-container-landing {
    width: 100%;
    margin: 0 auto;
    padding-left: var(--spacing-box);
    padding-right: var(--spacing-box);
    box-sizing: border-box;
}

/* Contenedor estándar de trabajo, formularios y vistas internas (800px) */
.panel-container {
    max-width: var(--container-md);
}

/* Contenedor amplio para dashboards secundarios, cuadrículas y tablas densas (1200px) */
.panel-container-lg {
    max-width: var(--container-lg);
}

/* Contenedor de ancho completo para el centro de mando principal (100%) */
.panel-container-fluid {
    max-width: var(--container-fluid);
}

/* Contenedor estrecho para accesos, pasarelas o formularios de un paso (420px) */
.panel-container-sm {
    max-width: var(--container-sm);
}

/* Contenedor de lectura pública para artículos y micrositios (960px) */
.panel-container-public {
    max-width: var(--container-wrapper-public);
}

/* Contenedor panorámico para portadas o vistas tipo Play Room (1600px) */
.panel-container-landing {
    max-width: var(--container-landing);
}

/* Cuadrícula estricta 3-2-1 para hubs de tarjetas */
.panel-grid-cards {
    display: grid;
    grid-template-columns: var(--grid-cols-desktop);
    gap: 1.5rem;
    width: 100%;
}

@media (max-width: 1024px) {
    .panel-grid-cards {
        grid-template-columns: var(--grid-cols-tablet);
    }
}

@media (max-width: 768px) {
    .panel-container,
    .panel-container-lg,
    .panel-container-fluid,
    .panel-container-sm,
    .panel-container-public,
    .panel-container-landing {
        padding-left: var(--spacing-box-mobile);
        padding-right: var(--spacing-box-mobile);
    }

    .panel-grid-cards {
        grid-template-columns: var(--grid-cols-mobile);
    }
}

/* =====================================================================
   3. TARJETAS DE PANEL, ESTADOS VACÍOS Y UTILIDADES FLEX
   ===================================================================== */
.panel-card {
    background-color: var(--glass-bg-medium);
    border: 1px solid var(--glass-border);
    border-radius: var(--box-radius);
    padding: var(--spacing-box);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-sizing: border-box;
}

.panel-card h2 {
    font-size: var(--size-h3-title);
    margin-bottom: var(--spacing-box-mobile);
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--color-text-title);
}

.card-danger {
    border-color: var(--color-error-border);
}

.danger-text {
    color: var(--color-text-muted);
    font-size: var(--size-general-text);
    margin-bottom: var(--spacing-box-mobile);
}

.empty-state-box {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-section);
    background-color: var(--glass-bg-light);
    border-radius: var(--box-radius);
    border: 1px dashed var(--glass-border);
    box-sizing: border-box;
}

.empty-state-text {
    color: var(--color-text-muted);
    font-size: var(--size-h4-title);
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}