/* --- styles/base/style-no-opacity.css --- */

/* =========================================================
   🟢 MOTOR DE ATENUACIÓN DE ZONAS (MACRO-FOCO)
   ========================================================= */
/* 1. Transición suave para evitar parpadeos bruscos */
#app-header, 
#vista-volver, 
#vista-central, 
#info-adicional {
    transition: opacity var(--animation-speed) ease;
}

/* 2. Cuando estamos en 'header' apagamos el resto */
body[data-active-zone="header"]:not([data-no-zone-opacity="true"]) #vista-volver,
body[data-active-zone="header"]:not([data-no-zone-opacity="true"]) #vista-central,
body[data-active-zone="header"]:not([data-no-zone-opacity="true"]) #info-adicional {
    opacity: var(--opacity);
}

/* 3. Cuando estamos en 'central' (carrusel) apagamos el resto */
body[data-active-zone="central"]:not([data-no-zone-opacity="true"]) #app-header,
body[data-active-zone="central"]:not([data-no-zone-opacity="true"]) #vista-volver,
body[data-active-zone="central"]:not([data-no-zone-opacity="true"]) #info-adicional {
    opacity: var(--opacity);
}

/* 4. Cuando estamos en 'volver' (botón fijo) apagamos el resto */
body[data-active-zone="volver"]:not([data-no-zone-opacity="true"]) #app-header,
body[data-active-zone="volver"]:not([data-no-zone-opacity="true"]) #vista-central,
body[data-active-zone="volver"]:not([data-no-zone-opacity="true"]) #info-adicional {
    opacity: var(--opacity);
}

/* 5. Cuando estamos en 'info' (Quiénes somos / Ayuda) apagamos el resto */
body[data-active-zone="info"]:not([data-no-zone-opacity="true"]) #app-header,
body[data-active-zone="info"]:not([data-no-zone-opacity="true"]) #vista-volver,
body[data-active-zone="info"]:not([data-no-zone-opacity="true"]) #vista-central {
    opacity: var(--opacity);
}

/* 7. Menú y Modal oscurecen el resto de la interfaz principal */
body[data-active-zone="menu"]:not([data-no-zone-opacity="true"]) #vista-volver,
body[data-active-zone="menu"]:not([data-no-zone-opacity="true"]) #vista-central,
body[data-active-zone="menu"]:not([data-no-zone-opacity="true"]) #info-adicional,

body[data-active-zone="modal"]:not([data-no-zone-opacity="true"]) #app-header,
body[data-active-zone="modal"]:not([data-no-zone-opacity="true"]) #vista-volver,
body[data-active-zone="modal"]:not([data-no-zone-opacity="true"]) #vista-central,
body[data-active-zone="modal"]:not([data-no-zone-opacity="true"]) #info-adicional {
    opacity: var(--opacity);
}

/* 🟢 1. PROTECCIÓN CONTRA FATIGA COGNITIVA: DESCRIPCIÓN DE CURSOS (noBlockOpacity) */
body[data-no-block-opacity="true"] {
    --opacity: 1 !important;
}

/* Forzamos nitidez absoluta en detalles y el breadcrumb si este check está activo */
body[data-no-block-opacity="true"] .detail-text-fragment,
body[data-no-block-opacity="true"] .detail-action-item,
body[data-no-block-opacity="true"] .card.card-breadcrumb-vertical {
    opacity: 1 !important;
    filter: none !important;
}

/* 🟢 2. NITIDEZ EN NAVEGACIÓN Y MENÚS (noMaskOpacity) */
body[data-no-mask-opacity="true"] .carousel-mask {
    display: none !important;
}

body[data-no-mask-opacity="true"] .card:not(.focus-visible),
body[data-no-mask-opacity="true"] .card.disabled,
body[data-no-mask-opacity="true"] .card.card-breadcrumb-vertical {
    opacity: 1 !important;
    filter: none !important;
}

/* 🟢 3. NITIDEZ TOTAL EN PANELES (noZoneOpacity) */
/* Si el usuario desactiva zonas, estos elementos deben ser CRISTALINOS */
body[data-no-zone-opacity="true"] #info-adicional,
body[data-no-zone-opacity="true"] .card.card-breadcrumb-vertical,
body[data-no-zone-opacity="true"] #vista-volver {
    opacity: 1 !important;
    filter: none !important;
}

/* 🟢 4. ATENUACIÓN GLOBAL POR MACRO-ZONAS */
/* Solo se activa si hay una zona y NO se ha desactivado por check */
body[data-active-zone]:not([data-active-zone="none"]):not([data-no-zone-opacity="true"]) #app-header,
body[data-active-zone]:not([data-active-zone="none"]):not([data-no-zone-opacity="true"]) #vista-volver,
body[data-active-zone]:not([data-active-zone="none"]):not([data-no-zone-opacity="true"]) #vista-central,
body[data-active-zone]:not([data-active-zone="none"]):not([data-no-zone-opacity="true"]) #info-adicional {
    /* Si --opacity es 0.3 -> Opacidad 0.65 */
    /* Si --opacity es 1.0 -> Opacidad 1.0 (No atenuar) */
    opacity: calc(0.5 + (var(--opacity) / 2));
    
    /* Usamos un valor fijo muy sutil que desaparece si la opacidad es 1 */
    filter: grayscale(calc(0.3 * (1 - var(--opacity, 0))));
    
    transition: opacity var(--transition-speed) ease, filter var(--transition-speed) ease;
}

/* 🟢 5. EXCEPCIÓN: ZONA ACTIVA (Luz total) */
body[data-active-zone="header"] #app-header,
body[data-active-zone="volver"] #vista-volver,
body[data-active-zone="central"] #vista-central,
body[data-active-zone="info"] #info-adicional,
body[data-active-zone="modal"] #a11y-modal-overlay {
    opacity: 1 !important;
    filter: none !important;
}

/* 🟢 6. REFUERZO DE NITIDEZ EN INFO-ADICIONAL */
/* Aseguramos que el texto sea blanco puro/negro puro según el tema */
#info-adicional {
    color: var(--color-text);
}

/* --- styles/base/style-no-opacity.css --- */