/* ============================================================================
   Juicy — Dashboard Design System · CART (el carrito del POS)
   ----------------------------------------------------------------------------
   Figma: "Juicy POS · Dashboard" (bgAIbrraHKNKn1VF7ZMHBQ), frame 2067:7337 →
   `Cart Header Actions` (2145:8239) + `Cart Sidebar`. Solo referencia VISUAL.

   ESTE ARCHIVO ESTÁ A MEDIAS A PROPÓSITO (F2g.1 = "el carrito vacío"). Trae el
   header del carrito y la carcasa con su estado vacío. Los renglones
   (`.pos_cart_item*`), las cantidades, los totales y el footer siguen en
   main.css y llegan en F2g.2; el checkout/pago —que el dueño rehace entero por
   pasos— en F2g.3.

   Markup: templates/template-parts/blocks/pos.php

   Contrato con pos.js — NO renombrar: `empty_cart`, `data-cart-content`,
   `#cart_customer`, `resetCart` / `searchCustomer` (van en data-*).
   ============================================================================ */

/* ---- Header del carrito ---------------------------------------------------- */

/* La fila de arriba: cliente | vaciar | en espera. En el Figma son TRES tarjetas
   separadas (310 / 60 / 60 con 10 de hueco), no una barra con botones dentro. */
.pos_cart_header_row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 15px;
}

#pos_cart_header {
  flex: 1;
  min-width: 0;
  /* 70, no 75: es la altura del Figma (la que ya decía el comentario de
     `.cart_action`, 60×70) y la que cuadra con el contenido — 40 del avatar + los
     15+15 del padding. Con 75 sobraban 5 sueltos. */
  height: 70px;
  background: var(--surface-page);
  padding: 15px;
  border-radius: var(--radius-md);
  gap: 10px;
  color: var(--text-muted);
}

#pos_customer {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  gap: 10px;
}

#pos_customer .customer_name {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
}

/* SIN CLIENTE: el nombre se atenúa y la ✕ NO EXISTE — no hay nada que quitar.
   Es lo mismo que ya hacía el carrito con su propio botón, y con la misma idea:
   una acción que no puede hacer nada no se enseña apagada, se enseña ausente.
   `no_customer` la trae el PHP en el render inicial (el carrito nace sin cliente)
   y pos.js la quita/pone donde ya tocaba el cliente. Ver nota 7. */
/* El nombre sube a `text/primary` SOLO cuando hay cliente. Sin él se queda con el
   muted que ya hereda de `#pos_cart_header` — o sea que aquí tampoco se apaga
   nada: se enciende. Poner el muted a mano era redundante y además escondía que
   faltaba lo contrario: sin esta regla el nombre se quedaba gris CON cliente. */
#pos_customer:not(.no_customer) .customer_name {
  color: var(--text-primary);
}

/* HERMANO, no hijo: la ✕ vive FUERA de `#pos_customer` a propósito — `#pos_customer`
   entero abre el buscador de clientes (`data-open-lightbox`), así que un botón
   dentro heredaría ese clic y quitar el cliente abriría el buscador. */
#pos_customer.no_customer + .cart_customer_reset {
  display: none;
}

/* CON CLIENTE el avatar se ENCIENDE: papel oscuro, tinta blanca. Sin cliente se
   queda como el `.avatar` genérico (neutral/200 con icono neutral/300), que es
   exactamente lo que pide el frame vacío — o sea que aquí no se apaga nada: se
   enciende cuando hay a quién. Ver nota 8. */
#pos_customer:not(.no_customer) .customer_avatar {
  background: var(--neutral-500);
  color: var(--text-on-color);
}

#pos_customer .customer_email {
  font-size: 12px;
  opacity: 0.7;
}

/* ---- Acciones del carrito -------------------------------------------------- */

/* Los dos botones de la derecha: 60x70 en el Figma (y 70 es lo que miden desde
   0.9.63 — estaban en 75, igual que el header, por una deriva vieja).
   No son `.icon-chip` —el chip tiene tamaños fijos (40/30) y estos son un slot
   de pantalla, no un control— pero SÍ consumen el contrato de tonos, así que su
   color no se declara aquí: se compone con `.tone-*`. Ver nota 2. */
