/* ============================================================================
   Juicy — Dashboard Design System · CHECKOUT (modal "Registrar Orden")
   ----------------------------------------------------------------------------
   Figma: "Juicy POS · Dashboard" (bgAIbrraHKNKn1VF7ZMHBQ). Cuatro estados de UN
   solo lightbox, no cuatro pantallas:
     Efectivo (denominaciones)        2101:6884
     Sin conteo en caja (tarjeta…)    2113:6159
     Dividido — lista vacía           2113:6705   (F3)
     Dividido — cubierto              2113:7326   (F3)

   Markup: templates/template-parts/pos/lightboxes/createOrderLightbox.php
   El shell (lightbox, header, tamaños) es de ds/lightbox.css; aquí va SOLO el
   cuerpo del checkout. Cubre el flujo COMPLETO F2g.3: shell de saldo (F1), modo
   SIMPLE con rejilla + denominaciones + sin-conteo (F2), layout horizontal a 2
   columnas, y modo DIVIDIDO con lista de pagos aplicados + agregar pago (F3).
   La aritmética/casos borde (sobrepago solo-efectivo, cambio) los lleva
   checkoutRecalc en pos.js (F5). Implementado y verificado en juicypos.local.

   Los tonos de selección y de FALTA se componen con la semántica del DS, no con
   literales: verde de selección = success, rojo de deuda = error.
   ============================================================================ */

/* ---- Barra de saldo -------------------------------------------------------
   El ancla del flujo entero: TOTAL · PAGADO · FALTA, siempre visible. Superficie
   oscura (misma que la barra de tabs del POS: `--surface-raised` = neutral/500),
   así que voltea su tinta para que lo de encima se lea. */
.checkout__balance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  padding: 16px 8px;
  margin-bottom: 20px;
}

.checkout__balance-cell {
  text-align: center;
  min-width: 0;
}

.checkout__balance-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 4px;
}

.checkout__balance-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-white);
  line-height: 1.1;
}

/* FALTA en rojo mientras haya deuda. Cuando la cubren, pos.js le quita el modif.
   El rojo es la semántica de error del DS (red/500), no un literal del mock. */
.checkout__balance-value--missing {
  color: var(--action-error-default);
}
.checkout__balance-value--missing.is-covered {
  color: var(--neutral-white);
}

/* ---- Layout horizontal (modo simple) --------------------------------------
   Métodos (izquierda) | panel efectivo/sin-conteo (derecha). El panel oculto
   colapsa, así que a la derecha queda siempre el que aplica. El switch y el CTA
   van FUERA de las columnas, a lo ancho. Solo aplica al modo simple; el dividido
   conserva su columna vertical. */
.checkout__cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.checkout__col { min-width: 0; }
.checkout__col--methods { flex: 1 1 0; }
.checkout__col--panel   { flex: 1.25 1 0; }

/* Dentro de las columnas, métodos y panel ya no llevan su margen inferior: el
   respiro lo da el gap y el margen de `.checkout__cols`. */
.checkout__cols .checkout__methods,
.checkout__cols .checkout__panel {
  margin-bottom: 0;
}

/* ---- Rejilla de métodos ---------------------------------------------------
   2 columnas, crece hacia abajo (decisión 2026-07-17). La taxonomía es abierta:
   con 2 métodos no se llena, con 6 hace scroll; nunca cuenta columnas. */
.checkout__methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 232px;          /* ~3 filas visibles; más, hace scroll */
  overflow-y: auto;
  scrollbar-width: thin;
  margin-bottom: 16px;
}

.checkout__method {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 76px;
  padding: 12px;
  border: var(--stroke-thin, 1px) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--text-primary);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.checkout__method:hover {
  background: var(--surface-sunken-light);
}

/* ELEGIDO: borde + fondo verde suave. Es el tono de SELECCIÓN (uniforme para
   cualquier método); el tono propio del método solo pinta el icono en la lista
   de pagos aplicados del modo dividido (F3). */
