/*
 * Pescando a Pleno · checkout.css · carrito, finalizar pedido y estado del pedido (corrida 2B).
 * Usa los tokens y componentes de base.css (botones, elecciones, cantidad, medidor, avisos, vacío, éxito, estados).
 * Acá va solo lo de estas páginas. El JS (checkout.js) no usa clases: se engancha por data-*.
 *
 * Celular primero. Dos ideas que sostienen el diseño sin tocar el JS:
 * 1. El cierre (total y acción) es position: sticky abajo. Mientras se ve la lista o el formulario, queda pegado al pie
 *    de la pantalla; al final de la página vuelve a su lugar y no tapa el pie. Para eso su contenedor es la columna entera:
 *    .carrito__lado y .checkout-lado son display: contents en celular. Lo fijo a 360 x 640: 61 arriba + 68 a 96 abajo.
 * 2. Los estados que pinta el JS se leen con :has(): bajo el mínimo (data-carrito-finalizar con aria-disabled="true")
 *    la acción es "Sumar productos"; con el éxito a la vista se va "Volver al carrito".
 */

/* ---------- Página ---------- */
.checkout-pagina { padding-bottom: var(--esp-7); }
@media (min-width: 1024px) { .checkout-pagina { padding-bottom: var(--esp-8); } }
.checkout-pagina [hidden] { display: none !important; }
.checkout-pagina > h1 { margin-bottom: var(--esp-5); }
.checkout-pagina .precio { font-variant-numeric: tabular-nums; }

/* Primera cotización (corrida 3, R1): la página ocupa la pantalla entera y el pie arranca afuera. Así no se corre cuando
   checkout.js pinta las filas (CLS 0,38 a 0 a 360 x 640). Recotizar con la lista a la vista no la estira. El carrito vacío
   no llega acá: lo decide parciales/vacio-antes.php antes del primer pintado. */
.carrito[aria-busy="true"]:not(:has([data-carrito-lleno]:not([hidden]))),
.checkout[aria-busy="true"] { min-height: 100vh; }

/* Cargando: la ruedita con su texto y filas de relleno con la forma de la lista, sin datos inventados */
.carrito__cargando, .checkout__cargando { display: grid; gap: var(--esp-3); max-width: 36rem; margin-bottom: var(--esp-5); }
.carrito__esqueleto, .checkout__esqueleto { display: grid; gap: 2px; }
.carrito__sin-js, .checkout__sin-js { margin-bottom: var(--esp-5); }

/* ---------- Carrito ---------- */
.carrito { position: relative; }
.carrito__avisos:not(:empty), .checkout__avisos:not(:empty) { display: grid; gap: var(--esp-2); margin-bottom: var(--esp-4); }
/* Aviso del servidor (sin stock, ya no está, precio cambiado): arriba, amarillo apagado, queda */
.carrito-aviso {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 52px;
  padding: 6px 6px 6px var(--esp-4); border-radius: var(--radio); background: var(--aviso-fondo); color: var(--aviso); font-size: var(--texto-b);
}
/* "Quitaste X" con Deshacer: flota abajo como el aviso del sistema y se va solo a los 10 s. El mouse o el foco del teclado lo
   frenan. Quitar lleva el foco a Deshacer (corrida 3, A16): con :focus-visible, tocado con el dedo o el mouse se sigue yendo. */
.carrito-aviso:has(> [data-aviso-deshacer]:not([hidden])) {
  position: fixed; left: var(--lado); right: var(--lado); bottom: calc(108px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-avisos);
  border: 1px solid var(--linea-fuerte); background: var(--blanco); color: var(--carbon); box-shadow: var(--sombra-flota);
  animation: carrito-aviso-irse 240ms ease 10s forwards;
}
.carrito-aviso:has(> [data-aviso-deshacer]:not([hidden])):is(:hover, :has(:focus-visible)) { animation-play-state: paused; }
@keyframes carrito-aviso-irse { to { opacity: 0; visibility: hidden; } }
@media (min-width: 768px) { .carrito-aviso:has(> [data-aviso-deshacer]:not([hidden])) { left: auto; width: 420px; } }
@media (min-width: 1024px) { .carrito-aviso:has(> [data-aviso-deshacer]:not([hidden])) { bottom: calc(var(--esp-5) + env(safe-area-inset-bottom, 0px)); } }
.carrito-aviso .boton--texto { flex: none; }

