/* =========================================================================
   diseno-facturar.css — nació como prueba de diseño el 16/9/2026; desde el
   6/10/2026 es la cara de Facturar en el frontend v3 (fase 2).
   Facturar (#facturar) y Proforma nueva (#proformaNueva): la misma pantalla.
   Todo acotado a `.facturar` (o a `.fac-comprobante`, que vive en su modal).
   Usa los tokens y la escala de diseno.css.

   LA PANTALLA, POR BLOQUES (sugerencia 5 de la auditoría del 3/10, «aceptada»
   por Mario el 4/10): los datos del documento arriba, compactos, y debajo
   Cliente → Líneas → Totales → Opciones adicionales, en ese orden.
   ========================================================================= */

/* ----------------------------------------------------------- la rejilla -- */
/* Lo que se pega es el bloque entero, no cada pieza que se llama `.totales`
   (el cuadrito del desglose y su cuerpo): estilo.css las pegaba arriba. */
.facturar .tarjeta.totales,
.facturar .cuerpo.totales { position: static; }

/* ------------------------------------------------------- la cabecera -- */
.facturar > .fac-cabecera { grid-column: 1 / -1; margin-bottom: 0; align-items: center; }
.facturar > .fac-cabecera h1 { font-size: 24px; }
.facturar .fac-tipos button { white-space: nowrap; }

/* «Otro…» sin apretar: el selector del tipo no hace falta (las pestañas lo
   dicen). Con una nota, recibo o proforma, se ve. */
.facturar[data-otro-tipo="no"] .caja-tipo { display: none; }

.facturar > .fac-franja-proforma {
  grid-column: 1 / -1;
  background: var(--gris-suave);
  color: var(--tenue);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  letter-spacing: .01em;
}
.facturar > .fac-franja-proforma[hidden] { display: none; }
/* La barra de la caja (plan Comercio, 30/9/2026; spec §6): el estado de la
   caja escogida y su botón, a todo el ancho y arriba del documento, como la
   franja de la proforma. En ámbar cuando de contado no se puede vender
   (cerrada, o abierta desde otro día). El botón va solo con texto. */
.facturar > .fac-barra-caja {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
}
.facturar > .fac-barra-caja.alerta { background: var(--alerta-suave); color: var(--alerta); }
.facturar > .titulo-proforma { font-family: var(--fuente-titulo); color: var(--azul); margin-bottom: 0; }
/* Azul del ícono y centrado (Mario, 16/9/2026: «color azul o alguno que
   resalte bastante»); en oscuro, el azul claro del tema. */

/* ------------------------------------------------ los datos del documento -- */
/* Una franja compacta: el tipo, la condición, la moneda y la actividad (v3,
   6/10/2026). El cliente vivía debajo, en esta misma tarjeta; ahora tiene su
   bloque, así que la franja ya no lleva raya de abajo. */
.facturar .tarjeta { border-radius: var(--radio-grande); box-shadow: var(--sombra-chica); }
.facturar .fac-documento .cabecera-doc {
  background: var(--papel);
  border-bottom: 0;
  border-radius: var(--radio-grande);
  padding: var(--e-3) 18px;
  gap: var(--e-3) 20px;
}
.facturar .cabecera-doc label,
.facturar .caja-sin-correo .rotulo-caja {
  font-size: 12px;
  font-weight: 600;
  color: var(--tenue);
}
/* LA ACTIVIDAD DEL EMISOR: EL CÓDIGO Y SU DESCRIPCIÓN JUNTOS, EN UN RENGLÓN
   (informe del 6/10/2026, ficha 31), igual que la del cliente desde el 16/9
   (Mario: «el nombre salir a un costado de el número […] y ahorramos
   espacio»). La descripción iba debajo del cuadrito y la franja medía un
   renglón de más. El cuadrito sigue siendo el que se abre para cambiarla. */
.facturar .cabecera-doc > .cuadrito-actividad.al-lado {
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px var(--e-3);
}
.facturar .cabecera-doc > .cuadrito-actividad.al-lado > p.nombre-actividad {
  margin: 0 0 9px;
  max-width: 300px;
  text-align: left;
}
.facturar .cabecera-doc > .cuadrito-actividad.al-lado > p.nombre-actividad:empty { display: none; }

/* --------------------------------------------- los bloques con su título -- */
/* Cliente → Líneas → Totales → Opciones adicionales (sugerencia 5 del 3/10,
   «aceptada» por Mario el 4/10). El título de cada bloque, más bajo que el de
   una tarjeta suelta: son cuatro en la misma pantalla. */
.facturar .tarjeta > h2 { padding: 10px 18px; }
.facturar .fac-cliente > .cuerpo { padding: var(--e-3) 18px; }

/* La casilla «No mandárselo por correo»: una pastillita que se marca. */
.facturar .caja-sin-correo > label.encasillado {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--papel-2);
  font-size: 13px;
  color: var(--texto);
  cursor: pointer;
}
.facturar .caja-sin-correo > label.encasillado:has(input:checked) {
  background: var(--ambar-suave);
  border-color: var(--ambar);
  color: var(--ambar);
}

