.status-card[b-checkout] {
    background-color: #f0fff4;
    /* Verde pálido muy sutil */
    border-radius: 6px;
    /* Bordes muy redondeados */
    padding: 16px 20px;
    display: flex;
    align-items: center;
    /* 12px: el texto va pegado al logo, no repartido a lo ancho. */
    gap: 12px;
    /* Sin justify-content: los bloques se agrupan a la izquierda. */
    justify-content: flex-start;
    width: 100%;
    /* El contorno sutil se crea por contraste con el fondo, no un borde explícito. 
    Sin embargo, la imagen muestra un sutil contorno verde. Vamos a añadirlo sutilmente. */
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.date-block[b-checkout] {
    background-color: white;
    border-radius: 12px;
    /* Bordes redondeados más pequeños */
    padding: 8px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para elevación */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 50px;
    /* Ancho fijo para mantener forma */
}

.day-label[b-checkout] {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #15803d;
    /* Verde oscuro específico */
    line-height: 1.2;
    margin-bottom: 2px;
}

.day-number[b-checkout] {
    font-size: 28px;
    /* Número grande */
    font-weight: bold;
    color: #15803d;
    /* Verde oscuro específico */
    line-height: 1;
}

.text-block[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Logo BIG TURBO: mismo SVG y mismo tratamiento de color que
   .pdp-galeria-bigturbo en ProductoDetalleV2 (rojo de marca, "TURBO" en
   negro, sin chip ni fondo propio). Va al extremo derecho de la tarjeta. */
/* Al final de la fila, despues del texto. Se ordena con `order` en vez de
   mover el bloque SVG en el markup. */
.carrito-bigturbo[b-checkout] {
    width: 58px;
    order: 3;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El texto va junto a la fecha y empuja el logo al extremo derecho. */
.status-card .text-block[b-checkout] {
    order: 2;
    margin-right: auto;
    /* Cede ancho (y envuelve) antes que el calendario o "Cambiar". */
    min-width: 0;
}

.carrito-bigturbo svg[b-checkout] {
    width: 100%;
    height: auto;
    aspect-ratio: 468.07 / 236.77;
    display: block;
}

.carrito-bigturbo svg path[b-checkout],
.carrito-bigturbo svg rect[b-checkout] {
    fill: var(--ba-red, #c41230) !important;
}

.carrito-bigturbo svg .bt-turbo path[b-checkout] {
    fill: #000 !important;
}

.status-label[b-checkout] {
    font-size: 12px;
    text-transform: uppercase;
    color: #15803d;
    /* Verde oscuro específico */
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
}

.status-text[b-checkout] {
    font-size: 16px;
    font-weight: bold;
    color: #15803d;
    /* Verde oscuro específico */
}

/* Columnas explicitas (1fr / 400px) en vez de repeat(5,1fr): el resumen tiene
   un ancho natural (400px, el de la referencia) y el resto se lo queda la
   lista. 1280 en vez de 1440: con 1440 sobraba ancho y las dos columnas
   quedaban demasiado separadas entre si. */
.contenedor[b-checkout] {
    max-width: 1280px;
    margin: auto;
    padding: 0 var(--ba-space-4);
    display: grid;
    grid-gap: var(--ba-space-3);
    /* 480px: ancho de la columna de resumen en la referencia (4a-4c). La fila
       "pasos" es el stepper propio, a todo el ancho arriba de las dos columnas. */
    grid-template-columns: minmax(0, 1fr) 480px;
    grid-template-areas: "pasos pasos"
        "step resumen";
    column-gap: var(--ba-space-6);
    align-items: start;
}

/* El padding por defecto de RadzenCard (1rem por lado) se come ~32px de ancho
   util. Se aprieta a 12px: sigue habiendo aire suficiente y el contenido gana
   la diferencia, que en un telefono de 360px es casi un 10% del ancho. */
.contenedor .step[b-checkout]  .rz-card {
    padding: var(--ba-space-3);
}

.tarjetaProducto[b-checkout] {
    display: grid !important;
    /* La columna de controles se dimensiona por su contenido (auto), no con
       minmax(240px,1fr): asi precio+cantidad+Eliminar caben en una linea y el
       espacio sobrante se lo queda el titulo.
       La imagen sube a 88px: 70 era pequena para reconocer la refaccion y en
       escritorio sobra ancho de la columna del titulo. */
    /* Cuatro columnas, cada una del ancho que necesita y el sobrante para el
       nombre. Antes las de precio/controles iban en "auto" dentro de un solo
       .btnsProducto: ese bloque se quedaba con su ancho de contenido y el
       resto se acumulaba como un hueco muerto en medio de la tarjeta.
       Ahora el 1fr del nombre absorbe ese sobrante y los tres bloques de la
       derecha quedan juntos, agrupados por proximidad. */
    grid-template-columns: 88px minmax(0, 1fr) auto auto auto;
    grid-template-areas: "imgProducto tituloProducto precio btnsProducto eliminar";
    /* space-6 y no space-5: la escala del sistema no tiene 5 (4/8/12/16/24/32). */
    gap: 0 var(--ba-space-6);
    align-items: center;
}

/* Eliminar vuelve a columna propia: bajo el selector quedaba en una segunda
   fila que estiraba la tarjeta a lo alto sin usar el ancho que sobraba. */
.tarjetaProducto .carrito-eliminar[b-checkout] {
    grid-area: eliminar;
    justify-self: end;
    padding-right: 0;
}

/* El precio sale de .btnsProducto y toma columna propia, para poder alinearse
   a la derecha contra el selector sin depender del ancho de aquel bloque. */
.tarjetaProducto .carrito-precio[b-checkout] {
    grid-area: precio;
}

.tarjetaProducto .imgProducto[b-checkout] {
    max-width: 88px;
}

/* La imagen llena la columna que le da la rejilla, sea 88 en escritorio o 64
   en movil: el ancho lo decide el grid, no un atributo del componente. */
.carrito-img[b-checkout] {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    cursor: pointer;
}

/* ---- Panel unificado de entrega ----
   Antes eran dos tarjetas apiladas: una con el conmutador y otra con los
   datos, encabezada por "Sucursal" / "Domicilio". Esa leyenda repetia lo que
   el segmento ya marca, y en movil las dos tarjetas se comian una pantalla
   entera antes de llegar al total. Ahora el conmutador es el encabezado de la
   misma tarjeta y los datos van pegados debajo. */
.entrega-panel[b-checkout] {
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-lg);
    background: var(--ba-surface);
    box-shadow: var(--ba-shadow-sm);
    overflow: hidden;
}

/* Estado sin resolver: la franja lateral avisa que falta elegir. Antes iba
   como border-left en el MudPaper; aqui va como pseudo-elemento para no pelear
   con el overflow:hidden que redondea las esquinas del conmutador. */
.entrega-panel--pendiente[b-checkout] {
    border-color: var(--ba-warning-text);
    box-shadow: inset 4px 0 0 0 var(--ba-warning-text);
}

/* Conmutador: dos mitades iguales. La pastilla activa es una superficie
   elevada sobre el riel gris, el patron de segmented control de iOS/Material:
   se lee cual esta activa sin depender solo del color del texto. */
.entrega-tabs[b-checkout] {
    display: flex;
    gap: var(--ba-space-1);
    padding: var(--ba-space-1);
    background: var(--ba-surface-alt);
    border-bottom: 1px solid var(--ba-border);
}

.entrega-tab[b-checkout] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    padding: var(--ba-space-2) var(--ba-space-2);
    border: 0;
    border-radius: var(--ba-radius-md);
    background: transparent;
    color: var(--ba-text-muted);
    font-family: inherit;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    /* 44px: objetivo tactil minimo (MASTER §4). Con icono + texto en fila el
       alto natural se queda corto en movil. */
    min-height: 44px;
    transition: background-color var(--ba-duration-fast) var(--ba-easing),
                color var(--ba-duration-fast) var(--ba-easing);
}

.entrega-tab i[b-checkout] {
    font-size: 1rem;
    flex: 0 0 auto;
}

/* El texto cede antes que el icono cuando la columna se estrecha. */
.entrega-tab span[b-checkout] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entrega-tab:hover:not(.entrega-tab--activa):not(:disabled)[b-checkout] {
    color: var(--ba-text);
    background: rgba(0, 0, 0, .04);
}

.entrega-tab--activa[b-checkout] {
    background: var(--ba-surface);
    color: var(--ba-primary);
    font-weight: 700;
    box-shadow: var(--ba-shadow-sm);
}

.entrega-tab:disabled[b-checkout] {
    opacity: .6;
    cursor: default;
}

/* Cuerpo: los datos ya no llevan titulo propio, el segmento activo lo dice. */
.entrega-cuerpo[b-checkout] {
    padding: var(--padding-resumen);
}

/* Fila de accion: "cambiar" queda al ras del contenido, no como cabecera. */
.entrega-cambiar[b-checkout] {
    margin-top: var(--ba-space-3);
    border: 0;
    background: transparent;
    padding: var(--ba-space-1) 0;
    color: var(--ba-primary);
    font-family: inherit;
    font-size: var(--ba-text-sm);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entrega-cambiar:disabled[b-checkout] {
    opacity: .6;
    cursor: default;
}

/* Estado vacio: mensaje centrado, sin el h6 que competia con el conmutador. */
.entrega-vacio[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    color: var(--ba-text-muted);
    font-size: var(--ba-text-base);
    font-weight: 500;
    line-height: 1.4;
    text-align: start;
}

/* En movil el panel no tiene columna propia: se aprieta el cuerpo y el
   conmutador para no gastar alto antes del total. */
@media screen and (max-width: 950px) {
    .entrega-cuerpo[b-checkout] {
        padding: var(--ba-space-3);
    }

    .entrega-tab[b-checkout] {
        font-size: var(--ba-text-sm);
        padding: var(--ba-space-2) var(--ba-space-1);
    }
}

/* Muy angosto (<=360px): el texto de las dos opciones no cabe en una fila con
   el icono al lado. Se apila, que es preferible a truncar "Recoger en suc…". */
@media screen and (max-width: 360px) {
    .entrega-tab[b-checkout] {
        flex-direction: column;
        gap: 2px;
        font-size: var(--ba-text-xs);
    }
}

/* ---- Direccion de entrega / sucursal ----
   Dos niveles en vez de un bloque plano: la primera linea identifica el lugar
   (sucursal o calle+numero) y el resto queda de apoyo. Sin esto las tres
   lineas pesaban igual y el bloque se leia como un parrafo denso. */
.entrega-titulo[b-checkout] {
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-text);
    line-height: 1.4;
}

.entrega-detalle[b-checkout] {
    margin-top: 2px;
    font-size: var(--ba-text-sm);
    font-weight: 400;
    color: var(--ba-text-muted);
    line-height: 1.5;
}

/* Chips de contacto: son dato de apoyo, no accion. En gris neutro compiten
   menos con la direccion que el azul saturado anterior (#eef1fb / #26326b). */
.entrega-chip[b-checkout] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-1);
    padding: var(--ba-space-1) var(--ba-space-3);
    border-radius: 999px;
    background-color: var(--ba-surface-alt);
    color: var(--ba-text);
    font-size: var(--ba-text-sm);
    font-weight: 500;
}

