/* =============================================================================
 * dm-shell.css - Pegamento del shell ya migrado al design system.
 *
 * A diferencia de dm-tokens.css y dm-components.css (que se generan desde el
 * design system y NO se editan), este archivo SI se escribe a mano. Guarda lo
 * que el design system no puede saber: el anclaje de un panel, el ancho de una
 * columna del pie, el orden en que se apilan los bloques en mobile.
 *
 * Se carga DESPUES de site.css / site-mobile.css a proposito: lo que ya esta
 * migrado tiene que ganarle al CSS viejo, aunque queden reglas sueltas dando
 * vueltas. Todo lo que se agregue aca tiene que usar tokens var(--dm-*), nunca
 * un hex a mano.
 *
 * Mobile primero: las reglas base son las de celular y los @media suben.
 * ============================================================================= */


/* ----------------------------------------------------------------------------
 * Pie de la tienda
 *
 * REORDENADO EN AGOSTO DE 2026. El markup y el porque estan en
 * Views/Shared/_Footer.cshtml; aca va el reparto por breakpoint.
 *
 * Lo que cambia respecto del pie anterior:
 *
 *   · Cuatro grupos de links parejos en vez de uno de diez y otro de tres.
 *   · Cada grupo es un <details>: acordeon en telefono, columna en escritorio.
 *   · El texto de los links pasa de 12px a 14px (el minimo que recomienda UXPin
 *     para un pie) y cada uno tiene 44px de alto tactil en telefono.
 *   · Comunidad sube a una franja propia arriba, porque es una llamada a la
 *     accion y no navegacion; garantia baja a la identidad, junto al logo; las
 *     redes se van adentro del grupo "Contacto", que es lo que son.
 *
 * Mobile primero: las reglas base son las de celular y los @media suben.
 * -------------------------------------------------------------------------- */

/* El design system trae "padding: 2rem 3rem" en .dm-footer, pensado para
   escritorio. En un telefono de 360px eso se come 96px de ancho util, asi que en
   mobile lo bajamos y lo recuperamos recien en pantalla grande. */
.dm-footer {
    padding: var(--dm-space-5) var(--dm-space-3);
}

/* ---- Franja de comunidad ---- */

.dm-footer__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dm-space-2);
    margin: 0 auto var(--dm-space-5);
    padding-bottom: var(--dm-space-5);
    max-width: 320px;
    text-align: center;
    border-bottom: 1px solid #81818180;
}

.dm-footer__cta-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-footer__cta-titulo {
    color: var(--dm-text-on-brand);
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-semibold);
}

.dm-footer__cta-bajada {
    color: var(--dm-surface-sunken);
    font-size: var(--dm-text-base);
}

.dm-footer__cta-botones {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    width: 100%;
    margin-top: var(--dm-space-2);
}

/* ---- Cuerpo: identidad + los cuatro grupos ---- */

/* En mobile el pie se apila en una sola columna. El gap va en 0 porque los
   grupos ya se separan con la linea de abajo de cada acordeon: sumarle un hueco
   dejaba esa linea flotando en el medio de la nada. */
.dm-footer__main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.dm-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dm-space-3);
    margin-bottom: var(--dm-space-4);
    text-align: center;
}

.dm-footer__brand img {
    width: 150px;
    max-width: 100%;
}

.dm-footer__garantia {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    margin: 0;
    color: var(--dm-surface-sunken);
    font-size: var(--dm-text-base);
    line-height: 1.4;
    text-align: left;
}

/* EL ANCHO VA EN EL CSS Y NO SOLO EN EL ATRIBUTO. El atributo width="44" es un
   valor por defecto que cualquier regla de CSS pisa, y el tema viejo trae varias
   que le dan ancho a las imagenes del pie. Sin esto el sello se dibujaba de
   ~150px y aplastaba el texto de la garantia contra el borde de la columna. */
.dm-footer__garantia img {
    flex: 0 0 auto;
    width: 44px;
    height: auto;
}

/* ---- Los grupos, como acordeon ---- */

.dm-footer__group {
    border-bottom: 1px solid #81818180;
}

/* EL <summary> ES EL DISPARADOR. Se le saca el triangulito nativo (que ademas se
   dibuja distinto en cada navegador) y se pone un chevron propio, que gira al
   abrir. 48px de alto: por arriba del minimo tactil de 44. */
.dm-footer__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-space-2);
    min-height: 48px;
    margin: 0;
    padding: var(--dm-space-2) 0;
    border: none;
    color: var(--dm-brand);
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-semibold);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.dm-footer__title::-webkit-details-marker {
    display: none;
}

.dm-footer__title::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}

.dm-footer__group[open] > .dm-footer__title::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.dm-footer__title:focus-visible {
    outline: 2px solid var(--dm-brand);
    outline-offset: 2px;
}

.dm-footer__nav {
    padding-bottom: var(--dm-space-2);
}

.dm-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dm-footer__list li {
    margin: 0;
}

/* 44px de alto tactil por link, que es el minimo de WCAG 2.5.5 (Target Size).
   Antes eran items de 12px con 4px de separacion: en telefono se tocaba el de
   al lado tanto como el que se queria. */
.dm-footer__list a {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    min-height: 44px;
    padding: var(--dm-space-1) 0;
    color: var(--dm-surface-sunken);
    background-color: transparent;
    font-size: var(--dm-text-base);
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dm-footer__list a:hover,
.dm-footer__list a:focus-visible {
    color: var(--dm-brand);
    text-decoration: none;
}

.dm-footer__list--contacto img {
    flex: 0 0 auto;
}

/* Las redes van adentro del grupo Contacto, alineadas con sus links. */
.dm-footer__social {
    display: flex;
    gap: var(--dm-space-3);
    justify-content: flex-start;
    padding-top: var(--dm-space-2);
}

/* ---- Franja legal ---- */

.dm-footer__legal {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--dm-space-3);
    margin-top: var(--dm-space-4);
    padding-top: var(--dm-space-4);
    border-top: 1px solid #81818180;
}

.dm-footer__copy {
    margin: 0;
    padding: 0;
    border: none;
    color: var(--dm-text-inverse-muted);
    font-size: var(--dm-text-sm);
    text-align: center;
}

.dm-footer__afip {
    display: inline-flex;
}

/* ---- Tablet (768-1023): dos columnas, y el acordeon se abre para siempre ---- */
@media (min-width: 768px) {
    .dm-footer {
        padding: var(--dm-space-5) var(--dm-space-4);
    }

    .dm-footer__cta {
        flex-direction: row;
        align-items: center;
        max-width: none;
        text-align: left;
        gap: var(--dm-space-4);
    }

    .dm-footer__cta-botones {
        flex-direction: row;
        width: auto;
        margin-top: 0;
        margin-left: auto;
    }

    .dm-footer__main {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--dm-space-5) var(--dm-space-4);
    }

    /* La identidad abre el pie a todo el ancho, arriba de las columnas. */
    .dm-footer__brand {
        flex: 0 0 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--dm-space-5);
        margin-bottom: 0;
        text-align: left;
    }

    .dm-footer__group {
        flex: 1 1 40%;
        min-width: 190px;
        border-bottom: none;
    }

    /* DE ACA PARA ARRIBA EL <details> NO SE CIERRA MAS.
       El navegador esconde el contenido de un <details> cerrado con una regla
       propia -- details:not([open]) > *:not(summary) { display: none } --, y un
       selector de clase le gana, asi que alcanza con volver a mostrarlo. El
       <summary> deja de ser tocable: en escritorio es el titulo de la columna y
       nada mas. */
    /* HACEN FALTA LAS TRES DECLARACIONES, y se comprobo una por una en Chrome:
     *
     *   1. display:block en el contenido      -> para los navegadores viejos,
     *      que esconden el <details> cerrado con la regla de UA
     *      "details:not([open]) > *:not(summary) { display: none }".
     *   2. content-visibility:visible en el contenido -> por las versiones
     *      intermedias, que cambiaron esa regla por content-visibility:hidden.
     *   3. ::details-content { content-visibility: visible } -> ES LA QUE DE
     *      VERDAD FUNCIONA HOY. Chrome moderno no esconde al hijo: esconde el
     *      pseudo-elemento ::details-content que lo envuelve, y ningun estilo
     *      puesto sobre el hijo llega ahi. Con las dos primeras solas el
     *      inspector reportaba el <nav> con 149px de alto y cinco links... y en
     *      pantalla las cuatro columnas se veian con el titulo y nada debajo.
     *
     * Los navegadores que no conocen ::details-content ignoran esa regla y se
     * quedan con las dos anteriores, asi que no hay que ramificar por version.
     */
    .dm-footer__group > .dm-footer__nav {
        display: block;
        content-visibility: visible;
    }

    .dm-footer__group::details-content {
        content-visibility: visible;
    }

    .dm-footer__title {
        min-height: 0;
        padding: var(--dm-space-2) 0;
        border-top: 2px solid var(--dm-brand);
        font-size: var(--dm-text-base);
        cursor: default;
        pointer-events: none;
    }

    .dm-footer__title::after {
        display: none;
    }

    .dm-footer__list a {
        min-height: 0;
        padding: 5px 0;
    }

    .dm-footer__legal {
        flex-direction: row;
        justify-content: space-between;
    }

    .dm-footer__copy {
        text-align: left;
    }
}