.checkout__method.is-selected {
  border-color: var(--action-success-default);
  background: var(--feed-success-soft);
  color: var(--action-success-default);
}

.checkout__method-icon {
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
}

.checkout__method-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: center;
}

/* El atributo `hidden` debe ganar SIEMPRE, aunque el panel tenga un `display`
   propio (el nocash es flex). Sin esto, `display:flex` pisa al `[hidden]` de UA
   y se ven los dos paneles a la vez. */
.checkout [hidden] { display: none !important; }

/* ---- Panel (denominaciones / sin conteo) ---------------------------------- */
.checkout__panel {
  border: var(--stroke-thin, 1px) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.checkout__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.checkout__panel-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* "Limpiar": acción textual, no un botón. */
.checkout__clear {
  font-size: 12px;
  font-weight: 500;
  color: var(--action-primary-default);
  cursor: pointer;
}
.checkout__clear:hover { text-decoration: underline; }

/* Teclado de denominaciones: 4 columnas fijas (el diseño), botones-chip. */
.checkout__denoms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.checkout__denom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-md);
  padding: 0 8px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken-light);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.checkout__denom:hover  { background: var(--surface-sunken); }
.checkout__denom:active  { background: var(--action-neutral-lv3-default); color: var(--text-on-color); }

/* "Exacto": rellena el monto que falta. Acento primario suave para separarlo de
   las denominaciones. */
.checkout__denom--exact {
  background: transparent;
  border: var(--stroke-thin, 1px) solid var(--action-primary-default);
  color: var(--action-primary-default);
}
.checkout__denom--exact:hover {
  background: color-mix(in srgb, var(--action-primary-default) 10%, transparent);
}

/* Cambio: aparece solo cuando pagan de más (efectivo). Banner notorio — es dinero
   que hay que devolver, no un dato de paso. */
.checkout__change {
  margin-top: 12px;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  background: var(--red-300);
  color: var(--red-500);
}

/* Panel SIN CONTEO: no se cuenta, se cobra. Centrado, informativo. */
.checkout__panel--nocash {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 16px;
}
.checkout__nocash-icon {
  font-size: 28px;
  line-height: 1;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.checkout__nocash-amount {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-primary);
}
.checkout__nocash-help {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---- Interruptor de modo --------------------------------------------------- */
.checkout__switch {
  margin-bottom: 16px;
}
.checkout__switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: var(--stroke-thin, 1px) dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.checkout__switch-btn:hover {
  background: var(--surface-sunken-light);
  color: var(--text-primary);
}
/* Stub de F3: el disparador se ve pero aún no hace nada. */
.checkout__switch-btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}
.checkout__switch-btn.is-disabled:hover {
  background: transparent;
  color: var(--text-secondary);
}

/* ============================================================================
   MODO DIVIDIDO (F3)
   ============================================================================ */

.checkout__split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 15px;
}
.checkout__split-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
}
.checkout__split-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--action-primary-default);
  cursor: pointer;
}
.checkout__split-back:hover { text-decoration: underline; }

.checkout__applied-label {
  display: block;
  margin-bottom: 10px;
}

/* Lista de PAGOS APLICADOS. */
.checkout__applied-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Vacía: recuadro punteado. */
.checkout__applied-empty {
  border: var(--stroke-thin, 1px) dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* Cada pago aplicado: el fondo y el icono toman el TONO del método (Tarjeta
   verde, Vales naranja…). El tono se pone como clase `.tone-*` en la fila y de
   ahí salen `--tone-soft` (fondo) y `--tone-line` (icono). */
.checkout__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* `wrap` para que la casilla de referencia baje a su propia línea sin entrar en
     el reparto de los dos bloques. Ver el bloque de la referencia, más abajo. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--tone-soft);
}
.checkout__applied-method {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.checkout__applied-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  color: var(--tone-line);
}
.checkout__applied-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.checkout__applied-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.checkout__applied-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.checkout__applied-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--action-error-default);
  cursor: pointer;
  transition: background .15s;
}
.checkout__applied-remove:hover {
  background: var(--feed-error-soft);
}

