/* ==========================================
   REPRODUCTOR ORO — SQUARE COVER 2026
   Modern Minimal | Glassmorphism Play Button
   ========================================== */

/* ==========================================
   VARIABLES CSS — SISTEMA DE DISEÑO ORO
   ========================================== */
:root {
    --cover-radius: 2rem;    /* ~32px — más suave y orgánico que los 20px originales */

    --color-primary: var(--color-marca-rgb, 255, 107, 0);
    --color-dark-bg: 20, 22, 30;
    --color-white: 255, 255, 255;

    --size-mobile: clamp(240px, 62vw, 290px);
    --size-desktop: 238px; /* −30 % de 340px */

    --border-mobile: 3px;
    --border-desktop: clamp(3px, 0.8vw, 8px);

    --transition-fast:   0.3s ease;
    --transition-medium: 0.6s ease;
    --transition-slow:   0.9s cubic-bezier(0.23, 1, 0.32, 1);

    --blur-glass: 28px;
    --glow-radius: 40px;
}

/* ==========================================
   CONTENEDOR PRINCIPAL
   ========================================== */
.area-reproductor {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding: 10px;
    z-index: 5;
    margin-bottom: 10px;
    flex-shrink: 0;
    perspective: 1200px;
}

/* ==========================================
   WRAPPER
   ========================================== */
.pulse-wrapper {
    position: relative;
    width: var(--size-mobile);
    height: var(--size-mobile);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
}

/* ==========================================
   CARÁTULA — SQUARE ROUNDED (sin círculo)
   border-radius: var(--cover-radius) = 20px
   ========================================== */
.live-circle {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;

    --shadow-dynamic: var(--shadow-color, rgba(var(--color-primary), 0.5));

    /* SQUARE ROUNDED — pieza central del diseño Oro */
    border-radius: var(--cover-radius);

    overflow: hidden;
    background: #0a0c12;
    border: none;

    box-shadow:
        0 0 0 var(--border-mobile) rgba(var(--color-primary), 0.75),
        0 0 var(--glow-radius) var(--shadow-dynamic),
        0 24px 64px rgba(0, 0, 0, 0.55);

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;

    transition: box-shadow 0.5s ease, transform 0.3s ease;
}

.live-circle:hover {
    transform: scale(1.012);
}

/* Estado reproduciendo — glow intenso, sin rotación (es cuadrado) */
.live-circle.playing {
    box-shadow:
        0 0 0 var(--border-mobile) rgba(var(--color-primary), 1),
        0 0 60px var(--shadow-dynamic),
        0 30px 80px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   IMAGEN DE CARÁTULA
   ========================================== */
.cover-image,
#cover,
.live-circle img:not(#locutor-overlay):not(.play-glass-btn) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.01);
    width: 100%;
    height: 100%;
    border-radius: var(--cover-radius);
    object-fit: cover;
    z-index: 1;
    margin: 0;
    padding: 0;
}

/* ==========================================
   EFECTO GLOSS — Sutil brillo esquina
   ========================================== */
.live-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--cover-radius);
    pointer-events: none;
    z-index: 20;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.07) 0%,
        transparent 45%
    );
    box-shadow: none;
}

/* ==========================================
   OVERLAY DE LOCUTOR
   ========================================== */
#locutor-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.005);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    border-radius: var(--cover-radius);
}

#locutor-overlay.visible {
    opacity: 1;
}

/* ==========================================
   PLAY BUTTON GHOST ICON
   Icono translúcido sin fondo, visible solo en hover/active.
   El contenedor ocupa el 100% de .live-circle para que
   font-size en % tenga referencia correcta y no sea recortado.
   ========================================== */
.play-glass-btn {
    /* Cubre exactamente la carátula — base de escalado */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Por debajo de modales (1300) y la Magic Island (2200) */
    z-index: 25;
    pointer-events: none;

    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.play-glass-btn i {
    font-size: 6rem; /* Mobile (<600px) */
    color: rgba(255, 255, 255, 0.6);
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.8));
    transition: opacity 0.3s ease, transform 0.3s ease;
    line-height: 1;
    opacity: 0;
    display: block;
    flex-shrink: 0;
}

/* Tablet 600–999px */
@media (min-width: 600px) {
    .play-glass-btn i { font-size: 8rem; }
}

/* Desktop ≥1000px */
@media (min-width: 1000px) {
    .play-glass-btn i { font-size: 10rem; }
}

/* XL ≥1400px */
@media (min-width: 1400px) {
    .play-glass-btn i { font-size: 11rem; }
}

/* Landscape compacto */
@media (max-height: 600px) and (orientation: landscape) {
    .play-glass-btn i { font-size: 4rem; }
}

