/* ==========================================================
   1. VARIABLES DE DISEÑO Y FUENTES
   ========================================================== */

@layer tokens,
       reset,
       typography,
       layout,
       components,
       utilities,
       a11y,
       print;

@layer tokens {
    :root {
        /* --- 1.1 PALETA DE COLORES: IDENTIDAD (SÓLIDOS) --- */
        --color-primario: var(--color-petroleo);
        --color-secundario: var(--color-turquesa);
        --color-acento: var(--color-damasco);
    
    /* --- 1.2 PALETA NEUTRA Y FONDOS --- */
    --color-blanco: #FFFFFF;
    --color-negro: #000000;
    --color-nube: #F8FAFB;
    --color-crema: #FFFEF9;
    --color-hielo: #d4f3f3;
    --color-hielo-nav: #dffffd;
    --color-gris: #334155;
    --color-gris-azulado: #64748b;
    --color-gris-oscurecido: #2D3436;

    /* --- 1.3 PALETA SEMÁNTICA (ACCIÓN Y ESTADO) --- */
    --color-amarillo: #FFC107;
    --color-azul: #1368CE;
    --color-burdeo: #721c24;
    --color-cafe: #8B4513;
    --color-damasco: #F6B092;
    --color-dorado: #D89E00;
    --color-lila: #C084FC;
    --color-morado: #863BFF;
    --color-naranjo: #FFA500;
    --color-petroleo: #1A5F66;
    --color-rojo: #E21B3C;
    --color-rosado: #F8B1C0;
    --color-turquesa: #6EC6C6;
    --color-verde: #26890C;

    /* --- 1.4 PALETA LÍQUIDA (PÁLIDOS PARA CONTENEDORES) --- */
    --color-amarillo-palido: #fffbeb;
    --color-azul-palido: #eff6ff;
    --color-burdeo-palido: #d6a4ae;
    --color-cafe-palido: #f5deb3;
    --color-damasco-palido: #f8d7da;
    --color-dorado-palido: #fffbeb;
    --color-gris-palido: #E2E8F0;
    --color-lila-palido: #ede9fe;
    --color-morado-palido: #e9d5ff;
    --color-naranjo-palido: #fff4e6;
    --color-petroleo-palido: #d1ecf1;
    --color-rojo-palido: #fef2f2;
    --color-rosado-palido: #f8d7da;
    --color-turquesa-palido: #d1ecf1;
    --color-verde-palido: #d4edda;

    /* --- 1.5 PALETA DE CONTRASTE (OSCURECIDOS) --- */
    --color-amarillo-oscurecido: #b27a00;
    --color-azul-oscurecido: #0b4a9c;
    --color-burdeo-oscurecido: #721c24;
    --color-cafe-oscurecido: #8B4513;
    --color-damasco-oscurecido: #e09b7f;
    --color-dorado-oscurecido: #b27a00;
    --color-lila-oscurecido: #a78bfa;
    --color-morado-oscurecido: #a78bfa;
    --color-naranjo-oscurecido: #ff9800;
    --color-petroleo-oscurecido: #124247;
    --color-rojo-oscurecido: #991b1b;
    --color-rosado-oscurecido: #c82333;
    --color-turquesa-oscurecido: #5ab1b1;
    --color-verde-oscurecido: #155724;

    /* --- 1.6 RRSS Y TRANSPARENCIAS --- */
    --color-WhatsApp: #25d366;
    --color-WhatsApp-hover: #128c7e;
    --alpha-primario: rgba(26, 95, 102, 0.08);
    --alpha-secundario: rgba(110, 198, 198, 0.12);
    --alpha-acento: rgba(246, 176, 146, 0.15);
    --alpha-oscuro: rgba(0, 0, 0, 0.4);
    --alpha-blanco-suave: rgba(255, 255, 255, 0.1);
    --alpha-blanco-medio: rgba(255, 255, 255, 0.3);
    --alpha-blanco-cristal: rgba(255, 255, 255, 0.7);
    --alpha-petroleo-fuerte: rgba(26, 95, 102, 0.4);
    --alpha-rojo-minimo: rgba(231, 76, 60, 0.06);
    --alpha-damasco-suave: rgba(246, 176, 146, 0.1);
    --alpha-damasco-medio: rgba(246, 176, 146, 0.2);
    --alpha-acento-fuerte: rgba(246, 176, 146, 0.4);
    --alpha-blanco-minimo: rgba(255, 255, 255, 0.05); 

    /* --- 1.7 MOTOR TIPOGRÁFICO --- */
    --font-titulo: 'Nunito', sans-serif;
    --font-titulo-actividades: 'HouseEaster', sans-serif;
    --font-landing: 'Outfit', sans-serif;
    --font-numeros: 'ChivoMono', monospace;
    --font-lectura: 'LittleDays', cursive;
    --font-ejemplo: 'Mestra', cursive;
    --font-trazos: 'MestraPunteada', cursive;

    /* Escala fluida */
    --f-tiny: clamp(0.65rem, 1.2vw, 0.85rem);
    --f-base: clamp(0.875rem, 1.8vw, 1.1rem);
    --f-h3:   clamp(1.15rem, 2.8vw, 1.5rem);
    --f-h2:   clamp(1.6rem, 4.5vw, 2.5rem);
    --f-h1:   clamp(2.2rem, 8vw, 4.5rem);

    /* --- 1.8 DIMENSIONES Y ESPACIADO --- */
    --sidebar-main-width: clamp(15rem, 20vw, 18.75rem);
    --sidebar-slim-width: 5rem;
    --sidebar-tools-width: clamp(15rem, 22vw, 18.75rem);
    --panel-props-width: clamp(18.75rem, 25vw, 22rem);
    
    /* Formato de hoja física en unidades relativas de impresión */
    --ancho-carta: 21.59cm;
    --alto-carta: 27.94cm;

    /* Márgenes líquidos */
    --sp-xs: 0.5rem;
    --sp-sm: 0.8rem;
    --sp-md: clamp(1rem, 3vw, 1.5rem);
    --sp-lg: clamp(1.6rem, 5vw, 3.2rem);
    --sp-xl: clamp(3.2rem, 8vw, 5.5rem);
    

    /* --- 1.9 BORDES Y RADIOS --- */
    --radio-pequeno: 0.625rem;
    --radio-mediano: 1.125rem;
    --radio-grande: 1.56rem;
    --radio-circular: 50%;
    --radio-pill: 31.25rem;
    --borde-delgado: 0.0625rem solid var(--color-hielo);
    --borde-marca: 0.1875rem solid var(--color-turquesa);

    /* --- 1.10 SOMBRAS (ELEVACIÓN) --- */
    --sombra-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.05);
    --sombra-discreta: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
    --sombra-md: 0 0.625rem 1.56rem rgba(0,0,0,0.08);
    --sombra-estandar: 0 0.5rem 1rem rgba(26, 95, 102, 0.1);
    --sombra-fuerte: 0 0.9rem 2.2rem rgba(26, 95, 102, 0.2);
    --sombra-lg: 0 1.25rem 3.125rem rgba(0,0,0,0.12);
    --sombra-elevada: 0 1.56rem 3.75rem rgba(0,0,0,0.3);
    --sombra-inner: inset 0 0.125rem 0.25rem rgba(0,0,0,0.05);

    /* --- 1.11 CAPAS (Z-INDEX) --- */
    --z-base: 1;
    --z-decoracion: 2;    /* Para iconos internos o barras de progreso */
    --z-flotante: 5;      /* Para badges, botones sobre inputs o avisos pequeños */
    --z-superior: 10;     /* Para botones de cierre o elementos arrastrables */
    --z-navegacion: 1000;    /* Sidebar y Header */
    --z-overlay: 2000;       /* El fondo oscuro del modal */
    --z-modal: 3000;         /* La ventana blanca del modal */
    --z-tooltip: 4000;
    --z-notificacion: 5000;  /* Toasts y mensajes de alerta */
    --z-loader: 999999;      /* El cargador universal (Siempre arriba) */

    /* --- 1.12 TIEMPOS DE TRANSICIÓN Y EFECTOS --- */
    --trans-fast: 0.2s ease;
    --trans-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --trans-slow: 0.5s ease;
    --trans-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    --trans-smooth: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    --dur-normal: 0.3s;
    --blur-cristal: blur(0.75rem) saturate(180%);
    
    --calendario-celda-min-h: clamp(6rem, 12dvh, 10rem);
}
}

/* ==========================================================
   1b. TEMA OSCURO (ADITIVO - NO ALTERA DEFAULT)
   ========================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-blanco: #0f172a;
        --color-negro: #ffffff;
        --color-nube: #0b1225;
        --color-crema: #0e162b;
        --color-hielo: #1f3a3a;
        --color-hielo-nav: #142b2b;
        --color-gris: #e2e8f0;
        --color-gris-azulado: #94a3b8;
        --color-gris-oscurecido: #f1f5f9;
        
        --alpha-primario: rgba(110, 198, 198, 0.15);
        --alpha-secundario: rgba(110, 198, 198, 0.2);
        --alpha-acento: rgba(246, 176, 146, 0.2);
        --alpha-oscuro: rgba(0, 0, 0, 0.6);
        --alpha-blanco-suave: rgba(15, 23, 42, 0.3);
        --alpha-blanco-medio: rgba(15, 23, 42, 0.5);
        --alpha-blanco-cristal: rgba(15, 23, 42, 0.85);
        --alpha-petroleo-fuerte: rgba(110, 198, 198, 0.25);
        --alpha-damasco-suave: rgba(246, 176, 146, 0.15);
        --alpha-damasco-medio: rgba(246, 176, 146, 0.25);
        --alpha-acento-fuerte: rgba(246, 176, 146, 0.35);
        --alpha-blanco-minimo: rgba(255, 255, 255, 0.08);
    }
}

:root[data-theme="dark"] {
    --color-blanco: #0f172a;
    --color-negro: #ffffff;
    --color-nube: #0b1225;
    --color-crema: #0e162b;
    --color-hielo: #1f3a3a;
    --color-hielo-nav: #142b2b;
    --color-gris: #e2e8f0;
    --color-gris-azulado: #94a3b8;
    --color-gris-oscurecido: #f1f5f9;
    
    --alpha-primario: rgba(110, 198, 198, 0.15);
    --alpha-secundario: rgba(110, 198, 198, 0.2);
    --alpha-acento: rgba(246, 176, 146, 0.2);
    --alpha-oscuro: rgba(0, 0, 0, 0.6);
    --alpha-blanco-suave: rgba(15, 23, 42, 0.3);
    --alpha-blanco-medio: rgba(15, 23, 42, 0.5);
    --alpha-blanco-cristal: rgba(15, 23, 42, 0.85);
    --alpha-petroleo-fuerte: rgba(110, 198, 198, 0.25);
    --alpha-damasco-suave: rgba(246, 176, 146, 0.15);
    --alpha-damasco-medio: rgba(246, 176, 146, 0.25);
    --alpha-acento-fuerte: rgba(246, 176, 146, 0.35);
    --alpha-blanco-minimo: rgba(255, 255, 255, 0.08);
}

/* ==========================================================
   CARGA DE FUENTES
   ========================================================== */

@font-face {
    font-family: 'Nunito';
    src: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/assets/fonts/Nunito.ttf') format('truetype');
    font-weight: 400 800; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/assets/fonts/Outfit.ttf') format('truetype');
    font-weight: 300 600; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'ChivoMono';
    src: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/assets/fonts/ChivoMono.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'HouseEaster';
    src: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/assets/fonts/HouseEaster.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'InkFree';
    src: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/assets/fonts/InkFree.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face { 
    font-family: 'LittleDays';
    src: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/assets/fonts/LittleDays.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'Mestra';
    src: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/assets/fonts/Mestra.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'MestraPunteada';
    src: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/assets/fonts/MestraPunteada.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

/* ==========================================================================
   PARTE 1: NORMALIZACIÓN, LIENZO BASE, TIPOGRAFÍA Y TARJETAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NORMALIZACIÓN Y LIENZO BASE (MEC CORE)
   -------------------------------------------------------------------------- */

/* 1.1 Reset Universal */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

/* 1.2 Configuración del Lienzo (HTML & Body) */
html { 
    font-size: 100%;
    scroll-behavior: smooth; 
    height: -webkit-fill-available; 
}

body {
    background-color: var(--color-nube);
    color: var(--color-gris-oscurecido);
    font-family: var(--font-titulo);
    font-size: var(--f-base);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100dvh; 
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* 1.3 Estructura Base (Main, App y Recursos Visuales) */
main {
    flex: 1 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#app {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto; 
    user-select: none;
    -webkit-user-drag: none;
    object-fit: contain;
}

/* 1.4 Personalización de Barras de Desplazamiento */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: var(--color-nube);
}

::-webkit-scrollbar-thumb {
    background: var(--color-turquesa);
    border-radius: var(--radio-pill);
    border: 0.125rem solid var(--color-nube);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-petroleo);
}

.mec-bloqueo-desplazamiento {
    overflow: hidden !important;
    height: 100dvh !important;
    touch-action: none;
}

/* 1.6 Layout de Pantalla Completa (Login Viewport) */
body:has(#publico-modulo-login-raiz) {
    height: 100dvh;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}

body:has(#publico-modulo-login-raiz) #app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body:has(#publico-modulo-login-raiz) #main-content {
    flex: 1; 
    display: flex;
    align-items: safe center;
    justify-content: center;
    padding: 1rem;
    min-height: 0;
    overflow-y: auto;
}

body:has(#publico-modulo-login-raiz) .mec-barra-footer {
    padding: 0.5rem 0;
    flex-shrink: 0;
}

/* En el login la barra de accesibilidad se compacta para no desbordar el viewport. */
body:has(#publico-modulo-login-raiz) .mec-a11y-barra {
    padding: 0;
    gap: 0.2rem;
}

body:has(#publico-modulo-login-raiz) .mec-a11y-boton {
    width: 1.9rem;
    height: 1.9rem;
}

/* --------------------------------------------------------------------------
   2. SISTEMA DE TEXTO Y TIPOGRAFÍA (MEC TEXT)
   -------------------------------------------------------------------------- */

/* 2.1 Clase Maestra Base */
.mec-texto {
    margin: 0;
    padding: 0;
    color: var(--color-gris-oscurecido);
    line-height: 1.5;
    font-family: var(--font-landing);
    text-align: center; 
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

/* 2.2 Escalas Tipográficas */
.mec-texto.es-hero { 
    font-size: var(--f-h1); 
    line-height: 1.1; 
    font-weight: 800; 
    letter-spacing: -0.02em; 
}

.mec-texto.es-titulo { 
    font-size: var(--f-h2); 
    line-height: 1.2; 
    font-weight: 700; 
}

.mec-texto.es-subtitulo { 
    font-size: var(--f-h3); 
    line-height: 1.3; 
    font-weight: 600; 
}

.mec-texto.es-base { 
    font-size: var(--f-base); 
    line-height: 1.6; 
}

.mec-texto.es-etiqueta { 
    font-size: var(--f-tiny); 
    line-height: 1.4; 
    font-weight: 600; 
}

/* 2.3 Familias Tipográficas */
.mec-texto.f-titulo    { font-family: var(--font-titulo); }
.mec-texto.f-fantasia  { font-family: var(--font-titulo-actividades); }
.mec-texto.f-lectura   { font-family: var(--font-lectura); }
.mec-texto.f-numeros   { font-family: var(--font-numeros); }
.mec-texto.f-trazos    { font-family: var(--font-trazos); }

/* 2.4 Paleta Textual Semántica */
.mec-texto.es-petroleo { color: var(--color-petroleo); }
.mec-texto.es-turquesa { color: var(--color-turquesa); }
.mec-texto.es-damasco  { color: var(--color-damasco); }
.mec-texto.es-error    { color: var(--color-rojo); }
.mec-texto.es-blanco   { color: var(--color-blanco); }
.mec-texto.es-atenuado { color: var(--color-gris-azulado); opacity: 0.8; }

/* 2.5 Modificadores de Alineación y Transformación */
.mec-texto.es-mayuscula {
    text-transform: uppercase;
    letter-spacing: var(--borde-delgado);
}

.mec-texto.es-izquierda   { text-align: left !important; }
.mec-texto.es-derecha     { text-align: right !important; }
.mec-texto.es-justificado { text-align: justify !important; }

.mec-texto.es-truncado { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mec-texto.es-italico { font-style: italic !important; }

.mec-texto.es-negrita { font-weight: 800 !important; }
.mec-linea-comoda    { line-height: 1.8 !important; }

/* 2.6 Variantes de Escala Fina y Flujo */
.mec-texto.es-micro   { font-size: var(--f-tiny) !important; line-height: 1.1; }

/* 2.7 Componentes Textuales Especiales y Metadatos */
.mec-numeros-grandes {
    font-family: var(--font-numeros);
    font-weight: 800;
    text-align: center;
    color: var(--color-petroleo);
    line-height: 1;
    font-size: clamp(2.5rem, 10vw, 4.5rem) !important;
    margin-bottom: var(--sp-md) !important;
    display: block;
    width: 100%;
}

#mec-u-name { 
    font-weight: 800; 
    color: var(--color-petroleo); 
}

#mec-u-email { 
    font-size: 0.8rem; 
    color: var(--color-gris-azulado); 
}

#mec-user-info-box { 
    text-align: right; 
}

