/* =========================================================
   RC31.24 — CARRITO MÓVIL REDISEÑADO
   Diseño alineado con la aplicación PromoCombo actual.

   1. Panel claro a pantalla completa
   2. Cabecera compacta y fija
   3. Productos legibles y uniformes
   4. Controles de cantidad claros
   5. Total y acción final con jerarquía profesional
========================================================= */

@media (max-width: 900px) {
    :root {
        --pc-cart-red: #e7192d;
        --pc-cart-red-dark: #c90d20;
        --pc-cart-yellow: #ffd447;
        --pc-cart-ink: #1c1d21;
        --pc-cart-muted: #70757f;
        --pc-cart-line: #e7e9ed;
        --pc-cart-surface: #ffffff;
        --pc-cart-bg: #f5f6f8;
        --pc-cart-soft-red: #fff1f3;
        --pc-cart-soft-yellow: #fff8dc;
    }

    /* =====================================================
       PANEL GENERAL
    ===================================================== */
    body #panelCarrito {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1600 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        transform: translateX(100%) !important;
        right: auto !important;
        background: var(--pc-cart-bg) !important;
        color: var(--pc-cart-ink) !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
    }

    body #panelCarrito.abierto {
        transform: translateX(0) !important;
    }

    /* =====================================================
       CABECERA
    ===================================================== */
    body .cabeceraCarrito {
        position: relative !important;
        z-index: 3 !important;
        min-height: 76px !important;
        padding: max(12px, env(safe-area-inset-top)) 16px 12px !important;
        display: flex !important;
        align-items: center !important;
        background: rgba(255,255,255,.97) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--pc-cart-line) !important;
        box-shadow: 0 8px 22px rgba(20, 24, 32, .06) !important;
        backdrop-filter: blur(16px) !important;
    }

    body .tituloCarrito {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
    }

    body #cerrarCarrito {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: 1px solid var(--pc-cart-line) !important;
        border-radius: 15px !important;
        background: #fff !important;
        color: var(--pc-cart-ink) !important;
        font-size: 24px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        box-shadow: 0 5px 14px rgba(20,24,32,.08) !important;
    }

    body #cerrarCarrito:active {
        transform: scale(.94) !important;
    }

    body .iconoTituloCarrito {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid #ffd6db !important;
        border-radius: 15px !important;
        background: var(--pc-cart-soft-red) !important;
        color: var(--pc-cart-red) !important;
        font-size: 22px !important;
        box-shadow: none !important;
    }

    body .textoTituloCarrito {
        display: block !important;
        min-width: 0 !important;
    }

    body .textoTituloCarrito h2,
    body .cabeceraCarrito h2 {
        margin: 0 !important;
        color: var(--pc-cart-ink) !important;
        font-size: 24px !important;
        font-weight: 900 !important;
        letter-spacing: -.025em !important;
    }

    /* =====================================================
       CONTENIDO
    ===================================================== */
    body #contenidoCarrito {
        min-height: 0 !important;
        padding: 16px 14px 26px !important;
        display: block !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        background:
            radial-gradient(circle at top right, rgba(231,25,45,.045), transparent 34%),
            var(--pc-cart-bg) !important;
        color: var(--pc-cart-ink) !important;
        scrollbar-width: thin !important;
    }

    /* =====================================================
       TARJETAS DE PRODUCTOS
    ===================================================== */
    body .itemCarrito {
        margin: 0 0 12px !important;
        overflow: hidden !important;
        border: 1px solid var(--pc-cart-line) !important;
        border-radius: 20px !important;
        background: var(--pc-cart-surface) !important;
        color: var(--pc-cart-ink) !important;
        box-shadow: 0 9px 26px rgba(24, 31, 43, .07) !important;
        animation: pcCartItemIn .22s ease both !important;
    }

    @keyframes pcCartItemIn {
        from { opacity: 0; transform: translateY(7px); }
        to { opacity: 1; transform: translateY(0); }
    }

    body .cabeceraItemCarrito {
        padding: 12px 13px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    body .codigoItemCarrito {
        min-height: 25px !important;
        padding: 5px 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        border: 1px solid #ffd4da !important;
        border-radius: 999px !important;
        background: var(--pc-cart-soft-red) !important;
        color: var(--pc-cart-red-dark) !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    body .cabeceraItemCarrito .eliminar {
        width: 36px !important;
        height: 36px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: 1px solid #ffd9de !important;
        border-radius: 12px !important;
        background: #fff6f7 !important;
        color: var(--pc-cart-red) !important;
        font-size: 16px !important;
        box-shadow: none !important;
    }

    body .cabeceraItemCarrito .eliminar:active {
        transform: scale(.92) !important;
    }

    body .cuerpoItemCarrito {
        padding: 12px 13px 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
        gap: 12px !important;
    }

    body .informacionItemCarrito {
        min-width: 0 !important;
    }

    body .informacionItemCarrito h3 {
        margin: 0 0 8px !important;
        color: var(--pc-cart-ink) !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1.22 !important;
        letter-spacing: -.02em !important;
    }

    body .precioUnitarioCarrito {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        color: var(--pc-cart-muted) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    body .precioUnitarioCarrito strong {
        color: var(--pc-cart-ink) !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    body .itemCarrito .detalleConfiguracionCarrito {
        margin: 9px 0 !important;
        padding: 9px 10px !important;
        border: 1px solid #eceef1 !important;
        border-radius: 12px !important;
        background: #f8f9fb !important;
        color: #4e5560 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body .itemCarrito .detalleConfiguracionCarrito,
    body .itemCarrito .detalleConfiguracionCarrito * {
        color: #4e5560 !important;
    }

    body .itemCarrito .controlesCantidad {
        min-width: 116px !important;
        height: 44px !important;
        padding: 3px !important;
        display: grid !important;
        grid-template-columns: 36px 36px 36px !important;
        align-items: center !important;
        gap: 0 !important;
        border: 1px solid var(--pc-cart-line) !important;
        border-radius: 999px !important;
        background: #f8f9fb !important;
        box-shadow: none !important;
    }

    body .itemCarrito .controlesCantidad button {
        width: 36px !important;
        height: 36px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: var(--pc-cart-red) !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        box-shadow: 0 2px 7px rgba(20,24,32,.06) !important;
    }

    body .itemCarrito .controlesCantidad button:active {
        transform: scale(.9) !important;
        background: var(--pc-cart-soft-red) !important;
    }

    body .itemCarrito .cantidadItemCarrito {
        min-width: 36px !important;
        color: var(--pc-cart-ink) !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    body .itemCarrito .subtotal {
        margin: 0 !important;
        padding: 12px 13px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        border: 0 !important;
        border-top: 1px solid var(--pc-cart-line) !important;
        background: #fafbfc !important;
        color: var(--pc-cart-muted) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    body .itemCarrito .subtotal strong {
        color: var(--pc-cart-red) !important;
        font-size: 18px !important;
        font-weight: 950 !important;
    }

    /* =====================================================
       CARRITO VACÍO
    ===================================================== */
    body .carritoVacio {
        min-height: 100% !important;
        padding: 30px 8px 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        color: var(--pc-cart-ink) !important;
    }

    body .iconoCarritoVacio {
        width: 104px !important;
        height: 104px !important;
        display: grid !important;
        place-items: center !important;
        margin-bottom: 18px !important;
        border: 1px solid #ffd8dd !important;
        border-radius: 32px !important;
        background: linear-gradient(145deg, #fff, var(--pc-cart-soft-red)) !important;
        color: var(--pc-cart-red) !important;
        font-size: 50px !important;
        box-shadow: 0 14px 34px rgba(231,25,45,.10) !important;
    }

    body .carritoVacio h3 {
        margin: 0 0 8px !important;
        color: var(--pc-cart-ink) !important;
        font-size: 28px !important;
        font-weight: 950 !important;
        letter-spacing: -.035em !important;
    }

    body .carritoVacio > p {
        max-width: 310px !important;
        margin: 0 0 24px !important;
        color: var(--pc-cart-muted) !important;
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    body .tarjetaCatalogoCarrito {
        width: 100% !important;
        max-width: 440px !important;
        padding: 16px !important;
        border: 1px solid var(--pc-cart-line) !important;
        border-radius: 20px !important;
        background: #fff !important;
        color: var(--pc-cart-ink) !important;
        box-shadow: 0 10px 28px rgba(24,31,43,.07) !important;
    }

    body .textoCatalogoCarrito {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: left !important;
    }

    body .iconoCatalogoCarrito {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 16px !important;
        background: var(--pc-cart-soft-yellow) !important;
        font-size: 30px !important;
    }

    body .tarjetaCatalogoCarrito strong {
        display: block !important;
        margin-bottom: 3px !important;
        color: var(--pc-cart-ink) !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    body .tarjetaCatalogoCarrito small {
        display: block !important;
        color: var(--pc-cart-muted) !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body #volverCatalogo {
        width: 100% !important;
        min-height: 52px !important;
        margin-top: 15px !important;
        border: 0 !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg, var(--pc-cart-red), var(--pc-cart-red-dark)) !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        box-shadow: 0 10px 22px rgba(231,25,45,.20) !important;
    }

    /* =====================================================
       MEJOR PRECIO
    ===================================================== */
    body .mejorPrecioCarrito {
        margin: 0 0 12px !important;
        padding: 13px !important;
        border: 1px solid #bde7cc !important;
        border-radius: 18px !important;
        background: #f0fbf4 !important;
        color: #1f5d36 !important;
        box-shadow: none !important;
    }

    body .mejorPrecioCarrito * {
        color: inherit !important;
    }

    /* =====================================================
       PIE / TOTAL
    ===================================================== */
    body #footerCarrito {
        position: relative !important;
        z-index: 4 !important;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
        background: rgba(255,255,255,.98) !important;
        border: 0 !important;
        border-top: 1px solid var(--pc-cart-line) !important;
        box-shadow: 0 -10px 28px rgba(20,24,32,.09) !important;
        backdrop-filter: blur(16px) !important;
    }

    body .resumenTotalCarrito {
        min-height: 78px !important;
        margin: 0 0 10px !important;
        padding: 12px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        border: 1px solid var(--pc-cart-line) !important;
        border-radius: 18px !important;
        background: #fafbfc !important;
        color: var(--pc-cart-ink) !important;
        box-shadow: none !important;
    }

    body .textoTotalCarrito {
        min-width: 0 !important;
    }

    body .etiquetaTotalCarrito {
        display: block !important;
        margin-bottom: 2px !important;
        color: var(--pc-cart-muted) !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        letter-spacing: .02em !important;
    }

    body #totalCarrito {
        display: block !important;
        color: var(--pc-cart-red) !important;
        font-size: 31px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: -.04em !important;
    }

    body #cantidadProductosCarrito {
        display: block !important;
        margin-top: 4px !important;
        color: var(--pc-cart-muted) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    body .iconoResumenCarrito {
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 50px !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid #ffd8dd !important;
        border-radius: 15px !important;
        background: var(--pc-cart-soft-red) !important;
        color: var(--pc-cart-red) !important;
        font-size: 24px !important;
        box-shadow: none !important;
    }

    body #avisoMinimoDelivery {
        margin: 0 0 10px !important;
        padding: 10px 12px !important;
        border: 1px solid #ffd57c !important;
        border-radius: 12px !important;
        background: #fff8e4 !important;
        color: #7b5300 !important;
        font-size: 12px !important;
        font-weight: 750 !important;
        line-height: 1.35 !important;
    }

    body #finalizarPedido {
        width: 100% !important;
        min-height: 56px !important;
        border: 0 !important;
        border-radius: 17px !important;
        background: linear-gradient(135deg, var(--pc-cart-red), var(--pc-cart-red-dark)) !important;
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 950 !important;
        box-shadow: 0 11px 24px rgba(231,25,45,.22) !important;
    }

    body #finalizarPedido:active:not(:disabled) {
        transform: scale(.985) !important;
    }

    body #finalizarPedido:disabled {
        background: #e5e7eb !important;
        color: #949aa4 !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
}

@media (max-width: 390px) {
    body .cuerpoItemCarrito {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    body .itemCarrito .controlesCantidad {
        justify-self: start !important;
    }

    body .carritoVacio h3 {
        font-size: 25px !important;
    }
}