/*
 * Los componentes del backoffice de JapoPrint.
 * ===========================================================================
 *
 * Obra propia de JAPOPRINT E.A.S. Reemplaza la capa de componentes del tema
 * comercial que integró el proveedor original y del que no hay constancia de
 * licencia. Ver NOTICE.
 *
 * ===========================================================================
 * POR QUE ESTO ES UNA HOJA DE ESTILOS Y NO 56 PLANTILLAS REESCRITAS
 * ===========================================================================
 *
 * Las plantillas del panel usan NOMBRES DE CLASE: `card`, `btn`, `badge`. No
 * les importa quién los define. Si esos mismos nombres quedan definidos acá,
 * las plantillas siguen funcionando sin tocarles una línea.
 *
 * Eso convierte un trabajo de 56 archivos en uno de un archivo, y —lo que
 * importa más— hace que el cambio sea REVERSIBLE de a pedazos: se puede sacar
 * una familia por vez y comprobarla, en vez de cambiar todo y rezar.
 *
 * ===========================================================================
 * LAS MEDIDAS NO SON INVENTADAS
 * ===========================================================================
 *
 * Cada alto, cada padding y cada radio salió de medir lo que el panel hace
 * HOY. No es un rediseño: es la misma pantalla, escrita de nuestro lado. Un
 * rediseño obligaría a mirar 51 pantallas preguntándose si el cambio es un
 * error o una decisión; así, cualquier diferencia es un error.
 *
 * Los colores salen de `--tw-*`, que las genera nuestro propio
 * `herramientas/estilos/`. No hay ningún valor de color escrito acá.
 *
 * ===========================================================================
 * QUE FALTA
 * ===========================================================================
 *
 * Esta primera entrega cubre TARJETAS, BOTONES y ETIQUETAS: 1.425 de los
 * 1.607 usos del panel. Faltan tablas, formularios y el menú lateral, que
 * van después y por separado, con su propia verificación.
 */

/* ===========================================================================
   Los colores, tal como los usa el panel hoy
   ===========================================================================

   Se declaran acá y no en el generador porque son de LECTURA para estas
   reglas: las utilitarias las genera Tailwind con los mismos valores, desde
   `herramientas/estilos/colores.json`. Si algún día cambian, se cambian en
   ese archivo y se regenera; esto de abajo los toma de ahí.

   Están en un solo lugar para que no haya un hex suelto en el medio de una
   regla, que es como una paleta deja de ser una paleta. */

