/* ==========================================================================
   Dulce Sorpresa Peru - Carrito redisenado (etapa 2)
   Hoja propia del carrito. Se carga DESPUES de index.css y de etapa2.css.

   Sobre los comentarios: sin acentos, igual que etapa2.css. La hoja viaja por
   FTP y pasa por herramientas que no siempre respetan UTF-8; el codigo si
   lleva los acentos donde hacen falta (content), los comentarios no arriesgan.

   Valores tomados de los artboards 1a (escritorio 1280) y 1b (movil 390) de
   "Dulce Sorpresa - Carrito y Detalle.dc.html". No estan estimados: son los
   mismos numeros del marcado del diseno.

   Tres cosas del sitio que condicionan TODA la hoja:

   1. index.css trae el reset "* { box-sizing:border-box; padding:0; margin:0;
      font-size:16px }". El font-size:16px cae sobre CADA elemento, no solo
      sobre body. Por eso aqui todo tamano de letra va explicito y en px: un
      em o un rem heredaria 16px de cualquier padre y no del que se cree.
      El box-sizing global si nos sirve: los height de 46px o 52px ya incluyen
      borde y padding y no hay que restar nada.

   2. La tipografia es Jost, la misma del artboard, cargada en el header antes
      de esta hoja. Se declara una sola vez, en .car-carrito, y la hereda todo
      el subarbol; el resto del sitio sigue con la suya.

      Jost SI tiene eje de peso real (300-700), asi que los pesos van con
      font-weight y nada mas. Esto no era asi hasta ahora: el sitio usaba
      Brandon Grotesque, que son DOS familias sueltas
      (brandon_grotesque_regular y brandon_grotesquebold) sin eje de peso, y
      habia que cambiar de FAMILIA para engordar. Se han quitado los 30 cambios
      de familia que existian por ese motivo.

      Los pesos son los del artboard, no una escala inventada: alli casi todo
      lo destacado es 600 y un par de cosas son 500. No se usa 700 en ningun
      sitio, incluidas las cifras grandes del TOTAL, que en el artboard son
      600. Si se quiere mas contraste en esas cifras, se sube ahi y en ningun
      otro lado.

      Los tamanos y el letter-spacing NO hay que retocarlos por el cambio de
      fuente: estaban tomados de ese mismo artboard, que ya estaba compuesto en
      Jost.

   3. Bootstrap esta cargado en la pagina. Todo lo de esta hoja va con prefijo
      car- para no cruzarse con .col-*, .form-control ni .form__input.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables y raiz
   Los colores de la identidad en un solo sitio. No es cosmetica: el marron y
   el filete se repiten mas de treinta veces en la hoja y la clienta ya pidio
   ajustes de tono una vez.
   -------------------------------------------------------------------------- */
.car-carrito {
    --car-marron: #8c6239;
    --car-marron-hover: #6d4a29;
    --car-naranja: #ffb466;
    --car-crema: #faf6f1;
    --car-filete: #e6ddd2;
    --car-texto: #4c4c4c;
    --car-texto-2: #796857;
    --car-texto-3: #a8957f;
    --car-error: #c0522f;
    --car-error-fondo: #fbeee9;
    --car-error-filete: #e9c9be;
    --car-blanco: #ffffff;

    /* Alto de la barra fija de movil. Se usa dos veces: para dimensionar la
       barra y para reservar hueco al final de la pagina. Una sola fuente de
       verdad evita que el ultimo campo quede tapado si manana cambia el alto. */
    --car-barra-alto: 76px;

    /* Fondo de pagina. #EFE9E2 es el color del lienzo del .dc.html, o sea el
       fondo sobre el que estan posados los artboards, no el del carrito: el
       carrito en el artboard es la tarjeta BLANCA con filete que se ve encima.
       La clienta pidio ese crema para la pagina, asi que se reparte igual que
       en la maqueta: crema aqui, blanco en la tarjeta (.car-grid). */
    background: #EFE9E2;
    color: var(--car-texto);
    /* Jost, cargada en el header antes de esta hoja. Se declara SOLO aqui:
       todo el subarbol la hereda y el resto del sitio no se entera. */
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Aqui hubo un padding-top que compensaba la cabecera fija. Se quita: la
       compensacion ya existia en etapa2.css colgando de .main-carrito, esa
       clase se habia perdido al montar la vista nueva y ya se devolvio. Con
       las dos cosas puestas el hueco se sumaba. */
}

/* La queja original de la clienta es que en movil el contenido se sale y se
   corta sin poder arrastrar. La causa habitual no es un ancho fijo suelto sino
   un hijo de flex o de grid que se niega a encogerse por debajo de su
   contenido: por defecto min-width vale auto. Se fuerza a 0 en todos los
   descendientes de la vista y el desborde deja de ser posible por esa via. */
.car-carrito *,
.car-carrito *::before,
.car-carrito *::after {
    min-width: 0;
}