/* LA REFERENCIA DE UN PAGO — el folio o la autorización de la terminal.
   ----------------------------------------------------------------------------
   El campo existe en el contrato desde siempre (`payment_methods[<uid>][reference]`),
   `create_order_core` lo guarda y el selftest `flow_venta_paridad_ajax_rest`
   comprueba que viaja. Lo que no existía era la CASILLA: en el checkout iba como
   `<input type="hidden">` y nada de la interfaz lo llenaba, así que llegaba
   siempre vacío. La caja de React sí lo pintaba; se cierra por el otro lado —
   ahora las dos lo enseñan y el hidden desaparece (no hacen falta dos campos con
   el mismo nombre).

   NO TRAE ESTILO PROPIO: se cuelga del que YA tiene el input de este componente
   (`.checkout__add-amount`, abajo). Antes iba con nueve declaraciones paralelas
   —30px de alto, radio sm, 12px de fuente— que ni salían de ningún sitio ni
   coincidían con el otro campo del mismo modal. Los dos inputs del checkout se
   ven igual porque son la misma regla, no porque alguien los mantenga a la par.

   Lo único propio es el SALTO DE LÍNEA, y vive ABAJO, después de la regla
   compartida: ver «Lo propio de cada referencia». */

/* Caja AGREGAR PAGO. */
.checkout__add {
  border: var(--stroke-thin, 1px) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}
.checkout__add > .checkout__panel-title {
  display: block;
  margin-bottom: 12px;
}

/* Métodos como chips en fila (no rejilla). */
.checkout__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.checkout__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: var(--stroke-thin, 1px) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.checkout__chip:hover { background: var(--surface-sunken-light); }
.checkout__chip.is-selected {
  border-color: var(--action-success-default);
  background: var(--feed-success-soft);
  color: var(--action-success-default);
}

/* Campo de monto + botón FALTANTE. */
.checkout__add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.checkout__add-amount,
.checkout__applied-reference,
.checkout__reference {
  flex: 1;
  min-width: 0;
  height: var(--control-md);
  padding: 0 12px;
  border: var(--stroke-thin, 1px) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-field);
  color: var(--text-primary);
  font-size: 14px;
}
.checkout__add-amount:focus,
.checkout__applied-reference:focus,
.checkout__reference:focus {
  outline: none;
  border-color: var(--border-field-focus);
}

/* LO PROPIO DE CADA REFERENCIA — y va DESPUÉS de la regla compartida a propósito.
   ----------------------------------------------------------------------------
   Estas dos declaraciones estaban ARRIBA, antes del bloque compartido, y el `flex: 1`
   de ahí le pisaba al campo de la fila su `flex: 0 0 100%` en silencio: la base pasaba
   a 0% y la referencia NO bajaba a su línea, que es justo lo que el salto existe para
   hacer. Lo cazó el trinquete de `no-duplicate-selectors` del CI (33 → 35).

   Se resuelve por el CONTENEDOR, no reordenando: así cada selector se declara UNA vez
   —no hay duplicado que contar— y gana por especificidad, que no depende de que nadie
   mueva un bloque de sitio más adelante. Los contenedores son los reales:
   `.checkout__applied` (la fila de un pago aplicado, `pos.js`) y
   `.checkout__panel--nocash` (el panel sin conteo, `createOrderLightbox.php`). */
.checkout__applied .checkout__applied-reference {
  /* `.checkout__applied` reparte dos bloques con `space-between`; un tercer hijo directo
     rompería ese reparto. Con base 100% baja a la línea de abajo sin tocar los otros dos. */
  flex: 0 0 100%;
}

/* En el panel sin conteo no hay fila que envolver: es el tercer bloque de una columna
   centrada, así que solo necesita separarse de la ayuda de arriba. */