[b-checkout] .entrega-chip .mud-icon-root {
    color: var(--ba-text-muted);
}

/* ---- Chips de marca y clave ----
   Marca y SKU dejaron de ser un renglon suelto bajo el titulo y comparten fila
   con la disponibilidad: son del mismo rango (identifican la pieza, no la
   venden) y asi la tarjeta baja un renglon completo de alto.
   Fondo plano en vez de borde: a esta escala un contorno por chip mete mucha
   linea junto a los iconos de stock que van al lado. */
.carrito-meta-chip[b-checkout] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 2px var(--ba-space-2);
    border-radius: var(--ba-radius-sm);
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* La clave es un identificador para buscar/dictar: en monoespaciada los
   caracteres ambiguos (0/O, 1/l) se distinguen. */
.carrito-meta-chip--sku[b-checkout] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .01em;
}

/* Disponibilidad: mismo tamano que los chips para que la fila se lea a un
   solo nivel. Traia font-size:clamp(.5rem,2vw,.8rem), que en escritorio da
   ~0.8rem — mas grande que los chips — y empujaba "en linea" a un segundo
   renglon; ademas el text-align:end y el text-wrap:pretty eran restos de
   cuando estos datos iban apilados a la derecha. */
.carrito-stock-dato[b-checkout] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-1);
    flex: 0 0 auto;
    margin: 0 !important;
    color: var(--ba-text);
    font-size: var(--ba-text-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* Los iconos venian con Width=10 Height=15 (mas altos que anchos, deformados)
   y un margin-right suelto que ahora aporta el gap del contenedor. */
[b-checkout] .carrito-stock-dato img {
    width: 14px;
    height: 14px;
    margin-right: 0 !important;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Aviso de stock: separado del contenido de arriba y con el texto holgado.
   Pegado al borde de la tarjeta se leia como parte del bloque de precio. */
[b-checkout] .rz-card > .rz-badge {
    display: block;
    margin-top: var(--ba-space-3);
    padding: var(--ba-space-2) var(--ba-space-3);
    border-radius: var(--ba-radius-md);
    font-size: var(--ba-text-xs);
    line-height: 1.4;
    white-space: normal;
}

.tarjetaProducto .imgProducto[b-checkout] {
    grid-area: imgProducto;
}

.tarjetaProducto .tituloProducto[b-checkout] {
    grid-area: tituloProducto;
    /* min-width:0 para que la columna 1fr pueda encogerse por debajo del ancho
       de su contenido; sin esto el minimo automatico de un item de grid es su
       contenido y la columna se queda con el ancho del titulo, dejando la fila
       de metadatos mas estrecha de lo que parece. */
    min-width: 0;
}



/* Precio, cantidad y Eliminar en UNA sola linea a la derecha, como la
   referencia. Sin flex-wrap: al envolverse, Eliminar caia a un segundo
   renglon y la fila se veia deforme. */
.tarjetaProducto .btnsProducto[b-checkout] {
    grid-area: btnsProducto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--ba-space-3);
}

/* Precio vigente y tachado en LINEA, no apilados: apilados el tachado quedaba
   justo encima del precio real, que es el numero que se busca, y la tarjeta
   ganaba una linea de alto sin necesidad.
   El vigente va primero (order) y el tachado despues, de apoyo: el ojo no
   debe arrancar por el precio que ya no aplica. */
.tarjetaProducto .carrito-precio[b-checkout] {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    gap: var(--ba-space-2) !important;
    flex: 0 0 auto;
    line-height: 1.2;
    /* Cifras de ancho fijo: sin esto los precios de distintas filas no alinean
       entre si y la columna se ve temblorosa. */
    font-variant-numeric: tabular-nums;
}

.tarjetaProducto .carrito-precio > p[b-checkout] {
    order: 2;
}

.tarjetaPago[b-checkout] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "logoPago tituloPago checked";
    grid-template-rows: 1fr;
    gap: 1rem;
}

.tarjetaPago .logoPago[b-checkout] {
    grid-area: logoPago;
}

.tarjetaPago .tituloPago[b-checkout] {
    grid-area: tituloPago;
    display: flex;
    gap: 5px;
    align-items: baseline;
}

.tarjetaPago .checked[b-checkout] {
    grid-area: checked;
}

/* La columna izquierda arranca despues de la barra del stepper, que ocupa su
   propia altura dentro de .step. Esta columna se baja lo mismo para que la
   primera tarjeta de cada lado quede al mismo nivel.
   Se usa la variable para no repartir el numero por el archivo: si cambia el
   alto del stepper, se ajusta en un solo lugar.
   El gap uniforme entre paneles se define aqui y no en cada MudPaper, para
   que no queden separaciones distintas entre uno y otro. */
.contenedor[b-checkout] {
    --alto-stepper: 62px;
}

.contenedor .resumen[b-checkout] {
    grid-area: resumen;
    /* La columna ya mide 400px: el 80% anterior lo encogia de mas. */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
    /* Sin --alto-stepper: el stepper ya no vive dentro de la columna izquierda
       (es la fila "pasos" de la rejilla), asi que las dos columnas arrancan
       a la misma altura. */
    padding-top: 0;
    /* `stretch` contra el `align-items: start` de la grilla: la columna se estira
       a lo alto de la fila, que es lo que marca la lista de productos.
       Sin esto la columna media justo lo que miden sus tres paneles
       (estado + entrega + resumen) y la tarjeta del resumen no tenia recorrido:
       un `position: sticky` solo se mueve dentro de su bloque contenedor, asi
       que con la columna corta se iba de pantalla en cuanto empezaba el scroll.
       Estirada, la tarjeta se queda pegada bajo el AppBar mientras se recorre
       la lista. Los paneles NO se reparten el sobrante (no llevan flex-grow), de
       modo que en reposo el acomodo es el mismo de siempre.
       Lo que se fija es la tarjeta, no la columna entera: la columna completa
       mide cerca del alto de la pantalla y, pegada, su parte baja (total y boton
       de pago) quedaria cortada sin forma de alcanzarla. */
    align-self: stretch;
}

/* El gap del contenedor ya separa los paneles: los margenes propios de cada
   MudPaper se anulan para que no se sumen de forma despareja. */
.contenedor .resumen > *[b-checkout] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Tope de alto de la tarjeta que se pega, con scroll propio. La columna ya no
   se pega entera (eso cortaba el total y el boton de pago), pero la tarjeta
   tampoco da para siempre: al abrir el panel de cupones crece y puede pasar la
   ventana. Con el tope, lo que sobra se recorre DENTRO de la tarjeta en vez de
   quedar fuera de la pantalla, que es el fallo clasico de un sticky alto.
   Solo aparece la barra de scroll cuando de verdad hace falta.
   98px = los 74px del `top` de la tarjeta (alto del AppBar + aire) + 24px de
   aire. El `dvh` corrige en movil, donde la barra del navegador encoge el
   viewport; el `vh` va primero como respaldo, no como reemplazo. */
.contenedor .resumen > .cuponesDesk[b-checkout] {
    max-height: calc(100vh - 98px);
    max-height: calc(100dvh - 98px);
    overflow-y: auto;
}

.contenedor .step[b-checkout] {
    grid-area: step;
    width: 100%;
    min-width: 0;
}

/* Lista de productos. Un div propio en vez del RadzenDataList que habia: sus
   cuatro capas anidadas se dimensionaban por contenido y dejaban un hueco a la
   derecha que habia que perseguir capa por capa con ::deep. */
.carrito-lista[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
    width: 100%;
    min-width: 0;
}

/* --------------------------- Tamaño menos 960px --------------------------- */
@media screen and (max-width: 950px) {
    /* OJO con el margen superior: .mainContenido ya reserva 7rem en movil
       (MainLayout.razor) para los dos <nav position:fixed>, asi que aqui SOLO
       va la diferencia que falta, nunca el alto completo -- se suman.
       Los 7rem (112px) se quedan cortos porque el segundo nav creció con la
       fila de sucursal (~36px): 45 + 50 + 36 = 131px. Estos 20px cubren el
       faltante y dejan un respiro sobre el stepper.
       Si algun dia se ajusta ese 7rem del layout, este valor sobra. */
    .contenedor[b-checkout] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "pasos"
            "fecha"
            "step";
        margin-top: 20px;
        /* Hueco para la barra fija de abajo (.carrito-barra-movil): sin el, el
           final del resumen quedaria tapado. */
        padding-bottom: 112px;
    }

    /* Apiladas: la columna va debajo, no al lado, asi que no hay stepper que
       compensar y el padding dejaria un hueco. */
    .contenedor .resumen[b-checkout] {
        grid-area: resumen;
        /* 100% del contenedor, que ya aporta su propio padding lateral. */
        width: 100%;
        margin-top: 0;
        padding-top: 0;
    }

    /* Tampoco tope de alto aqui: la tarjeta no se pega (el `position: static`
       lo pone el <style> de la pagina) y va dentro del flujo, al final de la
       columna, asi que se lee completa sin scroll propio. */
    .contenedor .resumen > .cuponesDesk[b-checkout] {
        max-height: none;
        overflow-y: visible;
    }

    /* Separacion entre la lista y el resumen, que en movil va debajo. */
    .contenedor .step[b-checkout] {
        padding-bottom: var(--ba-space-4);
    }

    .contenedor .step[b-checkout] {
        grid-area: step;
        width: 100%;
    }

}

