/* PCWare Mega Menu — off-canvas 2 columnas (N12) */

/* ══════════════════════════════════════════════════════════════════════════
 * Sistema: todo valor visual sale de un token con fallback. Los tokens viven
 * en assets/css/design-tokens.css (este archivo se encola con dependencia de
 * `pcw-design-tokens`), así que un cambio de marca se hace en un solo sitio.
 * ══════════════════════════════════════════════════════════════════════════ */

.pcw-mega-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 99999;
    background: var(--pcw-card, #fff);
    box-shadow: 4px 0 20px rgba(15, 23, 42, 0.18);
    min-width: 300px;
    max-height: none;
    overflow: visible;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.28s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)), visibility 0s linear 0.28s;
}
.pcw-mega-menu-wrapper.is-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.28s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)), visibility 0s;
}

.pcw-mega-close-btn {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px;
    border-radius: 50%; border: none;
    background: var(--pcw-surface, #f8f9fa);
    color: var(--pcw-brand-dark, #0f172a);
    font-size: 18px; cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    transition: background-color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pcw-mega-close-btn:hover { background: var(--pcw-border, #e2e8f0); }

.pcw-mega-nav { padding: 4px 0; }

.pcw-mega-menu { list-style: none; margin: 0; padding: 0; }

.pcw-mega-menu-item { position: relative; }

/* ── Columna 1 (nivel 1) ────────────────────────────────────────────────
 * Se queda en 14px a propósito: sus etiquetas largas ("Cargadores de
 * corriente para portátiles") ya ocupan dos líneas en 300px de ancho y a 15px
 * pedirían una tercera. */
.pcw-mega-menu-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; gap: 8px;
    color: var(--pcw-text, #334155);
    font-size: var(--pcw-link-root, 14px); font-weight: 500; text-decoration: none;
    transition: background-color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)),
                color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pcw-mega-menu-link:hover,
.pcw-mega-menu-item.is-open > .pcw-mega-menu-link {
    background: var(--pcw-surface, #f8f9fa);
    color: var(--pcw-brand-dark, #0f172a);
}

.pcw-mega-arrow { color: var(--pcw-text-muted, #64748b); font-size: 15px; }

.pcw-mega-heading {
    display: block; padding: 12px 18px 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--pcw-text-muted, #64748b);
}

/* ── Columna 2 (flyout) ─────────────────────────────────────────────────
 * El padding lateral pasa a ser del CONTENEDOR: los enlaces ya no llevan su
 * propio padding lateral, así no se suma (antes 8+18 por lado dejaba 316px
 * útiles de 360; ahora son 296px limpios y el aire es real, no acumulado). */
.pcw-mega-flyout {
    position: absolute; left: 100%; top: 0;
    display: none;
    width: 360px; max-width: 78vw;
    max-height: 80vh; overflow-y: auto; overflow-x: hidden;
    background: var(--pcw-card, #fff);
    border: 1px solid var(--pcw-border, #e2e8f0);
    border-radius: var(--pcw-radius, 8px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    padding: var(--pcw-flyout-pad-y, 28px) var(--pcw-flyout-pad-x, 32px);
    box-sizing: border-box;
}
.pcw-mega-menu-item.is-open > .pcw-mega-flyout { display: block; }

/* Título del flyout (h2). Selector con doble clase para ganar a los estilos
 * globales de h2 de Kadence sin recurrir a !important. */
.pcw-mega-flyout .pcw-mega-flyout-title {
    margin: 0 0 6px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--pcw-border, #e2e8f0);
    font-family: inherit;
    font-size: var(--pcw-flyout-title-size, 18px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--pcw-brand-dark, #0f172a);
}

.pcw-mega-sublist { list-style: none; margin: 0; padding: 0; }

/* Enlaces del flyout: 15px, línea sutil izquierda que se vuelve acento naranja
 * al pasar el puntero (el texto NO se vuelve naranja: el acento es la barra). */
.pcw-mega-sublist a {
    display: block;
    padding: 9px 8px 9px 12px;
    color: var(--pcw-text, #334155);
    font-size: var(--pcw-link-flyout, 15px);
    line-height: 1.45;
    text-decoration: none;
    border-left: var(--pcw-accent-width, 2px) solid transparent;
    border-radius: 0 var(--pcw-radius-sm, 4px) var(--pcw-radius-sm, 4px) 0;
    transition: color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)),
                background-color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)),
                border-left-color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)),
                padding-left 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pcw-mega-sublist a:hover,
.pcw-mega-sublist a:focus-visible {
    color: var(--pcw-brand-dark, #0f172a);
    background: var(--pcw-surface, #f8f9fa);
    border-left-color: var(--pcw-primary, #ff6b00);
    padding-left: 16px;
}

/* Mobile: off-canvas */
@media (max-width: 1024px) {
    .pcw-mega-menu-wrapper {
        top: 0 !important; left: 0 !important;
        width: 85vw; max-width: 340px; height: 100vh; max-height: 100vh;
        border-radius: 0; transform: translateX(-100%);
        transition: transform 0.25s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)), visibility 0s linear 0.25s;
    }
    .pcw-mega-menu-wrapper.is-open { transform: translateX(0); transition: transform 0.25s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)), visibility 0s; }
    .pcw-mega-close-btn { display: flex; }
    .pcw-mega-flyout {
        position: static; left: auto; top: auto;
        display: none; width: auto; max-width: none;
        border: none; box-shadow: none; border-radius: 0;
        /* Menos aire lateral: en 332px, 32px por lado dejaría 268px y las
         * etiquetas largas pasarían a tres líneas. */
        padding: var(--pcw-flyout-pad-y-mobile, 12px) var(--pcw-flyout-pad-x-mobile, 20px) 16px;
    }
    .pcw-mega-menu-item.is-open > .pcw-mega-flyout { display: block; }
    /* En móvil el flyout se despliega justo bajo su fila de nivel 1, que ya
     * muestra el mismo nombre: repetirlo sería ruido. */
    .pcw-mega-flyout .pcw-mega-flyout-title { display: none; }
}

/* N12 F3: la hamburguesa abre el megamenu, no el drawer de Kadence */
@media (max-width: 1024px) {
    #mobile-drawer { display: none !important; }
}

/* N12 F2b — Iconos */
.pcw-mega-menu-link[data-pcw-slug="computadores"] .pcw-mega-label::before { content: "🖥️  "; }
.pcw-mega-menu-link[data-pcw-slug="portatiles"] .pcw-mega-label::before { content: "💻 "; }
.pcw-mega-menu-link[data-pcw-slug="componentes"] .pcw-mega-label::before { content: "⚡ "; }
.pcw-mega-menu-link[data-pcw-slug="perifericos"] .pcw-mega-label::before { content: "🖱️ "; }
.pcw-mega-menu-link[data-pcw-slug="redes"] .pcw-mega-label::before { content: "🌐 "; }
.pcw-mega-menu-link[data-pcw-slug="protectores-de-voltaje"] .pcw-mega-label::before { content: "🔋 "; }
.pcw-mega-menu-link[data-pcw-slug="impresoras"] .pcw-mega-label::before { content: "🖨️ "; }
.pcw-mega-menu-link[data-pcw-slug="software"] .pcw-mega-label::before { content: "💿 "; }
.pcw-mega-menu-link[data-pcw-slug="cargadores-de-corriente-para-portatiles"] .pcw-mega-label::before { content: "🔌 "; }

/* ── Encabezado de acordeón ─────────────────────────────────────────────
 * Al estar casi siempre cerrado, el encabezado ES la interfaz: se le da
 * altura real y una línea superior sutil entre grupos. */
button.pcw-mega-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left; cursor: pointer;
    padding: 14px 0 12px;
    border: none; background: none;
    font-family: inherit;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--pcw-text-muted, #64748b);
    transition: color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1));
}
button.pcw-mega-heading:hover { color: var(--pcw-brand-dark, #0f172a); }
.pcw-mega-group + .pcw-mega-group { border-top: 1px solid var(--pcw-border, #e2e8f0); }
.pcw-mega-acc-arrow { transition: transform 0.2s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1)); }
.pcw-mega-group.is-closed .pcw-mega-acc-arrow { transform: rotate(-90deg); }

/* ── Animación del acordeón: grid-template-rows 0fr ⇄ 1fr ───────────────
 * Sustituye al `max-height: 600px` fijo, que recortaba el último enlace de las
 * listas largas (Teclados y Monitores tienen 15 ítems ≈ 600px a 15px de
 * tipografía). Con fracciones el alto se ajusta al contenido exacto: no hay
 * valor mágico que mantener cuando cambian los datos. */
.pcw-mega-collapse {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.28s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pcw-mega-collapse > .pcw-mega-sublist { overflow: hidden; min-height: 0; }
.pcw-mega-group.is-closed > .pcw-mega-collapse { grid-template-rows: 0fr; }

/* Nivel 3 del renderer de reserva: sublista anidada, sin animación propia. */
.pcw-mega-sublist.is-nested { padding-left: 12px; border-left: 1px solid var(--pcw-border, #e2e8f0); }
.pcw-mega-sublist.is-nested a { font-size: 13px; }

@media (max-width: 1024px) {
    .pcw-mega-close-btn { top: 8px; left: 8px; right: auto; }
}

button.pcw-mega-heading-btn {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--pcw-text-muted, #64748b);
}

/* N12 flyout: foco visible (WCAG 2.4.7/2.4.11) y movimiento reducido */
button.pcw-mega-heading:focus-visible,
button.pcw-mega-menu-link:focus-visible,
.pcw-mega-sublist a:focus-visible {
    outline: 2px solid var(--pcw-focus, #C2410C);
    outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
    .pcw-mega-collapse,
    .pcw-mega-acc-arrow,
    .pcw-mega-sublist a,
    .pcw-mega-menu-wrapper { transition: none !important; }
}

/* Nivel 1 con hijos es <button>: neutralizar estilos de boton del tema */
.pcw-mega-menu-wrapper button.pcw-mega-menu-link {
    width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    background: none; text-align: left; cursor: pointer;
    font-family: inherit; line-height: inherit; text-transform: none; letter-spacing: normal;
    color: var(--pcw-text, #334155);
}
.pcw-mega-menu-wrapper button.pcw-mega-menu-link:hover,
.pcw-mega-menu-wrapper .pcw-mega-menu-item.is-open > button.pcw-mega-menu-link {
    background: var(--pcw-surface, #f8f9fa);
    color: var(--pcw-brand-dark, #0f172a);
}
.pcw-mega-menu-wrapper button.pcw-mega-heading-btn {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}

/* Movil: reservar barra superior para la X (arriba-izquierda), sin solaparse con el nivel 1 */
@media (max-width: 1024px) {
    .pcw-mega-menu-wrapper .pcw-mega-nav { padding-top: 52px; overflow-y: auto; max-height: 100vh; box-sizing: border-box; }
    .pcw-mega-close-btn { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * N12 Capa 1 — Control dividido (enlace rastreable + botón de divulgación)
 * El <a> navega; el <button> abre el flyout. Dos zonas táctiles separadas.
 * ══════════════════════════════════════════════════════════════════════════ */
.pcw-mega-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.pcw-mega-row > .pcw-mega-menu-link {
    flex: 1 1 auto;
    min-width: 0;
}
.pcw-mega-toggle {
    flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; cursor: pointer;
    padding: 0; margin: 0;
    font-family: inherit; font-size: 15px; line-height: 1;
    color: var(--pcw-text-muted, #64748b);
    transition: color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pcw-mega-row:hover,
.pcw-mega-menu-item.is-open > .pcw-mega-row {
    background: var(--pcw-surface, #f8f9fa);
}
.pcw-mega-menu-item.is-open > .pcw-mega-row > .pcw-mega-menu-link,
.pcw-mega-menu-item.is-open > .pcw-mega-row > .pcw-mega-toggle {
    color: var(--pcw-brand-dark, #0f172a);
}
.pcw-mega-menu-item.is-open > .pcw-mega-row {
    box-shadow: inset var(--pcw-accent-width, 2px) 0 0 var(--pcw-primary, #ff6b00);
}
.pcw-mega-toggle:focus-visible {
    outline: 2px solid var(--pcw-focus, #C2410C);
    outline-offset: -2px;
}

/* N12 Capa 3 — buscador nativo al pie del flyout (sin JS) */
.pcw-mega-search {
    display: flex; gap: 8px;
    padding: 16px 20px 18px;
    border-top: 1px solid var(--pcw-border, #e2e8f0);
    margin-top: 10px;
}
.pcw-mega-search input[type="search"] {
    flex: 1 1 auto; min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--pcw-border, #e2e8f0);
    border-radius: var(--pcw-radius, 8px);
    font-family: inherit; font-size: 13px;
    color: var(--pcw-text, #334155);
    background: var(--pcw-card, #fff);
    transition: border-color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pcw-mega-search input[type="search"]:hover { border-color: var(--pcw-text-muted, #64748b); }
.pcw-mega-search input[type="search"]:focus-visible {
    outline: 2px solid var(--pcw-focus, #C2410C);
    outline-offset: -1px;
}
.pcw-mega-search-btn {
    flex: 0 0 auto;
    padding: 9px 15px;
    border: 0; border-radius: var(--pcw-radius, 8px);
    /* Texto blanco sobre #FF6B00 da 2.85:1 (axe, serious). Navy => ~17:1. */
    background: var(--pcw-brand-dark, #0F172A);
    color: #fff; font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background-color 0.16s var(--pcw-ease, cubic-bezier(0.2, 0, 0, 1));
}
.pcw-mega-search-btn:hover { background: var(--pcw-focus, #C2410C); } /* blanco/#C2410C ~5.2:1 */
.pcw-mega-search-btn:focus-visible { outline: 2px solid var(--pcw-focus, #C2410C); outline-offset: 2px; }
@media (max-width: 1024px) {
    .pcw-mega-search { position: sticky; bottom: 0; background: var(--pcw-card, #fff); }
}