.car-carrito img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   LA ETIQUETA FLOTANTE DE index.css

   index.css trae una regla sobre el elemento LABEL pelado, sin ninguna clase:

     label { position:absolute; z-index:1; top:7px; left:27px;
             transition:.2s; transform-origin:0% 100%;
             color:#796857; font-weight:400 }

   Es el resto del formulario flotante viejo, esas etiquetas que se encogian y
   subian al escribir. Alcanza a TODOS los <label> del sitio, y por tanto a
   todos los de esta pantalla.

   El efecto es demoledor y no da ningun error: cada label sale del flujo, asi
   que .car-campos se queda con 0 de alto teniendo dieciocho hijos dentro, y
   los dieciocho se amontonan en el mismo top:7px, uno encima de otro. Ninguno
   se ve, pero los veintisiete campos estan en el HTML.

   Lo mismo le pasa a .car-entrega-campo, .car-opcion, .car-pago y
   .car-terminos, que tambien son labels. El sintoma que se noto primero fue
   que el rotulo "Distrito de envio" no aparecia mientras que "Costo de envio"
   si: el primero va dentro de un <label> y el segundo dentro de un <div>.

   Un <label> tiene que seguir siendo un label: es lo que hace que al tocar el
   texto se enfoque su campo, y en las opciones de comprobante y de pago es lo
   que permite marcar el radio con el teclado. Asi que no se cambia el marcado,
   se anula la regla.

   Se anulan SOLO las propiedades de posicion. El color y el font-weight se
   dejan pasar a proposito: cada clase car- que los necesite ya los declara, y
   una clase (0,1,0) le gana al selector de elemento (0,0,1). Si los pusieramos
   aqui, este selector (0,1,1) ganaria a todas esas clases y habria que ir
   repitiendo el color en cada una.
   -------------------------------------------------------------------------- */
/* RELATIVE Y NO STATIC. Aqui puse static y fue un error grave, no un matiz.

   Varias piezas de esta pantalla son <label> Y ADEMAS contenedores de hijos
   absolutos: .car-opcion y .car-pago esconden dentro un <input> estirado por
   encima de toda la etiqueta para conservar el foco de teclado, y .car-campo y
   .car-picker llevan iconos colocados. Todos declaran su position:relative,
   pero este selector pesa (0,1,1) y el de la clase (0,1,0), asi que les ganaba
   y los devolvia a static.

   Un absoluto sin ancestro posicionado se coloca contra la PAGINA. Medido: el
   radio invisible de la forma de pago ocupaba 1440x997 y tapaba la pantalla
   entera. Los clics llegaban -a el-, asi que no salia un solo error en
   consola: simplemente ni la papelera, ni el mas, ni VALIDAR, ni el
   desplegable de distrito hacian nada.

   Con relative se arregla de raiz y sin pelear especificidad: un elemento
   relative con las tres coordenadas en auto ocupa EXACTAMENTE el mismo sitio
   que uno static -no se desplaza- y ademas hace de contenedor para sus hijos
   absolutos, que es justo lo que hacia falta. */
.car-carrito label {
    /* FONDO. index.css trae ".nform, label { background: #fff }", otra regla de
       elemento que alcanza a todos los label del sitio. Aqui pinta de blanco
       la etiqueta ENTERA, que es la fila completa: por eso "DISTRITO DE ENVIO"
       salia sobre una banda blanca que se estiraba mucho mas alla del
       desplegable, y lo mismo el "Acepto los terminos" del resumen.

       La etiqueta es un envoltorio, no una superficie: el fondo lo tienen que
       poner las piezas que SI son una superficie. .car-opcion y .car-pago
       declaran el suyo, asi que no les afecta. */
    background: none;
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    /* La transicion de .2s va sin propiedad, o sea que anima TODO. Con ella,
       el cambio de fondo al marcar una opcion arrastra tambien el borde y el
       color y se ve como un parpadeo. */
    transition: none;
    transform-origin: 50% 50%;
}

/* Un input, un select, un textarea y un button NO heredan font-family del
   padre: los navegadores les dan la suya. Sin esto, la mitad de la pantalla
   saldria en Jost y los campos y botones en la fuente del sistema.
   Ojo, esto arregla ademas un fallo que venia de antes y no se habia notado:
   .car-cant-boton y .car-linea-quitar nunca declararon familia, asi que sus
   simbolos se estaban dibujando con la fuente por defecto del navegador. */
.car-carrito input,
.car-carrito select,
.car-carrito textarea,
.car-carrito button {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Piezas compartidas
   -------------------------------------------------------------------------- */

/* Rotulo en mayusculas. Aparece en el diseno unas quince veces con el mismo
   tratamiento (CODIGO DE PROMOCION, DISTRITO DE ENVIO, QUIEN RECIBE Y DONDE,
   COMPROBANTE, ENTREGA, TOTAL...). Una sola clase en vez de quince nombres.
   El tracking de .16em no es decorativo: a 10.5px y en mayusculas, sin separar
   las letras el rotulo se lee como un bloque. */
.car-rotulo {
    display: block;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--car-texto-3);
    line-height: 1.3;
}

/* Filete horizontal. Va como elemento y no como border-top del bloque
   siguiente porque en el diseno separa grupos hermanos dentro de un mismo
   panel, y con border-top habria que ir quitandolo del primero de cada grupo. */
.car-filete {
    display: block;
    height: 1px;
    background: var(--car-filete);
    border: 0;
    margin: 0;
}

/* Panel crema con filete: el bloque de ENTREGA y, en movil, el resumen. */
.car-panel {
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Campos de formulario. No se toca .form__input ni .form-control: esas clases
   las comparten otras pantallas y cambiarlas moveria el registro y el
   contacto. Estas son nuevas y solo viven en el carrito. */
.car-input,
.car-select,
.car-textarea {
    width: 100%;
    border: 1px solid var(--car-filete);
    background: var(--car-blanco);
    font-size: 14.5px;
    color: var(--car-texto);
    border-radius: 0;
}

.car-input,
.car-select {
    height: 46px;
    padding: 0 12px;
}

.car-textarea {
    padding: 12px;
    /* vertical y no both: en movil el arrastre horizontal de un textarea es
       justo lo que empuja el contenido fuera de los 390px. */
    resize: vertical;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   LA OTRA REGLA PELADA DE index.css

     select { appearance:none; display:flex; align-items:flex-end }

   Tambien sin clase, tambien sobre todos los <select> del sitio. Hace dos
   destrozos:

   1. appearance:none le quita al desplegable la flecha del navegador. Por eso
      la vista vieja iba sembrada de <div class="select_arrow">: eran flechas
      dibujadas a mano para reponer la que esta regla habia quitado. Al montar
      el marcado nuevo se quitaron esos divs, asi que los desplegables se
      quedaron sin ninguna senal de que se pueden desplegar: parecen campos de
      texto vacios.
   2. display:flex sobre un <select> no esta definido en ninguna parte. Un
      select es un elemento reemplazado y cada motor hace una cosa distinta con
      el alto y el texto interior.

   No se puede revertir appearance:none con appearance:auto y esperar la flecha
   nativa: hay motores que ya no la vuelven a pintar una vez suprimida. Se
   dibuja aqui, en el marron de la marca, con un SVG en linea. Va en background
   y no en un pseudoelemento porque un <select> no admite ::after.
   -------------------------------------------------------------------------- */
.car-select,
.car-picker-hora select {
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238c6239' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 7px;
    /* Hueco a la derecha para la flecha: sin el, una opcion larga le pasa por
       debajo. */
    padding-right: 32px;
    /* Medido: line-height 16px dentro de una caja de 46, con el texto pegado
       arriba. Viene de bootstrap.min.css, que pone select { line-height:
       inherit } y hereda un valor calculado de un ancestro. Con 'normal' el
       navegador vuelve a centrar el texto del desplegable el solo, que es lo
       que hace de fabrica; combinado con el display:block de aqui arriba,
       tambien deja de aplicarse el align-items:flex-end de index.css que lo
       empujaba abajo. */
    line-height: normal;
}

/* EL TEXTO DE LOS DESPLEGABLES SE IBA AL FONDO DE LA CAJA.

   index.css trae "select { align-items: flex-end }". Un <select> se maqueta
   por dentro como una caja flexible, asi que esa linea manda su texto al borde
   inferior: "Seleccionar hora" quedaba pegado abajo mientras "Escoge una fecha
   de entrega", que es un <input> y no le afecta, salia centrado al lado.

   Se corrige donde esta el problema -la alineacion- y no compensando con
   relleno o con line-height, que es lo que parece funcionar hasta que cambia
   el alto del campo. */
.car-carrito select {
    align-items: center;
}

.car-input:focus,
.car-select:focus,
.car-textarea:focus {
    outline: none;
    border-color: var(--car-marron);
}

/* Estado de error del campo. Clase y no un selector por id: los id
   msg-error-* del carrito los mueve el JS y colgarse de ellos ataria la hoja
   a esa implementacion. */
.car-input.is-error,
.car-select.is-error,
.car-textarea.is-error {
    border-color: var(--car-error);
}

.car-error {
    display: block;
    font-size: 12px;
    color: var(--car-error);
    line-height: 1.4;
}

/* Boton macizo de marca. Sin radio y sin sombra: es la linea de la casa. */
/* EL GLOBO DE WHATSAPP TAPABA EL BOTÓN DE PAGAR.
   Vive en includes/footer.php con `position:fixed;bottom:30px;right:10px` en
   línea, es global y está aprobado en el resto del sitio, así que no se toca
   ahí. Medido a 414px: el globo ocupa x 340-404 / y 802-866 y PAGAR x 178-398 /
   y 832-884; se pisan en la esquina derecha del botón y encima tapan la línea
   de "Precios en soles con IGV incluido...", que además es lo último de la
   página y no se puede desplazar más para verla.

   Sólo en el carrito, el globo sube por encima de esa zona. Va con :has() sobre
   el body porque el enlace NO es hijo de .car-carrito -cuelga del body-, y
   lleva !important porque compite contra un estilo en línea. :has() va en una
   regla SOLA, nunca dentro de una lista de selectores: ahí un navegador que no
   lo entienda tiraría el grupo entero. */
body:has(.car-carrito) a[href*="api.whatsapp.com"][style*="fixed"] {
    bottom: 104px !important;
}

.car-boton,
a.car-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: var(--car-marron, #8c6239);
    color: var(--car-blanco, #ffffff);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease;
}

.car-boton:hover,
.car-boton:focus,
a.car-boton:hover,
a.car-boton:focus {
    background: var(--car-marron-hover, #6d4a29);
    color: var(--car-blanco, #ffffff);
}

/* --------------------------------------------------------------------------
   VALIDAR: gris ilegible sobre el marron

   Medido: color #4c4c4c sobre fondo #8c6239, contraste 1.9:1. La causa esta en
   el reboot de bootstrap.min.css:

     a:not([href]):not([tabindex]) { color: inherit; text-decoration: none }

   Un :not() no suma por si mismo, pero SU ARGUMENTO si, y [href] y [tabindex]
   pesan como una clase cada uno. O sea (0,2,1): dos de clase y uno de
   elemento. Le gana a .car-boton (0,1,0) y tambien a a.car-boton (0,1,1), que
   es por lo que el primer intento no cambio nada.

   El color heredado que impone ese 'inherit' es el de .car-carrito, #4c4c4c,
   que es exactamente lo medido. Y encaja con lo unico raro del caso: VALIDAR
   es el unico .car-boton que es un <a>, y ademas un <a> SIN href, que es justo
   lo que ese selector busca. PAGAR es un <button> y por eso se lee.

   Aqui se empata a (0,2,1) y se gana por orden, porque carrito.css se carga
   despues de bootstrap. No se usa !important: el dia que alguien reordene las
   hojas, un !important habria escondido el problema en vez de avisarlo.

   ESTO NO ES EL ARREGLO DE VERDAD. Un <a> sin href no es un enlace ni un
   boton: no lo alcanza el tabulador y un lector de pantalla no lo anuncia como
   pulsable, asi que VALIDAR hoy no se puede usar con teclado. Lo correcto es
   que sea <button type="button">, y entonces esta regla sobra. Queda anotado
   para la sesion que lleva D-cupon.txt.
   -------------------------------------------------------------------------- */
.car-carrito a.car-boton {
    color: var(--car-blanco, #ffffff);
}

.car-carrito a.car-boton:hover,
.car-carrito a.car-boton:focus {
    color: var(--car-blanco, #ffffff);
}

/* Enlace secundario en mayusculas (SEGUIR COMPRANDO). */
.car-enlace {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--car-texto-2);
    text-decoration: none;
}

.car-enlace:hover,
.car-enlace:focus {
    color: var(--car-marron);
    text-decoration: none;
}

/* El foco visible se define aparte y con offset negativo: los bloques van
   pegados al filete y un outline por fuera se comeria el borde del vecino.
   No se elimina el foco en ningun sitio: el formulario se recorre con Tab. */
.car-carrito a:focus-visible,
.car-carrito button:focus-visible,
.car-carrito input:focus-visible,
.car-carrito select:focus-visible,
.car-carrito textarea:focus-visible {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

/* SALVO LOS CAMPOS, QUE YA SE SENALAN SOLOS.

   .car-input/.car-select/.car-textarea marcan el foco poniendo su propio borde
   en marron. Sumarles encima el contorno de 2px con offset -2 dibujaba una
   segunda linea marron justo por dentro de la primera: el campo aparecia con
   un borde grueso y sucio, como si estuviera en error.

   Se les quita el contorno y se deja el borde, que ya es la senal. No se
   pierde accesibilidad: el cambio de color del borde es igual de visible y se
   recorre igual con Tab. Los enlaces y los botones si conservan el contorno,
   porque no tienen borde propio que cambiar. */
.car-carrito .car-input:focus-visible,
.car-carrito .car-select:focus-visible,
.car-carrito .car-textarea:focus-visible,
.car-carrito .car-picker-campo:focus-visible,
.car-carrito .car-picker-hora select:focus-visible {
    outline: none;
}

/* --------------------------------------------------------------------------
   Rejilla general: contenido + resumen
   Movil es el estado base (columna unica). La division en dos columnas entra
   en un solo @media mas abajo.
   -------------------------------------------------------------------------- */
.car-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    /* La tarjeta blanca del artboard: 1280px es el ancho exacto del artboard
       1a, medido en su marcado. Sin el tope, en una pantalla ancha la fila de
       producto se estira hasta el borde y el nombre queda a medio metro del
       precio. */
    max-width: 1280px;
    margin: 0 auto;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
}

.car-col {
    padding: 20px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* --------------------------------------------------------------------------
   car-progreso - indicador de avance en movil
   OJO: NO son pestanas. El contenido del carrito es un scroll continuo, los
   cuatro pasos estan uno debajo de otro en la misma pagina. Por eso aqui no
   hay cursor:pointer, ni :hover, ni aspecto de boton: si pareciera pulsable,
   el cliente lo pulsaria y no pasaria nada. Es un marcador de posicion, como
   la barra de progreso de una lectura.
   El marcado correcto es una lista (ol) con aria-current en el paso activo.
   Si algun dia se quisiera navegacion real habria que rehacerlo con enlaces
   ancla y entonces si darle afordancia de pulsable.
   -------------------------------------------------------------------------- */
.car-progreso {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    /* Comparte ancho y borde con .car-grid para que los dos se lean como una
       sola tarjeta: este cierra por arriba y aquel por abajo. */
    max-width: 1280px;
    margin: 0 auto;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    border-bottom: 1px solid var(--car-filete);
}

.car-progreso-paso {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
}

.car-progreso-barra {
    display: block;
    height: 3px;
    background: var(--car-filete);
}

.car-progreso-txt {
    display: block;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--car-texto-3);
    line-height: 1.2;
    /* A 390px las cuatro etiquetas se reparten unos 84px cada una. ENTREGA
       entra justa y DATOS sobra, pero una palabra mas larga tiene que poder
       partirse: sin esto empuja la columna y reaparece el desborde. */
    overflow-wrap: break-word;
}

/* Paso recorrido y paso actual. Se distinguen por color de barra y de texto,
   no por tamano, para que las cuatro columnas midan siempre igual. */
.car-progreso-paso.is-hecho .car-progreso-barra,
.car-progreso-paso.is-activo .car-progreso-barra {
    background: var(--car-marron);
}

.car-progreso-paso.is-activo .car-progreso-txt {
    color: var(--car-marron);
}

.car-progreso-paso.is-hecho .car-progreso-txt {
    color: var(--car-texto-2);
}

/* --------------------------------------------------------------------------
   car-paso - los cuatro bloques numerados
   -------------------------------------------------------------------------- */
.car-paso {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.car-paso-cab {
    display: flex;
    align-items: center;
    gap: 10px;
}

.car-paso-num {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--car-marron);
    color: var(--car-blanco);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1;
}

.car-paso-tit {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--car-marron);
}

/* La linea que remata la cabecera solo existe en escritorio: a 390px no sobra
   ancho y el diseno movil la quita. Se declara aqui oculta y se enciende en el
   @media, no al contrario, para que el estado base sea el estrecho. */
.car-paso-filete {
    display: none;
}

/* --------------------------------------------------------------------------
   car-linea - linea de producto
   En movil el diseno apila: foto + textos + papelera arriba, cantidad y total
   abajo, y el desplegable de complementos al final. En escritorio pasa a una
   rejilla de seis columnas. Se escribe apilado primero.
   -------------------------------------------------------------------------- */
/* La clienta pidio la tarjeta de producto en crema. Es una desviacion del
   artboard 1a, donde la linea es blanca con filete sobre tarjeta blanca; con
   el fondo de pagina ahora en crema oscuro queda una escala de tres tonos:
   pagina #EFE9E2, tarjeta blanca, linea #faf6f1. Si la clienta la queria
   blanca, se borra esta linea de background y vuelve al artboard. */
.car-linea {
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.car-linea-cab {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.car-linea-foto {
    flex: none;
    width: 64px;
    height: 64px;
    display: block;
    background-size: cover;
    background-position: center;
    background-color: var(--car-crema);
}

.car-linea-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.car-linea-nom {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
    color: var(--car-texto);
    line-height: 1.2;
    /* Los nombres de producto vienen de la base y hay algunos largos de verdad
       ("ARREGLO FLORAL CON CHOCOLATES Y PELUCHE"). Sin esto, una palabra sin
       espacios revienta la caja a 390px. */
    overflow-wrap: break-word;
}

.car-linea-cod {
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--car-texto-3);
}

.car-linea-precio {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

.car-linea-antes {
    font-size: 12px;
    color: var(--car-texto-3);
    text-decoration: line-through;
}

.car-linea-ahora {
    font-weight: 600;
    font-size: 16px;
    color: var(--car-naranja);
}

/* Boton de quitar. 34px de lado en el diseno. Queda por debajo de los 44px que
   se recomiendan como minimo tactil, pero es una accion destructiva y
   agrandarla invita al toque accidental; se respeta el diseno y se compensa
   con el espacio libre alrededor. */
.car-linea-quitar {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    color: var(--car-texto-3);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.car-linea-quitar:hover,
.car-linea-quitar:focus {
    border-color: var(--car-marron);
    color: var(--car-marron);
}

.car-linea-quitar svg {
    width: 15px;
    height: 15px;
    display: block;
}

.car-linea-pie {
    display: flex;
    align-items: center;
    gap: 12px;
}

.car-linea-total {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.car-linea-total .car-rotulo {
    letter-spacing: .14em;
}

.car-linea-total-cifra {
    font-weight: 600;
    font-size: 19px;
    color: var(--car-marron);
    /* El importe nunca parte: "S/ 1,087.00" cortado en dos lineas se lee mal y
       es el dato que el cliente revisa. */
    white-space: nowrap;
}

/* Boton que abre los complementos. En movil el diseno lo saca a una barra
   propia de ancho completo y 44px de alto: es un toque frecuente y merece area
   tactil de sobra. */
.car-linea-toggle {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    border-radius: 0;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .08em;
    color: var(--car-marron);
    cursor: pointer;
}

.car-linea-toggle svg {
    width: 14px;
    height: 14px;
    flex: none;
    display: block;
    transition: transform .2s ease;
}

/* El chevron gira al abrir. El estado lo pone el JS sobre el boton, no sobre
   el icono, para que baste una clase. */
.car-linea-toggle.is-abierto svg {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   car-linea-comp - complementos de una linea
   -------------------------------------------------------------------------- */
.car-comps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Blanco, y no crema como antes: la linea que lo contiene ya es crema y dos
   cremas iguales uno dentro de otro no dejan ver donde acaba cada complemento.
   En escritorio ya era blanco; ahora lo es tambien en movil. */
.car-linea-comp {
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.car-linea-comp-cab {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.car-linea-comp-nom {
    font-size: 14px;
    color: var(--car-texto);
    overflow-wrap: break-word;
}

.car-linea-comp-uni {
    margin-left: auto;
    font-size: 12px;
    color: var(--car-texto-3);
    white-space: nowrap;
}

.car-linea-comp-pie {
    display: flex;
    align-items: center;
    gap: 12px;
}

.car-linea-comp-total {
    margin-left: auto;
    font-weight: 600;
    font-size: 15px;
    color: var(--car-marron);
    white-space: nowrap;
}

/* car-comps-anadir - anadir complementos, dentro del panel abierto.

   El marcado ya lo pone en el sitio bueno: DENTRO de .car-comps y al final,
   detras de los complementos que ya hay. Es lo que tiene sentido -"estos son
   tus complementos, anade otro"- y deja la linea de producto con un solo
   control, .car-linea-toggle, como en el artboard.

   Sin estilo salia como un <button> pelado: 776px de ancho, fondo gris del
   navegador y borde de 2px, o sea una barra que partia la tarjeta en dos.
   Dos cosas lo arreglan:

   - align-self: flex-start. .car-comps es una columna flex, y por defecto sus
     hijos se estiran a todo el ancho. De ahi los 776px. Con esto el boton mide
     lo que mide su texto y deja de parecer una barra.
   - fondo y borde propios, que es lo que quita el aspecto de sistema.

   Es una accion secundaria y se ve como tal: sin fondo macizo, filete fino y
   texto en marron. El unico boton macizo de esta pantalla es PAGAR, y conviene
   que siga siendo el unico.

   El + lo dibuja la hoja y no el marcado: es un adorno del control, no texto
   que un lector de pantalla deba leer, y el <button> ya dice "Anadir
   complementos". */
.car-comps-anadir {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--car-marron);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.car-comps-anadir::before {
    content: "+";
    font-size: 15px;
    line-height: 1;
}

.car-comps-anadir:hover,
.car-comps-anadir:focus {
    background: var(--car-blanco);
    border-color: var(--car-marron);
}

/* --------------------------------------------------------------------------
   car-cant - grupo menos / campo / mas
   Sustituye a .cant-grupo y .cant-boton, que viven en etapa2.css y no se
   pueden editar desde aqui. Hay que RETIRAR las clases viejas del marcado: si
   un elemento lleva las dos, etapa2.css y esta hoja pelean por el mismo borde
   y el resultado depende del orden de carga.
   Diferencias con el grupo viejo, y no son gusto: 44px de lado en movil (el
   viejo tenia 30px, por debajo del minimo tactil comodo) y fondo crema en los
   botones para que se lean como botones y no como parte del campo.
   -------------------------------------------------------------------------- */
.car-cant {
    flex: none;
    display: inline-flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid var(--car-filete);
    background: var(--car-blanco);
    line-height: 1;
}

.car-cant-boton {
    flex: none;
    width: 44px;
    border: 0;
    border-radius: 0;
    background: var(--car-crema);
    color: var(--car-marron);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease;
}

.car-cant-boton:hover {
    background: #f2e8dc;
}

.car-cant-boton:active {
    background: #eadfd2;
}

.car-cant-boton[disabled] {
    color: var(--car-texto-3);
    cursor: default;
}

/* Medido: el campo salia de 23px de alto dentro de un grupo de 40, y 28px de
   ancho. Los dos botones si se estiraban (38px = 40 menos los dos filetes),
   asi que el align-items:stretch del grupo funciona; lo que no se estiraba era
   el input. Se le fuerza el alto en vez de confiar en el estirado: height:100%
   se resuelve contra la caja de contenido del grupo, que tiene alto definido
   (44px en movil, 40px desde 768), asi que es determinista.
   El ancho tambien va fijo: 28px aprieta el numero, y con dos digitos y las
   flechas nativas ya suprimidas no hay razon para que sea tan estrecho. */
.car-cant-campo {
    align-self: stretch;
    height: 100%;
    width: 46px;
    flex: 0 0 46px;
    border: 0;
    background: transparent;
    text-align: center;
    line-height: normal;
    font-weight: 600;
    font-size: 16px;
    color: var(--car-texto);
    padding: 0 2px;
    /* Fuera las flechas nativas del input number: ya hay dos botones de verdad
       al lado, y las nativas miden unos 8px y solo estrechan el numero. */
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --------------------------------------------------------------------------
   FILETES VERTICALES DENTRO DEL GRUPO

   Ojo, esto NO sale del artboard: alli los dos botones llevan `border:none` y
   no hay ninguna linea entre las tres celdas. Y alli funciona, porque la
   tarjeta de producto es BLANCA: los botones crema se recortan contra ese
   blanco y el conjunto se lee como un control con dos extremos y un centro.

   Nuestra tarjeta es crema, que es la desviacion que pidio la clienta. Con eso
   la logica de color se da la vuelta: los botones crema pasan a confundirse
   con el fondo de la tarjeta y lo que resalta es el centro blanco, o sea que
   el control se lee como una caja partida con un trozo flotando en medio. El
   sintoma que se reporto es exactamente ese.

   Como el contraste ya no puede hacer el trabajo, lo hace un filete. Es
   ademas lo que hacia la implementacion anterior del sitio (etapa2.css le
   ponia border-left y border-right al campo).

   SI LA TARJETA VUELVE A SER BLANCA, estas dos lineas sobran y conviene
   quitarlas: sin ellas el grupo queda igual que el artboard.

   Los simbolos se quedan en 18px, que es el valor del artboard. Se ven
   pequenos dentro de una celda de 40, pero es lo aprobado; subirlos seria
   desviarse por gusto. */
.car-cant-campo {
    border-left: 1px solid var(--car-filete);
    border-right: 1px solid var(--car-filete);
}

.car-cant-campo::-webkit-outer-spin-button,
.car-cant-campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Variante pequena para la fila de complemento (40px en el diseno). */
.car-cant--comp {
    height: 40px;
}

.car-cant--comp .car-cant-boton {
    width: 40px;
    font-size: 16px;
    /* LA RAYA BLANCA DEBAJO DEL - Y EL +

       `importado-carrito.css` -la hoja que volco el importador del artboard-
       trae `.car-cant--comp .car-cant-boton { height: 32px }`, pero la caja
       mide 40px y con sus dos bordes deja 38 de hueco. Los 6px que sobraban
       no quedaban vacios: se veia el `background` BLANCO de .car-cant por
       debajo de los dos botones crema, o sea una raya blanca pegada al borde
       inferior. Lo reporto la clienta el 12/09/2026.

       Se pone auto en vez de un numero para que el boton lo estire el
       `align-items: stretch` de .car-cant: asi llena lo que haya, y si manana
       cambia el alto de la fila no vuelve a abrirse el hueco. */
    height: auto;
}

.car-cant--comp .car-cant-campo {
    width: 40px;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Codigo de promocion
   -------------------------------------------------------------------------- */
.car-promo {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.car-promo-fila {
    display: flex;
}

/* El campo y el boton VALIDAR forman una sola pieza: el input pierde el borde
   derecho para que no se vea doble filete en la juntura. */
.car-promo-fila .car-input {
    flex: 1 1 auto;
    height: 46px;
    border-right: 0;
}

.car-promo-fila .car-boton {
    flex: none;
    height: 46px;
    padding: 0 18px;
}

.car-promo-msg {
    font-size: 12px;
    line-height: 1.4;
    color: var(--car-texto-2);
}

.car-promo-msg.is-ok {
    color: #2f7d55;
}

.car-promo-msg.is-error {
    color: var(--car-error);
}

/* --------------------------------------------------------------------------
   Paso 2 - Entrega
   -------------------------------------------------------------------------- */
/* 8px, que es lo que separa rotulo y campo en el artboard. */
.car-entrega-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.car-envio-costo {
    height: 46px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
    color: var(--car-marron);
}

/* "Gratis!" cuando hay cupon de delivery. Va en el naranja de los precios,
   que es el color que el sitio ya usa para lo que abarata. */
.car-envio-gratis {
    font-weight: 600;
    font-size: 15px;
    color: var(--car-naranja);
}

/* Aviso informativo: restricciones del distrito, o la explicacion de por que
   caduco la fecha que venia de la ficha. Ambar y no rojo: no es un error del
   cliente, es una condicion del servicio. */
.car-aviso-restriccion {
    background: #fdf6e8;
    border: 1px solid #e8d9b8;
    padding: 10px 12px;
    margin: 0;
    font-size: 12.5px;
    color: #7a5f2a;
    line-height: 1.5;
}

/* Aviso de bloqueo: la compra no puede seguir. Rojo, y reutiliza los colores
   de la caja de error del diseno. */
.car-aviso-bloqueo {
    background: var(--car-error-fondo);
    border: 1px solid var(--car-error-filete);
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--car-error);
    line-height: 1.5;
}

/* Interrogante de ayuda con tooltip de Bootstrap. Discreto a proposito: es
   una aclaracion, no una accion. */
.car-ayuda {
    color: var(--car-texto-3);
    font-size: 13px;
    text-decoration: none;
    margin-left: 4px;
}

.car-ayuda:hover,
.car-ayuda:focus {
    color: var(--car-marron);
    text-decoration: none;
}

/* "Pide hoy, entregamos hasta las 10 p. m." Centrado y en negrita porque en el
   diseno hace de titulo del par fecha/hora, no de nota al pie. */
/* El aviso lo genera aviso_entrega_hoy_html(), que devuelve un
   <p class="aviso-entrega"> ya vestido para la ficha de producto: alli va
   debajo de otra cosa y por eso trae border-top y margenes propios. Aqui es un
   titulo centrado entre dos filetes, asi que se le quitan.
   Y no basta con text-align: ese <p> es display:flex, o sea que a sus hijos no
   les llega; hay que centrarlos con justify-content. */
.car-entrega-aviso .aviso-entrega {
    justify-content: center;
    margin: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 14px;
    color: var(--car-texto);
}

.car-entrega-aviso {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--car-texto);
    text-align: center;
    line-height: 1.4;
}

/* Fecha y hora, uno al lado del otro incluso a 390px: son dos datos que se
   leen juntos y apilarlos alarga mas un formulario que ya es largo. Cada uno
   se queda con unos 175px, de ahi que la letra baje a 13px y el texto se
   recorte con overflow en vez de partirse. */
.car-fechahora {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.car-picker {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    /* 6px, como el artboard. */
    gap: 6px;
}

.car-picker-campo {
    height: 50px;
    width: 100%;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    background: var(--car-blanco);
    /* El padding derecho de 32px reserva el hueco del icono: sin el, un texto
       largo pasa por debajo del calendario y se lee mal. */
    padding: 0 32px 0 12px;
    font-size: 13px;
    color: var(--car-texto);
    text-align: left;
    line-height: 1.25;
    overflow: hidden;
    cursor: pointer;
}

/* Esta regla se escribio pensando en un <button> y llevaba display:flex con
   align-items:center. El elemento real es un <input type="text" readonly> con
   el datepicker encima, y un input es un elemento reemplazado: display:flex
   sobre el no esta definido y cada navegador hace una cosa. Se quita; un input
   con height y line-height ya centra su texto solo. */

/* Estado vacio. Dos formas de llegar a el: la clase, que pone el JS, y el
   placeholder del input, que es como se ve antes de elegir fecha. */
.car-picker-campo.is-vacio {
    color: var(--car-texto-3);
}

.car-picker-campo::placeholder {
    color: var(--car-texto-3);
    opacity: 1;
}

/* Segunda linea bajo el campo: la fecha en palabras (#diaSeleccionado) y la
   nota del horario. Existe para que las dos columnas de .car-fechahora tengan
   el mismo numero de lineas y sus campos queden alineados. */
.car-picker-nota {
    display: block;
    font-size: 11.5px;
    color: var(--car-texto-3);
    line-height: 1.4;
}

/* El desplegable de horarios NO puede llevar clase propia: el servidor
   devuelve el <select> entero y el JS lo mete con
   $('#html_envio_hora').html(...), asi que cualquier clase que pusieramos en
   el marcado desaparece en el primer repintado. Se estiliza desde el
   contenedor, que si sobrevive.
   El alto iguala al del campo de fecha (50px, 52px desde 768px) para que los
   dos campos de la fila queden a la misma altura. */
.car-picker-hora select {
    width: 100%;
    height: 50px;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    /* background-color y no el atajo background: el atajo borraria el
       background-image de la flecha que se dibuja mas arriba. */
    background-color: var(--car-blanco);
    padding: 0 32px 0 12px;
    font-size: 13px;
    color: var(--car-texto);
}

.car-picker-hora select:focus {
    outline: none;
    border-color: var(--car-marron);
}

/* El servidor mete ademas un <input type="hidden" id="bloquear"> dentro del
   contenedor. No estorba, pero conviene que el div no lo cuente como caja. */
.car-picker-hora {
    display: block;
}

.car-picker-campo.is-error {
    border-color: var(--car-error);
}

.car-picker-icono {
    position: absolute;
    right: 11px;
    top: 16px;
    width: 17px;
    height: 17px;
    display: block;
    color: var(--car-marron);
    /* Sin esto, el clic sobre el icono no abre el campo que hay debajo. */
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Quien recibe y donde
   -------------------------------------------------------------------------- */
.car-campos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.car-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* car-locacion - campo condicional de locacion (7 locaciones, 11 campos).
   CUIDADO, esto es lo mas fragil de la hoja: el JS del carrito muestra y
   oculta estos bloques con .css("display","block") y .css("display","none"),
   es decir con estilo EN LINEA, que gana a cualquier regla de aqui.
   Por eso esta clase NO declara display. Si lo declarara seria letra muerta en
   el estado visible, y encima nos pelearia con el JS. El display lo manda el
   JS; nosotros solo ponemos lo de dentro.
   Y por eso lo de dentro tiene que funcionar como BLOQUE, no como flex: el JS
   fuerza display:block y un gap de flex no se aplicaria. La separacion entre
   la etiqueta y el campo va con margin.
   Como hijo de una rejilla, display:block no rompe nada: sigue siendo item de
   la rejilla. */
.car-locacion > .car-rotulo {
    margin-bottom: 6px;
}

.car-locacion > .car-error {
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   car-mensaje - mensaje de la tarjeta
   -------------------------------------------------------------------------- */
.car-mensaje {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-mensaje-toggle {
    align-self: flex-start;
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--car-marron);
    cursor: pointer;
    text-align: left;
}

/* Pista con el estado ("12 caracteres escritos"). En minusculas y sin tracking
   a proposito: si compartiera el tratamiento del rotulo, el ojo leeria las dos
   partes como un solo titulo. */
/* 500 y no 400: es el peso que le da el artboard. Distingue la pista del
   texto corriente sin llegar al 600 del rotulo que tiene al lado. */
.car-mensaje-hint {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--car-texto-3);
}

.car-mensaje-toggle svg {
    width: 15px;
    height: 15px;
    flex: none;
    display: block;
    transition: transform .2s ease;
}

.car-mensaje-toggle.is-abierto svg {
    transform: rotate(180deg);
}

.car-mensaje-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
}

.car-mensaje-campo {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.car-chars {
    font-size: 11.5px;
    color: var(--car-texto-3);
}

/* --------------------------------------------------------------------------
   car-sugerencias - dedicatorias de ejemplo
   En el diseno de movil (1b) este bloque NO aparece; en escritorio (1a) es una
   columna al lado del textarea. Decision propia: se conserva tambien en movil,
   pero debajo del campo y a una columna. Quitarlo dejaria al cliente de movil
   sin la ayuda justo donde mas cuesta escribir, y son tres lineas de texto: no
   estorba.
   -------------------------------------------------------------------------- */
.car-sugerencias {
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    padding: 14px 16px;
}

.car-sugerencias .car-rotulo {
    letter-spacing: .14em;
    margin-bottom: 8px;
}

/* La lista crece con su propio scroll, no empujando la página.
   Aniversario trae siete frases y medía 588px: al abrirla, la página crecía de
   2141 a 2688 y el contenido de abajo -forma de pago- se iba al fondo. Con el
   tope, la lista mide siempre lo mismo y lo que hay debajo no se mueve.
   overscroll-behavior corta el encadenado: al llegar al final de la lista la
   rueda deja de arrastrar la página detrás, que es la otra mitad de la
   sensación de que el carrito se va solo. */
.car-sugerencias-lista {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Sitio para la barra: sin esto el texto queda pegado a ella. */
    padding-right: 6px;
}

/* Cada sugerencia rellena el textarea al pulsarla: es un boton de verdad, no
   un parrafo. Se le quita el aspecto de boton pero se le deja el cursor y el
   alineado a la izquierda, que un button trae centrado por defecto. */
.car-sugerencia {
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    font-size: 13px;
    color: var(--car-texto-2);
    line-height: 1.45;
    cursor: pointer;
}

.car-sugerencia:hover,
.car-sugerencia:focus {
    color: var(--car-marron);
}

/* --------------------------------------------------------------------------
   Paso 3 - Comprobante (BOLETA / FACTURA)
   -------------------------------------------------------------------------- */
.car-opciones {
    display: flex;
    gap: 8px;
}

/* Son radios de verdad por debajo. El input real se deja accesible al lector
   de pantalla y al teclado en vez de display:none, que lo saca del orden de
   tabulacion: se estira invisible sobre la etiqueta y el foco se pinta en
   esta con :focus-within. */
.car-opcion {
    flex: 1 1 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    padding: 0 12px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--car-texto-2);
    cursor: pointer;
}

.car-opcion input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    cursor: pointer;
}

.car-opcion-dot {
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--car-filete);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El punto interior existe siempre y solo cambia de color. Si apareciera y
   desapareciera, el circulo saltaria un pixel al marcarlo. */
.car-opcion-dot::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    display: block;
}

.car-opcion.is-activa,
.car-opcion:has(input:checked) {
    background: var(--car-crema);
    border-color: var(--car-marron);
    color: var(--car-marron);
}

.car-opcion.is-activa .car-opcion-dot,
.car-opcion:has(input:checked) .car-opcion-dot {
    border-color: var(--car-marron);
}

.car-opcion.is-activa .car-opcion-dot::after,
.car-opcion:has(input:checked) .car-opcion-dot::after {
    background: var(--car-marron);
}

/* :has() no llega a navegadores viejos. La clase is-activa la pone el JS y
   hace el mismo trabajo, asi que la parte con :has() es mejora progresiva y no
   requisito: el marcado debe seguir poniendo is-activa. */
.car-opcion:focus-within {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

/* Campo apagado: no hace falta rellenarlo con la locación elegida.
   Hoy lo pone assets/js/carrito-recojo-campos.js sobre Dirección, Referencia y
   el selector de locación cuando el pedido se recoge en el taller.

   Es una clase propia y no una regla sobre [readonly] o :disabled a secas: en
   el carrito hay otros campos que nacen deshabilitados por motivos distintos
   -los once condicionales de locación, que ademas estan ocultos- y atenuarlos
   todos por igual pintaria de gris cosas que nadie ha apagado.

   No se baja la opacidad del texto por debajo de lo legible: el campo sigue
   diciendo lo que la persona escribio antes de cambiar a recojo, y tiene que
   poder leerlo para saber que no se ha perdido. */
.car-input.car-campo--apagado,
.car-select.car-campo--apagado {
    /* El crema solo (#faf6f1) no se distingue del blanco del formulario: se
       probó en pantalla y el campo seguía pareciendo normal, que es
       exactamente lo que se venía a arreglar. Con el filete de fondo y el
       borde en el mismo tono, el campo se lee apagado de un vistazo. */
    background: var(--car-filete);
    border-color: var(--car-filete);
    color: var(--car-texto-2);
    cursor: not-allowed;
}

.car-input.car-campo--apagado::placeholder {
    color: var(--car-texto-2);
    opacity: .65;
}

.car-select.car-campo--apagado {
    opacity: 1; /* Chrome atenua los select deshabilitados hasta hacerlos ilegibles. */
}

/* Campos de factura (RUC y razon social). */
.car-factura {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   Paso 4 - Forma de pago
   -------------------------------------------------------------------------- */
.car-pagos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.car-pago {
    position: relative;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    cursor: pointer;
}

.car-pago input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    cursor: pointer;
}

.car-pago .car-opcion-dot {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.car-pago .car-opcion-dot::after {
    width: 8px;
    height: 8px;
}

.car-pago-icono {
    flex: none;
    width: 26px;
    height: 26px;
    display: block;
    color: var(--car-marron);
}

.car-pago-txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.car-pago-tit {
    font-weight: 600;
    font-size: 14px;
    color: var(--car-texto);
}

.car-pago-desc {
    font-size: 12px;
    color: var(--car-texto-2);
    line-height: 1.5;
}

.car-pago.is-activa,
.car-pago:has(input:checked) {
    background: var(--car-crema);
    border-color: var(--car-marron);
}

.car-pago.is-activa .car-opcion-dot,
.car-pago:has(input:checked) .car-opcion-dot {
    border-color: var(--car-marron);
}

.car-pago.is-activa .car-opcion-dot::after,
.car-pago:has(input:checked) .car-opcion-dot::after {
    background: var(--car-marron);
}

.car-pago:focus-within {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   car-resumen - resumen del pedido
   En movil es un panel mas al final del scroll. En escritorio se convierte en
   la columna derecha pegajosa (ver el @media de 992px).
   -------------------------------------------------------------------------- */
.car-resumen {
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-resumen-tit {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--car-marron);
}

.car-resumen-filas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-resumen-fila {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13.5px;
    color: var(--car-texto-2);
}

/* El importe de cada fila va a 500, como en el artboard: destaca sobre el
   concepto de la izquierda sin competir con el TOTAL, que es lo unico a 600
   en esta columna. */
.car-resumen-fila > span:last-child {
    margin-left: auto;
    font-weight: 500;
    color: var(--car-texto);
    white-space: nowrap;
}

/* El rotulo de esta caja lleva .16em y no los .18em del rotulo generico. Es el
   valor del artboard, comprobado: en el 1a hay DOS textos "Entrega" y son
   distintos a proposito. El del paso 2 es un titulo de bloque -14px, .18em, en
   el marron de marca- y este es el rotulo de una caja dentro del resumen
   -11px, .16em, en el marron claro-. Con menos tamano, dos centesimas menos de
   tracking mantienen la misma sensacion de separacion entre letras. */
.car-resumen-entrega > .car-rotulo {
    letter-spacing: .16em;
}

/* Caja blanca con la fecha y el destino ya elegidos. */
.car-resumen-entrega {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    padding: 14px 16px;
}

.car-resumen-entrega-dato {
    font-size: 14px;
    color: var(--car-texto);
    line-height: 1.45;
}

.car-resumen-entrega-dest {
    font-size: 13px;
    color: var(--car-texto-2);
    line-height: 1.45;
}

/* car-resumen-falta - lo que queda por completar (fecha, horario, quien
   recibe). Este bloque NO esta en el diseno: el artboard solo trae una caja de
   error generica. Se anade porque el carrito valida al enviar y hoy el cliente
   solo se entera de que falta algo cuando ya pulso PAGAR, con los campos
   repartidos por cuatro pasos. La lista se lo dice antes.
   Reutiliza los colores de la caja de error del diseno para no inventar
   paleta. */
.car-resumen-falta {
    background: var(--car-error-fondo);
    border: 1px solid var(--car-error-filete);
    padding: 12px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--car-error);
    line-height: 1.5;
}

/* La caja se pinta siempre porque el <ul> esta en el marcado desde el
   principio y lo rellena el JS. Cuando no falta nada se quedaba una banda rosa
   de 26px sin texto.
   :empty aqui es exacto y no aproximado: el marcado emite <ul ...></ul> sin
   NADA dentro, ni un salto de linea, y :empty solo casa si no hay hijos ni
   nodos de texto. En cuanto el JS mete el primer <li>, deja de casar y la caja
   aparece sola. Si algun dia el marcado deja un espacio ahi dentro, :empty
   dejaria de funcionar: entonces lo correcto es que el PHP no emita el <ul> o
   que el JS ponga el atributo hidden. */
.car-resumen-falta:empty {
    display: none;
}

/* EL TAMANO SE DECLARA AQUI, EN EL <li>, Y NO SOLO EN EL <ul>.

   El 12.5px del contenedor llegaba al li solo por HERENCIA, e index.css trae
   un "* { font-size: 16px }" que alcanza a cada li DIRECTAMENTE. Una regla
   directa gana siempre a un valor heredado, por floja que sea su
   especificidad: el universal no compite contra el .car-resumen-falta, compite
   contra "nada". Resultado: los items salian a 16 y cantaban al lado del 14.5
   del resumen y el 13 de la caja de entrega. */
.car-resumen-falta li {
    list-style: none;
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Vineta dibujada con ::before: el reset de index.css pone list-style:none
   sobre todos los li del sitio, asi que un list-style aqui no se veria. */
.car-resumen-falta li::before {
    content: "\00B7";
    flex: none;
}

/* Los enlaces de la lista llevan al campo que falta. */
.car-resumen-falta a {
    color: var(--car-error);
    text-decoration: underline;
}

/* car-resumen-total - el TOTAL grande del artboard 1a.
   Va justo despues del filete y ANTES de la caja de entrega y de los terminos,
   que es el orden que aprobo la clienta. Es distinto del total de la barra:
   ver el comentario largo de .car-barra.
   Oculto en movil, donde el total vive en la barra fija. */
.car-resumen-total {
    display: none;
}

.car-resumen-total-cifra {
    font-weight: 600;
    font-size: 34px;
    line-height: 1;
    color: var(--car-marron);
    white-space: nowrap;
}

/* main.js repinta el total con
     $(".valor_total").html('S/<h1 class="prc-h1">87</h1>.00')
   y ese <h1> aparece en caliente, en cuanto el cliente cambia una cantidad.
   (Desde el 2026-09-11 el handler del COMPLEMENTO si recarga al terminar, para
   que el precio de su linea deje de mentir; pero el <h1> se inyecta antes de la
   recarga, y el de PRODUCTO sigue repintando sin recargar, asi que esto hace
   falta igual.)
   Un h1 es display:block, asi que parte el importe en tres lineas: "S/", el
   numero y ".00". Ademas arrastra el font-size de .prc-h1 desde index.css
   (25px, rebajado a 16px por una regla posterior), que no es el tamano de
   ninguna de las dos cifras de aqui.
   No se puede tocar el JS desde una hoja de estilos, y .valor_total tiene que
   seguir en el marcado porque es el asidero del repintado. Se neutraliza el
   h1 inyectado. */
.car-barra-cifra h1,
.car-resumen-total-cifra h1 {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    display: inline;
}

.car-terminos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--car-texto-2);
    line-height: 1.5;
    cursor: pointer;
}

.car-terminos input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--car-marron);
}

.car-nota {
    font-size: 12px;
    color: var(--car-texto-3);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   car-barra - total y PAGAR
   AQUI ESTA LA DECISION MAS GORDA DE LA HOJA.

   El problema: en movil el resumen baja al final, detras de un formulario de
   veintitantos campos. Si PAGAR vive solo ahi, el cliente que ya termino de
   rellenar tiene que seguir bajando para encontrarlo, y el que quiere ver el
   total mientras rellena tiene que bajar y volver a subir.

   Descartado: sticky. Un position:sticky solo pega mientras su contenedor esta
   en pantalla; con el resumen al final del scroll, la barra apareceria justo
   cuando ya se ve el resumen, o sea cuando ya no hace falta.

   Elegido: la MISMA pieza cambia de papel segun el ancho.
   - En movil va fija abajo (position:fixed): total y PAGAR siempre a mano,
     desde el primer campo. Se reserva hueco al final de la pagina con
     padding-bottom para que no tape el ultimo campo.
   - Desde 768px deja de ser fija y se queda como un bloque normal dentro de la
     columna del resumen, que desde 992px ya es pegajosa de por si.

   Asi hay UN SOLO boton PAGAR en el marcado. Dos botones (uno en la barra y
   otro en el resumen) obligarian a duplicar el submit y a mantener los dos
   sincronizados.

   POR QUE EL TOTAL SI ESTA DOS VECES Y EL BOTON NO.

   El artboard 1a intercala: filete, TOTAL, caja de entrega, avisos, terminos,
   PAGAR. O sea que en escritorio el total y el boton NO son vecinos: entre
   ellos hay tres bloques. Un solo envoltorio que los contuviera a los dos
   tendria que arrastrar tambien esos tres bloques, y en movil la barra fija
   acabaria midiendo media pantalla.

   Asi que se separan: .car-resumen-total es el TOTAL de escritorio, en su
   sitio del artboard, y .car-barra-total es el de la barra fija de movil.
   Cada uno se muestra donde toca y el otro se oculta; nunca se ven los dos.

   Duplicar el total es barato y no hay que mantenerlo: main.js repinta con
   $(".valor_total"), un selector de CLASE, que actualiza todas las copias a la
   vez. Basta con que las dos cifras lleven esa clase.

   Duplicar el boton no seria barato: son dos submit del mismo formulario y
   cualquier estado (deshabilitado mientras se envia, texto de "procesando")
   habria que llevarlo a los dos. Por eso el boton sigue siendo uno, colocado
   despues de los terminos, que es donde lo pone el artboard.

   DOS AVISOS PARA EL MARCADO:
   1. position:fixed se calcula respecto al elemento que contiene, y no
      respecto a la ventana, si algun padre tiene transform, filter o
      perspective. car-barra no puede ir dentro de un contenedor animado.
   2. La casilla de terminos se queda arriba, en car-resumen, no en la barra.
      Si el cliente pulsa PAGAR sin aceptarlos, la validacion que ya existe lo
      avisa; meter la casilla en la barra fija la haria demasiado alta.
   -------------------------------------------------------------------------- */
.car-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Por encima del contenido pero por debajo de modales y del aviso de
       cookies. Si el aviso de cookies tapara la barra, es el aviso el que debe
       ir mas alto: se cierra y desaparece, la barra no. */
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--car-barra-alto);
    padding: 12px 16px;
    background: var(--car-crema);
    border-top: 1px solid var(--car-filete);
}

.car-barra-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.car-barra-cifra {
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: var(--car-marron);
    white-space: nowrap;
}

.car-boton-pagar {
    margin-left: auto;
    flex: 1 1 auto;
    /* Tope de ancho: en una tableta en vertical un PAGAR de 500px de largo se
       ve roto. */
    max-width: 220px;
    height: 52px;
    font-size: 13px;
    letter-spacing: .2em;
}

/* Hueco al final para que la barra fija no tape el ultimo elemento. Va sobre
   la raiz de la vista y no sobre body: body es del sitio entero y esta hoja
   solo manda en el carrito. */
.car-carrito {
    padding-bottom: calc(var(--car-barra-alto) + 16px);
}

/* --------------------------------------------------------------------------
   Desde 768px - se ensancha la tipografia y las lineas se ponen en fila
   Aun a una columna: el resumen sigue abajo hasta 992px, porque los 372px de
   la columna derecha no caben antes sin estrujar el contenido.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    .car-col {
        padding: 36px 40px 44px;
        gap: 38px;
    }

    .car-paso {
        gap: 18px;
    }

    .car-paso-cab {
        gap: 14px;
    }

    .car-paso-num {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .car-paso-tit {
        font-size: 14px;
        letter-spacing: .18em;
    }

    /* Ahora si hay ancho para la linea que remata la cabecera. */
    .car-paso-filete {
        display: block;
        flex: 1 1 auto;
        height: 1px;
        background: var(--car-filete);
    }

    .car-rotulo {
        font-size: 11px;
        letter-spacing: .18em;
    }

    .car-panel {
        padding: 24px;
        gap: 22px;
    }

    .car-input {
        padding: 0 14px;
    }

    /* Artboard: el desplegable lleva 12px a la izquierda, dos menos que los
       campos de texto. El hueco de 32px a la derecha no sale del artboard: es
       el sitio de la flecha que dibuja esta hoja, porque index.css se la quita
       a todos los <select> del sitio con appearance:none. */
    .car-select {
        padding: 0 32px 0 12px;
    }

    .car-textarea {
        padding: 13px 14px;
    }

    /* La linea de producto pasa a una rejilla de seis columnas. Las cinco
       columnas fijas llevan ancho propio y solo la de textos es elastica
       (minmax(0,1fr)): el 0 del minmax es lo que le permite encogerse en vez
       de empujar a las demas. */
    .car-linea {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr) 136px 116px 128px 40px;
        gap: 18px;
        align-items: center;
        padding: 22px 24px;
    }

    /* Los agrupadores que hacian falta en movil se disuelven: sus hijos pasan a
       ser items directos de la rejilla. display:contents es justo eso. */
    .car-linea-cab,
    .car-linea-pie {
        display: contents;
    }

    .car-linea-foto {
        width: 88px;
        height: 88px;
    }

    .car-linea-info {
        gap: 7px;
    }

    /* Alto minimo de dos lineas.
       Un nombre largo parte en dos ("BOX COFFEE / LOVERS") y su tarjeta crece,
       asi que la lista de productos pierde el ritmo: unas tarjetas altas y
       otras bajas sin motivo visible.
       Se reserva el alto de dos lineas SIEMPRE, en vez de recortar el nombre
       con puntos suspensivos. Recortar esconderia parte del nombre del
       producto justo en la pantalla donde el cliente confirma que esta
       comprando, y ahi el nombre completo vale mas que la simetria.
       41px = 17px de letra por 1.2 de interlineado, dos veces.
       Solo en escritorio: en movil las tarjetas van una debajo de otra a
       ancho completo y reservar alto solo dejaria un hueco. */
    .car-linea-nom {
        font-size: 17px;
        min-height: 41px;
    }

    .car-linea-cod {
        font-size: 12px;
        letter-spacing: .1em;
    }

    /* En escritorio el precio tiene columna propia, alineado a la derecha y en
       dos lineas (antes / ahora), no en linea como en movil. */
    .car-linea-precio {
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
        margin-top: 0;
        text-align: right;
    }

    .car-linea-antes {
        font-size: 13px;
    }

    .car-linea-ahora {
        font-size: 20px;
    }

    /* El total de linea pierde su rotulo: en la rejilla, la posicion y el
       alineado a la derecha ya dicen que es. */
    .car-linea-total {
        margin-left: 0;
    }

    .car-linea-total .car-rotulo {
        display: none;
    }

    .car-linea-total-cifra {
        font-size: 20px;
    }

    .car-linea-quitar {
        justify-self: end;
    }

    .car-linea-quitar svg {
        width: 16px;
        height: 16px;
    }

    .car-cant {
        height: 40px;
        width: 126px;
    }

    .car-cant-boton {
        width: 40px;
    }

    .car-cant-campo {
        flex: 1 1 auto;
        width: auto;
        min-width: 40px;
    }

    /* La barra de progreso es el indicador de scroll de movil y el artboard 1a
       no la lleva: en escritorio los cuatro pasos se ven de una sola pasada y
       no hay nada que indicar. (Era el defecto 4 que quedaba abierto.) */
    .car-progreso {
        display: none;
    }

    /* El desplegable de complementos vuelve a ser un enlace discreto dentro de
       la celda de textos, no una barra de ancho completo: en escritorio no hay
       problema de punteria y una barra ahi partiria la rejilla. */
    /* Valores del artboard: hueco 7px, letter-spacing .06em y margin-top 3px.
       Alli este control es el TERCER HIJO de la columna de textos, debajo del
       codigo. Aqui el marcado lo pone como hijo directo de .car-linea, asi que
       la rejilla lo manda a una segunda fila y eso suma el hueco de la rejilla
       (18px) mas su alto: unos 37px de mas POR CADA PRODUCTO.
       No se fuerza con grid-row:1 + align-self:end porque entonces comparte
       celda con los textos y se solapan en cuanto el nombre ocupa dos lineas,
       que pasa a menudo. El arreglo es mover una linea en A-productos.txt y
       meter el boton DENTRO de .car-linea-info; esta regla vale igual en las
       dos posiciones. Anotado en docs/rediseno-carrito/diferencias.md. */
    .car-linea-toggle {
        grid-column: 2;
        justify-self: start;
        align-self: start;
        height: auto;
        margin-top: 3px;
        gap: 7px;
        background: transparent;
        border: 0;
        padding: 0;
        letter-spacing: .06em;
    }

    /* El panel de complementos ocupa las seis columnas y se pega al borde de la
       caja con margenes negativos que compensan el padding de la linea. Asi el
       filete superior llega de lado a lado, como en el diseno. */
    /* El artboard separa 14px el rotulo de la primera fila. .car-comps es una
       columna flex con gap 10, asi que faltan 4. */
    .car-comps > .car-rotulo {
        margin-bottom: 4px;
    }

    .car-comps {
        grid-column: 1 / -1;
        margin: 0 -24px -22px;
        padding: 18px 24px 20px;
        background: var(--car-crema);
        border-top: 1px solid var(--car-filete);
        gap: 10px;
    }

    /* Cada complemento tambien pasa a rejilla. */
    .car-linea-comp {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 126px 96px 34px;
        gap: 18px;
        align-items: center;
        background: var(--car-blanco);
        padding: 12px 14px;
    }

    .car-linea-comp-cab {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .car-linea-comp-nom {
        font-size: 14.5px;
        font-weight: 500;
    }

    .car-linea-comp-uni {
        margin-left: 0;
    }

    .car-linea-comp-pie {
        display: contents;
    }

    .car-linea-comp-total {
        margin-left: 0;
        text-align: right;
    }

    /* En el artboard la papelera del complemento es mas pequena que la de la
       linea de producto: 30x30 con icono de 14. Reutilizaba la grande, que
       entraba justa en la columna de 34px y sin holgura. */
    .car-linea-comp .car-linea-quitar {
        width: 30px;
        height: 30px;
    }

    .car-linea-comp .car-linea-quitar svg,
    .car-linea-comp .car-linea-quitar img {
        width: 14px;
        height: 14px;
    }

    .car-cant--comp {
        height: 34px;
    }

    .car-cant--comp .car-cant-boton {
        width: 34px;
    }

    /* Promocion: el campo recupera su ancho fijo del diseno y la fila deja de
       ocupar todo el ancho disponible. */
    .car-promo-fila .car-input {
        flex: 0 0 230px;
        height: 44px;
    }

    .car-promo-fila .car-boton {
        height: 44px;
        padding: 0 26px;
        font-size: 12.5px;
        letter-spacing: .16em;
    }

    .car-promo-msg {
        font-size: 12.5px;
        max-width: 330px;
    }

    /* Promocion y "seguir comprando" comparten fila. El enlace se empuja a la
       derecha y baja un poco para alinearse con el campo, no con su rotulo. */
    .car-promo-pie {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 14px;
    }

    .car-promo-pie .car-enlace {
        margin-left: auto;
        padding-top: 26px;
    }

    /* Distrito y costo, uno al lado del otro. */
    .car-entrega-fila {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
    }

    .car-entrega-fila .car-entrega-campo {
        flex: 1 1 260px;
        gap: 8px;
    }

    .car-entrega-fila .car-entrega-campo--costo {
        flex: 0 0 auto;
        padding-top: 2px;
    }

    .car-entrega-aviso {
        font-size: 15px;
    }

    .car-fechahora {
        gap: 14px;
    }

    .car-picker-campo {
        height: 52px;
        padding: 0 46px 0 16px;
        font-size: 15px;
    }

    /* El icono va con `.car-carrito` delante, y no suelto como el resto del
       bloque, por un motivo concreto:

       El calendario del fondo lo declara `.car-picker-campo` a 17px y 12px,
       una regla SIN media que vive mas abajo en esta misma hoja (busca
       "el icono deja de ser un elemento posicionado"). Las dos son (0,1,0),
       porque envolver una regla en @media NO le suma especificidad, asi que
       en el empate ganaba la que va despues en el fichero: la de 17px, tambien
       en escritorio.

       Medido en QA a 1440px antes de tocarlo: la fecha salia a 17px y 12px
       mientras el reloj de al lado -.car-hora-campo, que no tiene ninguna
       regla que lo pise- salia a 19px y 16px. Los dos iconos de la misma fila
       con dos tamanos distintos.

       Con `.car-carrito` delante son (0,2,0) y el empate desaparece, sin
       depender de en que orden queden los bloques.

       Artboard: icono de 19px a 16px del borde. En movil se queda en 17 y 12,
       que es lo que pide el ancho estrecho. */
    .car-carrito .car-picker-campo {
        background-position: right 16px center;
        background-size: 19px 19px;
    }

    /* El desplegable de horarios sigue al campo de fecha para que la fila no
       quede desnivelada. */
    .car-picker-hora select {
        height: 52px;
        padding: 0 32px 0 16px;
        font-size: 15px;
    }

    .car-picker-nota {
        font-size: 12px;
    }

    .car-picker-icono {
        right: 16px;
        top: 17px;
        width: 19px;
        height: 19px;
    }

    /* Los datos del destinatario pasan a dos columnas. Los modificadores
       --ancho son para los campos que ocupan la fila entera (direccion,
       referencia). */
    .car-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .car-campo--ancho,
    .car-locacion--ancho {
        grid-column: 1 / -1;
    }

    /* Mensaje y sugerencias, en paralelo. El textarea manda (flex 1 1 380px) y
       las sugerencias se conforman con 260px. */
    .car-mensaje-cuerpo {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .car-mensaje-campo {
        flex: 1 1 380px;
    }

    .car-sugerencias {
        flex: 0 1 260px;
    }

    .car-mensaje-toggle {
        font-size: 11px;
        letter-spacing: .18em;
        gap: 10px;
    }

    .car-chars {
        font-size: 12px;
    }

    /* Comprobante: pastillas de ancho propio en fila, no dos botones
       estirados. */
    .car-opciones {
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .car-opcion {
        flex: 0 0 auto;
        height: 42px;
        padding: 0 18px;
        font-size: 12.5px;
    }

    /* EL HUECO EN BLANCO DE FACTURA ERA ESTA LÍNEA.
       Aquí había un `flex: 1 1 320px`, escrito pensando que 320px sería el
       ANCHO de la fila de campos. Pero .car-factura no es hijo de .car-opciones:
       es hijo de .car-paso, que es display:flex con flex-direction:column. En un
       contenedor en columna el flex-basis es la ALTURA, así que el bloque medía
       320px de alto para tres campos de 42, y el flex-grow:1 encima le daba el
       espacio sobrante del paso. De ahí el vacío que aparecía debajo al elegir
       FACTURA. No se sustituye por nada: sin declarar flex, el bloque mide lo
       que miden sus campos. */
    .car-factura {
        flex-direction: row;
        gap: 10px;
    }

    /* Los campos se reparten el ancho. El flex va en el envoltorio y no en el
       input porque bootstrap-material envuelve cada input en un
       span.bmd-form-group al cargar: el hijo directo de la fila —y por tanto el
       item flexible— es ese span, no el input. Se nombran los dos para que la
       regla siga valiendo si algún día el envoltorio deja de aparecer. */
    .car-factura > .bmd-form-group,
    .car-factura > .car-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .car-factura .car-input {
        height: 42px;
        width: 100%;
    }

    /* El RUC son once dígitos: no necesita el mismo ancho que la razón social.
       Se limita el input y no su envoltorio para no depender de :has(), que en
       una lista de selectores tumbaría la regla entera donde no exista. */
    .car-factura .car-input--ruc {
        max-width: 150px;
    }

    /* EL HUECO ANTES DE "DIRECCIÓN FISCAL" SALÍA DE LA REGLA DE ARRIBA.
       Capar el input a 150px no encoge el span.bmd-form-group que lo envuelve:
       ese span sigue siendo un item flexible con `flex: 1 1 auto` y se lleva su
       tercio del ancho igual que los otros dos. Medido a 1280px: envoltorios de
       273 / 261 / 273, con el input del RUC ocupando 150 de sus 261. Los 111px
       sobrantes, más los 10 del gap, son los 121px de vacío que la clienta veía
       entre el RUC y la dirección fiscal.

       Se encoge el ENVOLTORIO, que es el item que reparte. Va por posición y no
       por :has(#comprobante_ruc) para no depender de esa pseudoclase: el orden
       de los tres campos —razón social, RUC, dirección— está fijado en
       carrito-de-compras.php:2099-2104, justo uno debajo de otro. */
    .car-factura > *:nth-child(2) {
        flex: 0 0 auto;
    }

    .car-pagos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .car-pago {
        gap: 14px;
        padding: 20px;
    }

    .car-pago-tit {
        font-size: 14.5px;
    }

    .car-pago-desc {
        font-size: 12.5px;
    }

    /* La barra deja de ser fija en cuanto hay pantalla: a partir de aqui el
       formulario ya no obliga a un scroll tan largo y una barra fija solo
       robaria alto. Se quita tambien el hueco reservado. */
    /* La barra deja de ser fija en cuanto hay pantalla: a partir de aqui el
       formulario ya no obliga a un scroll tan largo y una barra fija solo
       robaria alto. Se queda con el boton y nada mas, en su sitio del
       artboard: despues de los terminos. Se quita tambien el hueco
       reservado al final de la pagina. */
    .car-barra {
        position: static;
        z-index: auto;
        min-height: 0;
        padding: 0;
        background: transparent;
        border-top: 0;
        display: block;
    }

    .car-carrito {
        padding-bottom: 0;
    }

    /* El total de la barra desaparece: en escritorio manda
       .car-resumen-total, que va mas arriba. */
    .car-barra-total {
        display: none;
    }

    /* Y aqui aparece el TOTAL del artboard, entre el filete y la caja de
       entrega. align-items:flex-end asienta el rotulo pequeno sobre la linea
       de base de la cifra grande en vez de centrarlo contra ella. */
    .car-resumen-total {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
    }

    .car-resumen-total .car-rotulo {
        font-size: 12px;
        letter-spacing: .2em;
    }

    .car-boton-pagar {
        display: flex;
        width: 100%;
        margin-left: 0;
        max-width: none;
        height: 56px;
        font-size: 14px;
        letter-spacing: .24em;
    }
}

/* --------------------------------------------------------------------------
   Desde 992px - dos columnas y resumen pegajoso
   372px es el ancho del diseno para la columna derecha. A 992px deja unos
   620px para el contenido, lo justo para que la rejilla de seis columnas de la
   linea de producto no se estruje.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    .car-grid {
        grid-template-columns: minmax(0, 1fr) 372px;
    }

    /* La columna se pega arriba mientras el formulario pasa por debajo. Tres
       detalles que no son obvios:
       - align-self:start es imprescindible. Por defecto un item de rejilla se
         estira a todo el alto de la fila, y un elemento estirado nunca tiene
         nada que "pegar": el sticky no hace efecto.
       - top:0 vale porque el sitio no lleva cabecera fija. Si algun dia se fija
         el menu, este 0 hay que subirlo al alto de esa cabecera.
       - la altura maxima y el overflow no son adorno: si el resumen creciera
         mas que la pantalla (con la lista de lo que falta abierta, por
         ejemplo), su final quedaria inalcanzable, porque un sticky que se sale
         por abajo no se puede desplazar. Asi se desplaza por dentro. */
    .car-resumen {
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100vh;
        overflow-y: auto;
        background: var(--car-crema);
        border: 0;
        border-left: 1px solid var(--car-filete);
        padding: 36px 32px 40px;
        gap: 20px;
    }

    .car-resumen-tit {
        font-size: 12px;
        letter-spacing: .2em;
    }

    .car-resumen-fila {
        font-size: 14.5px;
        gap: 12px;
    }
}

/* --------------------------------------------------------------------------
   Preferencias del usuario
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .car-carrito *,
    .car-carrito *::before,
    .car-carrito *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Al imprimir el pedido no sirven de nada la barra de progreso ni los botones;
   el resumen si. */
@media print {
    .car-progreso,
    .car-barra,
    .car-linea-quitar,
    .car-linea-toggle,
    .car-sugerencias {
        display: none;
    }

    .car-carrito {
        padding-bottom: 0;
    }

    .car-resumen {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ==========================================================================
   CABECERA FINA DEL PAGO
   Solo se pinta en el checkout aislado. El artboard 1a la resuelve en una
   linea: "COMPRA SEGURA" a la izquierda, el logo al centro y el telefono a la
   derecha, repartidos a los extremos.

   El marcado no los tiene como hermanos: "compra segura" y el telefono van
   dentro de .car-cabecera-fina, y el logo (.checkout-marca) es un hermano de
   ese div, no un hijo. Con display:contents el div desaparece a efectos de
   layout y sus dos hijos pasan a ser items directos del flex de la cabecera,
   junto al logo. Luego se ordenan con 'order', que es lo que permite meter el
   logo EN MEDIO de dos elementos que en el HTML van seguidos.

   EL ALTO ES DELIBERADAMENTE FIJO, y de ahi sale el arreglo del hueco de 63px
   que quedaba bajo la cabecera. etapa2.css compensa la cabecera fija con
   `.cabeceramenu-checkout ~ .main-carrito { margin-top: 82px/108px }`, unos
   numeros calculados cuando la cabecera solo llevaba el logo. Al anadir esta
   linea el alto real cambio y los dos numeros dejaron de cuadrar.
   En vez de medir otra vez y volver a apuntar un numero que caduca al
   siguiente cambio, aqui el alto se CONSTRUYE: padding + alto del logo, las
   dos cosas fijadas mas abajo. Y la compensacion se declara con esa misma
   suma. Si manana cambia el padding o el logo, se cambian los dos numeros que
   estan uno al lado del otro y no hay nada que medir.

     escritorio: 18 + 52 + 18 + 1 de filete = 89
     movil:      12 + 44 + 12 + 1 de filete = 69

   OJO CON EL SUMANDO DE EN MEDIO EN MOVIL: ya NO es el alto del logo. Desde
   que el WhatsApp es un recuadro de 44x44 -medida del artboard, y minimo de un
   area que se pulsa con el dedo-, el elemento mas alto de la fila es ese
   recuadro y no el logo, que mide 38. Manda el mayor de los dos.
   ========================================================================== */
.cabeceramenu.cabeceramenu-checkout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #faf6f1;
    border-bottom: 1px solid #e6ddd2;
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* El div se disuelve y sus dos hijos suben a ser items del flex de arriba. */
.car-cabecera-fina {
    display: contents;
}

/* "COMPRA SEGURA". En movil desaparece: a 390px no caben las tres cosas en
   una linea, y de las tres es la unica que no se puede tocar ni pulsar. El
   artboard movil (1b) tambien la quita y deja solo logo y WhatsApp. */
.car-cabecera-seguro {
    display: none;
    order: 1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #a8957f;
}

/* El logo, en medio. El alto va fijo porque de el depende el alto total de la
   cabecera y, por tanto, la compensacion de mas abajo. */
/*
 * LA CAJA DEL LOGO SE ESTIRABA DE LADO A LADO.
 *
 * etapa2.css trae un diseno anterior de esta cabecera en el que la marca era
 * una banda propia: "width: 100%" y un fondo "rgba(251,249,236,.9)". Aqui la
 * cabecera pasa a ser una fila de tres cosas y la marca solo tiene que ceñir
 * al logo, pero al reordenarla no se le devolvio el ancho ni se le quito el
 * fondo.
 *
 * Medido a 1440px: la caja media 1056px con un logo de 78 dentro, o sea un
 * rectangulo palido cruzando la cabecera entera. Se ve en el carrito y en las
 * pantallas de respuesta del pago, que comparten esta cabecera.
 *
 * flex:none es lo que impide que vuelva a crecer o encogerse con el reparto
 * del flex; width:auto deshace el 100% heredado.
 */
.cabeceramenu-checkout .checkout-marca {
    order: 2;
    flex: none;
    width: auto;
    background: none;
    padding: 0;
    margin: 0;
}

.cabeceramenu-checkout .checkout-marca img {
    display: block;
    /* 38px medidos en el artboard movil (el logo sale de 57x38). */
    height: 38px;
    width: auto;
    max-width: none;
}

/* El telefono. El icono en el verde de WhatsApp, que es el unico color de
   fuera de la paleta que el artboard admite aqui: se reconoce antes por el
   color que por la forma. */
.car-cabecera-tel {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: #796857;
    text-decoration: none;
    white-space: nowrap;
}

.car-cabecera-tel:hover,
.car-cabecera-tel:focus {
    color: #8c6239;
    text-decoration: none;
}

.car-cabecera-tel svg,
.car-cabecera-tel img,
.car-cabecera-tel i {
    flex: none;
    width: 17px;
    height: 17px;
    display: block;
    color: #25D366;
}

/* --------------------------------------------------------------------------
   EN MOVIL EL WHATSAPP ES UN RECUADRO, NO UNA LINEA DE TEXTO

   Medido en el artboard movil: el numero NO se ensena; queda un cuadrado
   blanco de 44x44 con filete de 1px y el icono de 22px dentro. El numero
   completo solo sale en escritorio, donde si cabe al lado del logo.

   No es solo estetica: 44x44 es la medida minima de algo que se pulsa con el
   dedo. Tal como estaba, el area util eran los 17px del icono.

   El numero se esconde con display:none y no se borra del marcado: el enlace
   sigue siendo el mismo wa.me y el lector de pantalla sigue leyendolo.
   -------------------------------------------------------------------------- */
.cabeceramenu-checkout .car-cabecera-tel {
    /* La cabecera es un flex y el enlace se encogia a 38px por el reparto:
       flex:none le dice que respete los 44 y no ceda ancho. */
    flex: none;
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
    background: #ffffff;
    border: 1px solid #e6ddd2;
}

.car-cabecera-tel-num {
    display: none;
}

.cabeceramenu-checkout .car-cabecera-tel i {
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 1;
}

/* La compensacion de la cabecera fija NO esta aqui: vive en etapa2.css, en el
   bloque .cabeceramenu-checkout ~ .main-carrito, que es donde estaba desde el
   principio. Se corrigieron alli los dos numeros (65 y 89) con la suma que se
   explica arriba, en vez de dejar dos reglas peleandose con !important.
   Si cambia el padding o el alto del logo de esta cabecera, hay que ir a
   etapa2.css. */

@media (min-width: 768px) {

    .cabeceramenu.cabeceramenu-checkout {
        gap: 24px;
        padding: 18px 40px;
    }

    .car-cabecera-seguro {
        display: block;
    }

    .cabeceramenu-checkout .checkout-marca img {
        height: 52px;
    }

    /* En escritorio se deshace el recuadro: vuelve a ser icono + numero en
       linea, que es lo que dibuja el artboard de escritorio. */
    .cabeceramenu-checkout .car-cabecera-tel {
        width: auto;
        height: auto;
        background: none;
        border: 0;
        gap: 9px;
    }

    .car-cabecera-tel-num {
        display: inline;
    }

    .car-cabecera-tel {
        font-size: 13px;
        gap: 9px;
    }

    .car-cabecera-tel svg,
    .car-cabecera-tel img,
    .cabeceramenu-checkout .car-cabecera-tel i {
        width: 19px;
        height: 19px;
        font-size: 19px;
    }

}


/* --------------------------------------------------------------------------
   Casilla de terminos: se veia el texto pero NO la casilla

   El input llevaba opacity:0. Ese patron es correcto cuando se dibuja una
   casilla propia encima -es lo que hacemos en .car-opcion y .car-pago, donde
   el input invisible cubre la etiqueta y el punto lo pinta .car-opcion-dot-,
   pero aqui no habia nada que lo sustituyera: quedaba el texto suelto y ningun
   cuadrito que marcar.

   Como el navegador ya dibuja una casilla perfectamente buena, se deja la suya
   y se le da el color de la marca con accent-color. Menos codigo y sin perder
   el foco de teclado ni el estado indeterminado.
   -------------------------------------------------------------------------- */
.car-terminos input[type="checkbox"] {
    opacity: 1;
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 16px;
    height: 16px;
    /* Sin margen a la derecha: el label ya es flex con gap:10px, asi que el
       margen se SUMABA al hueco y separaba el texto 20px de su casilla. El
       diseno aprobado pone `margin:2px 0 0` y deja la separacion al gap. Los
       2px de arriba son los que centran la casilla contra la primera linea. */
    margin: 2px 0 0;
    flex: 0 0 16px;
    accent-color: #8c6239;
    cursor: pointer;
}

/* El texto va dentro de un <span>, y `index.css` trae un `* { font-size: 16px }`
   que le gana a la herencia: el label pide 12.5px y el span se plantaba en 16,
   con su line-height de 24px. Eso es lo que descuadraba el texto respecto de la
   casilla, ademas del margen de arriba. Heredar lo devuelve al tamaño aprobado.

   Va tambien el <a>: «Acepto los términos y condiciones» lleva el enlace DENTRO
   de la frase, asi que arreglar solo el span dejaba media linea a 12.5px y la
   otra media a 16px, con dos tamaños en la misma oracion.

   Se excluye .car-ayuda porque no es texto: es el interrogante de FontAwesome,
   y su font-size es lo que le da el tamaño al icono. */
.car-terminos span,
.car-terminos a:not(.car-ayuda) {
    font-size: inherit;
    line-height: inherit;
}

/* Subrayado en el enlace. Antes se distinguia del resto de la frase porque era
   mas grande -por el `* { font-size: 16px }`-, no porque estuviera marcado. Al
   igualar el tamaño se quedaba sin ninguna señal de que era pulsable: mismo
   cuerpo y mismo color que el texto de al lado. */
.car-terminos a:not(.car-ayuda) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.car-terminos {
    align-items: flex-start;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   EL ICONO DEL CALENDARIO: se deja de posicionar, se dibuja en el campo

   El diagnostico de partida era correcto: el icono estaba anclado a
   .car-picker, que mide 76px porque incluye el rotulo, mientras que el campo
   empieza 19px mas abajo y solo mide 52. Con top:17px caia sobre el filete.

   Un primer arreglo lo anclo desde abajo (bottom:17px) en vez de desde arriba.
   Eso NO vale, y ademas es de las cosas que hoy parecen funcionar y se rompen
   sin avisar: por debajo del campo hay mas cosas dentro de .car-picker -el
   #diaSeleccionado, el aviso de error y el de fecha caducada-. Ahora mismo el
   #diaSeleccionado esta vacio y no ocupa alto, asi que "abajo del contenedor"
   y "abajo del campo" coinciden por casualidad. En cuanto el cliente elige una
   fecha, ese span se llena con la fecha en palabras, crece, y el icono se va
   con el: acabaria flotando sobre el texto. Y con el error visible, otro tanto.

   Se quita el problema de raiz: el icono deja de ser un elemento posicionado y
   pasa a ser el fondo del propio campo. Anclado al campo por construccion, sin
   nada que medir y sin nada arriba ni abajo que lo pueda mover. Es lo mismo
   que ya se hace con la flecha de los desplegables unas lineas mas arriba.

   Por eso el <i class="fa fa-calendar"> se retiro de J-fecha.txt: ya no pinta
   nada. La regla que lo escondia se queda por si alguna copia del marcado lo
   conserva.
   -------------------------------------------------------------------------- */
.car-picker-campo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c6239' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 17px 17px;
}

.car-picker .car-picker-icono,
.car-picker > i.fa-calendar {
    display: none;
}

/* --------------------------------------------------------------------------
   Los dos campos vacios se leian distinto

   El de fecha ensenaba su placeholder en gris claro y el de horario ensenaba
   "SELECCIONAR HORA" en mayusculas y oscuro, con pinta de campo ya relleno.
   Los dos estan vacios y tienen que leerse igual.

   No se puede resolver con una clase: el AJAX reemplaza el contenido de
   #html_envio_hora entero al cambiar la fecha o el distrito y se la llevaria
   por delante. Tiene que ser una regla sobre el select.
   -------------------------------------------------------------------------- */
/* El text-transform necesita !important y no es un capricho: las mayusculas
   no las pone el select, las pone la clase .text-uppercase que trae el
   marcado, y bootstrap.min.css la declara asi:

     .text-uppercase { text-transform: uppercase !important }

   A un !important solo se le gana con otro. Sin el, la regla de aqui abajo
   cambiaba el color pero "SELECCIONAR HORA" seguia gritando en mayusculas.
   Va sobre el select entero y no solo sobre el estado vacio: una vez elegida
   la hora, "07:30 a 08:30" tampoco gana nada en mayusculas. */
.car-picker-hora select,
#envio_hora {
    text-transform: none !important;
}

#envio_hora:has(option[value="0"]:checked),
.car-picker-hora select:has(option[value="0"]:checked) {
    color: var(--car-texto-3);
    font-weight: 400;
}

/* Respaldo sin :has(), que no llega a los navegadores mas viejos y ahi el
   campo volveria a leerse como relleno.
   La clase va en el CONTENEDOR y nunca en el select: el AJAX reemplaza el
   contenido de #html_envio_hora entero al cambiar la fecha o el distrito, asi
   que una clase puesta en el select desaparece en el primer repintado y una
   puesta en el div sobrevive.
   Queda escrita para que la sesion del JavaScript solo tenga que alternarla
   segun si el valor es "0". */
.car-picker-hora.is-vacio select {
    color: var(--car-texto-3);
    font-weight: 400;
}

/* ==========================================================================
   MODAL DE COMPLEMENTOS

   EL ARTBOARD NO DIBUJA ESTE MODAL. No hay nada que copiar, asi que lo de aqui
   son decisiones tomadas aplicando la linea del resto de la pantalla. Cada una
   va explicada, porque cuando la clienta lo vea preguntara de donde sale.
   El detalle esta en docs/rediseno-carrito/diferencias.md.

   TODO VA COLGADO DE .car-modal, una clase que hay que anadir al <div class=
   "modal fade ..."> de A2-modal-complementos.txt. No se cuelga de .modc ni de
   .modal-complemento, que son las clases que el marcado ya tiene, porque esas
   dos viven TAMBIEN en la vista vieja del carrito: engancharse a ellas
   redecoraria de paso una pagina que nadie ha pedido tocar.

   Las variables se redeclaran aqui: el modal se emite despues de </main>, o
   sea FUERA de .car-carrito, asi que no hereda ninguna.
   ========================================================================== */
.car-modal {
    --car-marron: #8c6239;
    --car-marron-hover: #6d4a29;
    --car-naranja: #ffb466;
    --car-crema: #faf6f1;
    --car-filete: #e6ddd2;
    --car-texto: #4c4c4c;
    --car-texto-2: #796857;
    --car-texto-3: #a8957f;
    --car-blanco: #ffffff;
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: var(--car-texto);
}

.car-modal .modal-content,
.car-modal .modc {
    border: 1px solid var(--car-filete);
    border-radius: 0;
}

/* --- La cabecera deja de ser una banda naranja ---------------------------
   Decision: fuera el fondo #ffb466 a todo el ancho. Dos razones.
   Una, en el rediseno ningun bloque se titula con una banda de color: se
   titulan con un rotulo pequeno en mayusculas con tracking, y este modal es un
   bloque mas.
   Dos, y es la de fondo: el naranja de la marca esta reservado a los PRECIOS.
   Es el unico sitio donde aparece en toda la pantalla, y eso es lo que hace
   que el ojo lo encuentre. Gastarlo en el fondo de una cabecera le quita ese
   significado en la unica pantalla donde el precio importa.
   Queda como el panel de entrega: crema con filete. */
.car-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px !important;
    background: var(--car-crema);
    border-bottom: 1px solid var(--car-filete);
    border-radius: 0;
}

.car-modal .head-form {
    width: auto;
    background-color: transparent;
    padding: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--car-marron);
}

/* --- Cerrar -------------------------------------------------------------
   UNA SOLA REGLA. Habia dos: una colgada de .close, que es la clase de
   Bootstrap 4, y otra de .car-modal-cerrar, que es la nueva. El sitio carga
   Bootstrap 5, donde .close ya no existe, asi que la primera sobra; y con las
   dos puestas era imposible saber cual mandaba.

   Se queda EN EL FLUJO, como segundo hijo del flex de la cabecera, y no
   absoluto. El absoluto no daba tamano porque el boton no tenia nada dentro
   con lo que medirse: el marcado de Bootstrap 5 pinta la X con un fondo, no
   con el caracter, asi que sin ancho y alto propios el elemento se quedaba en
   0x0. En el flujo y con medidas explicitas eso no puede pasar, y ademas la
   cabecera ya lo coloca a la derecha ella sola con justify-content.

   Es el mismo recuadro de 34px con filete de .car-linea-quitar, que es el
   unico control de "quitar" del rediseno. Mismo gesto, misma pinta. El unico
   boton macizo del modal sigue siendo ANADIR.
   -------------------------------------------------------------------------- */
.car-modal .car-modal-cerrar,
.car-modal .modal-header .close {
    position: static;
    flex: none;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--car-texto-3);
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.car-modal .car-modal-cerrar:hover,
.car-modal .car-modal-cerrar:focus,
.car-modal .modal-header .close:hover,
.car-modal .modal-header .close:focus {
    border-color: var(--car-marron);
    color: var(--car-marron);
    opacity: 1;
}

.car-modal .car-modal-cerrar:focus-visible {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

.car-modal .modal-body {
    padding: 24px;
    background: var(--car-blanco);
}

/* --- Tarjeta de complemento ---------------------------------------------
   Decision: cada complemento pasa a ser una tarjeta seleccionable con el mismo
   trato que .car-opcion y .car-pago -filete fino, y al elegirla fondo crema y
   filete marron-. Es el patron que la pantalla ya usa para todo lo que se
   elige, asi que no hay que aprender nada nuevo. */
.car-modal .img-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    height: auto;
}

.car-modal .img-gallery figure {
    margin: 0;
}

.car-modal .img-gallery figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Fuera el velo oscuro del hover, que oscurecia la foto entera. */
.car-modal .hovers {
    display: none;
}

/* --- Separadores --------------------------------------------------------
   Decision: fuera el `1px dashed rgba(111,88,68,.3)` de index.css. En el
   rediseno no hay una sola linea de puntos: los separadores son filetes finos
   continuos del color del filete de marca. */
.car-modal .info-complement ul,
.car-modal .info-complement ul.lista-app {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 0;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--car-filete);
}

.car-modal .info-complement ul .title-prod-cmpl {
    margin-bottom: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    color: var(--car-texto);
}

/* --- Precio -------------------------------------------------------------
   Decision: el naranja de marca, #ffb466, y el mismo peso y tamano que el
   precio de la linea de producto ajustado a la tarjeta. Antes lo cambiaba
   .img-gallery:hover .prc-compl, que lo ponia marron al pasar el raton: el
   precio no cambia porque el cursor pase por encima. */
.car-modal .prc-compl,
.car-modal .img-gallery:hover .prc-compl {
    font-size: 16px;
    font-weight: 600;
    color: var(--car-naranja);
}

.car-modal .info-complement span {
    font-size: inherit;
}

/* --- El campo de la taza personalizada ---------------------------------- */
.car-modal .input-taza {
    height: 46px;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    background: var(--car-blanco);
    padding: 0 12px;
    font-size: 14.5px;
    color: var(--car-texto);
}

.car-modal .input-taza:focus {
    outline: none;
    border-color: var(--car-marron);
    box-shadow: none;
}

.car-modal .span-taza {
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    border-right: 0;
    border-radius: 0;
}

/* --- AGREGAR ------------------------------------------------------------
   Decision: se queda como <label> con su casilla dentro, que es lo correcto
   -asi se puede marcar con el teclado y el area pulsable es toda la fila-,
   pero se viste como .car-opcion: recuadro con filete, punto a la izquierda y
   texto en mayusculas con tracking.
   El .checkmark que ya trae el marcado hace de punto: pasa de 25px a 16px, el
   tamano del punto de .car-pago, y del gris al marron.
   Se anula ademas .img-gallery:hover .containers de index.css, que ponia la
   etiqueta entera en marron oscuro con texto blanco al pasar el raton: eso la
   hacia parecer YA ELEGIDA sin haberla tocado. */
.car-modal label.containers.btn-agregar,
.car-modal .img-gallery:hover .containers,
.car-modal .img-gallery:focus .containers {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100% !important;
    height: 42px;
    margin: 0;
    padding: 0 12px 0 34px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--car-texto-2);
    cursor: pointer;
}

.car-modal .checkmark,
.car-modal .img-gallery:hover .checkmark,
.car-modal .img-gallery:focus .checkmark {
    top: 50%;
    left: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 1px solid var(--car-filete);
    background: transparent;
}

.car-modal .containers .checkmark:after {
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: var(--car-marron);
}

/* Marcado: mismo trato que .car-opcion elegida. */
.car-modal .containers:has(input:checked) {
    background: var(--car-crema);
    border-color: var(--car-marron);
    color: var(--car-marron);
}

.car-modal .containers:has(input:checked) .checkmark {
    border-color: var(--car-marron);
}

.car-modal label.containers:focus-within {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

/* --- El boton de anadir -------------------------------------------------
   Este SI es correcto que sea macizo marron: es la accion principal del modal,
   igual que PAGAR lo es de la pantalla. Se le dan las medidas exactas de
   .car-boton-pagar para que sean el mismo boton y no dos parecidos. */
.car-modal .btn-agregar-modal {
    margin: 20px 0 0;
    padding: 0;
}

.car-modal .btn-agregar-complemento {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    padding: 0 24px;
    background: var(--car-marron);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--car-blanco);
    cursor: pointer;
    transition: background-color .15s ease;
}

.car-modal .btn-agregar-complemento:hover,
.car-modal .btn-agregar-complemento:focus {
    background: var(--car-marron-hover);
    color: var(--car-blanco);
    box-shadow: none;
}

/* El efecto de onda de Material no pinta nada aqui y deja un div flotando con
   coordenadas fijas escritas a mano en el marcado. */
.car-modal .ripple-container,
.car-modal .ripple-decorator {
    display: none !important;
}


/* --------------------------------------------------------------------------
   URGENTE: un input invisible tapaba la pagina entera

   Los radios de .car-pago y .car-opcion van dentro del label y se estiran
   invisibles por encima para conservar el foco de teclado. Eso es correcto,
   PERO un elemento absoluto se estira contra el ancestro POSICIONADO mas
   cercano, y ni .car-pago ni .car-opcion lo eran.

   Resultado medido: el radio de formas_pago ocupaba 1440x941 px sobre toda la
   pagina. Ningun clic llegaba a su destino: ni la papelera, ni el boton de
   complementos, ni el mas, ni VALIDAR, ni el select de distrito. Y sin un solo
   error en consola, porque no falla nada: los clics llegan, solo que al
   elemento equivocado.

   Se arregla dandole position:relative al label, que es lo que faltaba.
   -------------------------------------------------------------------------- */
.car-pago,
.car-opcion,
.car-terminos {
    position: relative;
}

/* Y el mismo problema en los iconos de ayuda: sin ancestro posicionado se
   colocaban contra la pagina y acababan fuera del panel, sueltos a la derecha.
   El caso medido estaba en x:1355, fuera de la tarjeta. */
.car-campo,
.car-picker,
.car-entrega-campo {
    position: relative;
}


/* El bloque que habia aqui empataba especificidad con
   `.car-carrito label { position: static }` para que .car-pago, .car-opcion y
   .car-terminos recuperasen su relative. Ya no hace falta: el static de aquel
   selector paso a relative arriba del todo, que es donde estaba el problema. */


/* La X de cerrar del modal se define UNA sola vez, mas arriba, junto al resto
   de la cabecera. Aqui habia una segunda version en position:absolute que
   salia a 0x0 y peleaba con aquella. */


/* --------------------------------------------------------------------------
   Los iconos de ayuda se salian del panel

   Tres se apilaban en x:1355, fuera de la tarjeta, flotando sobre el fondo.

   Misma causa que el radio que tapaba la pagina: son absolutos y su contenedor
   .car-campo estaba en static, asi que se colocaban contra la PAGINA. Y estaba
   en static porque .car-campo es un <label>, y `.car-carrito label` lo forzaba
   ahi con mas peso (0,1,1) que `.car-campo` (0,1,0).

   Es el mismo conflicto de antes: el arreglo de las etiquetas flotantes,
   necesario, alcanzaba tambien a los contenedores que si necesitan ser
   relative. Se empata la especificidad.
   -------------------------------------------------------------------------- */

/* LOS INTERROGANTES SE DESPEGABAN DE SU LINEA EN EL TELEFONO.

   Colocar el icono dentro de su campo ya lo hace la regla de mas abajo,
   `.car-carrito .car-campo > .car-ayuda`, que declara position:absolute y lo
   centra con top:50% + translateY(-50%).

   Aqui habia un right/top/bottom/left suelto que caia sobre TODOS los
   .car-ayuda, tambien sobre los que no estan dentro de ningun campo. Hacia dos
   destrozos, ambos solo en movil, que es donde la hoja les pone
   position:relative para anclar el area tactil de 34x34:

     1. Los iconos SUELTOS -el de "Importante" y el de "Recordarme esta fecha
        dentro de 1 ano"- con `bottom:15px` sobre un elemento relative se
        levantaban 15px respecto a su sitio en la linea. Eso son los "iconos
        volando" que reporto la clienta el 2026-09-11.
     2. Los que SI van dentro de un campo recibian `top:50%` de aquella regla y
        `bottom:15px` de esta. Con top y bottom a la vez y altura automatica, la
        caja se estira: medidos en QA daban 13x8 px en vez de 13x13.

   En escritorio no se notaba porque alli los sueltos son static y un offset
   sobre un static no lo lee nadie.

   Se dejan los cuatro en auto y no se borran sin mas, para que ninguna otra
   regla los reponga por detras. */
.car-carrito .car-ayuda {
    right: auto;
    top: auto;
    bottom: auto;
    left: auto;
}


/* --------------------------------------------------------------------------
   El grupo de cantidad se leia como tres cajas sueltas

   El campo del medio tenia fondo TRANSPARENTE. Sobre la tarjeta crema eso
   significa que no habia ningun contraste entre el campo y los botones, y el
   conjunto no se leia como un control unico sino como tres piezas pegadas.

   En el artboard la tarjeta es blanca y los botones crema se recortan solos
   contra ella; con la tarjeta en crema esa logica se invierte y hay que
   declarar el blanco a mano.
   -------------------------------------------------------------------------- */
.car-carrito .car-cant {
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
}

.car-carrito .car-cant-campo {
    background: var(--car-blanco);
    border: 0;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Las flechas nativas del campo numerico sobran: para eso estan los botones,
   y ademas se solapaban con el signo de mas. */
.car-carrito .car-cant-campo::-webkit-outer-spin-button,
.car-carrito .car-cant-campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.car-carrito .car-cant-boton {
    background: var(--car-crema);
    border: 0;
    color: var(--car-marron);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

/* Los filetes separan las tres celdas. Van en el campo y no en los botones
   para que no aparezcan tambien en los bordes exteriores del grupo. */
.car-carrito .car-cant-campo {
    border-left: 1px solid var(--car-filete);
    border-right: 1px solid var(--car-filete);
}

.car-carrito .car-cant-boton:hover { background: #f0e7dc; }

.car-carrito .car-cant-boton:focus-visible {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   Miniatura del complemento

   DESVIACION DELIBERADA del artboard, pedida por el cliente: alli las filas de
   complemento no llevan foto. Se devuelve porque en el modal la persona elige
   POR LA FOTO -una tortita, un croissant, un globo- y al volver al carrito solo
   veia "Foto" y "Mini torta Cumple" en texto, teniendo que recordar que
   escogio justo en la pantalla donde confirma lo que compra.

   48px: la mitad del alto de la fila, que se lee de inmediato como accesorio y
   no como producto. El producto son 88px en escritorio y 64 en movil, asi que
   48 queda por debajo de los dos sin tener que elegir contra cual compararse.
   -------------------------------------------------------------------------- */
.car-carrito .car-linea-comp {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
}

.car-carrito .car-linea-comp-foto {
    width: 48px;
    height: 48px;
    display: block;
    background-size: cover;
    background-position: center;
    background-color: var(--car-crema);
}

/* En movil el pie va bajo los TEXTOS, no bajo la miniatura: sin esto cae en la
   columna 1 y el grupo de cantidad se aprieta en 48px. En escritorio la regla
   no estorba, porque alli el pie es display:contents. */
.car-carrito .car-linea-comp-pie { grid-column: 2; }

@media (min-width: 768px) {
    .car-carrito .car-linea-comp {
        grid-template-columns: 48px minmax(0, 1fr) 126px 96px 34px;
    }
}


/* --------------------------------------------------------------------------
   Grupo de cantidad: version definitiva

   Lo anterior tenia tres desajustes que se sumaban y lo hacian ver roto:
   el borde del campo salia en gris oscuro #4c4c4c y no en el filete de marca,
   la caja del complemento media 34px de alto contra los 40 de la del producto,
   y el numero iba a 14px mientras los signos iban a 18.

   Ahora los dos grupos son el mismo control: mismo alto, mismo filete, mismo
   tamano de letra. El artboard da fondo #ffffff y borde 1px solid #e6ddd2, que
   es lo que se aplica aqui.
   -------------------------------------------------------------------------- */
.car-carrito .car-cant,
.car-carrito .car-linea-comp .car-cant {
    height: 40px;
    background: #ffffff;
    border: 1px solid #e6ddd2;
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
}

.car-carrito .car-cant-boton {
    width: 40px;
    flex: 0 0 40px;
    background: #faf6f1;
    border: 0;
    color: #8c6239;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

.car-carrito .car-cant-campo {
    width: 46px;
    flex: 0 0 46px;
    height: auto;
    background: #ffffff;
    border: 0;
    border-left: 1px solid #e6ddd2;
    border-right: 1px solid #e6ddd2;
    border-radius: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #4c4c4c;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.car-carrito .car-cant-campo::-webkit-outer-spin-button,
.car-carrito .car-cant-campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.car-carrito .car-cant-boton:hover { background: #f0e7dc; }

.car-carrito .car-cant-boton:focus-visible {
    outline: 2px solid #8c6239;
    outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   El numero de la cantidad quedaba pegado arriba

   El campo llevaba height:auto. En un <input> eso no significa "estirate hasta
   tu contenedor" sino "toma tu altura intrinseca", asi que media menos que la
   caja y el texto quedaba arriba con el hueco debajo, mientras los signos
   - y + si estaban centrados. De ahi que se leyera desalineado.

   Con height:100% el campo ocupa todo el alto del grupo y el navegador centra
   el texto verticalmente el solo, que es lo que hace de serie con los input de
   una sola linea.
   -------------------------------------------------------------------------- */
.car-carrito .car-cant-campo {
    height: 100%;
    align-self: stretch;
    line-height: normal;
}


/* --------------------------------------------------------------------------
   Los tres controles de la fila de complemento no se alineaban entre si

   La fila lleva align-items:start, asi que cada celda se pega ARRIBA con su
   propia altura. Medidos, sus centros caian en 33, 24 y 28 px: el grupo de
   cantidad mide 40, el importe 23 y la papelera 30, y al pegarse todos arriba
   ninguno quedaba a la misma altura que los demas.

   El start es correcto para la foto y los textos, que empiezan arriba y crecen
   hacia abajo. Para los tres controles del pie no: son piezas de una misma
   fila de acciones y tienen que leerse en una linea.
   -------------------------------------------------------------------------- */
.car-carrito .car-linea-comp-pie > .car-cant,
.car-carrito .car-linea-comp-pie > .car-linea-comp-total,
.car-carrito .car-linea-comp-pie > .car-linea-quitar {
    align-self: center;
}

@media (min-width: 768px) {
    .car-carrito .car-linea-comp > .car-linea-comp-foto {
        align-self: center;
    }
}


/* --------------------------------------------------------------------------
   Fila de descuento del resumen

   Va en el verde de un ahorro, no en el marron del resto de importes: es la
   unica cifra de la columna que RESTA, y distinguirla es justo lo que hace que
   el cliente la vea. Con el mismo marron pasaria por una linea mas.
   -------------------------------------------------------------------------- */
.car-carrito .car-resumen-descuento > span {
    color: #2e7d52;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   Flecha del desplegable de complementos

   Gira segun el aria-expanded del boton, que es el atributo que el JS ya
   cambia al pulsar. Colgar el giro de ahi y no de una clase propia significa
   que el estado visible y el estado que lee un lector de pantalla no pueden
   discrepar: son el mismo dato.

   Se dibuja con bordes en vez de con un icono para no depender de que una
   fuente de iconos haya cargado.
   -------------------------------------------------------------------------- */
.car-carrito .car-linea-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.car-carrito .car-linea-toggle-flecha {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-135deg);
    transform-origin: 60% 60%;
    transition: transform .18s ease;
}

/* Plegado: la flecha apunta hacia abajo, o sea "hay mas debajo". */
.car-carrito .car-linea-toggle[aria-expanded="false"] .car-linea-toggle-flecha {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .car-carrito .car-linea-toggle-flecha { transition: none; }
}


/* --------------------------------------------------------------------------
   El aro azul del foco al pulsar con el raton

   El navegador dibuja ese aro al enfocar, y enfocar pasa tanto al tabular como
   al hacer clic. Con el raton sobra: la persona ya sabe donde pulso.

   NO se quita el foco, se acota a :focus-visible, que el navegador solo activa
   cuando el foco viene del teclado. Quitarlo del todo -que es el atajo- deja a
   quien navega con teclado sin saber donde esta, y en un carrito eso significa
   no poder comprar.

   El azul ademas no es de la marca: donde el foco SI se ve, va en marron.
   -------------------------------------------------------------------------- */
.car-carrito button:focus:not(:focus-visible),
.car-carrito a:focus:not(:focus-visible),
.car-carrito input:focus:not(:focus-visible),
.car-carrito select:focus:not(:focus-visible),
.car-carrito textarea:focus:not(:focus-visible),
.car-carrito label:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.car-carrito button:focus-visible,
.car-carrito a:focus-visible,
.car-carrito input:focus-visible,
.car-carrito select:focus-visible,
.car-carrito textarea:focus-visible {
    outline: 2px solid #8c6239;
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   El icono de la papelera del producto llenaba su boton

   Medido: 32x32 dentro de un boton de 34, o sea pegado a los cuatro bordes.
   El artboard le da 16x16 en un boton de 34, y 14x14 en el de 30 del
   complemento. La regla existia para el complemento pero no para el producto,
   asi que ese heredaba el tamano natural del SVG.
   -------------------------------------------------------------------------- */
.car-carrito .car-linea > .car-linea-quitar img,
.car-carrito .car-linea > .car-linea-quitar svg {
    width: 16px;
    height: 16px;
    display: block;
}

.car-carrito .car-linea-comp .car-linea-quitar img,
.car-carrito .car-linea-comp .car-linea-quitar svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Y el de la papelera del cupon, que comparte clase con la de producto pero
   vive en una fila de 46px: se alinea con el boton VALIDAR de al lado. */
.car-carrito #carrito_cupon_limpiar img {
    width: 16px;
    height: 16px;
    display: block;
}


/* --------------------------------------------------------------------------
   La papelera del cupon ni se centraba ni se separaba

   Medido: la fila mide 44 y la papelera 34, pero su centro caia en 17 mientras
   el campo y VALIDAR estaban en 22. Y empezaba pegada al boton, sin ningun
   hueco, porque la fila no declara separacion entre sus hijos.

   El campo y el boton VAN pegados a proposito -son una sola pieza, el input
   pierde su borde derecho contra el boton-, asi que la separacion no puede ir
   en la fila: tiene que ir solo delante de la papelera, que es lo unico que no
   forma parte de esa pieza.
   -------------------------------------------------------------------------- */
.car-carrito .car-promo-fila {
    align-items: center;
}

.car-carrito .car-promo-fila #carrito_cupon_limpiar {
    margin-left: 10px;
    flex: 0 0 auto;
}


/* ==========================================================================
   SUBIDA DE LA FOTO DEL COMPLEMENTO

   Bloque disenado aparte -el artboard del carrito no lo dibuja- siguiendo la
   linea de la columna. Dos estados: sin foto, con la caja de arrastre y los
   requisitos al lado; y con foto, donde la caja desaparece y manda la propia
   imagen al tamano en que se puede juzgar antes de pagar.
   ========================================================================== */

/* El rotulo y la insignia comparten linea: rotulo a la izquierda, estado a la
   derecha. Los demas bloques usan un <span> suelto; aqui hace falta la fila. */
.car-carrito .car-receta-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.car-carrito .car-receta-titulo .car-rotulo {
    margin-bottom: 0;
}

/* La insignia "Obligatoria" se quito el 12/09/2026 a peticion de la clienta,
   asi que aqui ya no queda su regla ni la que la escondia al subir la foto.

   Solo queda "Lista", que se enciende con :has sobre dz-started, la clase que
   pone la propia Dropzone. Donde :has no funcione no se enciende, y lo unico
   que se pierde es el acuse en verde: la zona de subida sigue igual. */
.car-carrito .car-receta-lista {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2e7d52;
}

.car-carrito .car-receta-lista svg {
    width: 13px;
    height: 13px;
}

.car-carrito .car-receta-titulo:has(~ .car-receta .dz-started) .car-receta-lista {
    display: inline-flex;
}

.car-carrito .car-receta {
    display: block;
}

.car-carrito .car-receta-nota {
    margin: 0 0 20px;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--car-texto-2);
}

.car-carrito .car-receta-nota strong {
    font-weight: 500;
    color: var(--car-texto-1);
}

.car-carrito .car-receta-cuerpo {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   SIN FOTO: la caja de arrastre mide lo que UNA foto

   Dropzone esta en maxFiles:1. Una caja a todo el ancho prometia que cabian
   varias, y dejaba la miniatura perdida en una esquina.
   -------------------------------------------------------------------------- */
.car-carrito .car-dropzone.dropzone,
.car-carrito #mydropzone1 {
    flex: 0 0 auto;
    width: 260px;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    border: 1.5px dashed #d9cdbe;
    border-radius: 0;
    background: var(--car-crema);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.car-carrito #mydropzone1:hover {
    border-color: var(--car-marron);
    background: #f6efe6;
}

.car-carrito .car-dropzone-mensaje {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    pointer-events: none;
}

.car-carrito .car-dropzone-icono {
    width: 30px;
    height: 30px;
    color: var(--car-marron);
}

.car-carrito .car-dropzone-titulo {
    font-size: 14px;
    font-weight: 500;
    color: var(--car-marron);
}

.car-carrito .car-dropzone-pista {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--car-texto-3);
}

/* EL "CHOOSE FILES" QUE SE VEIA AL CARGAR.

   El div .fallback lleva dentro un <input type="file"> suelto, y Dropzone solo
   lo borra del marcado DESPUES de arrancar. Entre que el navegador pinta el
   HTML y corre el JS -que va al final de la pagina y detras de todo el paquete
   agrupado- ese input se ve tal cual, con su boton gris del sistema y su "No
   file chosen", encima de la caja de arrastre.

   Se esconde de entrada y se vuelve a ensenar solo en el caso para el que
   existe: un navegador que no sabe arrastrar y soltar, donde el propio
   Dropzone marca la caja con dz-browser-not-supported y el input es el unico
   camino que le queda a la persona. */
.car-carrito #mydropzone1 .fallback {
    display: none;
}

.car-carrito #mydropzone1.dz-browser-not-supported .fallback {
    display: block;
}

/* Dropzone inyecta ademas su propio mensaje (.dz-default.dz-message, que sale
   de dictDefaultMessage), asi que quedaban dos apilados. Se esconde el suyo en
   vez de vaciar dictDefaultMessage, porque ese texto tambien se usa en los
   avisos de error de la libreria. */
.car-carrito #mydropzone1 .dz-message {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Requisitos

   Salen de la configuracion real de Dropzone (maxFiles, maxFilesize,
   acceptedFiles). Antes no estaban en ninguna parte y el cliente descubria el
   limite al ver fallar la subida.
   -------------------------------------------------------------------------- */
.car-carrito .car-receta-requisitos {
    flex: 1 1 260px;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
}

.car-carrito .car-receta-requisitos li {
    position: relative;
    padding-left: 25px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--car-texto-2);
}

/* El tick se dibuja con dos bordes girados, no con un icono: asi no depende de
   que una fuente de iconos haya cargado. El reset de index.css pone
   list-style:none en todos los li del sitio, o sea que una vineta nativa
   tampoco se veria. */
.car-carrito .car-receta-requisitos li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 10px;
    height: 5px;
    border-left: 1.6px solid var(--car-texto-3);
    border-bottom: 1.6px solid var(--car-texto-3);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   CON FOTO: manda la imagen

   La caja de arrastre deja de tener sentido en cuanto hay una foto dentro: ya
   no hay nada que arrastrar. Se le quitan el borde, el fondo y el ancho fijo,
   y lo que ocupa la fila es la foto con sus datos al lado. Los requisitos
   tambien sobran: ya se cumplieron.
   -------------------------------------------------------------------------- */
.car-carrito #mydropzone1.dz-started {
    width: 100%;
    min-height: 0;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    /* Cada vista previa ocupa la fila entera (regla de mas abajo), asi que sin
       wrap la casilla de "Agregar otra foto" se aplastaria contra ella en vez
       de caer debajo. */
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: default;
}

.car-carrito #mydropzone1.dz-started:hover {
    background: none;
}

/* --------------------------------------------------------------------------
   LA CAJA DE ARRASTRE NO SE VA HASTA QUE EL CUPO ESTE LLENO

   Aqui estaba el fallo que reporto la clienta el 16/09/2026: «cuando subo la
   primera, luego no me aparece una opcion para subir la segunda foto».

   Esta regla escondia el mensaje en cuanto Dropzone ponia dz-started, o sea
   con la PRIMERA foto. A partir de ahi la caja seguia existiendo y seguia
   siendo dz-clickable -pulsar la fila abria el selector-, pero sin borde, sin
   fondo, sin texto y con cursor:default. Nadie puede adivinar eso.

   El limite de fotos es dinamico desde el 12/09/2026 (una por unidad de
   complemento que pida imagen), asi que la senal correcta no es "ya hay una
   foto" sino "ya no caben mas", que es exactamente lo que marca la propia
   libreria con dz-max-files-reached.
   -------------------------------------------------------------------------- */
.car-carrito #mydropzone1.dz-started.dz-max-files-reached .car-dropzone-mensaje {
    display: none;
}

/* Con fotos dentro pero sitio libre, el mensaje deja de ser el protagonista y
   pasa a ser una casilla del tamano de una miniatura, en la misma fila. */
.car-carrito #mydropzone1.dz-started:not(.dz-max-files-reached) .car-dropzone-mensaje {
    /* Dropzone cuelga las miniaturas DETRAS de este div, asi que sin order la
       casilla de anadir saldria antes que las fotos ya subidas. */
    order: 2;
    flex: 0 0 auto;
    width: 168px;
    min-height: 168px;
    box-sizing: border-box;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 1.5px dashed #d9cdbe;
    background: var(--car-crema);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.car-carrito #mydropzone1.dz-started:not(.dz-max-files-reached):hover .car-dropzone-mensaje {
    border-color: var(--car-marron);
    background: #f6efe6;
}

/* El puntero vuelve: la caja sigue siendo pulsable mientras quede cupo. */
.car-carrito #mydropzone1.dz-started:not(.dz-max-files-reached) {
    cursor: pointer;
}

/* El rotulo cambia de "Elige tu foto" a "Agregar otra foto" segun haya o no
   fotos ya puestas. Son dos <span> y se ensena uno u otro, en vez de
   reescribir el texto por JS, para que no dependa de que la libreria emita
   ningun evento. */
.car-carrito .car-dropzone-titulo--otra {
    display: none;
}

.car-carrito #mydropzone1.dz-started .car-dropzone-titulo--primera {
    display: none;
}

.car-carrito #mydropzone1.dz-started .car-dropzone-titulo--otra {
    display: block;
}

/* El aviso de "esa foto no entra". Nace con el atributo hidden y solo lo
   quita el JS, asi que no hay estado inicial que mantener en dos sitios. */
.car-carrito .car-receta-aviso {
    flex: 1 1 100%;
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid #c0392b;
    background: #fdf3f2;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--car-texto-1);
}

.car-carrito .car-receta-aviso[hidden] {
    display: none;
}

/* Los requisitos solo sobran cuando ya no cabe ninguna foto mas: mientras
   quede cupo siguen diciendo cuantas y de que tipo. */
.car-carrito .car-receta-cuerpo:has(.dz-max-files-reached) .car-receta-requisitos {
    display: none;
}


.car-carrito #mydropzone1 .dz-preview.car-foto {
    /* Ancho completo: dropzone.css deja la vista previa como una tarjeta
       estrecha y blanca -pensada para una rejilla de miniaturas- y con eso los
       datos no cabian al lado de la foto y caian debajo. Aqui solo hay una
       foto, asi que la vista previa ES la fila. */
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
    min-height: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* 168px: lo bastante grande para juzgar si la foto es la correcta, que es lo
   unico que la persona necesita mirar antes de pagar. */
.car-carrito #mydropzone1 .car-foto .dz-image {
    flex: 0 0 auto;
    display: block;
    width: 168px;
    height: 168px;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--car-filete);
    background: var(--car-crema);
}

.car-carrito #mydropzone1 .car-foto .dz-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-carrito #mydropzone1 .car-foto .dz-details {
    position: static;
    /* 200px de base y no 240: con la foto de 168 mas los 20 de separacion, una
       base mayor no cabe en la columna y los datos se van debajo de la foto. */
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    opacity: 1;
    background: none;
    text-align: left;
}