@media screen and (max-width: 650px) {
    /* Movil: imagen y titulo arriba, precio y controles debajo.
       Antes eran 3 columnas iguales (1fr cada una): la imagen de 52px se
       quedaba con un tercio del ancho y el titulo y los controles se
       apretaban hasta deformarse.
       La imagen sube a 64px: a 52 la refaccion no se distingue, y es el unico
       elemento que permite reconocer la pieza de un vistazo. */
    .tarjetaProducto[b-checkout] {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr);
        /* Se reinician las filas del escritorio (auto auto para la celda de
           Eliminar): aqui el boton comparte celda con el titulo. */
        grid-template-rows: auto auto;
        grid-template-areas:
            "imgProducto tituloProducto"
            "precio btnsProducto";
        gap: var(--ba-space-2) var(--ba-space-3);
        align-items: start;
    }

    .tarjetaProducto .imgProducto[b-checkout] {
        max-width: 64px;
    }

    /* Precio y selector COMPARTEN renglon, cada uno en su columna: antes el
       precio gastaba una linea entera para si solo y los controles otra, con
       la columna de la imagen vacia en ambas.
       El precio va a la izquierda porque es el dato que se lee; el selector a
       la derecha, del lado del pulgar. */
    .tarjetaProducto .btnsProducto[b-checkout] {
        grid-area: btnsProducto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: var(--ba-space-3);
    }

    /* El precio se alinea a la IZQUIERDA en movil (a la derecha en escritorio,
       donde va pegado al selector).
       Sin wrap: con importes largos (acumuladores, $2,801.59 + $2,936.59) la
       columna se queda corta y el tachado caia bajo el precio vigente, que es
       justo lo que se evito al ponerlos en linea. Prefiere encogerse el
       tachado, que es el dato de apoyo. */
    .tarjetaProducto .carrito-precio[b-checkout] {
        grid-area: precio;
        justify-content: flex-start !important;
        align-self: center;
        flex-wrap: nowrap !important;
        min-width: 0;
    }

    /* El tachado cede tamano antes que romper la linea. Con importes de 4
       cifras + el vigente al lado, la columna de movil queda justa: bajarlo un
       escalon evita que empuje al vigente fuera de la celda. */
    .tarjetaProducto .carrito-precio > p[b-checkout] {
        min-width: 0;
        white-space: nowrap;
        font-size: var(--ba-text-xs) !important;
    }

    /* Y el vigente tampoco crece de mas en pantallas angostas. */
    .tarjetaProducto .carrito-precio[b-checkout]  .rz-text-body1,
    .tarjetaProducto .carrito-precio > *[b-checkout] {
        white-space: nowrap;
    }

    /* Eliminar sube a la esquina del titulo, como icono: ahi aprovecha el
       hueco que deja el titulo y libera el renglon completo que ocupaba.
       El texto sigue en el DOM (solo se oculta visualmente) para que el
       lector de pantalla lo lea; el aria-label ya lo respalda. */
    .tarjetaProducto .carrito-eliminar[b-checkout] {
        grid-area: tituloProducto;
        justify-self: end;
        align-self: start;
        /* 44x44 de area tactil aunque el icono mida 16. */
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0;
        gap: 0;
        /* Fuera del flujo de la celda para no empujar el titulo: la celda ya
           la comparte con el, y el titulo debe poder ocupar todo el ancho. */
        margin-top: calc(var(--ba-space-2) * -1);
        margin-right: calc(var(--ba-space-2) * -1);
    }

    .carrito-eliminar__texto[b-checkout] {
        /* Oculto a la vista, presente para lectores de pantalla. */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .tarjetaProducto .carrito-eliminar i[b-checkout] {
        font-size: 1.05rem;
    }

    /* El titulo cede espacio al icono para que el texto largo no pase por
       debajo de el. */
    .tarjetaProducto .tituloProducto[b-checkout] {
        padding-right: var(--ba-space-6);
    }

    /* Vaciar carrito a todo el ancho: suelto a la izquierda quedaba flotando
       sin relacion visible con la lista que borra. */
    .carrito-vaciar[b-checkout] {
        width: 100%;
    }

    .tarjetaPago[b-checkout] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "logoPago checked"
            "tituloPago tituloPago";
    }

    .tarjetaPago .checked[b-checkout] {
        display: flex;
        align-items: center;
        justify-content: end;
    }
}

/* ---- Desglose del casco (acumuladores, linea 21) ----
   Era una <table width:100%> con <td> en display:flex. Una tabla no cede ancho
   por debajo de su contenido dentro de un grid (no le aplica min-width:0), asi
   que se desbordaba de la columna del nombre y su importe caia justo encima
   del precio principal de la tarjeta.
   Con filas flex el texto si se encoge y el importe queda a la derecha. */
.carrito-casco[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
    margin-top: var(--ba-space-1);
    padding-top: var(--ba-space-1);
    border-top: 1px solid var(--ba-border);
}

.carrito-casco__fila[b-checkout] {
    display: flex;
    align-items: baseline;
    gap: var(--ba-space-1);
    min-width: 0;
}

.carrito-casco__icono[b-checkout] {
    flex: 0 0 auto;
    color: var(--ba-text-muted);
    font-size: var(--ba-text-xs);
}

/* La etiqueta es la que cede: min-width:0 para poder encogerse por debajo de
   su contenido, que es justo lo que la tabla no hacia. */
.carrito-casco__etiqueta[b-checkout] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ba-text-muted);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    line-height: 1.4;
}

/* El importe nunca se parte ni cede: es el dato que se compara. */
.carrito-casco__importe[b-checkout] {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--ba-text);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Fila 1: identidad de la pieza (marca y clave). */
.carrito-chips-fila[b-checkout] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ba-space-2);
    align-items: center;
    justify-content: flex-start;
    margin-top: var(--ba-space-1);
}

/* Fila 2: disponibilidad. Renglon propio, separado de los chips: juntos, en
   cuanto una de las cuatro piezas envolvia el renglon quedaba desalineado.
   Los dos stocks van SIEMPRE en la misma linea (sin wrap) porque se leen como
   un par comparativo -- tienda contra linea. */
.stock-stack[b-checkout] {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: var(--ba-space-4);
    align-items: center;
    justify-content: flex-start;
    margin-top: var(--ba-space-1);
}

/* En pantallas pequeñas (mobile) se vuelve vertical */
@media (max-width: 768px) {
    .stock-stack[b-checkout] {
        flex-direction: row !important;
        text-align: center;
        gap: 1rem;
    }
    /* Alineado a la izquierda como la referencia. El min-width:50vw anterior
       desbordaba la tarjeta en pantallas angostas. */
    .tituloProducto[b-checkout] {
        text-align: start;
        min-width: 0;
    }
    /* OJO: este bloque va DESPUES del media de 650px en el archivo, asi que
       cualquier max-width que se declare aqui gana por orden de cascada.
       El ancho de la imagen en movil se define en el media de 650px y aqui NO
       se vuelve a tocar: la regla de 52px que habia deshacia el 64px de alla
       sin que se notara de donde venia. */
}

/* ---- Selector de cantidad ----
   Mismo patron que ProductoDetalleV2 (.pdp-cantidad-*): control unico con
   borde compartido, cantidad editable a mano y botones de 36px. Aqui son
   36 y no 44 porque el carrito lista varias filas y 44 las alarga de mas. */
.carrito-cantidad[b-checkout] {
    display: inline-flex;
    align-items: stretch;
    /* flex:none — como hijo de un contenedor flex se estiraba a todo el ancho
       disponible y el control se deformaba. */
    flex: 0 0 auto;
    width: max-content;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    overflow: hidden;
    background: var(--ba-surface);
}

.carrito-cantidad__btn[b-checkout] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--ba-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ba-duration-fast) var(--ba-easing), color var(--ba-duration-fast) var(--ba-easing);
}

.carrito-cantidad__btn:hover:not(:disabled)[b-checkout] {
    background: #F2F4F7;
    color: var(--ba-text);
}

.carrito-cantidad__btn:active:not(:disabled)[b-checkout] {
    background: #E7EAEE;
}

.carrito-cantidad__btn:focus-visible[b-checkout] {
    outline: 2px solid var(--ba-primary);
    outline-offset: -2px;
}

.carrito-cantidad__btn:disabled[b-checkout] {
    color: #C7CBD1;
    cursor: not-allowed;
}

.carrito-cantidad__valor[b-checkout] {
    width: 44px;
    height: 36px;
    flex-shrink: 0;
    text-align: center;
    border: none;
    border-left: 1px solid var(--ba-border);
    border-right: 1px solid var(--ba-border);
    background: transparent;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-text);
    -moz-appearance: textfield;
}

.carrito-cantidad__valor:focus-visible[b-checkout] {
    outline: 2px solid var(--ba-primary);
    outline-offset: -2px;
}

.carrito-cantidad__valor[b-checkout]::-webkit-outer-spin-button,
.carrito-cantidad__valor[b-checkout]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- Input de cupon ----
   Borde neutro (no azul) y misma altura que el boton Aplicar, para que la
   fila se lea como un solo control y no como dos piezas sueltas. */
.carrito-cupon-input[b-checkout] {
    flex: 1;
    min-width: 0;
    /* 48px y borde de control (4.54:1): campo del flujo de compra, MASTER §8.3. */
    height: 48px;
    padding: 0 var(--ba-space-3);
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
    background: var(--ba-surface);
    color: var(--ba-text);
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-sm);
    transition: border-color var(--ba-duration-fast) var(--ba-easing);
}

.carrito-cupon-input[b-checkout]::placeholder {
    color: var(--ba-text-muted);
}

.carrito-cupon-input:focus[b-checkout] {
    outline: none;
    border-color: var(--ba-primary);
    box-shadow: 0 0 0 3px rgba(27, 64, 142, .15);
}

