/* =========================================================
   PROMOCOMBO CLIENTE RC31.273 — FLUJO DE COMPRA UNIFICADO
   Capa exclusivamente visual/estructural de las dos etapas:
   1) Mi Pedido
   2) Confirmación / pago
   No modifica lógica de carrito, entrega, pagos ni envío.
========================================================= */

:root{
  --pc-flow-red:#e7192d;
  --pc-flow-red-dark:#c90d20;
  --pc-flow-ink:#202124;
  --pc-flow-muted:#747a84;
  --pc-flow-line:#e6e8ec;
  --pc-flow-bg:#f4f5f7;
  --pc-flow-card:#fff;
  --pc-flow-soft:#fff2f4;
  --pc-flow-radius:20px;
  --pc-flow-shadow:0 10px 28px rgba(23,28,38,.07);
}

/* La zona central del carrito contiene productos + bebidas.
   Evita que el banner cree una cuarta fila y desarme el panel. */
.cuerpoCarritoScroll{
  min-width:0;
  min-height:0;
  flex:1 1 auto;
  overflow-x:hidden;
  overflow-y:auto;
}

.pcFlujoPaso{
  display:block;
  margin:0 0 2px;
  color:var(--pc-flow-red);
  font-size:9px;
  font-weight:950;
  letter-spacing:1.35px;
}

.textoTituloCarrito>p{
  margin:3px 0 0!important;
  color:var(--pc-flow-muted)!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:650!important;
}