/* ------------------------------------------------ el cliente escogido -- */
.facturar .cliente-elegido {
  background: var(--azul-suave);
  border: 1px solid color-mix(in srgb, var(--azul) 45%, transparent);
  border-radius: 12px;
  box-shadow: none;
  padding: 10px 14px;
}
.facturar .cliente-elegido > .entre { align-items: center; gap: 12px; }
.facturar .cliente-elegido .fac-nombre-cliente { font: 650 15px/1.3 var(--fuente-titulo); }
.facturar .cliente-elegido .nota { color: var(--tenue); }
/* «Este cliente tiene ₡… a favor.» (Mario, 7/10/2026): en el renglón del
   cliente, entre su nombre y los botones, para que el cuadrito no crezca cuando
   llega el dato y no empuje lo de abajo. Angosto, parte en dos renglones antes
   que correr de lado; en el teléfono (abajo) baja a su propio renglón. */
.facturar .cliente-elegido .fac-a-favor {
  flex: 0 1 auto;
  max-width: 30ch;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--ambar-suave);
  color: var(--texto);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
.facturar .cliente-elegido .fac-a-favor[hidden] { display: none; }
/* La identificación no se parte a media cédula: si no cabe en el renglón,
   baja entera (y si ni sola cabe, se parte en vez de salirse). */
.facturar .fac-identificacion { display: inline-block; }
.facturar .fac-iniciales {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--azul);
  color: var(--papel);
  font: 700 13.5px/1 var(--fuente-titulo);
  letter-spacing: .02em;
}
.facturar .cliente-elegido .boton.chico { background: var(--papel); }
/* La tecla del botón, pintada; el texto del botón no cambia. */
.facturar .boton[data-tecla]::after {
  content: attr(data-tecla);
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  opacity: .65;
}
.facturar .cliente-elegido .actividad-cliente { margin-top: 8px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--azul) 35%, transparent); }
.facturar .cliente-elegido .actividad-cliente:empty { display: none; }

/* ----------------------------------------------------------- las líneas -- */
/* LAS COLUMNAS (v3, 6/10/2026). Cada celda dice qué es (`fl-…`, facturar.js) y
   aquí va cuánto mide; lo que sobra se lo queda el artículo. Los anchos iban
   pegados en la celda (`style="width:92px"`) y así le ganaban a esta hoja: en
   el teléfono, donde cada línea es una tarjeta, no había cómo quitárselos.
   Cantidad, unidad e IVA van centrados —celda y encabezado por igual— y el
   precio y el total se leen como una columna de números (Mario, 25/8/2026);
   la del IVA mide lo que pide «₡1,000,000.00» con su lapicito (1/10/2026). */
.facturar .fac-lineas .fl-num { width: 34px; }
.facturar .fac-lineas td.fl-cantidad { width: 84px; }
.facturar .fac-lineas td.fl-unidad { width: 62px; }
.facturar .fac-lineas td.fl-precio { width: 168px; }
.facturar .fac-lineas td.fl-iva { width: 142px; }
.facturar .fac-lineas td.fl-iva .celda-editable { justify-content: center; }
/* El total de la línea, con la misma letra que el monto del IVA de al lado:
   en letra de máquina «₡1,000,000.00» pedía 30 px más que nadie. */
.facturar .fac-lineas td.fl-total { width: 118px; font-family: inherit; font-weight: 650; white-space: nowrap; }
.facturar .fac-lineas td.fl-acciones { width: 70px; }
/* Con nueve columnas, el aire entre ellas se le devuelve al artículo (informe
   del 6/10, ficha 31: «más ancho para el artículo»): a 1280 px el campo mide
   230 px con la columna del código puesta, donde antes medía 212 sin ella. */
.facturar .fac-lineas :is(th, td) { padding-left: 6px; padding-right: 6px; }
.facturar .fac-lineas tr > :first-child { padding-left: 12px; }
.facturar .fac-lineas tr > :last-child { padding-right: 10px; }
/* La columna del código (Mario, 6/10/2026: «entre el # y el nombre del artículo
   una columna de código»): angosta, en letra de código, y si el código es largo
   se parte en vez de empujar al artículo. */
.facturar .fac-lineas .fl-codigo { width: 88px; }
.facturar .fac-lineas .codigo-linea {
  font: 12.5px/1.3 var(--mono);
  color: var(--tenue);
  overflow-wrap: anywhere;
}
.facturar .fac-lineas td.fl-codigo { line-height: var(--alto-campo-fila); }
.facturar .fac-lineas td.fl-codigo .codigo-linea { display: inline-block; vertical-align: middle; }
/* El artículo ocupa su celda entera: es lo que más se lee de la línea. Y SE LEE
   ENTERO (Mario, 4/10/2026: «todo a la vista»; revisión del 7/10): en un campo
   de un renglón un nombre largo salía cortado («Instalación de equipo
   industrial de ejem») a 320, a 1280 y a 1700 px. Es un campo que crece con lo
   escrito: `field-sizing` lo ajusta a su contenido, así que con un nombre corto
   mide lo que la cantidad de al lado y con uno largo parte en renglones. Va
   centrado, como el campo de un renglón al que reemplaza: es el mismo cuadrito,
   no un párrafo. */
.facturar .fac-lineas td.fl-detalle > textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  field-sizing: content;
  resize: none;
  text-align: center;
}