/* ---- Boton primario del carrito ----
   El MudTheme global usa #213B78; la marca y el diseno de referencia usan
   #1B408E (--ba-primary). Se fuerza aqui, acotado al carrito, en vez de
   tocar el tema global (que afectaria todas las paginas del sitio). */
/* ::deep es obligatorio: MudButton renderiza su propio <button> hijo, y sin
   esto el atributo de scope (b-xxxx) solo marca elementos de este .razor, por
   lo que la regla nunca casaba y el boton se quedaba con el azul del tema. */
[b-checkout] .ba-btn-primario {
    background-color: var(--ba-primary) !important;
    color: #fff !important;
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

[b-checkout] .ba-btn-primario:hover:not(:disabled) {
    background-color: var(--ba-primary-hover) !important;
}

/* ---- Boton eliminar ---- */
.carrito-eliminar[b-checkout] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    gap: var(--ba-space-2);
    padding: var(--ba-space-2) var(--ba-space-3);
    border: none;
    background: transparent;
    /* Rojo funcional, no el de marca: el rojo de marca (#E50E20) se confunde con
       una promocion (MASTER §7.2, nivel 4 · Destructivo). */
    color: var(--ba-red-800);
    font-size: var(--ba-text-base);
    font-weight: 600;
    font-family: var(--ba-font-base);
    cursor: pointer;
    transition: color var(--ba-duration-fast) var(--ba-easing);
}

/* No hay un rojo mas oscuro en la escala: el hover se marca con subrayado. */
.carrito-eliminar:hover:not(:disabled)[b-checkout] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.carrito-eliminar:disabled[b-checkout] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ---- Boton vaciar carrito ----
   Es una accion destructiva de toda la lista: va contorneada (no rellena) para
   quedar por debajo de la CTA de compra, y con el texto completo porque
   "vaciar" sin objeto no dice que se borra.
   Antes traia el mismo .carrito-eliminar de cada linea mas un style inline
   duplicando borde y padding. */
.carrito-vaciar[b-checkout] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    /* 48px: alto de boton del flujo de compra (MASTER §7.3). */
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--ba-red-800);
    border-radius: var(--ba-radius-sm);
    background: var(--ba-surface);
    color: var(--ba-red-800);
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.carrito-vaciar:hover[b-checkout] {
    background: var(--ba-red-50);
}

/* La fila alinea el boton con el borde de las tarjetas de producto, en vez de
   meterle 1rem de padding propio que lo desfasaba. */
.carrito-vaciar-fila[b-checkout] {
    display: flex;
    justify-content: flex-start;
    padding-top: var(--ba-space-2);
}

/* -------------------------------------------------------------------------- */
/*                    Eliminacion de una fila del carrito                     */
/* -------------------------------------------------------------------------- */

/* Antes, borrar un producto ponia loading=true, y eso sustituia toda la pagina por
   OverlayLoadV2: el carrito se destruia, el scroll saltaba al inicio y la accion se
   sentia como una recarga. Ahora la fila sale sola y el resto no se mueve. */
.carrito-fila[b-checkout] {
    transition: opacity var(--ba-duration-fast) var(--ba-easing);
}

/* La fila que se va: se desvanece en el sitio, sin colapsar la altura, para que las
   tarjetas de abajo no den un brinco mientras dura la transicion. */
.carrito-fila--saliendo[b-checkout] {
    opacity: 0;
    /* Evita un segundo clic sobre una fila que ya se esta yendo. */
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .carrito-fila[b-checkout] {
        transition: none;
    }
}

/* ==========================================================================
   Estado vacio del carrito.

   Replica el prototipo "Carrito de compra -- BIG AUTO". Antes era un MudPaper
   centrado con un boton rojo a /tendencias.

   VA AQUI y no en el <style> del .razor porque .btn, .btn-primary y
   .breadcrumb son nombres genericos que ya declara Bootstrap y site.css, y
   App.razor los carga DESPUES de este bundle: con el atributo de aislamiento
   el selector queda .btn[b-xxx] (0,2,0) y le gana a .btn de ellos (0,1,0) por
   especificidad, no por orden. En el <style> del .razor (que no se aislaria)
   habrian perdido.

   ORDEN IMPORTANTE: .od-row va antes que .empty-actions; los dos escriben
   align-items y aqui gana el que este mas abajo.
   ========================================================================== */

/* --------------------- primitivas de layout del prototipo ---------------- */
.od-stack[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--od-gap, 8px);
}

.od-row[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--od-gap, 8px);
}

/* ------------------------------- pagina ---------------------------------- */
.carrito-vacio-pagina[b-checkout] {
    max-width: 1920px;
    margin-inline: auto;
    padding: var(--ba-space-6) var(--ba-space-4) var(--ba-space-8);
}

@media (min-width: 1024px) {
    .carrito-vacio-pagina[b-checkout] {
        padding: var(--ba-space-8) var(--ba-space-12) var(--ba-space-12);
    }
}

/* Columna de lectura: el estado vacio es texto, no una rejilla de productos.
   40rem es la medida del prototipo. */
.page-col[b-checkout] {
    max-width: 40rem;
    margin-inline: auto;
}

/* -------------------------------- migas ---------------------------------- */
.breadcrumb[b-checkout] {
    /* display:block no esta en el prototipo: Bootstrap pone display:flex en
       cualquier .breadcrumb y el <nav> dejaria de comportarse como bloque. */
    display: block;
    margin-bottom: var(--ba-space-4);
    font-size: var(--ba-text-sm);
}

.breadcrumb ol[b-checkout] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ba-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ba-text-muted);
}

.breadcrumb a[b-checkout] {
    color: var(--ba-text-muted);
    text-decoration: none;
    transition: color var(--ba-duration-fast) var(--ba-easing);
}

.breadcrumb a:hover[b-checkout],
.breadcrumb a:focus-visible[b-checkout] {
    color: var(--ba-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumb .sep[b-checkout] {
    color: var(--ba-text-muted);
}

.breadcrumb [aria-current="page"][b-checkout] {
    color: var(--ba-text);
    font-weight: 600;
}

/* ------------------------------- titulo ---------------------------------- */
.page-title[b-checkout] {
    margin: 0 0 var(--ba-space-8);
    font-size: var(--ba-text-h1);
    font-weight: 700;
    line-height: 1.15;
}

/* ---------------------------- estado vacio -------------------------------- */
.empty-state[b-checkout] {
    --od-gap: var(--ba-space-4);
    padding-block: 0 var(--ba-space-8);
}

@media (min-width: 1024px) {
    .empty-state[b-checkout] {
        padding-block: 0 var(--ba-space-12);
    }
}

.empty-icon[b-checkout] {
    display: grid;
    place-items: center;
    width: var(--ba-space-20);
    height: var(--ba-space-20);
    margin-bottom: var(--ba-space-2);
    background: var(--ba-blue-50);
    border-radius: var(--ba-radius-full);
    color: var(--ba-primary);
}

.empty-title[b-checkout] {
    margin: 0;
    font-size: var(--ba-text-h2);
    font-weight: 600;
    line-height: 1.2;
}

.empty-support[b-checkout] {
    margin: 0;
    max-width: 60ch;
    color: var(--ba-text-muted);
    font-size: var(--ba-text-base);
    line-height: 1.5;
}

.empty-actions[b-checkout] {
    --od-gap: var(--ba-space-2);
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--ba-space-2);
}

@media (min-width: 641px) {
    .empty-actions[b-checkout] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

.empty-aside[b-checkout] {
    margin: var(--ba-space-2) 0 0;
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.empty-aside a[b-checkout] {
    color: var(--ba-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------ botones ---------------------------------- */
.btn[b-checkout] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-space-2);
    min-height: 48px;
    /* shorthand a proposito: el `padding` de bloque que Bootstrap declara en su
       propio .btn seguia aplicando si solo se declaraba padding-inline. */
    padding: 0 var(--ba-space-6);
    border: 1px solid transparent;
    border-radius: var(--ba-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--ba-duration-fast) var(--ba-easing),
        border-color var(--ba-duration-fast) var(--ba-easing),
        color var(--ba-duration-fast) var(--ba-easing);
}

.btn-primary[b-checkout] {
    background: var(--ba-primary);
    color: #ffffff;
}

.btn-primary:hover[b-checkout] {
    background: var(--ba-primary-hover);
    color: #ffffff;
}

.btn-primary:active[b-checkout] {
    background: var(--ba-primary-dark);
    color: #ffffff;
    transition: none;
}

.btn-outline[b-checkout] {
    background: var(--ba-surface);
    color: var(--ba-primary);
    border-color: var(--ba-primary);
}

.btn-outline:hover[b-checkout] {
    background: var(--ba-blue-50);
    color: var(--ba-primary);
}

.btn-outline:active[b-checkout] {
    background: var(--ba-blue-50);
    color: var(--ba-blue-900);
    border-color: var(--ba-blue-900);
    transition: none;
}

/* Bootstrap anula el outline en :focus-visible de .btn: sin anillo propio el
   teclado quedaba sin indicador (MASTER §1, prioridad 1). Se repone con los
   tokens de foco del proyecto, igual que fact-btn en Facturacion. */
.btn:focus-visible[b-checkout] {
    outline: none;
    box-shadow: 0 0 0 var(--ba-focus-offset) var(--ba-focus-inner), 0 0 0 4px var(--ba-focus-outer);
}

/* Movil: sin desplazamiento horizontal y objetivo tactil completo. */
@media (max-width: 640px) {
    .btn[b-checkout] {
        width: 100%;
    }
}

/* ========================================================================== */
/*          Checkout en 3 pasos (Pedido -> Entrega -> Pago), refs 4a-4c        */
/*  Medidas y colores del mockup "Checkout BIG AUTO" (secciones 4 y 2), todo   */
/*  por tokens de tokens.css. Botones y campos del flujo de compra: 48px.      */
/* ========================================================================== */

/* Cifras tabulares y cero barrado en precios, SKU y telefonos (MASTER §4.3). */
[b-checkout] .carrito-tnum {
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* ---- Stepper ---- */
.carrito-pasos-zona[b-checkout] {
    grid-area: pasos;
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
    min-width: 0;
}

.carrito-pasos[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-4);
    padding-top: var(--ba-space-4);
}

.carrito-pasos__lista[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.carrito-paso[b-checkout] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 400;
    color: var(--ba-text-muted);
}

/* Conector de 56px entre pasos. Va como primer hijo flex del paso: a su
   izquierda queda el gap de 32px de la lista y a su derecha el gap de 10px del
   paso + este margen, para que tambien sean 32px. */
.carrito-paso + .carrito-paso[b-checkout]::before {
    content: '';
    width: 56px;
    height: 2px;
    flex: none;
    margin-right: calc(var(--ba-space-8) - 10px);
    background: var(--ba-border);
}

.carrito-paso__numero[b-checkout] {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ba-border);
    color: var(--ba-text);
    font-size: 18px;
}

.carrito-paso--actual[b-checkout],
.carrito-paso--hecho[b-checkout] {
    color: var(--ba-primary);
}

.carrito-paso--actual[b-checkout] {
    font-weight: 600;
}

.carrito-paso--actual .carrito-paso__numero[b-checkout],
.carrito-paso--hecho .carrito-paso__numero[b-checkout] {
    background: var(--ba-primary);
    color: #fff;
}

.carrito-paso__boton[b-checkout] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: var(--ba-radius-sm);
}

.carrito-paso__boton:hover:not(:disabled) .carrito-paso__nombre[b-checkout] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.carrito-compra-segura[b-checkout] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-2);
    color: var(--ba-text-muted);
    font-size: var(--ba-text-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* ---- Bloques (tarjetas blancas) del paso Entrega y del resumen de Pago ---- */
.carrito-entrega[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
}

.carrito-bloque[b-checkout] {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    padding: var(--ba-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
}

.carrito-bloque--compacto[b-checkout] {
    padding: 20px;
    gap: var(--ba-space-2);
}

.carrito-bloque__cabecera[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
}

.carrito-bloque__titulo[b-checkout] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ba-text);
}