@media (max-width:900px){
  body #panelCarrito,
  body #panelDatos{
    background:var(--pc-flow-bg)!important;
    color:var(--pc-flow-ink)!important;
  }

  /* ---------- ETAPA 1: MI PEDIDO ---------- */
  body #panelCarrito{
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }

  body #panelCarrito .cabeceraCarrito{
    min-height:82px!important;
    padding:max(10px,env(safe-area-inset-top)) 14px 10px!important;
    border-bottom:1px solid var(--pc-flow-line)!important;
    box-shadow:0 7px 20px rgba(22,26,34,.055)!important;
  }

  body #panelCarrito .tituloCarrito{
    gap:10px!important;
  }

  body #panelCarrito #cerrarCarrito,
  body #panelCarrito .iconoTituloCarrito{
    width:46px!important;
    height:46px!important;
    flex-basis:46px!important;
    border-radius:15px!important;
  }

  body #panelCarrito .textoTituloCarrito h2{
    font-size:23px!important;
    line-height:1!important;
    letter-spacing:-.55px!important;
  }

  body #panelCarrito .cuerpoCarritoScroll{
    grid-row:2!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    background:
      radial-gradient(circle at 100% 0,rgba(231,25,45,.045),transparent 32%),
      var(--pc-flow-bg)!important;
    scrollbar-width:thin;
  }

  body #panelCarrito #contenidoCarrito{
    min-height:auto!important;
    padding:14px 14px 2px!important;
    overflow:visible!important;
    background:transparent!important;
  }

  /* Productos: misma tarjeta y jerarquía que el checkout. */
  body #panelCarrito .itemCarrito{
    margin:0 0 12px!important;
    border:1px solid var(--pc-flow-line)!important;
    border-radius:var(--pc-flow-radius)!important;
    background:var(--pc-flow-card)!important;
    box-shadow:var(--pc-flow-shadow)!important;
  }

  body #panelCarrito .cabeceraItemCarrito{
    padding:12px 13px 0!important;
  }

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

  body #panelCarrito .informacionItemCarrito h3{
    margin:0 0 7px!important;
    font-size:17px!important;
    line-height:1.18!important;
  }

  body #panelCarrito .detallePromoCarrito,
  body #panelCarrito .detalleConfiguracionCarrito{
    border-radius:12px!important;
  }

  body #panelCarrito .controlesCantidad{
    min-width:116px!important;
    max-width:116px!important;
    height:44px!important;
  }

  body #panelCarrito .subtotal{
    min-height:52px!important;
    padding:10px 13px!important;
  }

  /* Bebidas: bloque integrado al mismo scroll, nunca empuja el footer. */
  body #panelCarrito #pcBebidasPedidoBannerMount{
    margin:0 14px 14px!important;
    padding:0!important;
  }

  body #panelCarrito .pcBebBanner{
    padding:12px!important;
    overflow:hidden!important;
    border:1px solid var(--pc-flow-line)!important;
    border-radius:var(--pc-flow-radius)!important;
    background:#fff!important;
    box-shadow:var(--pc-flow-shadow)!important;
  }

  body #panelCarrito .pcBebBanner__header{
    margin:0 1px 10px!important;
  }

  body #panelCarrito .pcBebBanner__title>span{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
    font-size:20px!important;
  }

  body #panelCarrito .pcBebBanner__title strong{
    font-size:15px!important;
    line-height:1.1!important;
  }

  body #panelCarrito .pcBebBanner__title small,
  body #panelCarrito .pcBebBanner__count{
    font-size:10px!important;
  }

  body #panelCarrito .pcBebBanner__rail{
    width:100%!important;
    max-width:100%!important;
    gap:9px!important;
    padding:0 0 4px!important;
    scroll-padding-inline:0!important;
  }

  body #panelCarrito .pcBebBanner__card{
    flex:0 0 calc(100% - 22px)!important;
    width:calc(100% - 22px)!important;
    max-width:390px!important;
    min-width:0!important;
    grid-template-columns:76px minmax(0,1fr) 120px!important;
    gap:9px!important;
    padding:9px!important;
    box-sizing:border-box!important;
    border:1px solid #e7e9ed!important;
    border-radius:15px!important;
    background:#fafbfc!important;
  }

  body #panelCarrito .pcBebBanner__img{
    width:76px!important;
    height:76px!important;
    padding:4px!important;
    border-radius:13px!important;
  }

  body #panelCarrito .pcBebBanner__info strong{
    font-size:13px!important;
    line-height:1.15!important;
    white-space:normal!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
  }

  body #panelCarrito .pcBebBanner__info span{
    margin-top:2px!important;
    font-size:16px!important;
  }

  body #panelCarrito .pcBebBanner__info small{
    margin-top:1px!important;
    font-size:9px!important;
  }

  body #panelCarrito .pcBebBanner__qty{
    width:120px!important;
    min-width:120px!important;
    grid-template-columns:38px 44px 38px!important;
    border-radius:12px!important;
  }

  body #panelCarrito .pcBebBanner__qty button,
  body #panelCarrito .pcBebBanner__qty output{
    width:auto!important;
    min-width:0!important;
    height:46px!important;
  }

  body #panelCarrito .pcBebBanner__qty button{
    display:grid!important;
    place-items:center!important;
    color:var(--pc-flow-red)!important;
    font-size:24px!important;
    font-weight:950!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body #panelCarrito .pcBebBanner__qty button:disabled{
    color:#c8ccd2!important;
  }

  body #panelCarrito .pcBebBanner__qty output{
    font-size:15px!important;
  }

  /* Footer estable: entrega / total / CTA. */
  body #panelCarrito #footerCarrito{
    grid-row:3!important;
    position:relative!important;
    z-index:6!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
    border-top:1px solid var(--pc-flow-line)!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -9px 26px rgba(22,26,34,.08)!important;
    backdrop-filter:blur(16px)!important;
  }

  body #panelCarrito .selectorEntregaCarrito{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 9px!important;
    padding:10px!important;
    box-sizing:border-box!important;
    border:1px solid var(--pc-flow-line)!important;
    border-radius:17px!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  body #panelCarrito .selectorEntregaCarrito>div:first-child{
    margin:0 0 7px!important;
  }

  body #panelCarrito .selectorEntregaCarrito>div:first-child small{
    font-size:8px!important;
    letter-spacing:1.2px!important;
  }

  body #panelCarrito .selectorEntregaCarrito>div:first-child strong{
    font-size:14px!important;
    line-height:1.1!important;
  }

  body #panelCarrito .selectorEntregaCarrito__botones{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body #panelCarrito .selectorEntregaCarrito__botones button{
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    padding:8px 9px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 25px!important;
    gap:7px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    border-radius:14px!important;
  }

  body #panelCarrito .selectorEntregaCarrito__icono{
    width:34px!important;
    height:34px!important;
    font-size:18px!important;
  }

  body #panelCarrito .selectorEntregaCarrito__texto{
    min-width:0!important;
  }

  body #panelCarrito .selectorEntregaCarrito__texto strong{
    font-size:12px!important;
    line-height:1.05!important;
  }

  body #panelCarrito .selectorEntregaCarrito__texto small{
    overflow:hidden!important;
    font-size:8.5px!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body #panelCarrito .selectorEntregaCarrito__check{
    width:25px!important;
    height:25px!important;
    font-size:13px!important;
  }

  body #panelCarrito .resumenTotalCarrito{
    min-height:64px!important;
    margin:0 0 9px!important;
    padding:9px 12px!important;
    border-radius:16px!important;
  }

  body #panelCarrito #totalCarrito{
    font-size:28px!important;
  }

  body #panelCarrito .iconoResumenCarrito{
    width:43px!important;
    height:43px!important;
    flex-basis:43px!important;
    border-radius:13px!important;
    font-size:21px!important;
  }

  body #panelCarrito #finalizarPedido{
    min-height:54px!important;
    border-radius:16px!important;
    font-size:16px!important;
    letter-spacing:-.1px!important;
  }

  /* ---------- ETAPA 2: CONFIRMACIÓN / PAGO ---------- */
  body #panelDatos{
    width:100%!important;
    max-width:none!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  body #panelDatos .cabeceraDatos{
    min-height:82px!important;
    box-sizing:border-box!important;
    padding:max(10px,env(safe-area-inset-top)) 14px 10px!important;
    align-items:center!important;
    border-bottom:1px solid var(--pc-flow-line)!important;
    box-shadow:0 7px 20px rgba(22,26,34,.055)!important;
  }

  body #panelDatos .cabeceraDatosPaso{
    margin-bottom:2px!important;
    font-size:9px!important;
    letter-spacing:1.35px!important;
  }

  body #panelDatos .cabeceraDatos h2{
    font-size:23px!important;
    line-height:1!important;
    letter-spacing:-.55px!important;
  }

  body #panelDatos .cabeceraDatosMarca p{
    margin-top:4px!important;
    font-size:11px!important;
    line-height:1.2!important;
  }

  body #panelDatos #cerrarDatos{
    width:46px!important;
    height:46px!important;
    flex-basis:46px!important;
    border-radius:15px!important;
  }

  body #panelDatos .contenidoDatos{
    padding:14px 14px calc(16px + env(safe-area-inset-bottom))!important;
    background:
      radial-gradient(circle at 100% 0,rgba(231,25,45,.045),transparent 32%),
      var(--pc-flow-bg)!important;
  }

  body #panelDatos .resumenPedido,
  body #panelDatos .checkoutSeccion,
  body #panelDatos .grupoFormulario,
  body #panelDatos .footerDatosFijo{
    margin:0 0 12px!important;
    padding:14px!important;
    border:1px solid var(--pc-flow-line)!important;
    border-radius:var(--pc-flow-radius)!important;
    background:#fff!important;
    box-shadow:var(--pc-flow-shadow)!important;
  }

  body #panelDatos .resumenPedido{
    padding:12px 14px!important;
  }

  body #panelDatos #totalResumenPedido{
    color:var(--pc-flow-red)!important;
    font-size:25px!important;
  }

  body #panelDatos .checkoutSeccionCabecera{
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }

  body #panelDatos .checkoutSeccionNumero{
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
    background:var(--pc-flow-ink)!important;
  }

  body #panelDatos .checkoutSeccionCabecera h3,
  body #panelDatos .grupoFormulario h3{
    font-size:17px!important;
  }

  body #panelDatos input,
  body #panelDatos select,
  body #panelDatos textarea{
    border-radius:13px!important;
  }

  body #panelDatos .footerDatosFijo{
    position:relative!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
  }

  body #panelDatos #observaciones{
    min-height:74px!important;
    resize:vertical!important;
  }

  body #panelDatos #enviarPedido{
    min-height:58px!important;
    border-radius:16px!important;
    background:linear-gradient(135deg,var(--pc-flow-red),var(--pc-flow-red-dark))!important;
    box-shadow:0 11px 24px rgba(231,25,45,.2)!important;
  }
}