.color-WhatsApp { 
    color: var(--color-WhatsApp) !important; 
}

.color-WhatsApp-hover:hover { 
    color: var(--color-WhatsApp-hover) !important; 
}

.mec-landing-desc-width { 
    max-width: 38rem; 
    margin: 0 auto; 
}

/* --------------------------------------------------------------------------
   3. SISTEMA DE TARJETAS Y CONTENEDORES (MEC CARDS)
   -------------------------------------------------------------------------- */

/* 3.1 Estructura Base: mec-tarjeta */
.mec-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    position: relative;
    padding: clamp(var(--sp-sm), 3.5vw, var(--sp-lg));
    gap: var(--sp-sm);
    overflow: hidden;
    break-inside: avoid;
    background-color: var(--color-blanco);
    border-radius: var(--radio-grande);
    transition: all var(--trans-normal);
    box-shadow: none;
    border: var(--borde-delgado);
    border-color: var(--color-hielo);
}

/* 3.3 Variantes de Estilo y Estados */
.mec-tarjeta.es-interactiva { 
    cursor: pointer; 
}

.mec-tarjeta.es-interactiva:hover {
    transform: translateY(-0.5rem);
    box-shadow: var(--sombra-lg) !important;
    border-color: var(--color-turquesa) !important;
}

.mec-tarjeta.es-informativa {
    background-color: var(--color-blanco) !important;
    border-radius: var(--radio-grande);
    border-left: 0.5rem solid var(--color-turquesa) !important;
    padding: var(--sp-xl);
    box-shadow: var(--sombra-estandar) !important;
    text-align: left;
    align-items: stretch;
}

.mec-tarjeta.es-destacada { 
    border-left: 0.5rem solid var(--color-turquesa) !important; 
}

.mec-tarjeta.es-destacada.es-petroleo { 
    border-left-color: var(--color-petroleo) !important; 
}

.mec-tarjeta.es-destacada.es-damasco { 
    border-left-color: var(--color-damasco) !important; 
}

.mec-tarjeta.es-destacada.es-rojo { 
    border-left-color: var(--color-rojo) !important; 
}

.mec-tarjeta.es-informativa.es-rojo { 
    border-left-color: var(--color-rojo) !important; 
}

.mec-tarjeta.es-contorno {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0.125rem solid var(--color-hielo) !important;
}

.mec-tarjeta.es-cristal {
    background-color: var(--alpha-blanco-cristal) !important;
    backdrop-filter: var(--blur-cristal);
    -webkit-backdrop-filter: var(--blur-cristal);
    border: var(--borde-delgado) solid var(--alpha-blanco-medio) !important;
}

.mec-tarjeta.es-staff { 
    text-align: center; 
    padding: var(--sp-lg); 
}

.mec-tarjeta.es-formulario .mec-campo { 
    text-align: left; 
}

/* Consolidación de Tarjeta Login */
.mec-tarjeta-login {
    width: 100%;
    max-width: 26rem !important;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    overflow-y: auto;
    padding: var(--sp-md) !important;
    background-color: var(--color-blanco);
    border-radius: var(--radio-grande);
}

/* 3.4 Adaptaciones de Contexto (Lista / Tabla) */
.es-modo-lista .mec-tarjeta {
    flex-direction: row !important;
    padding: var(--sp-sm) var(--sp-md) !important;
    justify-content: space-between !important;
    text-align: left !important;
    min-height: auto !important;
}

.es-modo-tabla .mec-tarjeta {
    border-radius: 0 !important;
    border-left: none !important;
    border-bottom: var(--borde-delgado) !important;
    box-shadow: none !important;
}

#area-identidad-estudiante .mec-tarjeta {
    background-color: var(--color-blanco) !important;
    border-left: 0.5rem solid var(--color-turquesa) !important;
    text-align: left;
    align-items: flex-start;
}

/* 3.5 Contenedores Especializados de Sección */
.mec-materia-box {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    width: 100%;
    padding: var(--sp-sm) var(--sp-md);
    background-color: var(--color-blanco);
    border: 0.125rem solid var(--color-hielo);
    border-radius: var(--radio-mediano);
    transition: all var(--trans-normal);
}

.mec-resumen-inscripcion-tarjeta {
    background: linear-gradient(to bottom, var(--color-hielo-nav), white) !important;
    align-items: stretch !important;
}

.mec-inscripcion-seccion-bloque { 
    width: 100%; 
    border-bottom: var(--borde-delgado); 
    padding-bottom: var(--sp-lg); 
}

.mec-aviso-informativo { 
    width: 100%; 
    padding: var(--sp-md); 
    border-radius: var(--radio-pequeno); 
    background-color: var(--color-amarillo-palido); 
    border-left: 0.3125rem solid var(--color-naranjo); 
    font-size: var(--f-tiny); 
    color: var(--color-amarillo-oscurecido); 
    text-align: center; 
    line-height: 1.5; 
}

/* ==========================================================================
   PARTE 2: BOTONES, ENLACES, ELEMENTOS INTERACTIVOS Y SIDEBAR
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CLASE MAESTRA: MEC-BOTON Y VARIANTES DE COLOR
   -------------------------------------------------------------------------- */

/* 1.1 Estructura Universal de Botón */
.mec-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-sm);
    min-height: 2.5rem;
    padding: clamp(0.6rem, 2dvh, 1rem) clamp(1.2rem, 3vw, 2.2rem);
    border-radius: var(--radio-pill);
    font-family: var(--font-landing); 
    font-weight: 800;
    font-size: var(--f-base);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.0313rem;
    cursor: pointer;
    border: 0.125rem solid transparent;
    user-select: none;
    transition: all var(--trans-bounce);
}

.mec-boton:focus-visible {
    outline: 2px solid var(--color-turquesa);
    outline-offset: 2px;
}

/* Focus visible global para elementos interactivos */
.mec-enlace:focus-visible,
.mec-menu-item:focus-visible,
.mec-acordeon-summary:focus-visible,
.mec-ventana-cerrar:focus-visible,
.mec-campo:focus-visible {
    outline: 2px solid var(--color-turquesa);
    outline-offset: 2px;
}

/* Hover suave para tarjetas interactivas */
.mec-tarjeta.es-interactiva:hover,
.mec-clase-mini-malla:hover {
    box-shadow: var(--sombra-discreta);
    transform: translateY(-1px);
    transition: transform var(--trans-fast), box-shadow var(--trans-fast);
}

/* Unified flex utility (alias layer) */
.mec-flex { display: flex; }
.mec-flex--col { flex-direction: column; }
.mec-flex--row { flex-direction: row; }
.mec-flex--wrap { flex-wrap: wrap; }
.mec-flex--center { align-items: center; justify-content: center; }
.mec-flex--between { align-items: center; justify-content: space-between; }
.mec-flex--start { align-items: flex-start; justify-content: flex-start; }
.mec-flex--end { align-items: center; justify-content: flex-end; }
.mec-flex--items-center { align-items: center; }
.mec-flex--grow { flex: 1 1 0%; min-width: 0; }
.mec-flex--grow-y { flex: 1 1 0%; min-height: 0; }
.mec-flex--shrink-0 { flex-shrink: 0; }

/* Unified card BEM sections (aliases) */
.mec-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; position: relative; padding: clamp(var(--sp-sm), 3.5vw, var(--sp-lg)); gap: var(--sp-sm); overflow: hidden; break-inside: avoid; background-color: var(--color-blanco); border-radius: var(--radio-grande); transition: all var(--trans-normal); box-shadow: none; border: var(--borde-delgado); border-color: var(--color-hielo); }
.mec-card__header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); }
.mec-card__body { width: 100%; flex: 1 1 auto; min-width: 0; }
.mec-card__footer { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-sm); padding-top: var(--sp-sm); }
.mec-card__title { font-family: var(--font-titulo); font-weight: 700; color: var(--color-petroleo); }
.mec-card__indicator { flex-shrink: 0; }

/* Utilities: flex grow (DRY) */
.mec-flex-grow { flex: 1 1 0% !important; min-width: 0 !important; }
.mec-flex-grow-y { flex: 1 1 0% !important; min-height: 0 !important; }
.mec-flex-shrink-0 { flex-shrink: 0 !important; }

/* 1.2 Estados Globales de Interacción */
.mec-boton:hover { 
    transform: translateY(-0.25rem); 
    box-shadow: var(--sombra-md); 
    filter: brightness(1.1); 
}

.mec-boton:active { 
    transform: scale(0.96); 
}

.mec-boton:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
    transform: none; 
    filter: grayscale(1); 
}

/* 1.3 Variantes Cromáticas Institucionales */
.mec-boton.es-petroleo { 
    background-color: var(--color-petroleo); 
    color: var(--color-blanco); 
}

.mec-boton.es-turquesa { 
    background-color: var(--color-turquesa); 
    color: var(--color-blanco); 
}

.mec-boton.es-damasco { 
    background-color: var(--color-damasco); 
    color: var(--color-blanco); 
    box-shadow: 0 0.5rem 1.25rem var(--alpha-acento); 
}

.mec-boton.es-peligro { 
    background-color: var(--color-rojo); 
    color: var(--color-blanco); 
}

.mec-boton.es-fantasma { 
    background-color: transparent; 
    border-color: var(--color-hielo); 
    color: var(--color-petroleo); 
}

.mec-boton.es-fantasma:hover { 
    background-color: var(--color-nube); 
    border-color: var(--color-turquesa); 
}

/* --------------------------------------------------------------------------
   2. MODIFICADORES DE FORMA, TAMAÑO Y RESPONSIVIDAD
   -------------------------------------------------------------------------- */

/* 2.1 Botón Circular */
.mec-boton.es-circular {
    aspect-ratio: 1 / 1 !important; 
    flex: 1 1 auto;
    max-width: 4rem;
    min-width: 1rem;
    padding: 0 !important;
    border-radius: var(--radio-circular);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mec-boton.es-circular .mec-icono { 
    width: 60%; 
    height: 60%; 
    background-size: contain; 
}

/* 2.2 Variantes de Dimensión y Bloque */
.mec-boton.es-bloque { 
    display: flex; 
    width: 100%; 
}

.mec-boton.es-pequeno { 
    padding: var(--sp-xs) var(--sp-md); 
    font-size: var(--f-tiny); 
}

/* 2.3 Botón Colapsable Inteligente (Responsive) */
@media (max-width: 48rem) {
    .mec-boton.es-colapsable { 
        padding: var(--sp-sm); 
        min-width: 3.125rem; 
    }

    .mec-boton.es-colapsable .mec-boton-texto { 
        max-width: 0; 
        opacity: 0; 
        margin: 0; 
        overflow: hidden; 
        display: none; 
    }

    .mec-boton.es-colapsable:hover .mec-boton-texto { 
        display: inline-block; 
        max-width: 12.5rem; 
        opacity: 1; 
        margin-left: var(--sp-xs); 
    }
}

/* 2.4 Sub-elementos Internos de Botón */
.mec-boton-texto { 
    transition: all var(--trans-normal); 
}

/* --------------------------------------------------------------------------
   3. BOTONES ESPECIALIZADOS POR MÓDULO
   -------------------------------------------------------------------------- */

/* 3.1 Botón de Acceso y Login */
.mec-boton-toggle-pass {
    position: absolute;
    right: var(--sp-sm);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: var(--z-flotante);
    padding: var(--sp-xs);
    transition: color var(--trans-fast);
}

.mec-boton-toggle-pass:hover { 
    color: var(--color-turquesa); 
}

/* 3.2 Botón de Cierre de Sesión (Logout Institucional) */
/* 3.3 Botones de Conmutación de Vista (Toolbar) */
.mec-boton-vista {
    padding: 0 clamp(0.35rem, 0.8vw, 0.6rem);
    border: none;
}

.boton-vista-activo {
    background-color: var(--color-turquesa) !important;
    color: var(--color-blanco) !important;
    box-shadow: inset 0 0.1rem 0.3rem rgba(0,0,0,0.1);
}

.mec-boton-colapso-curso:hover { 
    background-color: var(--color-hielo-nav); 
}

/* 3.6 Botones de Notificación y Multimedia */
.mec-btn-notif-util {
    background: var(--color-nube);
    border: none;
    border-radius: var(--radio-pequeno);
    width: clamp(1.8rem, 4vh, 2.2rem);
    height: clamp(1.8rem, 4vh, 2.2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--trans-fast);
}

.mec-btn-notif-util:hover {
    background: var(--color-hielo);
}

.mec-btn-notif-util .mec-icono {
    transition: transform var(--trans-normal);
}

.mec-btn-notif-util.es-cerrar {
    opacity: 0.5;
}

.mec-btn-notif-util.es-cerrar:hover {
    opacity: 1;
    color: var(--color-rojo);
    transform: scale(1.1);
}

.mec-btn-reaccion:hover {
    transform: scale(1.3) translateY(-0.2rem);
}

.mec-chat-pie-input .mec-boton.es-circular { 
    width: 2.8rem !important; 
    height: 2.8rem !important; 
    flex-shrink: 0 !important; 
}

/* --------------------------------------------------------------------------
   4. SISTEMA DE ENLACES (LINKS)
   -------------------------------------------------------------------------- */

/* 4.1 Enlace Base */
.mec-enlace {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--sp-xs) var(--sp-sm);
    color: var(--color-petroleo);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radio-pequeno);
    transition: all var(--trans-fast);
}

