/* =============================================================================
 * dm-cart.css - Pegamento de la pagina del carrito (tramo 3).
 *
 * Salio de DOS bloques <style> embebidos en Cart/Index.cshtml, 295 lineas en
 * total. Se carga SOLO en la pagina del carrito, con un @section head en la
 * propia vista: es CSS de una sola pantalla y no tiene por que viajar en el resto
 * del sitio. (Distinto de dm-shell.css y dm-catalog.css, que si son globales.)
 *
 * Mismo criterio que las otras hojas escritas a mano: colores por token cuando
 * hay equivalente exacto.
 *
 * LOS QUE QUEDAN EN HEX NO TIENEN TOKEN, y mapearlos al mas parecido les correria
 * el color sin necesidad. Quedan anotados como huecos del design system:
 *
 *   #7a52c8 / #8c65d9   violetas del boton de cupon (btn-coupon-av)
 *   #ff9a4d             naranja claro de un estado intermedio
 *   #38312c             el marron del shell; ya se sabe que el DS no lo modela
 *   #f0f0f0 / #aaa9a9   grises de relleno y borde
 *   #ababab73           gris translucido de la barra de scroll
 *
 * Si alguna vez se suman al proyecto de claude.ai/design, se reemplazan aca.
 *
 * NO se toco el AngularJS ni un solo binding ng-*: es la restriccion dura del
 * tramo 3. Solo se movieron y tokenizaron estilos.
 * ============================================================================= */


        .cart-list .btn-coupon-av {
            color: var(--dm-surface);
            border-radius: 1rem;
            box-shadow: none;
        }

        .btn-coupon-av:hover {
            background: #7a52c8 !important;
        }

        .btn-coupon-av:active {
            background: #8c65d9 !important;
            transform: scale(0.97);
        }
            .scroll-dulce {
                margin: 0;
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                align-items: center;
                white-space: nowrap;
            }

                .scroll-dulce::-webkit-scrollbar {
                    height: 6px;
                }

                .scroll-dulce::-webkit-scrollbar-thumb {
                    background: #ababab73;
                    border-radius: 4px;
                }

                .scroll-dulce::-webkit-scrollbar-track {
                    background: var(--dm-border-track);
                    border-radius: 4px;
                }

            .slide-dulce .card {
                border: 1px solid #f0f0f0;
                box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
                border-radius: 18px;
                overflow: hidden;
                transition: box-shadow .2s ease, transform .2s ease;
            }

                .slide-dulce .card:hover {
                    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
                    transform: translateY(-3px);
                }

            /* Layout horizontal: imagen | info | accion (panel a la derecha). Igual en mobile y desktop. */
            .slide-dulce .dulce-card-inner {
                display: flex;
                align-items: stretch;
                min-height: 86px;
            }

                .slide-dulce .dulce-card-inner .img-dulce {
                    flex: 0 0 auto;
                    width: 62px;
                    height: 62px;
                    object-fit: contain;
                    align-self: center;
                    margin: 8px;
                    border-radius: 12px;
                }

                .slide-dulce .dulce-card-inner .info-dulce {
                    flex: 1 1 auto;
                    min-width: 0;                 /* habilita el ellipsis del titulo */
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 8px 6px 8px 0;
                }

            .slide-dulce .info-dulce .dulce-title {
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: 700;
                color: #38312c;
                margin-bottom: .15rem;
            }

            .slide-dulce .info-dulce .dulce-price {
                text-align: left;
                color: var(--dm-brand);
                font-weight: 800;
                font-size: 15px;
                margin-bottom: 0;
            }

                .slide-dulce .info-dulce .dulce-price del {
                    font-size: 12px;
                    font-weight: 600;
                    margin-right: 4px;
                    color: #aaa9a9;
                }

            /* Accion a la derecha: panel naranja de alto completo */
            .slide-dulce .dulce-action {
                flex: 0 0 52px;
                display: flex;
            }

                /* Estado 0: boton con icono de carrito que ocupa todo el panel */
                .slide-dulce .dulce-action .dulce-add-btn {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: linear-gradient(180deg, #ff9a4d 0%, var(--dm-brand) 100%);
                    border: 0;
                    padding: 0;
                    transition: filter .15s ease;
                }

                    .slide-dulce .dulce-action .dulce-add-btn img {
                        width: 30px;
                        transition: transform .1s ease;
                    }

                    .slide-dulce .dulce-action .dulce-add-btn:hover {
                        filter: brightness(1.05);
                    }

                    .slide-dulce .dulce-action .dulce-add-btn:active img {
                        transform: scale(.85);
                    }

                    .slide-dulce .dulce-action .dulce-add-btn:disabled {
                        opacity: .6;
                    }

                /* Estado 1+: stepper vertical (+ / cantidad / -) en el panel derecho */
                .slide-dulce .dulce-action .dulce-stepper-bar {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    background: linear-gradient(180deg, #ff9a4d 0%, var(--dm-brand) 100%);
                    padding: 6px 0;
                }

                    .slide-dulce .dulce-action .dulce-step-btn {
                        flex: 1 1 0;
                        width: 100%;
                        min-height: 28px;
                        padding: 0;
                        border: 0;
                        background: transparent;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: background-color .15s ease;
                    }

                        .slide-dulce .dulce-action .dulce-step-btn img {
                            width: 18px;
                            transition: transform .1s ease;
                        }

                        .slide-dulce .dulce-action .dulce-step-btn:hover {
                            background-color: rgba(255, 255, 255, .18);
                        }

                        .slide-dulce .dulce-action .dulce-step-btn:active img {
                            transform: scale(.8);
                        }

                        .slide-dulce .dulce-action .dulce-step-btn:disabled {
                            opacity: .4;
                            cursor: not-allowed;
                        }

                            .slide-dulce .dulce-action .dulce-step-btn:disabled:hover {
                                background-color: transparent;
                            }

                    .slide-dulce .dulce-action .dulce-step-qty {
                        color: var(--dm-surface);
                        font-weight: 800;
                        font-size: 15px;
                        line-height: 1;
                        padding: 3px 0;
                        font-variant-numeric: tabular-nums;
                    }

            /* Mobile: la tarjeta se apila (imagen full-width arriba, como antes) y la accion baja full-width
             *
             * OJO: esto decia "@@media". El doble arroba es el escape de Razor —dentro
             * de un <style> en una .cshtml hay que escribirlo asi para que emita un
             * solo @— y se arrastro al mover el bloque a este archivo .css, donde
             * "@@media" es una at-rule invalida: el navegador la descarta CON TODO SU
             * BLOQUE. Estas 53 lineas no se aplicaron nunca. */
            @media (max-width: 767px) {
                .slide-dulce .dulce-card-inner {
                    flex-direction: column;
                }

                    .slide-dulce .dulce-card-inner .img-dulce {
                        width: 100%;
                        height: auto;
                        margin: 0;
                        padding-top: .5rem;
                        border-radius: 30px;
                        object-fit: unset;
                    }

                    .slide-dulce .dulce-card-inner .info-dulce {
                        padding: 6px 10px 4px;
                    }

                .slide-dulce .dulce-action {
                    flex: 0 0 auto;
                    width: 100%;
                    padding: 0 .6rem .6rem;
                }

                    /* Estado 0: boton pill con icono de carrito */
                    .slide-dulce .dulce-action .dulce-add-btn {
                        height: 40px;
                        border-radius: 999px;
                        box-shadow: 0 3px 8px rgba(245, 134, 52, .35);
                    }

                    /* Estado 1+: stepper horizontal  -  cantidad  +  */
                    .slide-dulce .dulce-action .dulce-stepper-bar {
                        flex-direction: row-reverse;
                        height: 40px;
                        padding: 0;
                        border-radius: 999px;
                        box-shadow: 0 3px 8px rgba(245, 134, 52, .35);
                    }

                        .slide-dulce .dulce-action .dulce-step-btn {
                            flex: 0 0 52px;
                            width: 52px;
                            height: 100%;
                            min-height: 0;
                        }

                        .slide-dulce .dulce-action .dulce-step-qty {
                            flex: 1 1 auto;
                            text-align: center;
                            padding: 0;
                            font-size: 16px;
                        }
            }

            .scroll-button {
                position: absolute;
                top: 1rem;
                bottom: 0;
                width: 1.5rem;
                height: 4rem;
                color: #38312C;
                background-color: var(--dm-border);
                outline: none;
                box-shadow: 0px 3px 6px var(--dm-shadow-color);
                cursor: pointer;
            }

            .left-scroll-button {
                border-top-left-radius: 6px;
                border-bottom-left-radius: 6px;
                left: 0;
            }

            .right-scroll-button {
                border-top-right-radius: 6px;
                border-bottom-right-radius: 6px;
                right: 0;
            }
        

    .swal2-image {
        margin-top: 0;
        margin-bottom: 0;
    }
    /* El boton de descartar del cartel de cupones ("Omitir").
     *
     * El fondo transparente lleva !important para ganarle al
     * `background-color: #aaa !important` de site.css. Pero el color NO lo
     * llevaba, y SweetAlert2 le pone blanco a todos sus botones: el resultado
     * era texto blanco sobre el fondo blanco del cartel, o sea un boton de 77px
     * completamente invisible. Venia asi desde antes del restyling, en el
     * <style> embebido de Cart/Index.cshtml. */
    .swal2-styled.swal2-cancel {
        background: transparent !important;
        color: var(--dm-text) !important;
    }

    .swal2-styled.swal2-cancel:hover {
        color: var(--dm-text-strong) !important;
        text-decoration: underline;
    }
    .swal2-close, .swal2-close:focus, .swal2-close:active {
        box-shadow: none;
    }
    .swal2-radio label {
        margin: .6rem;
        width: 100%;
        padding: 0.6rem;
        -webkit-box-shadow: 0px 3px 6px var(--dm-shadow-color);
        box-shadow: 0px 3px 6px var(--dm-shadow-color);
        border-radius: 6px;
        cursor: pointer;
    }


/* ----------------------------------------------------------------------------
 * Controles de cantidad de cada fila del carrito
 *
 * Los tres controles (-, el numero y +) son hermanos SUELTOS dentro del <td>, sin
 * ningun contenedor, asi que se alineaban por baseline y el numero quedaba
 * levantado respecto de los botones. Se corrige por CSS: no se toco el markup ni
 * un solo binding de Angular.
 *
 * Ademas en mobile site-mobile.css los forzaba a 25x25, incomodo para el dedo.
 * Esta hoja se carga DESPUES (va por @section head, que el _Layout renderiza
 * despues de los <link> globales), asi que gana con la misma especificidad.
 * -------------------------------------------------------------------------- */

.cart-list .quantity-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
}

.cart-list .quantity-field {
    display: inline-block;
    vertical-align: middle;
    width: 44px;
    height: 40px;
    margin: 0;
    padding: 0;
    line-height: 38px;
    text-align: center;
    font-size: var(--dm-text-base);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-sm);
}


