/*
 * KummaraDS — kds-input
 * ============================================================
 * Un campo con algo ADENTRO de su caja, al final: el botón que trae el dato
 * («ARCA» al lado del CUIT: completa la razón social y la condición de IVA) o
 * la marca que dice de dónde salió (el teclado del ítem escrito a mano).
 *
 * Misma familia que kds-price / kds-pct / kds-uom: el borde y el foco los dibuja
 * la caja, el campo viaja sin borde propio y lo de adentro va EN FLUJO, no
 * encimado, así nunca pisa lo que se escribe.
 *
 *   <div class="kds-input">
 *     <input type="text" class="form-control kds-input__control" id="cuit">
 *     <button type="button" class="kds-input__accion" aria-label="Traer los datos de ARCA">
 *       <i class="fas fa-search"></i>ARCA
 *     </button>
 *   </div>
 *
 *   <div class="kds-input">
 *     <textarea class="form-control kds-input__control" rows="1"></textarea>
 *     <span class="kds-input__marca" data-kds-tip="Escrito a mano, no sale del catálogo">
 *       <i class="fas fa-keyboard"></i>
 *     </span>
 *   </div>
 *
 *   .kds-input__control   el campo: un input, o un textarea que crece con el texto
 *                         (un texto largo baja de renglón en vez de cortarse)
 *   .kds-input__accion    botón adentro, al final: rótulo corto con su ícono; mientras
 *                         trabaja lleva .is-cargando y los puntitos ds-loader--chico
 *   .kds-input__marca     ícono quieto adentro, al final; su explicación va en data-kds-tip
 *   .is-invalid en el control pinta la caja en rose; disabled la apaga
 *
 *   --despliega           para un texto largo en poco lugar (la descripción de un renglón):
 *                         quieto ocupa un renglón y lo que no entra se corta con «…»; con el
 *                         mouse encima, el globito muestra el texto entero; al escribir se abre
 *                         una caja flotante más ancha que crece con el texto, encima de lo que
 *                         haya abajo, y al salir (clic afuera, Tab, Enter o Esc) vuelve al
 *                         renglón. Lo maneja js/components/kds-input.js, global en el admin:
 *                         posición fija como el menú del kds-combobox, así ni una tabla con
 *                         desplazamiento ni un cajón la recortan. Va con un <textarea rows="1">.
 * ============================================================
 */

.kds-input {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--ds-border-strong, #dee2e6);
    border-radius: .375rem;
    background: var(--ds-surface-raised, #fff);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.kds-input:focus-within {
    border-color: var(--color-teal, #2EB8A8);
    box-shadow: 0 0 0 .2rem rgba(46, 184, 168, .2);
}

.kds-input:has(.is-invalid) { border-color: var(--color-rose, #E6607B); }

.kds-input:has(.kds-input__control:disabled) {
    background: var(--ds-surface-sunken, #f8f9fa);
    border-color: var(--ds-border, #eee);
}

.kds-input__control {
    flex: 1 1 0;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
}

.kds-input__control.is-invalid { background-image: none; }

/* Un desplegable como campo de la caja (la regla de cada renglón del pedido, #1361): conserva su flechita, y lo que
   no entra se corta con «…»; el nombre entero va en su globito. */
.kds-input > select.kds-input__control.form-select {
    padding-right: 1.9rem;
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none) !important;
    background-repeat: no-repeat !important;
    background-position: right .5rem center !important;
    background-size: 1rem .75rem !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Con algo adentro a la derecha, el aire de ese lado lo pone eso: el texto gana el lugar. */
.kds-input > .kds-input__control:not(:last-child) { padding-right: .35rem; }

textarea.kds-input__control {
    resize: none;
    overflow: hidden;
    field-sizing: content;
    min-height: 0;
}

.kds-input--despliega > .kds-input__control {
    field-sizing: fixed;
    height: calc(1.5em + .5rem);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kds-input--despliega.is-desplegado > .kds-input__control {
    position: fixed;
    z-index: 1010;
    height: auto;
    min-height: calc(1.5em + .5rem + 2px);
    max-height: 50vh;
    field-sizing: content;
    overflow-y: auto;
    white-space: pre-wrap;
    padding-right: .5rem;
    border: 1px solid var(--color-teal, #2EB8A8) !important;
    border-radius: .375rem;
    background: var(--ds-surface-raised, #fff) !important;
    box-shadow: 0 0 0 .2rem rgba(46, 184, 168, .2), 0 .75rem 1.75rem rgba(15, 23, 42, .18) !important;
    animation: kds-input-abre .14s ease-out;
}

@keyframes kds-input-abre {
    from { opacity: .4; transform: translateY(-.1875rem); }
    to   { opacity: 1;  transform: none; }
}

.kds-input__accion {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    margin: .25rem;
    padding: 0 .6rem;
    border: 0;
    border-radius: .3125rem;
    background: color-mix(in srgb, var(--color-teal, #2EB8A8) 12%, transparent);
    color: var(--color-teal-dark, #1FA090);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background .14s, color .14s;
}

.kds-input__accion:hover { background: color-mix(in srgb, var(--color-teal, #2EB8A8) 22%, transparent); }

.kds-input__accion:active { transform: translateY(1px); }

.kds-input__accion:focus-visible {
    outline: 2px solid var(--color-teal, #2EB8A8);
    outline-offset: 1px;
}

.kds-input__accion:disabled,
.kds-input__accion.is-cargando {
    cursor: default;
    transform: none;
}

.kds-input__accion:disabled:not(.is-cargando) { opacity: .55; }

.kds-input__marca {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 .65rem 0 .2rem;
    color: var(--ds-text-subtle, #999);
    font-size: .85rem;
    cursor: help;
}

/* --inicio: la marca al principio de la caja, antes del campo (a qué comprobante va un renglón, delante del
   desplegable de su regla, #1361). */
.kds-input__marca--inicio { padding: 0 .1rem 0 .45rem; }
.kds-input > .kds-input__marca--inicio + .kds-input__control { padding-left: .35rem; }

@media (prefers-reduced-motion: reduce) {
    .kds-input,
    .kds-input__accion { transition: none; }
    .kds-input__accion:active { transform: none; }
    .kds-input--despliega.is-desplegado > .kds-input__control { animation: none; }
}