/* ===========================================================================
   MENÚ «HAMBURGUESA» (25/10) — ver dk-menu.js
   ===========================================================================
   TODO bajo `.dkarta-nav[data-menu-estilo="hamburguesa"]`. Sin ese atributo
   —o sea, en todo dkard que no eligió el estilo— nada de este archivo hace
   nada, y una prueba lo vigila: la barra de siempre vive en styles.css y no se
   editó una sola de sus reglas.

   La barra de hoy es una tira de botones flotantes: `overflow-x: auto`,
   `transform` y `max-width: 1300px` que la centran. Un panel hijo suyo quedaría
   recortado y reubicado por los tres, así que este estilo los apaga: la barra es
   una BANDA sólida de ancho completo y el tope de 1300 px pasa al contenedor de
   dentro. Sólida siempre, para garantizar el contraste del texto con el fondo.

   Móvil primero; los cortes van de menor a mayor (340, 768).

   LOS COLORES (el dueño, 25/10: «que se pueda cambiar el fondo, el hover y otros
   detalles»). Son los del grupo «menu» de dk-color-secciones.js, y TODOS caen en
   un valor que sale de los dos de siempre —fondo y texto—, así que sin elegir
   nada la banda se ve como antes:
     --dk-menu-fondo / --dk-menu-texto       la banda y sus letras
     --dk-menu-hover-fondo / -hover-texto    lo que se rellena al pasar el puntero
     --dk-menu-linea                         el borde del botón y las categorías
     --dk-menu-panel-fondo / -panel-texto    el panel (por defecto, como la banda)
     --dk-menu-categoria-fondo               el fondo de cada categoría del panel
   Los valores intermedios se juntan abajo, en `--dkm-*`, para escribir cada
   camino de reserva UNA vez y no repetirlo en cada regla. */

/* ---- La banda ---------------------------------------------------------- */

.dkarta-nav[data-menu-estilo="hamburguesa"] {
    /* La banda. */
    --dkm-fondo: var(--dk-menu-fondo);
    --dkm-texto: var(--dk-menu-texto, #fff);
    /* El panel: como la banda, salvo que el dueño elija otro. */
    --dkm-panel-fondo: var(--dk-menu-panel-fondo, var(--dkm-fondo));
    --dkm-panel-texto: var(--dk-menu-panel-texto, var(--dkm-texto));
    /* Al pasar el puntero se INVIERTE: relleno del color de la letra y letra del
       color del fondo, como el menú de botones de siempre. En el panel, lo mismo
       con SUS colores: si no, un panel claro sobre una banda oscura rellenaba de
       blanco sobre blanco. */
    --dkm-hover-fondo: var(--dk-menu-hover-fondo, var(--dkm-texto));
    --dkm-hover-texto: var(--dk-menu-hover-texto, var(--dkm-fondo));
    --dkm-panel-hover-fondo: var(--dk-menu-hover-fondo, var(--dkm-panel-texto));
    --dkm-panel-hover-texto: var(--dk-menu-hover-texto, var(--dkm-panel-fondo));
    /* Bordes: un tinte del texto, o el color que elija. Las rayas que separan
       grupos son más suaves que el borde de un botón. */
    --dkm-linea: var(--dk-menu-linea, color-mix(in srgb, var(--dkm-texto) 30%, transparent));
    --dkm-separador: color-mix(in srgb, var(--dkm-linea) 60%, transparent);
    --dkm-categoria-fondo: var(--dk-menu-categoria-fondo, color-mix(in srgb, var(--dkm-panel-texto) 8%, transparent));

    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    transform: none;
    overflow: visible;
    cursor: auto;
    background: var(--dkm-fondo);
    color: var(--dkm-texto);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.28);
}

/* Con la barra del administrador arriba (la misma regla que la de hoy, que aquí
   no basta: este estilo es más específico y pisaría su desplazamiento). */
