/* ═══════════════════════════════════════════════════════════════════════════
   IMAGIC FILMS — imagic-mobile-ui.css
   Top bar + Bottom bar fijas para móvil/tablet (≤ 1024px)
   Solo activas en mobile. Desktop no las ve.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Solo en mobile/tablet */
@media (min-width: 1025px) {
    #imagic-mobile-top,
    #imagic-mobile-bottom {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   VARIABLES LOCALES
   ───────────────────────────────────────────────────────────────────────── */
#imagic-mobile-top,
#imagic-mobile-bottom {
    --imu-bg:       #000000;
    --imu-text:     #ffffff;
    --imu-gold:     #CC8E03;
    --imu-muted:    rgba(255, 255, 255, 0.55);
    --imu-border:   rgba(255, 255, 255, 0.10);
    --imu-font:     'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --imu-top-h:    116px; /* logo 52px + tabs 64px */
    --imu-bot-h:    64px;
}

/* ─────────────────────────────────────────────────────────────────────────
   COMPENSAR ESPACIO: el contenido no queda oculto bajo las barras
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    /* Ocultar el header nativo de BuddyX en mobile */
    body:not(.imagic-cliente-page) .site-header-wrapper {
        display: none !important;
    }

    /* El área cliente tiene su propio header — también se oculta */
    body.imagic-cliente-page .site-header-wrapper {
        display: none !important;
    }

    /* Empujar contenido para que no quede bajo la top bar */
    body {
        padding-top: var(--imu-top-h) !important;
        padding-bottom: var(--imu-bot-h) !important;
    }

    /* Home: el hero es full-height y tiene su propio padding */
    body.home {
        padding-top: 0 !important; /* la top bar flota sobre el hero */
    }

    /* Páginas internas: compensar correctamente */
    body:not(.home):not(.imagic-cliente-page) #page {
        padding-top: 0 !important; /* ya lo gestiona body padding-top */
    }

    body.imagic-cliente-page .imagic-cliente-wrapper {
        padding-top: 0 !important;
    }

    /* Admin bar */
    body.admin-bar #imagic-mobile-top {
        top: 46px !important;
    }
    body.admin-bar {
        padding-top: calc(var(--imu-top-h) + 46px) !important;
    }
    body.admin-bar.home {
        padding-top: 46px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOP BAR
   Estructura:
     #imagic-mobile-top
       .imu-logo-bar         ← fila 1: logo centrado
       .imu-tabs-bar         ← fila 2: tabs de navegación
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    #imagic-mobile-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background: var(--imu-bg);
        /*border-bottom: 1px solid var(--imu-border);*/
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
        display: flex !important;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
    }

    /* ── Fila 1: Logo ── */
    .imu-logo-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px !important; /*Amplia el tamaño del top bar*/
        padding: 0 16px 8px !important; 
        /*border-bottom: 1px solid var(--imu-border);*/
    }

    .imu-logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        line-height: 1;
    }

    .imu-logo-link img {
        height: 32px;
        width: auto;
        display: block;
        filter: none;
    }

    /* ── Fila 2: Tabs ── */
    .imu-tabs-bar {
        display: flex;
        align-items: stretch;
        height: 56px;
        overflow: hidden;
    }

    .imu-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none !important;
        color: var(--imu-muted) !important;
        font-family: var(--imu-font);
        font-size: 9px !important; /*Tamaño tipografia de movil*/
        font-weight: 500;
        letter-spacing: 0.01em;
        line-height: 1.2;
        padding: 6px 4px 8px;
        position: relative;
        transition: color 0.2s ease;
        border: none;
        background: none;
        -webkit-tap-highlight-color: transparent;
        /* Línea dorada inferior — inicialmente invisible */
        border-bottom: 2.5px solid transparent;
        box-sizing: border-box;
    }

    .imu-tab:hover {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Tab activo */
    .imu-tab.imu-active {
        color: var(--imu-text) !important;
        border-bottom: 2.5px solid var(--imu-gold) !important;
    }

    /* Icono SVG dentro del tab */
    .imu-tab__icon {
        width: 22px;
        height: 22px;
        display: block;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .imu-tab__icon--fill {
        fill: currentColor;
        stroke: none;
    }

    .imu-tab__label {
        display: block;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
        text-align: center;
        color: #ffffff !important;
    }
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 390px) {
    .imu-tab {
        font-size: 9px !important; /*Tamaño tipografia de movil*/
    }

    .imu-tab__icon {
        width: 20px;
        height: 20px;
    }

    .imu-logo-link img {
        height: 28px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM BAR
   Estructura:
     #imagic-mobile-bottom
       .imu-bot-item × 3   ← Envía tu peli / WhatsApp / Acceso
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    #imagic-mobile-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background: var(--imu-bg);
        border-top: 1px solid var(--imu-border);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
        display: flex !important;
        align-items: stretch;
        height: var(--imu-bot-h);
        width: 100%;
        box-sizing: border-box;
        /* Safe area para iPhone con notch */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transition: transform 0.3s ease;
    }

    .imu-bot-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none !important;
        color: var(--imu-muted) !important;
        font-family: var(--imu-font);
        font-size: 10px;
        font-weight: 500;
        line-height: 1.2;
        padding: 6px 4px;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        border: none;
        background: none;
        cursor: pointer;
    }

    .imu-bot-item:hover,
    .imu-bot-item:active {
        color: var(--imu-text) !important;
    }

    /* Botón central WhatsApp: ligeramente destacado */
    .imu-bot-item--whatsapp {
        color: var(--imu-text) !important;
    }

    .imu-bot-item--whatsapp .imu-bot__icon {
        color: #CC8E03; 
    }

    /* Acceso: dorado si el usuario está logueado (clase añadida por JS) */
    .imu-bot-item--acceso.imu-logged {
        color: var(--imu-gold) !important;
    }

    .imu-bot__icon {
        width: 24px;
        height: 24px;
        display: block;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .imu-bot__icon--fill {
        fill: currentColor;
        stroke: none;
    }

    .imu-bot__label {
        display: block;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
        text-align: center;
        color: #ffffff !important;
    }

    /* Separadores verticales 
    .imu-bot-item + .imu-bot-item {
        border-left: 1px solid var(--imu-border);
    }*/
}

@media (max-width: 390px) {
    .imu-bot-item {
        font-size: 9px;
    }

    .imu-bot__icon {
        width: 22px;
        height: 22px;
    }
}