.car-carrito #mydropzone1 .car-foto .dz-filename {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--car-texto-1);
    overflow-wrap: break-word;
}

.car-carrito #mydropzone1 .car-foto .dz-size {
    font-size: 12.5px;
    color: var(--car-texto-3);
}

.car-carrito #mydropzone1 .car-foto .dz-filename span,
.car-carrito #mydropzone1 .car-foto .dz-size span,
.car-carrito #mydropzone1 .car-foto .dz-size strong {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* La barra de progreso de Dropzone viene colocada en absoluto, con fondo
   blanco y z-index 1000, pensada para ir encima de la miniatura de una
   rejilla. Aqui caia justo sobre el boton QUITAR y lo dejaba lavado.

   No se borra del marcado -la libreria le escribe el ancho durante la subida-
   sino que se lleva al pie de la foto, que es donde tiene sentido mirarla, y
   se esconde en cuanto la subida termina o cuando la foto ya venia de la
   sesion y no hay nada que subir. */
.car-carrito #mydropzone1 .car-foto .dz-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 168px;
    height: 4px;
    background: var(--car-filete);
    border-radius: 0;
    z-index: 2;
}

.car-carrito #mydropzone1 .car-foto .dz-upload {
    display: block;
    height: 100%;
    background: var(--car-marron);
}