.cart_action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 70px;
  font-size: 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s;

  /* El icono va en `--tone-fill`, NO en `--tone-on-soft`. Es la convención que el
     DS ya tenía escrita en el alert-banner: sobre un fondo soft, el TEXTO usa
     on-soft (que es tinta, oscura para que se lea) y el ICONO usa fill (que es el
     color vivo del tono). Lo confirma el Figma: su carrito es #F04438, el rojo
     vivo, no el rojo oscuro de texto. Ver nota 6. */
  background: var(--tone-soft);
  color: var(--tone-fill);
}

.cart_action:hover {
  background: var(--tone-fill);
  color: var(--tone-fg);
}

/* CARRITO VACÍO: vaciar no puede hacer nada, así que se apaga — y se apaga AL
   MISMO GRIS que su vecino. Se voltea el TONO entero a `neutral-lv3`, no se pintan
   grises a mano. El de "en espera" NO se apaga: retomar una orden guardada tiene
   sentido justamente cuando el carrito está vacío. Ver notas 7 y 11. */
.empty_cart .cart_action--empty {
  --tone-soft: var(--action-neutral-lv3-soft);
  --tone-fill: var(--action-neutral-lv3-default);
  cursor: not-allowed;
  pointer-events: none;
}

/* El icono de vaciar es un SVG, y es la excepción que el DS contempla: este
   glifo NO EXISTE en uicons. Ver nota 3. */
/* La ruta sube DOS niveles: este archivo vive en assets/css/ds/, no en assets/css/.
   El original decía `../images/` porque estaba en main.css — al mudarlo, la ruta
   siguió siendo válida como texto y dejó de apuntar a nada. Ver nota 5. */
.cart_action__icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url(../../images/icons/shopping-cart-clear.svg) center / contain no-repeat;
  mask: url(../../images/icons/shopping-cart-clear.svg) center / contain no-repeat;
}

/* ---- Órdenes en espera (save orders for later) ----------------------------
   El reloj (.cart_action--hold) es el trigger de un bubble--box con la lista de
   órdenes guardadas. Badge de conteo sobre el icono. */
.cart_hold_wrapper { flex-shrink: 0; display: flex; }
.cart_action--hold { position: relative; }

.cart_hold_badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-round, 999px);
  background: var(--action-error-default);
  color: var(--neutral-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.cart_held_empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.cart_held_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s;
}
.cart_held_item:hover { background: var(--surface-sunken-light); }