/* Con la lista a la vista, "Actualizando precios…" no corre nada: queda la ruedita al lado del título y los montos se apagan */
.carrito:has([data-carrito-lleno]:not([hidden])) .carrito__cargando { position: absolute; top: 6px; right: var(--lado); margin: 0; }
.carrito:has([data-carrito-lleno]:not([hidden])) .carrito__cargando .cargando { font-size: 0; }
.carrito:has([data-carrito-lleno]:not([hidden])) .carrito__esqueleto { display: none; }
.carrito[aria-busy="true"] :is([data-carrito-total], [data-fila-subtotal]) { opacity: 0.45; transition: opacity var(--transicion); }

.carrito__error { margin-bottom: var(--esp-5); }
.carrito__error-cuerpo { display: grid; gap: var(--esp-3); justify-items: start; }
.carrito__vacio, .checkout__vacio { margin-bottom: var(--esp-2); }
.carrito__ultimo { margin-top: -4px; }

/* Columnas: en celular una sola; desde 1024 la lista y el pedido a la derecha (380 px), como la maqueta */
.carrito__lleno { display: flex; flex-direction: column; gap: var(--esp-5); }
.carrito__lleno > * { min-width: 0; }
.carrito__principal { display: grid; gap: var(--esp-4); min-width: 0; }
.carrito__lado { display: contents; }

/* Selector de precio: dos elecciones; el título del grupo lo lee el lector */
.carrito__modo { margin: 0; padding: 0; border: 0; min-width: 0; }
.carrito__modo .eleccion { min-height: 60px; }
/* Minorista: cuánto saldría a precio mayorista. Nota callada debajo de la lista, con su salida */
.carrito__sugerencia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--esp-3); padding: 10px var(--esp-4) 6px;
  border-radius: var(--radio); background: var(--crema); font-size: var(--texto-b); color: var(--carbon);
}
.carrito__sugerencia p { flex: 1 1 18rem; padding-top: 2px; }
.carrito__texto-boton { margin-left: -8px; }

/* Cierre de 2B: "3 productos, 9 unidades." arriba del selector, como la maqueta */
.carrito__cuenta { margin: -4px 0 0; font-size: var(--texto-b); color: var(--gris); }
.carrito__cuenta:empty { display: none; }

