/* ============================================================
   CARRITO
   ============================================================ */

/* ── CONTENEDOR RAÍZ ───────────────────────────────────────── */
.carrito-wrapper {
    /*background-color: var(--light-gray);*/
    min-height: 100vh;
    margin-top: 80px;
    padding: var(--spacing-10) 0 var(--spacing-24);
    font-family: var(--font-body);
    color: var(--text-color);
}

.breadcrumb-nav {
    margin-bottom: var(--spacing-2);
}

/* ── CARRITO ── */
.carrito-productos {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.carrito-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16) var(--spacing-6);
    text-align: center;
    background: var(--white);
    border-radius: var(--border-radius);
    border: var(--border-width-thin) solid var(--border-color);
    box-shadow: var(--shadow-light);
    margin: var(--spacing-8) auto;
    max-width: 500px;
}

.cart-title-area {
    display: flex;
    align-items: baseline;
    gap: var(--gap-md);
    margin-bottom: var(--spacing-8);
    border-bottom: var(--border-width-thin) solid var(--border-color);
    padding-bottom: var(--spacing-4);
}

.pagina-titulo {
    font-family: var(--font-headings);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--dark-green);
    margin: 0;
    letter-spacing: var(--letter-spacing-heading);
}

.items-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.cart-components-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

/* ── LAYOUT ESTRUCTURAL ────────────────────────────────────── */
.carrito-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--gap-xl);
    align-items: start;
}

/* ── GRID DE TARJETAS FLOTANTES ────────────────────────────── */
.carrito-productos-flow {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.carrito-cards-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

/* Tarjeta Individual de Producto Premium */
.product-cart-card {
    background: var(--white);
    border-radius: var(--border-radius);
    border: var(--border-width-thin) solid var(--border-color);
    box-shadow: var(--shadow-light);
    padding: var(--spacing-5);
    position: relative;
    transition: var(--transition);
}

.product-cart-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--pastel-green);
}

.card-main-layout {
    display: flex;
    gap: var(--gap-lg);
    align-items: flex-start;
}

/* Área de Imagen Limpia */
.card-image-area {
    width: 90px;
    height: 90px;
    border-radius: var(--border-radius-sm);
    background-color: var(--light-gray);
    border: var(--border-width-thin) solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2);
    flex-shrink: 0;
}

.card-image-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sin-imagen-placeholder {
    font-size: var(--font-size-lg);
    color: var(--neutral-muted);
}

/* Detalles y Textos */
.card-details-area {
    flex: 1;
    min-width: 0;
}

.card-meta {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-1);
}

.product-brand-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    color: var(--secondary-color);
    letter-spacing: var(--letter-spacing-wider);
}

.product-sku-tag {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.product-title-link {
    text-decoration: none;
    display: inline-block;
    max-width: 90%;
}

.product-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    margin: 0 0 var(--spacing-3);
    line-height: var(--line-height-snug);
}

.product-title-link:hover .product-name {
    color: var(--primary-color);
}

/* Fila interactiva inferior interna */
.card-interactive-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: var(--spacing-2);
    flex-wrap: wrap;
    gap: var(--gap-md);
}

.interactive-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.unit-price-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.unit-price-label strong {
    color: var(--text-color);
}

/* Control numérico estilizado */
.cantidad-control {
    display: inline-flex;
    align-items: center;
    border: var(--border-width-thin) solid var(--neutral-muted);
    border-radius: var(--border-radius-sm);
    background: var(--light-gray);
    width: fit-content;
}

.cantidad-control button {
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 0.7rem;
    cursor: var(--cursor-pointer);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.cantidad-control button:hover:not(:disabled) {
    color: var(--primary-color);
    background: var(--white);
}

.cantidad-control button:disabled {
    opacity: 0.3;
    cursor: var(--cursor-not-allowed);
}

.cantidad-control .qty-input {
    width: 34px;
    height: 30px;
    border: none;
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    background: var(--white);
    outline: none;
}

/* Área de subtotal alineada */
.interactive-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.subtotal-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-semibold);
}

.subtotal-precio {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

/* Botón flotante de borrado */
.btn-card-remove {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    width: 26px;
    height: 26px;
    border-radius: var(--border-radius-full);
    background: transparent;
    border: none;
    color: var(--neutral-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    cursor: var(--cursor-pointer);
    transition: var(--transition-fast);
}

.btn-card-remove:hover {
    background-color: var(--danger-muted);
    color: var(--danger);
}

/* ── ACCIONES FINALES DEL FLUJO ────────────────────────────── */
.carrito-flow-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-4);
    padding: 0 var(--spacing-2);
}