/* ---- Escritorio (>=1024): identidad y los cuatro grupos en una sola fila ---- */
@media (min-width: 1024px) {
    .dm-footer {
        padding: var(--dm-space-5) var(--dm-space-6);
    }

    .dm-footer__main {
        flex-wrap: nowrap;
        gap: var(--dm-space-5);
    }

    .dm-footer__brand {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dm-space-3);
        max-width: 230px;
    }

    .dm-footer__group {
        flex: 1 1 0;
        min-width: 0;
    }
}


/* ----------------------------------------------------------------------------
 * Header: UN SOLO TEMA, CLARO, EN TODOS LOS ANCHOS
 *
 * Hasta el cambio de shell habia dos: blanca en escritorio y marron oscuro
 * (#38312c) en mobile y tablet, y el tema acompanaba intercambiando iconos y logo
 * por sus versiones blancas. El design system nunca modelo ese shell oscuro -- su
 * componente Header es blanco -- y el template "Home mobile / PWA" confirmo que la
 * barra va sobre --dm-surface tambien en telefono.
 *
 * Al sacar el "background: #38312c !important" de site-mobile.css gana el
 * "background: var(--dm-surface)" que .dm-header ya traia, y con eso se cayeron
 * de un saque: los tres "content: url(...-white.svg)" de los iconos, el iso
 * blanco del logo (ahora va la marca completa), el boton fantasma del buscador y
 * los colores invertidos de las acciones y los divisores.
 *
 * Queda una sola deuda de aquella epoca: --dm-text-inverse-muted sigue existiendo
 * como token pero ya no lo usa el shell.
 * -------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * El header es STICKY, no fixed
 *
 * Era `.fixed-top` de Bootstrap (position: fixed) y el hueco lo compensaba un
 * `body { padding-top }` fijo: 7.1rem en desktop y 3.8rem en mobile. Nunca podia
 * estar bien, porque el alto del header VARIA — el subnav de delicoins solo
 * aparece con sesion y en <=1023px, y la barra de avisos solo cuando hay avisos
 * activos. Medido a 502px: el header mide 106px y el padding compensaba 60.8, asi
 * que 27px de contenido quedaban por detras y el breadcrumb salia cortado.
 *
 * Sticky lo resuelve de raiz: el header sigue en el flujo, asi que no hay nada que
 * compensar y el `padding-top` del body se pudo borrar, y igual queda pegado
 * arriba al scrollear. Es lo que modela el design system (.dm-header--sticky).
 *
 * OJO CON EL ELEMENTO: el sticky va en #head (el <header> que envuelve al <nav>) y
 * NO en el <nav>. Un elemento sticky se despega cuando su contenedor se termina, y
 * el <nav> mide exactamente lo mismo que su padre: puesto ahi se iria de pantalla
 * apenas se scrollea. #head en cambio cuelga del <body>, que abarca toda la pagina.
 *
 * Se conserva la clase .fixed-top en el markup aunque ya no posicione: de ella
 * cuelga `.navbar.header.fixed-top { background: #38312c }`, que es lo que pinta
 * la barra oscura en mobile.
 *
 * El cajon de categorias sigue funcionando: es `position: fixed` y sticky no crea
 * bloque contenedor para elementos fijos (solo lo hacen transform, filter y
 * perspective), asi que sigue cubriendo el viewport entero.
 * -------------------------------------------------------------------------- */

#head {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.dm-header.fixed-top {
    position: static;
}

/* Los dos checkboxes que abren los menus (los <input> sueltos que hay antes del
   <header> en el _Layout) son un mecanismo, no interfaz: van fuera del flujo y sin
   pintar, en TODOS los anchos.
   #check-menu-desktop estaba estilado solo en site.css, o sea de 1024 para arriba;
   abajo de eso era un checkbox comun y corriente, visible. No se notaba porque el
   header fixed lo tapaba, y al pasar a sticky quedo a la vista arriba de todo.
   Se los deja "displayed" a proposito (nada de display:none): asi el selector
   ":checked ~ header ..." del que cuelga el cajon sigue igual que siempre. */
#check-menu-desktop,
#check-menu-mobile,
#check-menu-cuenta {
    /* FIXED Y NO ABSOLUTE, a proposito. Con absolute el checkbox se queda en su
       lugar del flujo, arriba de todo el documento; al tocar la <label for> el
       navegador le da el foco y puede scrollear la pagina hasta el para "traerlo a
       la vista". Mientras el disparador vivia en el header eso no se notaba
       (estaba arriba igual), pero desde que abre desde la tab bar el salto seria
       de toda la pagina. Con fixed el checkbox siempre esta dentro del viewport y
       no hay nada que traer.
       Se los deja "displayed" (nada de display:none): asi el selector
       ":checked ~ ..." del que cuelgan los cajones sigue igual que siempre. */
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}


/* El <nav> es flex por Bootstrap; esta pila apoya las filas del header (topbar,
   barra principal, menu de categorias, subnav de delicoins) una debajo de otra.
   Reemplaza al .row de Bootstrap, cuyos margenes negativos peleaban con el gap
   del componente. */
.dm-header__stack {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* MOBILE. El gap y el padding que trae .dm-header__main del design system
   (1.5rem) estan pensados para escritorio: en un telefono de 360px se comen mas
   de 90px de ancho util. Aca van al minimo y se recuperan por breakpoint.

   La cuenta a 320px, que es el piso soportado: hamburguesa 40 + logo 60 + tres
   iconos 90 + gaps 12 + gaps de acciones 8 + padding 8 = 218px, y los ~100 que
   sobran son del buscador. Si se agrandan estos gaps, el buscador desborda. */
.dm-header__main {
    gap: var(--dm-space-1);
    padding: var(--dm-space-1);
}

.dm-header__actions {
    gap: var(--dm-space-1);
}

/* El logo y su hamburguesa de escritorio van juntos a la izquierda. */
.dm-header__logo {
    display: flex;
    align-items: center;
}

/* LA HAMBURGUESA DE MOBILE, de vuelta en el header (ver la nota del _Header).
   Convive con la de la tab bar: las dos son <label> del mismo checkbox.

   Quien la prende y la apaga por breakpoint es #hamburger-menu, que ya venia de
   antes (display:none en site.css, display:block en site-mobile.css). Aca va solo
   el aspecto del disparador.

   ES <label> Y NO <button>: Bootstrap le pone "margin-bottom: .5rem" a todo
   <label>, que en una fila con align-items:center la deja 4px mas arriba que el
   logo. Por eso el margin: 0 explicito.

   44px de lado, que es el minimo comodo de toque; el .svg entra en 40 y los 4 que
   sobran son area de dedo, no dibujo. Es lo mismo que mide cada item de la tab
   bar, asi que el disparador de arriba y el de abajo se tocan igual. */
.dm-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: var(--dm-radius-sm);
    cursor: pointer;
}

.dm-header__burger img {
    width: 40px;
    height: auto;
}

/* Realimentacion al tocar: el <label> no tiene :active propio que se vea, y sin
   esto el toque no acusa recibo hasta que el cajon termina de abrir. */
.dm-header__burger:active {
    background: var(--dm-surface-sunken);
}

/* CON EL CAJON ABIERTO SE MARCA. Los dos disparadores comparten checkbox, asi que
   el mismo selector de hermano que usa la lib sirve para pintar este. Sin esto,
   con el menu abierto el header no dice nada y parece que no paso nada. */
#check-menu-mobile:checked ~ header .dm-header__burger {
    background: var(--dm-brand-soft);
}

