/* ============================================================
   HUF — Componente: Input / Select / Textarea (.hd-input, .hd-select, .hd-textarea)
   ------------------------------------------------------------
   Reemplaza .form-control/.form-select de Bootstrap (HVL §6.2). Altura
   44px (misma que .hd-btn, para que cualquier barra de filtros quede
   alineada sin ajustes), sin borde perimetral, solo línea inferior de
   2px que se ilumina con el acento al recibir foco — es el "sello de
   marca" de líneas de energía (HVL §4.2), junto al borde del sidebar
   activo y el borde superior de .hd-panel-card.
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §Formularios.
   ============================================================ */

.hd-field {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
    margin-bottom: var(--hd-space-4);
}

.hd-label {
    font-size: var(--hd-text-micro);
    font-weight: 600;
    color: var(--hd-theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hd-input,
.hd-select,
.hd-textarea {
    height: var(--hd-size-control);
    padding: 0 var(--hd-space-3);
    background: var(--hd-color-inset, var(--hd-theme-surface));
    border: none;
    border-bottom: 2px solid var(--hd-color-border);
    border-radius: var(--hd-radius-sm) var(--hd-radius-sm) 0 0;
    color: var(--hd-theme-text);
    font-family: var(--hd-theme-font, var(--hd-font-sans));
    font-size: var(--hd-text-base);
    font-weight: 500;
    width: 100%;
    transition: border-color var(--hd-motion-standard) var(--hd-ease);
}

/* Color plano por tema (neo-industrial.css / -light.css), no text-muted +
   opacity: la misma opacity leía distinto sobre cada fondo — ver auditoría
   visual 2026-08-10. En oscuro el token ya resuelve al mismo valor exacto
   que esta fórmula producía antes (cero cambio visual). */
.hd-input::placeholder,
.hd-textarea::placeholder {
    color: var(--hd-theme-placeholder, var(--hd-theme-text-muted));
}

.hd-input:focus,
.hd-select:focus,
.hd-textarea:focus {
    outline: none;
    border-bottom-color: var(--hd-theme-accent-text);
    box-shadow: 0 1px 0 0 var(--hd-theme-accent-text);
}

/* Además de la línea de energía, todo foco de teclado suma el outline
   único de HVL §5.7 — el foco nunca se ve igual que el hover, y aquí
   tampoco igual que un simple foco de mouse. */
.hd-input:focus-visible,
.hd-select:focus-visible,
.hd-textarea:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: var(--hd-focus-offset);
}

.hd-input:disabled,
.hd-select:disabled,
.hd-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hd-textarea {
    min-height: 6rem;
    resize: vertical;
}

.hd-help-text {
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
}

/* Resultado de una acción sobre el propio texto de ayuda (ej. "ticket
   enviado" / "sin respuesta de la impresora"). Existe como modificador
   para que el JS de una pantalla cambie una CLASE y no un
   `style.color` — el color de estado lo decide el sistema, no la vista
   (HVL §6). Para un resultado que el usuario deba acusar recibo, el
   componente correcto sigue siendo <hd-alert> o HD.dialogs. */
.hd-help-text--success { color: var(--hd-color-success); }
.hd-help-text--warning { color: var(--hd-color-warning); }
.hd-help-text--error { color: var(--hd-color-error); }

.hd-error-text {
    font-size: var(--hd-text-meta);
    color: var(--hd-color-error);
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
}

/* Error de campo (HVL §6.2): la línea inferior pasa a error y el color
   nunca va solo — siempre acompañado del texto/ícono de .hd-error-text.
   ".input-validation-error" es la clase que jquery-validation-unobtrusive
   inyecta en runtime (patrón ya establecido en el portal, ver
   _ValidationScriptsPartial) — se soporta igual que el modificador manual
   ".hd-field--error", sin reimplementar la integración con esa librería. */
.hd-field--error .hd-input,
.hd-field--error .hd-select,
.hd-field--error .hd-textarea,
.hd-input.input-validation-error,
.hd-select.input-validation-error,
.hd-textarea.input-validation-error {
    border-bottom-color: var(--hd-color-error);
}

/* Panel de sugerencias del campo (atributo `suggestions-id` de <hd-input>).
   Flota sobre el resto del formulario: si empujara el contenido, cada
   pulsación reacomodaría el formulario entero bajo el cursor. El campo
   toma `position: relative` para que el panel se ancle a ÉL y no a la
   página — anclado a la página se despega al hacer scroll. */
.hd-field--with-suggestions {
    position: relative;
}

.hd-field__suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--hd-z-dropdown);
    max-height: 13.75rem;
    overflow-y: auto;
    margin-top: var(--hd-space-1);
    padding: var(--hd-space-2);
    background: var(--hd-theme-surface);
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-md);
    box-shadow: var(--hd-shadow-floating);
}

