.drive-proxy-container {
    position: relative;
    width: 100%;
    margin: 1.5rem auto;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000000;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.drive-proxy-player-wrapper video {
    display: block;
    width: 100%;
    max-height: 80vh;
    outline: none;
}

.drive-proxy-download-bar {
    padding: 10px 16px;
    background: #111827;
    border-top: 1px solid #1f2937;
    display: flex;
    justify-content: flex-end;
}

.drive-proxy-download-btn {
    background: #2563eb;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 6px;
}
/* Mensajes de error del reproductor.
   La versión 1.0.0 usaba estas clases en el PHP pero no las definía nunca,
   así que el aviso salía sin ningún estilo. */
.drive-proxy-notice {
    margin: 1.5rem auto;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.drive-proxy-error {
    background: #fcf0f1;
    border-left: 4px solid #d63638;
    color: #8a2424;
}

/* El contenedor puede limitarse en anchura desde el shortcode */
.drive-proxy-container[style*="max-width"] {
    margin-left: auto;
    margin-right: auto;
}

.drive-proxy-download-btn:hover,
.drive-proxy-download-btn:focus {
    background: #1d4ed8;
}

/* Reproductor incrustado de Google (modo «preview»).
   Proporción 16:9 mantenida con padding, que funciona en navegadores antiguos
   además de con aspect-ratio. */
.drive-proxy-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
}

@supports (aspect-ratio: 16 / 9) {
    .drive-proxy-frame {
        padding-top: 0;
        aspect-ratio: 16 / 9;
    }
}

.drive-proxy-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@supports (aspect-ratio: 16 / 9) {
    .drive-proxy-iframe {
        position: static;
    }
}

/* El contenedor del iframe no necesita la sombra del reproductor propio */
.drive-proxy-container--preview {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Parche que cubre el botón «Ventana externa» del reproductor de Google.
   No se puede ocultar de otro modo: vive dentro de un iframe de otro origen,
   fuera del alcance de nuestro CSS. El recuadro es negro porque el reproductor
   deja banda negra arriba en cualquier película más ancha que 16:9, que son casi
   todas, así que pasa desapercibido. */
.drive-proxy-mask {
    position: absolute;
    top: 0;
    right: 0;
    width: 62px;
    height: 58px;
    background: #000;
    /* Se traga el clic para que el botón tapado tampoco sea accionable. */
    cursor: default;
}

/* En el reproductor de audio el botón vive en la misma esquina, pero el marco
   es mucho más bajo y acertar con el alto exacto del icono es adivinar. Aquí se
   cubre toda la franja derecha de arriba abajo: los controles de audio van
   centrados horizontalmente y quedan a cientos de píxeles de esa franja, así
   que no hay nada más que tapar y deja de importar dónde ponga Google el icono. */
.drive-proxy-container--audio .drive-proxy-mask {
    width: 76px;
    height: 100%;
}

/* En un móvil el reproductor es estrecho y sus controles quedan más cerca del
   borde: se recorta la franja a lo justo para seguir tapando el icono sin
   llegar a rozar el mando de volumen. */
@media (max-width: 600px) {
    .drive-proxy-container--audio .drive-proxy-mask {
        width: 56px;
    }
}

/* En pantallas estrechas el reproductor encoge y el botón también */
@media (max-width: 480px) {
    .drive-proxy-mask {
        width: 50px;
        height: 46px;
    }
}

/* Reproductor de audio. No necesita el fondo negro ni la proporción 16:9 del
   vídeo: ocupa solo el alto de su barra de controles. */
.drive-proxy-container--audio {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.drive-proxy-audio {
    display: block;
    width: 100%;
}

.drive-proxy-container--audio .drive-proxy-download-bar {
    background: transparent;
    border-top: 0;
    padding: 8px 0 0;
}

/* Marco de Google cuando el archivo es audio. Su reproductor de audio es una
   simple barra de controles: mantener la proporción 16:9 dejaría un rectángulo
   vacío enorme debajo. La altura se puede ajustar desde el tema redefiniendo
   la variable, por si Google cambia el alto de su reproductor. */
.drive-proxy-container--audio .drive-proxy-frame {
    --dpx-audio-height: 120px;
    padding-top: 0;
    aspect-ratio: auto;
    height: var( --dpx-audio-height );
    background: transparent;
}

.drive-proxy-container--audio .drive-proxy-iframe {
    position: static;
    height: var( --dpx-audio-height );
}