/* El componente trae ".dm-header__logo img { width: 240px }" pensando que ahi
   adentro solo vive la marca, pero ahora tambien esta la hamburguesa de
   escritorio: su icono salia en 240px de ancho y, por proporcion, estiraba la
   barra a 256px de alto. El 240 es solo para el logo. */
.dm-header__logo #hamburger-menu-desktop img {
    width: auto;
    max-width: 50px;
}

/* .dm-header-action__text es una COLUMNA en el design system, porque esta
   pensada para label + sublabel. No usamos sublabel en ningun lado, y en cambio
   "Carrito" y "Notificaciones" le cuelgan la flechita del desplegable con un
   ::after: en columna la flecha caia debajo del texto. Va en fila. */
.dm-header-action__text {
    flex-direction: row;
    align-items: center;
    gap: var(--dm-space-1);
}

/* La hamburguesa de escritorio ("≡ Categorías"). site.css le pone un
   "width: 2.5rem" (40px) fijo, pero adentro tiene un icono de 50px MAS el texto:
   siempre desbordo su caja. Antes no se notaba porque la col-1 de Bootstrap que
   la envolvia dejaba lugar vacio al costado donde derramar; con el flex del
   design system el buscador arranca pegado y el texto quedaba cortado en "Cat".
   Que mida su contenido. */
.hamburger-menu-desktop {
    width: auto;
    gap: var(--dm-space-1);
    white-space: nowrap;
}

/* MOBILE: la barra es solo de iconos.
   El tema ya ocultaba cada texto por separado (.text-mispreferidos,
   #col-cart #text-cart, ...). Ahora que todas las acciones son HeaderAction
   alcanza una sola regla, y ademas cubre las que se migren mas adelante. */
@media (max-width: 1023px) {
    .dm-header-action__text {
        display: none;
    }

    .dm-header-action {
        gap: 0;
    }

    /* (Aca habia un "color: var(--dm-text-on-brand)" para que los iconos se leyeran
       sobre la barra marron. La barra es clara desde el cambio de shell, asi que
       vale el color normal del componente.) */

    /* El contador del design system sobresale 10px a la derecha y 8px arriba del
       icono. En desktop no molesta porque las acciones estan separadas, pero en
       mobile el gap es de 4px y el contador de la campanita se montaba sobre el
       icono de Mis Preferidos. Se arrima al icono en vez de agrandar el gap,
       porque cada 4px de gap se los saca al buscador. */
    .dm-header-action__count {
        top: -5px;
        right: -5px;
        min-width: 15px;
        height: 15px;
        line-height: 15px;
        padding: 0 3px;
    }

    /* (Idem: los divisores usaban el token de fondo invertido porque el borde
       claro no se veia sobre el marron. Con la barra clara vuelve el --dm-border
       que trae el componente.) */

    /* ---- LAS TRES FILAS DEL HEADER MOBILE ----
       Template "Home mobile / PWA" del design system. El markup es el mismo que
       en escritorio: lo unico que cambia es que la fila envuelve y que el
       buscador se manda solo al renglon de abajo con "order".

       ESTO JUBILA EL "JUEGO DE SUMA CERO" que documentaba este archivo. Mientras
       las cuatro piezas compartian renglon, cada gap que se agrandaba se le
       restaba al campo de busqueda: a 360px el buscador medía 122px y el
       placeholder se cortaba, y a 320px habia que achicar el logo a 44px para que
       entrara. Con el buscador en su propio renglon el reparto deja de ser un
       problema: la fila 1 solo tiene que acomodar logo + dos iconos, y el campo
       toma el 100%. Por eso tambien se borro la regla de <=359px que capaba el
       logo: ya no hace falta robarle esos 16px a nadie. */
    .dm-header__main {
        flex-wrap: wrap;
        row-gap: var(--dm-space-2);
    }

    /* Fila 1: hamburguesa, marca que se estira, y los iconos con lo suyo.

       LA HAMBURGUESA ES order:0 A PROPOSITO y no order:1 como el logo: asi arranca
       la fila y queda arriba a la izquierda, que es donde el cliente la busca. No
       le hace falta declararlo (0 es el default), pero se escribe igual porque
       todos sus hermanos declaran el suyo y un unico implicito se lee como olvido.

       Los 44px que ocupa NO se los saca al buscador: el buscador tiene su propio
       renglon desde el header de tres filas. Lo unico que se achica es el ancho
       disponible para el logo, que es elastico. */
    #hamburger-menu {
        order: 0;
        flex: 0 0 auto;
    }

    .dm-header__logo {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    .dm-header__actions {
        order: 2;
        flex: 0 0 auto;
        /* En mobile quedan dos acciones (campana y carrito) en vez de cuatro, asi
           que hay aire para separarlas y que los contadores no se monten. */
        gap: var(--dm-space-3);
    }

    /* Fila 2: el buscador, a todo el ancho. "flex-basis: 100%" es lo que fuerza
       el salto de renglon; el "order: 3" lo manda despues de los iconos aunque en
       el markup venga antes. */
    .dm-header__search {
        order: 3;
        flex: 1 0 100%;
        min-width: 0;
    }

    /* El campo pasa de ~39px a 48px: es la medida del diseno y ahora hay lugar,
       porque el renglon es suyo. */
    .dm-search__input {
        padding: var(--dm-space-3) 0;
    }

    /* MIS PREFERIDOS Y LA SESION VUELVEN A LA FILA DE ACCIONES -- 02/09/2026.

       Estos dos se habian escondido en mobile porque la tab bar se hacia cargo de
       ellos: Preferidos tenia su propio item y la cuenta se atendia desde el cajon.
       Al desactivarse la barra (ver _Layout.cshtml, "02/09/2026") esconderlos
       dejaria a mobile SIN acceso a Mis Preferidos y sin el bloque de sesion, asi
       que la regla se apaga y la fila vuelve a ser la de antes del tramo T7:
       preferidos, sesion, campana y carrito.

       DE LOS DOS, EL QUE IMPORTA ES #card-mispreferidos. Verificado en el navegador
       el 02/09: descomentando esto vuelve a verse, que era el objetivo.

       #login-full sigue escondido igual, y esta bien: lo apaga TAMBIEN
       site-mobile.css ("#login-full, #row-full { display: none }" en su media de
       1023), que es anterior a la tab bar. O sea que esta regla era redundante para
       ese id y sacarla no cambia nada -- en mobile no se veia ni antes del tramo T7.

       De paso, el comentario que estaba aca decia que #login-full era "el saldo de
       delicoins con sesion" y es inexacto: en _LoginPartial.cshtml ese id envuelve
       "Iniciar sesion" SIN sesion, y el acceso al Dashboard CON sesion pero solo
       para admin/vendor. Para un cliente logueado no se emite, y el saldo lo pone
       DelicoinHeader, que es otro elemento. El anonimo entra igual desde la fila 3.

       #mi-cuenta no aparece aca porque ya era d-none d-min-w-1024 desde antes.

       SI VUELVE LA TAB BAR, descomentar tal cual estaba: */
    /*
    #card-mispreferidos,
    #login-full {
        display: none;
    }
    */
}

/* TABLET. Ya hay ancho para respirar, pero la barra sigue siendo oscura y de
   iconos: el corte del tema esta en 1024, no en 768. */
@media (min-width: 768px) and (max-width: 1023px) {
    .dm-header__main {
        gap: var(--dm-space-3);
        padding: var(--dm-space-2) var(--dm-space-3);
    }

    .dm-header__actions {
        gap: var(--dm-space-3);
    }
}

/* ESCRITORIO. Barra blanca y acciones con texto al lado del icono: recien aca
   se ve el HeaderAction del design system como lo define el DS.

   Los gaps van en 1rem y no en el 1.5rem del componente porque el ancho es un
   juego de suma cero contra el buscador: son dos gaps de la fila mas cuatro
   entre acciones, o sea que cada 8px de gap le saca 48px al campo de busqueda. */
@media (min-width: 1024px) {
    .dm-header__main {
        gap: var(--dm-space-3);
        padding: var(--dm-space-2) var(--dm-space-3);
    }

    .dm-header__actions {
        gap: var(--dm-space-3);
    }

    .dm-header__logo {
        gap: var(--dm-space-2);
    }

    /* El panel de "Mi cuenta" cuelga del disparador, asi que este necesita ser
       el contexto de posicionamiento. */
    #mi-cuenta {
        position: relative;
    }
}