/* =============================================================================
 * T9 - Carrito rediseñado (template "Checkout - carrito y pasos")
 *
 * Reemplaza las dos <table> del carrito y el panel de resumen. Lo que ya resuelve
 * el design system (.dm-cart-item, .dm-order-summary, .dm-coupon, .dm-empty) no
 * se repite: abajo va solo el delta del template.
 *
 * OJO CON EL <p> GLOBAL: site.css y site-mobile.css declaran
 * "p { text-align: right }" para todo el sitio, asi que cada parrafo nuevo tiene
 * que declarar su alineacion o sale corrido a la derecha.
 * ============================================================================= */

/* ---------- Reparto de la pagina ---------- */

/* La pagina es una pila: arriba las dos columnas, abajo el carrusel de golosinas. */
.dm-cart {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-4);
    padding: var(--dm-space-4) 0;
}

/* LA FILA DE DOS COLUMNAS EXISTE PARA ENCERRAR AL RESUMEN STICKY. El navegador deja
   que un sticky viaje hasta el fondo de su bloque contenedor; con las golosinas como
   hermanas de main y aside, ese fondo era el de toda la pagina y el resumen bajaba
   hasta montarse arriba del carrusel. Encerrado aca, se frena al terminar las
   columnas. Probado tambien como grid con el aside en la fila 1: no alcanza, Chrome
   limita el sticky al contenedor de la grilla y no al area de la fila. */
