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

.carrito-page {
    background: #fff7fc;
    color: #5b4ca7;
}

.carrito-card {
    background: #f7f0ff;
    border-radius: 24px;
    border: none;
    padding: 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.carrito-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ff4f7a;
}

.carrito-page table thead th {
    border-bottom: 2px solid rgba(91, 76, 167, 0.15);
    color: #5b4ca7;
}

.carrito-page table tbody td {
    border-color: rgba(91, 76, 167, 0.06);
}

/* ============================
   CARRITO – ESTILOS MELY
============================ */

.carrito-page {
    background: #fff7fc;
    color: #5b4ca7;
}

.carrito-empty-icon {
    font-size: 3rem;
}

.carrito-card {
    background: #f7f0ff;
    border-radius: 24px;
}

.carrito-table thead th {
    border-bottom-width: 1px;
    border-color: rgba(91, 76, 167, 0.15);
    font-size: 0.9rem;
    color: #7a6bbf;
}

.carrito-table tbody td {
    border-top-color: rgba(91, 76, 167, 0.08);
    vertical-align: middle;
    font-size: 0.95rem;
}

.carrito-qty-input {
    max-width: 80px;
    margin: 0 auto;
    border-radius: 999px;
}

.carrito-total-box .carrito-total {
    font-size: 1.4rem;
    color: #ff4f7a;
}

.carrito-summary {
    background: #ffffff;
    border-radius: 24px;
}

.carrito-summary-list li span:first-child {
    max-width: 70%;
}

/* Mini resumen en el header */
.carrito-resumen-mini .badge {
    background: #f7f0ff;
}

/* Mobile: tabla más cómoda */
@media (max-width: 767.98px) {
    .carrito-card {
        padding: 1rem 0.75rem;
        border-radius: 18px;
    }

    .carrito-table thead {
        display: none;
    }

    .carrito-table tbody tr {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(91, 76, 167, 0.1);
    }

    .carrito-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: none;
        padding: 0.25rem 0.5rem;
    }

    .carrito-table tbody td:nth-child(1) {
        flex-direction: column;
        align-items: flex-start;
    }

    .carrito-table tbody td:nth-child(2) {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .carrito-table tbody td:nth-child(3),
    .carrito-table tbody td:nth-child(4) {
        justify-content: space-between;
    }

    .carrito-table tbody td:last-child {
        justify-content: flex-end;
    }

    .carrito-summary {
        border-radius: 18px;
    }
}