.btn-seguir-comprando {
    font-size: var(--font-size-sm);
    color: var(--text-on-secondary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    transition: var(--transition-fast);
}

.btn-seguir-comprando:hover {
    color: var(--text-on-secondary);
    background-color: var(--primary-active);
}

.btn-vaciar-carrito {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: var(--cursor-pointer);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    transition: var(--transition-fast);
}

.btn-vaciar-carrito:hover {
    color: var(--text-on-primary);
}

/* ── BLOQUE INTERNO EXCEPCIONES AGOTADO ────────────────────── */
.stock-warning-badge {
    font-size: var(--font-size-xs);
    color: var(--warning-text);
    font-weight: var(--font-weight-semibold);
    display: block;
    margin-top: var(--spacing-1);
}

.card--out-of-stock {
    border-color: var(--danger-rose);
    background: var(--neutral-50);
}

.card--out-of-stock .card-main-layout {
    opacity: 0.6;
}

.card-stock-alert {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    background: var(--white);
    border: var(--border-width-thin) solid var(--danger-berry);
    color: var(--danger-dark2);
    font-size: var(--font-size-xs);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-4);
    font-weight: var(--font-weight-medium);
}

.alert-stock-agotado {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    background: var(--danger-muted);
    border-left: var(--border-width-thick) solid var(--danger);
    padding: var(--padding-md);
    border-radius: var(--border-radius-sm);
    color: var(--danger-text);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-5);
}

/* ── CARD RESUMEN LATERAL STICKY ───────────────────────────── */
.carrito-resumen {
    position: sticky;
    top: 100px;
}

.resumen-card {
    background: var(--white);
    border-radius: var(--border-radius);
    border: var(--border-width-thin) solid var(--border-color);
    box-shadow: var(--shadow-light);
    padding: var(--spacing-6);
}

.resumen-card h3 {
    font-family: var(--font-headings);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-color);
    margin: 0 0 var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: var(--border-width-thin) solid var(--border-color);
}

.resumen-info-despacho {
    margin-bottom: var(--spacing-4);
}

.resumen-linea-item {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-2);
}

.resumen-linea-item .label {
    color: var(--text-secondary);
}

.resumen-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.resumen-total span:first-child {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.total-valor {
    font-family: var(--font-headings);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--primary-color);
}

.btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--padding-md);
    background: var(--gradient-primary);
    color: var(--text-on-primary) !important;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: var(--transition);
}

.btn-checkout:hover {
    background: var(--gradient-primary-hover);
    box-shadow: var(--shadow-primary);
}

.btn-login-pay {
    background: var(--gradient-secondary);
}

.btn-seguir-comprando-link {
    display: block;
    text-align: center;
    margin-top: var(--spacing-4);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.btn-seguir-comprando-link:hover {
    color: var(--primary-color);
}

#aviso-sin-stock-checkout {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--danger-rose);
    border: var(--border-width-thin) solid var(--danger-berry);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    color: var(--danger-dark2);
}

.vacio-icon-wrap {
    width: 56px;
    height: 56px;
    background-color: var(--light-gray);
    border-radius: var(--border-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
    color: var(--text-secondary);
}

.carrito-vacio h2 {
    font-family: var(--font-headings);
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-1);
}

.carrito-vacio p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-5);
}

.btn-ir-tienda {
    display: inline-flex;
    padding: var(--padding-sm) var(--padding-xl);
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

.btn-ir-tienda:hover {
    background-color: var(--primary-hover);
    box-shadow: var(--shadow-primary);
}

/* Estilos Premium para la separación de Carritos estilo Mercado Libre */
.seccion-carrito-antiguo {
    margin-top: 2rem;
    border-top: 2px dashed #cfd8dc;
    padding-top: 1.5rem;
}

.titulo-carrito-antiguo {
    font-size: 1.2rem;
    color: #546e7a;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-antigua-acciones {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.btn-recuperar-item {
    background-color: #f1f8e9;
    color: #33691e;
    border: 1px solid #c5e1a5;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-recuperar-item:hover {
    background-color: #e1f5fe;
    color: #0277bd;
    border-color: #81d4fa;
}

/* ── RESPONSIVIDAD ─────────────────────────────────────────── */
@media (max-width: 992px) {
    .carrito-layout {
        grid-template-columns: 1fr;
    }

    .carrito-resumen {
        position: static;
    }
}

@media (max-width: 768px) {
    .carrito-wrapper {
        margin-top: 60px;
    }
}

@media (max-width: 576px) {
    .card-main-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .card-interactive-row {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-4);
    }

    .interactive-left {
        align-items: center;
    }

    .interactive-right {
        align-items: center;
    }

    .carrito-flow-actions {
        flex-direction: column;
        gap: var(--spacing-4);
    }
}