.dm-cart__cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--dm-space-4);
}

.dm-cart__main {
    flex: 1 1 480px;
    min-width: 0;
}

/* Mobile primero: el resumen va a todo el ancho, debajo de las lineas. */
.dm-cart__aside {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-3);
}

/* De 1024 para arriba pasa a columna al costado. Los 356px son el ancho del
   panel en el template; el max-width VA SOLO ACA, porque aplicado en todos los
   anchos dejaba el resumen en 356 contra los 457 del contenido en un telefono de
   502px, o sea angosto y desalineado contra la card de arriba. */
@media (min-width: 1024px) {
    .dm-cart__aside {
        flex: 1 1 320px;
        max-width: 356px;
        position: sticky;
        top: var(--dm-space-4);
    }
}

/* El carrusel de golosinas va a lo ultimo y a todo el ancho.
   min-width: 0 NO ES DECORATIVO. .scroll-dulce es "flex-wrap: nowrap" con
   overflow-x, o sea que su contenido mide lo que suman todas las golosinas
   (medido: 6269px). Un item flex tiene "min-width: auto" por default, asi que
   .dm-cart__extras se estiraba hasta el ancho de su contenido en vez de dejarlo
   scrollear, y sacaba barra horizontal en TODA la pagina. Antes no pasaba porque
   el contenedor era un .row de Bootstrap y no un flex. */