.mec-enlace:hover { 
    background-color: var(--alpha-secundario); 
    color: var(--color-petroleo) !important; 
}

/* 4.2 Estados y Variantes de Enlace */
.mec-enlace:hover, 
.mec-enlace.es-activo {
    background-color: var(--alpha-blanco-suave);
    color: var(--color-damasco);
}

.mec-enlace.es-activo { 
    border-right: 0.25rem solid var(--color-damasco-oscurecido); 
}

.mec-enlace.es-etiqueta { 
    color: var(--color-gris-azulado); 
    text-decoration: none; 
}

/* --------------------------------------------------------------------------
   5. BARRA LATERAL DE NAVEGACIÓN (SIDEBAR MEC)
   -------------------------------------------------------------------------- */

/* 5.1 Estructura y Comportamiento del Menú Lateral */
#mec-menu-lateral {
    width: var(--sidebar-main-width); 
    background-color: var(--color-petroleo);
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    transition: width var(--trans-normal);
    z-index: var(--z-navegacion);
    overflow-x: hidden; 
    flex-shrink: 0; 
}

/* Estado contraído cuando no hay interacción de hover */
#mec-menu-lateral:not(:hover) {
    width: var(--sidebar-slim-width); 
}

/* Lógica de colapso de logout en sidebar */
#mec-menu-lateral:not(:hover) #mec-menu-lateral:not(:hover) /* En modo colapsado se oculta la identidad textual: el avatar y el acceso
   a cerrar sesión permanecen visibles y centrados. */
#mec-menu-lateral:not(:hover) .mec-menu-lateral-header > .mec-flex-contenedor > h6,
#mec-menu-lateral:not(:hover) .mec-menu-lateral-header > .mec-flex-contenedor > small {
    display: none;
}

/* 5.2 Secciones Internas del Menú Lateral */
.mec-menu-lateral-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.mec-menu-lateral-header { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    padding: var(--sp-md) 0; 
    min-height: auto; 
    border-bottom: var(--borde-delgado) solid var(--alpha-blanco-minimo); 
    gap: 0.5rem !important; 
}

.mec-menu-lateral-nav { 
    display: flex; 
    flex-direction: column; 
    padding: var(--sp-sm) 0; 
    gap: 0.25rem; 
    align-items: stretch; 
}

/* Sidebar: nombre corto en modo colapsado, completo al expandir */
.mec-sidebar-nombre-completo { display: none; }
.mec-sidebar-nombre-corto { display: block; }
.mec-logout-texto { display: none; }

#mec-menu-lateral:hover .mec-sidebar-nombre-completo { display: block; }
#mec-menu-lateral:hover .mec-sidebar-nombre-corto { display: none; }
#mec-menu-lateral:hover .mec-logout-texto { display: inline; }

/* 5.3 Enlaces de Navegación del Sidebar */
.mec-enlace-navegacion {
    display: flex;
    align-items: center;
    padding: var(--sp-sm) var(--sp-md);
    gap: 1.5rem;
    position: relative;
    color: var(--color-turquesa);
    text-decoration: none;
    transition: all var(--trans-fast);
    width: var(--sidebar-main-width);
    white-space: nowrap;
}

.mec-enlace-navegacion:hover {
    background-color: var(--alpha-blanco-suave);
    color: var(--color-damasco-palido);
}

.mec-enlace-navegacion.es-activo {
    background-color: var(--alpha-secundario);
    color: var(--color-damasco);
    border-left: 0.25rem solid var(--color-damasco);
}

.mec-enlace-navegacion .mec-icono {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-circular);
    z-index: var(--z-decoracion);
    transition: all var(--trans-normal);
}

.mec-enlace-navegacion .mec-texto {
    color: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

#mec-menu-lateral:hover .mec-enlace-navegacion .mec-texto {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   6. GRUPOS DE ACCIONES Y UTILIDADES INTERACTIVAS
   -------------------------------------------------------------------------- */

/* 6.1 Grupos de Acciones Centrados y Adaptativos */
.mec-grupo-acciones-centrado {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--mec-action-gap, 0.5rem);
    width: 100%;
}

.mec-grupo-acciones-centrado .mec-boton {
    flex: 1 1 auto;
    min-width: clamp(5rem, 8vw, 8rem);
}

.mec-grupo-acciones-centrado .mec-boton.es-circular {
    width: var(--mec-btn-size-std, clamp(2rem, 5vh, 2.5rem)) !important;
    height: var(--mec-btn-size-std, clamp(2rem, 5vh, 2.5rem)) !important;
    min-width: var(--mec-btn-size-std, clamp(2rem, 5vh, 2.5rem)) !important;
    padding: 0 !important;
}

.mec-grupo-acciones-centrado .mec-boton:not(.es-circular) {
    height: var(--mec-btn-size-std, clamp(2rem, 5vh, 2.5rem));
    padding: 0 var(--sp-md) !important;
    font-size: 0.7rem !important; 
}

/* 6.2 Grupos de Botones para Tablas */
.mec-tabla-grupo-botones {
    display: flex;
    inline-size: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--mec-action-gap, 0.4rem);
    max-width: clamp(10rem, 20vw, 15rem);
}

/* 6.3 Efectos y Disparadores Hover Utilitarios */
.mec-hover-click { 
    transition: var(--trans-fast); 
}

.mec-hover-click:active { 
    transform: scale(0.95); 
}

.mec-hover-subir { 
    transition: var(--trans-bounce); 
    will-change: transform; 
}

.mec-hover-subir:hover { 
    transform: translateY(-0.5rem); 
    box-shadow: 0 1rem 2.5rem rgba(26, 95, 102, 0.12); 
}

.mec-marcador-paso { 
    transition: all var(--trans-bounce); 
    cursor: pointer; 
    border: 0.125rem solid var(--color-hielo); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: var(--radio-circular); 
}

/* ==========================================================================
   PARTE 3: FORMULARIOS, CAMPOS DE CAPTURA, SELECTORES Y MARCADORES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ETIQUETAS Y CLASE MAESTRA DE CAMPO (INPUT BASE)
   -------------------------------------------------------------------------- */

/* 1.1 Etiquetas Institucionales de Campo */
.mec-etiqueta {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    font-family: var(--font-landing);
    font-weight: 800;
    font-size: var(--f-tiny);
    color: var(--color-turquesa);
    text-transform: uppercase;
    letter-spacing: var(--borde-delgado);
    padding: var(--sp-xs) 0;
    margin-bottom: var(--sp-sm);
    border-bottom: 0.125rem solid var(--color-turquesa);
}

/* 1.2 Clase Maestra: mec-campo */
.mec-campo {
    width: 100%;
    display: block;
    font-family: var(--font-landing);
    font-size: var(--f-base);
    color: var(--color-petroleo);
    background-color: var(--color-nube);
    border: 0.125rem solid var(--color-hielo);
    border-radius: var(--radio-pequeno);
    padding: var(--sp-sm) var(--sp-md);
    text-align: center; 
    transition: all var(--trans-normal);
    appearance: none;
    outline: none;
}

/* 1.3 Alineación Contextual */
.es-formulario .mec-campo,
.mec-campo.es-alinear-izquierda {
    text-align: left;
}

/* 1.4 Estados de Interacción del Campo */
.mec-campo:focus {
    background-color: var(--color-blanco);
    border-color: var(--color-turquesa);
    box-shadow: 0 0 0 0.375rem var(--alpha-secundario);
    transform: scale(1.01);
}

.mec-campo:hover {
    border-color: var(--color-turquesa);
    box-shadow: 0 0 0 0.125rem var(--alpha-secundario);
}

/* 1.5 Estilos de Ayuda (Placeholder) */
.mec-campo::placeholder {
    color: var(--color-gris-azulado);
    opacity: 0.5;
    font-style: italic;
    font-size: 0.9rem;
}

.mec-campo:-ms-input-placeholder { 
    color: var(--color-gris-azulado); 
    opacity: 0.5; 
}

.mec-campo::-ms-input-placeholder { 
    color: var(--color-gris-azulado); 
    opacity: 0.5; 
}

/* 1.6 Feedback de Validación / Error */
.es-invalido {
    animation: mecVibrar 0.4s ease-in-out;
    border-color: var(--color-rojo) !important;
}

/* --------------------------------------------------------------------------
   2. MODIFICADORES, DIMENSIONES Y TIPOS DE CAMPO
   -------------------------------------------------------------------------- */

/* 2.1 Campo Gigante (Códigos, Pines y Tokens) */
.mec-campo.es-gigante {
    font-family: var(--font-numeros);
    font-size: clamp(2rem, 8vw, 4rem);
    text-align: center;
    padding: var(--sp-md);
    border-radius: var(--radio-mediano);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-turquesa);
}

/* 2.2 Áreas de Texto Multilínea (Textareas) */
.mec-campo.es-area {
    min-height: clamp(7.5rem, 20dvh, 25rem); 
    line-height: 1.6;
    resize: vertical;
}

.mec-area-sm { 
    min-height: 5rem !important; 
}

.mec-contact-form-area { 
    min-height: 10rem; 
    width: 100%; 
}

/* 2.3 Selectores y Desplegables (Selects) */
.mec-campo-lista-contenedor {
    position: relative;
    width: 100%;
    display: flex;
}

.mec-campo.es-lista {
    cursor: pointer;
    padding-right: var(--sp-xl);
    background-image: none;
}

.mec-campo-lista-contenedor::after {
    content: '';
    position: absolute;
    right: var(--sp-md);
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    background-image: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/icons/chevron-down.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

select.mec-campo[multiple] {
    height: auto !important;
    min-height: 2.8rem;
    padding: 0.5rem !important;
}

select.mec-campo[multiple] option {
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
}

/* 2.4 Campos con Acción Integrada */
.mec-campo-con-accion {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 2.5 Controles Nativos y Entradas Especiales */
.mec-campo-invisible {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100%;
}

.mec-input-file-oculto {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: var(--z-tooltip);
}

.mec-input-zoom-range {
    height: 0.625rem !important;
    padding: 0 !important;
}

.es-monto-input {
    height: 4rem;
    font-size: 1.5rem !important;
    font-family: var(--font-numeros);
    font-weight: 800;
    color: var(--color-petroleo);
    text-align: center;
}

.es-monto-input:focus { 
    border-color: var(--color-turquesa); 
}

.mec-ancho-form-md { 
    width: clamp(8rem, 15vw, 12rem) !important; 
}

/* --------------------------------------------------------------------------
   3. SISTEMA DE SELECCIÓN UNIFICADO (MEC-MARCADOR)
   -------------------------------------------------------------------------- */

/* 3.1 Contenedor Maestro de Marcador */
.mec-marcador {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    cursor: pointer;
    position: relative;
    user-select: none;
    padding: var(--sp-xs);
    width: 100%;
    transition: transform var(--trans-fast), box-shadow var(--trans-fast);
}

.mec-marcador:hover {
    transform: translateY(-0.125rem);
    box-shadow: var(--sombra-sm);
}

.mec-marcador input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* 3.2 El Círculo Visual (Base Check) */
.mec-marcador-visual {
    width: 1.5rem;
    height: 1.5rem;
    border: 0.125rem solid var(--color-turquesa);
    border-radius: var(--radio-circular);
    background-color: var(--color-blanco);
    transition: all var(--trans-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.mec-marcador input:checked ~ .mec-marcador-visual {
    background-color: var(--color-turquesa);
    transform: scale(1.05);
}

.mec-marcador .mec-marcador-visual::after {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    background-image: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/icons/check.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--trans-normal), transform var(--trans-bounce);
}

.mec-marcador input:checked ~ .mec-marcador-visual::after {
    opacity: 1;
    transform: scale(1);
}

/* 3.3 Modificador: Interruptor (Switch) */
.mec-marcador.es-interruptor .mec-marcador-visual {
    width: 2.8125rem;
    height: 1.5rem;
    border-radius: var(--radio-pill);
    background-color: var(--color-gris-palido);
    border: none;
    justify-content: flex-start;
    padding: 0.15rem;
}

.mec-marcador.es-interruptor .mec-marcador-visual::before {
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--color-blanco);
    border-radius: var(--radio-circular);
    transition: transform var(--trans-bounce);
    box-shadow: var(--sombra-sm);
}

.mec-marcador.es-interruptor .mec-marcador-visual::after { 
    display: none; 
}

.mec-marcador.es-interruptor input:checked ~ .mec-marcador-visual {
    background-color: var(--color-turquesa);
}

.mec-marcador.es-interruptor input:checked ~ .mec-marcador-visual::before {
    transform: translateX(1.3rem);
}

/* 3.4 Modificador: Tarjeta de Materia */
.mec-marcador.es-tarjeta-materia {
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mec-marcador.es-tarjeta-materia:hover .mec-materia-box {
    border-color: var(--color-turquesa);
    background-color: var(--color-nube);
    transform: translateY(-0.15rem);
}

.mec-marcador.es-tarjeta-materia input:checked ~ .mec-materia-box {
    background-color: var(--color-blanco) !important;
    border-color: var(--color-turquesa) !important;
    border-width: 0.15rem;
    box-shadow: var(--sombra-md);
}

.mec-marcador.es-tarjeta-materia input:checked ~ .mec-materia-box .mec-texto {
    color: var(--color-turquesa) !important;
    font-weight: 800 !important;
}

.mec-marcador.es-tarjeta-materia input:checked ~ .mec-materia-box .mec-marcador-visual {
    background-color: var(--color-turquesa);
    border-color: var(--color-turquesa);
}

.mec-marcador.es-tarjeta-materia input:checked ~ .mec-materia-box .mec-marcador-visual::after {
    opacity: 1;
    transform: scale(1);
}

.mec-marcador.es-tarjeta-materia .mec-marcador-visual::after {
    background-image: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/icons/check.png');
}

/* 3.5 Responsividad de Marcadores */
@media (max-width: 48rem) {
    .mec-materia-box { 
        padding: var(--sp-xs); 
        gap: var(--sp-xs); 
    }

    .mec-marcador-visual { 
        width: 1.3rem; 
        height: 1.3rem; 
    }

    .mec-marcador.es-tarjeta-materia input:checked ~ .mec-materia-box .mec-marcador-visual::after {
        width: 0.7rem;
        height: 0.7rem;
    }
}

/* --------------------------------------------------------------------------
   5. CAMPOS Y BARRAS DE BÚSQUEDA ESPECIALIZADAS
   -------------------------------------------------------------------------- */

#busqueda-chat { 
    height: var(--mec-btn-size-std) !important; 
}

.mec-buscador-superior {
    height: clamp(1.9rem, 4.2vh, 2.3rem);
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 0 var(--sp-sm);
    background-color: var(--color-nube);
    border: var(--borde-delgado) solid var(--color-hielo);
    border-radius: var(--radio-pill);
    min-width: 0;
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.mec-buscador-superior:focus-within {
    border-color: var(--color-turquesa);
    box-shadow: 0 0 0 0.2rem var(--alpha-secundario);
    background-color: var(--color-blanco);
}

.mec-buscador-superior-botones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-xs);
    min-width: 0;
}

.mec-buscador-superior-capsula-vistas {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: clamp(1.9rem, 4.2vh, 2.3rem);
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
}

.mec-dropdown-vessel {
    position: relative;
    min-width: 0;
    flex: 1 1 0;
    max-width: 13rem;
    z-index: 1; /* Nivel base en reposo */
}

/* SOLUCIÓN AL Z-INDEX: Al hacer foco o abrirse, escala sobre sus hermanos */
.mec-dropdown-vessel:focus-within,
.mec-dropdown-vessel.es-abierto {
    z-index: var(--z-tooltip) !important;
}

.mec-dropdown-trigger {
    width: 100%;
    min-width: 0;
    background-color: var(--color-blanco);
    border-radius: var(--radio-pequeno);
    gap: 0.2rem;
    color: var(--color-petroleo);
    font-weight: 800;
    line-height: 1;
}

/* Escalas del disparador */
.mec-dropdown-vessel.es-sm .mec-dropdown-trigger {
    height: clamp(1.9rem, 4.2vh, 2.3rem);
    padding: 0 clamp(0.3rem, 0.8vw, 0.6rem);
    font-size: clamp(0.68rem, 1.1vw, 0.75rem);
}
.mec-dropdown-vessel.es-md .mec-dropdown-trigger {
    height: clamp(2.4rem, 5vh, 2.8rem);
    padding: 0 var(--sp-sm);
    font-size: 0.85rem;
}
.mec-dropdown-vessel.es-lg .mec-dropdown-trigger {
    height: clamp(3rem, 6vh, 3.5rem);
    padding: 0 var(--sp-md);
    font-size: 1rem;
}

/* Menú flotante desplegado */
.mec-dropdown-menu-flotante {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(90vw, 18rem);
    max-height: clamp(12rem, 40vh, 20rem);
    border-radius: var(--radio-mediano);
    border: var(--borde-delgado);
    z-index: var(--z-tooltip);
    box-shadow: var(--sombra-fuerte);
}

/* ==========================================================================
   PARTE 4: SISTEMA DE VISTAS UNIFICADO (GRID, LISTA Y TABLA)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES RAÍZ Y DENSIDAD DE VISTAS
   -------------------------------------------------------------------------- */

:root {
    --mec-card-min-width: clamp(16rem, 25vw, 22rem);
    --mec-strip-width: 0.45rem;
    --mec-action-gap: clamp(0.4rem, 1vw, 0.8rem);
    --mec-card-height-std: clamp(12rem, 18vh, 14rem);
    --mec-btn-size-std: clamp(2rem, 5vh, 2.5rem);
}

/* --------------------------------------------------------------------------
   2. CONTENEDOR MAESTRO: TARJETA CENTRALIZADA (MODO CUADRÍCULA)
   -------------------------------------------------------------------------- */

/* 2.1 Estructura Base de la Tarjeta Centralizada */
.mec-tarjeta-centralizada {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--color-blanco);
    border-radius: var(--radio-mediano);
    border: var(--borde-delgado);
    border-color: var(--color-hielo);
    padding: 0 !important;
    overflow: hidden;
    transition: transform var(--trans-bounce), box-shadow var(--trans-normal);
    min-height: var(--mec-card-height-std);
    max-width: 32rem;
    width: 100%;
}