.carrito-bloque__titulo--seccion[b-checkout] {
    font-size: 22px;
    color: var(--ba-primary);
}

.carrito-bloque__texto[b-checkout],
.carrito-bloque__lista[b-checkout] {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ba-text);
}

.carrito-bloque__lista[b-checkout] {
    padding: 0;
    list-style: none;
}

/* ---- Campos ---- */
[b-checkout] .carrito-campos-fila {
    display: flex;
    gap: var(--ba-space-4);
}

[b-checkout] .carrito-campos-fila > .carrito-campo {
    flex: 1 1 0;
    min-width: 0;
}

[b-checkout] .carrito-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-checkout] .carrito-campo__etiqueta {
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-text);
}

[b-checkout] .carrito-campo__control {
    height: 48px;
    padding: 0 var(--ba-space-3);
    border: 1px solid var(--ba-border-input);
    border-radius: var(--ba-radius-sm);
    background: var(--ba-surface);
    color: var(--ba-text);
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    box-sizing: border-box;
    width: 100%;
}

/* Foco de campo: borde reforzado, sin anillo (MASTER §7.4). */
[b-checkout] .carrito-campo__control:focus-visible {
    outline: none;
    border-color: var(--ba-primary);
    box-shadow: inset 0 0 0 1px var(--ba-primary);
}

[b-checkout] .carrito-campo__control[readonly] {
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
}

[b-checkout] .carrito-campo__control[aria-invalid="true"] {
    border-color: var(--ba-red-800);
}

[b-checkout] .carrito-campo__error {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ba-space-1);
    color: var(--ba-red-800);
    font-size: var(--ba-text-sm);
    font-weight: 500;
}

/* ---- Enlaces y botones nativos (terciario / secundario) ---- */
[b-checkout] .carrito-enlace {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ba-primary);
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--ba-radius-sm);
}

[b-checkout] .carrito-enlace:disabled {
    opacity: .45;
    cursor: not-allowed;
}

[b-checkout] .carrito-enlace--centrado {
    align-self: center;
}

[b-checkout] .carrito-enlace--info {
    color: var(--ba-info-text);
}

[b-checkout] .carrito-enlace--peligro {
    color: var(--ba-red-800);
}

[b-checkout] .carrito-btn-nativo {
    height: 48px;
    padding: 0 20px;
    border-radius: var(--ba-radius-sm);
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

[b-checkout] .carrito-btn-nativo--contorno {
    border: 1px solid var(--ba-primary);
    background: var(--ba-surface);
    color: var(--ba-primary);
}

[b-checkout] .carrito-btn-nativo--contorno:hover {
    background: var(--ba-blue-50);
}

/* ---- Login dentro de Entrega ---- */
.carrito-login[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
    padding: var(--ba-space-4);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
}

.carrito-login__acciones[b-checkout] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ba-space-4);
}

/* ---- Tarjetas radio (metodo de entrega y opcion de envio) ---- */
[b-checkout] .carrito-opciones {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

[b-checkout] .carrito-opcion {
    display: flex;
    align-items: center;
    gap: var(--ba-space-4);
    width: 100%;
    padding: var(--ba-space-4) 20px;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface);
    color: var(--ba-text);
    font-family: var(--ba-font-base);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ba-duration-fast) var(--ba-easing);
}

[b-checkout] .carrito-opcion:hover:not(:disabled):not(.carrito-opcion--activa) {
    border-color: var(--ba-primary);
}

[b-checkout] .carrito-opcion:disabled {
    opacity: .45;
    cursor: not-allowed;
}

[b-checkout] .carrito-opcion--activa {
    border: 2px solid var(--ba-primary);
    background: var(--ba-blue-50);
    /* 1px menos de padding compensa el borde de 2px. */
    padding: calc(var(--ba-space-4) - 1px) 19px;
}

/* Opcion resuelta por la cotizacion: informa, no se elige. */
[b-checkout] .carrito-opcion--fija {
    cursor: default;
}

[b-checkout] .carrito-opcion__radio {
    position: relative;
    width: 24px;
    height: 24px;
    flex: none;
    border: 2px solid var(--ba-border-input);
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--ba-surface);
}

[b-checkout] .carrito-opcion--activa .carrito-opcion__radio {
    border-color: var(--ba-primary);
}

[b-checkout] .carrito-opcion--activa .carrito-opcion__radio::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--ba-primary);
}

[b-checkout] .carrito-opcion__texto {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

[b-checkout] .carrito-opcion__titulo {
    font-size: 18px;
    font-weight: 600;
}

[b-checkout] .carrito-opcion__detalle {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

/* ---- Sucursal / direccion elegida ---- */
.carrito-destino[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-4);
    padding: var(--ba-space-4) 20px;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
}

.carrito-destino--columna[b-checkout] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ba-space-1);
}

.carrito-destino--vacio[b-checkout] {
    color: var(--ba-text-muted);
    font-size: var(--ba-text-base);
}

.carrito-destino__texto[b-checkout] {
    min-width: 0;
}

.carrito-destino__etiqueta[b-checkout] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.carrito-destino__titulo[b-checkout] {
    font-size: 18px;
    font-weight: 600;
    color: var(--ba-text);
}

.carrito-destino__detalle[b-checkout] {
    font-size: var(--ba-text-sm);
    line-height: 1.5;
    color: var(--ba-text-muted);
}

/* ---- Avisos (stock, BIG EXPRESS, productos sin stock) ---- */
.carrito-aviso[b-checkout] {
    margin: 0;
    padding: var(--ba-space-3) var(--ba-space-4);
    border-radius: var(--ba-radius-md);
    font-size: var(--ba-text-sm);
    font-weight: 500;
    line-height: 1.4;
}

.carrito-aviso--advertencia[b-checkout] {
    margin-top: var(--ba-space-2);
    background: var(--ba-warning-bg);
    color: var(--ba-warning-text);
}

.carrito-aviso--exito[b-checkout] {
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
}

.carrito-aviso--error[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    margin-bottom: var(--ba-space-3);
    background: var(--ba-red-50);
    color: var(--ba-red-800);
}

.carrito-llegada[b-checkout] {
    margin: var(--ba-space-2) 0 0;
    padding: var(--ba-space-3) var(--ba-space-4);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    font-size: var(--ba-text-sm);
    color: var(--ba-text);
}

/* Producto agotado (ref 2g). */
.carrito-agotado[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ba-space-3);
    margin-top: var(--ba-space-2);
    padding: var(--ba-space-2) var(--ba-space-3);
    border-radius: var(--ba-radius-md);
    background: var(--ba-red-50);
}

.carrito-agotado__texto[b-checkout] {
    color: var(--ba-red-800);
    font-size: var(--ba-text-sm);
    font-weight: 600;
}

.carrito-agotado__acciones[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-4);
}

.carrito-equivalentes[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-2);
    margin-top: var(--ba-space-3);
    padding-top: var(--ba-space-3);
    border-top: 1px solid var(--ba-border);
}

/* ---- Deposito del casco: barra gris debajo de la tarjeta (ref 4a) ---- */
.carrito-casco-barra[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
    margin-top: var(--ba-space-1);
    padding: 14px var(--ba-space-4);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    font-size: var(--ba-text-sm);
}

.carrito-casco-barra__texto[b-checkout] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-1);
}

/* Boton de icono: area activa de 32px aunque el icono mida 14. */
.carrito-casco-barra__info[b-checkout] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ba-text-muted);
    cursor: pointer;
}

/* ---- Columna de resumen ---- */
.carrito-fecha-pendiente[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
    padding: var(--ba-space-4);
    border: 1px dashed var(--ba-border-input);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface);
    color: var(--ba-text);
    font-size: var(--ba-text-sm);
}