/* Para llegar al mínimo (maqueta tienda-carrito.html): las que llegan solas, la más barata primero. Filas sin caja. */
.carrito-sugerencias { display: grid; gap: var(--esp-2); margin-top: var(--esp-4); scroll-margin-top: 80px; }
.carrito-sugerencias__bajada { font-size: var(--texto-b); color: var(--gris); }
.carrito-sugerencias__lista { display: grid; margin: var(--esp-2) 0 0; }
.carrito-sug { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: var(--esp-3) 0; border-top: 1px solid var(--linea); }
.carrito-sug:last-child { border-bottom: 1px solid var(--linea); }
.carrito-sug__foto { width: 64px; }
.carrito-sug__foto img[src*="/sin-foto-"] { width: 58%; height: auto; mix-blend-mode: normal; }
.carrito-sug__cuerpo { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.carrito-sug__nombre { padding: 12px 0; margin: -12px 0; color: var(--carbon); text-decoration: none; font: 500 var(--texto-b)/1.35 var(--fuente-cuerpo); text-wrap: balance; }
.carrito-sug__nombre:hover { text-decoration: underline; text-decoration-color: var(--verde-agua); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.carrito-sug__precio { font-size: var(--texto-s); color: var(--gris); }
.carrito-sug__llega { font-size: var(--texto-s); font-weight: 500; color: var(--ok); }
.carrito-sug__sumar { margin-top: var(--esp-2); }
.carrito-sug__sumar .icono { width: 20px; height: 20px; }

/* Fila: foto 72 (80 desde 600), nombre, precio por unidad y subtotal, cantidad y Quitar */
.carrito__lista { display: grid; margin-top: var(--esp-2); }
.carrito-fila { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: var(--esp-4) 0; border-top: 1px solid var(--linea); }
.carrito-fila:last-child { border-bottom: 1px solid var(--linea); }
.carrito-fila__foto { width: 72px; }
.carrito-fila__foto img[src*="/sin-foto-"] { width: 58%; height: auto; mix-blend-mode: normal; }
.carrito-fila__cuerpo { display: grid; gap: 2px; min-width: 0; }
.carrito-fila__nombre {
  justify-self: start; padding: 11px 0; margin: -11px 0; color: var(--carbon); text-decoration: none;
  font: 500 var(--texto-m)/1.35 var(--fuente-cuerpo); text-wrap: balance;
}
.carrito-fila__nombre:hover { text-decoration: underline; text-decoration-color: var(--verde-agua); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.carrito-fila__precios { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--esp-3); font-size: var(--texto-s); color: var(--gris); }
.carrito-fila__subtotal { margin-left: auto; font-size: var(--texto-l); color: var(--carbon); }
.carrito-fila__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-2); }
.carrito-fila__acciones .cantidad .icono { width: 20px; height: 20px; }
.carrito-fila__quitar { padding-inline: 8px; }
/* Desde 600: el subtotal sube al renglón del nombre, a la derecha, como la maqueta */
@media (min-width: 600px) {
  .carrito-fila { grid-template-columns: 80px minmax(0, 1fr); gap: var(--esp-4); }
  .carrito-fila__foto { width: 80px; }
  .carrito-fila__cuerpo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "p p" "a a"; column-gap: var(--esp-5); }
  .carrito-fila__nombre { grid-area: n; }
  .carrito-fila__precios { display: contents; }
  .carrito-fila__precios > [data-fila-precio] { grid-area: p; font-size: var(--texto-s); color: var(--gris); }
  .carrito-fila__subtotal { grid-area: s; margin: 0; align-self: start; line-height: 1.3; }
  .carrito-fila__acciones { grid-area: a; }
}

/* Vaciar: botón de texto al pie de la lista; la confirmación en crema con el rojo apagado */
.carrito__vaciar { display: grid; gap: var(--esp-2); justify-items: start; margin-top: -4px; }
.carrito__vaciar > .boton--texto { margin-left: -8px; color: var(--gris); }
.carrito__vaciar > .boton--texto:hover { color: var(--azul); }
.carrito__vaciar-confirmar { display: grid; gap: var(--esp-3); width: 100%; max-width: 30rem; padding: 14px var(--esp-4); border-radius: var(--radio); background: var(--crema); }
.carrito__vaciar-confirmar .botones > .boton { flex: none; }

/* Pedido (columna derecha en escritorio) */
.carrito__resumen-titulo { margin-top: var(--esp-3); }
html[data-modo="mayorista"] .solo-minorista, html:not([data-modo="mayorista"]) .solo-mayorista { display: none; }
.carrito__envio { display: flex; justify-content: space-between; gap: var(--esp-3); margin: -8px 0 0; font-size: var(--texto-m); }
.carrito__envio dd { margin: 0; text-align: right; }
.carrito__total { display: grid; align-content: center; line-height: 1.2; }
.carrito__total > span { font-size: var(--texto-s); color: var(--gris); }
.carrito__total .precio { font-size: var(--texto-xl); }
.carrito__no-alcanza { display: grid; gap: var(--esp-3); justify-items: start; }
.carrito__seguir { width: 100%; }
.carrito__nota { max-width: 34em; }
.carrito__medidor .medidor__falta { font-size: var(--texto-b); font-family: var(--fuente-cuerpo); font-weight: 500; color: var(--tinta); }

/* Bajo el mínimo mayorista: la acción es "Sumar productos" (vuelve a la lista). "Finalizar" y "Seguir comprando" no van. */
.carrito__sumar { display: none; }
.carrito:has([data-carrito-finalizar][aria-disabled="true"]) .carrito__finalizar,
.carrito:has([data-carrito-finalizar][aria-disabled="true"]) .carrito__seguir { display: none; }
.carrito:has([data-carrito-finalizar][aria-disabled="true"]) .carrito__sumar { display: inline-flex; }
/* Llegó al mínimo: el texto del medidor en verde */
.carrito:has([data-carrito-finalizar][aria-disabled="false"]) .carrito__medidor .medidor__falta { color: var(--ok); }

