/*
 * Prototipo: Accesos Radio/TV en el header global
 * Contextos: .header-radiocanal y .header-scroll
 * Exclusivo Radiocanal — NO pertenece al framework.
 *
 * Reutiliza los mismos patrones visuales del módulo de portada
 * (templates/radiocanal/modulos/accesos-multimedio/assets/css/accesos-multimedio.css):
 * iconos circulares, hover translateY(-2px), transiciones 0.25s, colores de
 * marca (variables RC) y soporte prefers-reduced-motion.
 *
 * Sólo se carga cuando multimedia_access.header_enabled = true
 * (templates/radiocanal/config/template.php). Apagar ese flag retira
 * únicamente estas copias del header; el módulo de portada no se ve afectado.
 *
 * @version 1.0.0 (prototipo)
 * @date    2026-07-30
 */

/* ============================================================
   BASE COMPARTIDA — reutiliza .am-acceso / .am-icono / .am-textos
   ya definidos por accesos-multimedio.css, sólo bajo estos contextos
   ============================================================ */

.header-radiocanal .accesos-header-multimedio,
.header-scroll .accesos-header-multimedio {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-radiocanal .accesos-header-multimedio .am-acceso,
.header-scroll .accesos-header-multimedio .am-acceso {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0.3rem 0.5rem;
    border-radius: 12px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.header-radiocanal .accesos-header-multimedio .am-acceso:hover,
.header-scroll .accesos-header-multimedio .am-acceso:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.025);
}

.header-radiocanal .accesos-header-multimedio .am-icono,
.header-scroll .accesos-header-multimedio .am-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.header-radiocanal .accesos-header-multimedio .am-acceso--radio .am-icono,
.header-scroll .accesos-header-multimedio .am-acceso--radio .am-icono {
    color: var(--rc-azul-logo);
    background: rgba(0, 119, 204, 0.10);
}

.header-radiocanal .accesos-header-multimedio .am-acceso--radio:hover .am-icono,
.header-scroll .accesos-header-multimedio .am-acceso--radio:hover .am-icono {
    color: var(--rc-blanco);
    background: var(--rc-azul-logo);
    box-shadow: 0 4px 14px rgba(0, 119, 204, 0.35);
}

.header-radiocanal .accesos-header-multimedio .am-acceso--tv .am-icono,
.header-scroll .accesos-header-multimedio .am-acceso--tv .am-icono {
    color: var(--rc-rojo-logo);
    background: rgba(230, 57, 70, 0.10);
}

.header-radiocanal .accesos-header-multimedio .am-acceso--tv:hover .am-icono,
.header-scroll .accesos-header-multimedio .am-acceso--tv:hover .am-icono {
    color: var(--rc-blanco);
    background: var(--rc-rojo-logo);
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
}