/* ----------------------------------------------------------------------------
 * Buscador del header
 *
 * El componente SearchInput del design system se apoya en flex: el campo lleva
 * flex:1 y min-width:0 para poder achicarse. En site.css quedaba un
 * "#search { min-width: 26rem }" que, por especificidad de id, le gana al
 * componente y desborda el header en pantallas medianas. Se neutraliza aca.
 *
 * OJO CON EL FONDO: el shell es de dos colores segun el dispositivo. En desktop
 * el header es blanco (bg-white en _Header.cshtml) y ahi el boton naranja macizo
 * del design system es correcto. En mobile y tablet (<1024px) site-mobile.css lo
 * pinta marron oscuro (.navbar.header.fixed-top), y sobre ese fondo la pildora
 * blanca con el bloque naranja es la pieza que mas grita de toda la barra.
 * Por eso abajo de 1024px el boton pasa a fantasma: la lupa queda naranja sobre
 * el campo y desaparece el bloque de color.
 * -------------------------------------------------------------------------- */

.dm-search #search {
    min-width: 0;
}

/* Alto de la pildora. 0.5rem arriba y abajo dan ~39px: entra comodo en la barra
   oscura de mobile y sigue siendo un blanco de toque razonable. */
.dm-search__input {
    padding: var(--dm-space-2) 0;
}

/* EL BOTON DEL BUSCADOR VUELVE A SER EL DEL DESIGN SYSTEM EN TODOS LOS ANCHOS.
   Abajo de 1024px era fantasma (fondo transparente y lupa naranja) porque la
   pildora blanca con el bloque naranja macizo era lo que mas gritaba sobre la
   barra marron. Ahora la barra es clara, que es justo el fondo para el que el
   componente fue disenado, asi que el boton naranja redondo es lo correcto y es
   lo que muestra el template "Home mobile / PWA". */

/* 1024-1320: la barra ya es blanca, pero NO hay ancho para las etiquetas al lado
   del icono. Con sesion iniciada hay cinco acciones (Mis Preferidos, Dashboard,
   el nombre, Notificaciones y Carrito) y con texto se comen 727px de los ~1400
   de la barra: al buscador le quedaban 239px y el placeholder se cortaba.
   Hasta 1320 van solo con icono y el ancho es del buscador.

   El corte en 1321 no es inventado: es el que ya usa el tema, donde aparecen las
   flechitas de los desplegables de "Mi cuenta" y "Carrito" (site.css). */
@media (min-width: 1024px) and (max-width: 1320px) {
    .dm-header-action__text {
        display: none;
    }

    .dm-header-action {
        gap: 0;
    }
}

/* EN DESKTOP EL BUSCADOR SE ESTIRA SIEMPRE: no lleva techo en ningun ancho.
   Se apoya en "flex: 1" (o sea flex-basis 0 y grow 1) contra un logo y unas
   acciones que son "flex: 0 0 auto": el buscador recibe SOLO lo que sobra, y
   como los otros dos no encogen nunca, no puede treparse encima de ellos. El
   piso viejo si era peligroso ("min-width: 26rem" lo volvia intocable y el campo
   terminaba pisando el "Categorias" del logo), pero ese ya se neutralizo arriba
   con ".dm-search #search { min-width: 0 }". Sin piso, el techo no protegia de
   nada: solo dejaba hueco.

   POR QUE SE SACO EL TECHO QUE QUEDABA (34rem hasta 1700px). La cuenta que lo
   justificaba estaba hecha CON SESION INICIADA, donde las acciones ocupan ~695px
   y el buscador nunca llegaba al techo abajo de ~1660px. Deslogueado la fila de
   acciones es menos de la mitad ("Ingresar" + "Carrito"), asi que sobraba ancho
   de verdad: en un viewport de ~1500px el campo se plantaba en 544px y quedaban
   ~450px de hueco muerto entre el carrito y el borde. El estado sin sesion es el
   de la primera visita, justo el que mas se ve. */


/* ----------------------------------------------------------------------------
 * Desplegable del carrito del header (ShoppingCart/CartDropDown)
 *
 * Tercera hoja embebida que sale del HTML: este componente tambien vive en el
 * header, asi que sus reglas viajaban en TODAS las paginas.
 *
 * Es la barra de progreso de delicoins, con los iconos de nivel por encima. El JS
 * del minicarrito actualiza el ancho de .delicoins-progress-bar-total y llena
 * .delicoins-markers en vivo, asi que esos nombres son contrato: no renombrar.
 * -------------------------------------------------------------------------- */

.delicoins-progress-wrap {
    position: relative;
}

/* Bootstrap le pone overflow:hidden a .progress y eso recortaba los iconos de
   nivel, que van por fuera de la barra. */
.progress.delicoins-progress-wrap {
    overflow: visible;
    position: relative;
}

.delicoins-progress-bar-total {
    position: relative;
    z-index: 1;
    background: var(--dm-brand);
}

/* ---- Las cruces de cerrar del carrito y de las notificaciones ----
 * LOS DOS DESPLEGABLES USAN EL MISMO MECANISMO y tenian el mismo problema, asi
 * que se arreglan juntos. El modelo es que EL ICONO DEL HEADER SE CONVIERTE EN X:
 * por eso la cruz se posiciona contra .cart-badge / .notification-badge y no
 * contra el popover, que es position:fixed a pantalla completa. Encima del icono
 * hay ademas un checkbox invisible (24x24, z-index 90000) que es el que de verdad
 * abre y cierra.
 *
 * Que estaba mal, medido:
 *  - Las tres piezas se calibraban a mano con top/right sueltos y no compartian
 *    centro. En el carrito el icono caia en x=459,5 y la X con su checkbox en 454:
 *    la cruz salia ~6px corrida a la izquierda del boton.
 *  - .cart-menu media 40x0: ni siquiera era una caja tocable.
 *  - Ninguna de las dos cruces tenia un <label for>, asi que NO SE PODIAN TOCAR.
 *    El unico label de #check-cart en toda la pagina era el "Seguir comprando".
 *  - #check-notification quedaba en y=-4 (top:.5rem menos translateY(-50%)), o sea
 *    con la mitad del area de toque fuera de la pantalla.
 *
 * Ahora las tres piezas de cada una se centran sobre su badge, asi que comparten
 * centro por construccion y no por coincidencia de numeros.
 */
@media (max-width: 1023px) {
    /* El ancla. Sin esto las cajas de abajo se posicionan contra un ancestro
       lejano y vuelve el descalce. */
    .cart-badge.badge-icons,
    .notification-badge.badge-icons {
        position: relative;
    }

    .cart-menu-container,
    .notification-menu-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        /* CERRADO NO DEBE ESTORBAR: la X es invisible con el popover cerrado (sus
           barras nacen transparentes), pero la caja seguiria encima del icono y
           se comeria el click que lo abre. */
        pointer-events: none;
    }

    #check-cart:checked ~ .cart-menu-container,
    #check-notification:checked ~ .notification-menu-container {
        pointer-events: auto;
    }

    .cart-menu,
    .notification-menu {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
    }

    /* La X la forman el :before y el :after de este div (uno a -7px y otro a
       +7px, que rotan 45 grados al abrirse). Se lo centra en la caja en vez de
       dejarlo colgando de un "top" fijo. */
    .cart-menu div,
    .notification-menu div {
        top: 50%;
        left: 50%;
        right: auto;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    /* Los checkbox invisibles, al mismo centro que la X que representan. */
    #check-cart,
    #check-notification {
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
    }
}

