/* =============================================================================
 * dm-summary.css - Panel de "Resumen de compra"
 *
 * POR QUE UNA HOJA PROPIA. El mismo panel aparece en DOS pantallas con hojas
 * distintas: en /cart (dm-cart.css) en modo editable -con cupon y Delicoins- y en
 * el checkout (dm-checkout.css) en modo lectura. Dejarlo en una de las dos
 * obligaba a duplicarlo en la otra, y cargar dm-cart.css entero en el checkout
 * arrastraba el carrusel de golosinas, que ahi no existe.
 *
 * La cargan Cart/Index.cshtml y Checkout/Shipping.cshtml en su @section head.
 * Salio de dm-cart.css, donde nacio con el tramo 9.
 * ============================================================================= */

/* ---------- Resumen de compra ---------- */

/* El .dm-order-summary del DS trae un padding uniforme; el template separa el
   panel en franjas con lineas, asi que el padding pasa a cada franja. */
.dm-summary {
    padding: 0;
    box-shadow: var(--dm-shadow-card);
    overflow: hidden;
}

/* El hueco entre el titulo y lo de abajo era el boton de cupones disponibles,
   que estaba ahi pero invisible (ver .dm-summary__coupon-av). Igual se ajusta el
   aire: el head aportaba su padding inferior Y el gap del bloque siguiente. */
/* EL HUECO ENTRE EL TITULO Y LO DE ABAJO ERAN 40px, y salian de una regla GLOBAL
   del tema: site.css declara "header { margin-bottom: 2.5rem }" para todo el
   sitio, y esta cabecera es un <header>.
   Es un selector de elemento, asi que basta declarar el margen desde la clase.
   Vale para cualquier <header> que se agregue de ahora en mas: si aparece un
   hueco de 40px abajo de uno, es esta regla. */
.dm-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dm-space-2);
    margin: 0;
    padding: var(--dm-space-3) var(--dm-space-4) var(--dm-space-2);
}

.dm-summary__title {
    margin: 0;
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
}

.dm-summary__count {
    font-size: var(--dm-text-xs);
    color: var(--dm-text-muted);
    white-space: nowrap;
}

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

/* "Tenés cupones disponibles". Habia quedado invisible: dm-cart.css le pone
   "color: var(--dm-surface)" (texto blanco) y el fondo violeta se lo daba un
   style="background:#5C3D9A" inline que se fue al reescribir la vista en el
   tramo 9. Blanco sobre blanco.
   SE REPONE EL VIOLETA, a pedido: distingue el atajo al modal de cupones del
   resto del panel, que es todo naranja, y ya era el color de esta accion.

   LOS TRES HEX NO TIENEN TOKEN. dm-cart.css ya los tenia anotados como huecos
   del design system (#7a52c8 y #8c65d9 para hover y activo); se les suma el
   #5c3d9a del estado normal, que hasta ahora vivia inline en la vista. Si alguna
   vez el violeta entra al proyecto de claude.ai/design, se reemplazan aca. */
.dm-summary__coupon-av,
.cart-list .dm-summary__coupon-av {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dm-space-2);
    width: 100%;
    min-height: 44px;
    padding: 0 var(--dm-space-3);
    border: none;
    border-radius: var(--dm-radius-pill);
    background: #5c3d9a;
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-on-brand);
    box-shadow: none;
}

.dm-summary__coupon-av:hover,
.cart-list .dm-summary__coupon-av:hover {
    background: #7a52c8;
    color: var(--dm-text-on-brand);
}

.dm-summary__coupon-av:active,
.cart-list .dm-summary__coupon-av:active {
    background: #8c65d9;
}

/* El icono del "tap" es oscuro y el fondo violeta es fijo: se lo invierte
   siempre, no solo al pasar por encima. */
.dm-summary__coupon-av img {
    filter: brightness(0) invert(1);
}

/* Chapita del cupon aplicado. */
.dm-summary__chip {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    padding: var(--dm-space-2) var(--dm-space-3);
    border: 1px solid var(--dm-brand);
    border-radius: var(--dm-radius-sm);
    background: var(--dm-brand-soft);
}

.dm-summary__chip-text {
    flex: 1;
    min-width: 0;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-strong);
}

.dm-summary__chip-amount {
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-brand-strong);
    white-space: nowrap;
}

.dm-summary__chip-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-summary__chip-remove:hover {
    color: var(--dm-danger);
}

/* El gris --dm-surface-sunken que traia el template no pega con el resto del
   panel, que es blanco con acentos naranjas: la caja quedaba como un parche.
   Va con la misma piel que el cupon (crema con borde naranja suave), que ademas
   es el color con el que los Delicoins aparecen en todo el sitio. */
.dm-summary__coins {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    padding: var(--dm-space-3);
    border: 1px solid var(--dm-brand);
    border-radius: var(--dm-radius-sm);
    background: var(--dm-brand-soft);
}

.dm-summary__coins .dm-coupon__input {
    background: var(--dm-surface);
}

.dm-summary__coins-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-summary__coins-title {
    display: inline-flex;
    align-items: center;
    gap: var(--dm-space-1);
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
}