/* Cierre en celular y tablet: barra pegada abajo con el medidor (si es mayorista), el total y una acción */
@media (max-width: 1023px) {
  .carrito__cierre {
    /* Debajo del encabezado (40): al final de la página, con el pie a la vista, la barra queda arriba y tapaba la lupa
       y el carrito del encabezado a 768 (chequeo del cierre de 2B). Sigue encima del contenido. */
    position: sticky; bottom: 0; z-index: 30;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--esp-3);
    margin-inline: calc(-1 * var(--lado)); padding: 12px var(--lado) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--linea); background: var(--blanco); box-shadow: var(--sombra-barra);
  }
  .carrito__cierre .carrito__medidor { flex: 1 1 100%; display: block; }
  .carrito__cierre .carrito__medidor progress { position: absolute; left: 0; right: 0; top: -1px; height: 4px; border-radius: 0; }
  .carrito__cierre .carrito__medidor progress::-webkit-progress-value { border-radius: 0; }
  .carrito__cierre .carrito__total { flex: 1 1 auto; min-width: 0; }
  .carrito__cierre > .boton { flex: none; }
}
@media (max-width: 599px) { .carrito__no-alcanza .boton { width: 100%; } }
@media (min-width: 600px) and (max-width: 1023px) { .carrito__seguir { width: auto; justify-self: start; align-self: flex-start; } }

@media (min-width: 1024px) {
  .carrito__lleno { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--esp-7); align-items: start; }
  .carrito__lado {
    display: flex; flex-direction: column; gap: var(--esp-4); position: sticky; top: 84px;
    padding: 20px var(--esp-5) var(--esp-5); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco);
  }
  .carrito__cierre { display: contents; }
  .carrito__resumen-titulo { order: 0; margin: 0; }
  .carrito__medidor { order: 1; padding-bottom: var(--esp-2); }
  .carrito__medidor .medidor__falta { font: 700 var(--texto-l)/1.3 var(--fuente-titulos); }
  .carrito__envio { order: 2; margin: 0; padding-top: var(--esp-2); border-top: 1px solid var(--linea); }
  .carrito__total { order: 3; display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--esp-3); border-top: 1px solid var(--linea); }
  .carrito__total > span { font-size: var(--texto-l); font-weight: 500; color: var(--carbon); }
  .carrito__total .precio { font-size: 1.5rem; }
  .carrito__finalizar, .carrito__sumar { order: 4; width: 100%; }
  .carrito__no-alcanza { order: 5; }
  .carrito__seguir { order: 6; }
  .carrito__nota { order: 7; }
}

/* ---------- Finalizar pedido ---------- */
.checkout-volver { margin: -10px 0 var(--esp-1); }
.checkout-volver .enlace { gap: 6px; text-decoration: none; }
.checkout-volver .enlace span, .checkout-volver .enlace { text-underline-offset: 4px; }
.checkout-volver .enlace:hover { text-decoration: underline; text-decoration-color: var(--verde-agua); text-decoration-thickness: 2px; }
/* Con el pedido hecho o el carrito vacío, volver al carrito no tiene sentido */
.checkout:has([data-checkout-exito]:not([hidden])) .checkout-volver,
.checkout:has([data-checkout-vacio]:not([hidden])) .checkout-volver { display: none; }

