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

:root {
    --lpf-nav-bg-top:        #0c1e45;
    --lpf-nav-bg-bottom:     #071225;
    --lpf-nav-height:        70px;
    --lpf-nav-skew:          -11deg;
    --lpf-nav-gap:           4px;
    --lpf-nav-radius:        8px;

    --lpf-nav-color:         rgba(255,255,255,0.45);
    --lpf-nav-color-hover:   rgba(255,255,255,0.90);
    --lpf-nav-color-active:  #071225;

    --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);

    --lpf-panel-bg:              #071225;
    --lpf-panel-border:          rgba(255,255,255,0.10);
    --lpf-panel-header-color:    rgba(255,255,255,0.35);
    --lpf-panel-link-color:      rgba(255,255,255,0.82);
    --lpf-panel-link-hover:      #ffffff;
    --lpf-panel-accordion-bg:    rgba(0,0,0,0.20);
    --lpf-panel-accordion-link:  rgba(255,255,255,0.70);
    --lpf-panel-level3-bg:       rgba(0,0,0,0.25);
    --lpf-panel-level3-link:     rgba(255,255,255,0.65);
}

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

    body {
        padding-bottom: calc(
            var(--lpf-nav-height) + 15px +
            env(safe-area-inset-bottom, 0px)
        ) !important;
    }

    /* ──────────────────────────────────────────────────────
       BARRA FIJA
       ────────────────────────────────────────────────────── */
    .lpf-bottom-nav {
        position: fixed;
        bottom:   0;
        left:     0;
        right:    0;
        z-index:  10000;
        height:         calc(var(--lpf-nav-height) + 15px + env(safe-area-inset-bottom, 0px));
        padding-top:    0;
        padding-left:   8px;
        padding-right:  8px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
        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;
        gap:         var(--lpf-nav-gap);
    }

    /* ──────────────────────────────────────────────────────
       ÍTEMS DE LA BARRA
       ────────────────────────────────────────────────────── */
    .lpf-bottom-nav__item {
        flex: 1;
        position: relative;
        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 horizontal para separación entre botones.
           El ::before (fondo) ocupa inset:0 → llega a los bordes del ítem.
           El padding vertical aquí solo afecta al contenido (ícono+label),
           no al fondo activo. */
        padding:         6px 2px 4px;
        cursor:          pointer;
        font-family:     var(--alch-font-family-accent);
        z-index:         0;
        min-width:       0;
        transition: color 0.22s ease;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .lpf-bottom-nav__item::before {
        content:          '';
        position:         absolute;
        /* Extiende el fondo desde el borde superior de la barra hasta
           el comienzo del área de safe-area (los 15px del espaciado).
           top: 0  → toca el borde superior
           bottom: 0 → toca el límite inferior del ítem (arriba del área del teléfono) */
        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;
    }

    .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);
    }

    .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);
        /* Igual que el hover pero en blanco sólido */
        transform:        skewX(var(--lpf-nav-skew));
        border-radius:    var(--lpf-nav-radius);
    }
    /* El fondo blanco comunica la página activa — el punto azul es redundante */
    .lpf-bottom-nav__item--active .lpf-bottom-nav__icon::after {
        display: none;
    }

    /* Cuando panel "Más" está abierto → desactivar ítem activo */
    .lpf-bottom-nav.lpf-more-open .lpf-bottom-nav__item--active {
        color: var(--lpf-nav-color);
    }
    .lpf-bottom-nav.lpf-more-open .lpf-bottom-nav__item--active::before {
        background-color: transparent;
        box-shadow: none;
    }
    .lpf-bottom-nav.lpf-more-open .lpf-bottom-nav__item--active .lpf-bottom-nav__icon::after {
        display: none;
    }
    .lpf-bottom-nav.lpf-more-open .lpf-bottom-nav__item--active .lpf-bottom-nav__logo-img {
        filter:         brightness(0) invert(1) opacity(0.45);
        -webkit-filter: brightness(0) invert(1) opacity(0.45);
    }

    .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);
        transform:        skewX(var(--lpf-nav-skew));
        border-radius:    var(--lpf-nav-radius);
    }

    .lpf-bottom-nav__icon {
        position:        relative;
        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;
    }
    .lpf-bottom-nav__item--active .lpf-bottom-nav__icon i { transform: translateY(-1px); }

    .lpf-bottom-nav__logo-img {
        display:     block;
        /* Tamaño de visualización: 22×22px (cuadrado 1:1).
           Sube el archivo a 66×66px para verse nítido en
           pantallas retina 3x (los 66px se escalan a 22px). */
        width:       22px;
        height:      22px;
        object-fit:  contain;
        /* Render nítido en pantallas de alta densidad */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        transition:  filter 0.22s ease;
        /* PNG inactivo: blanco semitransparente */
        filter:          brightness(0) invert(1) opacity(0.45);
        -webkit-filter:  brightness(0) invert(1) opacity(0.45);
    }
    .lpf-bottom-nav__item:hover .lpf-bottom-nav__logo-img {
        /* PNG hover: sobre fondo oscuro → blanco brillante */
        filter:         brightness(0) invert(1) opacity(0.90);
        -webkit-filter: brightness(0) invert(1) opacity(0.90);
    }
    .lpf-bottom-nav__item--active .lpf-bottom-nav__logo-img {
        /* PNG activo: sobre fondo BLANCO → oscuro para que sea visible.
           brightness(0) convierte cualquier PNG claro a negro.
           Se aproxima al color activo configurado en el dashboard. */
        filter:         brightness(0) opacity(0.85);
        -webkit-filter: brightness(0) opacity(0.85);
    }

    /* ── SVG inline: hereda color del ítem (dashboard → CSS var) ──
       fill="currentColor" en el SVG toma el valor de `color`
       del elemento padre, que cambia con activo/inactivo/hover.
       No se necesita filter — el color es exacto. */
    .lpf-bottom-nav__logo-svg {
        display:     block;
        width:       22px;
        height:      22px;
        fill:        currentColor;  /* hereda --lpf-nav-color o --lpf-nav-color-active */
        transition:  fill 0.22s ease, color 0.22s ease;
        flex-shrink: 0;
    }
    /* Forzar fill en todos los hijos del SVG por si tienen fill propio */
    .lpf-bottom-nav__logo-svg path,
    .lpf-bottom-nav__logo-svg circle,
    .lpf-bottom-nav__logo-svg rect,
    .lpf-bottom-nav__logo-svg polygon,
    .lpf-bottom-nav__logo-svg ellipse,
    .lpf-bottom-nav__logo-svg g {
        fill: currentColor;
    }
    /* Preservar stroke si el SVG lo usa */
    .lpf-bottom-nav__logo-svg [stroke]:not([stroke="none"]) {
        stroke: currentColor;
        fill:   none;
    }

    .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
       ────────────────────────────────────────────────────── */
    .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) + 15px + env(safe-area-inset-bottom, 0px));
        z-index:          9999;
        background-color: var(--lpf-panel-bg);
        border-radius:    18px 18px 0 0;
        max-height:       78vh;
        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); }

    .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;
    }
    .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:    var(--alch-font-family-accent);
        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, color 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .lpf-more-panel__close:hover { background: rgba(255,255,255,0.22); color: #ffffff; }
    .lpf-more-panel__body { padding: 0 0 24px; }

    /* ──────────────────────────────────────────────────────
       MENÚ WORDPRESS — 3 NIVELES

       Nivel 1 (secciones):  POSICIONES, CALENDARIO…
       Nivel 2 (sub-ítems):  Conferencia Este / 2025 / 2026…
         └─ Con hijos = acordeón desplegable
         └─ Sin hijos = enlace directo
       Nivel 3 (finales):    CLAUSURA 2025, APERTURA 2026…
       ────────────────────────────────────────────────────── */

    .lpf-more-panel__list {
        list-style: none;
        margin:     0;
        padding:    0;
    }

    /* ── NIVEL 1: encabezados de sección ── */
    .lpf-more-panel__list > li.menu-item-has-children > a {
        display:        block;
        padding:        20px 20px 6px;
        color:          var(--lpf-panel-header-color);
        font-family:    var(--alch-font-family-accent);
        font-size:      10px;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        text-decoration: none;
        cursor:         default;
        pointer-events: none;
        border-bottom:  none;
    }

    /* Separador entre secciones */
    .lpf-more-panel__list > li + li {
        border-top: 1px solid var(--lpf-panel-border);
    }

    /* Ítems de nivel 1 SIN hijos → enlace grande */
    .lpf-more-panel__list > li:not(.menu-item-has-children) > a {
        display:        flex;
        align-items:    center;
        padding:        16px 20px;
        color:          var(--lpf-panel-link-color);
        text-decoration: none;
        font-family:    var(--alch-font-family-accent);
        font-size:      15px;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        transition:     color 0.2s, padding-left 0.2s;
    }
    .lpf-more-panel__list > li:not(.menu-item-has-children) > a:hover {
        color: var(--lpf-panel-link-hover);
        padding-left: 28px;
    }

    /* ── SUB-MENÚ NIVEL 1 (contenedor de nivel 2) ── */
    .lpf-more-panel__list > li > .sub-menu {
        list-style: none;
        margin:     0;
        padding:    0 0 12px;
        border-top: none;
        background: transparent;
    }

    /* ── NIVEL 2 SIN hijos → enlace directo ── */
    .lpf-more-panel__list > li > .sub-menu > li:not(.menu-item-has-children) > a {
        display:        block;
        padding:        13px 20px 13px 24px;
        color:          var(--lpf-panel-link-color);
        text-decoration: none;
        font-family:    var(--alch-font-family-accent);
        font-size:      14px;
        font-weight:    600;
        letter-spacing: 0.01em;
        transition:     color 0.2s, padding-left 0.2s;
        border-bottom:  1px solid rgba(255,255,255,0.05);
    }
    .lpf-more-panel__list > li > .sub-menu > li:not(.menu-item-has-children):last-child > a {
        border-bottom: none;
    }
    .lpf-more-panel__list > li > .sub-menu > li:not(.menu-item-has-children) > a:hover {
        color:        var(--lpf-panel-link-hover);
        padding-left: 32px;
    }

    /* ── NIVEL 2 CON hijos → acordeón ── */
    .lpf-more-panel__list > li > .sub-menu > li.menu-item-has-children[data-accordion] > a {
        display:        flex;
        align-items:    center;
        justify-content: space-between;
        padding:        13px 20px 13px 24px;
        color:          var(--lpf-panel-accordion-link);
        text-decoration: none;
        font-family:    var(--alch-font-family-accent);
        font-size:      14px;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        cursor:         pointer;
        border-bottom:  1px solid rgba(255,255,255,0.06);
        transition:     color 0.2s, background-color 0.2s;
    }
    .lpf-more-panel__list > li > .sub-menu > li.menu-item-has-children[data-accordion] > a:hover {
        color:            var(--lpf-panel-link-hover);
        background-color: rgba(255,255,255,0.04);
    }

    /* Flecha del acordeón (Font Awesome inline via pseudo) */
    .lpf-more-panel__list > li > .sub-menu > li.menu-item-has-children[data-accordion] > a::after {
        content:       '\f107';           /* fa-angle-down */
        font-family:   'Font Awesome 5 Free';
        font-weight:   900;
        font-size:     13px;
        flex-shrink:   0;
        margin-left:   8px;
        color:         rgba(255,255,255,0.35);
        transition:    transform 0.25s ease, color 0.2s ease;
    }

    /* Flecha girada cuando está expandido */
    .lpf-more-panel__list > li > .sub-menu > li.menu-item-has-children[data-accordion].is-expanded > a::after {
        transform: rotate(180deg);
        color:     rgba(255,255,255,0.70);
    }

    /* Ítem expandido: resaltar texto */
    .lpf-more-panel__list > li > .sub-menu > li.menu-item-has-children[data-accordion].is-expanded > a {
        color: var(--lpf-panel-link-hover);
    }

    /* ── NIVEL 3 (dentro del acordeón) → oculto por defecto ── */
    .lpf-more-panel__list > li > .sub-menu > li.menu-item-has-children > .sub-menu {
        list-style:   none;
        margin:       0;
        padding:      0;
        background:   var(--lpf-panel-level3-bg);
        max-height:   0;
        overflow:     hidden;
        transition:   max-height 0.30s ease;
    }

    /* Cuando el padre está expandido → mostrar nivel 3 */
    .lpf-more-panel__list > li > .sub-menu > li.menu-item-has-children.is-expanded > .sub-menu {
        max-height: 400px;   /* suficiente para cualquier cantidad de sub-ítems */
    }

    /* Estilo de los ítems de nivel 3 */
    .lpf-more-panel__list > li > .sub-menu > li > .sub-menu > li > a {
        display:        block;
        padding:        12px 20px 12px 36px;
        color:          var(--lpf-panel-level3-link);
        text-decoration: none;
        font-family:    var(--alch-font-family-accent);
        font-size:      13px;
        font-weight:    500;
        letter-spacing: 0.01em;
        border-bottom:  1px solid rgba(255,255,255,0.04);
        transition:     color 0.2s, padding-left 0.2s;
    }
    .lpf-more-panel__list > li > .sub-menu > li > .sub-menu > li:last-child > a {
        border-bottom: none;
    }
    .lpf-more-panel__list > li > .sub-menu > li > .sub-menu > li > a:hover {
        color:        var(--lpf-panel-link-hover);
        padding-left: 44px;
    }
    .lpf-more-panel__list > li > .sub-menu > li > .sub-menu > li.current-menu-item > a {
        color:       var(--lpf-panel-link-hover);
        font-weight: 700;
    }

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


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