:root {
  /* ══════════════════════════════════════════════════════════════════
     LOS GRISES VAN DEL FONDO AL NEGRO DE MARCA
     ══════════════════════════════════════════════════════════════════

     El 900 era #071437, un azul marino del template. Ahora es #231F20, el
     negro cálido de imprenta que fija la biblia — y que es el mismo con el
     que está pintada la palabra «Japo» del logo.

     El 500 sigue siendo el gris azulado de marca, a propósito: es el que la
     web del cliente eligió para el texto secundario. Ver `colores.json`. */
  --jp-gray-100: #F7FAF8;
  --jp-gray-200: #EEF2F0;
  --jp-gray-300: #DFE5E2;
  --jp-gray-400: #A2AAAE;
  --jp-gray-500: #666F7B;
  --jp-gray-600: #565F63;
  --jp-gray-700: #46504C;
  --jp-gray-800: #343736;
  --jp-gray-900: #231F20;

  /* ══════════════════════════════════════════════════════════════════
     EL VERDE DE JAPOPRINT, NO EL AZUL DEL TEMPLATE
     ══════════════════════════════════════════════════════════════════

     Hasta el 11/09/2026 esto decia #1B84FF: el azul que trae el template
     comprado. Se llamaba `--jp-primary` y no tenia nada de JapoPrint.
     Fernando: *«que la pagina web, todos tengan la marca de Japoprint»*.

     🔴 SON DOS VERDES Y NO SE INTERCAMBIAN. La regla ya esta escrita en la
     web del cliente (japoprint-web/src/app/globals.css) y se respeta aca:

       · #4FB848 es de RELLENO. Sobre blanco da 2,5:1 y el minimo legible es
         4,5:1, asi que va en botones, barras y casilleros, con el texto en
         BLANCO encima. Nunca como color de letra.
       · #0C4228 es el de TEXTO. Da 11:1 sobre blanco.

     Por eso hay una variable para cada uno: quien escriba una regla nueva
     no tiene que acordarse de la regla, le alcanza con elegir el nombre. */
  --jp-primary: #4FB848;
  --jp-primary-activo: #43A13D;
  --jp-primary-suave: #EDF6F1;
  --jp-verde-texto: #0C4228;

  /* ══════════════════════════════════════════════════════════════════
     AVISAR NO ES UN COLOR LIBRE
     ══════════════════════════════════════════════════════════════════

     La biblia de marca lo dice sin vueltas: «No usar colores fuera de la
     paleta. Ni siquiera verdes parecidos.» Los tres que quedaban eran del
     template — un verde casi igual al nuestro, un violeta y un rosa
     fuerte — y los tres se fueron.

     El cambio arregla algo que además no se veía:

       · `text-danger`  se usa 82 veces. Con #F8285A daba 3,6:1 sobre
         blanco. Ahora da 6,3:1.
       · `text-warning` se usa 30 veces. Con #F6B100 daba 1,9:1, o sea que
         era casi invisible. Ahora da 5,6:1.

     El mínimo legible es 4,5:1: los dos estaban debajo, y nadie lo avisaba
     porque un color no falla. */
  --jp-danger: #A93A26;
  --jp-danger-activo: #8C2F1F;
  --jp-danger-suave: #F8E5E0;
  --jp-success: #4FB848;
  --jp-success-activo: #43A13D;
  --jp-success-suave: #EDF6F1;
  --jp-warning: #8A6014;
  --jp-warning-activo: #6F4D10;
  --jp-warning-suave: #F7EDD6;
  --jp-info: #0C4228;
  --jp-light: #ffffff;

  --jp-tarjeta-fondo: #ffffff;
  --jp-tarjeta-borde: 1px solid var(--jp-gray-200);
  --jp-tarjeta-sombra: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}

/* ===========================================================================
   TARJETAS — 549 usos, la familia más grande del panel
   ===========================================================================

   Casi todo el panel es una tarjeta: cada bloque del tablero, cada listado,
   cada ficha. Si esta familia queda bien, queda bien un tercio de todo. */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--jp-tarjeta-fondo);
  border: var(--jp-tarjeta-borde);
  border-radius: 0.75rem;
  box-shadow: var(--jp-tarjeta-sombra);
}

.card-header {
  display: flex;
  /* Alto MINIMO y no fijo: hay encabezados con un botón adentro y otros con
     dos renglones de texto. Con alto fijo, esos se desbordan. */
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: var(--jp-tarjeta-borde);
  padding: 0 1.875rem;
}

.card-title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--jp-gray-900);
  margin: 0;
}

.card-body {
  flex-grow: 1;
  padding: 1.25rem 1.875rem;
}

.card-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* La variante para tablas: el listado va pegado al borde de la tarjeta,
   porque una tabla con margen adentro de una tarjeta se ve como un error de
   maquetación y desperdicia el ancho, que en un listado es lo que falta. */
.card-grid .card-header,
.card-grid .card-footer {
  padding: 0 1.25rem;
}

.card-grid .card-body {
  padding: 0;
}

/* ===========================================================================
   BOTONES — 499 usos
   ===========================================================================

   `inline-flex` y no `inline-block`: casi todos llevan un icono al lado del
   texto, y con `inline-block` el icono se apoya en la línea de base y queda
   dos píxeles más abajo que la palabra. Con flex quedan centrados entre sí
   sin tener que corregir nada en cada botón. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:disabled,
.btn.disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Que se vea a dónde va el foco. Sin esto, quien navega con el teclado no
   sabe qué botón está por apretar. */