.checkout-form { display: flex; flex-direction: column; gap: var(--esp-6); }
.checkout-form > * { min-width: 0; }
.checkout-datos { display: grid; gap: var(--esp-6); min-width: 0; }
.checkout-seccion { margin: 0; padding: 0; border: 0; border-radius: 0; min-width: 0; }
/* Campos a lo ancho de una columna de lectura (40 rem); la barra del total sigue a todo el ancho */
.checkout-datos, .checkout-resumen, .checkout-confirmar { max-width: 40rem; }
.checkout-seccion > legend { float: left; width: 100%; margin-bottom: var(--esp-4); padding: 0; }
.checkout-seccion > legend + * { clear: both; }
.checkout-seccion + .checkout-seccion { padding-top: var(--esp-5); border-top: 1px solid var(--linea); }
.checkout-form .campo :is(input, textarea) { scroll-margin: 96px 0 120px; }
.checkout-form .campo > label { font-size: var(--texto-m); }
.checkout-form textarea { min-height: 104px; }
/* Error por campo: ícono de alerta delante del texto (el JS pone el texto; el ícono va por CSS para que no lo borre) */
.checkout-form .error-campo::before {
  content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5Z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5Z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Entrega: dos elecciones; con error, el borde de las dos en rojo */
.checkout-entrega .eleccion { min-height: 56px; }
.checkout-entrega:has([aria-invalid="true"]) .eleccion { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.checkout-nota { font-size: var(--texto-b); color: var(--gris); max-width: 36em; }
.checkout-direccion { display: grid; gap: var(--esp-4); }
@media (min-width: 480px) { .checkout-direccion { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* Tu pedido */
.checkout-lado { display: contents; }
.checkout-resumen { display: grid; gap: var(--esp-3); padding-top: var(--esp-5); border-top: 1px solid var(--linea); }
.checkout-resumen__lista { display: grid; margin: 0; }
.checkout-resumen__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-4); padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: var(--texto-b); }
.checkout-resumen__fila:first-child { padding-top: 0; }
.checkout-resumen__fila [data-fila-texto] { min-width: 0; }
.checkout-resumen__envio { display: flex; justify-content: space-between; gap: var(--esp-3); margin: 0; font-size: var(--texto-b); }
.checkout-resumen__envio dd { margin: 0; }

.checkout-confirmar { display: grid; gap: var(--esp-3); }
.checkout-confirmar__nota { font-size: var(--texto-b); color: var(--carbon); max-width: 36em; }
.checkout-confirmar__acepto .opcion { align-items: flex-start; padding-block: 12px; min-height: 0; font-size: var(--texto-b); line-height: 1.45; }
.checkout-confirmar__acepto .opcion input { margin-top: 0; }
.checkout-confirmar__acepto .opcion a { padding-block: 13px; margin-block: -13px; }
.checkout-confirmar__acepto:has([aria-invalid="true"]) .opcion input { outline: 2px solid var(--error); outline-offset: 2px; }

.checkout-cierre__total { display: grid; line-height: 1.2; }
.checkout-cierre__total > span { font-size: var(--texto-s); color: var(--gris); }
.checkout-cierre__total .precio { font-size: var(--texto-xl); }
/* Mayorista bajo el mínimo: el botón apagado no va en la barra; la salida es volver al carrito. El aviso dice por qué. */
.checkout-cierre__volver { display: none; }
.checkout:has([data-checkout-minimo]:not([hidden])) .checkout-cierre__boton { display: none; }
.checkout:has([data-checkout-minimo]:not([hidden])) .checkout-cierre__volver { display: inline-flex; }
/* Enviando: el botón queda verde con la ruedita y "Armando el pedido…", no apagado */
.checkout-form[aria-busy="true"] .checkout-cierre__boton:disabled {
  background: var(--accion); border: 2px solid var(--accion); color: var(--blanco); cursor: progress;
}
.checkout-form[aria-busy="true"] .checkout-cierre__boton:disabled::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: girar 0.8s linear infinite;
}

@media (max-width: 1023px) {
  .checkout-cierre {
    /* Debajo del encabezado (40): al final de la página, con el pie a la vista, la barra queda arriba y tapaba la lupa
       y el carrito del encabezado a 768 (chequeo del cierre de 2B). Sigue encima del contenido. */
    position: sticky; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--esp-3);
    margin: calc(-1 * var(--esp-4)) calc(-1 * var(--lado)) 0; padding: 10px var(--lado) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--linea); background: var(--blanco); box-shadow: var(--sombra-barra);
  }
  .checkout-cierre__total { flex: 1 1 auto; min-width: 0; }
  .checkout-cierre__boton, .checkout-cierre__volver { flex: none; }
}
/* Botón largo en celular: el total arriba, en un renglón, y el botón a todo el ancho */
@media (max-width: 599px) {
  .checkout-cierre--apilado { flex-wrap: wrap; row-gap: 4px; padding-top: 8px; }
  .checkout-cierre--apilado .checkout-cierre__total { display: flex; flex: 1 1 100%; justify-content: space-between; align-items: baseline; }
  .checkout-cierre--apilado .checkout-cierre__boton { flex: 1 1 100%; }
}