.facturar .fac-lineas { overflow: visible; }
.facturar .fac-lineas .envoltorio-tabla { border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
.facturar .fac-lineas thead th { padding-top: 10px; padding-bottom: 10px; }
.facturar .fac-lineas td.numero,
.facturar .fac-lineas th.numero { font-variant-numeric: tabular-nums; }
/* TODO LO DE UNA FILA, EN EL CENTRO DE LOS CAMPOS (Mario, 1/10/2026: el
   «Total» quedaba ~9 px arriba del centro de los campos y el ⚙ y la × ~13 px
   abajo). La fila es tan alta como su celda más alta —el detalle, con el CAByS
   y el descuento debajo—, así que centrar en la celda (`middle`) o arrancar
   arriba con una línea de texto corta (`top`) no cae donde los campos. Todas
   las celdas arrancan arriba y lo suyo se centra en una franja del alto de un
   campo: el texto con ese alto de renglón, y lo que es una caja (el IVA, el ⚙ y
   la ×) con ese alto mínimo y `align-items: center`. */
.facturar .fac-lineas { --alto-campo-fila: 36px; }
.facturar .fac-lineas tbody td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
/* `:has(input)` se queda fuera: un campo hereda el interlineado y crecería. */
.facturar .fac-lineas tbody td.numero:not(:has(input)) { line-height: var(--alto-campo-fila); }
/* La pastilla de la unidad (32 px de alto con su relleno y su borde) es un
   bloque que se queda en el medio de la franja, no una caja en línea que se
   alinea con la letra de abajo. */
.facturar .fac-lineas .unidad-fija {
  display: block;
  width: fit-content;
  margin: calc((var(--alto-campo-fila) - 32px) / 2) auto 0;
  line-height: 24px;
}
.facturar .fac-lineas .celda-editable,
.facturar .fac-lineas td > .acciones {
  min-height: var(--alto-campo-fila);
  align-items: center;
}
.facturar .fac-lineas td > .acciones { flex-wrap: nowrap; }
/* El ⚙ y la ✕ de cada línea, discretos hasta que uno pasa por encima. */
.facturar .fac-lineas td:last-child .icono-editar {
  border-color: transparent;
  background: transparent;
  opacity: .55;
}
.facturar .fac-lineas tr:hover td:last-child .icono-editar,
.facturar .fac-lineas td:last-child .icono-editar:focus-visible { opacity: 1; }
.facturar .fac-lineas td:last-child .icono-editar:hover { opacity: 1; border-color: var(--borde); }
.facturar .fac-lineas .vacio { text-align: center; color: var(--tenue); padding: 18px 0; }
.facturar .fac-lineas .vacio p { margin: 2px 0; }

/* La celda del IVA: el monto de esa línea y, debajo, «bien pequeñito para q no
   robe mucho espacio», el porcentaje usado (Mario, 1/10/2026). Un bloque en
   columna, centrado en sí mismo; el lapicito queda a su lado, y el encabezado
   «IVA» sigue compensando esos 30 px (ver HUECO_DEL_LAPICITO). */
.facturar .fac-lineas .iva-linea {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.25;
}
.facturar .fac-lineas .iva-monto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.facturar .fac-lineas .iva-linea .tarifa-iva { font-size: 10.5px; font-weight: 500; color: var(--tenue); }
/* El «exo N%» es un `.nota` (12 px) metido dentro del porcentaje: hereda su
   tamaño para no quedar más grande que lo que acompaña. Conserva su color. */
.facturar .fac-lineas .iva-linea .tarifa-iva .exo { font-size: inherit; }

/* LA NOTA: LA FACTURA ORIGINAL Y EL MOTIVO, DEL MISMO ANCHO Y CENTRADOS
   (Mario, 1/10/2026, con captura: «el renglón del motivo, del mismo ancho que
   el de “Se refiere a…” que tiene arriba […] el campo con más presencia,
   porque casi no se ve […] bien centradito todo»).

   SOLO LAS NOTAS DE CRÉDITO Y DE DÉBITO: el bloque lleva la clase `de-nota`
   (facturar.js, `pintarReferencia`) y todo lo de abajo cuelga de ella. El
   recibo de pago y la factura de compra, que no se pidieron, se quedan como
   estaban: sin ninguna de estas reglas.

   El bloque es una columna que estira a sus hijos: el recuadro verde de la
   factura original y el motivo (y, en la nota de débito, el código de abajo)
   toman todos el ancho del bloque. El ancho es el del recuadro verde —lo que
   mide su texto— entre 22 y 34 rem, o el de la pantalla si ésta es más
   angosta (el teléfono). */
.facturar .fac-elegido.de-nota {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sep-nota);
  width: min(100%, 34rem);
  min-width: min(100%, 22rem);
}
.facturar .fac-elegido.de-nota > .aviso-fijo { margin: 0; text-align: center; }
/* «Todavía no se ha escogido a cuál documento se refiere»: antes de escoger, el
   bloque ya estira a sus hijos y el aviso se iba a la izquierda. */
.facturar .fac-elegido.de-nota > .nota { margin: 0; text-align: center; }
/* Y si la nota llega sin factura (un enlace viejo), en lugar del recuadro sale la
   instrucción de ir a la lista de ventas, con sus dos botones, centrada igual. */
.facturar .fac-elegido.de-nota > .fac-sin-nota { text-align: center; }
.facturar .fac-sin-nota > .nota { margin: 0 0 var(--sep-nota); }
.facturar .fac-sin-nota > .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* LA NOTA YA NO BUSCA LA FACTURA (Mario, 7/10/2026: «se hace la nota a la factura
   que uno escoge en la lista de ventas […] uno no puede escoger otra factura»):
   se fueron las reglas del buscador dentro de la nota (su ancho de 34 rem, su
   margen y su alto de 46 px, de las fotos del 1/10 y del 2/10). El buscador que
   queda es el del recibo de pago, sin esas reglas: su campo llena su ancho y lo
   que no quepa del texto de ayuda termina en puntos. */
