/* =====================================================
   mega-menu-categories.css  —  versión final limpia
   ===================================================== */

/* ══════════════════════════════════════════════════════
   ELEMENTOS MÓVILES: siempre ocultos en desktop
   (drawer, overlay móvil, botón móvil)
   ══════════════════════════════════════════════════════ */
.xmm-mobile-cat-wrapper,
.xmm-mobile-drawer,
.xmm-mobile-overlay {
    display: none !important;
}

/* ══════════════════════════════════════════════════════
   DESKTOP: mega menú (>768px)
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

    /* Wrapper posicionador */
    .xmm-wrapper {
        position:    relative !important;
        display:     inline-flex !important;
        align-items: center !important;
    }

    /* Botón toggle */
    .xmm-toggle {
        display:       inline-flex !important;
        align-items:   center !important;
        gap:           8px !important;
        padding:       8px 14px !important;
        background:    rgba(255,255,255,0.13) !important;
        border:        1.5px solid rgba(255,255,255,0.22) !important;
        border-radius: 8px !important;
        color:         #fff !important;
        font-size:     13px !important;
        font-weight:   600 !important;
        font-family:   inherit !important;
        cursor:        pointer !important;
        white-space:   nowrap !important;
        line-height:   1 !important;
        outline:       none !important;
        transition:    background 0.15s;
    }
    .xmm-toggle:hover         { background: rgba(255,255,255,0.23) !important; }
    .xmm-toggle .xmm-chevron  { font-size:10px !important; transition:transform 0.2s; }
    .xmm-wrapper.xmm-open .xmm-chevron { transform: rotate(180deg); }

    /* Dropdown: oculto por defecto */
    .xmm-dropdown {
        display:       none !important;
        position:      absolute !important;
        top:           calc(100% + 8px) !important;
        left:          0 !important;
        z-index:       99999 !important;
        width:         880px !important;
        max-width:     calc(100vw - 24px) !important;
        background:    #ffffff !important;
        border-radius: 10px !important;
        box-shadow:    0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08) !important;
        border:        1px solid rgba(0,0,0,0.09) !important;
        overflow:      hidden !important;
        padding:       0 !important;
        margin:        0 !important;
        float:         none !important;
        min-width:     auto !important;
        animation:     xmmFadeIn 0.15s ease;
    }
    /* Visible cuando está abierto */
    .xmm-wrapper.xmm-open .xmm-dropdown {
        display: block !important;
    }

    @keyframes xmmFadeIn {
        from { opacity:0; transform:translateY(-5px); }
        to   { opacity:1; transform:translateY(0); }
    }

    /* Layout interno: sidebar + paneles lado a lado */
    .xmm-inner {
        display:    flex !important;
        flex-direction: row !important;
        min-height: 400px !important;
        max-height: 480px !important;
        width:      100% !important;
        padding:    0 !important;
        margin:     0 !important;
    }

    /* ── Sidebar izquierda ── */
    .xmm-sidebar {
        display:      block !important;
        width:        220px !important;
        min-width:    220px !important;
        max-width:    220px !important;
        flex-shrink:  0 !important;
        background:   #1b2534 !important;
        overflow-y:   auto !important;
        overflow-x:   hidden !important;
        padding:      0 !important;
        margin:       0 !important;
        border:       none !important;
        border-radius:0 !important;
        box-shadow:   none !important;
        position:     static !important;
        float:        none !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.1) transparent;
    }
    .xmm-sidebar::-webkit-scrollbar { width:4px; }
    .xmm-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:4px; }

    /* Reset duro en ul/li dentro del sidebar para anular el tema */
    .xmm-sidebar > ul,
    .xmm-sidebar ul {
        all:        unset !important;
        display:    block !important;
        list-style: none !important;
        margin:     0 !important;
        padding:    6px 0 !important;
        background: transparent !important;
        border:     none !important;
        box-shadow: none !important;
        position:   static !important;
        width:      100% !important;
    }
    .xmm-sidebar ul li {
        all:      unset !important;
        display:  block !important;
        margin:   0 !important;
        padding:  0 !important;
        position: static !important;
        float:    none !important;
    }

    /* Links de categorías en la sidebar */
    .xmm-cat-link {
        all:             unset !important;
        display:         flex !important;
        align-items:     center !important;
        gap:             9px !important;
        padding:         11px 14px !important;
        color:           #cdd6e0 !important;
        font-size:       12.5px !important;
        font-weight:     500 !important;
        text-decoration: none !important;
        border-left:     3px solid transparent !important;
        cursor:          pointer !important;
        width:           100% !important;
        box-sizing:      border-box !important;
        transition:      background 0.12s, border-color 0.12s, color 0.12s;
    }
    .xmm-cat-link:hover,
    .xmm-cat-link.xmm-active {
        background:   #263245 !important;
        border-color: var(--main-primary_color, #22a06b) !important;
        color:        #ffffff !important;
    }
    .xmm-cat-link .fa-tag     { font-size:11px !important; opacity:0.55; flex-shrink:0; color:#cdd6e0 !important; }
    .xmm-cat-link.xmm-active .fa-tag { color:#fff !important; }
    .xmm-cat-link > span      { flex:1 !important; }
    .xmm-arrow-right          { font-size:9px; opacity:0.3; flex-shrink:0; }
    .xmm-cat-link.xmm-active .xmm-arrow-right { opacity:0.7; }

    /* ── Panel derecho de subcategorías ── */
    .xmm-panels {
        display:    block !important;
        flex:       1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding:    20px 22px !important;
        background: #ffffff !important;
        margin:     0 !important;
        border:     none !important;
        position:   static !important;
        box-shadow: none !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.08) transparent;
    }
    .xmm-panels::-webkit-scrollbar { width:4px; }
    .xmm-panels::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.1); border-radius:4px; }

    .xmm-panel              { display:none !important; }
    .xmm-panel.xmm-active   { display:block !important; }

    /* Grid de subcategorías */
    .xmm-grid {
        display:               grid !important;
        grid-template-columns: repeat(auto-fill, minmax(155px,1fr)) !important;
        gap:                   4px 20px !important;
        padding:               0 !important;
        margin:                0 !important;
    }
    .xmm-col { display:block !important; padding:0 !important; margin:0 !important; }

    /* Reset duro en ul/li dentro de los paneles */
    .xmm-col ul,
    .xmm-panels ul {
        all:        unset !important;
        display:    block !important;
        list-style: none !important;
        margin:     0 0 18px !important;
        padding:    0 !important;
        background: transparent !important;
        border:     none !important;
        box-shadow: none !important;
        position:   static !important;
        width:      100% !important;
    }
    .xmm-col ul li,
    .xmm-panels ul li {
        all:      unset !important;
        display:  block !important;
        margin:   0 !important;
        padding:  0 !important;
        position: static !important;
        float:    none !important;
    }

    /* Título de sección */
    .xmm-title a {
        all:             unset !important;
        display:         block !important;
        font-size:       10.5px !important;
        font-weight:     700 !important;
        text-transform:  uppercase !important;
        letter-spacing:  0.07em !important;
        color:           #374151 !important;
        padding:         0 0 7px !important;
        border-bottom:   1.5px solid rgba(0,0,0,0.09) !important;
        margin-bottom:   5px !important;
        text-decoration: none !important;
        cursor:          pointer !important;
        transition:      color 0.12s;
    }
    .xmm-title a:hover { color: var(--main-primary_color, #22a06b) !important; }

    /* Items hijo */
    .xmm-col li:not(.xmm-title) a {
        all:             unset !important;
        display:         block !important;
        font-size:       12.5px !important;
        color:           #6b7a90 !important;
        padding:         3px 0 !important;
        text-decoration: none !important;
        cursor:          pointer !important;
        transition:      color 0.12s, padding-left 0.12s;
    }
    .xmm-col li:not(.xmm-title) a:hover {
        color:        var(--main-primary_color, #22a06b) !important;
        padding-left: 4px !important;
    }

    .xmm-empty {
        display:    block !important;
        font-size:  13px !important;
        color:      #6b7a90 !important;
        padding:    48px 0 !important;
        text-align: center !important;
        margin:     0 !important;
    }

    /* Overlay desktop */
    .xmm-overlay {
        display:  none;
        position: fixed;
        inset:    0;
        z-index:  99998;
    }
    .xmm-overlay.xmm-visible { display: block; }

    /* Tablet ajuste de ancho */
    @media (max-width: 1100px) {
        .xmm-dropdown { width: calc(100vw - 20px) !important; }
        .xmm-sidebar  { width:185px !important; min-width:185px !important; max-width:185px !important; }
    }
}

/* ══════════════════════════════════════════════════════
   MÓVIL (≤768px): drawer de categorías
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Ocultar el mega menú desktop */
    .xmm-wrapper  { display: none !important; }
    .xmm-overlay  { display: none !important; }

    /* Botón categorías móvil */
    .xmm-mobile-cat-wrapper {
        display:     flex !important;
        align-items: center !important;
        order:       -1 !important;
        flex-shrink: 0 !important;
    }

    .xmm-cat-hamburger-btn {
        all:           unset !important;
        display:       inline-flex !important;
        align-items:   center !important;
        justify-content: center !important;
        padding:       7px 14px !important;
        background:    transparent !important;
        border:        1.5px solid rgba(255,255,255,0.7) !important;
        border-radius: 6px !important;
        color:         #ffffff !important;
        font-size:     13px !important;
        font-weight:   600 !important;
        font-family:   inherit !important;
        cursor:        pointer !important;
        white-space:   nowrap !important;
        letter-spacing: 0.02em !important;
        transition:    background 0.15s, border-color 0.15s;
        box-sizing:    border-box !important;
    }
    .xmm-cat-hamburger-btn:hover {
        background:    rgba(255,255,255,0.15) !important;
        border-color:  #ffffff !important;
    }

    /* Drawer: siempre fuera de pantalla (no ocupa espacio) */
    .xmm-mobile-drawer {
        display:        flex !important;
        flex-direction: column !important;
        position:       fixed !important;
        top:            0 !important;
        left:           0 !important;
        width:          300px !important;
        max-width:      88vw !important;
        height:         100% !important;
        background:     #ffffff !important;
        z-index:        100000 !important;
        transform:      translateX(-100%) !important;
        transition:     transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        overflow:       hidden !important;
        margin:         0 !important;
        padding:        0 !important;
        border:         none !important;
        border-radius:  0 !important;
        box-shadow:     4px 0 24px rgba(0,0,0,0.3) !important;
    }
    /* Abrir el drawer */
    .xmm-mobile-drawer.xmm-open {
        transform: translateX(0) !important;
    }

    /* Header del drawer */
    .xmm-mobile-drawer-header {
        display:         flex !important;
        align-items:     center !important;
        justify-content: space-between !important;
        padding:         0 18px !important;
        height:          58px !important;
        min-height:      58px !important;
        background:       linear-gradient(135deg, var(--main-primary_color) 0%, var(--main-secondary_color)100%);
        border-bottom:   1px solid rgba(255,255,255,0.08) !important;
        flex-shrink:     0 !important;
        margin:          0 !important;
    }
    .xmm-mobile-drawer-header span {
        color:          #fff !important;
        font-size:      15px !important;
        font-weight:    700 !important;
        letter-spacing: 0.02em !important;
    }
    .xmm-mobile-drawer-close {
        background:    none !important;
        border:        none !important;
        color:         rgba(255,255,255,0.55) !important;
        font-size:     20px !important;
        cursor:        pointer !important;
        padding:       6px !important;
        line-height:   1 !important;
        border-radius: 6px !important;
        transition:    color 0.15s, background 0.15s;
    }
    .xmm-mobile-drawer-close:hover { color:#fff !important; background:rgba(255,255,255,0.1) !important; }

    /* Lista de categorías en el drawer */
    .xmm-mobile-cat-list {
        all:         unset !important;
        display:     block !important;
        list-style:  none !important;
        margin:      0 !important;
        padding:     8px 0 !important;
        flex:        1 !important;
        overflow-y:  auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.1) transparent;
    }
    .xmm-mobile-cat-list::-webkit-scrollbar { width:4px; }
    .xmm-mobile-cat-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:4px; }
    .xmm-mobile-cat-list > li {
        all:      unset !important;
        display:  block !important;
        margin:   0 !important;
        padding:  0 !important;
        position: static !important;
    }

    .xmm-mobile-cat-link {
        all:             unset !important;
        display:         flex !important;
        align-items:     center !important;
        gap:             10px !important;
        padding:         12px 18px !important;
        color:           #000000 !important;
        font-size:       13.5px !important;
        font-weight:     500 !important;
        text-decoration: none !important;
        border-left:     3px solid transparent !important;
        cursor:          pointer !important;
        transition:      background 0.12s, color 0.12s, border-color 0.12s;
    }
    .xmm-mobile-cat-link:hover {
        background:   rgba(255,255,255,0.07) !important;
        color:        #000000 !important;
        border-color: var(--main-primary_color, #22a06b) !important;
    }
    .xmm-mobile-cat-link .fa-tag { font-size:12px !important; opacity:0.5; flex-shrink:0; color:#000000 !important; }
    .xmm-mobile-cat-link > span  { flex:1 !important; }
    .xmm-sub-arrow { font-size:11px; opacity:0.4; flex-shrink:0; transition:transform 0.2s; }
    .xmm-has-sub.xmm-sub-open > .xmm-mobile-cat-link .xmm-sub-arrow { transform:rotate(180deg); opacity:0.8; }

    /* Sublista acordeón */
    .xmm-mobile-sublist {
        all:        unset !important;
        display:    none !important;
        list-style: none !important;
        margin:     0 !important;
        padding:    4px 0 4px 40px !important;
        background: rgba(0,0,0,0.15) !important;
    }
    .xmm-has-sub.xmm-sub-open > .xmm-mobile-sublist { display:block !important; }
    .xmm-mobile-sublist li {
        all:      unset !important;
        display:  block !important;
        margin:   0 !important;
        padding:  0 !important;
    }
    .xmm-mobile-sublist li a {
        all:             unset !important;
        display:         block !important;
        padding:         9px 14px 9px 0 !important;
        color:           rgb(0, 0, 0) !important;
        font-size:       12.5px !important;
        text-decoration: none !important;
        border-bottom:   1px solid rgba(255,255,255,0.04) !important;
        cursor:          pointer !important;
        transition:      color 0.12s;
    }
    .xmm-mobile-sublist li:last-child a { border-bottom:none !important; }
    .xmm-mobile-sublist li a:hover      { color:#fff !important; }

    /* Overlay del drawer */
    .xmm-mobile-overlay {
        display:    none !important;
        position:   fixed !important;
        inset:      0 !important;
        background: rgba(0,0,0,0.55) !important;
        z-index:    99999 !important;
    }
    .xmm-mobile-overlay.xmm-visible { display:block !important; }
}