/* ----------------------------------------------------------------------------
 * BUG: al cerrar el menu de categorias en telefono se abria el de notificaciones
 *
 * Sintoma: con el cajon de categorias abierto, tocar la X de cerrar cerraba el
 * cajon Y ademas dejaba abierto el desplegable de notificaciones.
 *
 * QUE PASABA. Las dos acciones del header que abren un desplegable (la campanita
 * y el carrito) no se disparan con un boton: arriba de cada icono hay un
 * <input type="checkbox"> invisible (opacity 0) de 24x24 con z-index 90000, y
 * ese checkbox es el que abre y cierra. El cajon de categorias, en cambio, es
 * .nav-btn, que bootstrap-4-navbar.css deja en z-index 9 -- y los dos viven
 * dentro del mismo contexto de apilado, el <nav> del header.
 *
 * O sea que con el cajon abierto (90vw de ancho, o sea casi toda la pantalla)
 * los dos checkbox invisibles del header quedaban FLOTANDO POR ENCIMA de el.
 * El dedo apuntaba a la X del cajon y aterrizaba en el checkbox de la campana:
 *
 *   1. el navegador marca #check-notification  ->  se abre el desplegable;
 *   2. el handler de "clic fuera del menu" de bootstrap-4-navbar.js ve que el
 *      target no esta dentro de .nav-btn y desmarca #check-menu-mobile
 *      ->  se cierra el cajon.
 *
 * Un solo toque, las dos cosas. Por eso parecia que "cerrar el catalogo abria
 * las notificaciones": literalmente era eso.
 *
 * EL ARREGLO, en dos partes que se cubren entre si:
 *
 *   a) el cajon abierto se pone POR ENCIMA del header, que es donde tiene que
 *      estar algo que ocupa toda la pantalla;
 *   b) los dos checkbox invisibles se vuelven intocables mientras el cajon esta
 *      abierto. Es el mismo recurso que ya usa el bloque de arriba para que la X
 *      cerrada no se coma el clic que abre el icono.
 *
 * Con (a) solo alcanzaria, pero (b) protege del dia que alguien vuelva a tocar
 * los z-index; y con (b) solo tambien, pero (a) es lo que ademas hace que el
 * cajon tape el header como corresponde.
 * -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    #check-menu-mobile:checked ~ header .navbar.header .categorias .nav-btn {
        /* Uno mas que los 90000 de los checkbox invisibles. */
        z-index: 90001;
    }

    #check-menu-mobile:checked ~ header #check-cart,
    #check-menu-mobile:checked ~ header #check-notification {
        pointer-events: none;
    }

    /* LA X DE CERRAR NECESITA UN position PARA QUE SU z-index CUENTE. El markup
       traia style="z-index:90000" inline sobre un elemento estatico, donde la
       propiedad no hace absolutamente nada. Ahora el valor sale de aca y el
       boton es el elemento mas alto DENTRO del cajon, que es lo unico que
       necesita: contra el header ya gana el cajon entero. */
    .btn-close-menu-mobile {
        position: relative;
        z-index: 1;
    }
}

/* "Seguir comprando" es un <label>, no un .btn: btn-block le da el ancho completo
   pero no la alineacion, asi que el texto salia pegado a la izquierda mientras el
   "Comprar" de arriba iba centrado. */
.volver-a-comprar-btn {
    text-align: center;
    cursor: pointer;
}

/* Contenedor de los iconos de nivel: van por encima y fuera de la barra. */
.delicoins-markers {
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 0;
    z-index: 3;
}

.delicoins-marker {
    position: absolute;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    /* Resalta el icono sobre fondos claros. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
    /* No bloquea los clics en la barra. */
    pointer-events: none;
}

/* Avisos del minicarrito. Los dos colores estaban inline y NO tienen token: el
   design system no modela ni un rojo de advertencia suave ni un verde de
   confirmacion. Quedan aca, en un solo lugar, hasta que el DS los incorpore. */
.dm-cart-warning,
.dm-cart-note {
    font-size: 10px;
    font-weight: var(--dm-weight-semibold);
}

.dm-cart-warning {
    color: #c0392b;
}

.dm-cart-note {
    color: #2c7873;
}


/* ----------------------------------------------------------------------------
 * Barra de avisos (Cms/TopBarWidget), la franja naranja de arriba de todo
 *
 * Estaba como <style> embebido dentro de la vista del widget. Como el widget vive
 * en el header, esas ~50 lineas de CSS viajaban en el HTML de TODAS las paginas
 * del sitio, en cada request. Aca se sirven una vez y se cachean.
 *
 * El slider lo mueve el JS de la propia vista cambiando el transform de #slider.
 * -------------------------------------------------------------------------- */

#slider-container {
    width: 100%;
    height: 25px;
    max-height: 25px;
    position: relative;
    overflow: hidden;
    background-color: var(--dm-brand-strong);
}

#slider {
    display: flex;
    height: 25px;
    max-height: 25px;
    transition: transform 0.5s ease-in-out;
}

.topbar-widget {
    flex: 0 0 100%;
}

.topbar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dm-space-1);
    width: 100%;
    height: 25px;
    text-decoration: none;
    color: var(--dm-text-on-brand);
    font-family: var(--dm-font);
}

.topbar-link:hover {
    text-decoration: none;
    color: var(--dm-text-on-brand);
}

/* El icono del aviso. Era un id repetido dentro del foreach de la vista. */
.tb-icon {
    width: 2em;
    max-height: 20px;
}

.tb-title {
    font-weight: var(--dm-weight-medium);
    font-size: var(--dm-text-sm);
}

.tb-prefix {
    font-size: var(--dm-text-sm);
    margin-left: var(--dm-space-1);
}

.tb-countdown,
.tb-expired {
    font-weight: var(--dm-weight-semibold);
    font-size: var(--dm-text-sm);
    margin-left: var(--dm-space-1);
}


/* ----------------------------------------------------------------------------
 * Subnav de delicoins (barra fina abajo del header, solo mobile y tablet)
 *
 * Vive sobre el shell oscuro, asi que el texto va con los tokens de fondo
 * invertido. El componente DelicoinSubnav ya usa dm-cluster / dm-between para el
 * reparto; aca va solo lo que el design system no puede saber: el aire interno y
 * que los iconos queden pegados al texto.
 * -------------------------------------------------------------------------- */

.dm-coinbar {
    padding: var(--dm-space-2);
    font-size: var(--dm-text-sm);
}

.dm-coinbar__user,
.dm-coinbar__coins {
    display: inline-flex;
    align-items: center;
    gap: var(--dm-space-1);
    /* Las dos mitades son links: 36px es el minimo comodo de toque sin engordar
       la fila. */
    min-height: 36px;
    text-decoration: none;
    white-space: nowrap;
}

.dm-coinbar__user {
    /* Sobre la barra clara vale el color de texto normal. Antes iba en
       --dm-text-on-brand, que era blanco para el shell marron. */
    color: var(--dm-text);
    font-weight: var(--dm-weight-medium);
    /* El nombre es lo unico que puede ser largo en esta fila: que corte con
       puntos suspensivos en vez de empujar la chapita fuera de pantalla. */
    min-width: 0;
    overflow: hidden;
}

.dm-coinbar__user span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-coinbar__user:hover,
.dm-coinbar__user:focus {
    color: var(--dm-brand-strong);
    text-decoration: underline;
}

/* CHAPITA DEL SALDO. En el diseno es una pildora crema sobre fondo claro; aca el
   fondo es el marron del shell, asi que la pildora crema contrasta todavia mas y
   es la pieza que el diseno quiere destacar. Adentro el texto va en naranja
   fuerte, NO en el token invertido: el fondo de la chapita es claro. */
.dm-coinbar__coins {
    flex: 0 0 auto;
    padding: 0 var(--dm-space-2);
    border: 1px solid var(--dm-brand);
    border-radius: var(--dm-radius-pill);
    background: var(--dm-brand-soft);
    color: var(--dm-brand-strong);
    font-weight: var(--dm-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* LA CHAPITA NO SE INVIERTE AL PASAR POR ENCIMA. Lo intuitivo seria fondo naranja
   macizo y texto blanco, pero adentro va logo_delicoin.svg, que es un <img> de
   color fijo y no puede seguir al texto: sobre el naranja quedaba naranja, o sea
   invisible. Se oscurecen borde y texto y el fondo sigue crema. */
.dm-coinbar__coins:hover,
.dm-coinbar__coins:focus {
    border-color: var(--dm-brand-strong);
    background: var(--dm-brand-soft);
    color: var(--dm-brand-darker);
}

/* El icono de la persona: SVG inline, toma el color del link. 16px para que
   empareje con el logo del delicoin de la chapita. */
.dm-coinbar__icon {
    width: 16px;
    height: 16px;
    flex: none;
}


/* ----------------------------------------------------------------------------
 * Bloque de cuenta del cajon de categorias (_LoginMobile dentro de #login-mobile)
 *
 * El componente AccountMenu del design system trae el panel y los items. Lo que
 * pone el tema: que ocupe todo el ancho del cajon, y que el encabezado sea una
 * FILA con el nombre y los delicoins.
 *
 * EL REPARTO ES EL DE PRODUCCION: DOS MITADES, CADA UNA CENTRADA. Alla la fila
 * es un row de Bootstrap con dos col-6 y el contenido centrado adentro de cada
 * una, asi que la tinta cae en 47.9 (icono del usuario) y 293.9 (icono de
 * delicoins) sobre un cajon de 452.1.
 *
 * Antes de llegar a esto pasamos por los dos extremos: con "space-between" el
 * nombre se iba contra el borde izquierdo y la chapita contra el derecho —y como
 * #login-mobile no tiene padding lateral (site-mobile.css le pone ".5rem 0 1rem")
 * quedaban literalmente tocando el borde—; y juntandolos al medio quedaban
 * demasiado pegados. Con "flex: 1 1 0" cada uno ocupa media fila y se centra
 * adentro, que reproduce produccion dentro de los 4px.
 * -------------------------------------------------------------------------- */

#login-mobile .dm-account-menu {
    width: 100%;
    text-align: left;
}

#login-mobile .dm-account-menu__header {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 1.2rem;
}