.facturar .fac-buscar-doc .campo > input {
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
}
/* LA NOTA DE DÉBITO CONSERVA LA CABECERA ENTERA (tipo, condición, moneda,
   actividad…): el bloque de la referencia, como una celda más, quedaba en la
   columna derecha con un hueco a la izquierda. En su propia fila queda al
   centro, igual que el de la nota de crédito. */
.facturar .cabecera-doc > .ref-fila-propia { flex: 0 0 100%; }
/* El rótulo, más grande y en negrita que los de las demás cajitas (12 px). */
.facturar .cabecera-doc .fac-elegido.de-nota > .fac-motivo > .campo > .rotulo-i > label {
  font-size: 16px;
  font-weight: 700;
  color: var(--texto);
}
/* El campo: todo el ancho, más alto, letra más grande y un borde de 2 px del
   mismo color de los demás campos (el que se mide a 3:1), sobre relleno
   blanco. Al enfocarlo toma el acento, como todos. */
.facturar .cabecera-doc .fac-elegido.de-nota > .fac-motivo > .campo > input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
  border: 2px solid var(--borde-tarjeta);
  border-radius: 10px;
  background: var(--papel);
}
.facturar .cabecera-doc .fac-elegido.de-nota > .fac-motivo > .campo > input:focus { border-color: var(--acento); }

/* LA NOTA, TODOS LOS CUADRITOS EN UNA SOLA PILA (Mario, 2/10/2026, con captura:
   «lo de correo al cliente está descentrado, se ve super feo. En la nota de
   crédito, hay que revisar todos los cuadritos»).

   Medido en Edge (tests/nota-credito-cuadritos-medida-en-edge.test.ts), a
   1280 px la cabecera es un renglón que se parte solo: el título, el bloque de
   la factura y «Correo al cliente» quedaban UNO AL LADO DEL OTRO —el bloque
   corrido 21 px del centro de la tarjeta y «Correo al cliente», angosto
   (213 px), colgando a la derecha—; en la de débito, en una fila con la moneda
   y la actividad, a 262 px del centro. Ahora cada parte tiene su propio renglón
   y la pila entera comparte eje, ancho, alto, esquinas y separación:
     · ancho: el del recuadro (`min(100%, 34rem)`, mínimo 22 rem);
     · alto: 46 px (el recuadro, cuando su texto cabe en un renglón);
     · esquinas: 10 px;
     · separación entre bloques: 14 px, también entre los renglones. */
.facturar {
  --sep-nota: 14px;
  --alto-cuadrito: 46px;
  --radio-cuadrito: 10px;
}
.facturar .cabecera-doc:has(> .ref-de-nota) { row-gap: var(--sep-nota); }
/* El título con su ⚙: en su renglón, al centro y el ⚙ AL LADO (la regla general
   de la cabecera apila los hijos en columna y lo mandaba debajo del título). */
.facturar .cabecera-doc > .caja-titulo-nota {
  flex: 0 0 100%;
  flex-direction: row;
  justify-content: center;
}
/* El bloque de la referencia, en su renglón: la nota de crédito lo compartía
   con el título y «Correo al cliente». */
.facturar .cabecera-doc > .ref-de-nota { flex: 0 0 100%; }
/* Los tres cuadritos —el recuadro verde, el motivo y la cajita de «Correo al
   cliente»— del mismo alto y las mismas esquinas. El motivo conserva su borde de
   2 px (el campo con más presencia, pedido del 1/10). */
