/* visibility-frontend.css */

/* ──────────────────────────────
   Hidden Mode
   ────────────────────────────── */
.tbl-hidden-mode {
    display: none !important;
}

.tbl-hidden-mode.is-active {
    display: revert !important;
}

/* ──────────────────────────────
   Popup Mode — Overlay wrapper
   El bloque con tbl-popup-mode actúa como el OVERLAY.
   Todo el padding/marco debe venir de los estilos
   propios del bloque hijo (Group, etc.).
   ────────────────────────────── */
.tbl-popup-mode {
    /* Posición y dimensiones del overlay */
    position: fixed !important;
    inset: 0;
    /* top/right/bottom/left: 0 */
    width: 100vw !important;
    height: 100vh !important;

    /* Overlay oscuro */
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 999999;

    /* Centrar el contenido */
    display: flex !important;
    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* Sin padding ni margen propio — el contenido controla su tamaño */
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Estado activo */
.tbl-popup-mode.show-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* El ÚNICO hijo directo del popup (el contenido real) 
   no recibe ningún marco, borde ni overflow de nuestra parte.
   El desccroll también queda a cargo del diseño interno. */
.tbl-popup-mode>* {
    position: relative;
    z-index: 1;
    /* Sin max-height forzado, sin overflow, sin padding extra */
    max-height: none;
    overflow: visible;

    /* Quitar márgenes automáticos de bloque que WP añade */
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Prevenir scroll del body mientras el popup está abierto */
body.tbl-popup-active {
    overflow: hidden !important;
}

/* ──────────────────────────────
   Toggle Mode
   ────────────────────────────── */
.tbl-toggle-mode {
    cursor: pointer;
}