/*
* KummaraDS — kds-qty
* ============================================================
* El campo para cargar UNA CANTIDAD. Con sus flechitas para subir y bajar, y
* con la unidad del producto pegada al número.
*
*
*
*
* mt
*
*
*
* Lo maneja kds-qty.js, que es global: ninguna página vuelve a escribir el
* bucle de los botones ni a decidir cuántos decimales aceptar.
*
* POR QUÉ TIENE UNIDAD ADENTRO
* Una cantidad sin su unidad no dice nada: "20" no distingue veinte correas de
* veinte metros, y veinte correas y media no existen. Antes la unidad viajaba
* en una columna aparte con una pastilla que decía "mt · 2 dec." — información
* de sistema, puesta al costado, que no ayudaba a cargar el número. Acá la
* unidad está donde se la necesita: contra el número, mientras se escribe.
*
* Los decimales no los elige la pantalla: salen de la unidad del producto
* (data-decimales). Si se cuenta de a uno, las flechitas van de a uno y el
* campo no deja escribir una coma. Si se mide en metros con dos decimales,
* las flechitas van de a 0,01 y la coma se acepta.
*
* Coma o punto: se aceptan las dos. Se escribe como se quiera y al salir del
* campo queda escrito como se escribe acá — con coma. Nadie tiene que
* acordarse de cuál usa el sistema.
*
* .kds-qty--sm más chico, para adentro de una fila de tabla
* .kds-qty--campo tamaño de campo de formulario (38px, como un monto)
* .kds-qty--ancho ocupa el ancho disponible en vez de los 108px fijos
*
* Para usarla sola, con el nombre del producto (la tienda, #2005):
*
* …los dos botones y el campo, como arriba…
*
*
* data-nombre los botones dicen «Restar uno: Filtro de aceite» / «Sumar uno: …» y el campo se anuncia
* como un contador con su mínimo, su máximo y su valor
* data-avisa-change además del evento kds-qty:cambio, el campo avisa change al confirmar (botón o salida)
* data-sin-titulo sin el globito automático de los decimales
* KdsQty.estado(caja, 'guardando' | 'guardado' | 'error' | null, texto): el estado de guardado de la cantidad,
* en la caja y en el .kds-qty__estado que la sigue.
* Valores que un tema puede fijar (con el respaldo del panel): --kds-qty-ancho, -alto, -radio, -borde, -foco,
* -foco-sombra, -fs, -color, -boton-ancho, -boton-alto, -boton-fs, -boton-color, -boton-hover y -boton-radio.
* ============================================================ */
.kds-qty {
display: flex;
align-items: center;
width: var(--kds-qty-ancho, 6.75rem);
min-height: var(--kds-qty-alto, auto);
border: 1px solid var(--kds-qty-borde, var(--ds-border-strong, #dee2e6));
border-radius: var(--kds-qty-radio, .375rem);
background: var(--ds-surface, #fff);
transition: border-color .12s ease, box-shadow .12s ease;
}
.kds-qty:focus-within {
border-color: var(--kds-qty-foco, var(--color-teal, #2EB8A8));
box-shadow: var(--kds-qty-foco-sombra, 0 0 0 2px rgba(46, 184, 168, .15));
}
.kds-qty--ancho { width: 100%; }
.kds-qty__btn {
width: var(--kds-qty-boton-ancho, 1.625rem);
height: var(--kds-qty-boton-alto, 1.75rem);
flex-shrink: 0;
border: none;
background: transparent;
color: var(--kds-qty-boton-color, var(--ds-text-subtle, #adb5bd));
cursor: pointer;
font-size: var(--kds-qty-boton-fs, 1rem);
font-weight: 700;
line-height: 1;
user-select: none;
padding: 0;
transition: color .15s, background .15s;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--kds-qty-boton-radio, .3125rem);
}
.kds-qty__btn:hover {
color: var(--kds-qty-boton-hover, var(--color-teal, #2EB8A8));
background: var(--ds-surface-sunken, #f1f3f5);
}
.kds-qty__btn:disabled {
opacity: .35;
cursor: default;
background: none;
color: var(--ds-text-subtle, #adb5bd);
}
.kds-qty__btn:focus-visible {
outline: 2px solid var(--kds-qty-foco, var(--color-teal, #2EB8A8));
outline-offset: -2px;
}
input[type="number"].kds-qty__input,
input.kds-qty__input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
text-align: center;
font-size: var(--kds-qty-fs, .8125rem);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--kds-qty-color, var(--ds-text, #333));
padding: 0;
}
.kds-qty__input:focus { outline: none; }
.kds-qty__input { -moz-appearance: textfield; }
.kds-qty__input::-webkit-outer-spin-button,
.kds-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* La unidad, pegada al número y en tono menor: acompaña, no compite. */
.kds-qty__unidad {
flex: 0 0 auto;
padding-right: .2rem;
font-size: .76rem;
font-weight: 500;
color: var(--ds-text-subtle, #999);
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.kds-qty__unidad:empty { display: none; }
/* Un número que no entra en su unidad: se muestra igual y se marca. Nunca se
redondea por atrás, que sería esconderlo justo del que puede arreglarlo. */
.kds-qty.is-invalid { border-color: var(--color-rose, #E6607B); }
.kds-qty.is-invalid .kds-qty__input { color: var(--color-rose, #E6607B); }
.kds-qty--sm { width: 6.5rem; }
.kds-qty--sm .kds-qty__btn { height: 1.625rem; width: 1.5rem; font-size: .875rem; }
.kds-qty--sm .kds-qty__input { font-size: .7812rem; }
/* --campo: el tamaño de un campo de formulario. El de base está pensado para una
fila de tabla, donde entran veinte uno abajo del otro; en un formulario, al lado
de un monto o un porcentaje de 38px, quedaba chico y parecía de otra pantalla.
Mismo alto y misma letra que los demás campos. */
.kds-qty--campo { width: 8.75rem; min-height: 2.375rem; }
.kds-qty--campo .kds-qty__btn { width: 2.125rem; height: 2.25rem; font-size: 1.125rem; }
.kds-qty--campo .kds-qty__input { font-size: .9375rem; }
/* ---- LA TECLA QUE NO ENTRA ------------------------------------------------
Cuando el campo se cuenta de a uno, la coma esta bloqueada. Hasta hoy el
bloqueo era MUDO: apretabas la coma y no pasaba absolutamente nada, asi que
el que la apretaba la volvia a apretar mas fuerte creyendo que no habia
tomado la tecla. Un rechazo sin respuesta se lee como un campo roto.
Medio segundo de rebote y el borde en rojo: alcanza para decir "te escuche,
y aca no va", sin cartel, sin toast y sin sacarle el foco a nadie. */
.kds-qty.is-rebote {
animation: kds-qty-rebote .4s cubic-bezier(.36, .07, .19, .97);
border-color: var(--color-rose, #E6607B);
}
@keyframes kds-qty-rebote {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-.1875rem); }
40%, 60% { transform: translateX(.1875rem); }
}
/* ---- El guardado de la cantidad (#2005, #2009): la página guarda; la pieza muestra cómo va ---- */
.kds-qty.is-guardando .kds-qty__input { opacity: .55; }
.kds-qty.is-guardado { border-color: var(--kds-exito, #459b40); }
.kds-qty.is-error { border-color: var(--kds-peligro, #D03355); }
/* «Guardando…» y «Guardado» los dice el lector (la caja ya lo muestra); un error se ve escrito, con Reintentar.
Así la lista no salta en cada guardado. */
.kds-qty__estado:not(.is-error) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.kds-qty__estado.is-error {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--kds-aire-1, .25rem) var(--kds-aire-2, .5rem);
margin: var(--kds-aire-1, .25rem) 0 0;
color: var(--kds-peligro-texto, var(--kds-peligro, #D03355));
font-size: var(--kds-fs-2, .875rem);
font-weight: var(--kds-peso-ui, 600);
line-height: var(--kds-lh-ui, 1.4);
}
@media (prefers-reduced-motion: reduce) {
.kds-qty.is-rebote { animation: none; }
}