@media (min-width: 1024px) {
  .checkout-form { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--esp-7); align-items: start; }
  .checkout-datos { max-width: 40rem; }
  .checkout-lado {
    display: flex; flex-direction: column; gap: var(--esp-4); position: sticky; top: 84px;
    padding: 20px var(--esp-5) var(--esp-5); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--blanco);
  }
  .checkout-confirmar, .checkout-cierre { display: contents; }
  .checkout-resumen { order: 0; padding: 0; border: 0; }
  /* Lista larga: corre adentro de la caja, con sombra arriba o abajo cuando hay más (como la hoja "Más" del panel) */
  .checkout-resumen__lista {
    max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
    background:
      linear-gradient(var(--blanco) 30%, rgba(255, 255, 255, 0)) top / 100% 28px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), var(--blanco) 70%) bottom / 100% 28px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(26, 39, 48, 0.16), transparent) top / 100% 10px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(26, 39, 48, 0.16), transparent) bottom / 100% 10px no-repeat scroll;
  }
  .checkout-cierre__total { order: 1; display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--esp-3); border-top: 1px solid var(--linea); }
  .checkout-cierre__total > span { font-size: var(--texto-l); font-weight: 500; color: var(--carbon); }
  .checkout-cierre__total .precio { font-size: 1.5rem; }
  /* Como en el celular: qué pasa al tocar, acepto y el botón al final */
  .checkout-confirmar__nota { order: 2; font-size: var(--texto-b); }
  .checkout-confirmar__seguridad { order: 2; }
  .checkout-confirmar__acepto { order: 3; }
  .checkout-confirmar__minimo, .checkout-confirmar__error { order: 4; }
  .checkout-cierre__boton, .checkout-cierre__volver { order: 5; width: 100%; }
}

/* Éxito: verde claro con borde (base.css). Sin WhatsApp cargado, "Ver el pedido" pasa a ser el principal. */
.checkout-exito { max-width: 40rem; }
.checkout-exito:focus { outline: none; }
.checkout-exito:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.checkout-exito > .botones { justify-self: stretch; }
.checkout-exito__whatsapp { display: contents; }
.checkout-exito:has([data-exito-whatsapp-bloque][hidden]) .checkout-exito__pedido { background: var(--accion); border-color: var(--accion); color: var(--blanco); }
.checkout-exito:has([data-exito-whatsapp-bloque][hidden]) .checkout-exito__pedido:hover { background: var(--accion-encima); border-color: var(--accion-encima); }

/* ---------- Estado del pedido ---------- */
.pedido__aviso { display: flex; gap: var(--esp-3); align-items: flex-start; max-width: 44rem; margin-bottom: var(--esp-5); }
.pedido__aviso-titulo { font: 700 var(--texto-m)/1.3 var(--fuente-titulos); text-transform: none; color: inherit; }
.pedido__aviso p { margin-top: 2px; }
.pedido__grilla { display: grid; gap: var(--esp-6); }
.pedido__grilla > * { min-width: 0; }
.pedido__principal { display: grid; gap: var(--esp-6); }
.pedido__cab { display: grid; gap: var(--esp-3); }
.pedido__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); font-size: var(--texto-s); color: var(--gris); }
.pedido__cab h1 { overflow-wrap: anywhere; }
.pedido__gracias { display: flex; gap: var(--esp-2); align-items: flex-start; font-size: 1.0625rem; color: var(--carbon); }
.pedido__gracias .icono { margin-top: 2px; color: var(--ok); }
.pedido__gracias strong { font-weight: 500; }