/* Ahora cuelga directo de .dm-cart, que es una columna: un flex-basis de 100% aca
   seria sobre el ALTO y lo dejaria estirandose. Va con alto propio. */
.dm-cart__extras {
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
}

.dm-cart__extras-title {
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-brand);
    margin-bottom: var(--dm-space-2);
}

/* ---------- La card de las lineas ---------- */

.dm-cart-panel {
    background: var(--dm-surface);
    border-radius: var(--dm-radius-card);
    box-shadow: var(--dm-shadow-card);
    overflow: hidden;
}

/* margin: 0 CONTRA UNA REGLA GLOBAL DEL TEMA. site.css declara
   "header { margin-bottom: 2.5rem }" para TODO el sitio, y esta cabecera es un
   <header>: sin esto se cuelan 40px entre el titulo del carrito y las lineas.
   Mismo caso que .dm-summary__head. */
.dm-cart-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--dm-space-2);
    margin: 0;
    padding: var(--dm-space-3) var(--dm-space-4);
    border-bottom: 1px solid var(--dm-border);
}

.dm-cart-panel__heading {
    min-width: 0;
}

.dm-cart-panel__title {
    margin: 0;
    font-size: var(--dm-text-lg);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
}

.dm-cart-panel__sub {
    margin: 0;
    /* Obligatorio: ver la nota del <p> global arriba. */
    text-align: left;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
}

.dm-cart-panel__sort {
    flex: none;
    min-height: 40px;
    padding: 0 var(--dm-space-3);
    border: 1px solid var(--dm-border-strong);
    background: var(--dm-surface);
    border-radius: var(--dm-radius-pill);
    font-family: var(--dm-font);
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
    cursor: pointer;
    white-space: nowrap;
}

.dm-cart-panel__sort:hover,
.dm-cart-panel__sort.is-active {
    border-color: var(--dm-brand);
    color: var(--dm-brand-strong);
}

/* LA LISTA NO CRECE SIN LIMITE. Un carrito de supermercado puede tener decenas de
   lineas y la pagina se estiraba con todas: para llegar al resumen, al total o al
   carrusel de abajo habia que scrollear la lista entera.

   Se le pone un tope y que scrollee ella. No hace falta contar los items desde el
   codigo: con pocos, el contenido mide menos que el tope y no aparece ninguna barra;
   el scroll se habilita solo cuando hay de mas. El tope es relativo al viewport para
   que en un telefono corto no se coma la pantalla, con un maximo en pixeles para que
   en un monitor grande no queden quince lineas a la vista.

   NADA DE overscroll-behavior: contain ACA. Estuvo, con la idea de que al llegar al
   final de la lista el gesto no siguiera de largo. En telefono el efecto real era el
   contrario: la lista ocupaba casi toda la pantalla, cualquier deslizada empezaba
   adentro de ella y "contain" corta la propagacion, asi que la pagina no bajaba
   NUNCA y al cupon, a los Delicoins y al boton Siguiente no se llegaba. El default
   (auto) encadena al llegar al tope, que es justo lo que hace falta. */
.dm-cart-lines {
    padding: 0 var(--dm-space-4);
    max-height: min(60vh, 560px);
    overflow-y: auto;
}

/* EL TOPE SE AJUSTA POR ANCHO PORQUE LA FILA NO MIDE LO MISMO. Medido: 189px en
   telefono (el nombre, el unitario, los controles y el total se apilan) contra 122px
   en escritorio.
   Asi quedan ~1,5 lineas en telefono y ~4 en escritorio. */
@media (min-width: 1024px) {
    .dm-cart-lines {
        max-height: min(56vh, 520px);
    }
}