/* LOS CINCO ACCESOS VAN CENTRADOS, COMO EN PRODUCCION -- 02/09/2026.

   En produccion cada fila es un <a> adentro de un .card y lo que las centra es
   "#login-mobile { text-align: center }" de site-mobile.css, heredado hasta el
   texto. Aca no alcanza con eso por dos motivos que se pisan:

     1. la regla de arriba le pone "text-align: left" a todo el bloque, escrita
        cuando adentro solo quedaba la fila de identidad (que se centra sola, con
        sus dos mitades en flex) y la lista no existia;
     2. aunque se sacara, .dm-account-menu__link del design system es display:flex,
        y ahi el que manda es justify-content, no text-align.

   Por eso se centra explicitamente el contenido de cada fila. Se neutraliza
   ademas el borde izquierdo de 3px del componente, que es el indicador de item
   activo: transparente igual ocupa lugar y correria la tinta 1,5px contra el
   centro. Nadie lo usa en este cajon, no hay item activo. */
#login-mobile .dm-account-menu__list .dm-account-menu__link {
    justify-content: center;
    border-left: 0;
}

/* El nombre es un link a "Mi perfil": hereda el color del componente y no el
   azul del navegador. Si es muy largo se corta con puntos suspensivos en vez de
   partirse en tres lineas. */
#login-mobile .dm-account-menu__name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dm-space-2);
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--dm-text);
    text-decoration: none;
}

/* DelicoinHeader emite su chapita con las clases de columna de Bootstrap, y esas
   traen "width: 100%". Como flex-basis:auto toma su medida de la propiedad width,
   la chapita reclamaba TODO el ancho del encabezado (575 de 607px medidos) y al
   nombre le quedaban 68px, o sea que "Javier A Frias" salia en tres lineas.
   El que hace falta neutralizar es el width, no el max-width. */
#login-mobile .dm-account-menu__header .col-delicoins-mobile {
    /* La otra mitad de la fila, con la chapita centrada adentro. */
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
    padding: 0;
}

#login-mobile .dm-account-menu__header .col-delicoins-mobile p {
    margin: 0;
    white-space: nowrap;
}

/* El icono del usuario va en 30px como el de produccion (venia en 24 por el
   atributo width del markup). Con los dos bloques centrados en su mitad, el
   ancho del icono es lo que corre la tinta: con 24 el nombre arrancaba ~11px
   mas adentro que alla. */
#login-mobile .dm-account-menu__name > img {
    width: 30px;
    height: auto;
}


/* ----------------------------------------------------------------------------
 * Menu de "Mi cuenta"
 *
 * El design system define el panel y los items; el encabezado colapsable (con
 * la flecha que gira) es comportamiento de esta pagina, no del componente.
 * -------------------------------------------------------------------------- */

button.dm-account-menu__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--dm-border);
    font-family: var(--dm-font);
    text-align: left;
    cursor: pointer;
}

button.dm-account-menu__header:focus {
    outline: none;
    box-shadow: none;
}

.dm-account-menu__header .icon {
    width: 1.5rem;
    transition: transform 0.3s;
}

.dm-account-menu__header.collapsed .icon {
    transform: rotate(180deg);
}


/* ----------------------------------------------------------------------------
 * Aviso de cookies
 *
 * El design system define el panel (.dm-cookie) pero no donde se ancla: eso es
 * decision de la pagina. Va abajo a la izquierda, encima del contenido pero por
 * debajo del chatbot y del boton de WhatsApp.
 * -------------------------------------------------------------------------- */

.dm-cookie {
    position: fixed;
    z-index: 1000;
    bottom: var(--dm-space-3);
    left: var(--dm-space-3);
    right: var(--dm-space-3);
    width: auto;
    animation: fadeInUp 1s;
}

@media (min-width: 1024px) {
    .dm-cookie {
        right: auto;
        width: 100%;
    }
}


/* ---------------------------------------------------------------------------
 * El `p { text-align: right }` global del tema contra los componentes del DS
 *
 * site.css (linea 1360) y site-mobile.css (53) declaran, para TODO el sitio:
 *
 *     p { text-align: right; margin-bottom: 0 }
 *
 * O sea que cualquier parrafo nace alineado a la derecha. Por eso el markup
 * viejo esta lleno de class="text-left" y class="text-center": son 20 en las
 * vistas, puestos para contrarrestar esto.
 *
 * El problema al aplicar el design system es que sus componentes centran el
 * BLOQUE (`.dm-empty { text-align: center }`) contando con que los hijos
 * hereden. Pero una regla directa sobre `p` le gana a la herencia, asi que
 * cualquier <p> del componente que no declare su propia alineacion sale a la
 * derecha. Pasaba con el titulo de los cinco estados vacios de los tramos 4 y 5.
 *
 * Va aca y no en las hojas de cada tramo porque .dm-empty y .dm-alert son
 * globales (viven en dm-components.css) y aparecen en vistas que no cargan
 * ninguna hoja de tramo, como Checkout/Success y Checkout/OrderError.
 *
 * No se toca el `p` global: lo pisa medio sitio todavia sin migrar.
 * -------------------------------------------------------------------------- */

.dm-empty p,
.dm-empty__title,
.dm-empty__desc {
    text-align: center;
}

.dm-alert p,
.dm-alert__body,
.dm-alert__title {
    text-align: left;
}


/* ----------------------------------------------------------------------------
 * Tab bar inferior (solo mobile y tablet)
 *
 * ############################################################################
 * DESACTIVADA EL 02/09/2026. NADA DE ESTE BLOQUE MATCHEA CON NADA.
 *
 * El <partial name="_TabBar" /> del _Layout esta comentado, asi que el markup
 * .dm-tabbar no se emite en ninguna pagina y estas reglas son letra muerta. Se
 * dejan enteras y sin comentar a proposito: los comentarios de CSS NO ANIDAN y
 * este bloque tiene varios adentro, asi que envolverlo en un solo comentario lo
 * romperia. Lo que apaga la barra es el markup, no estas reglas.
 *
 * LO QUE SI HUBO QUE CAMBIAR esta mas abajo, en el media de 1023: la variable
 * --dm-tabbar-alto pasa a 0px y con eso el body y los flotantes vuelven a como
 * estaban antes de la barra. Los tres pasos para revivirla, en _Layout.cshtml.
 * ############################################################################
 *
 * Template "Home mobile / PWA" del design system. La invoca el _Layout al final
 * del <body> y la vista es _TabBar.cshtml.
 *
 * EL DESIGN SYSTEM NO MODELA ESTA PIEZA: no hay componente de navegacion inferior
 * en el proyecto de diseno, asi que todo esto es del tema. Se respetan sus tokens
 * y sus medidas (60px por item, activo en naranja con subrayado de 3px).
 *
 * --dm-tabbar-alto NO ES UN TOKEN DEL DESIGN SYSTEM: es una medida del tema y por
 * eso vive aca y no en dm-tokens.css (que se genera y no se edita). Lo usan el
 * body y los cinco flotantes de mas abajo, asi que conviene que este en un solo
 * lugar. Incluye el safe-area para que en un iPhone la barra no quede debajo del
 * indicador de home.
 * -------------------------------------------------------------------------- */