.dk-con-barra-admin .dkarta-nav[data-menu-estilo="hamburguesa"] {
    top: 42px;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: 1300px;
    /* EN EL TELÉFONO, BAJA Y APRETADA (el dueño, 26/10: «se ve muy alta y con
       los íconos muy separados»): 48 px de alto, 10 de relleno lateral y los
       botones pegados. El bloque de 768 px devuelve las medidas de escritorio. */
    height: 48px;
    margin-inline: auto;
    padding-inline: 10px;
    user-select: auto;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li {
    flex: 0 0 auto;
}

/* Sin píldora en reposo: enlaces de texto sobre la banda. La píldora aparece al
   pasar el puntero (más abajo). */
.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li a {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: inherit;
    font: 600 0.9em/1 Barlow, sans-serif;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* El de hoy atenúa los enlaces ya visitados; aquí son parte de la banda. */
.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li a:visited {
    opacity: 1;
}

/* Siempre neutro, también donde no hay hover real (el toque deja el :hover
   pegado): el relleno sale solo bajo @media (hover: hover), más abajo. */
.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li a:hover {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li.icon-nav a {
    justify-content: center;
    width: 40px;
    padding: 0;
}

/* De `fill: white` fijo a currentColor: el icono toma el color del texto. */
.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li.icon-nav a svg {
    width: 22px;
    height: 22px;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li.icon-nav a svg *,
.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li.icon-nav a:hover svg * {
    fill: currentColor;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li a:active {
    transform: scale(0.96);
}

.dkarta-nav[data-menu-estilo="hamburguesa"] a:focus-visible,
.dkarta-nav[data-menu-estilo="hamburguesa"] button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

/* ---- Lo que se pliega o se va al panel ------------------------------------ */

/* Con dos o más categorías, van al panel y no a la banda. */
.dkarta-nav[data-menu-estilo="hamburguesa"][data-cats="n"] .dkarta-nav-wrapper ul li.menu-li-categoria {
    display: none;
}

/* El resto cuando no cabe (siempre en el teléfono): entero al panel, bajo «Más». */
.dkarta-nav[data-menu-estilo="hamburguesa"][data-resto="plegado"] .dkarta-nav-wrapper ul li:not(.icon-nav):not([data-menu-hamb]) {
    display: none;
}

/* La mano que invita a deslizar la barra: en este estilo no se desliza nada. */
html[data-menu-estilo="hamburguesa"] .contenedor-mano {
    display: none;
}

/* ---- El botón ------------------------------------------------------------- */

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-li {
    margin-inline-start: auto;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-li[hidden] {
    display: none;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 38px;
    padding: 0 10px;
    background: transparent;
    color: inherit;
    border: 2px solid var(--dkm-linea);
    border-radius: 999px;
    font: 600 0.9em/1 Barlow, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

/* Abierto: se queda un poco relleno, para que se vea que es lo que está abierto. */
.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn[aria-expanded="true"] {
    background-color: color-mix(in srgb, var(--dkm-texto) 16%, transparent);
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn:active {
    transform: scale(0.96);
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-ico-equis,
.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn[aria-expanded="true"] .menu-ico-barras {
    display: none;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn[aria-expanded="true"] .menu-ico-equis {
    display: block;
}

/* Por debajo de 340 px, solo el icono: la palabra se queda para el lector de pantalla. */
.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- El panel ------------------------------------------------------------- */

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    box-sizing: border-box;
    max-height: calc(100vh - 48px - 16px);
    max-height: calc(100dvh - 48px - 16px);
    padding: 8px 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--dkm-panel-fondo);
    color: var(--dkm-panel-texto);
    border-top: 1px solid var(--dkm-separador);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.3);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel[hidden] {
    display: none;
}

/* ABIERTO, ENCIMA DEL COTIZADOR (el dueño, 25/10: en el teléfono el panel
   abierto quedaba debajo del «Ver total»). La barra vive a 100 y el cotizador
   flotante a 1999 (en línea, en index.html); con el panel abierto la barra
   sube por encima de él, y queda por debajo de la ficha de un producto (3200),
   que no se abre con el panel abierto: tocar fuera lo cierra. La escalera
   entera la vigila CapasDeLaPaginaTest. */
.dkarta-nav[data-menu-estilo="hamburguesa"].menu-abierto {
    z-index: 2050;
}

.dkarta-nav[data-menu-estilo="hamburguesa"].menu-abierto .menu-panel {
    opacity: 1;
    transform: none;
    transition-duration: 0.16s;
}

/* LOS GRUPOS LOS SEPARA SU TÍTULO, con su raya (el dueño, 25/10: «el subtítulo
   de Más no se ve casi, podría agregarle una línea»). Antes era una línea suelta
   del color del separador, casi invisible, y un rótulo de 11 px al 70 %. */
.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo + .menu-panel-grupo {
    margin-top: 18px;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 10px;
    font: 700 0.8em/1 Barlow, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-titulo::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
}

/* UNA CATEGORÍA ES UN BOTÓN, también en el teléfono (el dueño, 25/10: «que
   quedaran en modo botones como en escritorio»; las filas de 48 px a todo el
   ancho dejaban las opciones muy separadas). Se reparten por filas según lo que
   midan; 44 px de alto, que se tocan con el pulgar. */
.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo li {
    max-width: 100%;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo li a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 18px;
    background: var(--dkm-categoria-fondo);
    border: 1px solid var(--dkm-linea);
    border-radius: 999px;
    color: inherit;
    font: 600 15px/1.2 Barlow, sans-serif;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo li a:active {
    background-color: color-mix(in srgb, var(--dkm-panel-texto) 22%, transparent);
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    background: transparent;
    color: inherit;
    border: 2px solid var(--dkm-linea);
    border-radius: 999px;
    font: 600 1em/1 Barlow, sans-serif;
    cursor: pointer;
}

/* El velo que cierra al tocar fuera: solo en el teléfono, y no bloquea el scroll.
   Cuelga del borde de abajo de la banda (absolute dentro de la barra, que es
   fixed) y no cubre la banda misma: con `inset: 0` oscurecía también el fondo de
   la barra, y la barra con el panel abierto se veía de dos colores. */
.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-velo {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    background: rgb(0 0 0 / 0.35);
}

.dkarta-nav[data-menu-estilo="hamburguesa"] .menu-velo[hidden] {
    display: none;
}

/* ---- 340 px: ya cabe la palabra junto al icono ------------------------------- */

@media (min-width: 340px) {
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-texto {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        /* En mayúscula (el dueño, 26/10), un punto más chica para que pese lo mismo. */
        font-size: 0.85em;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
}

/* ---- 768 px: la banda enseña el resto y el panel se abre con las categorías
        como botones (el dueño, 25/10: «no me gusta el listado en escritorio») ---- */

@media (min-width: 768px) {
    .dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper {
        height: 60px;
        padding-inline: 24px;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul {
        gap: 8px;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li a {
        min-height: 44px;
        padding: 0 16px;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li.icon-nav a {
        width: 44px;
        padding: 0;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn {
        gap: 8px;
        min-height: 44px;
        padding: 0 14px;
    }

    /* Un nombre largo se corta en la banda; en el panel se envuelve. */
    .dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li:not(.icon-nav) a {
        max-width: 24ch;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        line-height: 44px;
    }

    /* El contenido del panel, alineado con el de la banda (contenedor de 1300). */
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel {
        max-height: calc(100vh - 60px - 24px);
        max-height: calc(100dvh - 60px - 24px);
        padding: 20px max(24px, calc((100% - 1300px) / 2 + 24px)) 28px;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-titulo {
        margin: 0 0 12px;
    }

    /* Los botones de las categorías, los mismos del teléfono: en escritorio,
       un poco más bajos (se apunta con el ratón) y con más aire entre ellos. */
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo ul {
        gap: 10px;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo li a {
        min-height: 40px;
        padding: 8px 20px;
        font: 600 0.9em/1.2 Barlow, sans-serif;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-cerrar,
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-velo {
        display: none;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn {
        padding: 0 16px;
    }
}

/* El relleno al pasar el puntero, solo donde hay puntero. */
@media (hover: hover) {
    .dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li a:hover,
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn:hover {
        background-color: var(--dkm-hover-fondo);
        color: var(--dkm-hover-texto);
        border-color: var(--dkm-hover-fondo);
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo li a:hover {
        background-color: var(--dkm-panel-hover-fondo);
        color: var(--dkm-panel-hover-texto);
        border-color: var(--dkm-panel-hover-fondo);
    }
}

/* ---- Quien no quiere movimiento / colores del sistema ------------------------ */

@media (prefers-reduced-motion: reduce) {
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel,
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn,
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo li a,
    .dkarta-nav[data-menu-estilo="hamburguesa"] .dkarta-nav-wrapper ul li a {
        transition: none;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel {
        transform: none;
    }
}

@media (forced-colors: active) {
    .dkarta-nav[data-menu-estilo="hamburguesa"] {
        border-bottom: 1px solid CanvasText;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-hamb-btn,
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-cerrar,
    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel-grupo li a {
        border-color: ButtonText;
    }

    .dkarta-nav[data-menu-estilo="hamburguesa"] .menu-panel {
        border: 1px solid CanvasText;
    }
}