.facturar .cabecera-doc .fac-elegido.de-nota > .fac-motivo > .campo > input {
  height: var(--alto-cuadrito);
  min-height: var(--alto-cuadrito);
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.facturar .cabecera-doc .fac-elegido.de-nota > .aviso-fijo,
.facturar .cabecera-doc .caja-sin-correo.de-nota > label.encasillado {
  border-radius: var(--radio-cuadrito);
}
.facturar .cabecera-doc .fac-elegido.de-nota > .aviso-fijo { padding-top: 12px; padding-bottom: 12px; }
/* «Correo al cliente»: su propio renglón, el rótulo al centro y la cajita del
   ancho de su frase (Mario, 2/10/2026: «del ancho de la frase […] se ve todo
   grande y feo»), con el alto y el estilo de los campos. */
.facturar .cabecera-doc > .caja-sin-correo.de-nota { flex: 0 0 100%; }
.facturar .cabecera-doc .caja-sin-correo.de-nota > label.encasillado {
  box-sizing: border-box;
  /* Del ancho de su frase, más su relleno; si no cabe (teléfono), se ajusta. */
  width: fit-content;
  max-width: 100%;
  min-height: var(--alto-cuadrito);
  justify-content: center;
  border-color: var(--borde-tarjeta);
}
.facturar .cabecera-doc .caja-sin-correo.de-nota > label.encasillado:has(input:checked) { border-color: var(--ambar); }

/* El buscador del artículo: un renglón punteado por llenar. */
.facturar .fac-agregar { padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.facturar .fac-agregar .buscador input {
  border: 1.5px dashed var(--borde-fuerte);
  background: var(--papel);
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.facturar .fac-agregar .buscador input:focus { border-style: solid; }

/* La fila de acciones: otro cargo, comentario, programar. */
.facturar .fac-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: var(--e-3) 14px 14px;
}
.facturar .fac-acciones .boton { padding: 5px 12px; font-size: 12.5px; }

/* --------------------------------------------------------- los totales -- */
/* DOS CUADRITOS (Mario, 3/10/2026: «podríamos poner como 2 cuadritos creo yo,
   uno con todo lo de venta neta, impuestos, otros cargos, y el otro con el
   total bien visible, grandecito así a como está ahora»; y el 4/10, con la
   maqueta: «el botón verde va dentro, como lo hiciste»). En la columna del
   costado van uno debajo del otro, y debajo «Guardar como proforma» y
   «Limpiar». Donde no hay columna, el desglose se queda debajo de las líneas
   y el total va al pie de la ventana («el total, al pie», más abajo): a la par
   debajo de las líneas —como en la primera entrega— había que bajar para ver
   el botón de emitir, y Mario lo quiere siempre a la vista (7/10/2026). */
.facturar > .fac-totales {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
  min-width: 0;
}

/* Cuadrito 1 · el desglose. */
.facturar .tarjeta.totales { overflow-x: hidden; }
.facturar .tarjeta.totales > h2 { background: var(--papel); color: var(--texto); border-bottom-color: var(--borde); }
.facturar .tarjeta.totales > .exonerar-totales .boton { font-size: 13px; }
.facturar .cuerpo.totales { padding: 12px 18px 16px; }
.facturar .cuerpo.totales .fila { font-size: 13.5px; padding: 4px 0; }
.facturar .cuerpo.totales .fila span:last-child { font-family: inherit; font-variant-numeric: tabular-nums; }
.facturar .cuerpo.totales .fila.tenue { font-size: 12.5px; }
/* El plazo del crédito con su «Cambiar», centrado como los totales de arriba
   (Mario, 25/9/2026). De contado aquí no hay nada: la forma de pago se escoge
   en el cuadro que sale al emitir (3/10/2026). */
.facturar .fac-pago {
  margin-top: var(--e-3);
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  text-align: center;
}
.facturar .fac-pago .entre { justify-content: center; }

/* Cuadrito 2 · «Total a cobrar», en tinta, con el botón verde adentro. Todo
   centrado: el rótulo, el monto, el vencimiento y el botón (Mario, 17/9/2026,
   con captura: «el total y el monto en el cuadro azul, todo eso va en el
   centro de ese cuadro, acordate, todo centrado»). */
.facturar .fac-total {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--sobre-tinta);
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--e-5) var(--e-4);
  text-align: center;
  min-width: 0;
}
.facturar .fac-cierre { display: grid; justify-items: center; gap: var(--e-4); min-width: 0; max-width: 100%; }
.facturar .fac-cierre .fila.grande {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}
.facturar .fac-cierre .fila.grande > span:first-child { color: var(--sobre-tinta-tenue); font-size: 13px; font-weight: 500; }
.facturar .fac-cierre .fila.grande > .monto {
  font: 700 34px/1.1 var(--fuente-titulo);
  font-variant-numeric: tabular-nums;
  color: #fff;
  max-width: 100%;
  overflow-wrap: anywhere;
}
html[data-theme="oscuro"] .facturar .fac-cierre .fila.grande > .monto { color: var(--sobre-tinta); }
.facturar .fac-cierre .fila.grande > small { color: var(--lima); font-size: 12.5px; font-weight: 600; }
/* DEL TAMAÑO DEL TEXTO (Mario, 18/9/2026: «igual enviar proforma o facturar
   […] o guardar como proforma también, hacer los botones de esas acciones
   pequeños, del tamaño del texto»). Sobre la tinta lleva el filo lima. */
.facturar .fac-cierre .botones-emitir { display: flex; justify-content: center; max-width: 100%; }
.facturar .fac-cierre .botones-emitir .boton.primario {
  padding: 11px 24px;
  font-size: 15px;
  white-space: pre-wrap;
  border-color: var(--lima);
}
/* Debajo de los dos cuadritos, a la par y al centro. */
.facturar .fac-botones-secundarios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-4);
}

/* ------------------------------------------- la tarjeta del comprobante -- */
/* Más chico que un cuadro normal: ya no lleva el volcado de Hacienda. */
.modal:has(.fac-comprobante) { max-width: 460px; }
/* Todo centrado: el tipo, el monto y el estado (Mario, 17/9/2026). */
.fac-comprobante .fac-comprobante-cabeza {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: var(--tinta);
  color: var(--sobre-tinta);
  border-radius: var(--radio-grande);
  padding: 14px 16px;
}
.fac-comprobante .fac-comprobante-cabeza small { display: block; color: var(--sobre-tinta-tenue); font-size: 12.5px; }
.fac-comprobante .fac-comprobante-cabeza b {
  display: block;
  font: 700 26px/1.2 var(--fuente-titulo);
  font-variant-numeric: tabular-nums;
}
.fac-comprobante .fac-comprobante-cabeza .pastilla { flex: none; }
/* El consecutivo ARRIBA del cuadro azul, y el cliente debajo (Mario,
   22/9/2026). Los dos centrados, como todo lo de este cuadro. */
.fac-comprobante .fac-comprobante-numero,
.fac-comprobante .fac-comprobante-cliente {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  margin: 0;
}
.fac-comprobante .fac-comprobante-numero small { color: var(--tenue); font-size: 12px; }
.fac-comprobante .fac-comprobante-numero b { font-size: 16px; letter-spacing: .02em; }
.fac-comprobante .fac-comprobante-cliente b { font-size: 15px; overflow-wrap: anywhere; }
.fac-comprobante .fac-comprobante-cliente small { color: var(--tenue); font-size: 13px; }