.cart_held_item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cart_held_item__when {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.cart_held_item__count {
  font-size: 11px;
  color: var(--text-muted);
}
.cart_held_item__total {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.cart_held_clear {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--action-error-default);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cart_held_clear:hover { text-decoration: underline; }

/* ---- La carcasa ------------------------------------------------------------ */

.cart {
  background: var(--surface-page);
  padding: 15px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart_items {
  gap: 10px;
  overflow: auto;
  scrollbar-width: none;
}

/* ---- El vacío -------------------------------------------------------------- */

.empty_cart .cart_items {
  height: 100%;
  justify-content: center;
}

/* La marca de agua. Es un glifo de uicons por codepoint crudo — ver nota 4.
   Va en `::before` y no en `::after` (0.9.63): `.cart_items` ES el contenedor del
   contenido (`[data-cart-content]`), así que el pseudo-elemento comparte fila con
   el texto del vacío. Detrás, el texto quedaba ENCIMA del carrito; delante, el
   carrito manda y el texto se lee debajo, que es el orden en el que se mira. */
.empty_cart .cart_items::before {
  content: '\f196';
  font-family: uicons-regular-rounded !important;
  display: block;
  font-size: 150px;
  color: var(--neutral-100);
  line-height: 100%;
  text-align: center;
}

/* ---- Los renglones (F2g.2) -------------------------------------------------
   Sin cambios de diseño (el dueño: "sin cambios más que usar tokens de color").
   Ya eran el Figma; lo único que hacían mal era pintar primitivos y alias legacy
   a pelo teniendo la semántica al lado. */

.pos_cart_item {
  border-radius: 4px;
}

/* Asoma 10px de la tira de acciones que va DETRÁS. Esa franja de color que se ve
   a la derecha de cada renglón en el Figma no es un adorno: es el borde de
   `.pos_cart_item_actions` pidiendo que lo arrastres. Ver nota 9. */
.pos_cart_item_front {
  width: calc(100% - 10px);
  padding: 10px;
  background: var(--neutral-150);
  border-radius: var(--radius-sm);
  z-index: 2;
  transition: all 0.3s;
}

.pos_cart_item_front_main {
  gap: 10px;
}

.pos_cart_item_image {
  width: 60px;
  background: var(--surface-page);
  border-radius: var(--radius-sm);
}

.pos_cart_item_image img {
  float: left;
  border-radius: var(--radius-sm);
}

.pos_cart_item_data {
  width: calc(100% - 140px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.pos_cart_item_name {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

.pos_cart_item_comments {
  font-size: 12px;
  margin-top: 10px;
  font-style: italic;
  opacity: 0.7;
}

/* ---- Atributos del renglón ------------------------------------------------- */

.pos_cart_item_attributes {
  font-size: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pos_cart_item_attributes li {
  position: relative;
  padding: 0 0 0 8px;
  font-weight: 600;
}

.pos_cart_item_attributes li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-round);
  background: var(--action-information-default);
}

/* ---- Cantidad -------------------------------------------------------------- */

.cart_quantity {
  border: var(--stroke-thin) solid var(--border-default);
  border-radius: var(--radius-sm);
  margin-top: 5px;
}

.cart_quantity > span {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--surface-page);
  cursor: pointer;
}

.cart_quantity .cart_qty_minus {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.cart_quantity .cart_qty_plus {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.cart_quantity input {
  width: 40px;
  height: 25px;
  border-width: 0 1px;
  border-radius: 0;
  text-align: center;
  font-weight: bold;
}

/* ---- Precios --------------------------------------------------------------- */

.pos_cart_item_prices {
  width: 90px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pos_cart_item_price {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.pos_cart_item_total {
  font-size: 16px;
  font-weight: 600;
}

/* ---- Acciones del renglón (detrás) ----------------------------------------- */

.pos_cart_item_actions {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - 10px);
  height: 100%;
  background: var(--neutral-300);
  color: var(--text-on-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.display_actions .pos_cart_item_front,
.pos_cart_item_actions:hover + .pos_cart_item_front {
  transform: translateX(-88px);
}

.pos_cart_item_actions > * {
  width: 50px;
  cursor: pointer;
}

.delete_item {
  background: var(--action-error-default);
}

.edit_item {
  background: var(--action-secondary-default);
}

/* ---- Footer ---------------------------------------------------------------- */

.cart_footer {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

/* Sin productos no hay nada que cobrar: el footer no se apaga, no existe. Misma
   idea que la ✕ del cliente (nota 7). */
.empty_cart .cart_footer {
  display: none;
}

/* LA SALIDA DE ESA REGLA, y el core la publica para su propia regla — no la inventa un vertical.
   "Sin productos no hay nada que cobrar" es cierto en mostrador y FALSO cuando lo que se cobra no
   está en el carrito. En una mesa el carrito es sólo la ronda que aún no se ha mandado a cocina:
   después de comandar queda vacío y lo que hay que cobrar vive en la cuenta.
   Sin esta línea, el pie desaparecía al enviar la primera comanda y con él se iban las TRES cosas
   que viven dentro —el botón de cobrar, el de "Enviar Comanda" y el chip de la precuenta—, así que
   la mesa quedaba con consumo, ocupada y sin ninguna salida desde la caja. Lo levantó la revisión
   adversaria.
   `has_cuenta` es el nombre que ya usa el JS de la caja de PHP (`cobro.js:31`), y se conserva para
   que las dos cajas hablen igual. La clase la pone quien SEPA que hay algo que cobrar; el core no
   sabe qué es una mesa y no tiene que saberlo. */
.pos_page_cart.empty_cart.has_cuenta .cart_footer {
  display: block;
}

/* La fila de abajo: crear la orden + guardarla para después. */
.cart_footer_actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart_footer_actions .btn {
  flex: 1;
  min-width: 0;
}

.cart_apply_coupon {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--neutral-150);
  color: var(--text-primary);
  padding: 5px 10px;
  gap: 5px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.cart_apply_coupon i {
  font-size: 17px;
}

/* ---- Totales --------------------------------------------------------------- */

.cart_totals {
  background: var(--neutral-150);
  color: var(--text-primary);
  padding: 15px;
  border-radius: var(--radius-md);
  gap: 10px;
}

.cart_totals_line {
  position: relative;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
}

.coupon_code {
  font-size: 11px;
  font-weight: 600;
}

.coupon_code i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: var(--action-error-default);
  color: var(--text-on-color);
  font-size: 10px;
  border-radius: var(--radius-round);
  cursor: pointer;
}

#discounts_coupons {
  gap: 5px;
}

#discounts_coupons:empty {
  display: none !important;
}

/* El corte del total: una línea de puntos y dos muescas a los lados, como el
   recorte de un ticket. Los dos círculos son del color de la CARCASA, no del
   fondo de los totales — por eso son `--surface-page`: muerden la tarjeta gris
   desde fuera. */
.total_line {
  margin-top: 5px;
  padding-top: 15px;
  font-weight: 600;
  font-size: 15px;
  border-top: 1px dashed var(--border-default);
}

.total_line::before,
.total_line::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 15px;
  height: 15px;
  background: var(--surface-page);
  border-radius: var(--radius-round);
}

.total_line::before {
  left: -23px;
}

.total_line::after {
  right: -23px;
}

/* ============================================================================
   NOTAS

   1. EL BOTÓN ROJO DE HOY NO ES EL BOTÓN ROJO DEL FIGMA — y es la trampa de esta
      fase. Hoy hay UN círculo rojo con una ✕ (`.cart_reset`) cuyo
      `data-click-action` es `{"resetCart":{}}`: VACÍA EL CARRITO. En el Figma el
      círculo rojo con ✕ está pegado al nombre del cliente y significa LIMPIAR EL
      CLIENTE, y vaciar el carrito es el botón rosa de al lado. O sea que
      re-estilar sin más habría dejado un botón que dice una cosa y hace otra —
      el peor resultado posible, porque se ve bien.
      Se resuelve separando: `.cart_customer_reset` (la ✕, limpia el cliente) y
      `.cart_action--empty` (el rosa, `resetCart`, conserva el comportamiento que
      ya existía). La ✕ nace SIN acción a propósito: el dueño dijo que en esta
      sesión solo HTML+CSS y que la funcionalidad se ve después. Un botón que no
      hace nada es honesto; uno que hace lo que no dice, no.

   2. LOS DOS BOTONES SON UN SLOT, NO UN CHIP. `.icon-chip` tiene dos tamaños
      (40 y 30) y son CONTROLES; esto es un bloque de 60x70 que ocupa el alto de
      la fila del header. Por eso tiene clase propia — pero consume el contrato de
      tonos igual que el chip, así que aquí no hay ni un color:
        vaciar    → `tone-error`        (rosa en reposo, rojo al hover)
        en espera → `tone-neutral-lv3`  (gris en reposo, oscuro al hover)
      Medido contra el Figma: su vaciar es `action/error/default` #F04438 sobre un
      rosa, y su "en espera" es `neutral/200` de fondo con `neutral/300` de icono
      — que es EXACTAMENTE `--tone-soft` + `--tone-on-soft` de neutral-lv3. El
      Figma dibujó a mano lo que el contrato ya daba.
      (El alto FUE 75 —lo que medía la fila del header en el producto— y esa
      "cosmética pendiente" se cerró en 0.9.63: los dos son 70, el número del
      Figma, que además es el que cuadra con el contenido del header.)

   3. EL ICONO QUE EL FIGMA PIDE NO EXISTE EN LA TIPOGRAFÍA — pero sí en el repo.
      El Figma nombra su icono `shopping-cart-clear`. Buscado en los TRES sets que
      el producto carga (regular, sólido y brands): no está. Ni `shopping-cart-clear`
      ni nada equivalente — lo más cercano es `fi-rr-cart-minus`, que es un menos,
      no una ✕.
      Y resulta que sí existe: `assets/images/icons/shopping-cart-clear.svg`, en el
      repo, con ese nombre exacto. Alguien lo preparó para este diseño. Su clase
      (`.cart_reset_icon`) estaba en main.css y NO LA USABA NINGÚN MARKUP: huérfana.
      El botón mostraba mientras tanto un `fi-rr-cross` prestado.
      Se recupera el SVG, pero por `mask` y no por `background-image` como estaba:
      así el icono toma su color de `currentColor` y por tanto DEL TONO, igual que
      todos los demás. Con `background-image` el color estaría cocido en el archivo
      y el hover no podría cambiarlo — sería otra vez media declaración (el par
      papel+tinta de field.css nota 33, en versión SVG).
      Es la excepción documentada a "los iconos son tipografía" (foundation.css):
      se usa un SVG cuando la fuente no tiene el glifo, y se le da el mismo
      contrato de color que a un glifo.

   4. LA MARCA DE AGUA DEL VACÍO ES UN CODEPOINT CRUDO (`content:'\fc7b'` con
      `font-family: uicons-regular-rounded`), el segundo del producto tras el
      separador del breadcrumb (ds/header.css nota 1). Mismo riesgo: si uicons
      renumera, esto se vuelve un cuadrito y nadie sabrá por qué. Se conserva
      —cambiarlo pide tocar markup y el Figma no dice otra cosa— y queda anotado
      para F3, junto con el del breadcrumb: son los dos, y con dos ya es un patrón.

   5. MUDAR UN CSS ROMPE SUS RUTAS RELATIVAS, Y NO AVISA. El icono venía de
      `url(../images/icons/…)`, correcto desde `assets/css/main.css`. Al mudarlo a
      `assets/css/ds/` esa ruta sigue siendo válida COMO TEXTO y apunta a
      `assets/css/images/`, que no existe: el botón salió en blanco. Ningún linter
      lo dice, la consola no se queja (una máscara que falla no es un error) y el
      CSS "se lee bien". Lo cazó la foto.
      Es lo único de mudar archivos que no es gratis: `url()` se resuelve desde el
      ARCHIVO, no desde la página. Cualquier `url()` que baje a `ds/` sube un nivel
      más. Hoy es el único del DS — si aparecen más, esto es la regla.

   6. SOBRE FONDO SOFT, EL ICONO NO USA LA TINTA DEL TEXTO. Primero puse
      `color: var(--tone-on-soft)` y el carrito salió rojo OSCURO (#601B16) sobre
      el rosa. Se ve "bien" —contrasta— pero no es el diseño: el Figma lo pinta
      #F04438, el rojo vivo. Y el DS ya tenía la respuesta escrita: su alert-banner
      hace exactamente esto (fondo `--tone-soft`, texto `--tone-on-soft`, icono
      `--tone-fill`). O sea que `on-soft` es TINTA DE TEXTO —oscura para leerse— y
      `fill` es EL COLOR DEL TONO. Un icono no se lee, se reconoce: va en fill.
      Detalle que lo confirma: en `neutral-lv3` los dos coinciden
      (`--tone-on-soft: var(--tone-fill)`, tone.css), así que el botón de "en
      espera" se veía igual con cualquiera de los dos y no habría delatado nada.
      El error solo era visible en el tono que SÍ los distingue.

   7. EL VACÍO DE VERDAD LO ENSEÑÓ OTRO FRAME (2026-07-17). La primera pasada se
      hizo contra `2067:7337`, que el dueño compartió a medias editado: mostraba un
      carrito vacío pero CON cliente y con el botón de vaciar en rosa vivo. El
      frame bueno es `155:1797`, y ahí el estado vacío de verdad dice tres cosas:
        · sin cliente  → el nombre en `text/muted` y la ✕ AUSENTE (no apagada)
        · sin carrito  → vaciar en tono inactivo
        · "en espera"  → sigue vivo: es lo único que TIENE sentido con el carrito
                         vacío, y por eso no se apaga con su vecino.
      La regla que se lee entre los tres: **una acción que no puede hacer nada se
      quita; una que podrá hacerlo cuando cambie el estado se apaga.** La ✕ no
      existe sin cliente porque no hay cliente que quitar — nunca. Vaciar sí se
      apaga porque en cuanto entre un producto vuelve.
      Los dos estados cuelgan de una CLASE, no del valor de un input: `.empty_cart`
      ya existía y la maneja pos.js; `no_customer` es nueva. El input
      `#cart_customer` no sirve de gancho aunque nazca en `value="0"` — jQuery
      escribe la PROPIEDAD y no el atributo, así que `[value="0"]` seguiría
      casando con un cliente ya elegido. El CSS necesita un gancho que diga la
      verdad.

   8. EL CLIENTE SE ENCIENDE, NO SE APAGA. Con cliente el avatar va oscuro con el
      icono blanco; sin cliente se queda tal cual estaba el `.avatar` genérico
      (neutral/200 con icono neutral/300) — que resulta ser EXACTAMENTE lo que pide
      el frame vacío. O sea que el estado "apagado" ya existía y era el default:
      lo único que hacía falta era el encendido. Por eso la regla es
      `:not(.no_customer)` y no un apagado aparte.
      El EMAIL se quitó del markup (el dueño: "no se muestra el email"). No se
      oculta por CSS: se borra. Un dato que no se enseña no se manda al navegador.

   9. LA FRANJA DE COLOR DEL RENGLÓN NO ES UN ADORNO. En el Figma cada renglón
      tiene una barra violeta a la derecha, y es fácil leerla como decoración. No
      lo es: `.pos_cart_item_front` mide `calc(100% - 10px)`, así que lo que se ve
      son los 10px de `.pos_cart_item_actions`, que vive DETRÁS y se revela al
      arrastrar. El violeta es su acción de editar (`--action-secondary-default`,
      #9366DD) asomando. Si algún día alguien "limpia" esa barra habrá borrado la
      única pista de que el renglón se desliza.

  10. "GUARDAR ORDEN" Y "ÓRDENES EN ESPERA" SON LA MISMA FUNCIÓN, PARTIDA EN DOS
      BOTONES QUE VIVEN LEJOS: el chip del footer guarda, el del header retoma. Los
      dos nacen sin comportamiento — el dueño dijo que la función va después.
      Ojo con el estado del de retomar: el Figma lo pinta ACTIVO (soft primario)
      en este frame y gris en el vacío, pero eso NO depende de que el carrito tenga
      productos (dicho por el dueño) — depende de que HAYA órdenes guardadas, que
      es justo lo que aún no existe. Por eso se queda `tone-neutral-lv3`: es la
      verdad de hoy (no hay ninguna guardada). Cuando la función llegue, encenderlo
      es cambiar `tone-neutral-lv3` por `tone-primary` EN EL MARKUP — cero CSS. Es
      literalmente para lo que sirve el contrato de tonos, y por eso no se escribe
      hoy una regla especulativa para un estado que nadie puede producir.

  11. DOS GRISES QUE DEBERÍAN SER UNO (lo cazó el dueño en la pantalla, 2026-07-17).
      Apagué "vaciar" con `action/inactive/*` —el par que usa `.icon-chip:disabled`,
      así que parecía LO correcto— y quedó al lado de "en espera", que es
      `neutral-lv3`. Resultado: dos grises distintos pegados, sin que la diferencia
      significara nada:
        vaciar apagado   #F0F3F6 con icono #CFD7E1   (inactive)
        en espera        #E5EAEF con icono #939FAC   (neutral-lv3)
      El Figma los pinta IGUALES, y tiene razón: los dos están apagados por la
      misma razón —no hay nada que hacer— así que deben decir lo mismo. Ahora
      "vaciar" se apaga volteando su tono entero a `neutral-lv3`.
      La lección no es sobre grises: usar el token que se LLAMA como el estado
      ("inactive" para algo inactivo) parece obviamente correcto y no lo es. Lo que
      manda es cómo se ve AL LADO de lo que tiene al lado. Un token no se elige por
      su nombre — otra vez (ver ds/header.css nota 4).

  12. LO QUE SE PIERDE AL MUDAR UN BLOQUE ES LO QUE NO MIRAS. Al llevarme CART BODY
      aserté todo lo que MOVÍA (que estuviera el renglón, el footer, el total) y
      NADA de lo que dejaba atrás. Se cayeron cinco cosas y el dueño las vio en la
      pantalla:
        · `.cart_apply_coupon` — me traje 1 de sus 9 declaraciones: se quedó sin
          fondo, sin padding, sin radio y sin peso. Un truncado silencioso.
        · `.cart_apply_coupon i` (17px), perdida entera.
        · `.order_customer` y `.send_ticket_email` — que NO eran del carrito: son de
          `orderCompleteLightbox.php` y `orderDetails.php`, y estaban mal archivadas
          en ese bloque. Vuelven a main.css; su casa es F2g.3.
        · `#create_order_button{padding:15px 0}` — ésta NO se repone: es un override
          por ID contra el DS que no hacía NADA. Medido con y sin ella: 370x40 las
          dos veces, porque `.btn` es `border-box` con `height` fijo y el padding no
          puede moverlo. Llevaba ahí de adorno.
      El arnés nuevo es una auditoría de SELECTORES: se sacan los del bloque viejo
      con un regex y se comprueba que cada uno esté en el archivo nuevo o en main.
      Eso habría cazado las cinco. Lo que se movió se veía bien; lo que faltaba, no
      se veía en absoluto — que es justo lo que no encuentra leer el diff.
   ============================================================================ */