/* ==========================================================================
   QUOMYA — NUEVA VENTA V1
   Wave S4.4C. Scoped entirely to `.qy-sales-screen`.
   Calculation, validation, duplicate detection and persistence remain in
   sales.module.js; this file is presentation only. Reuses qy-foundation-v1.css
   primitives (.qy-input, .qy-btn, .qy-field, .qy-badge) and the
   qy-dashboard-v1.css quick-concept grid rather than duplicating them.
   ========================================================================== */

.qy-sales-screen,
.qy-sales-screen * {
  box-sizing: border-box;
}

.qy-sales-screen {
  display: grid;
  gap: var(--qy-space-5);
  padding-block: var(--qy-space-6) var(--qy-space-4);
  color: var(--qy-color-text-primary);
}

.qy-sales-card {
  padding: var(--qy-space-5);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-xl);
  background: var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-card);
}

.qy-sales-form {
  display: grid;
  gap: var(--qy-space-5);
}

.qy-sales-concept-btn {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--qy-space-1);
  min-height: 88px;
  padding: var(--qy-space-4) var(--qy-space-3);
  color: var(--qy-color-text-primary);
  background: var(--qy-color-surface-2);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--qy-motion-fast) var(--qy-motion-ease),
    background var(--qy-motion-fast) var(--qy-motion-ease),
    transform var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-sales-concept-btn strong {
  overflow: hidden;
  max-width: 100%;
  font: var(--qy-text-body-lg);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-sales-concept-btn span {
  color: var(--qy-color-brand-text);
  font: var(--qy-text-label-md);
}

.qy-sales-concept-btn:hover {
  border-color: var(--qy-color-brand);
  background: var(--qy-color-active);
}

.qy-sales-concept-btn:focus-visible {
  outline: 0;
  box-shadow: var(--qy-focus-ring);
}

/*
 * `strong, b { color: var(--qy-ink) }` en quomya-visual-system.css apunta
 * directamente al elemento hijo. La herencia desde `.is-selected` en el
 * botón nunca gana frente a una regla que coincide de forma directa, por
 * baja que sea su especificidad -- hay que igualar el color explícitamente
 * en cada hijo de texto, no solo en el contenedor.
 */
.qy-sales-concept-btn.is-selected,
.qy-sales-concept-btn.is-selected strong {
  color: var(--qy-color-text-on-brand) !important;
}

.qy-sales-concept-btn.is-selected {
  background: var(--qy-color-brand);
  border-color: var(--qy-color-brand);
}

.qy-sales-concept-btn.is-selected span {
  color: var(--qy-color-text-on-brand) !important;
  opacity: 0.85;
}

.qy-sales-concept-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qy-space-3);
  padding: var(--qy-space-4);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
}

.qy-sales-concept-info strong {
  display: block;
  font: var(--qy-text-body-lg);
  font-weight: 650;
}

.qy-sales-concept-info span {
  display: block;
  margin-top: var(--qy-space-1);
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-sales-concept-info .qy-badge {
  flex: none;
}

.qy-sales-advanced {
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
}

.qy-sales-advanced summary {
  display: flex;
  align-items: center;
  min-height: var(--qy-touch-min);
  padding: 0 var(--qy-space-4);
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.qy-sales-advanced summary::-webkit-details-marker {
  display: none;
}

.qy-sales-advanced summary::after {
  margin-left: auto;
  content: "⌄";
  color: var(--qy-color-text-tertiary);
  transition: transform var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-sales-advanced[open] summary::after {
  transform: rotate(180deg);
}

.qy-sales-advanced:focus-within summary,
.qy-sales-advanced summary:focus-visible {
  outline: 0;
  box-shadow: var(--qy-focus-ring);
}

.qy-sales-advanced-content {
  display: grid;
  gap: var(--qy-space-4);
  padding: 0 var(--qy-space-4) var(--qy-space-4);
}

.qy-sales-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qy-space-3);
}

.qy-sales-preview {
  display: grid;
  gap: var(--qy-space-2);
  padding: var(--qy-space-4);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
  background: linear-gradient(135deg, var(--qy-color-brand-soft), transparent 76%), var(--qy-color-surface-2);
}

.qy-sales-preview > span {
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-sales-preview-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--qy-space-3);
}