.btn:focus-visible {
  outline: 2px solid var(--jp-primary);
  outline-offset: 2px;
}

.btn-sm {
  height: 2rem;
  padding: 0 0.75rem;
  gap: 0.275rem;
  font-size: 0.75rem;
}

/* El cuadrado con un icono adentro y nada más. */
.btn-icon {
  flex-shrink: 0;
  width: 2.5rem;
  padding: 0;
  gap: 0;
}

.btn-sm.btn-icon,
.btn-icon.btn-sm {
  width: 2rem;
}

.btn-primary {
  color: #fff;
  background-color: var(--jp-primary);
  border-color: var(--jp-primary);
}
.btn-primary:hover { background-color: var(--jp-primary-activo); border-color: var(--jp-primary-activo); }

.btn-light {
  color: var(--jp-gray-700);
  background-color: var(--jp-light);
  border-color: var(--jp-gray-300);
}
.btn-light:hover { background-color: var(--jp-gray-100); }

.btn-success { color: #fff; background-color: var(--jp-success); border-color: var(--jp-success); }
.btn-danger  { color: #fff; background-color: var(--jp-danger);  border-color: var(--jp-danger); }

/* Los tres botones de color reaccionan igual al pasar por encima.
   Hasta el 11/09/2026 sólo lo hacía el primario, y un botón que no
   reacciona se lee como apagado. Lo encontró la prueba que busca
   variables declaradas y sin usar: `--jp-success-activo` y
   `--jp-danger-activo` existían y no los pedía nadie. */
.btn-success:hover { background-color: var(--jp-success-activo); border-color: var(--jp-success-activo); }
.btn-danger:hover  { background-color: var(--jp-danger-activo);  border-color: var(--jp-danger-activo); }
.btn-warning { color: #fff; background-color: var(--jp-warning); border-color: var(--jp-warning); }

/* Sin fondo ni borde: para las acciones que no compiten con la principal.
   Un botón secundario que se ve igual de importante que el principal deja al
   que mira sin saber cuál apretar. */
.btn-clear {
  background-color: transparent;
  border-color: transparent;
  color: var(--jp-gray-700);
}
.btn-clear:hover { background-color: var(--jp-gray-100); }

.btn-active { background-color: var(--jp-gray-200); }

/* ===========================================================================
   ETIQUETAS — 377 usos
   ===========================================================================

   Son los estados: «Pagado», «Sin comunicación», «3 para atender». Van
   siempre al lado de un texto, así que `inline-flex` y `line-height: 1`, para
   que no estiren el renglón donde viven. */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  /* 0.6875rem, medido: la primera version puso 0.75 y las etiquetas salian
     un punto mas grandes que en el tema. */
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  /* ESTO SE APARTA DEL TEMA VIEJO A PROPOSITO.
     Sin esto, en las columnas angostas de las tablas las etiquetas se parten
     al medio: "Pago / Confirmado", "Sin / definir". El tema comprado tambien
     lo hacia -se ve en las capturas de referencia-, pero es feo y Fernando
     pidio el 25/08/2026 que el panel quede mejor, no igual.
     Es la unica divergencia deliberada del reemplazo. */
  white-space: nowrap;
  /* SIN `white-space: nowrap`, y fue una correccion. La primera version se lo
     puso por prolijidad -"una etiqueta no deberia partirse"- y el tema no lo
     tiene. La diferencia no es estetica: en la lista de impresiones "Pago
     Confirmado" se parte en dos renglones, la fila crece unos pixeles, y esos
     pixeles se suman fila por fila hasta correr media pantalla. Se vio
     comparando las 49 capturas y no antes. */
  /* EL COLOR POR OMISION FALTABA, y no se ve hasta que hay una etiqueta sin
     variante. `<span class="badge badge-sm">` -113 usos- salia con fondo
     transparente y letra heredada; en el tema es una pastilla gris. Se vio
     comparando la lista de impresiones: el estado de cada fila habia perdido
     el fondo. `badge-secondary`, que las plantillas usan 11 veces, tampoco
     esta definida en el tema comprado: cae en este mismo gris, y por eso no
     hace falta reponerla. */
  color: var(--jp-gray-700);
  background-color: var(--jp-gray-200);
}

.badge-sm { padding: 0.3125rem 0.375rem; font-size: 0.6875rem; }
.badge-lg { padding: 0.625rem 0.75rem; font-size: 0.8125rem; }

.badge-primary { color: #fff; background-color: var(--jp-primary); }
.badge-success { color: #fff; background-color: var(--jp-success); }
.badge-danger  { color: #fff; background-color: var(--jp-danger); }
.badge-warning { color: #fff; background-color: var(--jp-warning); }
.badge-info    { color: #fff; background-color: var(--jp-info); }

.badge-light {
  color: var(--jp-gray-700);
  background-color: var(--jp-gray-100);
  border-color: var(--jp-gray-200);
}

/* Las suaves: fondo tenue y letra del color. Se usan cuando la etiqueta
   acompaña y no avisa — un fondo pleno rojo repetido veinte veces en una
   lista deja de significar «mirá esto». */
/* La letra va en el verde OSCURO: el claro sobre un fondo claro no se
   lee. Ver la regla de los dos verdes arriba. */
.badge-light-primary { color: var(--jp-verde-texto); background-color: var(--jp-primary-suave); }
.badge-light-warning { color: var(--jp-warning-activo); background-color: var(--jp-warning-suave); }
.badge-light-danger  { color: var(--jp-danger); background-color: var(--jp-danger-suave); }
.badge-light-success { color: var(--jp-verde-texto); background-color: var(--jp-success-suave); }

.badge-outline {
  background-color: transparent;
  border-color: var(--jp-gray-300);
  color: var(--jp-gray-700);
}

/* ===========================================================================
   TABLAS — 36 usos, y estaban sin reponer
   ===========================================================================

   No aparecían en el inventario de lo que faltaba, y el motivo es una trampa
   que conviene dejar escrita: TAILWIND TAMBIEN DEFINE `.table`, como el
   utilitario `display: table`. El chequeo automático la vio definida en
   nuestro CSS y la dio por cubierta. Estaba cubierto el nombre, no el
   componente.

   Se descubrió comparando las 49 capturas: todo coincidía salvo que las
   celdas no tenían relleno y las filas quedaban apretadas una contra otra.

   TRES CLASES DE ESTA FAMILIA NO SE REPONEN, y no es un olvido:
   `table-responsive`, `table-row-bordered` y `table-row-gray-*` se usan en
   las plantillas y NO ESTAN DEFINIDAS tampoco en el tema comprado. Hoy no
   hacen nada. Reponerlas sería agregar comportamiento que el panel nunca
   tuvo, justo en la pasada donde lo que se busca es que nada cambie. */

.table {
  width: 100%;
  caption-side: bottom;
  border-collapse: collapse;
  vertical-align: middle;
  text-align: left;
  color: var(--jp-gray-700);
  font-weight: 500;
  font-size: 0.875rem;
}

.table thead td,
.table thead th,
.table tfoot td,
.table tfoot th {
  background-color: var(--jp-gray-100);
  color: var(--jp-gray-600);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  vertical-align: middle;
  padding: 0.625rem 1rem;
}
.table thead td,
.table thead th {
  border-bottom: 1px solid var(--jp-gray-200);
}
.table tfoot td,
.table tfoot th {
  border-top: 1px solid var(--jp-gray-200);
}

.table tbody {
  vertical-align: inherit;
}
.table tbody tr td,
.table tbody tr th {
  border-bottom: 1px solid var(--jp-gray-200);
  padding: 0.75rem 1rem;
}
/* La última fila no lleva línea abajo: la cierra el borde de la tarjeta. */
.table tbody tr:last-child td,
.table tbody tr:last-child th {
  border-bottom: 0;
}

/* Las esquinas de arriba, para que el encabezado gris no sobresalga del
   redondeo de la tarjeta que lo contiene. */
.table th:first-child {
  border-start-start-radius: 0.75rem;
}
.table th:last-child {
  border-start-end-radius: 0.75rem;
}

/* Dentro de una tarjeta de listado la tabla va pegada al borde, así que la
   primera y la última columna necesitan un poco más de aire. */
.card-grid .card-body .table {
  border: 0;
}
.card-grid .card-body .table th:first-child,
.card-grid .card-body .table td:first-child {
  padding-inline-start: 1.25rem;
}
.card-grid .card-body .table th:last-child,
.card-grid .card-body .table td:last-child {
  padding-inline-end: 1.25rem;
}

/* ===========================================================================
   DESPLEGABLE
   ===========================================================================

   Un bloque que se abre y se cierra: un formulario que no tiene por que estar
   ocupando lugar hasta que alguien lo necesita.

   POR QUE ESTO Y NO UNA VENTANA MODAL

   Porque este panel NO TIENE ventanas modales, y descubrirlo costo una
   pantalla rota. El 26/08/2026 escribi tres formularios con el patron
   `data-modal` del tema comprado que se saco en agosto. Sin ese tema no hay
   ni CSS que los esconda ni javascript que los abra, asi que los tres
   quedaron DIBUJADOS EN EL MEDIO DE LA PAGINA, siempre visibles. Se vio en
   una captura del inventario, no en una prueba: una plantilla que renderiza
   de mas no falla, solo queda fea.

   `<details>` es del navegador. No hay javascript que pueda no cargar, ni
   clase que dependa de un tema. Se abre con teclado, lo lee un lector de
   pantalla, y funciona igual el dia que no ande nada mas.
   =========================================================================== */

.desplegable {
  border: 1px solid var(--jp-gray-200);
  border-radius: 0.75rem;
  background: #fff;
}

.desplegable > summary {
  cursor: pointer;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--jp-gray-800);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* El triangulito de Safari y el de Chrome se quitan distinto. */
.desplegable > summary::-webkit-details-marker { display: none; }

/* La flecha propia, que gira al abrir. Es un caracter y no un icono: no
   depende de que la tipografia de iconos haya cargado. */
.desplegable > summary::before {
  content: "\203A";
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .15s ease;
  color: var(--jp-gray-500);
  font-size: 1rem;
  line-height: 1;
}
.desplegable[open] > summary::before {
  transform: rotate(-90deg);
}

.desplegable > summary:hover { background: var(--jp-gray-100); }

.desplegable[open] > summary {
  border-bottom: 1px solid var(--jp-gray-200);
}

.desplegable-cuerpo {
  padding: 0.875rem;
  display: grid;
  gap: 0.75rem;
}

/* ==========================================================================
   ALERTA QUE SE PUEDE ATENDER
   ==========================================================================

   Cada linea de «Requiere atencion» es un enlace a la pantalla que la
   resuelve. Tiene que NOTARSE que se puede tocar, y no puede perder el color
   de su gravedad: ese color es la informacion.

   Por eso el aviso de "esto se toca" es un anillo alrededor y no un cambio de
   fondo. El fondo ya esta diciendo si es grave.

   NO SE USA UNA UTILIDAD DE TAILWIND. La primera version puso
   `hover:brightness-95`, que no existe en nuestra hoja -el filtro de brillo no
   esta compilado- y no hacia absolutamente nada. Un enlace que no se distingue
   de un cartel no se toca nunca. */

.alerta-atender {
  text-decoration: none;
  transition: box-shadow .15s ease;
}

.alerta-atender:hover {
  box-shadow: 0 0 0 2px rgba(79, 184, 72, .35);
}

/* La flechita de "atender" se acerca al pasar por encima. Es el unico
   movimiento de la pantalla y esta ahi para que se entienda que lleva a otro
   lado. */
.alerta-atender .alerta-flecha {
  transition: margin-inline-start .15s ease;
}

.alerta-atender:hover .alerta-flecha {
  margin-inline-start: 0.25rem;
}

/* ==========================================================================
   TARJETA QUE SE PUEDE TOCAR
   ==========================================================================

   Una `card` que ademas es un enlace: los filtros de «Cosas por hacer», las
   tarjetas de relevamiento. Se levanta un poco al pasar por encima para que
   se entienda que lleva a otro lado.

   VIVE ACA Y NO COMO UTILIDAD. Estaba escrito `hover:shadow-md`, que es
   Tailwind de verdad pero NO esta en nuestra hoja: utilidades.css es un build
   ya hecho y solo tiene lo que estaba escrito el dia que se compilo. O sea
   que esas seis tarjetas no reaccionaban a nada. Ver el bloque ALERTA QUE SE
   PUEDE ATENDER, que es el mismo caso. */

.card-tocable {
  transition: box-shadow .15s ease;
}

.card-tocable:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

/* ===========================================================================
   CONTAR LO QUE HAY: los + y los − del inventario
   ===========================================================================

   🔴 ESTOS ESTILOS NO EXISTIAN, Y LA PANTALLA ERA ILEGIBLE.

   La plantilla se escribio el 28/09/2026 con estas clases y **nadie escribio
   el CSS**. Sin estilo, cada `div` y cada `form` ocupa su propio renglon: el
   nombre, el «En la maquina», el −, el numero, el +, el «En el cajon», el −,
   el numero, el +... uno debajo del otro. Un punto con tres articulos ocupaba
   media pantalla y no se entendia que el − y el + eran del numero de al lado.

   Lo vio Fernando en la pantalla: «casi todo bien pero esto esta horrible».

   Y no lo vio ninguna verificacion mia: conte los 156 botones y confirme que
   estuvieran, sin mirar COMO se veian. Contar elementos no es mirar la
   pantalla.

   La forma es una sola fila por articulo:

       Hojas A4            En la maquina  [−] 2 [+]   En el cajon  [−] 4 [+]
       1 resma = 500
*/

.paquetes-renglon {
  padding: 0.5rem 0;
  border-top: 1px solid var(--jp-gray-200);
}

.paquetes-renglon:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* El nombre y cuanto trae el paquete, en UNA linea. Medido: la tarjeta de un
   punto mide ~200 px porque van tres al ancho de la pantalla, asi que poner
   los dos lugares al lado del nombre no entra nunca. */
.paquetes-nombre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

/* Un renglon por lugar: la etiqueta a la izquierda, los controles a la
   derecha. Es lo unico que entra en 200 px sin partir el − numero +. */
.paquetes-lugar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.125rem 0;
}

/* Los formularios son de a uno por boton -ver la nota de la plantilla- y sin
   esto cada uno cortaria la linea. */
.paquetes-lugar form {
  display: inline-flex;
  margin: 0;
}

/* Los tres controles, pegados entre si y separados de la etiqueta. */
.paquetes-lugar > form,
.paquetes-lugar > .paquetes-cuenta {
  flex: 0 0 auto;
}

.paquetes-lugar > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El numero en el medio, ancho fijo para que los botones no se muevan al
   pasar de 9 a 10. Tabular para que las cifras no bailen. */
.paquetes-cuenta {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--jp-gray-900);
}

/* Cuadrados, del tamaño de un dedo: esto se toca de pie frente al cajon. */
.paquetes-boton {
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--jp-gray-700);
  background: #fff;
  border-color: var(--jp-gray-300);
}

.paquetes-boton:hover {
  background: var(--jp-primary-suave);
  border-color: var(--jp-primary);
  color: var(--jp-verde-texto);
}

/* El formulario de «Agregar factura». Cuatro campos en columna, etiqueta
   arriba: se llena de una sola pasada y en el celular no hay otra forma. */
.factura-a-mano {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 22rem;
}

.factura-a-mano label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.factura-a-mano label > span {
  font-size: 0.75rem;
  color: var(--jp-gray-600);
}

.factura-a-mano input {
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--jp-gray-300);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}

.factura-a-mano input:focus {
  outline: 2px solid var(--jp-primary);
  outline-offset: -1px;
  border-color: var(--jp-primary);
}

.factura-a-mano button { align-self: flex-start; }