/* ---------------------------------------------------- el total, al pie -- */
/* EL TOTAL CON SU BOTÓN, PEGADO AL BORDE DE ABAJO DE LA VENTANA, donde no va
   al costado (ver «la rejilla», arriba). En el teléfono es la barra de siempre
   (Mario, 3 y 4/10/2026; el encargo: «la barra fija de “Total a cobrar” +
   emitir que ya existe se queda»), y desde el 7/10/2026 también en la compu:
   «Me gusta siempre a la vista porque facilita para las personas menos
   tecnológicas.» De 1281 a 1639 px el cuadrito quedaba debajo de las líneas y
   había que bajar para ver el botón de emitir.

   El envoltorio de los totales deja de pintar caja y sus piezas pasan a ser de
   la pantalla. El desglose se queda en su sitio, debajo de las líneas, con
   «Guardar como proforma» y «Limpiar». El total va de ÚLTIMO en la columna
   (`order`): acompaña pegado en todo el recorrido y, al llegar al fondo,
   descansa después de «Opciones adicionales», sin tapar nada. (En la primera
   entrega se quedaba debajo del desglose y al seguir bajando subía con la
   página: a 320 × 640 la cabecera le tapaba medio botón.) Es el mismo
   cuadrito: no hay un botón de emitir repetido. */
@media (max-width: 900px) {
  .facturar { display: flex; flex-direction: column; align-items: stretch; }
  .facturar > .fac-totales { display: contents; }
  .facturar .fac-total {
    position: sticky;
    bottom: 0;
    order: 1;
    z-index: 30;
    padding: 10px var(--e-4);
    box-shadow: 0 -4px 12px rgba(15, 42, 74, .16);
  }
  /* Entre el cuadrito pegado y el pie queda el relleno de la pantalla (16 px;
     10 en el teléfono, estilo.css): se tapa con el color del fondo para que no
     se asome por ahí lo que va pasando por detrás. Mide ese relleno más el
     borde del cuadrito. */
  .facturar .fac-total::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    background: var(--fondo);
  }
  /* El total y el botón, uno al lado del otro y al centro de la barra, los dos
     adentro. El total va en UN renglón. */
  .facturar .fac-cierre {
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: var(--e-5);
  }
  .facturar .fac-cierre .fila.grande > .monto {
    font-size: 28px;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  /* LO QUE EL NAVEGADOR TRAE A LA VISTA SE DETIENE ANTES DE LA BARRA. Al
     enfocar un campo o al agregar un artículo, el navegador lo acerca apenas
     al borde de abajo: sin esto la última línea y los botones de «+ Otro
     cargo» quedaban debajo del total. Es el alto de la barra con su renglón
     de «Vence el…», más su separación del pie. */
  main:has(.facturar) { scroll-padding-bottom: 112px; }
}