.dm-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Por encima del contenido y de los flotantes (chatbot 998, cookies 1000),
       pero por debajo del header sticky (1030) y del cajon de categorias. */
    z-index: 1020;
    background: var(--dm-surface);
    border-top: 1px solid var(--dm-border);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
    padding-bottom: env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* En tablet los cuatro items no se estiran de punta a punta: a 768px cada uno
       mediria 192px y el pulgar tendria que viajar toda la pantalla. Se los capa
       a 560px en total y se los centra con padding, en vez de ponerle un
       max-width a la barra: el fondo blanco tiene que seguir llegando a los dos
       bordes, si no queda una franja transparente a los costados.
       El max() evita que el padding se vuelva negativo abajo de 560px. */
    padding-left: max(0px, calc((100% - 560px) / 2));
    padding-right: max(0px, calc((100% - 560px) / 2));
}

.dm-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-size: var(--dm-text-xs);
    font-weight: var(--dm-weight-semibold);
    white-space: nowrap;
    text-decoration: none;
    color: var(--dm-text-muted);
}

.dm-tabbar__item:hover,
.dm-tabbar__item:focus {
    color: var(--dm-brand-strong);
    text-decoration: none;
}

.dm-tabbar__item.is-active {
    color: var(--dm-brand-strong);
}

/* A 320px cada item tiene 80px. Si una etiqueta no entra, que corte con puntos
   suspensivos en vez de desbordar la barra y sacar scroll horizontal. */
.dm-tabbar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Los iconos son SVG inline y toman el color del item con currentColor: es lo
   que permite que el activo se pinte de naranja sin un segundo archivo. */
.dm-tabbar__icon {
    width: 21px;
    height: 21px;
    flex: none;
}

/* El subrayado del item activo. Ocupa lugar SIEMPRE (aunque este vacio) para que
   los cuatro items midan lo mismo y las etiquetas no bailen al navegar. */
.dm-tabbar__marker {
    width: 18px;
    height: 3px;
    border-radius: 2px;
}

.dm-tabbar__item.is-active .dm-tabbar__marker {
    background: var(--dm-brand);
}

/* ESCRITORIO: la barra no existe. El markup se emite igual para no duplicar la
   vista ni adivinar el dispositivo por User-Agent, que no sabe el ancho real. */
@media (min-width: 1024px) {
    .dm-tabbar {
        display: none;
    }
}


/* ----------------------------------------------------------------------------
 * Cajon de "Mi cuenta" (_AccountDrawer.cshtml), solo mobile y tablet
 *
 * ############################################################################
 * DESACTIVADO EL 02/09/2026, junto con la tab bar que era su unico disparador.
 * El <partial> esta comentado en el _Layout, asi que este bloque tampoco matchea
 * con nada. Mismo criterio que la barra: se deja entero, lo que apaga el cajon
 * es el markup.
 * ############################################################################
 *
 * Entra por la DERECHA, al reves que el cajon de categorias, que entra por la
 * izquierda: asi se distinguen y, si quedaran los dos abiertos, no se pisan.
 *
 * Todo el mecanismo es el checkbox #check-menu-cuenta mas el combinador de
 * hermano general: por eso el <input> tiene que venir antes del scrim y del
 * <aside> en el markup. No hay JS.
 * -------------------------------------------------------------------------- */

.dm-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    background: var(--dm-surface);
    box-shadow: -8px 0 30px rgb(0 0 0 / 20%);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    /* En un telefono con notch el panel llega hasta el borde: que su contenido no
       quede debajo de la barra de estado ni del indicador de home. */
    padding-bottom: env(safe-area-inset-bottom);
}

#check-menu-cuenta:checked ~ .dm-drawer {
    transform: translateX(0);
}

/* Fondo oscurecido. Es una <label> del mismo checkbox, asi que tocar afuera
   cierra el cajon sin una linea de JS. */
.dm-drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 1040;
    margin: 0;
    background: rgb(0 0 0 / 45%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

#check-menu-cuenta:checked ~ .dm-drawer__scrim {
    opacity: 1;
    pointer-events: auto;
}

.dm-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-space-2);
    /* 1.2rem lateral, el mismo margen que el cajon de categorias. */
    padding: calc(var(--dm-space-3) + env(safe-area-inset-top)) 1.2rem var(--dm-space-3);
    border-bottom: 1px solid var(--dm-border);
}

.dm-drawer__title {
    display: inline-flex;
    align-items: center;
    gap: var(--dm-space-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
}

.dm-drawer__close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px: es el blanco de toque minimo, y de paso el area es cuadrada. */
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    color: var(--dm-text-muted);
}

.dm-drawer__close:hover {
    color: var(--dm-brand-strong);
}

/* La lista reusa .dm-account-menu__link del design system; aca solo se le saca el
   alto de accordion que tiene en el panel lateral de /user. */
.dm-drawer__list {
    flex: 1;
    margin: 0;
    padding: var(--dm-space-2) 0;
    list-style: none;
}

/* NADA DE display: block ACA. El componente del design system ya viene
   "flex + align-items: center + gap", que es lo que alinea el icono con su texto;
   pisarlo con block dejaba las filas como texto plano y encima empujaba el alto,
   porque el padding de space-3 se sumaba arriba y abajo del min-height de 48. Con
   el icono puesto, el aire vertical puede ser menor y las filas entran mas
   compactas sin perder los 48px de area tactil. */
/* Mismo margen lateral (1.2rem) que el cajon de categorias, y un alto de fila
   comodo pero mas corto que el de las categorias: son diez accesos de texto, no
   quince rubros con ilustracion. Produccion hace la misma distincion —alla la
   fila de cuenta mide 27.8px contra los 57.2 de la de categoria—, solo que tan
   apretada que las filas se tocan; 52px mantiene la diferencia sin perder el
   area tactil. */
.dm-drawer__list .dm-account-menu__link {
    min-height: 52px;
    padding: var(--dm-space-2) 1.2rem;
    line-height: 1.3;
}

/* Ancho fijo para que los textos arranquen todos en la misma vertical, aunque los
   iconos no midan igual (hay svg de 24 y un png de estadisticas mas ancho). */
.dm-drawer__list .dm-account-menu__icon {
    flex: 0 0 24px;
    justify-content: center;
}

.dm-drawer__list .dm-account-menu__icon img {
    max-width: 22px;
    max-height: 22px;
}

.dm-drawer__foot {
    padding: var(--dm-space-3) 1.2rem;
    border-top: 1px solid var(--dm-border);
}

/* ESCRITORIO: el cajon no existe. Va AL FINAL de la seccion y no arriba junto al
   "display:none" de la tab bar: alla quedaba antes de ".dm-drawer { display:flex }"
   y perdia por orden, asi que a >=1024 el panel seguia vivo (fuera de pantalla por
   el translateX, pero presente). Se detecto midiendo: display daba "flex" a 1430px. */
@media (min-width: 1024px) {
    .dm-drawer,
    .dm-drawer__scrim {
        display: none;
    }
}

@media (max-width: 1023px) {
    :root {
        /* TAB BAR DESACTIVADA EL 02/09/2026 -- ESTA ES LA LLAVE DE TODO EL BLOQUE.
           Con la barra apagada su alto es CERO, y con eso el padding del body y los
           cuatro flotantes de mas abajo vuelven SOLOS a los valores que tenian antes
           de que existiera: 0 de hueco al pie, y la pila 10 / 60 / 115 (WhatsApp,
           chatbot, ir-arriba) mas las cookies en --dm-space-3. Por eso el bloque
           queda entero y no comentado: cada regla ya suma "+ 0px".
           Tampoco hay que tocar AiChat_styles.css ni dm-checkout.css, que leen esta
           misma variable con "var(--dm-tabbar-alto, 0px)".

           PARA REACTIVAR LA BARRA alcanza con devolver esta linea a:
               --dm-tabbar-alto: calc(60px + env(safe-area-inset-bottom));
           (el env() es el safe-area, para que en un iPhone la barra no quede debajo
           del indicador de home). Los otros dos pasos estan en _Layout.cshtml. */
        --dm-tabbar-alto: 0px;
    }

    /* El hueco de la barra. Va en el body y no en el <main> para que tambien
       despegue al pie: si no, la barra le tapa la ultima fila de links.
       Con la barra apagada esto es 0 y el body queda como antes. */
    body {
        padding-bottom: var(--dm-tabbar-alto);
    }

    /* ---- LOS CINCO FLOTANTES QUE LA BARRA TAPABA ----
       Los cuatro primeros estan anclados al fondo en site-mobile.css y en
       AiChat_styles.css, con "bottom" chicos (10, 75 y 100px). Se les suma el
       alto de la barra conservando su separacion original, asi que la pila
       (WhatsApp abajo, chatbot encima) queda igual, solo que mas arriba.
       Esta hoja se carga despues que site-mobile.css, y los selectores repiten su
       especificidad, asi que ganan por orden. */
    .whatsapp-plugin a {
        bottom: calc(10px + var(--dm-tabbar-alto));
    }

    /* EL CHATBOT NO SE AJUSTA DESDE ACA. Su boton flotante y su panel se corren
       en AiChat_styles.css, que se carga DESPUES de esta hoja (lineas 73 y 71 del
       _Layout): con la misma especificidad, lo que se escriba aca pierde.
       Se intento y quedo muerto: el boton seguia en los 60px que le pone su
       propio @media (max-width: 1023px), o sea apoyado justo sobre la barra.
       Buscar "--dm-tabbar-alto" en AiChat_styles.css. */

    /* El boton "Regresar" de la PWA instalada. */
    .go-back {
        bottom: calc(10px + var(--dm-tabbar-alto));
    }

    /* "Ir arriba". Estaba en 115px y se me habia pasado, asi que quedo pisado por
       el chatbot cuando este subio a 120: los dos miden 50x50 y comparten la
       columna derecha, o sea que se solapaban 45 de 50px.
       La pila original era 10 / 60 / 115 (WhatsApp, chatbot, ir-arriba) y con el
       mismo desplazamiento para los tres se conserva tal cual: 70 / 120 / 175. */
    .back-to-top {
        bottom: calc(115px + var(--dm-tabbar-alto));
    }

    .dm-cookie {
        bottom: calc(var(--dm-space-3) + var(--dm-tabbar-alto));
    }
}

