/* ============================================================
   LPF Bottom Navigation Bar — Botonera inclinada
   Archivo: LPF-Child/assets/bottom-nav.css
   v1.0.5
   ============================================================ */

:root {
    /* ── Barra ── */
    --lpf-nav-bg-top:        #0c1e45;
    --lpf-nav-bg-bottom:     #071225;
    --lpf-nav-height:        70px;             /* altura visible de la barra  */
    --lpf-nav-skew:          -11deg;           /* inclinación de cada botón   */
    --lpf-nav-gap:           4px;              /* separación entre botones    */
    --lpf-nav-radius:        8px;              /* redondeo del botón inclinado*/

    /* ── Colores ── */
    --lpf-nav-color:         rgba(255,255,255,0.45);
    --lpf-nav-color-hover:   rgba(255,255,255,0.90);
    --lpf-nav-color-active:  #071225;          /* texto sobre fondo blanco    */

    /* ── Fondos de estado ── */
    --lpf-nav-hover-bg:      rgba(255,255,255,0.10);
    --lpf-nav-active-bg:     #ffffff;
    --lpf-nav-active-shadow: 0 2px 12px rgba(0,0,0,0.35);

    /* ── Panel "Más" ── */
    --lpf-panel-bg:          #071225;
    --lpf-panel-border:      rgba(255,255,255,0.10);
    --lpf-panel-link-color:  rgba(255,255,255,0.80);
    --lpf-panel-link-hover:  #ffffff;
    --lpf-panel-sub-color:   rgba(255,255,255,0.50);
}

/* ============================================================
   MÓVIL / TABLET  (< 992px)
   ============================================================ */