/* ------------------------------------------------------------ teléfono -- */
@media (max-width: 760px) {
  .facturar > .fac-cabecera { flex-direction: column; align-items: stretch; }
  .facturar > .fac-cabecera h1 { font-size: 20px; }
  .facturar .fac-tipos { display: flex; overflow-x: auto; flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  .facturar .fac-tipos button { flex: 1 0 auto; }

  /* LA BARRA DEL TOTAL, EN EL TELÉFONO («el total, al pie», arriba). El total
     a la izquierda y el botón a la derecha. El total mide lo que pide —es la
     cifra de la escala de la v3, con la que un millón cabe a 320 px—, y el
     botón se queda con el resto: su texto es el que se parte, no el monto. */
  .facturar .fac-total { padding: 10px var(--e-3); }
  .facturar .fac-total::after { height: 12px; }
  .facturar .fac-cierre {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e-3);
  }
  .facturar .fac-cierre .fila.grande > span:first-child { font-size: 11.5px; }
  .facturar .fac-cierre .fila.grande > .monto { font-size: clamp(17px, 5.4vw, 24px); }
  .facturar .fac-cierre .fila.grande > small { font-size: 11px; }
  .facturar .fac-cierre .botones-emitir { display: block; }
  .facturar .fac-cierre .botones-emitir .boton.primario { width: 100%; font-size: 13.5px; padding: 10px 12px; }

  .facturar .fac-tipos button { padding: 6px 10px; }
  /* Sin cliente: el buscador a todo el ancho y los dos botones debajo. */
  .facturar .fac-cliente > .cuerpo .entre:has(> .buscador) { flex-wrap: wrap; }
  .facturar .fac-cliente > .cuerpo .entre > .buscador { flex: 1 1 100% !important; }
  .facturar .fac-cliente > .cuerpo .entre > .acciones { flex: 1 1 100%; justify-content: center; }
  .facturar .fac-cliente > .cuerpo,
  .facturar .fac-agregar { padding: var(--e-3); }
  .facturar .tarjeta > h2 { padding: 10px var(--e-3); }
  /* EL CLIENTE ESCOGIDO: su nombre y su identificación a todo el ancho, y
     «Editar» y «Cambiar» debajo, al centro —como «De contado» y «+ Cliente
     nuevo»—. Al lado, a 375 px le dejaban al texto unos 115 px y la cédula
     salía partida («3-101-» y abajo «999941 ·»). El `!important` le gana al
     `flex:1` que el nombre trae pegado en su `style` (revisión del 7/10/2026). */
  .facturar .cliente-elegido > .entre { flex-wrap: wrap; justify-content: center; }
  .facturar .cliente-elegido > .entre > div { flex: 1 1 calc(100% - 44px) !important; }
  /* El aviso del saldo a favor, en su propio renglón, a todo el ancho: aquí la
     barra del total es fija, así que crecer no mueve el botón de emitir. */
  .facturar .cliente-elegido .fac-a-favor { flex: 1 1 100%; max-width: none; }
  .facturar .fac-iniciales { width: 32px; height: 32px; font-size: 12px; }
  .facturar .fac-acciones { padding: var(--e-3); justify-content: center; border-top: 1px solid var(--borde); }
  /* Del tamaño de un dedo, como los controles de las tarjetas: medían 25 y 29 px. */
  .facturar .cliente-elegido .boton.chico,
  .facturar .fac-acciones .boton { min-height: 40px; padding-left: 14px; padding-right: 14px; }

  /* LAS LÍNEAS SON TARJETAS (sugerencia 1 de la auditoría del 3/10/2026, «se
     aplica»; Mario, 4/10). La tabla medía 760 px en un marco de 353 y al
     agregar un artículo se deslizaba sola 68 px: el precio y el total de cada
     línea quedaban fuera de la pantalla. Es la MISMA tabla —las celdas `fl-…`
     de facturar.js, no una segunda lista—: se le quitan los títulos y el ancho
     mínimo, y cada fila se acomoda como tarjeta, con todo a la vista y sus
     controles del tamaño de un dedo:

         1  PINT-001                      ⚙  ×
         [ Pintura blanca base agua, galón   ]
                  3511003000100 🔍
         [ 1 ] Unid  ×  [      14,500.00 ] ✎
         IVA  ₡1,885.00  ✎            ₡16,385.00
                13%

     Las tres primeras columnas son fijas —el número, y con la segunda la
     cantidad; la tercera, la unidad— y la última mide lo que pida el total de
     la línea: así «₡1,000,000.00» cabe entero a 320 px y al precio le queda el
     resto. */
  .facturar .fac-lineas .envoltorio-tabla { overflow: visible; border-radius: 0; }
  .facturar .fac-lineas table { display: block; min-width: 0; width: 100%; }
  .facturar .fac-lineas thead { display: none; }
  .facturar .fac-lineas tbody,
  .facturar .fac-lineas tbody tr,
  .facturar .fac-lineas tbody tr > td { display: block; }
  .facturar .fac-lineas tbody tr[data-fila] {
    display: grid;
    grid-template-columns: 24px 30px 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "num      codigo   codigo  codigo  acciones"
      "detalle  detalle  detalle detalle detalle"
      "cantidad cantidad unidad  precio  precio"
      "iva      iva      iva     iva     total";
    align-items: center;
    gap: 6px;
    padding: 10px var(--e-3);
    border-top: 1px solid var(--borde);
    background: transparent;
  }
  .facturar .fac-lineas tbody tr[data-fila] > td {
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1.3;
    text-align: left;
  }
  /* El número, en su redondel; a su lado, el código del artículo. */
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-num {
    grid-area: num;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--papel-2);
    color: var(--tenue);
    font: 650 12px/1 var(--fuente-texto);
  }
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-codigo { grid-area: codigo; }
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-acciones { grid-area: acciones; justify-self: end; }
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-detalle { grid-area: detalle; }
  .facturar .fac-lineas td.fl-detalle > .nota { margin-top: 4px; }
  /* El nombre, con el renglón un poco más apretado: aquí suele partir en dos. */
  .facturar .fac-lineas td.fl-detalle > textarea {
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.35;
  }
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-cantidad { grid-area: cantidad; }
  .facturar .fac-lineas td.fl-cantidad > input { max-width: none; }
  /* La unidad, como texto: «1 Unid × 14,500.00». La pastilla no cabía a 320 px. */
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-unidad { grid-area: unidad; text-align: center; }
  .facturar .fac-lineas .unidad-fija { margin: 0 auto; padding: 0; border: 0; background: transparent; line-height: 1.3; }
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-precio {
    grid-area: precio;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .facturar .fac-lineas td.fl-precio::before { content: "×"; color: var(--tenue); }
  .facturar .fac-lineas td.fl-precio > .celda-editable { flex: 1; min-width: 0; }
  .facturar .fac-lineas td.fl-precio .celda-editable input { min-width: 0; max-width: none; padding-left: 8px; padding-right: 8px; }
  /* El IVA: el monto y debajo su % chiquito (Mario, 1/10/2026), con su rótulo
     —aquí no hay título de columna que lo diga— y el lapicito al lado. */
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-iva { grid-area: iva; }
  .facturar .fac-lineas td.fl-iva .celda-editable { justify-content: flex-start; gap: 6px; }
  .facturar .fac-lineas td.fl-iva .celda-editable::before {
    content: "IVA";
    color: var(--tenue);
    font-size: 11.5px;
    font-weight: 600;
  }
  .facturar .fac-lineas tbody tr[data-fila] > td.fl-total {
    grid-area: total;
    justify-self: end;
    font-size: 15px;
  }
  /* Los controles, del tamaño de un dedo: 40 px (medían 38 los campos, 36 los
     botoncitos y 30 la lupita; revisión del 7/10/2026). El ⚙ y la × a la
     vista, que aquí no hay ratón que los destape al pasar por encima. */
  .facturar .fac-lineas tbody :is(input, textarea) { min-height: 40px; }
  .facturar .fac-lineas tbody .icono-editar { width: 40px; height: 40px; font-size: 15px; border-radius: var(--radio-control); }
  /* LA LUPITA DEL CAByS: EL DIBUJO CHICO, LA ZONA DE TOQUE DE 40 (Mario,
     7/10/2026: «haz el dibujo más chico pero manteniendo el area de toque»). A
     40 px se veía grande al lado del código. El dibujo vuelve a los 30 px de
     antes, y lo que responde al dedo sigue en 40: una franja invisible de 5 px
     alrededor (`::after`), que cabe en el margen de la lupita y no se monta en
     el nombre de arriba. */
  .facturar .fac-lineas tbody .icono-editar.lupa {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 5px 0;
    font-size: 13px;
  }
  .facturar .fac-lineas tbody .icono-editar.lupa::after { content: ""; position: absolute; inset: -6px; }
  .facturar .fac-lineas td:last-child .icono-editar { opacity: 1; border-color: var(--borde); background: var(--papel); }
  .facturar .fac-lineas td > .acciones { gap: 6px; }
}