.qy-sales-preview-result strong {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.qy-sales-preview-result .qy-badge {
  margin-left: auto;
}

.qy-sales-preview-warning {
  display: grid;
  gap: var(--qy-space-1);
  color: var(--qy-color-pending-text);
  font: var(--qy-text-body-md);
}

.qy-sales-save-btn {
  width: 100%;
  min-height: 56px;
  font: var(--qy-text-body-lg);
  font-weight: 700;
}

.qy-sales-hint-card {
  padding: var(--qy-space-4) var(--qy-space-5);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
}

.qy-sales-hint-card strong {
  display: block;
  margin-bottom: var(--qy-space-1);
  font: var(--qy-text-body-lg);
  font-weight: 650;
}

.qy-sales-hint-card p {
  margin: 0;
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

@media (max-width: 559px) {
  .qy-sales-screen {
    gap: var(--qy-space-4);
    padding-top: var(--qy-space-5);
  }

  .qy-sales-card {
    padding: var(--qy-space-4);
  }

  .qy-sales-concept-btn {
    min-height: 78px;
  }

  .qy-sales-date-grid {
    grid-template-columns: 1fr;
  }

  .qy-sales-preview-result strong {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .qy-sales-card {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }

  .qy-sales-hint-card {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (min-width: 1180px) {
  .qy-sales-screen {
    gap: var(--qy-space-6);
    padding-block: var(--qy-space-8);
  }

  .qy-sales-card {
    padding: var(--qy-space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qy-sales-screen :is(button, summary) {
    transition: none;
  }
}

/* ==========================================================================
   S4.11B — NUEVA VENTA MOBILE UX

   La venta normal muestra solo lo necesario. Los detalles siguen disponibles
   pero se presentan como una disclosure ligera, no como una segunda tarjeta
   dentro de la tarjeta del formulario.
   ========================================================================== */

.qy-sales-screen .qy-sales-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.qy-sales-screen .qy-sales-form {
  min-width: 0;
  padding: var(--qy-space-5);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-xl);
  background: var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-card);
}

.qy-sales-screen .qy-sales-concept-btn.is-selected,
.qy-sales-screen .qy-sales-concept-btn.is-selected strong {
  color: var(--qy-color-text-primary) !important;
}

.qy-sales-screen .qy-sales-concept-btn.is-selected {
  background: var(--qy-color-selected);
  border-color: var(--qy-color-brand);
  box-shadow: inset 3px 0 var(--qy-color-brand);
}

.qy-sales-screen .qy-sales-concept-btn.is-selected span {
  color: var(--qy-color-brand-text) !important;
  opacity: 1;
}

.qy-sales-screen .qy-sales-concept-info {
  padding-inline: var(--qy-space-3);
  border: 0;
  background: var(--qy-color-surface-2);
}

.qy-sales-screen .qy-sales-details {
  border-top: 1px solid var(--qy-color-border);
}

.qy-sales-screen .qy-sales-details > summary {
  display: flex;
  align-items: center;
  gap: var(--qy-space-3);
  min-height: var(--qy-touch-min);
  padding: var(--qy-space-3) 0 0;
  color: var(--qy-color-brand-text);
  font: var(--qy-text-label-md);
  cursor: pointer;
  list-style: none;
}

.qy-sales-screen .qy-sales-details > summary::-webkit-details-marker {
  display: none;
}

.qy-sales-screen .qy-sales-details > summary::after {
  flex: none;
  margin-left: auto;
  content: "+";
  color: var(--qy-color-brand);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.qy-sales-screen .qy-sales-details[open] > summary::after {
  content: "−";
}

.qy-sales-screen .qy-sales-details > summary:focus-visible {
  outline: 0;
  box-shadow: var(--qy-focus-ring);
}

.qy-sales-details__hint {
  overflow: hidden;
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-body-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-sales-screen .qy-sales-details__content {
  display: grid;
  gap: var(--qy-space-4);
  padding-top: var(--qy-space-3);
}

.qy-sales-screen .qy-sales-preview {
  border: 0;
  background: var(--qy-color-surface-2);
}

.qy-sales-screen .qy-sales-hint-card {
  border: 0;
  border-left: 3px solid var(--qy-color-brand);
  border-radius: 0;
  background: transparent;
}

@media (max-width: 559px) {
  .qy-sales-screen .qy-sales-form {
    padding: var(--qy-space-4);
  }
}

@media (min-width: 1180px) {
  .qy-sales-screen .qy-sales-form {
    padding: var(--qy-space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qy-sales-screen .qy-sales-concept-btn,
  .qy-sales-screen .qy-sales-details > summary,
  .bottom-nav.qy-theme .bottom-nav-item {
    transition: none;
  }
}

/* ==========================================================================
   NUEVA VENTA — FORMULARIO NATIVO DE UNA SOLA PANTALLA (V2)

   Pantalla de una sola tarea, y ahora también de un solo formulario: arriba el
   tipo de comisión, debajo todo lo que hace falta para completarla, al final
   una acción.

   ---------------------------------------------------------------------------
   POR QUÉ YA NO ES UNA REJILLA DE ALTURA FIJA
   ---------------------------------------------------------------------------
   La versión anterior repartía la ventana en filas y daba el sobrante al
   teclado propio, que era la pieza elástica. Sin teclado propio no hay pieza
   elástica que alimentar: lo que hay es un formulario que mide lo que miden sus
   campos, y esos campos cambian con el concepto elegido -- una compuesta añade
   sus subventas, una comisión fija no pide fecha de cierre.

   Forzar esa altura variable dentro de una rejilla de ventana solo produciría
   huecos muertos en un concepto simple y aplastamiento en uno compuesto. Se
   deja que la columna mida su contenido y que la página se desplace en
   vertical, que es lo normal en un formulario y lo que el propietario aceptó
   expresamente.

   `min-height` se conserva para que la pantalla no quede corta y flotando en un
   móvil alto, pero como SUELO, no como reparto.

   Toda la tipografía sale de los tokens `--qy-text-*`. Aquí no se declara ni
   una familia ni un tamaño suelto.
   ========================================================================== */

.qy-nueva-screen {
  --qy-nueva-reserved: calc(
    var(--qy-bottom-nav-h) + var(--qy-safe-bottom) + var(--qy-space-6)
  );

  display: flex;
  flex-direction: column;
  gap: var(--qy-space-4);

  min-height: calc(100dvh - var(--qy-nueva-reserved) - var(--qy-space-8));
}

/* --------------------------------------------------------------------------
   0. EL FORMULARIO

   DENSIDAD: el propietario pidió que el espacio se gaste en información de la
   comisión, no en decoración. De ahí tres decisiones:

     · los campos son hermanos directos, sin tarjeta que los envuelva: una
       tarjeta dentro de la pantalla añadiría borde, sombra y relleno a cambio
       de nada;
     · la separación entre campos es UN token y el mismo para todos, así que la
       columna se lee como una lista y no como bloques sueltos;
     · el formulario crece y empuja el botón hacia abajo (`flex: 1`), de modo
       que en un móvil alto no queda un hueco muerto entre el último campo y la
       acción.
   -------------------------------------------------------------------------- */
.qy-nueva-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--qy-space-4);
  min-width: 0;
}

/* Cada campo mide lo suyo y ninguno se estira para rellenar. */
.qy-nueva-field {
  flex: none;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   1. CABECERA

   No usa `renderQyPageHeader`: esta pantalla no es un destino de lectura sino
   una tarea, y su cabecera necesita el control de salida a la izquierda. El
   título comparte el token de las demás cabeceras para que el salto entre
   pantallas no cambie de voz.
   -------------------------------------------------------------------------- */
.qy-nueva-header {
  display: grid;
  grid-template-columns: var(--qy-touch-min) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--qy-space-3);
}

.qy-nueva-header > h2 {
  margin: 0;
  font: var(--qy-text-headline-md);
  color: var(--qy-color-text-primary);
}

.qy-nueva-header__context {
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-tertiary);
  text-transform: capitalize;
}

.qy-nueva-header__close {
  display: grid;
  place-items: center;
  width: var(--qy-touch-min);
  height: var(--qy-touch-min);
  padding: 0;
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-md);
  background: var(--qy-color-surface-2);
  color: var(--qy-color-text-secondary);
  cursor: pointer;
}

/* La cruz: dos trazos, sin fuente de iconos. */
.qy-nueva-header__close > span {
  position: relative;
  width: 14px;
  height: 14px;
}

.qy-nueva-header__close > span::before,
.qy-nueva-header__close > span::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.qy-nueva-header__close > span::before {
  transform: rotate(45deg);
}

.qy-nueva-header__close > span::after {
  transform: rotate(-45deg);
}

.qy-nueva-header__close:focus-visible {
  outline: 2px solid var(--qy-color-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. EL IMPORTE — CAMPO NATIVO

   Ya no es un visor gigante con teclado propio, sino un campo de formulario
   como los demás. La cifra sigue siendo el dato más importante de la venta,
   pero su protagonismo se consigue con posición -- es el primer campo tras el
   tipo -- y no con tamaño: la pantalla tiene que caber ahora seis campos, no
   uno.

   `tabular-nums` se conserva -- lo aporta `.qy-input--money` de la fundación --
   porque sin él los dígitos tienen anchuras distintas y la cifra baila
   lateralmente mientras se teclea.

   El símbolo de moneda es un adorno superpuesto y `aria-hidden`: la moneda es
   EUR en todo el producto y el lector de pantalla ya anuncia la etiqueta del
   campo. Se superpone en vez de ocupar columna para no robar ancho al número.
   -------------------------------------------------------------------------- */
.qy-nueva-amount-field__control {
  position: relative;
  display: flex;
  min-width: 0;
}

.qy-nueva-amount-field__input {
  width: 100%;

  /* Sitio para el símbolo, que se pinta encima del borde derecho. */
  padding-inline-end: var(--qy-space-8);
}

.qy-nueva-amount-field__currency {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--qy-space-4);
  display: flex;
  align-items: center;
  font: var(--qy-text-body-lg);
  color: var(--qy-color-text-tertiary);
  pointer-events: none;
}

.qy-nueva-amount-field__hint {
  margin: 0;
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-tertiary);
}

/*
   La vista previa de la comisión es la información más útil de esta línea, así
   que cuando la hay se lee con algo más de peso que una simple ayuda.
*/
.qy-nueva-amount-field:not(.is-invalid):not(.is-locked)
  .qy-nueva-amount-field__hint {
  color: var(--qy-color-text-secondary);
  font-weight: 600;
}

/*
   Importe bloqueado: comisión fija. El campo es `readonly`, no `disabled`, para
   que siga siendo legible y enfocable; el fondo cambia para que se vea que ahí
   no se escribe.
*/
.qy-nueva-amount-field.is-locked .qy-nueva-amount-field__input {
  background: var(--qy-color-surface-3, var(--qy-color-surface-1));
  color: var(--qy-color-text-secondary);
  cursor: default;
}

.qy-nueva-amount-field.is-invalid .qy-nueva-amount-field__hint {
  color: var(--qy-color-cancelled-text);
}

/* --------------------------------------------------------------------------
   2 bis. EL TIPO DE COMISIÓN

   Es la primera decisión y gobierna al resto del formulario. El carrusel
   conserva su comportamiento; lo que se añade es la etiqueta que lo nombra y la
   línea que recuerda qué regla aplica el concepto elegido.
   -------------------------------------------------------------------------- */
.qy-nueva-concept-field {
  display: flex;
  flex-direction: column;
  gap: var(--qy-space-2);
}

.qy-nueva-concept-field__rule {
  margin: 0;
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-secondary);
}

/* --------------------------------------------------------------------------
   2 ter. LAS FECHAS

   Dos columnas en cuanto hay sitio: son campos cortos y apilarlos gastaría una
   fila entera de pantalla por cada uno. Con un solo campo -- conceptos sin
   fecha de cierre -- la fila no se estira a lo ancho.
   -------------------------------------------------------------------------- */
.qy-nueva-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qy-space-3);
}

/*
   PROD_MOBILE_VISUAL_AND_ONBOARDING_REDESIGN_V3.

   `repeat(auto-fit, minmax(140px, 1fr))` dejaba caber dos columnas de 140px
   en cualquier móvil (incluso a 360px de ancho), pero el control nativo
   `<input type="date">` de iOS/Android necesita más sitio del que le quedaba
   tras el padding: el resultado eran las dos fechas comprimidas y
   solapándose entre sí que señaló el propietario. Ahora se apila SIEMPRE por
   defecto y solo pasa a dos columnas a partir de 480px, donde ambos
   controles caben con holgura real. `min-width: 0` en la propia pista y en
   cada `.qy-field` hijo evita que el contenido intrínseco del input fuerce
   un desbordamiento aunque la pista se estreche.
*/
@media (min-width: 480px) {
  .qy-nueva-dates:not(.is-single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.qy-nueva-dates.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.qy-nueva-dates > .qy-field {
  min-width: 0;
}

/* Las notas no necesitan ser altas: dos líneas y crecen si el usuario quiere. */
.qy-nueva-notes {
  min-height: calc(var(--qy-touch-min) * 1.2);
  padding-block: var(--qy-space-2);
  resize: vertical;
}

/* --------------------------------------------------------------------------
   3. CARRUSEL DE CONCEPTOS

   Tira horizontal con TODOS los conceptos del usuario, ordenados por uso.

   `scrollbar-width: none` + `::-webkit-scrollbar { display: none }` es la
   forma soportada de ocultar la barra SIN romper el desplazamiento: el
   contenedor sigue siendo desplazable con el dedo, con la rueda y con el
   teclado. No se recurre a `overflow: hidden` con desplazamiento simulado en
   JavaScript, que es lo que sí rompería la accesibilidad.

   El desbordamiento se declara solo en el eje X. `overflow-y: visible` junto a
   `overflow-x: auto` no es una combinación válida en CSS -- el navegador
   promueve el otro eje a `auto` --, así que el eje vertical se deja explícito
   para que el anillo de foco de un chip no se recorte.
   -------------------------------------------------------------------------- */
/*
   S4.11G — EL PRIMER CONCEPTO YA NO SE VE CORTADO

   La versión anterior sacaba la tira fuera de su caja con un margen negativo
   (`margin: 0 calc(var(--qy-space-1) * -1)`) para ganar aire. El efecto en el
   móvil del propietario era el contrario: en reposo el primer chip quedaba
   pegado al borde de la pantalla y parecía recortado, porque la tira empezaba
   antes de donde empieza el contenido.

   Se sustituye por el mecanismo que corresponde: relleno interior propio y
   `scroll-padding-inline`, que es lo que hace que el ajuste por desplazamiento
   DETENGA el chip dentro de ese relleno en vez de contra el borde. Así el
   primero se ve entero en el inicio del recorrido y el último se ve entero al
   final, sin sacar nada de su sitio.

   `min-width: 0` impide que la tira, como hija de una rejilla, se ensanche
   hasta su contenido y empuje la página a desplazarse en horizontal.
*/
.qy-concept-carousel {
  display: flex;
  gap: var(--qy-space-2);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--qy-space-1) var(--qy-space-2);
  padding-inline: var(--qy-space-1);
  scroll-padding-inline: var(--qy-space-1);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.qy-concept-carousel::-webkit-scrollbar {
  display: none;
}

/*
   `flex: none` es lo que impide que los chips se compriman para caber todos:
   sin él, quince conceptos se aplastarían hasta ser ilegibles en vez de
   desbordar y poder desplazarse, que es justamente el comportamiento pedido.
*/
.qy-concept-chip {
  flex: none;
  display: grid;
  gap: 2px;
  min-width: 104px;
  max-width: 168px;
  padding: var(--qy-space-3);
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
  color: var(--qy-color-text-secondary);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    background var(--qy-motion-fast) var(--qy-motion-ease),
    border-color var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-concept-chip > strong {
  font: var(--qy-text-body-md);
  font-weight: 700;
  color: var(--qy-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-concept-chip > span {
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El estado seleccionado no depende solo del color: cambia el borde, el
   fondo y el peso del texto. */
.qy-concept-chip.is-selected {
  border-color: var(--qy-color-brand);
  background: var(--qy-color-brand-soft);
}

.qy-concept-chip.is-selected > strong {
  color: var(--qy-color-brand-text);
}

/*
   El descriptor SUBE de tinta al seleccionarse.

   Medido por el QA de contraste de S4.11A: sobre el relleno de marca de la
   ficha activa -- turquesa al 14 % compuesto sobre la superficie-2, que da
   rgb(9, 49, 56) en oscuro -- la tinta terciaria mide 4,49:1 y se queda a una
   centésima de AA. El fallo no está en ninguno de los dos tokens por separado:
   aparece solo en su composición, que es justo lo que una comprobación de
   colores declarados no ve y sí ve la medición sobre el píxel pintado.

   La tinta secundaria sobre ese mismo fondo mide 5,4:1.
*/
.qy-concept-chip.is-selected > span {
  color: var(--qy-color-text-secondary);
}

.qy-concept-chip:focus-visible {
  outline: 2px solid var(--qy-color-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3 bis. LA REFERENCIA, EN LA PANTALLA PRINCIPAL

   Es el único campo OBLIGATORIO de la venta ordinaria, así que está donde se
   pide, entre el concepto y el guardado. Antes vivía dentro de "Más detalles"
   y cada venta pagaba un viaje de ida y vuelta a una subvista por un dato que
   casi siempre hace falta.

   LO QUE NO SE HACE: crear un campo nuevo. Reutiliza `.qy-field` y `.qy-input`
   de la fundación, que es donde ya vive el borde accesible y -- lo que importa
   aquí -- el tratamiento de `[aria-invalid="true"]`. El estado de error no se
   pinta con un color propio de esta hoja: se hereda del que ya usa todo el
   producto.

   ALTURA: la fila suma etiqueta + campo + una línea de ayuda. La ayuda se pinta
   SIEMPRE, también cuando todo está bien, para que la aparición del error no
   desplace el teclado hacia abajo justo cuando se le pide al usuario que
   escriba. El hueco reservado es más barato que un salto de maquetación.
   -------------------------------------------------------------------------- */
.qy-nueva-reference {
  gap: var(--qy-space-1);
}

/* Etiqueta y distintivo comparten línea: no gasta una fila en decir "Obligatoria". */
.qy-nueva-reference__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--qy-space-2);
}

.qy-nueva-reference__badge {
  flex: none;
  font: var(--qy-text-label-md);
  font-style: normal;
  letter-spacing: var(--qy-tracking-label);
  color: var(--qy-color-text-tertiary);
}

/*
   Obligatoria NO se anuncia solo con color: el distintivo lo dice con palabras
   y el lector de pantalla lo recibe por `aria-required`. El color es refuerzo.
*/
.qy-nueva-reference:not(.is-invalid) .qy-nueva-reference__badge {
  color: var(--qy-color-text-secondary);
}

.qy-nueva-reference__hint {
  margin: 0;
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-tertiary);
}

/*
   Error: el borde rojo ya lo pone `.qy-input[aria-invalid="true"]` en la
   fundación. Aquí solo se tiñe el texto que EXPLICA qué falta, con el mismo
   token de texto de error que usa `.qy-field__error`.
*/
.qy-nueva-reference.is-invalid .qy-nueva-reference__hint,
.qy-nueva-reference.is-invalid .qy-nueva-reference__badge {
  color: var(--qy-color-cancelled-text);
}

/* --------------------------------------------------------------------------
   4. SUBVENTAS DE UNA COMPUESTA — EN LÍNEA, EN EL MISMO FORMULARIO

   Era el último motivo para mandar al usuario a una segunda vista, y era un
   motivo de SITIO, no de dominio: los campos, el borrador y la construcción de
   cada línea no han cambiado. Ahora es una sección condicional del formulario,
   y solo existe cuando el concepto es compuesto.
   -------------------------------------------------------------------------- */
.qy-nueva-details__note {
  margin: 0;
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-tertiary);
}

.qy-nueva-subsales {
  display: grid;
  gap: var(--qy-space-2);
  margin: 0;
  padding: var(--qy-space-3);
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-md);
}

.qy-nueva-subsales.is-invalid {
  border-color: var(--qy-color-cancelled);
}

/*
   El error de una subventa se escribe DENTRO de la sección que lo produce. Un
   aviso flotante diría que algo falta; esto dice dónde.
*/
.qy-nueva-subsales__error {
  margin: 0;
  font: var(--qy-text-body-sm);
  color: var(--qy-color-cancelled-text);
}

.qy-nueva-subsales > legend {
  padding: 0 var(--qy-space-2);
  font: var(--qy-text-label-md);
  color: var(--qy-color-text-secondary);
}

.qy-nueva-subsale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: center;
  gap: var(--qy-space-2);
}

.qy-nueva-subsale__toggle {
  display: flex;
  align-items: center;
  gap: var(--qy-space-2);
  min-height: var(--qy-touch-min);
  font: var(--qy-text-body-md);
  color: var(--qy-color-text-primary);
  cursor: pointer;
  min-width: 0;
}

.qy-nueva-subsale__toggle > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. TECLADO NUMÉRICO

   Tres columnas iguales. `minmax(0, 1fr)` y no `1fr`: el mínimo global de
   `button` que declara `mobile-polish.css` se propagaría al tamaño de la
   pista y la rejilla dejaría de poder encogerse a 320 px -- el mismo defecto
   que el mapa de actividad tuvo en S4.11E.

   `aspect-ratio` da a las teclas una altura proporcional a su anchura, así
   que el teclado ocupa lo mismo en proporción a 320 que a 430 sin ningún
   ajuste por punto de ruptura.
   -------------------------------------------------------------------------- */
.qy-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--qy-space-2);
}

.qy-keypad__key {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  min-height: var(--qy-touch-min);
  padding: 0;
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
  color: var(--qy-color-text-primary);
  /* Token de titular, no una medida inventada: es el mismo paso tipográfico
     que los títulos de sección con los que convive la pantalla. */
  font: var(--qy-text-headline-md);
  font-variant-numeric: var(--qy-font-numeric);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--qy-motion-fast) var(--qy-motion-ease);
}

/* Realimentación al tocar. `:active` responde igual al dedo y al ratón. */
.qy-keypad__key:active {
  background: var(--qy-color-active);
}

.qy-keypad__key:focus-visible {
  outline: 2px solid var(--qy-color-focus);
  outline-offset: 2px;
}

.qy-keypad__key--action {
  color: var(--qy-color-text-secondary);
}

/*
   S4.11G — EL ICONO DE BORRADO SE DIBUJA CON UNA MÁSCARA, NO CON RECORTES

   La versión anterior era una caja con borde recortada por `clip-path` y una
   cruz colocada con porcentajes y un margen negativo a ojo. El `clip-path`
   cortaba el propio borde y la cruz quedaba descentrada: es el icono que el
   propietario vio mal recortado.

   Ahora es una máscara SVG, que es el primitivo de icono que ya usa el resto
   del producto (`.qy-empty-state > i`, `.nav-icon`). El trazo va dentro del
   `viewBox`, así que no hay nada que recortar y el centrado lo resuelve la
   rejilla del botón. Sigue tomando el color con `currentColor` -- aquí, el
   fondo de la propia caja -- y no añade ninguna fuente de iconos.
*/
.qy-keypad__icon {
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9.5L3 12l6.5 7H20a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM12 9.5l5 5m0-5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M20 5H9.5L3 12l6.5 7H20a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM12 9.5l5 5m0-5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   TECLADO BLOQUEADO

   Lo usa Pendientes cuando el importe de un cobro parcial no se puede editar.
   El teclado no se esconde: se apaga, para que la composición no dé un salto.

   El importe bloqueado de Nueva venta ya NO pasa por aquí: su campo es nativo y
   su estado `readonly` se estiliza en `.qy-nueva-amount-field.is-locked`.
   -------------------------------------------------------------------------- */
.qy-keypad.is-locked {
  opacity: 0.4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. REGISTRAR VENTA
   -------------------------------------------------------------------------- */
.qy-nueva-submit__btn {
  width: 100%;
  min-height: var(--qy-touch-min);
  font: var(--qy-text-body-lg);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .qy-concept-chip,
  .qy-keypad__key {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   7. ESCRITORIO

   La revisión de escritorio del propietario no ha empezado. Aquí solo se
   evita que la pantalla se estire de forma absurda en un monitor ancho: el
   contenido se acota y se centra, que es lo que ya hacen las demás pantallas.
   No es un rediseño.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .qy-nueva-screen {
    max-width: 520px;
    margin-inline: auto;
  }
}