/* Línea de pasos vertical: hecho (verde con tilde), actual (aro verde, nombre en negrita y qué pasa ahora), lo que falta (gris) */
.pedido__estado { display: grid; gap: var(--esp-4); }
.pedido-pasos { display: grid; margin: 0; }
.pedido-paso { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; }
.pedido-paso:last-child { padding-bottom: 0; }
.pedido-paso::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--linea); }
.pedido-paso:last-child::before { content: none; }
.pedido-paso--hecho::before { background: var(--accion); }
.pedido-paso__marca {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--linea-fuerte); background: var(--blanco); color: var(--blanco);
}
.pedido-paso__marca .icono { width: 16px; height: 16px; stroke-width: 2.6; }
.pedido-paso--hecho .pedido-paso__marca { border-color: var(--accion); background: var(--accion); }
.pedido-paso--actual .pedido-paso__marca { border-color: var(--accion); box-shadow: inset 0 0 0 5px var(--blanco); background: var(--accion); }
.pedido-paso__nombre { align-self: center; min-height: 28px; display: flex; align-items: center; font-size: var(--texto-m); color: var(--gris); }
.pedido-paso--hecho .pedido-paso__nombre { color: var(--carbon); }
.pedido-paso--actual .pedido-paso__nombre { font: 700 var(--texto-l)/1.3 var(--fuente-titulos); color: var(--tinta); }
.pedido-paso__texto { grid-column: 2; margin-top: 2px; font-size: var(--texto-b); color: var(--carbon); max-width: 34em; }
.pedido__estado-texto { max-width: 34em; }
.pedido__proximo { display: grid; gap: var(--esp-4); padding: var(--esp-4); border-radius: var(--radio); background: var(--crema); }
.pedido__proximo-texto { font-size: var(--texto-m); max-width: 34em; }
.pedido__proximo .botones > form { margin: 0; }

/* Qué pediste: renglones con cantidad por precio y subtotal; total abajo */
.pedido__detalle { display: grid; gap: var(--esp-3); align-content: start; }
.pedido__items { display: grid; margin: 0; }
.pedido__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "c s"; gap: 2px var(--esp-3);
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.pedido__item:first-child { padding-top: 0; }
.pedido__item-nombre { grid-area: n; font-weight: 500; }
.pedido__item-cuenta { grid-area: c; font-size: var(--texto-s); color: var(--gris); }
.pedido__item-subtotal { grid-area: s; align-self: baseline; }
.pedido__totales { display: grid; gap: var(--esp-2); margin: 0; }
.pedido__totales > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); }
.pedido__totales dd { margin: 0; text-align: right; }
.pedido__total { padding-top: var(--esp-3); border-top: 1px solid var(--linea); }
.pedido__total dt { font-size: var(--texto-l); font-weight: 500; }
.pedido__total .precio { font-size: 1.5rem; }

.pedido__extra { display: grid; gap: var(--esp-5); }
.pedido__enlace { display: grid; gap: var(--esp-3); }
.pedido__enlace-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.pedido__url {
  flex: 1 1 16rem; min-width: 0; padding: 12px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--crema-clara); font: 400 var(--texto-s)/1.4 var(--fuente-cuerpo); color: var(--carbon); overflow-wrap: anywhere;
}
.pedido__ayuda { display: grid; gap: var(--esp-2); max-width: 40em; }
.pedido__ayuda .enlace { gap: var(--esp-2); }

@media (min-width: 1024px) {
  .pedido__grilla { grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--esp-7); row-gap: var(--esp-6); align-items: start; }
  .pedido__principal { grid-column: 1; grid-row: 1; max-width: 44rem; }
  .pedido__extra { grid-column: 1; grid-row: 2; max-width: 44rem; }
  .pedido__detalle { grid-column: 2; grid-row: 1 / span 2; padding: 20px var(--esp-5) var(--esp-5); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); }
}

/* ---------- Pedido no encontrado ---------- */
.pedido-no-encontrado .vacio h1 { font: 700 var(--texto-xl)/1.3 var(--fuente-titulos); text-transform: none; color: var(--tinta); }
@media (min-width: 768px) { .pedido-no-encontrado .vacio h1 { font-size: 1.625rem; } }

/* Cierre de 2B: después de tocar "Enviar pedido por WhatsApp", la salida por si no se abrió */
.checkout-exito__no-abrio { margin-top: var(--esp-3); font-size: var(--texto-b); }