/*
 * Audio y vídeo en la diapositiva.
 *
 * El nodo que devuelve `media/av.js` vive dentro del marco `.shape--media` que
 * construye `layout/slideview.js`, que ya lleva la posición y el tamaño. Aquí
 * solo se resuelve cómo se ve el medio en cada contexto:
 *
 *   - en el lienzo y en las miniaturas, el póster (o un fondo neutro con el
 *     nombre) y un botón de reproducción; el medio no captura el puntero para
 *     que seleccionar y arrastrar la forma siga funcionando igual que con una
 *     imagen;
 *   - al presentar (`.present-root`), los controles nativos del navegador, que
 *     sí reciben el puntero.
 *
 * Todas las clases propias llevan el prefijo `av`.
 */

.shape--media {
    overflow: hidden;
}

.av {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1B1A19;
    border-radius: 2px;
}

.av--audio {
    background: transparent;
}

.av__el {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000000;
    /* En el lienzo el medio es decorado: el clic selecciona la forma. */
    pointer-events: none;
}

.av--audio .av__el {
    /* El audio solo se ve al presentar; en el lienzo manda el altavoz. */
    display: none;
    height: 40px;
    background: transparent;
}

/* ---------- Estado de edición ---------- */

/* Altavoz del audio: el icono redondo que PowerPoint deja en la diapositiva. */
.av__speaker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #444341;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Nombre del vídeo cuando aún no tiene póster. */
.av__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    color: #F3F2F1;
    font-family: var(--ppt-font-ui);
    font-size: var(--ppt-font-size-ui-sm);
    text-align: center;
    pointer-events: none;
    user-select: none;
}

/* Botón de reproducción sobre el medio; es el único que recibe el puntero. */
.av__play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}

.av__play:hover {
    background: rgba(0, 0, 0, 0.75);
}

.av.is-playing .av__play {
    opacity: 0.35;
}

/* Sobre el altavoz, que ocupa toda la forma, el botón va más discreto. */
.av--audio .av__play {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-color: transparent;
}

/* Formas muy pequeñas: el botón estorbaría más de lo que ayuda. */
.av.is-small .av__play {
    display: none;
}

.av.is-small .av__label {
    display: none;
}

/* ---------- Al presentar ---------- */

.present-root .av__el,
.av.is-presenting .av__el {
    pointer-events: auto;
}

/* Los controles nativos del audio son mucho más anchos que el icono del
   altavoz: al presentar el marco deja de recortarlos y la barra se coloca
   centrada bajo el icono, como en PowerPoint. */
.present-root .shape--media {
    overflow: visible;
}

.present-root .av--audio .av__el,
.av--audio.is-presenting .av__el {
    display: block;
    position: absolute;
    left: 50%;
    top: 100%;
    width: 280px;
    height: 40px;
    margin-top: 6px;
    transform: translateX(-50%);
    background: transparent;
}

/* ---------- Diálogo de dirección ---------- */

.av-dialog {
    min-width: 440px;
}

.av-dialog__input {
    width: 300px;
}

.av-dialog__error {
    min-height: 18px;
    margin-top: 8px;
    color: var(--ppt-spell-error);
    font-size: var(--ppt-font-size-ui-sm);
}