.car-carrito #mydropzone1 .car-foto.dz-complete .dz-progress,
.car-carrito #mydropzone1 .car-foto:not(.dz-processing) .dz-progress {
    display: none;
}

/* Lo mismo con el hueco de los errores: solo ocupa sitio cuando hay algo que
   decir. */
.car-carrito #mydropzone1 .car-foto .dz-error-message:empty,
.car-carrito #mydropzone1 .car-foto:not(.dz-error) .dz-error-message {
    display: none;
}

.car-carrito #mydropzone1 .car-foto.dz-error .dz-error-message {
    position: static;
    display: block;
    width: auto;
    padding: 10px 12px;
    background: #fbeee9;
    border: 1px solid #e9c9be;
    color: #c0522f;
    font-size: 12.5px;
    line-height: 1.5;
}

.car-carrito #mydropzone1 .car-foto-acciones {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.car-carrito #mydropzone1 .car-foto-boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    color: var(--car-texto-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}

.car-carrito #mydropzone1 .car-foto-boton:hover {
    border-color: var(--car-marron);
    color: var(--car-marron);
}

.car-carrito #mydropzone1 .car-foto-boton svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 575.98px) {
    .car-carrito .car-dropzone.dropzone,
    .car-carrito #mydropzone1 { width: 100%; }
}