.carrito-fecha-motivo[b-checkout] {
    margin: calc(-1 * var(--ba-space-2)) 0 0;
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

/* La tarjeta ordena sus hijos con `order` (texto 2, logo BIG TURBO 3): sin
   order propio el boton se quedaba en 0 y caia entre el calendario y el texto.
   Va al final (4); el margin-right:auto del texto ya lo empuja al extremo
   derecho, junto al logo si lo hay. 44px de alto: area tactil minima. */
.status-card__cambiar[b-checkout] {
    order: 4;
    flex-shrink: 0;
    align-self: center;
    min-height: 44px;
    padding: 0 var(--ba-space-1);
    border: 0;
    background: transparent;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    border-radius: var(--ba-radius-sm);
}

.carrito-cinta-promo[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
    padding: var(--ba-space-3) var(--ba-space-4);
    border-radius: var(--ba-radius-md);
    background: var(--ba-info-bg);
    color: var(--ba-info-text);
    font-size: var(--ba-text-sm);
    font-weight: 500;
}

/* MudPaper del resumen: ::deep porque la clase cae en el <div> que renderiza
   MudPaper, no en un elemento de este .razor (ver CONVENCIONES.md). */
.resumen[b-checkout]  .carrito-resumen {
    padding: 20px;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    box-shadow: none;
}

.carrito-resumen__titulo[b-checkout] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--ba-text);
}

.carrito-resumen__detalle[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.carrito-cupon-fila[b-checkout] {
    display: flex;
    gap: var(--ba-space-2);
}

.carrito-resumen__filas[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

.carrito-resumen__fila[b-checkout] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ba-space-3);
    font-size: var(--ba-text-base);
    color: var(--ba-text);
}

.carrito-resumen__fila--ahorro[b-checkout] {
    color: var(--ba-success-text);
    font-weight: 600;
}

.carrito-resumen__aviso[b-checkout] {
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

.carrito-resumen__total[b-checkout] {
    display: flex;
    justify-content: space-between;
    padding-top: var(--ba-space-3);
    border-top: 1px solid var(--ba-border);
    font-size: 24px;
    font-weight: 700;
    color: var(--ba-primary);
}

.carrito-promo-aplicada[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    padding: var(--ba-space-2) var(--ba-space-3);
    border-radius: var(--ba-radius-md);
    background: var(--ba-success-bg);
    color: var(--ba-success-text);
}

.carrito-promo-aplicada__texto[b-checkout] {
    flex: 1;
    font-size: var(--ba-text-sm);
    font-weight: 600;
}

/* MudButton: la clase cae en el <button> que renderiza MudBlazor, de ahi ::deep. */
[b-checkout] .carrito-btn-principal,
[b-checkout] .carrito-btn-pagar {
    height: 48px;
    border-radius: var(--ba-radius-sm) !important;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

/* Pagar mide 56px en la referencia 4c: es la accion final de la compra. */
[b-checkout] .carrito-btn-pagar {
    height: 56px;
    margin-top: var(--ba-space-1);
}

[b-checkout] .carrito-btn-contorno {
    height: 48px;
    padding: 0 20px;
    border: 1px solid var(--ba-primary) !important;
    border-radius: var(--ba-radius-sm) !important;
    color: var(--ba-primary) !important;
    font-family: var(--ba-font-base);
    font-size: var(--ba-text-base);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.carrito-terminos[b-checkout] {
    margin: 0;
    text-align: center;
    font-size: var(--ba-text-xs);
    line-height: 1.5;
    color: var(--ba-text-muted);
}

.carrito-terminos a[b-checkout] {
    color: var(--ba-primary);
}

/* ---- Barra fija de movil ---- */
.carrito-barra-movil[b-checkout] {
    display: none;
}

/* Entre 951 y 1199px la columna de 480 deja la lista demasiado angosta. */
@media screen and (min-width: 951px) and (max-width: 1199px) {
    .contenedor[b-checkout] {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}

@media screen and (max-width: 950px) {
    .carrito-solo-escritorio[b-checkout],
    [b-checkout] .carrito-solo-escritorio {
        display: none !important;
    }

    .carrito-barra-movil[b-checkout] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--ba-z-sticky);
        display: flex;
        flex-direction: column;
        gap: var(--ba-space-2);
        padding: var(--ba-space-3) var(--ba-space-4) calc(var(--ba-space-3) + env(safe-area-inset-bottom));
        background: var(--ba-surface);
        border-top: 1px solid var(--ba-border);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
    }

    .carrito-barra-movil__total[b-checkout] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: var(--ba-text-base);
        color: var(--ba-text);
    }

    .carrito-barra-movil__total strong[b-checkout] {
        font-size: 20px;
        color: var(--ba-primary);
    }

    .carrito-pasos__lista[b-checkout] {
        gap: var(--ba-space-4);
    }

    .carrito-paso[b-checkout] {
        font-size: var(--ba-text-sm);
        gap: var(--ba-space-2);
    }

    .carrito-paso + .carrito-paso[b-checkout]::before {
        width: 16px;
        margin-right: var(--ba-space-2);
    }

    .carrito-paso__numero[b-checkout] {
        width: 32px;
        height: 32px;
        font-size: var(--ba-text-sm);
    }

    .carrito-compra-segura[b-checkout] {
        display: none;
    }

    .carrito-bloque[b-checkout] {
        padding: var(--ba-space-4);
    }

    [b-checkout] .carrito-campos-fila {
        flex-direction: column;
    }

    .carrito-destino[b-checkout] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- Direcciones en linea (DireccionesEntregaEnLinea.razor) ----
   El componente reutiliza las clases carrito-* de arriba (por eso esas reglas
   llevan ::deep: el CSS con scope no cruza a un componente hijo). Aqui solo va
   lo propio del formulario de direccion nueva. */
[b-checkout] .carrito-direcciones {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
}

[b-checkout] .carrito-direcciones__estado {
    margin: 0;
    color: var(--ba-text-muted);
    font-size: var(--ba-text-sm);
}

[b-checkout] .carrito-direccion-form {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-4);
    padding: var(--ba-space-4) 20px;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
}

[b-checkout] .carrito-direccion-form__titulo {
    font-size: 18px;
    font-weight: 600;
    color: var(--ba-text);
}

[b-checkout] .carrito-direccion-form__acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ba-space-4);
}

/* Texto de apoyo bajo un campo: gris secundario, no compite con la etiqueta. */
[b-checkout] .carrito-campo__ayuda {
    margin: 0;
    font-size: var(--ba-text-sm);
    color: var(--ba-text-muted);
}

/* Municipio y estado: los llena el C.P. Se ven como dato ya resuelto (fondo
   alterno, borde decorativo), no como un campo apagado sin explicacion. */
[b-checkout] .carrito-campo__control--auto,
[b-checkout] .carrito-campo__control--auto[readonly] {
    background: var(--ba-surface-alt);
    border-color: var(--ba-border);
    color: var(--ba-text);
}

[b-checkout] .carrito-campos-fila > .carrito-campo--cp {
    flex: 0 0 180px;
}

[b-checkout] .carrito-campos-fila > .carrito-campo--ancho {
    flex: 2 1 0;
}

@media screen and (max-width: 950px) {
    [b-checkout] .carrito-campos-fila > .carrito-campo--cp,
    [b-checkout] .carrito-campos-fila > .carrito-campo--ancho {
        flex: 1 1 auto;
    }

    [b-checkout] .carrito-direccion-form {
        padding: var(--ba-space-4);
    }
}

/* ---- Tarjeta de fecha: frase + lugar ----
   status-label = que es (estimada/confirmada); status-text = cuando, como frase
   completa; status-lugar = donde. El color lo pone GetStatusCardConfig inline. */
.status-card .status-text[b-checkout] {
    font-size: 18px;
    line-height: 1.3;
}

.status-lugar[b-checkout] {
    font-size: var(--ba-text-sm);
    font-weight: 500;
    line-height: 1.4;
    opacity: .9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Resumen de entrega en Pago ---- */
.carrito-resumen-entrega[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-1);
}

.carrito-resumen-entrega__metodo[b-checkout] {
    display: inline-flex;
    align-items: center;
    gap: var(--ba-space-2);
    margin-bottom: var(--ba-space-1);
    color: var(--ba-primary);
    font-size: var(--ba-text-sm);
    font-weight: 600;
}

.carrito-chips[b-checkout] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ba-space-2);
    margin-top: var(--ba-space-2);
}

.entrega-chip svg[b-checkout] {
    flex: none;
    color: var(--ba-text-muted);
}

/* La fecha es el dato que mas importa en este bloque: chip en azul sutil. */
.entrega-chip--fecha[b-checkout] {
    background: var(--ba-blue-50);
    color: var(--ba-primary);
    font-weight: 600;
}

.entrega-chip--fecha svg[b-checkout] {
    color: var(--ba-primary);
}

/* Bootstrap trae .visually-hidden pero carga diferido; aqui no se depende de el. */
.visually-hidden[b-checkout] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Resumen de productos en Pago ---- */
.carrito-resumen-productos[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-3);
    margin: var(--ba-space-1) 0 0;
    padding: 0;
    list-style: none;
}

.carrito-resumen-productos__item[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-3);
}

.carrito-resumen-productos__item + .carrito-resumen-productos__item[b-checkout] {
    padding-top: var(--ba-space-3);
    border-top: 1px solid var(--ba-border);
}

.carrito-resumen-productos__img[b-checkout] {
    width: 48px;
    height: 48px;
    flex: none;
    object-fit: contain;
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
}

.carrito-resumen-productos__texto[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-1);
    flex: 1;
    min-width: 0;
}

.carrito-resumen-productos__nombre[b-checkout] {
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-text);
    line-height: 1.3;
}

.carrito-resumen-productos__cantidad[b-checkout] {
    flex: none;
    font-size: var(--ba-text-base);
    font-weight: 600;
    color: var(--ba-text-muted);
}

/* ---- Domicilio sin tarifa de paqueteria ----
   Mismo par rojo sutil / rojo funcional que el aviso de productos sin stock:
   es un bloqueo, no una advertencia. El boton da la salida (recoger). */
.carrito-sin-envio[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ba-space-3);
    padding: var(--ba-space-4);
    border: 1px solid var(--ba-red-800);
    border-radius: var(--ba-radius-md);
    background: var(--ba-red-50);
}

.carrito-sin-envio__texto[b-checkout] {
    display: flex;
    flex-direction: column;
    gap: var(--ba-space-1);
    flex: 1 1 280px;
    min-width: 0;
    font-size: var(--ba-text-sm);
    line-height: 1.5;
    color: var(--ba-text);
}