.checkout__panel--nocash .checkout__reference {
  margin-top: 10px;
  max-width: 260px;
}
.checkout__add-missing,
.checkout__add-commit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .15s;
}
.checkout__add-missing {
  flex-shrink: 0;
  padding: 0 16px;
  height: var(--control-md);
  border: var(--stroke-thin, 1px) solid var(--action-primary-default);
  color: var(--action-primary-default);
  background: transparent;
}
.checkout__add-missing:hover {
  background: color-mix(in srgb, var(--action-primary-default) 10%, transparent);
}
.checkout__add-commit {
  width: 100%;
  height: var(--control-md);
  border: var(--stroke-thin, 1px) solid var(--action-primary-default);
  color: var(--action-primary-default);
  background: transparent;
}
.checkout__add-commit:hover {
  background: color-mix(in srgb, var(--action-primary-default) 10%, transparent);
}

/* Apagado (cubierto): gris inerte del producto = neutral-lv3, NO action/inactive
   (ds/cart.css nota 11). Sin puntero. */
.checkout__add-missing.is-disabled,
.checkout__add-commit.is-disabled {
  border-color: var(--action-neutral-lv3-default);
  color: var(--text-muted);
  background: transparent;
  pointer-events: none;
}

/* ---- CTA ------------------------------------------------------------------- */
.checkout__cta {
  width: 100%;
}
/* Deshabilitado hasta cubrir el total: baja opacidad y bloquea el puntero.
   (El tono inerte del DS es para etiquetas; aquí es un botón que espera.) */
.checkout__cta:disabled {
  opacity: .5;
  pointer-events: none;
}

/* ---- LA TARJETA DE VENTA CERRADA (`orderCompleteLightbox.php`) --------------
   Vienen de `main.css`, del bloque "LIGHTBOXES DE ORDEN", que decía de sí mismo:
   *"su casa es F2g.3 (el checkout), no ds/cart.css"*. Ésta es F2g.3, y la mudanza
   la empujó una MEDICIÓN, no el orden.

   El 2026-08-07 el espejo midió por primera vez la tarjeta de «Orden Registrada»
   —hasta entonces no la miraba nadie, porque para verla hay que VENDER— y el
   icono del recibo por email salió así:

     PHP    píldora morada: background rgb(147,102,221) · texto blanco · radio 5
            · relleno 2/5 · gap 5 · 14px · ancho 62
     REACT  nada: fondo transparente · texto rgb(62,67,73) · sin radio ni relleno
            · 16px · ancho 48

   El front nuevo no importa `main.css` a propósito, así que la regla no le llegaba.
   Y no es decoración: `gw_sendEmailReceipt` **no tiene otra puerta en el producto**
   (doc 40 §5), o sea que ese icono es la única forma de mandar el recibo de una
   venta — invisible como un texto suelto en la caja nueva.

   Inerte para las pantallas de PHP: `ds/checkout.css` se encola DESPUÉS de
   `main.css` (includes/bootstrap.php) y los valores son los mismos.
   -------------------------------------------------------------------------- */
.order_customer {
  gap: 10px;
}

.send_ticket_email {
  padding: 2px 5px;
  background: var(--action-secondary-default);
  color: var(--text-on-color);
  border-radius: var(--radius-md);
  gap: 5px;
  font-size: 14px;
  cursor: pointer;
}

/* ---- Móvil: el cobro en una columna y la confirmación en pila -------------- */

/**
 * Las dos pantallas del lightbox de cobro en un teléfono. Medido el 21-ago-2026 a 375px: el panel
 * de la derecha —denominaciones, o la referencia de tarjeta— quedaba **cortado por el borde**,
 * porque `.checkout__cols` reparte el ancho entre dos columnas (`1 / 1.25`) que a esa medida no
 * caben ni juntas ni por separado.
 *
 * Todo va acotado a `max-width: 767.98px`: el escritorio no cambia.
 */
