/* ==============================================
   DESAFÍOS — Estilos de minijuegos
   ============================================== */

/* ---- Layout del desafío ---- */
.desafio-contenido {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.desafio-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.desafio-fondo video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: opacity 300ms ease-in-out;
}

/* ---- Instrucción del desafío ---- */
.desafio-instruccion {
    position: relative;
    z-index: var(--z-elementos);
    background: var(--color-fondo-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--espaciado-lg) var(--espaciado-xl);
    border-radius: var(--boton-radio);
    border: 1px solid rgba(167, 243, 208, 0.15);
    max-width: 600px;
    text-align: center;
    margin-bottom: var(--espaciado-lg);
    transition: all 0.3s ease;
}

/* Posicionamiento absoluto opcional */
.desafio-instruccion.pos-arriba {
    position: absolute;
    top: var(--espaciado-lg);
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    z-index: var(--z-panel-texto);
    /* Por encima de todo */
}

.desafio-instruccion.pos-abajo {
    position: absolute;
    bottom: var(--espaciado-lg);
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    z-index: var(--z-panel-texto);
}

.desafio-instruccion h2 {
    font-size: var(--tamano-texto-grande);
    font-weight: 800;
    color: var(--color-dorado-claro);
    margin-bottom: var(--espaciado-sm);
}

.desafio-instruccion p {
    font-size: var(--tamano-texto-base);
    color: var(--color-texto-principal);
    line-height: var(--line-height-texto);
}

/* ---- Opciones del quiz ---- */
.desafio-opciones {
    position: relative;
    z-index: var(--z-elementos);
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
    width: 100%;
    max-width: 500px;
    padding: 0 var(--espaciado-xl);
}

/* ---- Área interactiva (observación / clicks) ---- */
.desafio-area-interactiva {
    position: absolute;
    inset: 0;
    z-index: var(--z-panel-desafio);
}

.desafio-elemento-interactivo {
    position: absolute;
    left: calc(var(--x) * 1%);
    bottom: calc((100 - var(--y)) * 1%);
    width: calc(var(--ancho) * 1%);
    height: auto;
    transform: translateX(-50%);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 150ms ease, filter 150ms ease;
}

.desafio-elemento-interactivo:hover {
    transform: translateX(-50%) scale(1.05);
    filter: brightness(1.15);
}

.desafio-elemento-interactivo:active {
    transform: translateX(-50%) scale(0.95);
}

.desafio-elemento-interactivo img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

/* ---- Mensajes de progreso (clicks) ---- */
.desafio-mensaje-progreso {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-panel-opciones);
    font-size: var(--tamano-titulo);
    font-weight: 900;
    color: var(--color-dorado-brillante);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 40px rgba(250, 204, 21, 0.4);
    animation: fadeIn 300ms ease-out both;
    pointer-events: none;
}

/* ---- Feedback de respuesta ---- */
.desafio-feedback {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-panel-desafio) + 1);
    padding: var(--espaciado-md) var(--espaciado-xl);
    border-radius: var(--boton-radio);
    font-size: var(--tamano-texto-grande);
    font-weight: 700;
    text-align: center;
    animation: fadeIn 300ms ease-out both;
}

.desafio-feedback.exito {
    background: rgba(16, 185, 129, 0.9);
    color: var(--color-blanco);
    border: 2px solid var(--color-dorado-claro);
}

.desafio-feedback.fallo {
    background: rgba(239, 68, 68, 0.85);
    color: var(--color-blanco);
    border: 2px solid rgba(239, 68, 68, 0.5);
}

/* ---- Responsive ---- */
@media (max-width: 900px),
(max-height: 600px) {
    .desafio-instruccion {
        padding: var(--espaciado-md);
        max-width: 90%;
        margin-bottom: var(--espaciado-md);
    }

    .desafio-instruccion.pos-arriba {
        top: var(--espaciado-sm);
    }

    .desafio-instruccion.pos-abajo {
        bottom: var(--espaciado-sm);
    }

    .desafio-instruccion h2 {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem);
        margin-bottom: 4px;
    }

    .desafio-instruccion p {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
    }

    .desafio-opciones {
        padding: 0 var(--espaciado-md);
        gap: 6px;
    }

    .desafio-mensaje-progreso {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }
}