/* tap-overlay.css — estilos reusables del overlay de controles sobre media.
   Pareja con js/tap-overlay.js (window.TapOverlay).

   LAYERING CONTRACT:
     - z-index 6 (sincronizado con TapOverlay.Z_INDEX). Si cambia, actualizar ambos.
     - Wrapper pointer-events:none → swipe + other UI pasan a través cuando overlay
       no está visible. Botones recuperan pointer-events:auto solo con .visible.
     - Sin background del wrapper → no oscurece media. Los botones tienen su propio
       pill semi-transparente + blur para legibilidad sobre cualquier fondo. */

.tap-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
}
.tap-overlay.visible { opacity: 1; }

/* Slot center: fila flex horizontal centrada (ocupa todo el slide para centrar). */
.tap-overlay-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    pointer-events: none;
}

/* Botón base. pointer-events:none default → solo clickeable cuando .visible.
   Evita que tap en zona del botón invisible dispare su acción sin verlo. */
.tap-overlay-btn {
    pointer-events: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s, transform .12s;
}
.tap-overlay.visible .tap-overlay-btn { pointer-events: auto; }

.tap-overlay-btn:hover { background: rgba(0, 0, 0, .75); }
.tap-overlay-btn:active { transform: scale(.92); }
.tap-overlay-btn i {
    width: 26px;
    height: 26px;
    pointer-events: none;
}
.tap-overlay-btn[hidden] { display: none; }

/* Slots de esquina (absolute). Respetan safe-area-inset para notch/status bar. */
.tap-overlay-btn--tl,
.tap-overlay-btn--tr,
.tap-overlay-btn--bl,
.tap-overlay-btn--br {
    position: absolute;
}
.tap-overlay-btn--tl { top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; }
.tap-overlay-btn--tr { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
.tap-overlay-btn--bl { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px; }
.tap-overlay-btn--br { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: 12px; }