/* Las <option> se quedaban en Brandon: la familia se hereda desde el <select>
   en casi todos los navegadores, pero no en todos, y en el desplegable abierto
   se notaba el cambio de letra. */
.car-carrito option {
    font-family: inherit;
}


/* EL RELOJ DEL DISENO, SOLO EN EL CAMPO DE HORA.

   El artboard dibuja un reloj a la derecha del horario, igual que el
   calendario del campo de fecha que va al lado. El bloque documentaba que no
   se podia poner porque chocaria con la flecha nativa del navegador, pero esa
   flecha ya no existe: appearance:none la quita, y lo que se veia era el
   chevron que dibuja la hoja a mano. O sea que el sitio esta libre.

   Va DESPUES y con su propio selector: el chevron se declara para .car-select
   y para este select a la vez, y sustituirlo alli le habria puesto el reloj
   tambien al desplegable de distrito. */
.car-carrito .car-picker-hora select {
    background-image: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238c6239'%20stroke-width='1.6'%20stroke-linecap='round'><circle%20cx='12'%20cy='12'%20r='8.5'/><path%20d='M12%207.5V12l3.2%202'/></svg>");
    background-position: right 14px center;
    background-size: 17px 17px;
}


/* EL BOTON PAGAR SE MONTABA ENCIMA DE LA NOTA DE ABAJO.

   .car-resumen es una columna flexible, pegajosa y con max-height: no puede
   pasar del alto de la ventana. Cuando el contenido no cabe -y con la lista de
   campos que faltan no cabe casi nunca-, el reparto por defecto de flex
   encoge a los hijos: PAGAR, que mide 56, se quedaba en 15 y su texto salia
   por debajo, justo encima de "Precios en soles con IGV...". Los dos textos se
   leian superpuestos.

   Encoger un boton no arregla nada: el contenido sigue sin caber. Se prohibe
   el encogido y el sobrante se va al scroll del propio resumen, que ya lo
   tiene declarado con overflow:auto. */