/* EN TELEFONO LA LISTA TIENE QUE SER CORTA, y no por estetica: es lo unico que deja
   ver que abajo sigue habiendo pagina. Con el tope de 72vh anterior la lista tapaba
   la pantalla entera, entraba justo un numero redondo de productos y el carrito
   parecia terminar ahi; ademas casi no quedaba superficie fuera de la lista donde
   apoyar el dedo para mover la pagina.
   Con este tope se corta un producto por la mitad -que es la senal de que hay mas- y
   asoman la nota y el arranque del resumen. Medido en 390x844: la lista pasa de
   ~600px a 295px y el bloque de cupon/Delicoins queda a una deslizada. */
@media (max-width: 767px) {
    .dm-cart-lines {
        max-height: min(38vh, 300px);
    }
}

/* Barra de scroll fina, para que no le coma ancho al contenido ni compita con el.
   Se declara por duplicado a proposito: scrollbar-width/color es lo estandar (Firefox
   y Chrome nuevos) y ::-webkit-scrollbar cubre a los WebKit que todavia no lo tienen. */
.dm-cart-lines {
    scrollbar-width: thin;
    scrollbar-color: var(--dm-border) transparent;
}

.dm-cart-lines::-webkit-scrollbar {
    width: 8px;
}

.dm-cart-lines::-webkit-scrollbar-thumb {
    background: var(--dm-border);
    border-radius: 4px;
}

.dm-cart-lines::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- La linea ---------- */

/* El componente del DS trae la miniatura en 52px (la del popover del header) y
   centra verticalmente. El template la lleva a 64 y alinea arriba, porque la fila
   ahora tiene tres renglones: nombre, unitario y controles. */
.dm-cart-line {
    align-items: flex-start;
    gap: var(--dm-space-3);
    padding: var(--dm-space-3) 0;
    border-top-color: var(--dm-border);
}

.dm-cart-lines .dm-cart-line:first-child {
    border-top: none;
}

.dm-cart-line__image {
    width: 64px;
    height: 64px;
    border-radius: var(--dm-radius-sm);
    background: var(--dm-surface-alt);
}

.dm-cart-line__tag {
    align-self: flex-start;
    font-size: var(--dm-text-xs);
    color: var(--dm-danger-alt);
}

.dm-cart-line__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dm-space-3);
    margin-top: var(--dm-space-1);
}

.dm-cart-line__remove {
    padding: 0;
    border: none;
    background: none;
    font-family: var(--dm-font);
    font-size: var(--dm-text-xs);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-muted);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.dm-cart-line__remove:hover {
    color: var(--dm-danger);
}

.dm-cart-line__total {
    flex: none;
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Stepper redondo ---------- */

.dm-cart-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius-pill);
}

.dm-cart-stepper__btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: none;
    font-family: var(--dm-font);
    font-size: 17px;
    line-height: 1;
    color: var(--dm-text-strong);
    cursor: pointer;
}

.dm-cart-stepper__btn:hover {
    background: var(--dm-surface-alt);
}

.dm-cart-stepper__btn--add {
    background: var(--dm-brand);
    color: var(--dm-text-on-brand);
}

.dm-cart-stepper__btn--add:hover {
    background: var(--dm-brand-strong);
}

.dm-cart-stepper__qty {
    min-width: 32px;
    text-align: center;
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
    font-variant-numeric: tabular-nums;
}

/* ---------- Nota del pedido ---------- */

.dm-cart-note {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    padding: var(--dm-space-3) var(--dm-space-4) var(--dm-space-4);
}

.dm-cart-note__label {
    margin: 0;
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
}

.dm-cart-note__field {
    width: 100%;
    max-width: 100%;
    padding: var(--dm-space-2) var(--dm-space-3);
    border: 1px solid var(--dm-border-input);
    border-radius: var(--dm-radius-card);
    font-family: var(--dm-font);
    font-size: var(--dm-text-base);
    color: var(--dm-text);
    resize: vertical;
}

.dm-cart-note__field:focus {
    outline: none;
    border-color: var(--dm-brand);
}

/* ---------- Telefono ---------- */

@media (max-width: 767px) {
    .dm-cart {
        gap: var(--dm-space-3);
        padding: var(--dm-space-3) 0;
    }

    .dm-cart-panel__head,
    .dm-cart-lines,
    .dm-cart-note {
        padding-left: var(--dm-space-3);
        padding-right: var(--dm-space-3);
    }

    /* La miniatura y el total compiten con el nombre a 360px: la primera baja a
       52px y el total pasa al renglon de abajo, alineado a la derecha. */
    .dm-cart-line__image {
        width: 52px;
        height: 52px;
    }

    .dm-cart-line {
        flex-wrap: wrap;
    }

    .dm-cart-line__total {
        margin-left: auto;
    }
}