/*!
 * QUIPU Design System — BOTONES DE BARRA (fuente única)
 * Version: 1.0.1  ·  Build: 2026-09-05  ·  UPG-ICO-002
 * ================================================================
 * QUÉ PROBLEMA RESUELVE
 * La aplicación tiene dos familias de botón conviviendo: `.q-btn` del Design
 * System en las 18 vistas ya migradas, y `.btn` de Bootstrap en las ~50 que no.
 * Se veían distintas —34 px de alto contra 38, radio 6 contra 8, ancho 90 contra
 * 120— y la diferencia no venía de una decisión sino de que la MISMA regla estaba
 * escrita CINCO veces, en cinco sitios, con valores parecidos pero no iguales:
 *
 *   1. modern.css:587          el botón como círculo de 42 px (el punto de partida)
 *   2. report-view.css         lo restablecía como botón de texto de 34 px
 *   3. layout.php <style>      lo mismo otra vez, para `.card:has(.rv-tabs)`
 *   4. layout.php <style>      lo mismo otra vez, regla general (0,3,1 → ganaba)
 *   5. modern.css:1194         y aparte, POR ID: #btnNuevo y #modalagregar a 76 px,
 *                              #btnExportar a 95 px y en cuerpo 12
 *
 * Con cinco copias, editar una no cambiaba nada: mandaba la de más especificidad,
 * y un id gana a cualquier clase. Eso es exactamente lo que pasó al intentar
 * igualar el `gap` en report-view.css, y por qué en una misma barra Buscar medía
 * 120 px y Nuevo 76.
 *
 * Este archivo es ahora la ÚNICA definición. Las copias 2, 3 y 4 se retiraron y
 * dejaron una nota apuntando aquí. La 1 y la 5 se quedan donde están —definen el
 * punto de partida del tema— y esta hoja las sobreescribe cargando después.
 *
 * QUÉ NO ES
 * No sustituye a migrar el marcado de las ~50 vistas legacy a `.q-btn`. Iguala
 * las dos familias mientras esa migración no se termine; cuando se termine, este
 * archivo se borra entero y no queda deuda.
 *
 * Los valores no se escriben a mano: salen de los tokens del Design System, para
 * que cambiar el token cambie las dos familias a la vez.
 * ================================================================ */

/* ── Geometría ────────────────────────────────────────────────────────────────
   `.btn-sm` (acciones de fila), `.w-100` (botones de bloque) y los cierres de
   modal quedan fuera a propósito: no son botones de barra. */
.content .card-body .btn:not(.btn-sm):not(.w-100):not([data-bs-dismiss]),
.content .q-panel__body .btn:not(.btn-sm):not(.w-100):not([data-bs-dismiss]),
.card:has(.rv-tabs) .q-form-h .btn:not(.btn-sm):not(.w-100):not([data-bs-dismiss]),
/* Y los cuatro que modern.css:1194 dimensiona POR ID —`#btnNuevo` y `#modalagregar`
   a 76 px con relleno asimétrico, `#btnExportar` a 95 px y en cuerpo 12— saltándose
   las dos familias. Era la quinta copia de la misma decisión, y la que hacía que en
   una misma barra Buscar midiera 120 y Nuevo 76. Un id gana a cualquier clase, así
   que aquí se repiten con `.content` delante para poder igualarlos. */
.content #btnBuscar, .content #btnLimpiar,
.content #btnNuevo, .content #modalagregar,
.content #btnExportar, .content #btnImportar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--q-space-2, 8px) !important;
  width: auto !important;
  min-width: var(--q-btn-minw-m, 120px) !important;
  height: var(--q-btn-h-m, 38px) !important;
  padding: 0 var(--q-space-4, 16px) !important;
  border-radius: var(--q-btn-radius, 8px) !important;
  font-size: var(--q-font-size-md, 13px) !important;
  font-weight: var(--q-font-weight-bold, 600) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ── La única excepción al ancho mínimo: la barra de bandeja ──────────────────
   `.q-toolbar__actions` es una variante del Design System, no un descuido: lleva
   hasta cinco botones a la derecha de la fila de filtros y su regla dice «ancho
   según contenido». Forzarle 120 px la hacía envolver en dos filas —medido en
   proveedores (506 px de columna) y en órdenes de compra (607 px)—.
   Se respeta el ancho, y sólo el ancho: alto, radio, hueco y tipografía siguen
   siendo los mismos. La barra queda homogénea CONSIGO MISMA, que es lo que se
   compara al mirarla; entre pantallas cambia el ancho, no la forma. */
