/* components/resumen-pedido.css
   El resumen del pedido de la tienda, UNA pieza para el carrito y el checkout (#907).

   Antes el carrito tenía su resumen (filas sin dos puntos, total en negro, cupón de la casa) y el
   checkout otro distinto, armado con Bootstrap suelto (card, h4 azul, input-group, badge verde),
   que además mostraba cada renglón a precio de lista. Acá quedan los estilos del carrito —que es
   el formato de la tienda— y los del listado de renglones del checkout.

   Lenguaje del storefront: esquinas rectas, filetes claros, negro para lo principal. */

:root {
    --cart-ink:            #000;
    --cart-text:           #1a1a1a;
    --cart-text-muted:     #6c757d;
    --cart-text-subtle:    #999;
    --cart-surface:        #fff;
    --cart-surface-sunken: #fafafa;
    --cart-border:         #e5e5e5;
    --cart-green:          #A8E6CF;
    --cart-amber:          #FFD3B6;
}

/* Precio / Subtotal */
.cart-price-main { font-weight: 700; color: var(--cart-ink); font-size: 0.95rem; }
.cart-price-old { display: block; font-size: 0.75rem; color: var(--cart-text-muted); text-decoration: line-through; }
.cart-discount-badge {
    display: inline-block;
    margin-top: .25rem;
    background: var(--cart-ink);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    letter-spacing: 0.5px;
}

/* Sidebar resumen */
.cart-summary {
    background: var(--cart-surface);
    border-top: 2px solid var(--cart-ink);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}
.cart-summary__title {
    font-size: 0.7rem;
    color: var(--cart-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--cart-border);
}

/* Cupón */
.cart-coupon-input { display: flex; }
.cart-coupon-input input {
    flex: 1;
    border: 1px solid var(--cart-ink);
    border-right: none;
    padding: .5rem .75rem;
    border-radius: 0;
    font-size: 0.85rem;
    background: var(--cart-surface);
}
.cart-coupon-input input:focus { outline: none; }
.cart-coupon-input button {
    background: var(--cart-ink);
    color: #fff;
    border: 1px solid var(--cart-ink);
    padding: 0 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    font-weight: 600;
}
.cart-coupon-input button:hover { background: transparent; color: var(--cart-ink); }
/* Lo que se dice del cupón, debajo del campo: aplicado, rechazado, "vale pagando con…" o que se
   quitó solo al confirmar. Son notas del KDS (#907); acá sólo el tamaño que les toca en el resumen. */
.cart-coupon-input ~ .kds-note {
    margin: .5rem 0 0;
    padding: .4rem .75rem;
    font-size: 0.8rem;
    line-height: 1.35;
}
.cart-cupon-aplicado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}
.cart-cupon-quitar {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--cart-ink);
    text-decoration: underline;
    font-size: 0.75rem;
    cursor: pointer;
}

/* Lo que envuelve Subtotal, Bonificación, Envío y Total en el carrito. */
.cart-desglose { margin-top: 1.25rem; }
.cart-row[hidden] { display: none; }

/* Desglose */
.cart-row { display: flex; justify-content: space-between; padding: .35rem 0; font-size: 0.9rem; color: var(--cart-text); }
.cart-row--discount { color: #1f7a4c; }
.cart-row--total {
    border-top: 1px solid var(--cart-ink);
    padding-top: .85rem;
    margin-top: .75rem;
    font-size: 1.1rem;
}
.cart-row--total .cart-row__label { font-weight: 700; }
.cart-row--total .cart-row__value {
    font-weight: 700;
    color: var(--cart-ink);
    font-size: 1.4rem;
}

/* El aviso del envío gratis en el desglose es una nota del KDS: acá el aire con las filas. */
.cart-desglose .kds-note {
    margin: .75rem 0;
    font-size: 0.8rem;
}

/* CTA principal */
.cart-cta-primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: var(--cart-ink);
    color: #fff;
    border: 1px solid var(--cart-ink);
    padding: .9rem 1rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-top: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
}
.cart-cta-primary:hover { background: transparent; color: var(--cart-ink); }
.cart-cta-primary__label { font-size: 0.85rem; }
.cart-cta-primary__amount { font-size: 1.3rem; font-weight: 700; margin-top: .15rem; letter-spacing: 0; }