.mec-tarjeta-centralizada:hover {
    transform: translateY(-0.4rem);
    box-shadow: var(--sombra-md);
}

/* 2.2 Franja Lateral Indicadora de Color */
.mec-tarjeta-indicador {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--mec-strip-width);
    z-index: var(--z-decoracion);
}

/* Variantes Cromáticas del Indicador */
.mec-tarjeta-indicador.es-turquesa { 
    background-color: var(--color-turquesa); 
}

.mec-tarjeta-indicador.es-damasco { 
    background-color: var(--color-damasco); 
}

.mec-tarjeta-indicador.es-petroleo { 
    background-color: var(--color-petroleo); 
}

.mec-tarjeta-indicador.es-rojo { 
    background-color: var(--color-rojo); 
}

/* 2.3 Sub-elementos Estructurales de la Tarjeta */
.mec-tarjeta-header-unificado {
    padding: var(--sp-sm) var(--sp-md) var(--sp-xs) calc(var(--sp-md) + var(--mec-strip-width));
    width: 100%;
}

.mec-tarjeta-header-unificado h5 {
    font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
    margin-bottom: 0.1rem !important;
}

.mec-tarjeta-data-unificada {
    padding: var(--sp-xs) var(--sp-md) var(--sp-sm) calc(var(--sp-md) + var(--mec-strip-width));
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.mec-tarjeta-footer-unificado {
    padding: var(--sp-md);
    background-color: var(--color-nube);
    border-top: var(--borde-delgado) solid var(--color-hielo);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Blindaje de Centrado en Pantallas Grandes */
@media (min-width: 64rem) {
    .mec-tarjeta-centralizada {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --------------------------------------------------------------------------
   3. MAQUETACIÓN PARA MODO LISTA (FILA HORIZONTAL LÍQUIDA)
   -------------------------------------------------------------------------- */

/* 3.1 Contenedor General en Modo Lista */
.es-modo-lista {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-sm) !important;
}

/* 3.2 Adaptación Horizontal de la Tarjeta */
.es-modo-lista .mec-tarjeta-centralizada {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: row !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: clamp(5rem, 10vh, 7rem);
}

/* 3.3 Distribución de Secciones Internas en Lista */
.es-modo-lista .mec-tarjeta-header-unificado {
    flex: 2 1 40% !important;
    min-width: 0;
    padding: var(--sp-sm) var(--sp-md);
    padding-left: calc(var(--sp-md) + var(--mec-strip-width));
}

.es-modo-lista .mec-tarjeta-data-unificada {
    flex: 1 1 30% !important;
    padding: var(--sp-sm);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-left: var(--borde-delgado) dotted var(--color-hielo);
    border-right: var(--borde-delgado) dotted var(--color-hielo);
}

.es-modo-lista .mec-tarjeta-footer-unificado {
    flex: 1 1 30% !important;
    background: transparent;
    border: none;
    border-top: none;
    justify-content: flex-end;
    padding-right: var(--sp-md);
}

/* 3.4 Responsividad del Modo Lista en Dispositivos Móviles */
@media (max-width: 48rem) {
    .es-modo-lista .mec-tarjeta-centralizada {
        min-height: clamp(3.2rem, 7vh, 4.2rem) !important;
        padding: 0.35rem 0.6rem !important;
        gap: 0.4rem !important;
    }
    
    .es-modo-lista .mec-tarjeta-header-unificado {
        flex: 2 1 auto !important;
        padding: 0 0.3rem !important;
    }

    .es-modo-lista .mec-tarjeta-data-unificada {
        flex: 1 1 auto !important;
        padding: 0 0.3rem !important;
        border: none !important;
    }

    .es-modo-lista .mec-tarjeta-footer-unificado {
        flex: 0 0 auto !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   4. ADAPTACIÓN PARA MODO TABLA
   -------------------------------------------------------------------------- */

.es-modo-tabla {
    display: block !important;
    background: white;
    border-radius: var(--radio-mediano);
    box-shadow: var(--sombra-sm);
    overflow-x: auto;
    border: var(--borde-delgado);
    width: 100%;
}

.mec-tabla-celda-acciones {
    text-align: right !important;
    white-space: nowrap;
}

/* 5.2 Modo Tarjetas Líquidas */
.es-modo-tarjetas {
    grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 28vw, 22rem), 1fr));
}

/* --------------------------------------------------------------------------
   7. ESCENARIO VIVO INTERACTIVO (BIENVENIDA)
   -------------------------------------------------------------------------- */

/* 7.1 Elementos Flotantes y Arrastrables */
.mec-item-vivo {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: grab;
}

.mec-item-vivo .mec-icono {
    pointer-events: none;
}

/* 7.2 Cartel Heroico de Bienvenida */
#bienvenidos-cartel {
    z-index: 100;
}

#bienvenidos-cartel h1 {
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.2rem;
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    filter: drop-shadow(0 0.5rem 1rem rgba(26, 95, 102, 0.2));
}

/* ==========================================================================
   PARTE 5: INDICADORES VISUALES, BADGES, PUNTOS, PÍLDORAS Y SEPARADORES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SISTEMA DE BADGES Y ETIQUETAS DE ESTADO
   -------------------------------------------------------------------------- */

/* 1.1 Badge Estándar Universal */
.mec-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 1rem;
    border-radius: var(--radio-mediano);
    font-weight: 800;
    font-size: 0.75rem;
    width: auto;
    height: auto;
    white-space: nowrap;
    background-color: var(--color-hielo);
    color: var(--color-petroleo);
}

/* Modificadores de Dimensión */
.mec-badge--sm { 
    padding: 0.125rem 0.6rem; 
    font-size: 0.65rem; 
}

.mec-badge--lg { 
    padding: 0.35rem 1.25rem; 
    font-size: 0.85rem; 
}

/* 1.2 Badges Notificadores Numéricos */
.mec-badge-notif { 
    width: 1.25rem; 
    height: 1.25rem; 
    font-size: 0.6rem; 
    border-radius: var(--radio-circular);
    background-color: var(--color-rojo);
    color: var(--color-blanco);
}

.mec-badge-notif-flotante {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    z-index: var(--z-flotante);
}

.es-damasco-contorno {
    border: 0.125rem solid var(--color-acento);
    color: var(--color-acento);
    padding: 0.2rem 0.8rem;
    border-radius: var(--radio-pill);
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   2. PÍLDORAS DE IDENTIDAD Y USUARIO
   -------------------------------------------------------------------------- */

/* 2.1 Contenedor Maestro de Píldora de Identidad */
.mec-pildora-identidad {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-blanco);
    border: 0.125rem solid var(--alpha-secundario);
    border-radius: var(--radio-pill);
    padding: 0.25rem;
    padding-right: 0.75rem;
    gap: 0.8rem;
    box-shadow: var(--sombra-sm);
    transition: all var(--trans-normal);
    height: fit-content;
}

.mec-pildora-identidad:hover {
    border-color: var(--color-turquesa);
    box-shadow: var(--sombra-md);
}

/* 2.2 Componentes Internos de la Píldora */
.mec-pildora-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}

.mec-pildora-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.mec-pildora-logout {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radio-circular);
    background-color: var(--color-nube);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--trans-fast);
    flex-shrink: 0;
    color: var(--color-rojo);
}

.mec-pildora-logout:hover {
    background-color: var(--color-rojo-palido);
    transform: scale(1.1);
}

.mec-relleno-pildora { 
    padding: 0.25rem !important; 
    border-radius: var(--radio-pill); 
}

/* --------------------------------------------------------------------------
   3. SISTEMA DE PUNTOS (STATUS INDICATORS)
   -------------------------------------------------------------------------- */

/* 3.1 Estructura Base del Punto */
.mec-punto {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radio-circular);
    background-color: var(--color-gris-palido);
    flex-shrink: 0;
    transition: transform var(--trans-fast), background-color var(--trans-fast);
}

/* 3.2 Modificadores de Estado e Interacción */
.mec-punto.es-interactivo:hover {
    transform: scale(1.2);
    cursor: pointer;
}

.mec-punto.es-presencia {
    position: absolute;
    bottom: 0.1rem;
    right: 0.1rem;
    border: 0.125rem solid white;
    z-index: var(--z-decoracion);
}

.mec-punto.es-presencia.es-en-linea { 
    background-color: var(--color-verde); 
}

.mec-punto.es-presencia.es-desconectado { 
    background-color: var(--color-rojo); 
}

.mec-punto.es-miniatura {
    width: 1.25rem;
    height: 0.5rem;
    border-radius: var(--radio-mediano);
    background-color: var(--color-hielo);
}

.mec-punto.es-pulso {
    background-color: var(--color-rojo);
    animation: mecParpadeo 1s infinite;
}

.mec-punto.es-grabando { 
    animation: mecLatirRojo 1.5s infinite; 
    color: var(--color-rojo) !important; 
}

.mec-punto.es-union {
    width: 1rem;
    height: 1rem;
    background-color: var(--color-turquesa);
    cursor: crosshair;
}

/* --------------------------------------------------------------------------
   4. LÍNEAS, BORDES Y SEPARADORES (DIVIDERS)
   -------------------------------------------------------------------------- */

/* 4.1 Utilidades de Borde Direccional */
.mec-borde-superior   { border-top: var(--borde-delgado) !important; }
.mec-borde-inferior   { border-bottom: var(--borde-delgado) !important; }
.mec-borde-derecho    { border-right: var(--borde-delgado) !important; }
.mec-borde-marca-suave { border: 0.125rem solid var(--color-turquesa) !important; }

/* 4.3 Líneas Funcionales y Guías de Trazo */
.mec-firma-linea {
    width: 100%;
    max-width: 15rem; 
    margin: var(--sp-md) auto 0;
    border-top: 0.125rem solid var(--color-petroleo);
    padding-top: var(--sp-xs);
    text-align: center;
    display: block;
}

.mec-cali-guia {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-bottom: 0.125rem dashed var(--color-hielo);
    border-top: var(--borde-delgado) solid var(--alpha-secundario);
    top: 33%;
    height: 33%;
}

/* 5.2 Riel y Llenado de Progreso */
.mec-barra-progreso {
    width: 100%;
    height: 1rem;
    background-color: var(--color-nube);
    border-radius: var(--radio-pill);
    border: var(--borde-delgado) solid var(--color-hielo);
    overflow: hidden;
    position: relative;
}

.mec-barra-progreso.es-gruesa { 
    border-width: 0.125rem; 
}

.mec-barra-progreso.es-flexible { 
    flex-grow: 1; 
    width: auto; 
}

.mec-barra-progreso-llenado {
    height: 100%;
    width: 0%; 
    background-color: var(--color-petroleo);
    border-radius: var(--radio-pill);
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Variantes Cromáticas de Progreso */
.mec-barra-progreso-llenado.es-turquesa { background-color: var(--color-turquesa); }
.mec-barra-progreso-llenado.es-damasco  { background-color: var(--color-damasco); }
.mec-barra-progreso-llenado.es-verde    { background-color: var(--color-verde); }
.mec-barra-progreso-llenado.es-rojo     { background-color: var(--color-rojo); }

/* 5.4 Temporizador Notificador de Barra */
.mec-notif-progress-riel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background: rgba(0, 0, 0, 0.05);
}

.mec-notif-progress-fill {
    height: 100%;
    width: 100%;
    background-color: var(--color-turquesa);
    transform-origin: left;
    animation: mecAparicionNotificacion linear forwards;
}

.mec-onda-audio-barra { 
    width: 0.5rem; 
    height: 1.25rem; 
    background: var(--color-turquesa); 
    border-radius: var(--radio-pill); 
    transition: height 0.2s ease; 
}

/* ==========================================================================
   PARTE 6: ARQUITECTURA MAESTRA, CUADRÍCULAS (GRIDS), FLEXBOX Y BARRAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARQUITECTURA MAESTRA Y CONTENEDORES GLOBALES
   -------------------------------------------------------------------------- */

/* 1.1 Disposición Raíz del Sistema */
#mec-disposicion-maestra {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
    background-color: var(--color-nube);
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    overflow: hidden;
}