.car-carrito .car-resumen > * {
    flex-shrink: 0;
}

/* LA IMAGEN ROTA SOBRE EL CAMPO DE CORREO.

   Es el indicador de "cargando" del formulario, y su src apunta a
   farmaciauniversal.com: un GIF colgado del sitio de OTRO cliente. Ademas de
   verse roto -ese servidor ya no lo sirve-, es una peticion a un tercero en
   cada carga de la pagina.

   Se esconde: es un indicador que solo tiene sentido mientras se envia algo, y
   el JS que lo ensenaba usaba .show(), que le pone display:inline-block en
   linea y gana a esta regla. O sea que si vuelve a hacer falta, sigue
   funcionando. La imagen habra que traerla a assets/ antes de que eso pase. */
/* El indicador de carga del campo de correo, dibujado en CSS.

   Antes era un <img> traido de farmaciauniversal.com que ya no existe: se veia
   roto y disparaba catorce errores de consola por carga. Ahora es un aro que
   gira, sin ninguna peticion de red.

   El JS lo enciende y lo apaga con visibility, asi que aqui NO se usa display:
   con display:none el elemento no ocuparia sitio y el campo daria un salto
   cada vez que se consulta el correo. */
.car-carrito .loading-form {
    visibility: hidden;
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #e6ddd2;
    border-top-color: #8c6239;
    border-radius: 50%;
    animation: car-girar .7s linear infinite;
}

@keyframes car-girar {
    to { transform: rotate(360deg); }
}

/* Quien no quiere animaciones no las ve: el aro se queda quieto pero sigue
   siendo visible, que es lo que importa. */
@media (prefers-reduced-motion: reduce) {
    .car-carrito .loading-form {
        animation: none;
    }
}


/* LOS INTERROGANTES DE AYUDA FLOTABAN SOBRE EL CAMPO.

   .car-ayuda declara right:12px pero no declara position, asi que ese right no
   lo lee nadie: el icono se quedaba estatico y caia arriba a la izquierda del
   campo, encima del hueco del rotulo. Se veia en Telefono, Documento y
   Direccion como un circulo suelto sin nada a lo que pertenecer.

   Se coloca dentro del campo, a la derecha y centrado. Solo cuando cuelga
   directamente de .car-campo: el de "Rango aproximado" va detras del texto, en
   linea, y ahi es correcto que siga en el flujo. */
.car-carrito .car-campo > .car-ayuda {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Y el campo deja hueco a su derecha para que un texto largo no le pase por
   debajo, igual que se hace con la flecha de los desplegables. */
.car-carrito .car-campo:has(> .car-ayuda) .car-input {
    padding-right: 38px;
}


/* --------------------------------------------------------------------------
   La caja de sugerencias pesaba mas que el campo al que ayuda

   El artboard la dibuja como una nota al margen: rotulo pequeno y frases de
   13px. Aqui el desplegable de ocasion heredaba el tamano de los campos del
   formulario -50px de alto y 15px de letra- y el aviso de "elige una ocasion"
   salia a 16px y en tres lineas, asi que la ayuda ocupaba mas alto que la
   dedicatoria.

   El desplegable no esta en el artboard, que ya llega con las frases puestas,
   pero aqui hace falta: las frases se piden por ocasion. Se le da el tamano de
   la nota, no el de un campo del formulario.
   -------------------------------------------------------------------------- */
.car-carrito .car-sugerencias {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: flex-start;
}

.car-carrito .car-sugerencias .car-rotulo {
    margin-bottom: 0;
}

.car-carrito .car-sugerencias-ocasion.car-select {
    height: 40px;
    padding: 0 30px 0 10px;
    font-size: 13px;
    background-position: right 10px center;
}

.car-carrito .car-sugerencias-vacio {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--car-texto-3);
}


/* ==========================================================================
   EL CALENDARIO

   No se veia. index.css trae ".datepicker > div { display: none }" y la hoja
   propia de bootstrap-datepicker no esta cargada en el sitio, asi que las
   cinco vistas del calendario -dias, meses, anios...- se quedaban ocultas: al
   pulsar el campo se abria una caja de 2px de alto, una raya, con los 42 dias
   dentro sin poder verse.

   Se ensena la vista de dias sin !important a proposito: cuando la libreria
   cambia de vista lo hace con un display en linea, y el estilo en linea le
   gana a esta regla. Asi el cambio de vista sigue funcionando.

   El aspecto es el del artboard: cabecera con el mes y las dos flechas, la
   rejilla de siete columnas y las celdas de 38.
   ========================================================================== */
.datepicker.datepicker-dropdown {
    /* Las variables se redeclaran aqui, igual que en .car-modal: la libreria
       cuelga el calendario del <body>, o sea FUERA de .car-carrito, asi que no
       hereda ninguna. Sin esto, background: var(--car-blanco) no resuelve, la
       declaracion se descarta y el calendario sale TRANSPARENTE, con el
       formulario leyendose por debajo de los dias. */
    --car-marron: #8c6239;
    --car-crema: #faf6f1;
    --car-filete: #e6ddd2;
    --car-texto: #4c4c4c;
    --car-texto-3: #a8957f;
    --car-blanco: #ffffff;

    width: 322px;
    padding: 18px;
    border: 1px solid var(--car-marron);
    border-radius: 0;
    background: var(--car-blanco);
    box-shadow: 0 10px 30px rgba(76, 76, 76, .12);
    /* Por encima del resto del formulario y por debajo de la barra de movil. */
    z-index: 60;
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.datepicker.datepicker-dropdown > div.datepicker-days {
    display: block;
}

.datepicker.datepicker-dropdown table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    margin: 0;
}

/* Cabecera: el mes al centro y las flechas a los lados, como dos botones
   pequenos de la marca. */
.datepicker.datepicker-dropdown thead th.datepicker-switch {
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--car-marron);
    cursor: pointer;
}

.datepicker.datepicker-dropdown thead th.prev,
.datepicker.datepicker-dropdown thead th.next {
    width: 32px;
    height: 32px;
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    color: var(--car-marron);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.datepicker.datepicker-dropdown thead th.prev:hover,
.datepicker.datepicker-dropdown thead th.next:hover,
.datepicker.datepicker-dropdown thead th.datepicker-switch:hover {
    background: #f2e9dd;
}

.datepicker.datepicker-dropdown thead th.dow {
    height: 24px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--car-texto-3);
}

/* --------------------------------------------------------------------------
   LOS DIAS, MEDIDOS CONTRA EL ARTBOARD

   La caja de cada dia -fondo blanco y filete #e6ddd2- la pone ahora la hoja
   importada, que la saca del diseno. Aqui habia un 'border: 1px solid
   transparent' escrito a mano que la tapaba: carrito.css se carga despues y
   ganaba. Por eso los dias salian como numeros sueltos, sin cuadro.

   Queda solo lo que la tabla necesita y el diseno no puede dar, porque alli
   cada dia es un <button> y aqui es un <td>.
   -------------------------------------------------------------------------- */