@media (max-width: 767.98px) {
  /**
   * 1 · MÉTODOS Y PANEL, UNO SOBRE OTRO. Es el único cambio que necesita el paso de cobro: la
   * rejilla de métodos ya crece hacia abajo sola y el panel, a ancho completo, deja sitio a las
   * cuatro columnas de denominaciones sin recortarlas.
   *
   * Se recupera el hueco entre ambos, que en horizontal lo daba el `gap` de la fila y aquí queda
   * como separación vertical — por eso NO se tocan los `margin-bottom: 0` que la regla de arriba
   * les pone: el `gap` del contenedor sigue haciendo ese trabajo al cambiar de eje.
   */
  /**
   * ⚠ **`1fr` NO ES `minmax(0, 1fr)`, y aquí se veía.** La rejilla base es `repeat(4, 1fr)`, que en
   * realidad es `minmax(auto, 1fr)`: el mínimo `auto` impide que una columna baje del ancho de su
   * contenido. Con «$1,000» y «Exacto» dentro, a 375px las cuatro columnas salían **desiguales**
   * (52.9 / 49.7 / 59.0 / 64.1 px, medido) y **tres botones se salían de la rejilla**, cortados por
   * el borde del lightbox — sin desbordar el viewport, así que una sonda que sólo mire la pantalla
   * los da por buenos.
   *
   * Se baja a tres columnas —a cuatro quedan 44px por botón y «$1,000» no se lee— y se declara el
   * `minmax(0, …)` para que puedan encoger de verdad.
   */
  .checkout__denoms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .checkout__cols {
    flex-direction: column;

    /**
     * ⚠ **`align-items` HAY QUE CAMBIARLO CON LA DIRECCIÓN, o el apilado sale mal por 4px.**
     *
     * La regla base lleva `align-items: flex-start`, que en fila alinea las dos columnas por
     * arriba. Al girar el eje, ese mismo `flex-start` pasa a mandar sobre el ANCHO: los hijos
     * dejan de estirarse y toman el de su contenido. Medido a 375px: el panel salía de **284px**
     * dentro de un lightbox de 285 —o sea 4px fuera de la pantalla— porque las cuatro columnas de
     * denominaciones pedían ese ancho natural.
     *
     * Con `stretch` cada bloque ocupa el ancho disponible y la rejilla de denominaciones se ajusta
     * a él. Es la propiedad que se olvida al cambiar `flex-direction`.
     */
    align-items: stretch;
  }

  /**
   * 2 · LA CONFIRMACIÓN, TODA EN PILA.
   *
   * Los tres bloques son `.row` del grid con hijos `col` / `col-6`, así que reparten el ancho en
   * horizontal: a 375px «SUBTOTAL», «DESCUENTOS» y «TOTAL» se solapaban unos con otros. Se fuerza
   * el 100% en los hijos DIRECTOS en vez de tocar el marcado, que es de tres componentes distintos.
   *
   * `flex-basis` y `max-width` juntos porque el `col` de Bootstrap declara `flex: 1 0 0%`: sin el
   * `max-width` un contenido largo lo estiraría igual.
   */
  .order_created_totals > *,
  .order_created_meta > *,
  .order_customer > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /**
   * Y más compactas, que apiladas ocupan cuatro veces más alto. Se acotan a estos tres
   * contenedores **a propósito**: `.widget--info` tiene 36 usos en el producto y esto es un ajuste
   * de esta pantalla, no del componente.
   */
  .order_created_totals .widget--info,
  .order_created_meta .widget--info,
  .order_customer .widget--info {
    padding: 10px 12px;
  }

  .order_created_totals .widget__info-label,
  .order_created_meta .widget__info-label,
  .order_customer .widget__info-label {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .order_created_totals .widget__info-value,
  .order_created_meta .widget__info-value,
  .order_customer .widget__info-value {
    font-size: 15px;
  }
}