/* 1.2 Contenedor de Flujo Principal */
#mec-contenedor-principal {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    padding: var(--sp-md) var(--sp-lg) var(--sp-xl) var(--sp-lg); 
}

#mec-workspace {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 0 !important; /* Fuerza al motor flex a respetar el 100% restante */
    height: 100dvh;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative;
}

/* El overlay móvil no debe bloquear clics en escritorio si no está activo */
#mec-menu-lateral-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-navegacion) - 1);
    pointer-events: none;
}

#mec-menu-lateral-overlay.es-visible {
    display: block;
    pointer-events: auto;
}

/* Botón de toggle en el header: solo visible en pantallas móviles */
#mec-boton-toggle-sidebar {
    display: none;
}

@media (max-width: 48rem) {
    #mec-boton-toggle-sidebar {
        display: flex;
    }
}

/* 1.3 Contenedor Raíz Institucional */
.mec-contenedor-raiz {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: clamp(var(--sp-sm), 5vw, var(--sp-xl));
    padding-right: clamp(var(--sp-sm), 5vw, var(--sp-xl));
    max-width: 120rem;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* 1.4 Contenedores de Vistas Específicas */
.mec-contenedor-publico { 
    max-width: 75rem; 
    margin: 0 auto; 
    padding: var(--sp-lg) var(--sp-md); 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
}

.mec-documento-legal-contenedor { 
    max-width: 50rem; 
    margin: 0 auto; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.mec-inscripcion-sidebar-sticky { 
    position: -webkit-sticky; 
    position: sticky; 
    top: var(--sp-lg); 
    align-self: start;
}

/* --------------------------------------------------------------------------
   2. SISTEMA DE CUADRÍCULA INTELIGENTE (CSS GRID)
   -------------------------------------------------------------------------- */

/* 2.1 Cuadrícula Base */
.mec-cuadricula {
    display: grid;
    gap: clamp(var(--sp-md), 3vw, var(--sp-lg));
    width: 100%;
    justify-items: center; 
}

/* Modificadores de Estado de Cuadrícula */
.mec-cuadricula.es-estirada, 
.mec-cuadricula.es-formulario {
    justify-items: stretch; 
}

/* 2.2 Cuadrícula Líquida (Auto-Fit) */
.mec-cuadricula-auto {
    display: grid;
    width: 100%;
    justify-content: center;
    justify-items: stretch;
    align-items: center;
    gap: var(--grid-gap, var(--sp-md));
    grid-template-columns: repeat(
        var(--grid-mode, auto-fit), 
        minmax(min(100%, var(--grid-min, 17.5rem)), 1fr)
    );
}

/* Modificadores de Espaciado (Gap) */
.mec-cuadricula-auto.es-pequeno { 
    --grid-gap: var(--sp-sm); 
}

.mec-cuadricula-auto.es-grande { 
    --grid-gap: var(--sp-lg); 
}

.mec-cuadricula-auto.es-dinamico { 
    --grid-gap: clamp(var(--sp-md), 4vw, var(--sp-lg)); 
}

/* Modificadores de Ancho Mínimo de Columna */
.mec-cuadricula-auto.es-miniatura { 
    --grid-mode: auto-fill;
    --grid-min: clamp(6.25rem, 20vw, 11rem); 
}

.mec-cuadricula-auto.es-flexible { 
    --grid-min: clamp(16rem, 20vw, 22rem);
}

.mec-cuadricula-auto.es-ancho { 
    --grid-min: clamp(15rem, 100%, 28rem); 
    --grid-gap: var(--sp-lg);
}

/* 2.3 Cuadrículas de Columnas Fijas */
.mec-cuadricula.es-dos-columnas { 
    grid-template-columns: repeat(2, 1fr); 
}

.mec-cuadricula-2a1 { 
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: var(--sp-md); 
    width: 100%; 
    align-items: start;
}

/* Contacto: columna de datos angosta, formulario protagonista */
.mec-cuadricula-2a1.es-contacto { grid-template-columns: 1fr minmax(15rem, 19rem); align-items: start; }
@media (max-width: 48rem) { .mec-cuadricula-2a1.es-contacto { grid-template-columns: 1fr; } }

.mec-columna-doble { 
    grid-column: span 2; 
}

/* Adaptación Responsiva para Cuadrículas Fijas */
@media (max-width: 48rem) {
    
    .mec-columna-doble { 
        grid-column: span 1; 
    }
}

/* --------------------------------------------------------------------------
   3. CUADRÍCULAS ESPECIALIZADAS POR MÓDULO
   -------------------------------------------------------------------------- */

.mec-cuadricula-inscripcion-materias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(10rem, 25vw, 13rem), 1fr));
    gap: var(--sp-sm);
    width: 100%;
}

.mec-cuadricula-formulario-pago { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); 
    align-items: start; 
    gap: var(--sp-lg); 
    width: 100%; 
}

.mec-cuadricula-memoria-escenario {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(clamp(6rem, 15dvh, 8.5rem), 1fr));
    gap: var(--sp-md); 
    width: 100%; 
    justify-content: center;
}

/* --------------------------------------------------------------------------
   4. MOTOR FLEXIBLE (FLEXBOX CORE)
   -------------------------------------------------------------------------- */

/* 4.1 Contenedor Base Flex */
.mec-flex-contenedor {
    display: flex;
    gap: var(--sp-md);
    width: 100%;
}

/* 4.2 Alineaciones y Modificadores Flex */
.mec-flex-centrado { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center;
}

.mec-flex-espaciado { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

.mec-flex-columna { 
    display: flex; 
    flex-direction: column; 
}

.mec-flex-envolver { 
    flex-wrap: wrap; 
}

/* 4.3 Dimensionamiento y Rigidez de Bloques */
.mec-flex-fijo { 
    flex-shrink: 0; 
}

.mec-flex-fijo-mes { 
    flex: 1 1 9rem; 
    text-align: center; 
}

nav ul.mec-flex-contenedor {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   5. BARRAS INSTITUCIONALES Y ENCABEZADOS
   -------------------------------------------------------------------------- */

/* 5.1 Barra de Navegación Superior Fija */
.mec-barra-navegacion { 
    width: 100%;
    background-color: var(--color-blanco);
    border-bottom: var(--borde-marca);
    box-shadow: var(--sombra-md);   
    position: sticky;
    top: 0;                         
    z-index: var(--z-navegacion);   
    transition: background-color var(--trans-normal), box-shadow var(--trans-normal);
}

/* 5.2 Barra de Herramientas Superior */
.mec-barra-herramientas-superior {
    position: relative;
    z-index: calc(var(--z-tooltip) + 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.3rem, 1vw, 0.6rem);
    background-color: var(--color-petroleo);
    background-image: linear-gradient(135deg, var(--color-petroleo) 0%, var(--color-petroleo-oscurecido, #1a3f42) 100%);
    padding: 0.3rem clamp(0.4rem, 1.2vw, 0.9rem);
    border-radius: var(--radio-mediano);
    margin-bottom: var(--sp-md);
    min-height: clamp(2.5rem, 5.5vh, 3.2rem);
    color: var(--color-blanco);
    flex-wrap: nowrap;
    overflow: visible !important;
    box-shadow: 0 0.25rem 0.75rem rgba(26, 95, 102, 0.25);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.mec-barra-superior-filtros {
    display: flex;
    align-items: center;
    gap: clamp(0.2rem, 0.6vw, 0.4rem);
    flex: 1 1 auto;
    min-width: 0;
}

/* 5.3 Encabezado Dashboard */
#mec-dashboard-header { 
    background-color: var(--color-blanco); 
    padding: var(--sp-md) var(--sp-lg); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: var(--borde-delgado) solid var(--color-hielo); 
    z-index: var(--z-navegacion); 
}

/* 5.4 Encabezado de Sección Heroica */
.mec-seccion-encabezado { 
    background: linear-gradient(135deg, var(--color-hielo) 0%, white 100%); 
    padding: clamp(var(--sp-lg), 8dvh, var(--sp-xl)) 0; 
    border-bottom: 0.125rem solid var(--alpha-secundario); 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
}

/* 5.6 Barra de Pie Institucional (Footer) */
.mec-barra-footer {
    width: 100%;
    background-color: var(--color-petroleo);
    padding: var(--sp-sm) 0;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ==========================================================================
   PARTE 7: CAPAS, TELONES, MODALES, NOTIFICACIONES (TOASTS) Y OVERLAYS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CARGADORES UNIVERSALES Y TELONES BASE (TOP LAYER & BACKDROP)
   -------------------------------------------------------------------------- */

/* 1.1 Cargadores de Máxima Prioridad */
#universal-loader, 
#mec-universal-loader {
    z-index: var(--z-loader) !important;
}

/* 1.2 Telón Base de Fondo (Backdrop Maestro) */
#modalMaestro, 
.mec-capa-base {
    position: fixed !important;
    inset: 0;
    z-index: var(--z-overlay);
    background-color: var(--alpha-petroleo-fuerte);
    backdrop-filter: var(--blur-cristal);
    -webkit-backdrop-filter: var(--blur-cristal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-md);
    transition: opacity var(--trans-normal), visibility var(--trans-normal);
}

/* 1.3 Modificador: Capa Transparente (Bloqueo de Interacción) */
.mec-capa-base.es-transparente {
    background-color: var(--alpha-blanco-cristal);
    backdrop-filter: blur(0.25rem);
    position: absolute; 
    border-radius: inherit;
}

/* 1.4 Modificador: Cargador de Pantalla Completa */
.mec-capa-base.es-cargador {
    background-color: var(--color-nube);
    z-index: var(--z-loader);
    flex-direction: column;
    gap: var(--sp-md);
}

/* --------------------------------------------------------------------------
   2. VENTANA EMERGENTE (MODAL BOX)
   -------------------------------------------------------------------------- */

/* 2.1 Estructura Principal del Modal */
.mec-ventana-emergente {
    background-color: var(--color-blanco);
    border-radius: clamp(1.56rem, 5dvh, 2.81rem);
    box-shadow: var(--sombra-elevada);
    width: 100%;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: var(--borde-delgado) solid var(--alpha-blanco-medio);
    animation: mecAparecerArriba var(--trans-normal) var(--trans-bounce) forwards;
    z-index: var(--z-modal) !important;
}

/* 2.5 Botón de Cierre del Modal */
.mec-ventana-cerrar {
    position: absolute;
    top: var(--sp-md);
    right: var(--sp-md);
    z-index: var(--z-superior);
    transition: transform var(--trans-fast), color var(--trans-fast);
    cursor: pointer;
    background: var(--color-nube);
    border-radius: var(--radio-circular);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mec-btn-size-std);
    height: var(--mec-btn-size-std);
}

.mec-ventana-cerrar:hover {
    transform: scale(1.1) rotate(90deg);
    color: var(--color-rojo);
    background: var(--color-rojo-palido);
}

.mec-ventana-cerrar:focus-visible {
    outline: 2px solid var(--color-turquesa);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. SISTEMA DE NOTIFICACIONES FLOTANTES (MEC-INTEL-TOAST)
   -------------------------------------------------------------------------- */

/* 3.1 Contenedor Maestro de Notificaciones */
#mec-notif-container {
    position: fixed;
    top: clamp(1rem, 3vh, 3rem);
    right: clamp(1rem, 3vw, 3rem);
    z-index: var(--z-notificacion) !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    max-width: min(90vw, 25rem);
}

/* 3.2 Caja Base de la Notificación (Toast) */
.mec-general-toast {
    position: relative;
    min-width: clamp(15rem, 40vw, 20rem);
    max-width: clamp(18rem, 90vw, 25rem);
    background: var(--color-blanco);
    border-radius: 1.25rem;
    box-shadow: var(--sombra-fuerte);
    border-left: 0.5rem solid var(--color-turquesa) !important;
    overflow: hidden;
    pointer-events: auto;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: mecAparecerDerecha var(--dur-normal) cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 3.3 Envoltorios y Contenido Interno */
.mec-toast-wrapper {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.25rem;
}

.mec-toast-content {
    display: flex;
    align-items: center;
    padding: var(--sp-sm) var(--sp-md);
    gap: var(--sp-md);
}

.mec-toast-body {
    flex: 1;
    min-width: 0;
}

.mec-toast-message {
    color: var(--color-petroleo);
    font-weight: 800;
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    line-height: 1.3;
    display: block;
}

.mec-toast-actions {
    display: flex;
    gap: var(--sp-xs);
}

/* 3.4 Área de Detalles de Error Agrupados */
.mec-toast-details {
    background: var(--color-nube);
    padding: var(--sp-sm) var(--sp-md);
    border-top: 0.0625rem dashed var(--color-hielo);
    max-height: 15rem;
    overflow-y: auto;
}

.mec-toast-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mec-toast-details li {
    padding: var(--sp-xs) 0;
    border-bottom: var(--borde-delgado) solid rgba(0,0,0,0.03);
    color: var(--color-gris-azulado);
    font-family: var(--font-numeros);
    font-size: 0.7rem;
}

.mec-toast-details:not(.mec-oculto-total) {
    animation: mecAparecerAbajo var(--dur-normal) var(--trans-smooth) forwards;
}

/* 3.5 Variantes Semánticas de Notificación */
.mec-general-toast.is-success {
    border-left-color: var(--color-verde) !important;
}

.mec-general-toast.is-success .mec-notif-progress-fill {
    background-color: var(--color-verde);
}

.mec-general-toast.is-error {
    border-left-color: var(--color-rojo) !important;
}

.mec-general-toast.is-error .mec-notif-progress-fill {
    background-color: var(--color-rojo);
}

.mec-general-toast.is-warning {
    border-left-color: var(--color-naranjo) !important;
}

.mec-general-toast.is-warning .mec-notif-progress-fill {
    background-color: var(--color-naranjo);
}

/* --------------------------------------------------------------------------
   4. MENÚS CONTEXTUALES, POPOVERS Y PANELES FLOTANTES
   -------------------------------------------------------------------------- */

/* 4.1 Menú Contextual Desplegable */
.mec-menu-contextual {
    position: fixed;
    z-index: calc(var(--z-tooltip) + 2);
    padding: var(--sp-xs);
    min-width: 11.25rem;
    background: white;
    border-radius: var(--radio-mediano);
    border: var(--borde-delgado);
    box-shadow: var(--sombra-md);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.mec-menu-contextual.es-visible {
    position: fixed;
    left: var(--mec-menu-x);
    top: var(--mec-menu-y);
}

.mec-menu-item {
    display: flex;
    align-items: center;
    padding: 0.6rem;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}

.mec-menu-item:hover {
    background-color: var(--alpha-secundario) !important;
}

/* 4.3 Panel Flotante de Propiedades de Ejercicio */
#mec-panel-propiedades-ejercicio {
    z-index: calc(var(--z-navegacion) + 1);
}

@media (max-width: 48rem) {
    #mec-panel-propiedades-ejercicio { 
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 70dvh; 
        z-index: var(--z-modal); 
    }
}

/* --------------------------------------------------------------------------
   5. ADAPTACIÓN DRAWER (MODALES EN DISPOSITIVOS MÓVILES)
   -------------------------------------------------------------------------- */

@media (max-width: 36rem) {
    .mec-capa-base {
        align-items: flex-end; 
        padding: 0;
    }

    .mec-ventana-emergente {
        border-radius: 1.875rem 1.875rem 0 0; 
        max-height: 95dvh;
    }
}

/* --------------------------------------------------------------------------
   3. MEJORAS DE CONMUTADOR DE MODO (THEME SWITCHER)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .mec-barra-herramientas-superior {
        background-color: var(--color-petroleo) !important;
        color: var(--color-blanco) !important;
    }
    
    html:not([data-theme="light"]) .mec-boton {
        color: var(--color-blanco) !important;
    }
}

/* --------------------------------------------------------------------------
   4. ANIMACIONES SÓLIDAS (SIN TRANSITION EN REDUCED MOTION)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mec-boton:hover {
        transform: none !important;
        transition: none !important;
    }
    
    .mec-tarjeta:hover {
        transform: none !important;
        transition: none !important;
    }
    
    .mec-badge--lg,
    .mec-badge--sm {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   6. BARRA DE ACCESIBILIDAD (A11Y)
   -------------------------------------------------------------------------- */
.mec-a11y-barra {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: var(--alpha-secundario);
    border-radius: var(--radio-pequeno);
}

.mec-a11y-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--color-hielo);
    border-radius: var(--radio-circular);
    background: var(--color-blanco);
    cursor: pointer;
    transition: all var(--trans-fast);
}

.mec-a11y-boton:hover {
    background: var(--color-turquesa);
    color: var(--color-blanco);
    transform: scale(1.05);
}

.mec-a11y-boton[aria-pressed="true"] {
    background: var(--color-turquesa);
    color: var(--color-blanco);
}

/* --------------------------------------------------------------------------
   7. FAQ ACORDEÓN (v11 style)
   -------------------------------------------------------------------------- */
.mec-acordeon-faq { counter-reset: faq; width: 100%; align-self: stretch; text-align: left; min-width: 0; max-width: 100%; }
.mec-acordeon-item { counter-increment: faq; }

.mec-acordeon-item {
    background-color: var(--color-blanco);
    border: var(--borde-delgado);
    border-radius: var(--radio-mediano);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
    width: 100%;
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background-color var(--trans-fast);
}

.mec-acordeon-item:hover { border-color: var(--color-turquesa); box-shadow: var(--sombra-discreta); }

.mec-acordeon-item[open] {
    border-color: var(--color-turquesa);
    box-shadow: var(--sombra-estandar);
    background-color: var(--color-crema);
}

.mec-acordeon-summary {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color var(--trans-fast);
}

.mec-acordeon-summary::-webkit-details-marker { display: none; }
.mec-acordeon-summary::marker { content: ""; }
.mec-acordeon-summary:hover { background-color: var(--alpha-primario); }
.mec-acordeon-item[open] > .mec-acordeon-summary { border-bottom: var(--borde-delgado); }

.mec-acordeon-summary::before {
    content: counter(faq, decimal-leading-zero);
    flex-shrink: 0;
    min-width: 2.1rem;
    padding: 0.15rem 0.4rem;
    text-align: center;
    font-family: var(--font-numeros);
    font-size: var(--f-tiny);
    font-weight: 700;
    color: var(--color-petroleo);
    background-color: var(--color-petroleo-palido);
    border-radius: var(--radio-pequeno);
    transition: background-color var(--trans-fast), color var(--trans-fast);
}

.mec-acordeon-item[open] > .mec-acordeon-summary::before {
    color: var(--color-petroleo);
    background-color: var(--color-turquesa);
}

.mec-acordeon-summary > .mec-texto { flex: 1 1 auto; min-width: 0; }

.mec-acordeon-icono {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radio-circular);
    background-color: var(--color-nube);
    transition: background-color var(--trans-fast);
}