@media (max-width:420px){
  body #panelCarrito .pcBebBanner__card{
    flex-basis:calc(100% - 14px)!important;
    width:calc(100% - 14px)!important;
    grid-template-columns:68px minmax(0,1fr) 108px!important;
    gap:7px!important;
    padding:8px!important;
  }
  body #panelCarrito .pcBebBanner__img{
    width:68px!important;
    height:68px!important;
  }
  body #panelCarrito .pcBebBanner__qty{
    width:108px!important;
    min-width:108px!important;
    grid-template-columns:34px 40px 34px!important;
  }
  body #panelCarrito .selectorEntregaCarrito__botones button{
    grid-template-columns:30px minmax(0,1fr) 22px!important;
    padding:7px!important;
    gap:5px!important;
  }
  body #panelCarrito .selectorEntregaCarrito__icono{
    width:30px!important;
    height:30px!important;
    font-size:16px!important;
  }
  body #panelCarrito .selectorEntregaCarrito__check{
    width:22px!important;
    height:22px!important;
  }
}

/* Web: ambas etapas conservan el drawer existente, pero comparten tarjetas. */
@media (min-width:901px){
  body #panelCarrito .cuerpoCarritoScroll{
    min-height:0;
    overflow-y:auto;
  }
  body #panelCarrito #contenidoCarrito{
    overflow:visible!important;
  }
  body #panelCarrito #pcBebidasPedidoBannerMount{
    margin:0 18px 16px!important;
  }
  body #panelDatos .resumenPedido,
  body #panelDatos .checkoutSeccion,
  body #panelDatos .grupoFormulario,
  body #panelCarrito .itemCarrito,
  body #panelCarrito .pcBebBanner{
    border-color:var(--pc-flow-line)!important;
    box-shadow:var(--pc-flow-shadow)!important;
  }
}