/* =========================================
   RADIOAR - REPRODUCTOR OPTIMIZADO
   ========================================= */
 /* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Fuente */
body {
    font-family: Arial, sans-serif;
}

/* =========================================
   ENLACES
   ========================================= */

a,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

/* =========================================
   CONTENEDOR DEL REPRODUCTOR
   ========================================= */

.player {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;

    /* Evita saltos de layout mientras carga */
    overflow: hidden;

    border-radius: 15px;
    background: #00000000;
}

/* =========================================
   VIDEO
   ========================================= */

#video {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    background: #00000000;

    border-radius: 15px;

    /* Evita comportamientos extraños en móviles */
    object-fit: contain;

    /* Mejora el comportamiento táctil */
    touch-action: manipulation;
}

/*
 * Compatibilidad con videos que no informan
 * correctamente su tamaño inicialmente.
 */
video {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* =========================================
   CONTROLES DE VIDEO - WEBKIT
   ========================================= */

/*
 * Ocultamos la línea de tiempo para mantener
 * el reproductor enfocado en streaming en vivo.
 */
video::-webkit-media-controls-timeline {
    display: none;
}

/*
 * Tiempo actual
 */
video::-webkit-media-controls-current-time-display {
    padding-left: 2%;
    color: #fff;
    font-size: 18px;
}

/*
 * Contenedor de controles
 */
video::-webkit-media-controls-enclosure {
    width: 100%;
}

/*
 * Ocultamos tiempo restante.
 */
video::-webkit-media-controls-time-remaining-display {
    display: none;
}

/*
 * Control de volumen.
 */
video::-webkit-media-controls-volume-slider {
    display: block;
}

/*
 * Ocultamos subtítulos si no se utilizan.
 */
video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;
}

/* =========================================
   BOTÓN PLAY CENTRADO
   ========================================= */

video::-webkit-media-controls-play-button {
    -webkit-appearance: media-overlay-play-button;
    border-radius: 10px;
    background-color:#716d73;
    width: 40px;
    height: 40px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    border: none;
    box-sizing: border-box;
    padding: 0;
}


/* =========================================
   SUBTÍTULOS / TEXT TRACK
   ========================================= */

video::-webkit-media-text-track-region-container.scrolling {
    transition: top 433ms linear;
}

/* =========================================
   BOTÓN CHROMECAST (CENTRADO ARRIBA)
   ========================================= */

.cast-btn {
    position: absolute;

    /* Lo ubica a 10px del borde superior del reproductor */
    top: 0px;
    /* Lo centra horizontalmente de manera matemática */
    left: 50%;
    transform: translateX(-50%);

    z-index: 10;

    padding: 8px 8px;

    border: 0;
    border-radius: 6px;

    background: rgba(112, 111, 111, 0.35);
    color: #fff;

    font-size: 14px;
    line-height: 1;

    cursor: pointer;

    /*
     * Evita selección accidental del texto
     * al tocar rápidamente el botón.
     */
    user-select: none;
    -webkit-user-select: none;

    /*
     * Mejora la respuesta táctil.
     */
    touch-action: manipulation;

    /*
     * Evita que el navegador aplique estilos
     * nativos demasiado diferentes.
     */
    -webkit-tap-highlight-color: transparent;

    transition:
        background-color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* PC / mouse */
@media (hover: hover) and (pointer: fine) {

    .cast-btn:hover {
        background: rgba(0, 0, 0, 0.65);
        font-size: 18px;
    }

}

/* =========================================
   CELULARES
   ========================================= */

@media (max-width: 600px) {

    .player {
        border-radius: 10px;
    }

    #video,
    video {
        border-radius: 10px;
    }

    .cast-btn {
        /* Un poquito más arriba en pantallas chicas para ahorrar espacio */
        top: 0px;
        
        padding: 7px 10px;
        font-size: 13px;
    }

}

/* =========================================
   PANTALLAS GRANDES
   ========================================= */

@media (min-width: 1200px) {

    .player {
        /*
         * No obligamos a un ancho fijo.
         * El sitio puede decidir el tamaño.
         */
        width: 100%;
    }

}