/* Prefijo fijo pegado al control (atributo `prefix` de <hd-input>).
   Comparte la línea inferior del campo en vez de traer un borde propio:
   el prefijo y el control son UN campo, y dibujarlos como dos cajas
   contiguas es justo el aspecto de "input-group de Bootstrap" del que
   HUF sale (HVL §6.2). */
.hd-input-group {
    display: flex;
    align-items: stretch;
}

.hd-input-group__prefix {
    display: flex;
    align-items: center;
    padding-right: var(--hd-space-2);
    border-bottom: 2px solid var(--hd-color-border);
    color: var(--hd-theme-text-muted);
    font-family: var(--hd-font-mono);
    white-space: nowrap;
}

.hd-input-group > .hd-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Modificador monoespaciado (atributo `mono` de <hd-input>/<hd-textarea>).
   `tabular-nums` además de la fuente: en una IP o un puerto, que los
   dígitos no bailen al escribir es la mitad del valor. */
.hd-input--mono,
.hd-textarea--mono {
    font-family: var(--hd-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Campo de cantidad dentro de una celda de tabla: toma de inventario,
   conteo de denominaciones en el arqueo de caja. Ancho fijo y corto a
   propósito — son números de dos o tres dígitos, y un campo de 200px
   junto a otros veinte iguales convierte la columna en una pared.
   Centrado y en peso 600 porque es el dato que el operador está
   comparando fila contra fila.

   Existe como modificador y no como `style` de cada pantalla porque el
   ancho de un campo es geometría del framework (HVL §6): dos pantallas
   ya lo necesitaban con dos valores distintos escritos a mano. */
.hd-input--count {
    width: 5.5rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hd-checkbox,
.hd-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-2);
    accent-color: var(--hd-theme-accent);
    font-size: var(--hd-text-base);
    color: var(--hd-theme-text);
}

/* Grupo de opciones de <hd-choice variant="radio">. Fila con separación
   generosa —no una columna— porque son pocas y excluyentes: verlas de
   un vistazo es la razón de no usar un <select>. Envuelve en varias
   líneas cuando no caben, en vez de recortar. */
.hd-choice__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2) var(--hd-space-5);
    align-items: center;
}

/* Switch (HVL — primer consumidor real: Alertas/Reglas.cshtml, activar/
   desactivar una regla). Checkbox nativo (mantiene semántica de formulario
   y accesibilidad de teclado gratis) re-skinneado a pastilla — sin
   dependencia de bootstrap .form-switch. */
.hd-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-2);
}

.hd-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--hd-radius-pill);
    background: var(--hd-color-border-strong);
    cursor: pointer;
    transition: background var(--hd-motion-standard) var(--hd-ease);
}

.hd-switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--hd-motion-standard) var(--hd-ease);
}

.hd-switch input[type="checkbox"]:checked {
    background: var(--hd-theme-accent);
}

.hd-switch input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.hd-switch input[type="checkbox"]:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: var(--hd-focus-offset);
}

.hd-switch input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hd-switch label {
    font-size: var(--hd-text-base);
    color: var(--hd-theme-text);
    cursor: pointer;
}

/* Control segmentado (grupo de radios estilo Bootstrap .btn-group +
   .btn-check) — primer consumidor real: Configuracion/Modulos/Index.cshtml
   (predeterminado/activar/desactivar por módulo). Mismo lenguaje que
   .hd-tabs: la opción activa se marca con el acento, nunca con
   verde/rojo decorativo (HVL — un solo acento, el color no es
   semántico por opción). El radio nativo queda invisible pero sigue
   siendo el control real (teclado/lector de pantalla); el label
   inmediatamente siguiente en el DOM es el que se ve. */