.datepicker.datepicker-dropdown td.day {
    height: 38px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.datepicker.datepicker-dropdown td.day:hover {
    background-color: #faf6f1;
    border-color: #8c6239;
}

/* LOS DIAS DE OTRO MES SE VACIAN, no se apagan.

   El diseno deja esos huecos en blanco: septiembre empieza en martes y las dos
   primeras casillas estan vacias, sin caja. La opcion showOtherMonths de la
   libreria no surte efecto en la version que trae el sitio -se probo-, asi que
   se vacian aqui: sin caja, sin numero y sin cursor. */
.datepicker.datepicker-dropdown td.day.old,
.datepicker.datepicker-dropdown td.day.new {
    background-color: transparent;
    border-color: transparent;
    color: transparent;
    cursor: default;
}

/* Un dia bloqueado SI se ve -hace falta para no perder la cuenta de la semana-
   pero apagado. Aqui llevaba ademas un tachado que el diseno no tiene y que
   ensuciaba la rejilla entera los domingos. */
.datepicker.datepicker-dropdown td.day.disabled,
.datepicker.datepicker-dropdown td.day.disabled:hover {
    background-color: transparent;
    border-color: transparent;
    color: #d8cec0;
    cursor: default;
}

/* HOY: filete naranja y fondo crema, como en el artboard. Antes se pintaba
   igual que el dia elegido -marron macizo- y no habia forma de distinguirlos. */
.datepicker.datepicker-dropdown td.day.today,
.datepicker.datepicker-dropdown td.day.today:hover {
    background-color: #faf6f1;
    border-color: #ffb466;
    font-weight: 600;
    color: #4c4c4c;
}

/* El dia ELEGIDO si va macizo: es el unico de la rejilla y tiene que cantar. */
.datepicker.datepicker-dropdown td.day.active,
.datepicker.datepicker-dropdown td.day.active:hover {
    background-color: #8c6239;
    border-color: #8c6239;
    color: #ffffff;
    font-weight: 600;
}

/* Las otras vistas -meses, anios- se ensenan solas cuando la libreria pone su
   display en linea; aqui solo se les da el mismo aspecto que a los dias. */
.datepicker.datepicker-dropdown span.month,
.datepicker.datepicker-dropdown span.year,
.datepicker.datepicker-dropdown span.decade {
    height: 44px;
    line-height: 44px;
    border-radius: 0;
    font-size: 13px;
    color: var(--car-texto);
}

.datepicker.datepicker-dropdown span.month:hover,
.datepicker.datepicker-dropdown span.year:hover {
    background: var(--car-crema);
}

.datepicker.datepicker-dropdown span.month.active,
.datepicker.datepicker-dropdown span.year.active {
    background: var(--car-marron);
    color: var(--car-blanco);
}

/* bootstrap-theme pinta la flechita de la esquina del dropdown; el artboard no
   la tiene y ademas sale descolocada respecto al campo. */
.datepicker.datepicker-dropdown:before,
.datepicker.datepicker-dropdown:after {
    display: none;
}


/* EL FONDO AZUL DE LOS CAMPOS RELLENADOS.

   No es del sitio: es el resalte de autocompletado de Chrome, que pinta el
   campo de azul palido y ademas cambia el color del texto. Rompe la paleta
   justo en los campos que el cliente acaba de escribir.

   No se puede quitar con background-color -el navegador lo aplica en una capa
   propia-, pero si tapar con una sombra interior del ancho del campo, que es
   el truco que usa todo el mundo desde que existe la regla. El color del texto
   se recupera con -webkit-text-fill-color, porque 'color' tampoco le llega. */
.car-carrito input:-webkit-autofill,
.car-carrito input:-webkit-autofill:hover,
.car-carrito input:-webkit-autofill:focus,
.car-carrito textarea:-webkit-autofill,
.car-carrito select:-webkit-autofill {
    box-shadow: 0 0 0 100px var(--car-blanco) inset;
    -webkit-text-fill-color: var(--car-texto);
    caret-color: var(--car-texto);
}


/* CORRECCION OPTICA DEL NUMERO, HECHA DONDE TOCA.

   Aqui habia un transform: translateY(1px) sobre .car-paso-num para centrar la
   cifra dentro de su cuadrado. Estaba mal puesto: .car-paso-num ES el cuadrado,
   asi que el transform bajaba la caja entera y descuadraba el cuadrado respecto
   al filete -medido: filete en 225, cuadrado en 226-.

   El pixel se le da al GLIFO, con un padding que la caja absorbe porque tiene
   el alto fijo en 28. */
.car-carrito .car-paso-num {
    padding-top: 2px;
}

/* Y EL TITULO SUBIA 4px.

   .car-paso-tit es un <h2>, y el margin-bottom: 8px que arrastra de la hoja
   base entra en el centrado de flex: el navegador centra la caja CON su margen,
   asi que el texto queda 4px por encima de la linea. Medido: filete en 225,
   titulo en 221. */
.car-carrito .car-paso-tit {
    margin: 0;
}


/* El pie del calendario: los dos atajos y la nota, como en el artboard.
   Va separado de la rejilla por un filete y con el mismo aire (18px) que el
   resto de la caja. */
/* EL HUECO ANTES DEL PIE ESTABA SUMADO DOS VECES.

   .datepicker-dropdown es flex en columna con gap:14 -valor del diseno-, asi
   que la separacion entre la tabla y el pie ya la pone el contenedor. El
   margin-top:14 que llevaba el pie se sumaba encima: medido, 34px de hueco
   donde el artboard tiene 26.

   Los 6 que sobran del final de la tabla son el border-spacing de la ultima
   fila, que el margen negativo de arriba solo recorta a los lados. */
.datepicker.datepicker-dropdown .car-cal-pie {
    margin-top: 0;
    /* !important, y no es pereza: index.css trae ".datepicker > div { display:
       none }", pensado para las cinco vistas de la libreria, y el pie es
       tambien un div hijo directo. Aqui la regla ajena y la propia acaban
       empatando en la practica porque la libreria reordena el nodo, asi que se
       zanja en vez de seguir subiendo especificidad. */
    display: flex !important;
    padding-top: 12px;
    border-top: 1px solid var(--car-filete);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.datepicker.datepicker-dropdown .car-cal-atajos {
    display: flex;
    gap: 8px;
}

.datepicker.datepicker-dropdown .car-cal-atajo {
    flex: 1;
    height: 38px;
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    color: var(--car-marron);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.datepicker.datepicker-dropdown .car-cal-atajo:hover:not(:disabled) {
    background: #f2e9dd;
    border-color: var(--car-marron);
}

/* Un atajo apagado es un dia bloqueado: se deja a la vista para que se entienda
   que la opcion existe y hoy no se puede, en vez de desaparecer sin explicar. */
.datepicker.datepicker-dropdown .car-cal-atajo:disabled {
    color: #cbbfae;
    border-color: var(--car-filete);
    background: var(--car-blanco);
    cursor: default;
}

.datepicker.datepicker-dropdown .car-cal-nota {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--car-texto-3);
}


/* ==========================================================================
   EL HORARIO

   El aspecto YA NO SE ESCRIBE AQUI: viene de assets/css/importado-carrito.css,
   generado a partir del artboard. Lo que queda en este bloque es solo lo que
   el diseno no puede dar, porque alli no hay ni <select> ni datos reales:

     - esconder el select nativo, que sigue siendo el campo que vale,
     - el ancla del panel,
     - el estado "elegida" y el aviso de "sin fecha", que en el artboard no
       existen como estados.
   ========================================================================== */

/* El <select> nativo abre la lista del sistema operativo: fondo oscuro, fila
   en azul, tipografia del sistema. El navegador la dibuja FUERA de la pagina y
   no hay CSS que la alcance. Por eso se esconde y encima va el panel del
   diseno; el select sigue ahi y sigue siendo el que se envia. */
.car-carrito .car-picker-hora select {
    display: none;
}

.car-carrito .car-hora {
    position: relative;
}

.car-carrito .car-hora-campo {
    width: 100%;
    height: 52px;
    padding: 0 46px 0 16px;
    background-color: #ffffff;
    border: 1px solid #e6ddd2;
    color: #4c4c4c;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    display: flex;
    align-items: center;
    cursor: pointer;
    /* El reloj va en el fondo y no como <svg> aparte: un elemento encima del
       boton se come los clics del borde derecho. */
    background-image: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238c6239'%20stroke-width='1.6'%20stroke-linecap='round'><circle%20cx='12'%20cy='12'%20r='8.5'/><path%20d='M12%207.5V12l3.2%202'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 19px 19px;
}

.car-carrito .car-hora-campo.is-vacio {
    color: #a8957f;
}

.car-carrito .car-hora-campo.is-abierto,
.car-carrito .car-hora-campo:hover {
    border-color: #8c6239;
}

/* Los botones salian con el gris de fabrica del navegador por debajo del
   blanco del diseno: un <button> trae appearance:auto, y con eso el motor
   pinta su propio fondo y su propio borde antes que cualquier color. El
   artboard no lo declara porque alli tambien son botones pero dentro de su
   propio reset. */
.car-carrito .car-hora-franja,
.car-carrito .car-hora-campo {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* La franja elegida. En el artboard este estado se pinta con otros valores en
   linea, que el importador no puede recoger porque solo captura el estado que
   estaba a la vista; se copian los mismos colores. */
.car-carrito .car-hora-franja:hover,
.car-carrito .car-hora-franja.is-activa {
    background-color: #faf6f1;
    border-color: #8c6239;
}

.car-carrito .car-hora-franja.is-activa .car-hora-franja-txt {
    color: #8c6239;
}

/* Sin fecha elegida el servidor no manda franjas: se dice, en vez de abrir un
   panel vacio que parece roto. */
.car-carrito .car-hora-vacio {
    font-size: 13px;
    line-height: 1.45;
    color: #a8957f;
}

/* Rotulo que se conserva para los lectores de pantalla y no se ve. El artboard
   no dibuja rotulo encima de los campos de fecha y hora -el propio texto del
   campo ya dice lo que es-, pero quitarlo del marcado dejaria esos dos campos
   sin nombre para quien navega a ciegas. */
.car-carrito .car-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* El aviso de entrega, con la tipografia que el artboard le da a esta linea:
   15px, semi, texto normal y centrada. Se deja SIN el icono de reloj, que el
   artboard tampoco tiene.

   El texto no se toca: es dinamico -cambia segun si todavia se puede entregar
   hoy- y sustituirlo por la frase fija del artboard seria prometer un horario
   que el sistema no cumple. */
.car-carrito .aviso-entrega {
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--car-texto);
    margin: 0;
}

.car-carrito .aviso-entrega i {
    display: none;
}

/* Los dos campos de cuando: misma separacion que el artboard. */
.car-carrito .car-pickers {
    gap: 14px;
}


/* El desplegable de locacion y el campo que lo acompana no se alineaban: el de
   la derecha lleva rotulo encima -"Nro. de departamento", "Hospital / clinica"-
   y el desplegable no, asi que cada celda empezaba a una altura distinta y los
   dos controles quedaban a distinto nivel.

   Se alinean por ABAJO, que es donde estan los controles. Alinear por arriba
   obligaria a inventarse un rotulo para el desplegable, y el diseno no lo
   lleva: su texto ya dice "Seleccionar locacion". */
.car-carrito .car-campos {
    align-items: end;
}


/* El calendario dejaba un hueco vacio entre la ultima semana y los atajos.

   bootstrap-datepicker pinta SIEMPRE seis filas, tenga el mes cuatro semanas o
   cinco, para que la caja no cambie de alto al pasar de mes. Con los dias del
   mes de al lado ocultos, esa sexta fila se queda en blanco y se ve como un
   hueco. Se esconde cuando no tiene ningun dia del mes en curso.

   Se usa :not(:has(...)) y no una clase puesta por JS porque la libreria
   repinta la tabla entera en cada cambio de mes: cualquier clase que le
   pusieramos duraria hasta el primer clic en la flecha. */
.datepicker.datepicker-dropdown tbody tr:not(:has(td.day:not(.old):not(.new))) {
    display: none;
}


/* La etiqueta de la derecha de cada franja YA NO SE ESCRIBE AQUI: sus valores
   los pone la hoja importada, que los saca del artboard. Aqui queda solo lo
   que el diseno no puede dar: el margin-left:auto que la empuja contra el
   borde -en el artboard es un valor resuelto, y el importador descarta los
   margenes con decimales por ser medidas del navegador y no del diseno- y el
   nowrap, que evita que "Disponible" parta en dos en un movil estrecho. */
.car-carrito .car-hora-franja-tag {
    margin-left: auto;
    white-space: nowrap;
}

/* El panel mide 322 y el campo 381: en el diseno es MAS ESTRECHO que el campo,
   a proposito. Aqui lo ensanche pensando que estaba mal y era al reves; medido
   contra el artboard, 322 es el valor bueno y lo pone la hoja importada.

   Se deja esta nota en vez de la regla para que a nadie le vuelva a parecer un
   fallo: si el panel se ve mas corto que el campo, es el diseno. */


/* --------------------------------------------------------------------------
   MEDIDO CONTRA EL ARTBOARD: la tabla no reparte igual que la rejilla

   El calendario del diseno es un grid de siete columnas de 38 con 3 de hueco:
   38*7 + 3*6 = 284, que es justo el ancho util de la caja (322 menos 18 de
   relleno a cada lado y 1 de filete). Una <table> no hace eso: reparte el
   ancho disponible entre las celdas, asi que cada dia salia de 42 y las
   flechas de 44 en vez de 32.

   Se fijan los anchos y se reproduce el hueco con border-spacing. El margen
   negativo compensa que border-spacing tambien separa por FUERA, cosa que el
   gap de una rejilla no hace: sin el, la tabla mide 290 y no 284.
   -------------------------------------------------------------------------- */
.datepicker.datepicker-dropdown {
    /* El relleno de 18 que trae el diseno no llegaba: entre bootstrap,
       bootstrap-theme, main.min.css e index.css hay CINCO reglas que ponen
       padding a .dropdown-menu y a .datepicker, y alguna gana. Medido: la caja
       salia con 0 y la tabla pegada al filete. Se zanja aqui en vez de seguir
       subiendo especificidad contra cuatro hojas ajenas. */
    padding: 18px !important;
}

.datepicker.datepicker-dropdown table {
    /* 290 y no 284: border-spacing tambien separa por FUERA -cosa que el gap de
       una rejilla no hace-, asi que a lo util hay que sumarle los dos huecos de
       los extremos. El margen negativo los recorta y la tabla acaba midiendo
       los 284 del diseno, con las celdas a 38 exactos. */
    width: 290px;
    border-collapse: separate;
    border-spacing: 3px;
    /* Arriba y a los lados se recortan los 3 de border-spacing que sobran por
       fuera; ABAJO no. Se probo recortarlos tambien y el hueco hasta el filete
       del pie se quedaba en 20 cuando el artboard tiene 26: esos 3 de mas son
       justo parte de esa separacion. */
    margin: -3px -3px 0;
}

.datepicker.datepicker-dropdown td.day,
.datepicker.datepicker-dropdown th.dow {
    width: 38px;
}

/* Las flechas salian de 38 y no de 32: van en la misma columna que los dias,
   asi que heredan su ancho. max-width las obliga; el sobrante se lo queda el
   titulo del mes, que en el diseno tambien es el que se estira. */
.datepicker.datepicker-dropdown thead th.prev,
.datepicker.datepicker-dropdown thead th.next {
    width: 32px;
    max-width: 32px;
    min-width: 32px;
}

/* El titulo del mes se pintaba con un fondo amarillento que no es del diseno:
   sale de .datepicker-switch de index.css. En el artboard no tiene fondo. */
.datepicker.datepicker-dropdown thead th.datepicker-switch {
    background-color: transparent;
}


/* LA CABECERA DEL CALENDARIO, FUERA DEL REPARTO DE COLUMNAS.

   Las flechas salian de 38 y no de 32 porque comparten columna con los dias, y
   una tabla reparte el ancho por columna. En el artboard esa fila NO esta
   dentro de la rejilla: es una fila aparte.

   Se le da display:flex SOLO a la primera fila del thead. La segunda -DO LU MA
   ...- se queda como fila de tabla, que es lo que la mantiene alineada con los
   dias; ponerle flex a las dos fue lo que desarmo el calendario antes. */
.datepicker.datepicker-dropdown thead tr:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.datepicker.datepicker-dropdown thead tr:first-child th.datepicker-switch {
    flex: 1;
}

.datepicker.datepicker-dropdown thead tr:first-child th.prev,
.datepicker.datepicker-dropdown thead tr:first-child th.next {
    flex: 0 0 32px;
    width: 32px;
    max-width: 32px;
}


/* --------------------------------------------------------------------------
   TRES COSAS QUE SOLO SE VEN MIDIENDO

   1. LAS FLECHAS NO SON TEXTO. bootstrap-datepicker las pinta como
      <i class="icon-arrow-left">, un icono de la fuente de iconos del sitio,
      que trae SU PROPIO color: por eso se veian casi blancas aunque el <th>
      estuviera en marron. Se esconde el icono y se dibuja el caracter del
      diseno, que ademas no depende de que esa fuente haya cargado.

   2. LOS DIAS DEL MES DE AL LADO llegan con class="old disabled disabled-date
      day": son 'old' Y 'disabled' a la vez. La regla de .disabled va antes y
      pesa lo mismo, asi que les ganaba y los pintaba en gris en vez de
      vaciarlos. Por eso siguen apareciendo el 30 y el 31 de agosto. Esta va
      despues y zanja el empate.

   3. LOS <th> DE LA CABECERA siguen siendo table-cell aunque su fila sea flex:
      el navegador no los convierte en hijos flexibles solos. Sin display:block
      el ancho lo sigue mandando la columna de la tabla y las flechas se quedan
      en 38 en vez de 32.
   -------------------------------------------------------------------------- */

.datepicker.datepicker-dropdown thead th.prev i,
.datepicker.datepicker-dropdown thead th.next i {
    display: none;
}

.datepicker.datepicker-dropdown thead th.prev::before {
    content: "\2039";
}

.datepicker.datepicker-dropdown thead th.next::before {
    content: "\203A";
}

.datepicker.datepicker-dropdown thead th.prev::before,
.datepicker.datepicker-dropdown thead th.next::before {
    color: #8c6239;
    font-size: 15px;
    line-height: 1;
}

.datepicker.datepicker-dropdown thead tr:first-child th {
    display: block;
    text-align: center;
}

.datepicker.datepicker-dropdown thead tr:first-child th.prev,
.datepicker.datepicker-dropdown thead tr:first-child th.next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
}

/* Va DESPUES de .disabled a proposito: ver el punto 2 de arriba. */
.datepicker.datepicker-dropdown td.day.old,
.datepicker.datepicker-dropdown td.day.new,
.datepicker.datepicker-dropdown td.day.old.disabled,
.datepicker.datepicker-dropdown td.day.new.disabled {
    background-color: transparent;
    border-color: transparent;
    color: transparent;
    cursor: default;
}


/* LOS DOS CAMPOS DE "CUANDO" SE COMPORTAN IGUAL AL PASAR Y AL ENFOCAR.

   El de fecha es un <input> y el de hora un <button>, y eso los hacia
   comportarse distinto sin que nadie lo hubiera decidido:

     - index.css trae ".formulario input:focus { border-bottom: 1px solid
       #ffb466 }", asi que al enfocar la fecha aparecia una linea NARANJA solo
       en el borde de abajo. El naranja es el color de acento de la marca, no el
       del foco, y ademas dejaba el campo con tres lados de un color y uno de
       otro.
     - El de hora, al no ser input, no recibia nada de eso: se ponia el borde
       entero en marron.

   Se unifican: borde COMPLETO en marron para los dos, en hover y en foco, que
   es lo que hace el resto de campos de la pantalla. */
.car-carrito .car-picker-campo:hover,
.car-carrito .car-picker-campo:focus,
.car-carrito .car-picker-campo:active:focus,
.car-carrito .car-hora-campo:hover,
.car-carrito .car-hora-campo.is-abierto {
    border: 1px solid #8c6239;
}


/* Dentro de .car-picker el calendario se coloca solo, pero hay que decirle que
   arranque bajo el campo -el contenedor tiene el rotulo oculto y el campo- y
   por encima de lo que venga despues. */
.car-carrito .car-picker .datepicker.datepicker-dropdown {
    /* 58 desde el borde del contenedor, que es el valor del artboard: el campo
       mide 52 y el diseno deja 6 de aire. Con 'top: 100%' caia 40px mas abajo,
       porque el contenedor incluye tambien la linea de la fecha en texto que
       aparece al elegir dia. */
    top: 58px;
    left: 0;
    z-index: 60;
}


/* --------------------------------------------------------------------------
   EL RESUMEN SE PEGABA DEBAJO DE LA CABECERA

   El artboard no tiene cabecera fija, asi que de alli viene un 'top: 0' que
   aqui deja la primera fila del resumen -"Productos (1)"- tapada por la barra
   del sitio. Medida: 89px de alto, position:fixed, z-index 100.

   Se declara ese alto como variable en vez de repetir el numero: lo necesitan
   el punto de pegado Y el alto maximo, y si la cabecera cambia se toca en un
   solo sitio.
   -------------------------------------------------------------------------- */
.car-carrito {
    --car-cabecera-alto: 89px;
}

@media (min-width: 992px) {

    .car-carrito .car-resumen {
        top: calc(var(--car-cabecera-alto) + 16px);
        /* Y el alto maximo descuenta lo mismo: con 100vh el resumen sobresalia
           por abajo justo lo que mide la cabecera, y la nota de "Precios en
           soles" se quedaba fuera de la ventana. */
        max-height: calc(100vh - var(--car-cabecera-alto) - 32px);
    }
}


/* --------------------------------------------------------------------------
   EL BOTON DE PAGAR NO PUEDE QUEDAR DETRAS DE UN SCROLL

   Con el resumen pegado y limitado al alto de la ventana, el conjunto no cabe
   cuando el formulario esta vacio: la lista de campos que faltan son once
   lineas. El aside tenia overflow:auto, asi que PAGAR seguia estando -medido:
   caja 722, contenido 964- pero solo se llegaba a el desplazando por dentro de
   una caja que no parece desplazable. En un checkout eso no vale.

   Lo que crece es la LISTA, no el resto. Asi que hace scroll ella sola y el
   total, la caja de entrega, los terminos y PAGAR se quedan siempre a la vista.

   El min-height:0 es imprescindible: sin el, un hijo flexible no baja de su
   contenido y la lista no se encoge, con lo que el scroll no aparece nunca.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    /* Se recorta al alto disponible; lo que sobra lo cede la lista, no el
       boton. Con overflow visible el contenido salia por debajo del borde de
       la ventana y PAGAR quedaba fuera igual, solo que sin scroll. */
    .car-carrito .car-resumen {
        overflow: hidden;
    }

    /* LAS PIEZAS QUE CEDEN.

       Los hijos del resumen llevan flex-shrink: 0 -se puso para que PAGAR
       dejara de aplastarse hasta 15px de alto-, y ese mismo 0 impedia que la
       lista se encogiera: medido, la lista ocupaba sus 318px enteros y los 242
       que sobraban se los comia el final del resumen, con PAGAR fuera de la
       ventana.

       12/09/2026: la clienta volvio a reportarlo -«el boton se sigue
       escondiendo y al parecer es por los datos que se van llenando arriba»-, y
       tenia razon en el diagnostico. Arreglar solo la lista no bastaba porque
       la lista DESAPARECE cuando el formulario esta completo, que es justo
       cuando aparecen las otras dos que crecen:

         - `car-resumen-filas`, una fila por producto y por complemento
         - `car-resumen-entrega`, con la fecha y la direccion en varias lineas

       Medido con la ventana a 820px (viewport 643): el resumen pedia 600px
       contra un maximo de 522, o sea 78px recortados por el `overflow: hidden`
       de arriba, y dentro de esos 78 estaba PAGAR. Ningun hijo podia ceder.

       Ceden las tres que crecen con los datos. Lo que va DESPUES -los terminos,
       PAGAR y la nota- se queda entero siempre: en un checkout el boton de
       pagar no puede quedar recortado nunca. */
    .car-carrito .car-resumen-falta,
    .car-carrito .car-resumen-filas,
    .car-carrito .car-resumen-entrega {
        flex-shrink: 1;
        min-height: 0;
        overflow-y: auto;
    }
}


/* --------------------------------------------------------------------------
   EN MOVIL EL PANEL DE HORAS SE SALIA POR LA DERECHA

   Mide 322 -valor del diseno- y cuelga del borde IZQUIERDO de su campo. En
   escritorio da igual, pero en movil los dos campos de "cuando" van uno al
   lado del otro: el de hora empieza en x=199 y el panel llegaba a 521 con una
   ventana de 390. Medido.

   Se ancla por la derecha y se le pone un tope de ancho: asi cae hacia dentro
   de la pantalla en vez de hacia fuera, y nunca puede pasarse del viewport
   aunque el campo este pegado al borde.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .car-carrito .car-hora-panel {
        left: auto;
        right: 0;
        width: auto;
        min-width: 260px;
        max-width: calc(100vw - 32px);
    }
}


/* ==========================================================================
   LA LINEA DE PRODUCTO EN MOVIL

   Estaba apilada: la foto sola y grande arriba, el boton de complementos a
   todo el ancho, la cantidad estirada de lado a lado, los precios sueltos y
   la papelera perdida al final. Ocupaba tres pantallas por producto.

   El artboard movil la resuelve en filas apretadas:

       [foto] [nombre]              [papelera]
              [codigo]
              [tachado  actual]
       [cantidad]          [TOTAL LINEA / cifra]
       [Complementos (n) ................... ]

   Se hace con una rejilla de tres columnas y areas con nombre, que es lo que
   permite colocar cada pieza sin tocar el marcado.

   .car-linea-info se pone en display:contents: es un envoltorio sin
   significado propio -lleva nombre, codigo y el desplegable de complementos- y
   asi sus tres hijos entran en la rejilla por separado. Sin eso, el
   desplegable se quedaria encerrado en la columna del nombre en vez de cruzar
   a lo ancho.
   HASTA 1259px, NO HASTA 991.

   La rejilla de seis columnas de escritorio tiene cinco columnas fijas que
   suman, con huecos y relleno, 646px; el nombre se queda con lo que sobre.
   Desde 992 la columna del pedido comparte fila con el resumen (372px), y
   entre 992 y unos 1250 no sobra nada: medido a 1000px, la columna de textos
   media 0px y el nombre salia una letra por linea ("H/A/P/P/Y..."). Lo vio la
   clienta en su portatil. A 1280 ya mide 178px y cabe.
   Asi que la linea compacta sigue valiendo hasta 1259px. Solo la linea: lo
   demas de este bloque que era de movil se ha ido a su propio @media.
   ========================================================================== */
@media (max-width: 1259.98px) {

    .car-carrito .car-linea {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        /* El precio va en la MISMA columna que el nombre y el codigo, pegado
           debajo, no en una fila suelta a lo ancho: asi la foto tiene al lado
           todo lo que describe al producto y la fila de abajo queda libre para
           la cantidad y el total, como en el artboard. */
        grid-template-areas:
            "foto   nombre  quitar"
            "foto   codigo  quitar"
            "foto   precio  quitar"
            "cant   cant    total"
            "toggle toggle  toggle"
            "comps  comps   comps";
        align-items: center;
        gap: 6px 12px;
    }

    /* Solo la COLOCACION. El tamano lo pone la hoja importada, que lo saca del
       artboard: aqui estaba a ojo en 56 y el diseno la hace de 64. */
    .car-carrito .car-linea-foto {
        grid-area: foto;
        align-self: start;
    }

    /* El envoltorio desaparece como caja; sus hijos pasan a la rejilla. */
    .car-carrito .car-linea-info {
        display: contents;
    }

    .car-carrito .car-linea-nom { grid-area: nombre; align-self: end; }
    .car-carrito .car-linea-cod { grid-area: codigo; align-self: start; }

    .car-carrito .car-linea-quitar {
        grid-area: quitar;
        align-self: start;
    }

    /* Los dos precios en la misma linea, no uno debajo del otro. */
    /* EN FILA, no en columna.

       La regla de escritorio pone .car-linea-precio en flex COLUMN -alli el
       tachado va encima del precio- y aqui solo se cambiaba a flex sin decir la
       direccion, asi que seguia heredando column: medido, el tachado en y=486 y
       el actual en y=514, los dos en la misma x. En el artboard movil van uno
       al lado del otro con 8 de separacion. */
    .car-carrito .car-linea-precio {
        grid-area: precio;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        align-self: start;
    }

    /* La cantidad deja de estirarse: mide lo que mide en el diseno y se queda
       a la izquierda. 44 de alto y no 40, que es lo que pide el artboard y
       ademas el minimo comodo para el dedo. */
    .car-carrito .car-linea > .car-cant {
        grid-area: cant;
        width: 136px;
        height: 44px;
        justify-self: start;
    }

    /* Los botones a 44x42, que es lo que miden en el artboard. Estaban en
       40x38 y dejaban el campo del medio apretado entre ellos y con hueco
       arriba y abajo dentro de un grupo de 44 de alto. */
    .car-carrito .car-linea > .car-cant .car-cant-boton {
        /* flex y no solo width: el grupo es flexible y encogia los botones a 40
           aunque los tres hijos -44+46+44- caben de sobra en los 136. */
        flex: 0 0 44px;
        width: 44px;
        height: 42px;
    }

    .car-carrito .car-linea > .car-cant .car-cant-campo {
        width: 46px;
    }

    .car-carrito .car-linea-total {
        grid-area: total;
        text-align: right;
        justify-self: end;
    }

    /* El desplegable de complementos cruza las tres columnas, debajo de todo.
       Solo el del PRODUCTO: los complementos tienen el suyo ("Anadir mas") y
       ese no participa de esta rejilla. */
    .car-carrito .car-linea > .car-linea-info > .car-linea-toggle {
        grid-area: toggle;
        width: 100%;
        margin-top: 6px;
    }

    /* LA LISTA DE COMPLEMENTOS TAMBIEN ES HIJA DE .car-linea.

       Sin area declarada, el navegador le inventaba una celda: metia una
       columna de mas y el nombre del producto se quedaba en 20px de ancho,
       partido en una letra por linea. Se vio al anadir complementos.

       Con area propia, a lo ancho y en su fila, vuelve a su sitio. */
    .car-carrito .car-linea > .car-comps {
        grid-area: comps;
        width: 100%;
    }

    /* AQUI HABIA UNA "RED DE SEGURIDAD" QUE HACIA MAS DANO QUE BIEN.

       Era un '.car-linea > * { grid-column: 1 / -1 }' con excepciones, para que
       un hijo nuevo no inventara columnas. Pero grid-column PISA al grid-area:
       al listar .car-cant entre las excepciones con 'grid-column: auto' se
       anulaba su area, dejaba de abarcar dos columnas y su ancho fijo de 136
       empujaba la columna de la foto. Medido: las columnas pasaron de
       64/155/82 a 136/132/34 y el nombre se quedo sin sitio.

       Cada pieza se coloca por su grid-area y punto. Si algun dia aparece un
       hijo nuevo, se le da su area aqui, como a .car-comps. */
}

/* Movil de verdad: esto no es de la linea de producto, asi que no sube a
   1259 con el bloque de arriba. */