.dm-summary__coins-avail {
    font-size: var(--dm-text-xs);
    color: var(--dm-text-muted);
}

.dm-summary__signin {
    margin: 0;
    text-align: left;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
}

.dm-summary__rows {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    padding: var(--dm-space-3) var(--dm-space-4);
    border-top: 1px solid var(--dm-border);
}

.dm-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dm-space-2);
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
}

.dm-summary__num {
    color: var(--dm-text-strong);
    font-weight: var(--dm-weight-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dm-summary__row.is-discount .dm-summary__num {
    color: var(--dm-danger-alt);
}

.dm-summary__hint {
    display: block;
    font-size: var(--dm-text-xs);
    color: var(--dm-brand);
    font-weight: var(--dm-weight-medium);
}

/* El total es lo que el template agranda: 24px contra los 14 de las filas. */
.dm-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dm-space-2);
    padding: var(--dm-space-3) var(--dm-space-4);
    border-top: 1px solid var(--dm-border);
}

.dm-summary__total-label {
    font-size: var(--dm-text-sm);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
}

.dm-summary__total-value {
    font-size: var(--dm-text-2xl);
    font-weight: var(--dm-weight-bold);
    color: var(--dm-brand-strong);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.dm-summary__earn {
    display: flex;
    align-items: center;
    gap: var(--dm-space-2);
    margin: 0 var(--dm-space-4) var(--dm-space-3);
    padding: var(--dm-space-2) var(--dm-space-3);
    border-radius: var(--dm-radius-sm);
    background: var(--dm-brand-soft);
    font-size: var(--dm-text-xs);
    color: var(--dm-text);
    line-height: 1.4;
}

.dm-summary__cta {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
    padding: 0 var(--dm-space-4) var(--dm-space-4);
}

.dm-summary__next {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: var(--dm-radius-cta);
    background: var(--dm-brand);
    color: var(--dm-text-on-brand);
    font-size: var(--dm-text-md);
    font-weight: var(--dm-weight-bold);
    text-decoration: none;
    box-shadow: var(--dm-shadow-sm);
}

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

/* Angular le pone la clase cuando el carrito no es valido o falta compra minima.
   pointer-events lo desactiva de verdad: un <a> no admite disabled. */
.dm-summary__next.is-disabled {
    background: var(--dm-border-strong);
    box-shadow: none;
    pointer-events: none;
}

.dm-summary__back {
    text-align: center;
    font-size: var(--dm-text-xs);
    color: var(--dm-text-muted);
    text-decoration: none;
}

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



/* ---------- Modo lectura (checkout) ---------- */

/* En el checkout el panel no edita nada: muestra los productos y los totales. La
   lista puede ser larga, asi que scrollea adentro en vez de estirar la columna. */
.dm-summary__items {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    padding: 0 var(--dm-space-4);
}

.dm-summary__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dm-space-2);
    padding: 9px 0;
    border-top: 1px solid var(--dm-border);
}

.dm-summary__items .dm-summary__item:first-child {
    border-top: none;
}

/* Columna: el nombre arriba y el unitario abajo, igual que la linea del carrito.
   Era un span suelto y ahora envuelve las dos cosas; el flex:1 sigue siendo el que
   empuja la cantidad y el total contra el borde derecho. */
.dm-summary__item-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    font-size: var(--dm-text-sm);
    color: var(--dm-text);
    line-height: 1.35;
}

/* Mismo tratamiento que .dm-cart-item__meta en /cart: chico, apagado y el tachado
   con el <del> de siempre, para que las dos pantallas se lean igual. */
.dm-summary__item-precio {
    font-size: var(--dm-text-xs);
    color: var(--dm-text-muted);
}

.dm-summary__item-precio del {
    margin-right: 4px;
}

.dm-summary__item-qty {
    flex: none;
    font-size: var(--dm-text-xs);
    color: var(--dm-text-muted);
    white-space: nowrap;
}

.dm-summary__item-total {
    flex: none;
    font-size: var(--dm-text-sm);
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dm-summary__note {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--dm-space-2) var(--dm-space-4);
    border-top: 1px solid var(--dm-border);
}

.dm-summary__note-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: var(--dm-weight-semibold);
    color: var(--dm-text-muted);
}

.dm-summary__note-text {
    font-size: var(--dm-text-sm);
    color: var(--dm-text);
    line-height: 1.4;
}

/* La barra de scroll de la lista, con el mismo aspecto que el resto del tema. */
.dm-summary__items::-webkit-scrollbar {
    width: 8px;
}

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

.dm-summary__items::-webkit-scrollbar-track {
    background: var(--dm-surface-alt);
    border-radius: 4px;
}


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

@media (max-width: 767px) {
    .dm-summary__head,
    .dm-summary__edit,
    .dm-summary__rows,
    .dm-summary__total,
    .dm-summary__cta,
    .dm-summary__items,
    .dm-summary__note {
        padding-left: var(--dm-space-3);
        padding-right: var(--dm-space-3);
    }

    .dm-summary__earn {
        margin-left: var(--dm-space-3);
        margin-right: var(--dm-space-3);
    }
}