/* El monto nunca se parte ni empuja el rótulo fuera del resumen. */
.cart-summary { overflow: hidden; }
.cart-row { gap: .5rem; align-items: baseline; }
.cart-row__value { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 768px) {
    .cart-summary { padding: .85rem; }
}

/* Renglones del resumen en el checkout: foto chica, nombre en dos renglones, código y cantidad a la
   izquierda; el importe que se cobra a la derecha, con el de lista tachado y la promo si la hay. */
.resumen-items {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.resumen-renglon {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--cart-border);
}
.resumen-renglon:first-child { padding-top: 0; }
.resumen-renglon__foto {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: var(--cart-surface-sunken);
}
.resumen-renglon__foto--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cart-text-subtle);
    font-size: .85rem;
}
.resumen-renglon__datos {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.resumen-renglon__nombre {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cart-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.resumen-renglon__meta {
    font-size: .72rem;
    color: var(--cart-text-muted);
}
.resumen-renglon__importe {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.resumen-renglon__importe .cart-price-main { font-size: .85rem; }
.resumen-renglon--regalo .resumen-renglon__meta:first-of-type { color: var(--cart-ink); font-weight: 600; }
/* Un regalo no tiene precio que tachar: dice "Sin cargo" y nada más, en el carrito, el carrito
   lateral, el checkout y el pedido enviado (#907). */
.cart-sin-cargo,
.resumen-renglon__sin-cargo {
    font-size: .8rem;
    font-weight: 700;
    color: var(--cart-ink);
}

/* Más de 4 productos: los demás se abren a pedido, en vez de una caja con scroll propio. */
.resumen-mas {
    margin: -.5rem 0 1rem;
}
.resumen-mas > summary {
    cursor: pointer;
    list-style: none;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: underline;
    color: var(--cart-ink);
    padding: .35rem 0;
}
.resumen-mas > summary::-webkit-details-marker { display: none; }
.resumen-mas[open] > summary { margin-bottom: .35rem; }

/* El envío o el total todavía sin número se leen apagados: no son un importe. */
.cart-row__value--pendiente {
    color: var(--cart-text-muted);
    font-size: .82rem;
}

.resumen-volver {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    font-size: .78rem;
    color: var(--cart-text-muted);
    text-decoration: none;
}
.resumen-volver:hover { color: var(--cart-ink); text-decoration: underline; }

/* "Tu pedido": cómo sigue después de comprar (configuracion.carrito_condiciones), en el carrito y en
   el checkout (#907). Una lista simple con un filete arriba; antes era un recuadro gris con filete
   negro a la izquierda. */
.cart-trust {
    border-top: 1px solid var(--cart-border);
    padding-top: .9rem;
    margin-top: 1.1rem;
}
.cart-trust__title {
    font-size: 0.7rem;
    color: var(--cart-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: .5rem;
}
.cart-trust__list { list-style: none; padding: 0; margin: 0; font-size: 0.8rem; color: var(--cart-ink); }
.cart-trust__list li { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; }
.cart-trust__list i { width: 14px; flex: 0 0 14px; font-size: .7rem; color: var(--cart-text-muted); }

/* Carrito lateral (#1003): la foto, quitar y el bloque de importes, sin estilos sueltos en el HTML. */
.minicart-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 8px;
    flex-shrink: 0;
}
.minicart-quitar {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--cart-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}
.minicart-quitar:hover { color: var(--cart-ink); }
.minicart-totales { margin-bottom: .5rem; }

/* La forma de venta del renglón en el carrito lateral ("Caja x10"), abajo del nombre: sin ella el
   comprador veía el producto con el precio de la caja y no sabía por qué. */
.minicart-forma { display: block; font-size: .75rem; color: #6c757d; }