.header-radiocanal .accesos-header-multimedio .am-textos,
.header-scroll .accesos-header-multimedio .am-textos {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.header-radiocanal .accesos-header-multimedio .am-textos--derecha,
.header-scroll .accesos-header-multimedio .am-textos--derecha {
    text-align: right;
    align-items: flex-end;
}

.header-radiocanal .accesos-header-multimedio .am-medio,
.header-scroll .accesos-header-multimedio .am-medio {
    font-family: var(--rc-font-primary);
    font-weight: 700;
    color: var(--rc-negro);
    transition: color 0.25s ease;
    font-size: 1.3rem;
}

.header-radiocanal .accesos-header-multimedio .am-detalle,
.header-scroll .accesos-header-multimedio .am-detalle {
    font-weight: 500;
    color: var(--rc-gris-medio);
    letter-spacing: 0.02em;
    font-size: 1.1rem;
}

.header-radiocanal .accesos-header-multimedio .am-acceso--radio:hover .am-medio,
.header-scroll .accesos-header-multimedio .am-acceso--radio:hover .am-medio {
    color: var(--rc-azul-logo);
}

.header-radiocanal .accesos-header-multimedio .am-acceso--tv:hover .am-medio,
.header-scroll .accesos-header-multimedio .am-acceso--tv:hover .am-medio {
    color: var(--rc-rojo-logo);
}

/* ============================================================
   VARIANTE DESKTOP (columna izquierda del header principal)
   ============================================================ */

.header-radiocanal .accesos-header-multimedio--header {
    gap: clamp(0.6rem, 2vw, 1.5rem);
    flex-wrap: nowrap;
    height: 100%;
}

.header-radiocanal .accesos-header-multimedio--header .am-icono {
    width: 3rem;
    height: 3rem;
    font-size: 1.3rem;
}

/* La señal (am-senal/am-onda/am-nucleo) no hereda estilo del módulo de
   portada: allá está anclado a #modulo-accesos-multimedio, que no envuelve
   al header. Se define acá, autocontenida, con sus propios keyframes para
   no depender de que accesos-multimedio.css esté cargado en la página.
   Se comparte entre 'header' (1 onda) y 'header-mobile' (3 ondas, misma
   identidad visual que el módulo de portada, sólo adaptada en tamaño). */
.header-radiocanal .accesos-header-multimedio--header .am-senal,
.header-radiocanal .accesos-header-multimedio--header-mobile .am-senal {
    position: relative;
    flex-shrink: 0;
}

.header-radiocanal .accesos-header-multimedio--header .am-senal {
    width: 2.4rem;
    height: 2.4rem;
}

.header-radiocanal .accesos-header-multimedio--header .am-onda,
.header-radiocanal .accesos-header-multimedio--header-mobile .am-onda {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--rc-azul-logo);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
    animation: ahm-onda-pulso 3s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.header-radiocanal .accesos-header-multimedio--header .am-nucleo,
.header-radiocanal .accesos-header-multimedio--header-mobile .am-nucleo {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rc-azul-logo) 0%, var(--rc-rojo-logo) 100%);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.15);
    animation: ahm-nucleo-latido 2s ease-in-out infinite;
}

.header-radiocanal .accesos-header-multimedio--header .am-nucleo {
    width: 0.8rem;
    height: 0.8rem;
}

/* Anillos alternados azul/rojo con delays, igual criterio que el módulo
   de portada (accesos-multimedio.css). Aplica a 'header' (1 onda, sólo
   nth-child(1)) y a 'header-mobile' (3 ondas). */
.header-radiocanal .accesos-header-multimedio--header .am-onda:nth-child(1),
.header-radiocanal .accesos-header-multimedio--header-mobile .am-onda:nth-child(1) {
    border-color: var(--rc-azul-logo);
    animation-delay: 0s;
}

.header-radiocanal .accesos-header-multimedio--header-mobile .am-onda:nth-child(2) {
    border-color: var(--rc-rojo-logo);
    animation-delay: 1s;
}

.header-radiocanal .accesos-header-multimedio--header-mobile .am-onda:nth-child(3) {
    border-color: var(--rc-azul-logo);
    animation-delay: 2s;
}

@keyframes ahm-onda-pulso {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
    15% {
        opacity: 0.55;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes ahm-nucleo-latido {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.18);
    }
}

/* En anchos intermedios de escritorio, mostrar sólo iconos + señal */
@media (max-width: 1200px) {
    .header-radiocanal .accesos-header-multimedio--header .am-textos {
        display: none;
    }
}

/* Escala ampliada en escritorio ancho (>1200px): aprovecha el espacio
   libre de la columna izquierda del header sin igualar la escala del
   módulo de portada (icono 3.6rem, título 1.7rem, detalle 1.2rem,
   señal 7rem). No cambia cantidad de ondas (sigue en 1). */
@media (min-width: 1201px) {
    .header-radiocanal .accesos-header-multimedio--header {
        gap: 1.5rem;
        transform: translateY(1rem);
    }

    .header-radiocanal .accesos-header-multimedio--header .am-acceso {
        gap: 0.8rem;
        padding: 0.5rem 0.7rem;
    }

    .header-radiocanal .accesos-header-multimedio--header .am-icono {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.5rem;
    }

    .header-radiocanal .accesos-header-multimedio--header .am-medio {
        font-size: 1.5rem;
    }

    .header-radiocanal .accesos-header-multimedio--header .am-detalle {
        font-size: 1.2rem;
    }

    .header-radiocanal .accesos-header-multimedio--header .am-senal {
        width: 5rem;
        height: 5rem;
    }

    .header-radiocanal .accesos-header-multimedio--header .am-nucleo {
        width: 1rem;
        height: 1rem;
    }
}

/* ============================================================
   VARIANTE MÓVIL/TABLET — franja compacta debajo de logo+menú
   ============================================================ */