.mec-acordeon-summary:hover .mec-acordeon-icono { background-color: var(--alpha-secundario); }
.mec-acordeon-item[open] > .mec-acordeon-summary .mec-acordeon-icono { background-color: var(--color-turquesa); }

.mec-acordeon-contenido {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: var(--alpha-primario);
    border-left: 0.25rem solid var(--color-turquesa);
    transition: max-height var(--trans-normal), opacity var(--trans-fast);
}

#faq-section {
    align-self: stretch;
    width: 100%;
}

.mec-acordeon-contenido > .mec-texto {
    padding: var(--sp-sm) var(--sp-md);
    color: var(--color-gris);
    line-height: 1.65;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 30rem) {
    .mec-acordeon-summary { padding: var(--sp-sm); gap: 0.6rem; align-items: flex-start; }
    .mec-acordeon-contenido > .mec-texto { padding: var(--sp-sm); }
}

/* ==========================================================================
   FIN DE ACTUALIZACIÓN V11: @layer, accesibilidad y mejoras
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MOTOR DE ICONOGRAFÍA: MEC-ICONO
   -------------------------------------------------------------------------- */

/* 1.1 Clase Maestra de Iconografía Universal */
.mec-icono {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: none !important; 
    transform: scale(1.1);
}

/* 1.2 Escalas Proporcionales de Icono (Unidades EM) */
.mec-icono.es-diminuto { 
    width: 0.8em; 
    height: 0.8em; 
}

.mec-icono.es-pequeno { 
    width: 1em; 
    height: 1em; 
}

.mec-icono.es-grande { 
    width: 2em; 
    height: 2em; 
}

.mec-icono.es-gigante { 
    width: 4em; 
    height: 4em; 
}

/* 1.3 Transformaciones y Estados de Icono */
.mec-icono.es-giratorio { 
    animation: mecGirar 2s linear infinite; 
}

.mec-icono.es-invertido { 
    transform: scaleX(-1); 
}

/* 2.2 Banner Institucional Fluido */
.mec-imagen-banner {
    width: 100%;
    max-height: clamp(15.6rem, 40dvh, 31.25rem);
    object-fit: cover;
    border-radius: var(--radio-grande);
}

/* 2.4 Medios de Sección Institucional (Nosotros) */
.mec-nosotros-intro { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: var(--sp-lg); 
    flex-wrap: wrap; 
    width: 100%; 
}

.mec-nosotros-col-izq { 
    flex: 1; 
    min-width: 18rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
}

.mec-nosotros-imagen { 
    max-width: 100%; 
    height: auto; 
    width: clamp(10rem, 50vw, 15rem); 
    filter: drop-shadow(0 0.5rem 1rem var(--alpha-primario)); 
    opacity: 0.8; 
    transition: opacity var(--trans-normal), transform var(--trans-normal); 
}

/* --------------------------------------------------------------------------
   3. AVATARES, CÍRCULOS Y CAPAS GRÁFICAS
   -------------------------------------------------------------------------- */

/* 3.1 Contenedor Circular Universal */
.mec-contenedor-circular {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center;
    border-radius: var(--radio-circular);
    flex-shrink: 0;
    overflow: hidden;
    position: relative !important;
    width: 3.5rem;
    height: 3.5rem;
    transition: transform var(--trans-normal), background-color var(--trans-fast), box-shadow var(--trans-fast);
}

/* Modificadores de Dimensión */
.mec-contenedor-circular.es-grande {
    width: clamp(3.5rem, 10vw, 4.5rem);
    height: clamp(3.5rem, 10vw, 4.5rem);
}

.mec-contenedor-circular.es-hero {
    width: clamp(3.5rem, 12vw, 6rem);
    height: clamp(3.5rem, 12vw, 6rem);
    margin: 0 auto;
}

/* Variantes Cromáticas y Bordes */
.mec-contenedor-circular.es-blanco { 
    background-color: var(--color-blanco); 
}

.mec-contenedor-circular.es-hielo { 
    background-color: var(--color-hielo); 
}

.mec-contenedor-circular.es-marca { 
    border: var(--borde-marca) solid var(--color-turquesa); 
}

.mec-contenedor-circular.es-marco { 
    padding: 0.25rem; 
}

/* Interacción de Círculo */
.mec-contenedor-circular.es-interactivo:hover {
    transform: rotate(15deg) scale(1.05);
    cursor: pointer;
    box-shadow: var(--sombra-md);
}

.mec-contenedor-circular img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* 3.2 Avatares Rápidos */
.mec-avatar-xs { 
    width: 1.25rem; 
    height: 1.25rem; 
    flex-shrink: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    border-radius: var(--radio-circular); 
}

/* --------------------------------------------------------------------------
   4. LOGOTIPOS INSTITUCIONALES Y BRANDING
   -------------------------------------------------------------------------- */

/* 4.1 Logotipo de Cabecera */
.mec-logo-header {
    height: clamp(2rem, 5dvh, 2.5rem);
    width: auto;
    transition: transform var(--trans-fast);
}

.mec-logo-header:hover { 
    transform: scale(1.05); 
}

/* --------------------------------------------------------------------------
   5. ESCALADO Y AJUSTE DE IMAGEN
   -------------------------------------------------------------------------- */

.mec-imagen-contencion { 
    width: 85%; 
    height: 85%; 
    object-fit: contain; 
}

.mec-imagen-ajustada { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* 1.5 Host del Motor y Ajustes Responsivos */
#host-motor-pedagogico {
    padding: 0 var(--sp-md);
    width: 100%;
}

@media (min-width: 64rem) {
    #host-motor-pedagogico.es-flexible {
        --grid-min: clamp(25rem, 45%, 40rem);
        gap: var(--sp-lg);
    }
}

/* --------------------------------------------------------------------------
   3. MOTOR DE DIBUJO Y PINTURA
   -------------------------------------------------------------------------- */

/* 3.1 Contenedor de Lienzo de Dibujo */
.mec-lienzo-dibujo-contenedor {
    position: relative; 
    background-color: var(--color-blanco);
    border-radius: var(--radio-mediano); 
    display: flex; 
    align-items: center;
    justify-content: center; 
    box-shadow: var(--sombra-inner); 
    width: 100%;
}

.mec-lienzo-dibujo-contenedor.es-proporcion-16-9 { 
    aspect-ratio: 16 / 9; 
}

.mec-lienzo-dibujo-contenedor.es-proporcion-4-3 { 
    aspect-ratio: 4 / 3; 
}

.mec-puntero-color-pintar {
    cursor: pointer; 
    width: 2rem; 
    height: 2rem; 
    border: var(--borde-marca) solid white;
    border-radius: var(--radio-circular); 
    transition: transform var(--trans-normal);
}

/* 5.3 Caras Frontal y Trasera de la Carta */
.mec-memoria-cara {
    position: absolute; 
    inset: 0; 
    backface-visibility: hidden;
    border-radius: var(--radio-mediano) !important; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    box-shadow: var(--sombra-sm);
    width: 100%;
    height: 100%;
}

.mec-zona-destino-arrastre {
    position: absolute; 
    border: 0.125rem dashed var(--alpha-oscuro);
    border-radius: var(--radio-mediano); 
    background-color: var(--alpha-blanco-suave);
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.mec-objeto-movil { 
    position: absolute; 
    cursor: grab; 
    z-index: var(--z-superior); 
    transition: transform 0.1s ease; 
}

.en-arrastre { 
    opacity: 0.7; 
    transform: scale(1.05) rotate(1.5deg); 
    cursor: grabbing !important; 
    z-index: var(--z-tooltip); 
}

/* 6.2 Blindaje y Reparación Estructural del Motor Unir */
[id^="host-instancia-"] {
    position: relative !important;
    overflow: visible !important;
    min-height: 30rem;
}

[id^="vessel-unir-"] {
    position: relative !important;
    overflow: visible !important; 
    padding: 2rem !important; 
}

.mec-unir-contenedor-escenario { 
    position: relative; 
    min-height: clamp(20rem, 60dvh, 35rem); 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

/* 6.4 Layout de Columnas y Tarjetas de Conexión */
.mec-unir-layout-columnas { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: clamp(3rem, 15vw, 7.5rem); 
    width: 100%; 
    position: relative; 
    z-index: 5 !important; 
}

.mec-unir-item-tarjeta {
    padding: var(--sp-sm) !important; 
    min-height: clamp(3.5rem, 8dvh, 4.5rem);
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    background-color: var(--color-blanco); 
    border-radius: var(--radio-pequeno); 
    border: var(--borde-delgado);
    position: relative;
    z-index: 10 !important;
}

.mec-unir-item-tarjeta.es-conectado {
    transition: all 0.3s var(--trans-bounce);
    border-width: 0.15rem !important;
}

/* 6.5 Puntos de Conexión y Anclaje */
.mec-unir-punto-conexion {
    width: 1.25rem; 
    height: 1.25rem; 
    background-color: var(--color-turquesa);
    border-radius: var(--radio-circular); 
    cursor: crosshair; 
    border: 0.125rem solid white;
    z-index: 10 !important;
}

.mec-unir-punto-anclaje {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--radio-circular);
    background-color: var(--color-turquesa);
    border: 0.2rem solid white;
    box-shadow: var(--sombra-sm);
    cursor: pointer;
    transition: transform 0.3s var(--trans-bounce);
    position: relative;
    z-index: 10 !important;
}

.mec-unir-punto-anclaje:hover {
    transform: scale(1.4);
}

.mec-unir-punto-anclaje::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: clamp(2.5rem, 5vw, 3.5rem);
    height: clamp(2.5rem, 5vw, 3.5rem);
    background: transparent;
}

.mec-unir-punto-anclaje.es-seleccionado {
    box-shadow: 0 0 0 0.4rem var(--alpha-secundario);
    transform: scale(1.3);
    background-color: var(--color-dorado) !important;
}

/* 7.2 Escenario del Podio Final */
.mec-podio-escenario { 
    display: flex; 
    align-items: flex-end; 
    justify-content: center; 
    gap: var(--sp-md); 
    width: 100%; 
    margin-top: var(--sp-xl); 
    height: 18rem; 
}

.mec-podio-pedestal {
    width: clamp(6rem, 20vw, 8rem); 
    border-radius: 1rem 1.1rem 0 0;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-end;
    padding-bottom: 1rem; 
    transition: height 1s var(--trans-bounce);
}

.mec-podio-pedestal.es-oro { 
    height: 100%; 
    background: linear-gradient(to bottom, var(--color-dorado), var(--color-amarillo)); 
}

.mec-podio-pedestal.es-plata { 
    height: 80%; 
    background: linear-gradient(to bottom, #bdc3c7, #95a5a6); 
}

.mec-podio-pedestal.es-bronce { 
    height: 60%; 
    background: linear-gradient(to bottom, #e67e22, #d35400); 
}

/* --------------------------------------------------------------------------
   8. FEEDBACK DE VALIDACIÓN DE ACTIVIDADES
   -------------------------------------------------------------------------- */

.mec-juego-val-correcto {
    border: 0.125rem solid var(--color-verde) !important;
    background-color: var(--color-verde-palido) !important;
}

.mec-juego-val-error {
    border: 0.125rem solid var(--color-rojo) !important;
    background-color: var(--color-rojo-palido) !important;
}

/* ==========================================================================
   PARTE 10: SISTEMA DOCUMENTAL, TABLAS, CALENDARIO Y UTILIDADES ATÓMICAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SISTEMA DOCUMENTAL INSTITUCIONAL (MEC DOCS)
   -------------------------------------------------------------------------- */

/* 1.1 El Lienzo Universal (Página Tipo Carta) */
.mec-documento-pagina {
    background-color: var(--color-blanco);
    width: 100%;
    max-width: var(--ancho-carta); 
    margin: var(--sp-lg) auto;
    padding: clamp(var(--sp-md), 5vw, var(--sp-xl));
    box-shadow: var(--sombra-estandar);
    border-radius: var(--radio-pequeno);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-md);
    min-height: auto;
    transition: transform var(--trans-normal), box-shadow var(--trans-normal);
}

.mec-documento-pagina:hover { 
    box-shadow: var(--sombra-fuerte); 
}

.mec-documento-pagina.es-horizontal {
    max-width: 100%; 
}

/* 1.2 Cabecera y Títulos del Documento */
.mec-documento-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding-bottom: var(--sp-sm);
    border-bottom: var(--borde-marca) solid var(--color-turquesa);
    width: 100%;
}

