/* ==========================================================
   CASA MIXTECO
   CMX-33C · MÓVIL · BARRA INFERIOR · DISEÑO

   CONTROLA:
   - Barra inferior fija
   - Iconos
   - Etiquetas
   - Estado activo
   - Contador del carrito
   - Safe area en iPhone
   - Espacio inferior del sitio

   NO CONTROLA:
   - PHP de enlaces
   - Menú "Más"
   - Actualización AJAX
   - Lógica de categorías
   ========================================================== */


/* ==========================================================
   01 · BARRA GENERAL
   ========================================================== */

#cmx-mobile-bottom-nav {
    display: none;

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: var(--cmx-z-bottom, 1100);

    width: 100%;

    margin: 0;
    padding: 0;

    background:
        var(--cmx-blanco, #FFFFFF);

    border-top:
        1px solid var(--cmx-borde, #E6E6E6);

    box-shadow:
        0 -2px 10px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}


/* ==========================================================
   02 · CONTENEDOR INTERIOR
   ========================================================== */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__inner {

    width: 100%;
    max-width: 768px;

    min-height: 58px;

    margin: 0 auto;

    padding:
        5px
        4px
        calc(5px + env(safe-area-inset-bottom));

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    align-items: stretch;

    box-sizing: border-box;
}


/* ==========================================================
   03 · ITEM BASE
   ========================================================== */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__item {

    position: relative;

    min-width: 0;
    min-height: 52px;

    margin: 0;
    padding: 4px 2px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 3px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color:
        var(--cmx-texto-secundario, #666666) !important;

    font-family:
        var(--cmx-fuente, Arial, sans-serif);

    text-decoration: none !important;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}


/* ==========================================================
   04 · ICONO
   ========================================================== */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__icon {

    position: relative;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 25px;

    color: currentColor;
}


#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__icon svg {

    display: block;

    width: 23px;
    height: 23px;

    margin: 0;
    padding: 0;

    color: currentColor;

    stroke: currentColor;

    vector-effect:
        non-scaling-stroke;
}


/* ==========================================================
   05 · ETIQUETA
   ========================================================== */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__label {

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color: currentColor;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.1;

    text-align: center;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ==========================================================
   06 · ELEMENTO ACTIVO
   ========================================================== */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__item.is-active {

    color:
        var(--cmx-azul, #0000A6) !important;

    font-weight: 600;
}


/*
 * Pequeña línea azul superior.
 */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__item.is-active::before {

    content: "";

    position: absolute;

    top: -5px;
    left: 50%;

    width: 28px;
    height: 3px;

    border-radius: 999px;

    background:
        var(--cmx-azul, #0000A6);

    transform:
        translateX(-50%);
}


/* ==========================================================
   07 · CONTADOR DEL CARRITO
   ========================================================== */

#cmx-bottom-nav-cart-count {

    position: absolute;

    top: -7px;
    right: -10px;

    z-index: 2;

    min-width: 18px;
    height: 18px;

    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        2px solid var(--cmx-blanco, #FFFFFF);

    border-radius: 999px;

    background:
        var(--cmx-azul, #0000A6);

    color:
        var(--cmx-blanco, #FFFFFF);

    font-family:
        var(--cmx-fuente, Arial, sans-serif);

    font-size: 9px;
    font-weight: 700;

    line-height: 1;

    box-sizing: border-box;
}


/* ==========================================================
   08 · CARRITO VACÍO
   ========================================================== */

#cmx-bottom-nav-cart-count.is-empty {

    display: none !important;
}


/* ==========================================================
   09 · HOVER
   ========================================================== */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__item:hover {

    background:
        rgba(0, 0, 0, 0.035);

    color:
        var(--cmx-azul, #0000A6) !important;

    text-decoration: none !important;
}


/* ==========================================================
   10 · ACTIVE AL TOCAR
   ========================================================== */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__item:active {

    background:
        rgba(0, 0, 166, 0.08);
}


/* ==========================================================
   11 · FOCO
   ========================================================== */

#cmx-mobile-bottom-nav
.cmx-mobile-bottom-nav__item:focus-visible {

    outline:
        2px solid var(--cmx-azul, #0000A6);

    outline-offset: -2px;
}


/* ==========================================================
   12 · QUITAR ESTILOS DE ENLACES DEL TEMA
   ========================================================== */

#cmx-mobile-bottom-nav a,
#cmx-mobile-bottom-nav a:link,
#cmx-mobile-bottom-nav a:visited,
#cmx-mobile-bottom-nav a:hover,
#cmx-mobile-bottom-nav a:active {

    text-decoration: none !important;
}


/* ==========================================================
   13 · BOTÓN MÁS
   ========================================================== */

#cmx-mobile-bottom-more {

    appearance: none;
    -webkit-appearance: none;

    outline: none;
}


/* ==========================================================
   14 · ESPACIO PARA QUE LA BARRA NO TAPE CONTENIDO
   ========================================================== */

@media (max-width: 768px) {

    body {

        padding-bottom:
            calc(
                68px +
                env(safe-area-inset-bottom)
            ) !important;
    }

}


/* ==========================================================
   15 · MOSTRAR SOLO EN MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    #cmx-mobile-bottom-nav {

        display: block !important;
    }

}


/* ==========================================================
   16 · OCULTAR EN PC
   ========================================================== */

@media (min-width: 769px) {

    #cmx-mobile-bottom-nav {

        display: none !important;
    }

}