/* ==========================================================
   CASA MIXTECO
   CMX-35C · MÓVIL · MENÚ MÁS · DISEÑO

   CONTROLA:
   - Overlay
   - Panel inferior
   - Encabezado
   - Botón cerrar
   - Opciones
   - Iconos
   - Flechas
   - Pie del panel
   - Safe area
   - Estado visual abierto/cerrado

   NO CONTROLA:
   - JavaScript
   - Apertura real
   - Cierre real
   - Animación funcional
   - Acciones adicionales
   ========================================================== */


/* ==========================================================
   01 · OVERLAY GENERAL
   ========================================================== */

#cmx-mobile-more-overlay {

    position: fixed;

    inset: 0;

    z-index:
        var(--cmx-z-overlay, 1200);

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

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

    background: transparent;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    box-sizing: border-box;
}


/* ==========================================================
   02 · ESTADO ABIERTO
   ========================================================== */

#cmx-mobile-more-overlay.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ==========================================================
   03 · FONDO OSCURO
   ========================================================== */

#cmx-mobile-more-overlay
.cmx-mobile-more-overlay__backdrop {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

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

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


/* ==========================================================
   04 · PANEL
   ========================================================== */

#cmx-mobile-more-panel {

    position: relative;

    z-index:
        var(--cmx-z-menu, 1210);

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

    max-height: 82vh;

    margin: 0;
    padding: 0;

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

    border-radius:
        18px 18px 0 0;

    box-shadow:
        0 -8px 30px rgba(0, 0, 0, 0.18);

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    box-sizing: border-box;

    transform:
        translateY(105%);
}


/* ==========================================================
   05 · PANEL EN ESTADO ABIERTO
   ========================================================== */

#cmx-mobile-more-overlay.is-open
#cmx-mobile-more-panel {

    transform:
        translateY(0);
}


/* ==========================================================
   06 · INDICADOR SUPERIOR
   ========================================================== */

#cmx-mobile-more-panel::before {

    content: "";

    display: block;

    width: 40px;
    height: 4px;

    margin:
        8px auto 2px auto;

    border-radius: 999px;

    background:
        #D8D8D8;
}


/* ==========================================================
   07 · ENCABEZADO
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__header {

    width: 100%;

    min-height: 66px;

    margin: 0;
    padding:
        10px
        14px
        10px
        18px;

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

    gap: 12px;

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

    box-sizing: border-box;
}


/* ==========================================================
   08 · BLOQUE DE TÍTULO
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__heading {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


/* ==========================================================
   09 · TÍTULO
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__title {

    display: block;

    color:
        var(--cmx-texto, #333333);

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

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

    line-height: 1.15;
}


/* ==========================================================
   10 · SUBTÍTULO
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__subtitle {

    display: block;

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

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

    font-size: 12px;
    font-weight: 400;

    line-height: 1.15;
}


/* ==========================================================
   11 · BOTÓN CERRAR
   ========================================================== */

#cmx-mobile-more-close {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    margin: 0;
    padding: 0;

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

    border: 0;
    border-radius: 999px;

    background:
        #F5F5F5;

    color:
        var(--cmx-negro, #000000);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-sizing: border-box;
}


/* ==========================================================
   12 · ICONO CERRAR
   ========================================================== */

#cmx-mobile-more-close svg {

    display: block;

    width: 21px;
    height: 21px;

    stroke: currentColor;
}


/* ==========================================================
   13 · HOVER CERRAR
   ========================================================== */

#cmx-mobile-more-close:hover {

    background:
        #ECECEC;
}


/* ==========================================================
   14 · NAVEGACIÓN
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__nav {

    width: 100%;

    margin: 0;
    padding:
        8px
        12px;

    box-sizing: border-box;
}


/* ==========================================================
   15 · ITEM
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__item {

    width: 100%;
    min-height: 66px;

    margin: 0;
    padding:
        8px
        6px;

    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        24px;

    align-items: center;

    column-gap: 10px;

    border-bottom:
        1px solid #F0F0F0;

    border-radius: 8px;

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

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

    text-decoration:
        none !important;

    box-sizing: border-box;

    transition:
        background-color 0.15s ease;
}


/* ==========================================================
   16 · ÚLTIMO ITEM
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__item:last-child {

    border-bottom: 0;
}


/* ==========================================================
   17 · ICONO DEL ITEM
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__icon {

    width: 40px;
    height: 40px;

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

    border-radius: 999px;

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

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


/* ==========================================================
   18 · SVG DEL ITEM
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__icon svg {

    display: block;

    width: 22px;
    height: 22px;

    stroke: currentColor;

    vector-effect:
        non-scaling-stroke;
}


/* ==========================================================
   19 · CONTENIDO DEL ITEM
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__content {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


/* ==========================================================
   20 · ETIQUETA
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__label {

    display: block;

    color:
        var(--cmx-texto, #333333);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.15;
}


/* ==========================================================
   21 · DESCRIPCIÓN
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__description {

    display: block;

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

    font-size: 11px;
    font-weight: 400;

    line-height: 1.25;

    white-space: normal;
}


/* ==========================================================
   22 · FLECHA
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__arrow {

    width: 24px;
    height: 24px;

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

    color:
        #8A8A8A;

    font-size: 26px;
    font-weight: 300;

    line-height: 1;
}


/* ==========================================================
   23 · HOVER DE ITEM
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__item:hover {

    background:
        #F7F7F7;

    text-decoration:
        none !important;
}


/* ==========================================================
   24 · ACTIVE
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__item:active {

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


/* ==========================================================
   25 · ENLACES
   ========================================================== */

#cmx-mobile-more-panel a,
#cmx-mobile-more-panel a:link,
#cmx-mobile-more-panel a:visited,
#cmx-mobile-more-panel a:hover,
#cmx-mobile-more-panel a:active {

    text-decoration:
        none !important;
}


/* ==========================================================
   26 · FOCO
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__item:focus-visible,
#cmx-mobile-more-close:focus-visible {

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

    outline-offset: 2px;
}


/* ==========================================================
   27 · PIE
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__footer {

    width: 100%;

    margin: 0;

    padding:
        14px
        16px
        calc(
            18px +
            env(safe-area-inset-bottom)
        );

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

    text-align: center;

    box-sizing: border-box;
}


/* ==========================================================
   28 · CASA MIXTECO PIE
   ========================================================== */

#cmx-mobile-more-panel
.cmx-mobile-more-panel__home {

    display: inline-flex;

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

    min-height: 32px;

    margin: 0;
    padding: 0 14px;

    border-radius: 999px;

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

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

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

    letter-spacing: 0.3px;

    text-decoration:
        none !important;
}


/* ==========================================================
   29 · TRANSICIONES
   ========================================================== */

#cmx-mobile-more-overlay {

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


#cmx-mobile-more-panel {

    transition:
        transform 0.25s ease;
}


/* ==========================================================
   30 · BLOQUEAR SCROLL CUANDO SE ABRA
   ========================================================== */

body.cmx-mobile-more-open {

    overflow: hidden !important;
}


/* ==========================================================
   31 · SOLO MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    #cmx-mobile-more-overlay {

        display: flex;
    }

}


/* ==========================================================
   32 · OCULTAR EN PC
   ========================================================== */

@media (min-width: 769px) {

    #cmx-mobile-more-overlay {

        display: none !important;
    }

}