/* 1.5 Firmas y Validación Digital */
.mec-documento-firmas {
    margin-top: var(--sp-xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: var(--sp-xl);
    width: 100%;
}

.mec-firma-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 12.5rem;
}

.mec-perfil-firma-previa {
    height: clamp(6.25rem, 15dvh, 8.75rem);
    border: 0.125rem dashed var(--color-turquesa) !important;
    background-color: var(--color-nube);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-mediano);
}

.mec-perfil-firma-img {
    max-height: 6rem;
    max-width: 90%;
    filter: grayscale(1) contrast(1.2);
    mix-blend-mode: multiply;
    object-fit: contain;
}

.mec-perfil-firma-wrapper {
    padding: 0;
    overflow: hidden;
    background: white;
    border-radius: var(--radio-mediano);
    width: clamp(15rem, 95%, 31.25rem);
    border: var(--borde-delgado);
    box-shadow: var(--sombra-inner);
}

/* 1.6 Blindaje de Impresión (Print Rules) */
@media print {
    .mec-documento-pagina {
        margin: 0;
        padding: 1.5cm;
        box-shadow: none;
        max-width: none;
        width: 100%;
        border: none;
    }
}

/* --------------------------------------------------------------------------
   2. TABLAS ADMINISTRATIVAS, REPORTES Y ADMISIÓN
   -------------------------------------------------------------------------- */

/* 2.1 Contenedor y Estructura de Tabla */
.mec-tabla-contenedor {
    width: 100%;
    overflow-x: auto; 
    border-radius: var(--radio-mediano);
    border: var(--borde-delgado) solid var(--color-hielo);
    background-color: var(--color-blanco);
}

.mec-tabla {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-landing);
    font-size: var(--f-base);
    background-color: var(--color-blanco);
}

/* 2.2 Celdas y Encabezados */
.mec-tabla th, 
.mec-tabla td {
    padding: var(--sp-sm);
    border: var(--borde-delgado) solid var(--color-hielo);
    text-align: center;
    vertical-align: middle;
    transition: background-color var(--trans-fast);
}

.mec-tabla th {
    background-color: var(--color-petroleo);
    color: var(--color-blanco);
    font-family: var(--font-titulo);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--f-tiny);
    letter-spacing: 0.0313rem;
}

.mec-tabla.es-clara th {
    background-color: var(--color-nube);
    color: var(--color-petroleo);
    text-transform: none;
}

/* 2.3 Variantes Específicas de Admisión */
.mec-tabla.es-admision th {
    text-align: center;
    padding: var(--sp-md);
    background-color: var(--color-petroleo-oscurecido);
}

.mec-tabla.es-admision td { 
    padding: var(--sp-md); 
}

.mec-tabla.es-admision td.es-texto-largo { 
    text-align: left; 
    max-width: 20rem; 
}

/* 2.4 Utilidades de Fila y Celda */
.mec-tabla tbody tr:hover td { 
    background-color: var(--color-hielo-nav); 
}

.mec-tabla td.es-numero { 
    font-family: var(--font-numeros); 
    font-weight: 600; 
    color: var(--color-petroleo); 
}

/* --------------------------------------------------------------------------
   3. MÓDULO DE CALENDARIO (RECEPTOR LÍQUIDO DE 7 DÍAS)
   -------------------------------------------------------------------------- */

/* 3.1 Estructura Maestra de Cuadrícula y Tabla */
.mec-tabla-calendario-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden; /* Impide que desplace la pantalla horizontalmente */
    box-sizing: border-box;
}

.mec-tabla-calendario-container table {
    width: 100% !important;
    table-layout: fixed !important; /* Obliga a repartir las 7 columnas simétricamente */
    border-collapse: separate !important;
    border-spacing: var(--sp-xs);
    margin: 0 !important;
}

.mec-tabla-calendario-container th,
.mec-tabla-calendario-container td {
    width: 14.2857% !important; /* 100% / 7 días */
    max-width: 14.2857% !important;
    min-width: 0 !important; /* Permite a los hijos encogerse */
    padding: 0 !important;
    vertical-align: top;
    box-sizing: border-box;
}

/* Compatibilidad con CSS Grid si el renderizador utiliza grid */
.mec-calendario-grid-cabecera, 
.mec-calendario-grid-cuerpo {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important; /* minmax(0, 1fr) evita el desborde */
    gap: var(--sp-xs);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* 3.2 Celdas de Día */
.mec-tabla-dia-celda,
.mec-calendario-celda {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 10rem;
    max-height: 10rem;
    overflow: hidden;
    background: var(--color-blanco);
    border-radius: var(--radio-mediano);
    border: var(--borde-delgado) solid var(--color-hielo);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--trans-fast), border-color var(--trans-fast);
}

.mec-calendario-celda.es-fin-semana,
.mec-tabla-dia-celda.es-fin-semana {
    background: var(--alpha-rojo-minimo, #fff8f8); 
}

.mec-calendario-celda.es-fin-semana .mec-calendario-dia-numero {
    color: var(--color-rojo); 
}

.mec-calendario-celda.es-hoy,
.mec-tabla-dia-celda.es-hoy {
    border-color: var(--color-turquesa);
    box-shadow: 0 0 0 0.125rem var(--color-turquesa);
}

.mec-calendario-celda.es-vacia {
    background: var(--alpha-blanco-minimo);
    border-style: dashed;
    opacity: 0.5;
}

/* 3.3 Pila y Tarjetas de Clases Atómicas */
.mec-tabla-clases-stack {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ajustes de compactación para pantallas estrechas / móviles */
@media (max-width: 60rem) {
    .mec-tabla-calendario-container table {
        border-spacing: 0.15rem !important;
    }

    .mec-tabla-dia-celda,
    .mec-calendario-celda {
        min-height: 6rem !important;
        border-radius: var(--radio-pequeno) !important;
    }

    .mec-tabla-clases-stack {
        padding: 0.15rem !important;
        gap: 0.2rem !important;
    }

    .mec-clase-mini-malla {
        padding: 0.2rem 0.15rem !important;
        min-height: 1.8rem !important;
        border-left-width: 0.15rem !important;
    }

    .mec-solo-movil span {
        letter-spacing: -0.02em;
    }
}

/* --------------------------------------------------------------------------
   4. UTILIDADES ATÓMICAS (ESPACIADOS, DIMENSIONES Y VISIBILIDAD)
   -------------------------------------------------------------------------- */

/* 4.1 Rellenos (Paddings) */
.mec-relleno-xs      { padding: var(--sp-xs) !important; }
.mec-relleno-sm      { padding: var(--sp-sm) !important; }
.mec-relleno-md      { padding: var(--sp-md) !important; }
.mec-relleno-lg      { padding: var(--sp-lg) !important; }
.mec-relleno-xl      { padding: var(--sp-xl) !important; }
.mec-relleno-0       { padding: 0 !important; }
.mec-relleno-h-md    { padding-left: var(--sp-md) !important; padding-right: var(--sp-md) !important; }

.mec-relleno-b-xs    { padding-bottom: var(--sp-xs) !important; }
.mec-relleno-b-sm    { padding-bottom: var(--sp-sm) !important; }
.mec-margen-0        { margin: 0 !important; }

.mec-margen-v-md     { margin-top: var(--sp-md) !important; margin-bottom: var(--sp-md) !important; }
.mec-margen-h-auto   { margin-left: auto !important; margin-right: auto !important; }

.mec-margen-superior-xs  { margin-top: var(--sp-xs) !important; }
.mec-margen-superior-sm  { margin-top: var(--sp-sm) !important; }
.mec-margen-superior-md  { margin-top: var(--sp-md) !important; }

.mec-margen-inferior-xs  { margin-bottom: var(--sp-xs) !important; }
.mec-margen-inferior-sm  { margin-bottom: var(--sp-sm) !important; }
.mec-margen-inferior-md  { margin-bottom: var(--sp-md) !important; }

.mec-margen-izquierda-xs { margin-left: var(--sp-xs) !important; }
.mec-margen-derecha-xs   { margin-right: var(--sp-xs) !important; }

/* 4.3 Separaciones (Gaps) */
.mec-separacion-xs   { gap: var(--sp-xs) !important; }
.mec-separacion-sm   { gap: var(--sp-sm) !important; }
.mec-separacion-md   { gap: var(--sp-md) !important; }
.mec-separacion-lg   { gap: var(--sp-lg) !important; }

/* 4.4 Dimensiones y Límites */
.mec-ancho-total     { width: 100% !important; }
.mec-alto-total      { height: 100% !important; }
.mec-llenado-total   { position: absolute; inset: 0; width: 100%; height: 100%; }

.mec-ancho-limite-sm { width: 100%; max-width: 20rem; }
.mec-ancho-limite-md { width: 100%; max-width: 28rem; }
.mec-ancho-limite-lg { width: 100%; max-width: 40rem; }

/* 4.5 Visibilidad, Alineación y Dispositivos */
.mec-oculto-total { 
    display: none !important; 
    visibility: hidden !important; 
    pointer-events: none !important; 
}

.mec-bloque          { display: block !important; text-align: center; }
.mec-no-eventos      { pointer-events: none !important; }

.mec-scroll-y { 
    overflow-y: auto !important; 
    scrollbar-width: thin;
    scrollbar-color: var(--color-turquesa) var(--color-nube);
}

.mec-alinear-arriba    { align-items: flex-start !important; }
.mec-alinear-izquierda { justify-content: flex-start !important; text-align: left !important; }
.mec-alinear-derecha   { justify-content: flex-end !important; text-align: right !important; }
.mec-alinear-centro    { justify-content: center !important; text-align: center !important; }

.mec-solo-escritorio { display: none !important; }
.mec-solo-movil      { display: none !important; }

@media (min-width: 48.01rem) {
    .mec-solo-escritorio { display: flex !important; }
}

@media (max-width: 48rem) {
    .mec-solo-movil { display: flex !important; }
    .mec-solo-escritorio { display: none !important; }
}

/* --------------------------------------------------------------------------
   5. COLORES DE FONDO, OPACIDADES Y SOMBRAS
   -------------------------------------------------------------------------- */

/* 5.1 Fondos Temáticos */
.mec-fondo-crema             { background-color: var(--color-crema) !important; }
.mec-fondo-hielo             { background-color: var(--color-hielo) !important; }
.mec-fondo-blanco            { background-color: var(--color-blanco) !important; }
.mec-fondo-petroleo          { background-color: var(--color-petroleo) !important; }
.mec-fondo-hielo-nav         { background-color: var(--color-hielo-nav) !important; }
.mec-fondo-secundario-palido { background-color: var(--color-turquesa-palido) !important; }
.mec-fondo-rojo-palido       { background-color: var(--color-rojo-palido) !important; }
.es-amarillo-oscuro          { background-color: var(--color-amarillo-oscurecido) !important; }

/* 5.2 Opacidades */
.mec-opacidad-10 { opacity: 0.1 !important; }
.mec-opacidad-20 { opacity: 0.2 !important; }
.mec-opacidad-30 { opacity: 0.3 !important; }
.mec-opacidad-40 { opacity: 0.4 !important; }
.mec-opacidad-50 { opacity: 0.5 !important; }
.mec-opacidad-70 { opacity: 0.7 !important; }

/* 5.3 Sombras y Cursores */
.mec-sombra-ligera {
    box-shadow: var(--sombra-sm) !important;
    transition: box-shadow var(--trans-fast), transform var(--trans-fast);
}

.mec-sombra-ligera.es-interactiva:hover {
    box-shadow: var(--sombra-md) !important;
    transform: translateY(-0.125rem);
}

.mec-sombra-estandar {
    box-shadow: var(--sombra-estandar) !important;
    transition: box-shadow var(--trans-fast);
}

/* ==========================================================
   ESTILOS ESPECÍFICOS: DISEÑADOR PEDAGÓGICO (STUDIO MEC)
   ========================================================== */

#studio-sidebar-preguntas {
    transition: transform var(--trans-normal), width var(--trans-normal);
}

/* En pantallas angostas o móviles el sidebar pasa a ser un drawer flotante con toggle */
@media (max-width: 48rem) {
    #studio-sidebar-preguntas {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: clamp(17rem, 75vw, 22rem) !important;
        transform: translate3d(-105%, 0, 0);
        z-index: var(--z-modal);
        box-shadow: var(--sombra-elevada);
    }

    #studio-sidebar-preguntas.es-abierto-movil {
        transform: translate3d(0, 0, 0);
    }
}

/* Alineación de los microcontroles de la pregunta */
.item-pregunta-sidebar .btn-mini-control {
    opacity: 0.55;
    transition: opacity var(--trans-fast), transform var(--trans-fast);
}

.item-pregunta-sidebar:hover .btn-mini-control,
.item-pregunta-sidebar.es-activa .btn-mini-control {
    opacity: 1;
}

.item-pregunta-sidebar .btn-mini-control:hover {
    transform: scale(1.2);
}

/* --------------------------------------------------------------------------
   STUDIO MEC: SIDEBAR SLIM, ALINEACIÓN Y MICROCONTROLES (Puntos 3, 5 y 11)
   -------------------------------------------------------------------------- */

/* Alineación estricta a la derecha para la botonera de cada pregunta */
.item-pregunta-sidebar {
    position: relative;
    overflow: hidden;
    transition: background-color var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
}

.item-pregunta-sidebar:hover {
    transform: translateY(-0.1rem);
}

.item-pregunta-sidebar footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 0.25rem;
    gap: 0.2rem;
}