/* ══════════════════════════════════════════════════════════
   ajustarDimensionesLandscape()
   Reducción del 30 % en orientación horizontal (mobile/tablet)
   · Carátula: 70 % del tamaño portrait → clamp(168px, 43vw, 203px)
   · Glow y borde escalan proporcionalmente (70 % de sus valores)
   · Aplica solo a viewports ≤ 991.98 px para no afectar al desktop
   ══════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-width: 991.98px) {

    :root {
        --glow-radius:  28px;  /* 70 % de 40px */
        --border-mobile: 2px;  /* 67 % de 3px  — borde más fino en landscape */
    }

    /* Dimensiones de la carátula reducidas al 70 % */
    .pulse-wrapper,
    .live-circle,
    #locutor-overlay {
        width:  clamp(168px, 43vw, 203px); /* 70 % de clamp(240px, 62vw, 290px) */
        height: clamp(168px, 43vw, 203px);
    }

    /* Border-radius proporcional al nuevo tamaño */
    .live-circle {
        border-radius: 1.4rem; /* 70 % de var(--cover-radius) = 2rem */
    }

    .cover-image,
    #cover,
    .live-circle img:not(#locutor-overlay):not(.play-glass-btn),
    .live-circle::after,
    #locutor-overlay {
        border-radius: 1.4rem;
    }

    /* Contenedor: padding mínimo en landscape para ganar espacio vertical */
    .area-reproductor {
        padding:       5px;
        margin-bottom: 0;
    }

    /* Ícono play más pequeño — proporcional a la carátula reducida */
    .play-glass-btn i { font-size: 4rem; }
}

/* Corrección óptica del ícono de play */
.oro-icon-play  { margin-left: 4px; }
.oro-icon-pause { margin-left: 0; display: none !important; }

/* Cuando reproduce: intercambia play → pause */
body.playing .oro-icon-play  { display: none !important; }
body.playing .oro-icon-pause { display: flex !important; }

/* Estado Pausado: El botón Play siempre es visible */
.live-circle.estado-pausado .play-glass-btn i {
    opacity: 1;
}

/* Estado Reproduciendo: Solo visible en Hover o Touch */
.live-circle:not(.estado-pausado):hover .play-glass-btn i,
.live-circle:not(.estado-pausado):active .play-glass-btn i,
.live-circle:not(.estado-pausado).touch-active .play-glass-btn i {
    opacity: 1;
}

/* ==========================================
   CONTROL OVERLAY — compatibilidad con 5-player.js
   El ícono grande queda oculto (lo reemplaza .play-glass-btn)
   ========================================== */
.control-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30;
    cursor: pointer;
    background: rgba(0, 0, 0, 0);
    border-radius: var(--cover-radius);
    transition: background 0.4s ease;
}

/* El ícono del control-overlay queda oculto en Oro */
.control-overlay i {
    display: none;
}

/* ==========================================
   CONTROLES SECUNDARIOS — Herencia del Platinium
   ========================================== */
#play-pause-btn,
.btn-control-principal {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background: rgb(var(--color-primary));
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(var(--color-primary), 0.4);
    transition: all 0.2s ease;
}

#play-pause-btn i,
.btn-control-principal i {
    font-size: 1.4rem;
    color: white;
}

/* ==========================================
   RESPONSIVE — SMARTPHONE (≤ 575.98px)
   Compactación vertical: carátula −15 % para
   liberar espacio al botón PWA y los metadatos.
   ========================================== */
@media (max-width: 575.98px) {
    :root {
        /* Tamaño fijo auditado: 250px exactos en portrait.
           En landscape el bloque ajustarDimensionesLandscape() (línea 228)
           aplica su override explícito y gana la cascada por orden de archivo. */
        --size-mobile: 250px;

        /* Glow calibrado para 250px: 40px da un halo proporcional */
        --glow-radius:  40px;
        --border-mobile: 3px;
    }

    .area-reproductor {
        padding:       5px;
        margin-bottom: 0;
    }
}

/* ==========================================
   RESPONSIVE — TABLET Y DESKTOP
   ========================================== */
@media (min-width: 768px) {
    .area-reproductor {
        padding: 20px;
        margin-bottom: 20px;
    }

    .pulse-wrapper,
    .live-circle,
    #locutor-overlay {
        width: var(--size-desktop);
        height: var(--size-desktop);
    }

    .live-circle,
    .live-circle.playing {
        box-shadow:
            0 0 0 var(--border-desktop) rgba(var(--color-primary), 0.8),
            0 0 var(--glow-radius) var(--shadow-dynamic),
            0 30px 80px rgba(0, 0, 0, 0.5);
    }

    /* play-glass-btn hereda inset:0 del bloque base — sin dimensiones fijas aquí */
}

/* Large Desktop ≥1400px: −30 % respecto al valor original de 460px */
@media (min-width: 1400px) {
    .pulse-wrapper,
    .live-circle,
    #locutor-overlay {
        width: 322px;  /* 70 % de 460px */
        height: 322px;
    }
}

@media (min-width: 992px) {
    .area-reproductor {
        padding: 32px;
        margin-bottom: 0;
    }
}

/* ==========================================
   ESTADOS ESPECIALES
   ========================================== */
.live-circle.loading {
    opacity: 0.7;
    cursor: wait;
}

.live-circle.error {
    box-shadow:
        inset 0 0 16px rgba(239, 68, 68, 0.4),
        0 0 var(--glow-radius) rgba(239, 68, 68, 0.3);
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .live-circle,
    .live-circle.playing,
    body.playing .play-glass-btn {
        animation: none;
    }
    .live-circle {
        transition: box-shadow var(--transition-fast);
    }
}

@media (prefers-color-scheme: dark) {
    .live-circle {
        background: rgba(10, 12, 18, 0.85);
    }
}