/* Sucursal y terminal a la par, en la misma fila (Mario, 17/9/2026).
   Le gana al `flex-direction: column` de `.cabecera-doc > div` (estilo.css). */
.facturar .cabecera-doc > .fac-caja { flex-direction: row; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 12px; }
.facturar .cabecera-doc > .fac-caja[hidden] { display: none; }
.facturar .cabecera-doc > .fac-caja > div { display: flex; flex-direction: column; align-items: center; min-width: 130px; }

/* Ventana de exonerar: «Validar contra Hacienda» separado del número, centrado
   y en azul (Mario, 9/10/2026). */
.fac-exo-numero > .boton { display: block; margin: 12px auto 0; padding: 9px 22px; }
/* El monto total exonerado, bajo el porcentaje: la plata grande y en verde. */
.fac-exo-monto { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; text-align: center; }
.fac-exo-monto > strong { color: var(--verde); font-size: 1.05rem; }
/* LOS CUADRITOS DE EXONERAR, DEL ANCHO DE LO QUE LLEVAN (Mario, 15/10/2026:
   «se ven muy alargados … q sean del tamaño del texto más largo q hay en
   ellos»). Los dos desplegables miden lo que dicen (`field-sizing`), sin
   pasarse de la ventana; el número, lo de un número de Hacienda (`.w-acuerdo`);
   los «¿cuál?» de los 99, un nombre (`.w-nombre`). Sin `field-sizing` el
   desplegable mide su opción más larga. */
.fac-exo .campo > select { width: auto; max-width: 100%; field-sizing: content; }

/* ------------------------------------------- la forma de la lámina 02 -- */
/* Va de ÚLTIMA en la hoja: le gana por orden a las reglas de los dos
   cuadritos de arriba. */
/* LA FORMA DE LA LÁMINA 02 (Mario, 7/10/2026, ya con la v3 arriba y enseñando
   la lámina: «facturar debería verse así y no como ahora»; y del total: «me
   gusta la forma en la q está la foto q adjunté»). En la compu, debajo de las
   líneas van dos columnas: «Opciones adicionales» a la izquierda y, a la
   derecha, los totales en lista, el Total y el botón verde a todo su ancho.
   Deshace la barra del total pegada al pie en la compu, que él había pedido
   esa misma mañana («siempre a la vista»): la última palabra es la lámina.
   En el teléfono (hasta 900 px) el total sigue al pie, pegado. */
@media (min-width: 901px) {
  .facturar { grid-template-columns: minmax(0, 1fr) 340px; grid-auto-flow: row dense; gap: var(--e-3) var(--e-4); align-items: start; }
  /* El título arriba y las pestañas debajo, a la izquierda. */
  .facturar > .fac-cabecera { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
  .facturar > :not(.fac-totales):not(.opciones-doc) { grid-column: 1 / -1; }
  .facturar > .fac-totales {
    grid-column: 2;
    background: var(--papel);
    border: 1px solid var(--borde-tarjeta);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-chica);
    padding: var(--e-3) var(--e-4) var(--e-4);
    gap: var(--e-3);
  }
  /* Las piezas de adentro no pintan caja: la caja es el bloque. */
  .facturar > .fac-totales > .tarjeta { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
  .facturar .tarjeta.totales > h2 { display: none; }
  .facturar .tarjeta.totales > .exonerar-totales { padding: 0 0 var(--e-2); }
  .facturar .cuerpo.totales { padding: 0; }
  .facturar .cuerpo.totales .fila { display: flex; justify-content: space-between; gap: var(--e-3); }
  /* El Total: una raya, el rótulo a la izquierda y el monto a la derecha. */
  .facturar .fac-total {
    color: var(--texto);
    padding: var(--e-3) 0 0;
    border-top: 1px solid var(--borde-tarjeta) !important;
    justify-items: stretch;
    text-align: left;
  }
  .facturar .fac-cierre { justify-items: stretch; gap: var(--e-3); }
  .facturar .fac-cierre .fila.grande { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--e-3); }
  .facturar .fac-cierre .fila.grande > span:first-child { color: var(--texto); font: 700 16px var(--fuente-titulo); }
  .facturar .fac-cierre .fila.grande > .monto,
  html[data-theme="oscuro"] .facturar .fac-cierre .fila.grande > .monto { color: var(--texto); font-size: 20px; }
  .facturar .fac-cierre .fila.grande > small { color: var(--tenue); flex-basis: 100%; text-align: right; }
  .facturar .fac-cierre .botones-emitir { display: block; }
  .facturar .fac-cierre .botones-emitir .boton.primario { width: 100%; justify-content: center; border-color: var(--verde); padding: 11px 16px; }
}