.item-pregunta-sidebar .btn-mini-control {
    width: clamp(1.6rem, 3.5vh, 1.9rem);
    height: clamp(1.6rem, 3.5vh, 1.9rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-pequeno);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.item-pregunta-sidebar .btn-mini-control:hover {
    background-color: var(--color-hielo);
}

.item-pregunta-sidebar .btn-mini-control.boton-remove-block:hover {
    background-color: var(--color-rojo-palido);
}

/* Modo Slim en pantallas de ancho intermedio (auto-ocultable en hover) */
@media (min-width: 48.01rem) and (max-width: 68rem) {
    #studio-sidebar-preguntas {
        width: clamp(4rem, 7vw, 4.8rem) !important;
        overflow-x: hidden;
        will-change: width, box-shadow;
    }

    #studio-sidebar-preguntas:hover {
        width: clamp(18rem, 28vw, 22rem) !important;
        box-shadow: var(--sombra-elevada);
    }

    /* En reposo slim, se ocultan textos largos y controles secundarios */
    #studio-sidebar-preguntas:not(:hover) .txt-sidebar-consigna,
    #studio-sidebar-preguntas:not(:hover) .txt-sidebar-tiempo,
    #studio-sidebar-preguntas:not(:hover) header .mec-texto,
    #studio-sidebar-preguntas:not(:hover) header #boton-agregar-nueva-pregunta span,
    #studio-sidebar-preguntas:not(:hover) .item-pregunta-sidebar footer .btn-mini-control:not(.boton-test-block):not(.boton-remove-block) {
        display: none !important;
    }

    #studio-sidebar-preguntas:not(:hover) header {
        padding: 0.5rem 0.3rem !important;
        justify-content: center;
    }

    #studio-sidebar-preguntas:not(:hover) header #boton-agregar-nueva-pregunta {
        padding: 0 !important;
        width: 2.2rem !important;
        height: 2.2rem !important;
        border-radius: 50% !important;
    }

    #studio-sidebar-preguntas:not(:hover) header #boton-agregar-nueva-pregunta .mec-icono {
        margin: 0 !important;
    }

    #studio-sidebar-preguntas:not(:hover) .item-pregunta-sidebar {
        padding: 0.4rem 0.2rem !important;
        align-items: center;
        text-align: center;
    }

    #studio-sidebar-preguntas:not(:hover) .item-pregunta-sidebar header {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   STUDIO MEC: PAREJAS DE ASOCIACIÓN SLIM PARA MOTOR UNIR (Punto 4)
   -------------------------------------------------------------------------- */

.studio-pareja-unir-row {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1vw, 0.8rem);
    padding: clamp(0.35rem, 1vh, 0.55rem) clamp(0.5rem, 1.2vw, 0.8rem);
    background-color: var(--color-blanco);
    border: var(--borde-delgado) solid var(--color-hielo);
    border-radius: var(--radio-mediano);
    margin-bottom: 0.35rem;
    transition: border-color var(--trans-fast), background-color var(--trans-fast);
}

.studio-pareja-unir-row:hover {
    border-color: var(--color-turquesa);
    background-color: var(--color-hielo-nav);
}

.studio-pareja-unir-row .conector-flecha {
    flex-shrink: 0;
    color: var(--color-turquesa);
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    font-weight: 800;
    user-select: none;
    opacity: 0.7;
}

.studio-pareja-unir-row input {
    height: clamp(2.1rem, 4.5vh, 2.5rem) !important;
    font-size: clamp(0.8rem, 1.8vw, 0.95rem) !important;
    padding: 0 0.7rem !important;
}

/* --------------------------------------------------------------------------
   STUDIO MEC: DOBLE PUNTAJE (X2) Y TEMPORIZADORES (Puntos 7 y 9)
   -------------------------------------------------------------------------- */

.studio-toggle-doble-puntaje {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radio-pill);
    background-color: var(--color-nube);
    border: var(--borde-delgado) solid var(--color-hielo);
    cursor: pointer;
    user-select: none;
    transition: all var(--trans-bounce);
}

.studio-toggle-doble-puntaje.es-activo {
    background-color: var(--color-amarillo-palido);
    border-color: var(--color-dorado);
    box-shadow: 0 0.2rem 0.6rem rgba(216, 158, 0, 0.2);
}

.studio-toggle-doble-puntaje.es-activo .txt-label-puntaje {
    color: var(--color-dorado-oscurecido) !important;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   STUDIO MEC: RECURSO MULTIMEDIA UNIVERSAL TRANSVERSAL (Puntos 10, 13 y 14)
   -------------------------------------------------------------------------- */

.studio-media-attachment-box {
    background-color: var(--color-blanco);
    border: var(--borde-delgado) dashed var(--color-turquesa);
    border-radius: var(--radio-mediano);
    padding: clamp(0.6rem, 1.5vh, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    position: relative;
}

.studio-media-preview-container {
    width: 100%;
    max-width: clamp(16rem, 50vw, 36rem);
    margin: 0.4rem auto;
    border-radius: var(--radio-pequeno);
    overflow: hidden;
    background-color: var(--color-negro);
    box-shadow: var(--sombra-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.studio-media-preview-container iframe,
.studio-media-preview-container video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

.studio-media-preview-container img {
    max-height: clamp(12rem, 30vh, 18rem);
    width: auto;
    object-fit: contain;
    display: block;
}

.studio-media-preview-container audio {
    width: 100%;
    outline: none;
    height: 2.6rem;
    padding: 0 0.5rem;
}

/* Editor visual de zonas para Motor Mover */
.studio-mover-stage-editor {
    width: 100%;
    max-width: 55rem;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: var(--radio-mediano);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: var(--borde-marca);
    background-color: var(--color-blanco);
    touch-action: none;
}

.studio-target-zone-preview {
    position: absolute;
    border: 0.15rem dashed var(--color-petroleo);
    background-color: rgba(26, 95, 102, 0.15);
    border-radius: var(--radio-pequeno);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
}

/* Paleta sugerida para Motor Colorear */
.studio-color-chip-selector {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.3rem;
}

/* --------------------------------------------------------------------------
   STUDIO MEC: SIMULADOR DE PRUEBA (MODO JUEGO VS MODO AULA) (Punto 8)
   -------------------------------------------------------------------------- */

.studio-modal-tabs {
    display: flex;
    align-items: center;
    border-bottom: var(--borde-delgado) solid var(--color-hielo);
    background-color: var(--color-nube);
    gap: 0.3rem;
    padding: 0 0.5rem;
}

.studio-tab-btn {
    padding: clamp(0.5rem, 1.5vh, 0.75rem) clamp(0.8rem, 2vw, 1.5rem);
    border: none;
    background: transparent;
    color: var(--color-gris-azulado);
    font-weight: 700;
    font-size: clamp(0.75rem, 1.6vw, 0.85rem);
    cursor: pointer;
    border-bottom: 0.18rem solid transparent;
    transition: all var(--trans-fast);
}

.studio-tab-btn:hover {
    color: var(--color-petroleo);
}

.studio-tab-btn.es-activa {
    color: var(--color-petroleo);
    border-bottom-color: var(--color-turquesa);
    background-color: var(--color-blanco);
}

.studio-simulador-viewport {
    width: 100%;
    min-height: clamp(20rem, 58vh, 38rem);
    max-height: 75dvh;
    overflow-y: auto;
    background-color: var(--color-nube);
    display: flex;
    flex-direction: column;
    padding: clamp(0.5rem, 2vw, 1.5rem);
    position: relative;
}

/* Envoltorio cuando se previsualiza estilo Aula Virtual */
.studio-simulador-viewport.modo-aula-preview {
    background-color: var(--color-nube);
    max-width: clamp(20rem, 90vw, 55rem);
    margin: 0 auto;
}

/* PALETA DE HERRAMIENTAS VERTICAL A LA IZQUIERDA */
.mec-pizarra-herramientas-vertical,
#pizarra-herramientas,
.pizarra-toolbar {
    position: absolute !important;
    left: clamp(0.5rem, 1.5vw, 1.2rem) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.6rem 0.4rem !important;
    background: var(--color-blanco, #ffffff) !important;
    border: var(--borde-delgado, 1.5px) solid var(--color-hielo, #e2e8f0) !important;
    border-radius: var(--radio-grande, 1rem) !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08) !important;
    z-index: 30 !important;
    width: auto !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
}

/* Los botones y muestras de color se ordenan en columna */
.mec-pizarra-herramientas-vertical > *,
#pizarra-herramientas > *,
.pizarra-toolbar > * {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
}

/* Asegurada en el CSS o inyectada por el motor */
.mec-pizarra-herramientas-vertical {
    position: absolute !important;
    top: 50% !important;
    left: 1rem !important;
    transform: translate3d(0, -50%, 0) !important;
    flex-direction: column !important;
    height: auto !important;
    width: clamp(2.8rem, 6vw, 3.5rem) !important;
    padding: 0.5rem 0.3rem !important;
    z-index: var(--z-superior) !important;
}

/* --------------------------------------------------------------------------
   CHAT EN PANTALLAS PEQUEÑAS
   El directorio y la conversación se apilan para que ninguno quede fuera
   del ancho disponible. El listado conserva su propio scroll.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
    #chat-contenedor-global-vessel {
        flex-direction: column !important;
    }

    #chat-panel-directorio {
        width: 100% !important;
        max-width: 100%;
        max-height: 42vh;
        border-right: none !important;
        border-bottom: var(--borde-delgado) solid var(--color-hielo);
    }

    #chat-area-principal {
        width: 100%;
        min-height: 50vh;
    }
}
/* ==========================================================================
   ACCESIBILIDAD GLOBAL Y FILTROS DE LA BIBLIOTECA
   ========================================================================== */

/* Escala tipográfica accesible (afecta a todas las medidas en rem). */
html[data-letra="chica"]  { font-size: 87.5%; }
html[data-letra="normal"] { font-size: 100%; }
html[data-letra="grande"] { font-size: 112.5%; }
html[data-letra="extra"]  { font-size: 125%; }

/* Modo de alto contraste. */
:root[data-contraste="alto"] {
    --color-blanco: #ffffff;
    --color-negro: #000000;
    --color-nube: #ffffff;
    --color-crema: #ffffff;
    --color-hielo: #000000;
    --color-hielo-nav: #ffffff;
    --color-gris: #000000;
    --color-gris-azulado: #1a1a1a;
    --color-gris-oscurecido: #000000;
    --color-petroleo: #000000;
    --color-turquesa: #0033cc;
    --color-damasco: #7a2e00;
}

html[data-contraste="alto"] a,
html[data-contraste="alto"] button,
html[data-contraste="alto"] select {
    text-decoration-thickness: 2px;
}

html[data-contraste="alto"] a {
    text-decoration: underline;
}

html[data-contraste="alto"] :focus-visible {
    outline: 3px solid #0033cc !important;
    outline-offset: 2px !important;
}

html[data-contraste="alto"] .mec-tarjeta,
html[data-contraste="alto"] .mec-campo,
html[data-contraste="alto"] .mec-barra-herramientas-superior {
    border: 2px solid #000000 !important;
}

/* Barra de accesibilidad integrada en footers y paneles inferiores. */
.mec-footer-accesibilidad {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: var(--color-blanco);
    border-top: 1px solid var(--color-hielo);
}

.mec-footer-accesibilidad .mec-a11y-barra {
    background: transparent;
    padding: 0;
}

/* En el creador la barra ocupa una franja fija al pie del estudio. */
.mec-footer-accesibilidad[style*="flex-shrink"] .mec-a11y-boton {
    width: 2rem;
    height: 2rem;
}

/* En el juego los botones se integran al HUD inferior sin ganar altura. */
.mec-juego-barra-inferior .mec-a11y-barra {
    background: transparent;
    padding: 0;
    gap: 0.15rem;
}

.mec-juego-barra-inferior .mec-a11y-boton {
    width: 1.8rem;
    height: 1.8rem;
    border-width: 1px;
}

/* Filtros de la barra superior: texto legible y sin recorte vertical. */
.mec-barra-herramientas-superior .mec-barra-superior-filtros select.mec-campo,
.mec-barra-herramientas-superior select.mec-campo {
    height: clamp(1.9rem, 4.2vh, 2.3rem) !important;
    min-width: 9rem;
    padding: 0 1.8rem 0 0.65rem !important;
    line-height: 1.1 !important;
    font-size: var(--f-tiny);
    text-align: left;
    text-align-last: left;
    color: var(--color-petroleo) !important;
    background-color: var(--color-blanco) !important;
    background-image: url('https://vewgdfhokefgrwxsbprw.supabase.co/storage/v1/object/public/icons/chevron-down.png');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.7rem 0.7rem;
    cursor: pointer;
}

.mec-barra-herramientas-superior select.mec-campo option {
    color: #0b1225;
    background: #ffffff;
}

/* Z-index: la barra de filtros queda por encima del selector de mes del calendario. */
.mec-barra-herramientas-superior { position: relative; z-index: calc(var(--z-tooltip) + 1); }

/* Toolbar dropdowns: pill-shaped */
.mec-barra-herramientas-superior .mec-dropdown-trigger { border-radius: var(--radio-pill) !important; }


/* Toolbar: sort dropdown trigger same height as other controls */
.mec-barra-herramientas-superior .mec-dropdown-trigger { min-height: 0 !important; height: clamp(1.9rem, 4.2vh, 2.3rem) !important; }

/* Filtros en cascada (estilo clic secundario): raíz, filas y submenús */
.mec-submenu-raiz {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 14rem;
    max-width: min(90vw, 18rem);
    padding: var(--sp-xs);
    z-index: calc(var(--z-tooltip) + 2);
    gap: 0.1rem;
}

.mec-submenu-fila {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: none;
    background: transparent;
    border-radius: var(--radio-pequeno);
    cursor: pointer;
    outline: none;
    user-select: none;
    text-align: left;
    color: var(--color-petroleo);
}

.mec-submenu-fila:hover,
.mec-submenu-fila:focus-visible,
.mec-submenu-fila.es-abierto {
    background-color: var(--color-nube);
}

.mec-submenu-flecha {
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    transform: rotate(-90deg);
}

.mec-submenu-flotante {
    display: none;
    position: absolute;
    top: -0.35rem;
    left: 100%;
    min-width: 12rem;
    max-height: clamp(12rem, 50vh, 22rem);
    overflow-y: auto;
    padding: var(--sp-xs);
    background: var(--color-blanco);
    border: var(--borde-delgado);
    border-radius: var(--radio-mediano);
    box-shadow: var(--sombra-md);
    z-index: 1;
}

.mec-submenu-fila.es-abierto > .mec-submenu-flotante {
    display: block;
}

.mec-submenu-opcion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radio-pequeno);
    cursor: pointer;
}

.mec-submenu-opcion:hover {
    background-color: var(--color-nube);
}

.mec-submenu-separador {
    height: 0;
    margin: var(--sp-xs) 0;
    border-top: var(--borde-delgado);
}

.mec-submenu-reset {
    font-weight: 800;
}

/* Ratón y teclado: el submenú aparece al pasar el cursor, a la derecha de la fila */
@media (hover: hover) and (pointer: fine) {
    .mec-submenu-fila:hover > .mec-submenu-flotante {
        display: block;
    }
}

/* Táctil y móvil: el panel sube como hoja inferior y cada submenú se despliega al tocarlo */
@media (hover: none), (pointer: coarse) {
    .mec-submenu-raiz {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        max-width: none;
        min-width: 0;
        max-height: 70dvh;
        overflow-y: auto;
        border-radius: var(--radio-grande) var(--radio-grande) 0 0;
        padding: var(--sp-md);
        padding-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
    }

    .mec-submenu-fila {
        flex-wrap: wrap;
        padding: 0.8rem 0.6rem;
        min-height: 2.75rem;
    }

    .mec-submenu-flecha {
        transform: rotate(0deg);
        transition: transform var(--trans-fast);
    }

    .mec-submenu-fila.es-abierto > .mec-submenu-flecha {
        transform: rotate(180deg);
    }

    .mec-submenu-flotante {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        max-height: none;
        overflow: visible;
        padding: 0 0 0 var(--sp-sm);
        margin-top: 0.2rem;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .mec-submenu-fila.es-abierto > .mec-submenu-flotante {
        display: block;
    }

    .mec-submenu-opcion {
        min-height: 2.5rem;
    }
}