.hd-segmented {
    display: inline-flex;
    /* Dentro de .hd-field (flex en columna) un inline-flex se estira igual
       por el `align-items: stretch` del padre, y el grupo acababa con una
       caja vacía hasta el borde derecho. El control debe medir lo que miden
       sus opciones. */
    align-self: flex-start;
    border-radius: var(--hd-radius-sm);
    border: 1px solid var(--hd-color-border-strong);
    overflow: hidden;
}

.hd-segmented input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.hd-segmented label {
    padding: var(--hd-space-2) var(--hd-space-3);
    font-size: var(--hd-text-meta);
    font-weight: 600;
    color: var(--hd-theme-text-muted);
    background: transparent;
    border-right: 1px solid var(--hd-color-border-strong);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--hd-motion-standard) var(--hd-ease), color var(--hd-motion-standard) var(--hd-ease);
}

.hd-segmented label:last-of-type {
    border-right: none;
}

.hd-segmented input[type="radio"]:checked + label {
    background: var(--hd-theme-accent);
    color: var(--hd-color-accent-contrast);
}

.hd-segmented input[type="radio"]:focus-visible + label {
    outline: var(--hd-focus-ring);
    outline-offset: -2px;
}

/* ── Editor de opciones por filas (.hd-opcion-fila) ─────────────────────────
   Una fila = una opción de un grupo de modificadores: nombre editable +
   interruptor "Disponible" + eliminar. Reemplazó al textarea de nombres
   sueltos, que no le dejaba identidad a la opción y por tanto no admitía ni
   el interruptor ni conservar el enlace del historial (ADR-064).

   El interruptor y el botón no se encogen: lo que cede al angostarse es el
   nombre, que es lo único con texto variable. */

.hd-opcion-fila {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin-bottom: var(--hd-space-2);
}

.hd-opcion-fila .hd-opcion-nombre {
    flex: 1 1 auto;
    min-width: 0;
}

.hd-opcion-fila .hd-opcion-switch {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
}

/* La opción apagada se ve apagada: el nombre baja de contraste para que el
   estado se lea recorriendo la columna, sin tener que mirar cada casilla. */
.hd-opcion-fila:has(.hd-opcion-disponible:not(:checked)) .hd-opcion-nombre {
    color: var(--hd-theme-text-muted);
    text-decoration: line-through;
}

/* Chips de opción con interruptor (.hd-opcion-chip) — el "se acabó" de un clic
   desde la lista de grupos, sin abrir el editor. Cada chip es el submit de su
   propio form, así que los forms se disponen en línea. */

.hd-opcion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
    margin-top: var(--hd-space-1);
}

/* El punto es lo que delata que el chip es un interruptor y no una etiqueta.
   Sin él, un chip disponible y uno agotado se distinguen por el tachado —que
   solo se lee cuando ya pasó algo— y en reposo ninguno de los dos parece
   pulsable: el gesto más frecuente de la pantalla ("se acabó la papa criolla")
   quedaba escondido detrás de un `:hover`. El punto dice el estado antes de
   tocar nada, y de paso le da al chip silueta de control. */
.hd-opcion-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--hd-space-2);
    background: var(--hd-color-inset, var(--hd-theme-surface));
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-pill, 999px);
    color: var(--hd-theme-text);
    font-family: inherit;
    font-size: var(--hd-text-micro);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--hd-motion-standard) var(--hd-ease),
                color var(--hd-motion-standard) var(--hd-ease);
}

.hd-opcion-chip::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hd-color-success);
}

.hd-opcion-chip:hover {
    border-color: var(--hd-theme-accent);
}

.hd-opcion-chip:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
}

/* Agotada: se ve apagada pero sigue ahí, que es justo la diferencia con
   borrarla — el camino de vuelta tiene que estar a la vista (ADR-064). */
.hd-opcion-chip--agotada {
    color: var(--hd-theme-text-muted);
    text-decoration: line-through;
    border-style: dashed;
}

.hd-opcion-chip--agotada::before {
    background: var(--hd-theme-text-muted);
}

/* El mismo pill sin interruptor: en el modal "Productos con este grupo" los
   chips son la lista, no controles. Sin esto heredarían el punto de estado
   —que ahí no significa nada— y el cursor de mano, que promete una acción que
   ese modal no tiene (es de solo lectura a propósito). */
.hd-opcion-chip--estatico {
    cursor: default;
}

.hd-opcion-chip--estatico::before {
    content: none;
}

.hd-opcion-chip--estatico:hover {
    border-color: var(--hd-color-border);
}