/* ============================================================================
   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;
  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);
}

/* 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 {
  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 {
  outline: none;
  border-color: var(--border-field-focus);
}
.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;
}