.carrito-sin-envio__texto strong[b-checkout] {
    font-size: var(--ba-text-base);
    color: var(--ba-red-800);
}

/* ---- Salida del checkout reducido ---- */
.carrito-salir[b-checkout] {
    margin-left: auto;
    margin-right: var(--ba-space-4);
    min-height: 44px;
}

.carrito-salir-aviso[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ba-space-3);
    padding: var(--ba-space-3) var(--ba-space-4);
    border-radius: var(--ba-radius-md);
    background: var(--ba-warning-bg);
    color: var(--ba-warning-text);
    font-size: var(--ba-text-sm);
    font-weight: 500;
}

.carrito-salir-aviso__acciones[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-4);
}

@media screen and (max-width: 950px) {
    .carrito-salir[b-checkout] {
        display: none;
    }
}

/* Aviso a todo el ancho de la rejilla (sobre el stepper), con su accion a la derecha. */
.carrito-aviso--ancho[b-checkout] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ba-space-3);
    margin: 0;
}

/* Envio resuelto por la cotizacion: linea informativa, no una opcion a elegir. */
.carrito-envio-resuelto[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    margin: 0;
    padding: var(--ba-space-3) var(--ba-space-4);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    color: var(--ba-text);
    font-size: var(--ba-text-base);
    line-height: 1.4;
}

.carrito-envio-resuelto svg[b-checkout] {
    flex: none;
    color: var(--ba-primary);
}

/* Cotizacion en curso (SkyDropx puede tardar varios segundos): ocupa el lugar de la
   linea resuelta para que no se lea la cotizacion de la direccion anterior. */
.carrito-envio-calculando[b-checkout] {
    display: flex;
    align-items: center;
    gap: var(--ba-space-2);
    margin: 0;
    padding: var(--ba-space-3) var(--ba-space-4);
    border-radius: var(--ba-radius-md);
    background: var(--ba-surface-alt);
    color: var(--ba-text-muted);
    font-size: var(--ba-text-base);
    line-height: 1.4;
}

.carrito-fecha-pendiente--calculando[b-checkout] {
    justify-content: flex-start;
    color: var(--ba-text-muted);
}

/* Con reduced-motion tokens.css lo deja quieto; el texto ya dice que se esta calculando. */
.carrito-spinner[b-checkout] {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ba-border-input);
    border-top-color: var(--ba-primary);
    border-radius: 50%;
    animation: carrito-girar-b-checkout 0.8s linear infinite;
}

@keyframes carrito-girar-b-checkout {
    to { transform: rotate(360deg); }
}

/* ---- "Estas comprando" (compra directa): fila compacta miniatura | nombre + chips | precio ---- */
.carrito-comprando[b-checkout] { display: flex; align-items: center; gap: var(--ba-space-4); }
.carrito-comprando__img-enlace[b-checkout] { flex: none; display: block; }
.carrito-comprando .carrito-resumen-productos__img[b-checkout] { width: 72px; height: 72px; }
.carrito-comprando__cifras[b-checkout] { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ba-space-1); flex: none; }
.carrito-comprando__precio[b-checkout] { font-size: var(--ba-text-h3); font-weight: 700; line-height: 1.2; color: var(--ba-primary); }
/* Jerarquia: nombre (16px, 600) > precio (20px, 700, azul de marca) > cantidad y chips (apoyo). El nombre envuelve, no se trunca. */
.carrito-comprando .carrito-resumen-productos__nombre[b-checkout] { overflow-wrap: anywhere; line-height: 1.3; }

/* Aviso de stock + "Llegada actualizada" como un solo bloque. */
.carrito-bloque .carrito-comprando ~ .carrito-aviso--advertencia[b-checkout] { margin-top: calc(-1 * var(--ba-space-1)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.carrito-bloque .carrito-aviso--advertencia + .carrito-llegada[b-checkout] {
    margin-top: calc(-1 * var(--ba-space-3));
    border: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--ba-warning-bg);
    color: var(--ba-warning-text);
}

@media screen and (max-width: 480px) {
    .carrito-comprando[b-checkout] { flex-wrap: wrap; }
    .carrito-comprando__cifras[b-checkout] { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
}

/* ---- Movil: avisos compactos y texto legal en la barra ---- */
.carrito-aviso--compacto[b-checkout] {
    margin-top: var(--ba-space-2);
    padding: var(--ba-space-1) var(--ba-space-3);
    font-size: var(--ba-text-xs);
    font-weight: 600;
    display: inline-block;
    align-self: flex-start;
}

/* Aviso unico de piezas de otra sucursal: pegado a la tarjeta de fecha, mismo par ambar. */
.carrito-fecha-motivo[b-checkout] {
    margin: calc(-1 * var(--ba-space-2)) 0 0;
    padding: var(--ba-space-2) var(--ba-space-4);
    border-radius: 0 0 var(--ba-radius-md) var(--ba-radius-md);
    background: var(--ba-warning-bg);
    color: var(--ba-warning-text);
    font-size: var(--ba-text-sm);
    font-weight: 500;
    line-height: 1.4;
}

.carrito-barra-movil__legal[b-checkout] {
    margin: 0;
    font-size: var(--ba-text-xs);
    color: var(--ba-text-muted);
    text-align: center;
}

.carrito-barra-movil__legal a[b-checkout] {
    color: var(--ba-primary);
}

/* ---- Movil: cupon plegado, "Vaciar" discreto, chips como lista, hueco bajo la barra ---- */
.carrito-cupon-toggle[b-checkout] { display: none; }

@media screen and (max-width: 950px) {
    /* La barra fija crece en Pago (lleva la linea legal): hueco mayor para no tapar el final. */
    .contenedor.carrito-checkout--pago[b-checkout] { padding-bottom: 176px; }

    .carrito-cupon-bloque:not(.carrito-cupon-bloque--abierto)[b-checkout] { display: none; }
    .carrito-cupon-bloque[b-checkout] { display: flex; flex-direction: column; gap: var(--ba-space-2); }
    .carrito-cupon-toggle[b-checkout] { display: inline-flex; align-items: center; min-height: 44px; }

    /* Accion destructiva de toda la lista: enlace pequeno, no un boton rojo de ancho completo. */
    .carrito-vaciar-fila[b-checkout] { justify-content: center; }
    .carrito-vaciar[b-checkout] {
        min-height: 44px;
        padding: 0 var(--ba-space-3);
        border: 0;
        background: transparent;
        text-decoration: underline;
        text-underline-offset: 2px;
        font-size: var(--ba-text-sm);
    }

    /* Resumen de Entrega en Pago: una fila por dato en lugar de chips que se parten en 3 lineas. */
    .carrito-resumen-entrega .carrito-chips[b-checkout] { flex-direction: column; gap: var(--ba-space-1); }
    .carrito-resumen-entrega .entrega-chip[b-checkout] {
        background: transparent;
        padding: var(--ba-space-1) 0;
        border-radius: 0;
        white-space: normal;
    }
}

/* ---- Sin desbordes en movil ----
   La pista de la rejilla era "1fr" (= minmax(auto, 1fr)): si cualquier hijo tenia un minimo
   ancho (texto sin cortes, chips en una linea), la columna crecia mas que la pantalla y las
   tarjetas se salian por la derecha. minmax(0, 1fr) + min-width:0 en los hijos lo impide. */
.contenedor > *[b-checkout],
.contenedor .step[b-checkout],
.contenedor .resumen[b-checkout],
.carrito-pasos-zona[b-checkout] {
    min-width: 0;
}

.status-card[b-checkout],
.date-block[b-checkout] {
    box-sizing: border-box;
}

.status-card[b-checkout] {
    max-width: 100%;
}

@media screen and (max-width: 950px) {
    .contenedor[b-checkout] { max-width: 100%; overflow-x: clip; }
    .contenedor .resumen > .cuponesDesk[b-checkout] { max-width: 100%; }
}

/* ---- Fecha en un solo banner; sube antes de los productos en movil ---- */
.carrito-fecha-zona[b-checkout] { display: flex; flex-direction: column; min-width: 0; }
.carrito-fecha-zona .carrito-fecha-motivo[b-checkout] { margin-top: 0; }
.carrito-fecha-zona .status-card:has(+ .carrito-fecha-motivo)[b-checkout] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

@media screen and (max-width: 950px) {
    /* .resumen deja de ser una caja: sus hijos entran a la rejilla y la zona de fecha ocupa la fila
       "fecha" (entre el stepper y los productos); el resto cae debajo en el orden del DOM. */
    .contenedor .resumen[b-checkout] { display: contents; }
    .carrito-fecha-zona[b-checkout] { grid-area: fecha; }
}

/* ---- Jerarquia tipografica: negritas solo para precios, totales y titulos ---- */
.carrito-meta-chip[b-checkout],
.carrito-campo__etiqueta[b-checkout],
.carrito-enlace[b-checkout],
.carrito-opcion__titulo[b-checkout] { font-weight: 500; }

/* ======================= Movil: Pedido segun la referencia ======================= */
.carrito-seguir-movil[b-checkout] { display: none; }
.status-nota[b-checkout] { font-size: var(--ba-text-sm); font-weight: 400; line-height: 1.4; }

@media screen and (max-width: 950px) {
    /* Banner de fecha: etiqueta en minusculas, sin sucursal (ya esta arriba), nota de piezas. */
    .status-label[b-checkout] { text-transform: none; font-size: var(--ba-text-sm); font-weight: 500; }
    .status-card .status-lugar[b-checkout] { display: none; }
    .status-card .status-text[b-checkout] { font-size: 18px; }

    /* Todos los productos en UNA tarjeta con divisores. */
    .carrito-lista[b-checkout] {
        gap: 0;
        background: var(--ba-surface);
        border: 1px solid var(--ba-border);
        border-radius: var(--ba-radius-md);
        overflow: hidden;
    }
    .carrito-lista[b-checkout]  .rz-card {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .carrito-lista .carrito-fila + .carrito-fila[b-checkout] { border-top: 1px solid var(--ba-border); }

    /* Imagen a la izquierda en las dos filas; precio y cantidad en la fila de abajo. */
    .tarjetaProducto[b-checkout] {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "imgProducto tituloProducto tituloProducto"
            "imgProducto precio btnsProducto";
    }
    .tarjetaProducto .imgProducto[b-checkout] { grid-row: auto; }

    /* Marca y SKU como una sola linea de texto gris: MASTERFIT . FS-32202ML */
    .carrito-chips-fila[b-checkout] { gap: 0; }
    .carrito-meta-chip[b-checkout] {
        background: transparent;
        border: 0;
        padding: 0;
        color: var(--ba-text-muted);
        font-size: var(--ba-text-sm);
        font-weight: 400;
    }
    .carrito-meta-chip + .carrito-meta-chip[b-checkout]::before { content: "\00B7"; margin: 0 var(--ba-space-2); }

    /* El resumen en movil: sin titulo, sin total (ya esta en la barra), cupon como fila plegable. */
    .carrito-resumen__total[b-checkout] { display: none; }
    .carrito-cupon-toggle[b-checkout] {
        width: 100%;
        justify-content: space-between;
        text-decoration: none;
        font-size: var(--ba-text-base);
        font-weight: 600;
        padding: var(--ba-space-1) 0 var(--ba-space-3);
        border-bottom: 1px solid var(--ba-border);
    }
    .carrito-cupon-toggle[b-checkout]::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-right: 4px;
    }
    .carrito-cupon-toggle[aria-expanded="true"][b-checkout]::after { transform: rotate(-135deg); }

    /* Seguir comprando (izquierda) y Vaciar carrito (derecha) al pie. */
    .carrito-vaciar-fila[b-checkout] { justify-content: space-between; align-items: center; }
    .carrito-seguir-movil[b-checkout] { display: inline-flex; align-items: center; min-height: 44px; }
    .carrito-resumen-seguir[b-checkout], .carrito-enlace--centrado[href="/"][b-checkout] { display: none; }

    /* Barra fija: total a la izquierda y boton a la derecha (en Pago, solo el boton + su leyenda). */
    .carrito-barra-movil[b-checkout] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ba-space-3) var(--ba-space-4); }
    .carrito-barra-movil__total[b-checkout] { display: flex; flex-direction: column; flex: none; gap: 0; line-height: 1.1; }
    .carrito-barra-movil__total span[b-checkout] { font-size: var(--ba-text-sm); color: var(--ba-text-muted); }
    .carrito-barra-movil__total strong[b-checkout] { font-size: 22px; }
    .carrito-barra-movil[b-checkout]  .carrito-btn-principal { flex: 1 1 0; width: auto; min-width: 0; }
    .carrito-barra-movil__legal[b-checkout] { flex: 1 0 100%; order: -1; }
}