@media (max-width: 991.98px) {

    /* "SEGUIR COMPRANDO" no esta en el artboard movil: en una pantalla estrecha
       roba una fila entera justo encima del paso 2 y compite con PAGAR, que ya
       vive fijo en la barra de abajo. En escritorio si se queda, que es donde
       el diseno lo pone.

       SE OCULTA EL ENLACE, NO .car-promo-pie. Ese contenedor es el padre de
       TODO el bloque del cupon -rotulo, campo y boton VALIDAR-, no solo del
       enlace: ocultarlo dejo a los clientes de movil sin poder meter un cupon.
       El campo seguia en el DOM pero medido 0x0, asi que no daba ningun error;
       simplemente no estaba. */
    .car-carrito .car-promo-pie > .car-enlace {
        display: none;
    }
}

/* 992-1259: la linea va compacta, pero en una computadora "Añadir
   complementos" sigue siendo un enlace discreto a la izquierda, no una barra
   de lado a lado. A todo el ancho y con el texto centrado partia en dos
   lineas y parecia descolocado. */
@media (min-width: 992px) and (max-width: 1259.98px) {

    .car-carrito .car-linea > .car-linea-info > .car-linea-toggle {
        width: auto;
        justify-self: start;
        white-space: nowrap;
    }
}

/* Desde 1260, rejilla de seis columnas, pero con la columna de textos mas
   ancha.

   Medido a 1280 y mas: .car-grid topa en 1280px, asi que la columna de textos
   nunca pasaba de 178px, y "AÑADIR COMPLEMENTOS" medía 169. Le sobraban 9px.
   En Windows la letra sale un poco mas ancha, el boton partia en dos lineas y,
   como el texto de un <button> va centrado, la segunda linea quedaba metida
   hacia dentro. La clienta lo vio dos veces.

   Dos cosas:
   - Las columnas fijas se ajustan a lo que miden de verdad sus piezas: la
     cantidad mide 126 (la columna era de 136) y la papelera 34 (era de 40).
     El total pasa de 128 a 120 y el hueco de 18 a 14. Con eso la columna
     de textos pasa de 178 a 222px. El precio unitario se queda en 116: a 108
     ya partia en dos lineas con una letra ancha.
   - El enlace no se parte nunca y va alineado a la izquierda, debajo del
     codigo. Si un dia no cabe, se sale por el hueco de la derecha en vez de
     romperse en dos lineas. */
@media (min-width: 1260px) {

    .car-carrito .car-linea {
        grid-template-columns: 88px minmax(0, 1fr) 126px 116px 120px 34px;
        gap: 14px;
    }

    .car-carrito .car-linea-ahora,
    .car-carrito .car-linea-total-cifra {
        white-space: nowrap;
    }

    .car-carrito .car-linea-toggle {
        white-space: nowrap;
        text-align: left;
        justify-content: flex-start;
    }
}


/* Rotulos que solo valen para un tamano de pantalla. El artboard de escritorio
   separa "Distrito de envio" y "Costo de envio"; el de movil los junta en
   "Distrito y costo" y deja el importe como cifra suelta, sin rotulo propio. */
.car-carrito .car-solo-movil {
    display: none;
}

@media (max-width: 991.98px) {

    .car-carrito .car-solo-movil {
        display: block;
    }

    .car-carrito .car-solo-escritorio {
        display: none;
    }

    /* En movil el costo va sin rotulo: lo nombra el de arriba. */
    .car-carrito .car-entrega-campo--costo .car-rotulo {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   LA CONFIRMACION DE LA FECHA SALIA A 20px Y EN NEGRITA

   Es el <span id="diaSeleccionado"> que aparece bajo el campo cuando ya hay
   fecha elegida ("5 de septiembre de 2026"). main.min.css lo viste por su ID
   -20px y peso 700-, y un id pesa (1,0,0) mientras que .car-picker-nota pesa
   (0,1,0): pierde siempre. En escritorio no cantaba porque otra media query
   del mismo archivo lo baja a 16; en movil se quedaba en 20, en negrita, y
   partido en dos lineas junto al campo.

   Se le gana con el mismo id dentro del carrito, que es lo unico que pesa mas
   sin recurrir a !important. */
.car-carrito #diaSeleccionado {
    /* LA FAMILIA TAMBIEN, y esto es lo que se me escapo la primera vez.

       main.min.css le pone font-family: brandon_grotesquebold por el id. El
       peso computado dice 400 -y por eso al medirlo parecia correcto- pero la
       familia ES la variante negrita: Brandon son dos familias sueltas, no una
       con eje de peso, asi que el bold viene en el nombre y no en el numero.
       Se veia en negrita con un font-weight de 400.

       Es lo unico del carrito que quedaba fuera de Jost. */
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--car-texto-3);
    line-height: 1.4;
}

@media (min-width: 768px) {
    .car-carrito #diaSeleccionado {
        font-size: 12px;
    }
}

/* Y la papelera del cupon, centrada con el campo. Llevaba align-self:start de
   una regla anterior y quedaba 6px por encima -medido-. */
.car-carrito .car-promo-fila #carrito_cupon_limpiar {
    align-self: center;
}


/* --------------------------------------------------------------------------
   EN MOVIL EL CAMPO DE HORA MEDIA DOS PIXELES MAS QUE EL DE FECHA

   .car-picker-campo esta escrito primero-movil: 50px de alto y 13px de letra
   de base, y sube a 52 y 15 en el @media (min-width: 768px). La capa de hora
   sale del artboard de ESCRITORIO -de ahi salen sus 52px y sus 15px-, asi que
   nunca recibio ese escalon hacia abajo y en el movil se quedaba dos pixeles
   por encima del campo de fecha.

   El desnivel no acaba en el campo: .car-picker los apila con gap, o sea que
   las dos segundas lineas -la fecha en palabras y "Rango aproximado"- caian a
   distinta altura, 441 contra 443 medidos a 390px de ancho.

   Aqui la hora copia las medidas del campo de fecha en movil: mismo alto,
   misma letra, mismo icono y mismo hueco reservado para el. El panel baja los
   mismos dos pixeles, porque su top es el alto del campo mas el gap.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .car-carrito .car-hora-campo {
        height: 50px;
        padding: 0 32px 0 12px;
        font-size: 13px;
        background-position: right 12px center;
        background-size: 17px 17px;
    }

    .car-carrito .car-hora-panel {
        top: 56px;
    }
}


/* --------------------------------------------------------------------------
   LA BARRA DE PASOS SE QUEDA A LA VISTA MIENTRAS SE BAJA

   Se escribio como indicador de por donde va el scroll, pero se iba con el
   scroll: a los dos dedos de bajar ya no estaba, o sea que indicaba la
   posicion solo cuando el cliente todavia no se habia movido de sitio.

   Se pega bajo la cabecera del sitio, que es fija y mide 65px. Solo en movil:
   en escritorio la barra esta oculta -las dos columnas ya ensenan por donde va
   la cosa- y ahi esta regla no llega a aplicarse.

   El z-index es 15: por debajo del panel de horas, que va a 20, y por encima
   del calendario, que va a 10. Medido: los dos abren HACIA ABAJO del campo, o
   sea que en su sitio natural ninguno llega a la franja de la barra. La unica
   forma de cruzarse es seguir bajando con el panel abierto, y entonces que la
   barra tape lo que pasa por debajo es justo lo que tiene que ocurrir.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /*
     * Y ANTES QUE NADA: EL <main> IMPEDIA QUE SE PEGARA.
     *
     * index.css declara "main { overflow: hidden }" en este mismo ancho, para
     * que nada -un carrusel, una animacion- ensanche la pagina y aparezca
     * scroll horizontal en el telefono. Efecto de lado: un overflow distinto de
     * visible convierte al elemento en el contenedor de scroll de todo lo
     * pegajoso que lleve dentro. Como el <main> no tiene scroll propio, la
     * barra se quedaba pegada a EL y se iba con la pagina; position:sticky
     * estaba puesto y no hacia absolutamente nada.
     *
     * "clip" recorta igual que "hidden" pero NO crea contenedor de scroll, que
     * es justo la diferencia que hace falta. Solo en el eje horizontal, que es
     * el que se queria recortar; en vertical se deja ver, que es lo que permite
     * que la barra se pegue.
     *
     * Va dentro de @supports porque en un navegador sin "clip" la declaracion
     * entera se descarta y se queda el "hidden" de index.css: se pierde el
     * pegado, no se gana un scroll horizontal.
     */
    @supports (overflow: clip) {
        main.main-carrito {
            overflow: visible;
            overflow-x: clip;
        }
    }

    .car-carrito .car-progreso {
        position: sticky;
        /*
         * El tope NO se escribe a mano. carrito-pasos.js mide la cabecera fija
         * al arrancar y deja el alto en --car-cab-alto; asi este numero no se
         * queda viejo cuando la cabecera cambia -que es justo lo que acaba de
         * pasar al meter el recuadro del WhatsApp: 65 se quedo corto y la barra
         * se metia cuatro pixeles por debajo-. El 69 del respaldo es la suma
         * actual, por si el JS no llega a correr.
         */
        top: var(--car-cab-alto, 69px);
        z-index: 15;
    }

    /* Los pasos ya recorridos se leen distinto de los que faltan: el filete
       queda en el marron flojo de la paleta -el mismo de las notas- y no en el
       gris de "todavia no". No se inventa un color nuevo. */
    .car-carrito .car-progreso-paso.is-hecho .car-progreso-barra {
        background: var(--car-texto-3);
    }
}


/* --------------------------------------------------------------------------
   EL PRECIO DEL COMPLEMENTO SE APLASTABA HASTA DESBORDARSE SOBRE LA PAPELERA

   Medido a 390px: el pie de la fila mide 192px y dentro van cuatro cosas -el
   grupo de cantidad (128), el precio, la papelera (34) y dos huecos de 12-.
   No caben: hacen falta unos 219. Lo que pasaba es que el precio cedia TODO
   su ancho -quedaba en 6px con 55 de texto dentro- y las letras se salian de
   su caja y se pintaban encima de la papelera. Eso es la equis sobre el
   precio que se veia en movil.

   Lo permitia esta regla, que esta puesta al carrito entero:

       .car-carrito * { min-width: 0 }

   Sin ella un elemento flexible no baja de su ancho minimo de contenido; con
   ella, si. Es util en las rejillas -evita que un texto largo las ensanche-,
   asi que no se quita: se le devuelve el minimo a los dos elementos que aqui
   no pueden encogerse.

   Y como aun asi no caben, el pie pasa a poder partirse en dos lineas. Se
   parte solo cuando hace falta: en pantallas mas anchas los cuatro caben y la
   fila sigue siendo una sola linea.

   NO SE QUITA LA PAPELERA aunque el artboard no la tenga: alli un complemento
   se quita bajando la cantidad a cero -el propio artboard ensena una fila en
   0- y aqui la papelera es lo que borra la linea. Cambiar eso es una decision
   de producto, no de maquetacion.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .car-carrito .car-linea-comp-pie {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* El precio y la papelera conservan su tamano: el que cede es el hueco. */
    .car-carrito .car-linea-comp-pie > .car-linea-comp-total,
    .car-carrito .car-linea-comp-pie > .car-linea-quitar {
        flex: none;
        min-width: min-content;
    }

    /* Cuando el pie se parte, el precio y la papelera se van juntos a la
       segunda linea y quedan pegados a la derecha, debajo del grupo de
       cantidad. El margin-left:auto de .car-linea-comp-total ya los empuja. */
    .car-carrito .car-linea-comp-pie > .car-cant {
        flex: none;
    }
}


/* --------------------------------------------------------------------------
   LA EQUIS DEL MODAL SALIA A 48px, NO A 20

   El boton de cerrar es <button class="close"><span>&times;</span></button> y
   la regla que ya habia le fijaba 34x34 y 20px AL BOTON. Pero index.css trae:

       .close, .modal-header .close span { font-size: 3rem }

   ...y ese segundo selector apunta al SPAN de dentro, que no heredaba nada.
   Resultado medido: el boton 34x34 con un span de 29x48 dentro, o sea la equis
   sobresaliendo 14px de su propio boton. Se veia enorme y descolocada.

   Se le dice al span que herede del boton, que es quien manda el tamano, y se
   le quita el interlineado de 48px para que quede centrada en la caja.
   -------------------------------------------------------------------------- */
.car-modal .modal-header .close span,
.car-modal .car-modal-cerrar span {
    font-size: inherit;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   EN MOVIL NO HABIA FORMA DE LEER LAS CONDICIONES DE REPARTO

   main.min.css esconde TODOS los interrogantes de ayuda por debajo de 992px:

     @media (max-width: 991px) and (min-width: 320px) {
         .fa-question-circle { display: none !important }
     }

   En el carrito eso deja fuera cinco ayudas, y una de ellas -la de "Rango
   aproximado"- es la unica parte del sitio donde se explica como funciona el
   reparto: que los horarios son rangos aproximados, que el conductor espera 15
   minutos en la direccion y que en fechas especiales -San Valentin, Dia de la
   Madre, Navidad...- los rangos varian. Son condiciones del servicio, no un
   adorno, y en movil no se podian leer de ninguna manera.

   El !important no es pereza: a un !important solo se le gana con otro. Se
   comprobo primero sin el y el icono seguia en display:none.

   Va acotado a `.car-carrito` a proposito. Fuera del carrito puede haber
   interrogantes escondidos por buenas razones, y aqui solo se arregla lo que
   se ha medido.

   Lo del ::after es el tamano del dedo. Con el icono a la vista la caja queda
   en 13x13 px (13x8 los que van dentro de un campo), muy por debajo de los
   24x24 que pide WCAG 2.2. En vez de agrandar el icono -que descuadraria la
   linea de "Rango aproximado" y el interior de los campos- se le pone encima
   una caja invisible de 34x34 centrada, que no ocupa sitio en el flujo.
   Medido en QA a 390px: los cinco responden a 14 px del centro en las cuatro
   direcciones. Y los 34px caben en el hueco que el campo ya reserva, porque
   `.car-carrito .car-campo:has(> .car-ayuda) .car-input` deja 38px de padding
   a la derecha.

   El `position: relative` es para que el ::after tenga contra que colocarse.
   Se repite `position: absolute` en los que van dentro de un campo porque esa
   regla existe mas arriba y aqui no se quiere tocar: ahi el absolute ya hace
   de ancla.

   Comprobado en QA a 390x844: los cinco tooltips abren con el FOCO, que es lo
   que dispara un toque real en un <a href="#">, y ninguno se sale por los
   lados ni es mas alto que la pantalla. El mas largo, el de los rangos, mide
   310x417. Y el clic no mueve la pagina pese al href="#".
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .car-carrito .car-ayuda {
        display: inline-block !important;
        position: relative;
    }

    .car-carrito .car-campo > .car-ayuda {
        position: absolute;
    }

    .car-carrito .car-ayuda::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 34px;
        height: 34px;
    }
}


/* --------------------------------------------------------------------------
   UN CAMPO EN ROJO CUANDO ESTA MAL

   Los validadores de carrito.js llevan desde siempre marcando los campos con
   la clase `is-invalid` de Bootstrap. En el carrito redisenado esa clase NO
   pintaba nada: medido sobre #email-comprador, con la clase y sin ella el
   borde salia igual -1px solid #e6ddd2- y el fondo tambien.

   Consecuencia: se pulsaba PAGAR, la validacion fallaba, el campo quedaba
   marcado por dentro y la persona no veia una sola senal. La clienta lo
   reporto el 12/09/2026: «no veo ningun mensaje en rojo que me diga que algo
   falta o esta mal escrito».

   El rojo es el mismo #c0522f que ya usa el aviso de error del pago, para no
   meter un color nuevo en la pantalla.
   -------------------------------------------------------------------------- */
.car-carrito .car-input.is-invalid,
.car-carrito .car-select.is-invalid,
.car-carrito input.is-invalid,
.car-carrito select.is-invalid,
.car-carrito textarea.is-invalid {
    border-color: #c0522f;
    background-color: #fdf5f2;
}

.car-carrito .is-invalid:focus {
    border-color: #c0522f;
    box-shadow: 0 0 0 3px rgba(192, 82, 47, .16);
    outline: none;
}

/* ==========================================================================
   EL CARRITO CON EL ESTILO DE LA WEB (02/10/2026)

   Se probo lo contrario -llevar los botones rectos y marrones del carrito a
   toda la web- y la clienta prefirio el de la web: "colores y formas
   redondeadas". Asi que es el carrito el que se alinea.

   Cada pieza toma su equivalente de rediseno.css:
     - botones          -> "Agregar al carrito" de la ficha: pildora terracota
     - campos           -> los de "Personaliza la entrega": radio 10px
     - cantidad         -> .rd-cantidad: pildora
     - paneles/lineas   -> las tarjetas: radio 16px
   El terracota es #A8432C, el de la franja de confianza que eligio.

   NO se toca --car-marron: tine tambien titulos, rotulos y precios -61 usos-
   y esos se quedan en marron. Solo cambian los elementos de accion.
   ========================================================================== */
.car-carrito,
.car-modal {
    --car-terracota: #A8432C;
    --car-terracota-hover: #8E3522;
}

/* --- Botones: PAGAR, "Aplicar" del codigo de promocion --- */
.car-carrito .car-boton,
.car-carrito a.car-boton {
    background: var(--car-terracota);
    border-radius: 999px;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 15px;
}
.car-carrito .car-boton:hover,
.car-carrito .car-boton:focus,
.car-carrito a.car-boton:hover,
.car-carrito a.car-boton:focus {
    background: var(--car-terracota-hover);
}
/* "PAGAR" esta escrito en mayusculas en la vista; en la web los botones van
   en caja normal, pero cambiar el texto toca el JS que lo lee. Se deja y se
   le baja el espaciado para que no quede gritado. */
.car-carrito .car-boton-pagar {
    letter-spacing: .08em;
}

/* --- Campos --- */
.car-carrito .car-input,
.car-carrito .car-select,
.car-carrito .car-textarea,
.car-carrito .car-picker-campo,
.car-carrito .car-hora-campo {
    border-radius: 10px;
}
.car-carrito .car-input:focus,
.car-carrito .car-select:focus,
.car-carrito .car-textarea:focus,
.car-carrito .car-picker-campo:focus,
.car-carrito .car-hora-campo:focus {
    border-color: var(--car-terracota);
}

/* El codigo de promocion es campo + boton pegados: el campo redondea solo a
   la izquierda y el boton a la derecha, como .input-taza de la ficha. */
.car-carrito .car-promo-fila .car-input {
    border-radius: 999px 0 0 999px !important;
}
.car-carrito .car-promo-fila .car-boton {
    border-radius: 0 999px 999px 0;
}

/* --- Cantidad --- */
.car-carrito .car-cant {
    border-radius: 999px;
    overflow: hidden;
}
.car-carrito .car-cant-boton {
    background: transparent;
}
.car-carrito .car-cant-boton:hover {
    color: var(--car-terracota);
}

/* --- Paneles, lineas y resumen --- */
.car-carrito .car-linea,
.car-carrito .car-panel,
.car-carrito .car-sugerencias,
.car-carrito .car-resumen {
    border-radius: 16px;
}
.car-carrito .car-linea-foto,
.car-carrito .car-resumen-entrega,
.car-carrito .car-opcion,
.car-carrito .car-pago,
.car-carrito .car-linea-comp {
    border-radius: 10px;
}
.car-carrito .car-linea-quitar {
    border-radius: 50%;
}
/* "Añadir complementos": en el telefono es un boton con borde; en la
   computadora es un enlace sin borde y el radio no se nota. */
.car-carrito .car-linea-toggle {
    border-radius: 999px;
}

/* --- Seleccion activa (BOLETA/FACTURA, forma de pago) en terracota --- */
.car-carrito .car-opcion.is-activa,
.car-carrito .car-pago.is-activa {
    border-color: var(--car-terracota);
}
.car-carrito .car-opcion.is-activa {
    color: var(--car-terracota);
}
.car-carrito .car-opcion-dot {
    border-color: var(--car-terracota);
    color: var(--car-terracota);
}
.car-carrito input[type="checkbox"],
.car-carrito input[type="radio"] {
    accent-color: var(--car-terracota);
}

/* --- Numero de paso: circulo terracota, como .rd-step__n de la portada --- */
.car-carrito .car-paso-num {
    background-color: var(--car-terracota);
    border-radius: 50%;
}

/* --- Modal de complementos --- */
.car-modal .modal-content,
.car-modal .modc {
    border-radius: 16px;
    overflow: hidden;
}
.car-modal .btn-agregar-complemento {
    background: var(--car-terracota);
    border-radius: 999px;
}
.car-modal .btn-agregar-complemento:hover,
.car-modal .btn-agregar-complemento:focus {
    background: var(--car-terracota-hover);
}

/* ==========================================================================
   RESUMEN SIN BARRAS DE SCROLL Y SIN EL GLOBO ENCIMA (02/10/2026)

   La clienta, en Chrome de Windows: barras de scroll dentro de "Productos" y
   de "Entrega", y el globo de WhatsApp otra vez sobre PAGAR.

   1. Las barras. El arreglo del 12/09 hacia que la lista y la entrega
      cedieran alto y se desplazaran POR DENTRO (overflow-y:auto) cuando el
      resumen no cabia. En Mac las barras son flotantes y no se veian; en
      Windows salen siempre. Medido a 1366x657: el resumen pedia ~570px contra
      536 de maximo, y casi todo lo que sobraba era aire (160px de gap y 76 de
      relleno). Se compacta el aire y nada cede: las cajas vuelven a su alto.

   2. El globo. La regla de arriba (body:has(.car-carrito) ... bottom:104px)
      se hizo para el movil, para que no tapara la barra de PAGAR. En
      escritorio esos 104px lo dejan exactamente a la altura de PAGAR dentro
      del resumen pegajoso. Aqui baja a la esquina, 16px, un poco mas chico, y
      el resumen termina por encima de el: ya no pueden coincidir.

   3. Ultimo recurso. Si con todo eso no cabe (ventanas muy bajas, o muchos
      complementos), el resumen se desplaza ENTERO -una sola barra, y PAGAR
      siempre alcanzable- en vez de recortar o meter barras en cajitas.
   ========================================================================== */
@media (min-width: 992px) {

    body:has(.car-carrito) a[href*="api.whatsapp.com"][style*="fixed"] {
        bottom: 16px !important;
        right: 12px !important;
    }
    body:has(.car-carrito) a[href*="api.whatsapp.com"][style*="fixed"] img {
        width: 52px;
        height: 52px;
    }

    /* 16 de margen + 52 del globo + 16 de aire = 84 abajo */
    .car-carrito .car-resumen {
        max-height: calc(100vh - var(--car-cabecera-alto) - 16px - 84px);
        padding: 24px 26px 24px;
        gap: 12px;
        overflow-y: auto;
    }

    .car-carrito .car-resumen-falta,
    .car-carrito .car-resumen-filas,
    .car-carrito .car-resumen-entrega {
        flex-shrink: 0;
        overflow: visible;
    }

    .car-carrito .car-resumen-filas {
        gap: 8px;
    }

    .car-carrito .car-resumen-entrega {
        gap: 6px;
        padding: 12px 14px;
    }

    .car-carrito .car-resumen .car-terminos {
        margin-bottom: 0;
    }
}