.content .q-toolbar__actions #btnBuscar, .content .q-toolbar__actions #btnLimpiar,
.content .q-toolbar__actions #btnNuevo,  .content .q-toolbar__actions #modalagregar,
.content .q-toolbar__actions #btnExportar, .content .q-toolbar__actions #btnImportar,
.content .q-toolbar__actions .btn, .content .q-toolbar__actions .q-btn {
  min-width: auto !important;
  padding: 0 var(--q-space-3, 12px) !important;
}

/* El icono no lleva margen propio: la separación con el rótulo la da el `gap`.
   Un `margin-right` aquí se SUMARÍA al gap y volvería a descuadrar las familias. */
.content .card-body .btn .bi, .content .card-body .btn em,
.content .q-panel__body .btn .bi, .content .q-panel__body .btn em,
.card:has(.rv-tabs) .q-form-h .btn .bi,
.card:has(.rv-tabs) .q-form-h .btn em { margin: 0 !important; }

/* ── Separación ENTRE botones ─────────────────────────────────────────────────
   Antes la daba una suma inestable: el espacio en blanco del marcado (~4 px si
   los botones van en líneas distintas, 0 si van pegados) más el `gap` que cada
   hoja le pusiera al contenedor. Por eso la barra se veía desigual según cómo
   estuviera escrito el HTML de cada vista.

   Perseguir esas reglas una a una no acaba: hay al menos tres que dan `gap` al
   CONTENEDOR (7 px, 8 px o ninguno según la vista) y el espacio en blanco del
   marcado suma otros ~4 px cuando el contenedor no es flex. En vez de eso, la
   barra se declara aquí como lo que es —un contenedor flex con un hueco— y los
   botones dejan de llevar margen propio. Así el hueco es UNO y no una suma.

   `:has(> #btnBuscar)` identifica la barra por su contenido, que es lo único
   estable: el contenedor no tiene clase propia en la mayoría de las vistas —es un
   `col-md-*` cualquiera— y ponérsela a las 68 sería el trabajo que este archivo
   evita. El selector ya se usa en modern.css, así que no añade requisitos nuevos. */
.content div:has(> #btnBuscar),
.content .q-toolbar__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--q-space-2, 8px) !important;
}
.content div:has(> #btnBuscar) > .btn,
.content div:has(> #btnBuscar) > .q-btn,
.content div:has(> #btnBuscar) > a,
.content .q-toolbar__actions > .btn,
.content .q-toolbar__actions > .q-btn { margin: 0 !important; }

/* Fuera de una barra reconocible, el margen sigue haciendo falta. */
.content .card-body .btn:not(.btn-sm):not(.w-100):not([data-bs-dismiss]),
.content .q-panel__body .btn:not(.btn-sm):not(.w-100):not([data-bs-dismiss]),
.content .q-btn:not(.q-btn--s):not([data-bs-dismiss]) {
  margin: 0 var(--q-space-2, 8px) var(--q-space-2, 8px) 0;
}
/* ── El pie del modal ─────────────────────────────────────────────────────────
   Aqui habia un `.modal .q-btn, .modal .btn { margin: 0 }` que era mio y estaba
   mal: lo puse para que el margen de la barra de acciones no se colara en los
   modales, pero se llevo por delante la unica separacion que tenian sus botones.
   `design-system-modals.css` se la daba con `margin-left` sobre `.btn`, y los
   `.q-btn` -que son los del formulario de cliente- no entraban en esa regla, asi
   que Guardar y Cerrar quedaron pegados.

   La separacion la da ahora el `gap` del pie, que es flex desde Bootstrap 5, y no
   un margen por boton: asi vale para las dos familias y no depende de cual sea el
   ultimo. De paso se iguala el alto — la hoja de modales pone 40 px a `.btn` y el
   Design System 38 a `.q-btn`, y en el mismo pie se notaba.

   El hueco es 16 y no los 8 de una barra de herramientas, a proposito: en una
   barra los botones hacen cosas parecidas y conviene que se lean como un grupo,
   pero aqui Guardar y Cerrar son opuestos y equivocarse cuesta el formulario
   entero. Es el mismo motivo por el que la barra lleva separador entre el grupo
   que filtra y el que actua. Para apretarlo, este token y nada mas. */
.modal-footer { gap: var(--q-space-4, 16px) !important; }
.modal-footer .btn,
.modal-footer .q-btn {
  margin: 0 !important;
  height: var(--q-btn-h-m, 38px) !important;
}