/* ---- Barra en flujo (sticky), pie movil y cabecera del resumen ---- */
.carrito-pie-movil[b-checkout] { display: none; }

@media screen and (max-width: 950px) {
    .carrito-barra-movil[b-checkout] {
        position: sticky;
        bottom: 0;
        left: auto;
        right: auto;
        margin: var(--ba-space-4) calc(-1 * var(--ba-space-4)) 0;
        z-index: var(--ba-z-sticky);
    }
    /* La barra ya ocupa su lugar en el flujo: no hace falta reservar hueco debajo. */
    .contenedor[b-checkout],
    .contenedor.carrito-checkout--pago[b-checkout] { padding-bottom: 0; }


    .carrito-vaciar-fila[b-checkout] { display: none; }
    .carrito-pie-movil[b-checkout] { display: flex; justify-content: space-between; align-items: center; }
    .carrito-pie-movil .carrito-enlace[b-checkout],
    .carrito-pie-movil .carrito-vaciar[b-checkout] { min-height: 44px; }
}

/* ======================= Movil segun el prompt de referencia (oct 2026) ======================= */
.carrito-pago-compacto[b-checkout] { display: none; }
[b-checkout] .carrito-opcion__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ba-space-2); }
[b-checkout] .carrito-opcion__gratis,
.carrito-resumen__gratis[b-checkout] { color: var(--ba-success-text); font-weight: 600; }
[b-checkout] .carrito-opcion--detalle { cursor: default; align-items: flex-start; }
[b-checkout] .carrito-opcion--detalle .carrito-opcion__texto { gap: 2px; }
[b-checkout] .carrito-opcion__sucursal { font-weight: 600; margin-top: var(--ba-space-1); }
[b-checkout] .carrito-opcion__direccion { color: var(--ba-text-muted); font-size: var(--ba-text-sm); line-height: 1.4; }
[b-checkout] .carrito-opcion__fecha { display: inline-flex; align-items: center; gap: var(--ba-space-2); margin-top: var(--ba-space-2); color: var(--ba-primary); font-weight: 600; }
[b-checkout] .carrito-opcion__cambiar { align-self: flex-start; margin-top: var(--ba-space-2); min-height: 44px; }

@media screen and (max-width: 950px) {
    /* ---- Carrito ---- */
    .tarjetaProducto .tituloProducto[b-checkout]  .rz-text-subtitle1 { font-size: 15px !important; font-weight: 700 !important; line-height: 1.3; }
    .carrito-meta-chip[b-checkout] { font-size: 12px; }
    .carrito-meta-chip--sku[b-checkout] { font-family: inherit; letter-spacing: 0; }
    /* Stock: una linea gris "1 en tienda · 53 en linea", sin iconos. */
    .stock-stack[b-checkout] { display: flex; flex-wrap: wrap; gap: 0; }
    .carrito-stock-dato[b-checkout] { color: var(--ba-text-muted); font-size: 12px; font-weight: 400; }
    .carrito-stock-dato:empty[b-checkout] { display: none; }
    .carrito-stock-dato[b-checkout]  img,
    .carrito-stock-dato[b-checkout]  svg { display: none; }
    .carrito-stock-dato:not(:empty) + .carrito-stock-dato[b-checkout]::before { content: "\00B7"; margin: 0 6px; }
    /* Etiqueta ambar pequena (no banner). */
    [b-checkout] .carrito-aviso--compacto {
        display: inline-flex;
        align-self: flex-start;
        padding: 2px 8px;
        border: 0;
        border-radius: var(--ba-radius-sm);
        background: #FFF3D1;
        color: #7A4F00;
        font-size: 12px;
        font-weight: 500;
    }
    .tarjetaProducto .carrito-precio[b-checkout]  .rz-text-body1,
    .tarjetaProducto .carrito-precio > p[b-checkout] { font-weight: 800 !important; color: var(--ba-primary) !important; }
    /* Vaciar carrito: enlace rojo pequeno, no boton. */
    .carrito-pie-movil .carrito-vaciar[b-checkout] {
        border: 0;
        background: none;
        padding: 0;
        color: var(--ba-red-800);
        font-size: var(--ba-text-sm);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* ---- Entrega: la fecha ya va en la tarjeta de recoger; no se repite arriba ---- */
    .carrito-fecha-zona--en-paso[b-checkout] { display: none; }
    [b-checkout] .carrito-opcion { padding: 14px; }
    [b-checkout] .carrito-opcion--activa { padding: 13px; }
    [b-checkout] .carrito-opcion__fecha { font-size: var(--ba-text-sm); }

    /* ---- Pago: una tarjeta compacta; los bloques detallados y los importes se ocultan ---- */
    .contenedor.carrito-checkout--pago .carrito-bloque--compacto[b-checkout] { display: none; }
    .carrito-pago-compacto[b-checkout] {
        display: block;
        background: var(--ba-surface);
        border: 1px solid var(--ba-border);
        border-radius: var(--ba-radius-md);
        padding: 0 14px;
    }
    .carrito-pago-compacto__fila[b-checkout] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--ba-space-3);
        padding: 14px 0;
    }
    .carrito-pago-compacto__fila + .carrito-pago-compacto__fila[b-checkout] { border-top: 1px solid var(--ba-border); }
    .carrito-pago-compacto__texto[b-checkout] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .carrito-pago-compacto__etiqueta[b-checkout] { color: var(--ba-text-muted); font-size: 13px; }
    .carrito-pago-compacto__valor[b-checkout] { font-weight: 600; overflow-wrap: anywhere; }
    .carrito-pago-compacto__detalle[b-checkout] { color: var(--ba-text-muted); font-size: var(--ba-text-sm); overflow-wrap: anywhere; }
    .carrito-pago-compacto .carrito-enlace[b-checkout] { flex: none; min-height: 44px; }

    /* ---- Barra inferior: padding 12/16/20, boton de 50px ---- */
    .carrito-barra-movil[b-checkout] { padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
    .carrito-barra-movil[b-checkout]  .carrito-btn-principal { min-height: 50px; }
}

/* ---- Movil: columna con orden explicito en lugar de grid-template-areas ----
   Con areas, al ocultar la fecha (Entrega con sucursal) su celda quedaba vacia y la rejilla
   metia ahi el primer hijo suelto del resumen: el resumen subia por encima del paso.
   En flex no hay celdas que rellenar: stepper, fecha, paso y luego todo lo demas. */
@media screen and (max-width: 950px) {
    /* align-items:stretch: la regla base trae "start" (de la rejilla) y en flex encogia cada bloque a su contenido. */
    .contenedor[b-checkout] { display: flex; flex-direction: column; align-items: stretch; }
    .contenedor .carrito-pasos-zona[b-checkout] { order: -3; }
    .contenedor .carrito-fecha-zona[b-checkout] { order: -2; }
    .contenedor .step[b-checkout] { order: -1; }
    .contenedor .carrito-barra-movil[b-checkout] { order: 1; }
}

/* Pie movil: "Seguir comprando" y "Vaciar carrito" en la misma linea, mismo alto y tamano,
   uno a cada orilla (el <a> era inline y no tomaba el min-height del boton). */
@media screen and (max-width: 950px) {
    .carrito-pie-movil[b-checkout] { align-items: center; gap: var(--ba-space-4); }
    .carrito-pie-movil .carrito-enlace[b-checkout],
    .carrito-pie-movil .carrito-vaciar[b-checkout] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin: 0;
        padding: 0;
        font-size: var(--ba-text-sm);
        line-height: 1.2;
    }
    .carrito-pie-movil .carrito-vaciar[b-checkout] { margin-left: auto; }
}