@media (max-width: 991px) {

    /* ── Padding inferior de la página ───────────────────── */
    body {
        padding-bottom: calc(
            var(--lpf-nav-height) +
            env(safe-area-inset-bottom, 0px)
        ) !important;
    }

    /* ──────────────────────────────────────────────────────
       BARRA FIJA
       ────────────────────────────────────────────────────── */
    .lpf-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;

        /* La barra ocupa exactamente su altura + notch iPhone */
        height: calc(var(--lpf-nav-height) + env(safe-area-inset-bottom, 0px));

        /* Padding: arriba/lados fijos, abajo = safe-area */
        padding-top:    6px;
        padding-left:   8px;
        padding-right:  8px;
        padding-bottom: env(safe-area-inset-bottom, 6px);

        background: linear-gradient(
            180deg,
            var(--lpf-nav-bg-top)    0%,
            var(--lpf-nav-bg-bottom) 100%
        );
        border-top:  1px solid rgba(255,255,255,0.08);
        box-shadow:  0 -3px 20px rgba(0,0,0,0.50);

        display:     flex;
        align-items: stretch;       /* cada ítem ocupa toda la altura */
        gap:         var(--lpf-nav-gap);
    }

    /* ──────────────────────────────────────────────────────
       CADA ÍTEM (a + button)
       ────────────────────────────────────────────────────── */
    .lpf-bottom-nav__item {
        flex:     1;
        position: relative;

        /* Ocupa toda la altura de la barra */
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        gap: 5px;

        color:           var(--lpf-nav-color);
        text-decoration: none;
        background:      none;
        border:          none;
        padding:         0 2px;
        cursor:          pointer;
        font-family:     'Montserrat', sans-serif;
        z-index:         0;
        min-width:       0;          /* evita overflow en pantallas pequeñas */

        transition: color 0.22s ease;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    /* ── Fondo inclinado (::before) ─────────────────────────
       Solo el fondo se skewea; icono y label quedan rectos.
       ────────────────────────────────────────────────────── */
    .lpf-bottom-nav__item::before {
        content:          '';
        position:         absolute;
        inset:            0;
        border-radius:    var(--lpf-nav-radius);
        transform:        skewX(var(--lpf-nav-skew));
        background-color: transparent;
        transition:
            background-color 0.22s ease,
            box-shadow       0.22s ease;
        z-index: -1;
    }

    /* ── HOVER ── */
    .lpf-bottom-nav__item:hover,
    .lpf-bottom-nav__item:focus {
        color:   var(--lpf-nav-color-hover);
        outline: none;
    }

    .lpf-bottom-nav__item:hover::before {
        background-color: var(--lpf-nav-hover-bg);
    }

    /* ── ACTIVO ── */
    .lpf-bottom-nav__item--active {
        color: var(--lpf-nav-color-active);
    }

    .lpf-bottom-nav__item--active::before {
        background-color: var(--lpf-nav-active-bg);
        box-shadow:       var(--lpf-nav-active-shadow);
    }

    /* Punto indicador azul bajo el ícono activo */
    .lpf-bottom-nav__item--active .lpf-bottom-nav__icon::after {
        content:          '';
        display:          block;
        position:         absolute;
        bottom:           -4px;
        left:             50%;
        transform:        translateX(-50%);
        width:            4px;
        height:           4px;
        border-radius:    50%;
        background-color: #1a5fd4;
    }

    /* ── BOTÓN "MÁS" cuando panel está abierto ── */
    .lpf-bottom-nav__more-btn[aria-expanded="true"] {
        color: var(--lpf-nav-color-active);
    }

    .lpf-bottom-nav__more-btn[aria-expanded="true"]::before {
        background-color: var(--lpf-nav-active-bg);
        box-shadow:       var(--lpf-nav-active-shadow);
    }

    /* ──────────────────────────────────────────────────────
       ÍCONO
       ────────────────────────────────────────────────────── */
    .lpf-bottom-nav__icon {
        position: relative;          /* ancla el punto indicador */
        display:  flex;
        align-items:     center;
        justify-content: center;
        width:  34px;
        height: 26px;
        flex-shrink: 0;
    }

    .lpf-bottom-nav__icon i {
        font-size:  20px;
        line-height: 1;
        transition: transform 0.22s ease;
    }

    /* El ícono activo sube ligeramente */
    .lpf-bottom-nav__item--active .lpf-bottom-nav__icon i {
        transform: translateY(-1px);
    }

    /* ──────────────────────────────────────────────────────
       LOGO LPF (imagen WordPress)
       ────────────────────────────────────────────────────── */
    .lpf-bottom-nav__logo-img {
        display:     block;
        width:       auto;
        height:      22px;
        object-fit:  contain;
        transition:  filter 0.22s ease;
        /* Inactivo: logo en blanco semitransparente */
        filter:          brightness(0) invert(1) opacity(0.45);
        -webkit-filter:  brightness(0) invert(1) opacity(0.45);
    }

    /* Hover o activo: logo con colores originales */
    .lpf-bottom-nav__item:hover   .lpf-bottom-nav__logo-img,
    .lpf-bottom-nav__item--active .lpf-bottom-nav__logo-img {
        filter:         none;
        -webkit-filter: none;
    }

    /* ──────────────────────────────────────────────────────
       ETIQUETA DE TEXTO
       ────────────────────────────────────────────────────── */
    .lpf-bottom-nav__label {
        font-size:      9px;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height:    1;
        white-space:    nowrap;
        overflow:       hidden;
        text-overflow:  ellipsis;
        max-width:      100%;
    }

    /* ──────────────────────────────────────────────────────
       OVERLAY (fondo oscuro detrás del panel)
       ────────────────────────────────────────────────────── */
    .lpf-more-overlay {
        position:   fixed;
        inset:      0;
        z-index:    9998;
        background: rgba(0, 0, 0, 0.60);
        opacity:    0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .lpf-more-overlay.is-visible {
        opacity:    1;
        visibility: visible;
    }

    /* ──────────────────────────────────────────────────────
       PANEL "MÁS"
       ────────────────────────────────────────────────────── */
    .lpf-more-panel {
        position:          fixed;
        left:              0;
        right:             0;
        bottom:            calc(var(--lpf-nav-height) + env(safe-area-inset-bottom, 0px));
        z-index:           9999;
        background-color:  var(--lpf-panel-bg);
        border-radius:     18px 18px 0 0;
        max-height:        72vh;
        overflow-y:        auto;
        overscroll-behavior: contain;
        transform:         translateY(100%);
        transition:        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-overflow-scrolling: touch;
    }

    .lpf-more-panel.is-open {
        transform: translateY(0);
    }

    /* Cabecera del panel */
    .lpf-more-panel__header {
        display:          flex;
        align-items:      center;
        justify-content:  space-between;
        padding:          16px 20px 14px;
        border-bottom:    1px solid var(--lpf-panel-border);
        position:         sticky;
        top:              0;
        background-color: var(--lpf-panel-bg);
        z-index:          1;
    }

    /* Tirador visual */
    .lpf-more-panel__header::before {
        content:    '';
        position:   absolute;
        top:        8px;
        left:       50%;
        transform:  translateX(-50%);
        width:      36px;
        height:     4px;
        background: rgba(255,255,255,0.20);
        border-radius: 2px;
    }

    .lpf-more-panel__title {
        font-family:    'Montserrat', sans-serif;
        font-size:      13px;
        font-weight:    700;
        color:          #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .lpf-more-panel__close {
        background:  rgba(255,255,255,0.10);
        border:      none;
        color:       rgba(255,255,255,0.75);
        width:       32px;
        height:      32px;
        border-radius: 50%;
        display:     flex;
        align-items: center;
        justify-content: center;
        cursor:      pointer;
        font-size:   14px;
        transition:  background-color 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .lpf-more-panel__close:hover {
        background: rgba(255,255,255,0.22);
        color:      #ffffff;
    }

    .lpf-more-panel__body {
        padding: 8px 0 16px;
    }

    /* ──────────────────────────────────────────────────────
       LISTA MENÚ WORDPRESS
       ────────────────────────────────────────────────────── */
    .lpf-more-panel__list {
        list-style: none;
        margin:     0;
        padding:    0;
    }

    .lpf-more-panel__list > li {
        border-bottom: 1px solid var(--lpf-panel-border);
    }

    .lpf-more-panel__list > li:last-child {
        border-bottom: none;
    }

    .lpf-more-panel__list > li > a {
        display:        flex;
        align-items:    center;
        padding:        15px 20px;
        color:          var(--lpf-panel-link-color);
        text-decoration: none;
        font-family:    'Montserrat', sans-serif;
        font-size:      13px;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        transition:     color 0.2s ease, padding-left 0.2s ease;
    }

    .lpf-more-panel__list > li > a:hover,
    .lpf-more-panel__list > li.current-menu-item > a {
        color:        var(--lpf-panel-link-hover);
        padding-left: 28px;
    }

    /* Submenús */
    .lpf-more-panel__list .sub-menu {
        list-style:  none;
        padding:     0 0 8px;
        margin:      0;
        border-top:  1px solid var(--lpf-panel-border);
        background:  rgba(0,0,0,0.15);
    }

    .lpf-more-panel__list .sub-menu > li > a {
        display:        block;
        padding:        10px 20px 10px 36px;
        color:          var(--lpf-panel-sub-color);
        text-decoration: none;
        font-family:    'Montserrat', sans-serif;
        font-size:      11px;
        font-weight:    600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        transition:     color 0.2s ease;
    }

    .lpf-more-panel__list .sub-menu > li > a:hover {
        color: #ffffff;
    }

} /* fin @media max-width: 991px */


/* ============================================================
   DESKTOP (≥ 992px): todo oculto
   ============================================================ */
@media (min-width: 992px) {
    .lpf-bottom-nav,
    .lpf-more-panel,
    .lpf-more-overlay {
        display: none !important;
    }
}