/* =============================================================================
 * CAJON DE CATEGORIAS EN TELEFONO: EL RITMO DE LA LISTA
 *
 * La fila la define multi-dropdown-menu (bootstrap-4-navbar.css, dentro de su
 * media de 1023): "display: flex; justify-content: space-between" pero SIN
 * align-items. Con eso los hijos se estiran a lo alto en vez de centrarse, y la
 * flecha de la derecha quedaba pegada arriba en vez de al medio del renglon.
 *
 * Encima el icono de cada categoria viene del markup con "mb-2 mr-2", dos
 * utilidades de Bootstrap: 8px de margen ABAJO —dentro de una fila horizontal, o
 * sea que lo empujaba hacia arriba y sumaba alto— y 8px a la derecha, que ahora
 * pone el gap. El markup lo pinta una vista de modulo (CategoryMenu), asi que
 * sacar las clases pediria recompilar la RCL; neutralizarlas desde acá sale igual
 * y se ve al instante.
 *
 * EL RITMO ES EL DE PRODUCCION, MEDIDO. Primero las filas se habian bajado a
 * 48px para alinearlas con el resto del design system, pero puestas una abajo
 * de la otra —son quince categorias— quedaban apretadas y el cajon se leia peor
 * que el de www.delimart.com.ar. Medido alla con sesion iniciada: fila 57.2px,
 * padding 0.6rem 1.2rem, icono 30px, gap 8px. Son esos valores, no unos
 * parecidos: el margen lateral de 1.2rem es el que comparten las filas, las
 * pastillas y los encabezados, y es lo que hace que todo arranque en la misma
 * vertical.
 *
 * La especificidad alcanza sin !important: ".mobile-navbar .li-item >
 * .first-link-mobile" son tres clases contra las dos de la lib.
 * ========================================================================== */
@media (max-width: 1023px) {
    .mobile-navbar .li-item > .first-link-mobile {
        align-items: center;
        gap: var(--dm-space-2);
        min-height: 57px;
        padding: 0.6rem 1.2rem;
        line-height: 1.3;
    }

    /* El <span> envuelve icono + nombre; sin flex el icono alineaba por linea base. */
    .mobile-navbar .li-item > .first-link-mobile > span {
        display: flex;
        align-items: center;
        gap: var(--dm-space-2);
        min-width: 0;
    }

    /* EL !important NO ES CAPRICHO: mb-2 y mr-2 son utilidades de Bootstrap y
       Bootstrap las declara "margin-bottom: .5rem !important". A un !important solo
       se le gana con otro; la especificidad sola no alcanza por mas selectores que
       se le pongan. La alternativa limpia seria sacar las dos clases del markup,
       pero eso vive en una vista de modulo (CategoryMenu) y ademas las comparte con
       el menu de escritorio, asi que pedia recompilar la RCL y revisar los dos
       menus por un margen de 8px. */
    .mobile-navbar .li-item > .first-link-mobile > span > img {
        flex: 0 0 30px;
        width: 30px;
        height: auto;
        margin: 0 !important;
    }

    /* Nombres largos: que corten con puntos suspensivos y no empujen la flecha. */
    .mobile-navbar .li-item > .first-link-mobile > span {
        overflow: hidden;
    }

    .mobile-navbar .li-item > .first-link-mobile > .arr {
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
    }

    /* Los accesos rapidos (Menu 3) son pastillas con borde, o sea otro lenguaje
       que las filas de categoria. Tenian el padding en un style="" de la vista;
       ahora va aca, con el mismo 1.2rem lateral que las filas y los encabezados
       —es el margen de produccion— para que las tres listas arranquen en la
       misma vertical. */
    .dm-menu-accesos {
        padding: var(--dm-space-2) 1.2rem var(--dm-space-3);
    }
}

/* =============================================================================
 * ENCABEZADO DE GRUPO DE UN CAJON
 *
 * Los dos cajones de mobile eran una lista larga y plana: el de categorias
 * mezclaba cuenta, accesos y categorias sin separacion, y el de Mi cuenta ponia
 * nueve filas del mismo peso una abajo de la otra. Este encabezado chico parte
 * cada uno en bloques que se reconocen de un vistazo.
 *
 * Se usa en los dos y por eso vive suelto y no adentro de .dm-drawer.
 * En el de Mi cuenta es un <li> dentro del <ul>, asi que hay que apagarle el
 * bullet y el alto de fila que heredaria de la lista.
 * ========================================================================== */
.dm-menu-grupo {
    margin: var(--dm-space-3) 0 var(--dm-space-1);
    /* 1.2rem: el mismo margen lateral que las filas de categoria y las pastillas. */
    padding: 0 1.2rem;
    color: var(--dm-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    list-style: none;
    /* Explicito: el cajon de categorias hereda "text-align: center" de
       .mobile-navbar y sin esto los encabezados salian corridos a la derecha. */
    text-align: left;
}

/* El primero no necesita el aire de arriba: ya lo da el borde del bloque de
   identidad (cajon de categorias) o la cabecera (cajon de cuenta). */
.dm-menu-grupo:first-child {
    margin-top: var(--dm-space-2);
}


/* ----------------------------------------------------------------------------
 * Paginado (componente Pagination del design system)
 *
 * dm-components.css define .dm-pagination pensando en <button>. El parcial
 * _DmPaginacion.cshtml los dibuja como <a>, que es lo correcto para navegacion
 * (se puede abrir en otra pestana, el navegador lo trata como link y no hay que
 * escribir JS para moverse de pagina). Un <a> no hereda ni el centrado ni el
 * tamano que el componente le da al boton, asi que se lo devuelve aca.
 *
 * ALTO 44px Y NO 32. El componente esta calibrado para escritorio; 32px queda
 * por debajo del minimo de area tactil que recomienda WCAG (2.5.5, "Target
 * Size"), y el paginado se toca sobre todo en telefono. El tamano del texto no
 * cambia: crece la caja, no el numero.
 * -------------------------------------------------------------------------- */
.dm-pagination {
    flex-wrap: wrap;
    margin: var(--dm-space-4) 0 var(--dm-space-2);
}

.dm-pagination__page,
.dm-pagination__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--dm-space-2);
    text-decoration: none;
    font-weight: var(--dm-weight-semibold);
}

.dm-pagination__page:hover,
.dm-pagination__nav:hover {
    text-decoration: none;
    color: var(--dm-text);
}

.dm-pagination__page.is-active:hover {
    color: var(--dm-text-on-brand);
}

/* Las flechas van mas grandes que los numeros: el glifo ‹ dibuja mucho mas
   chico que un digito al mismo font-size. */
.dm-pagination__nav {
    font-size: var(--dm-text-xl);
    line-height: 1;
}

.dm-pagination__gap {
    padding: 0 var(--dm-space-1);
    user-select: none;
}