.header-radiocanal .franja-accesos-multimedio {
    border-top: 1px solid var(--rc-divider);
    padding: 0.4rem 0;
}

.header-radiocanal .accesos-header-multimedio--header-mobile {
    gap: 1rem;
    flex-wrap: nowrap;
}

.header-radiocanal .accesos-header-multimedio--header-mobile .am-acceso {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
}

.header-radiocanal .accesos-header-multimedio--header-mobile .am-icono {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.2rem;
}

/* Señal compacta 3.8rem–4.4rem (tres anillos distinguibles + núcleo),
   preservando una sola línea junto a Radio y Canal 4 sin overflow ni
   reducción del área táctil de los enlaces (min-height 44px ya definido
   en .am-acceso de esta variante). */
.header-radiocanal .accesos-header-multimedio--header-mobile .am-senal {
    width: 4.4rem;
    height: 4.4rem;
}

.header-radiocanal .accesos-header-multimedio--header-mobile .am-nucleo {
    width: 1.05rem;
    height: 1.05rem;
}

@media (max-width: 360px) {
    .header-radiocanal .accesos-header-multimedio--header-mobile .am-senal {
        width: 3.8rem;
        height: 3.8rem;
    }

    .header-radiocanal .accesos-header-multimedio--header-mobile .am-nucleo {
        width: 0.9rem;
        height: 0.9rem;
    }
}

.header-radiocanal .accesos-header-multimedio--header-mobile .am-medio {
    font-size: 1.2rem;
}

.header-radiocanal .accesos-header-multimedio--header-mobile .am-detalle {
    font-size: 1rem;
}

@media (max-width: 360px) {
    .header-radiocanal .accesos-header-multimedio--header-mobile .am-textos {
        display: none;
    }

    .header-radiocanal .accesos-header-multimedio--header-mobile .am-acceso {
        flex: 0 0 auto;
    }

    .header-radiocanal .accesos-header-multimedio--header-mobile {
        justify-content: space-evenly;
    }
}

/* ============================================================
   VARIANTE HEADER SCROLL — mínima, entre logo y navegación
   ============================================================ */

.header-scroll .accesos-header-multimedio--header-scroll {
    gap: 0.8rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin: 0 1rem;
}

.header-scroll .accesos-header-multimedio--header-scroll .am-acceso {
    padding: 0.2rem 0.4rem;
    gap: 0.5rem;
}

.header-scroll .accesos-header-multimedio--header-scroll .am-icono {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.1rem;
}

/* Angosto: sólo iconos, sin rótulos, para no competir con la navegación */
@media (max-width: 1200px) {
    .header-scroll .accesos-header-multimedio--header-scroll .am-textos {
        display: none;
    }

    .header-scroll .accesos-header-multimedio--header-scroll {
        gap: 0.5rem;
        margin: 0 0.5rem;
    }
}

/* ============================================================
   FOCO VISIBLE (heredado del patrón del módulo de portada)
   ============================================================ */

.header-radiocanal .accesos-header-multimedio .am-acceso:focus-visible,
.header-scroll .accesos-header-multimedio .am-acceso:focus-visible {
    outline: 2px solid var(--rc-secundario);
    outline-offset: 2px;
}

/* ============================================================
   ACCESIBILIDAD — respetar reduce motion (igual que el módulo)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .header-radiocanal .accesos-header-multimedio .am-onda,
    .header-scroll .accesos-header-multimedio .am-onda,
    .header-radiocanal .accesos-header-multimedio .am-nucleo,
    .header-scroll .accesos-header-multimedio .am-nucleo {
        animation: none;
    }

    /* Representación circular estática reconocible y centrada (igual
       criterio que el módulo de portada), en vez de una opacidad plana. */
    .header-radiocanal .accesos-header-multimedio .am-onda:nth-child(1) {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.7);
    }

    .header-radiocanal .accesos-header-multimedio--header-mobile .am-onda:nth-child(2) {
        opacity: 0.25;
        transform: translate(-50%, -50%) scale(1);
    }

    .header-radiocanal .accesos-header-multimedio--header-mobile .am-onda:nth-child(3) {
        opacity: 0;
    }

    .header-radiocanal .accesos-header-multimedio .am-nucleo,
    .header-scroll .accesos-header-multimedio .am-nucleo {
        opacity: 1;
    }
}