/*!
 * QUIPU Design System — CAMPOS DE FILTRO Y FORMULARIO (fuente única)
 * Version: 1.0.0  ·  Build: 2026-09-05  ·  UPG-ICO-005
 * ================================================================
 * QUÉ PROBLEMA RESUELVE
 * En una misma fila de filtros convivían TRES tipografías distintas:
 *
 *   .q-input / .q-select   13 px · 38 px de alto · Inter   (Design System)
 *   .form-control          12 px · 34 px · Nunito Sans     (styledoctor.css:63)
 *   .form-select           16 px · 38 px · Inter           (Bootstrap, sin tocar)
 *
 * Medido en `stocks`: los dos cuadros de texto en Nunito de 12 y el desplegable
 * TIPO en Inter de 16, uno al lado del otro. El de 16 es el que se ve enorme.
 *
 * La causa de las dos primeras es la de siempre: styledoctor.css declara
 * `.form-control { font-family: 'Nunito Sans' !important; font-size: 12px !important }`
 * para toda la aplicación, y `.form-select` no aparece en esa regla, así que se
 * queda con el 1rem de Bootstrap. Nadie decidió que un filtro midiera 16 y el de
 * al lado 12: es lo que quedó al no cubrir las dos clases en el mismo sitio.
 *
 * Aquí los tres pasan a la misma medida, la del Design System, en tokens.
 *
 * POR QUÉ NO SE BORRA LA REGLA DE styledoctor
 * Porque también viste la pantalla de ACCESO, que está fuera de `.content` y no
 * tiene Design System. Esta hoja se limita a `.content` —la aplicación— y deja el
 * login como estaba. Es la única razón por la que aquí se tolera una duplicidad.
 *
 * QUÉ NO ES
 * No sustituye a migrar el marcado a `.q-input`/`.q-select`. Iguala las familias
 * mientras esa migración no se termine; cuando se termine, este archivo se borra.
 * ================================================================ */

/* ── Tipografía y altura ──────────────────────────────────────────────────────
   El relleno NO se toca: `.form-select` reserva sitio a la derecha para su flecha
   —la dibuja como imagen de fondo, no el navegador— y unificarlo metería el texto
   por debajo de ella. */
.content .form-control,
.content .form-select,
/* Repetido con el mismo alcance que `modern.css:761`
   (`.content .card-body .q-form-h .form-control`, que deja los cuadros de texto en
   12 px y 32 px de alto mientras el desplegable de al lado se queda en 38). Con
   menos selectores esta hoja no llegaba: mismo empate de especificidad de siempre,
   y gana quien carga después. */
.content .card-body .q-form-h .form-control,
.content .card-body .q-form-h .form-select,
.content .q-panel__body .q-form-h .form-control,
.content .q-panel__body .q-form-h .form-select {
  font-family: var(--q-font-family) !important;
  font-size: var(--q-font-size-md, 13px) !important;
  height: var(--q-control-h, 38px) !important;
  line-height: 1.2 !important;
  color: var(--q-text-1) !important;
  border-radius: var(--q-input-radius, 6px) !important;
  padding: 0 var(--q-space-2, 8px) !important;
}
/* El desplegable recupera su hueco derecho: la flecha es imagen de fondo y sin ese
   relleno el texto se le mete debajo. */
.content .form-select,
.content .card-body .q-form-h .form-select,
.content .q-panel__body .q-form-h .form-select { padding: 0 36px 0 var(--q-space-2, 8px) !important; }

/* ── Etiquetas ────────────────────────────────────────────────────────────────
   `modern.css:758` deja las etiquetas de los formularios legacy en 10,5 px, 600 y
   MAYÚSCULAS, mientras las vistas del Design System usan `.q-label`: 12 px, 700 y
   caja normal. Son dos rótulos distintos para el mismo campo según la pantalla.
   Se toma como bueno el del Design System, que es el de `sales`. */
.content .card-body .q-form-h label:not(.q-label),
.content .q-panel__body .q-form-h label:not(.q-label) {
  font-size: var(--q-font-size-sm, 12px) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--q-text-2) !important;
}

/* Un textarea crece con su contenido: la altura fija de arriba lo dejaría de una
   línea. Mismo caso que en la hoja de modales. */
.content textarea.form-control { height: auto !important; }

/* Los campos de sólo lectura (fechas con calendario, correlativos) siguen siendo
   campos: se distinguen por el fondo, no por una letra distinta. */
.content .form-control[readonly]:not([type="hidden"]) { background: var(--q-surface-2, #F1F5F9) !important; }