/* Estilo compartido de todos los visores. El design system reemplaza este archivo entero:
   las páginas no llevan estilos propios (visores/conocimiento.md#función-antes-que-estética). */
:root {
  --letra: system-ui, "Segoe UI", sans-serif;
  --letra-codigo: Consolas, "Courier New", monospace;
  --tamano: 14px;
  --texto: #1d1d1f;
  --texto-suave: #5f6368;
  --fondo: #ffffff;
  --fondo-suave: #f4f5f7;
  --borde: #d6d8dc;
  --acento: #0b57d0;
  --seleccion: #e3ecfb;
  --alerta: #a4410e;
  --error: #b3261e;
  --nuevo: #dff3e4;
  --hecho: #1e7a3e;  /* el texto de lo que acaba de quedar hecho, sobre --nuevo */
  --espacio: 8px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* un panel oculto no se muestra aunque su estilo diga cómo acomodarlo */
body { margin: 0; font: var(--tamano)/1.4 var(--letra); color: var(--texto); background: var(--fondo); }
header { padding: var(--espacio) calc(var(--espacio) * 2); border-bottom: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(var(--espacio) * 3); }  /* título y menú de visores en una línea */
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 var(--espacio); }
h3 { font-size: 14px; margin: calc(var(--espacio) * 2) 0 var(--espacio); border-bottom: 1px solid var(--borde); }

/* Dos paneles: listado a la izquierda, visor a la derecha; se apilan en pantallas angostas. */
.dos-paneles { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); height: calc(100vh - 42px); }
.dos-paneles > section { overflow: auto; padding: var(--espacio) calc(var(--espacio) * 2); }
.dos-paneles > section + section { border-left: 1px solid var(--borde); background: var(--fondo-suave); }
/* Un panel en columna: arriba lo fijo (filtros), en medio la zona que se desplaza con sus propias barras, y abajo
   el pie (paginación), siempre a la vista y por debajo de esas barras. */
.dos-paneles > section.en-columna { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.desplazable { flex: 1; min-height: 0; overflow: auto; }
.pie { margin: 0; padding: var(--espacio) 0; border-top: 1px solid var(--borde); }
/* Comparando: el archivo ocupa la izquierda, mitad y mitad con los datos, y llena el alto de su columna. */
.dos-paneles.comparando { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.barra { margin: 0 0 var(--espacio); display: flex; flex-wrap: wrap; gap: var(--espacio); align-items: center; }
.barra .cerrar { margin-left: auto; font-weight: 600; }
/* La barra con lo que vale para todo el paso —volver, lo general y el botón que avanza, como «Ver y firmar», que
   suma lo que entra— queda a la vista mientras se baja por la lista; el velo de un flotante la tapa como a lo demás. */
.barra.fija { position: sticky; top: calc(var(--espacio) * -1); z-index: 2; padding: var(--espacio) 0; background: var(--fondo);
  border-bottom: 1px solid var(--borde); }
.barra h2 { margin: 0; }  /* el título de una sección con su botón al lado */
.avance:empty { display: none; }  /* el avance de un botón solo ocupa lugar mientras dice algo */
#archivo p:empty { display: none; }
#vista-archivo { padding-bottom: var(--espacio); overflow: hidden; }
/* El visor común de archivos (visor_archivo.js): la barra siempre a la vista y, debajo, las hojas, que se mueven
   arrastrando. Llena la caja que lo contiene. */
.visor-archivo { display: flex; flex-direction: column; height: 100%; min-height: 320px; border: 1px solid var(--borde); background: #e8eaed; outline: none; }
.visor-archivo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; background: var(--fondo); border-bottom: 1px solid var(--borde); }  /* en un panel angosto, en dos renglones: ningún control se esconde */
.visor-archivo-barra button, .visor-archivo-barra a { flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--acento); cursor: pointer; display: grid; place-items: center; }
.visor-archivo-barra button:hover:not(:disabled), .visor-archivo-barra a:hover { background: var(--seleccion); }
.visor-archivo-barra button[aria-pressed="true"] { background: var(--seleccion); border-color: var(--acento); color: var(--acento); }
.visor-archivo-barra button:disabled { color: var(--borde); cursor: default; }
.visor-archivo-barra svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visor-archivo-zoom { flex: none; min-width: 46px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.visor-archivo-pagina { margin-left: 6px; color: var(--texto-suave); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.visor-archivo-separa { flex: none; width: 1px; height: 20px; background: var(--borde); margin: 0 4px; }
.visor-archivo-resto { margin-left: auto; display: flex; gap: 2px; }
.visor-archivo-lienzo { position: relative; flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain;
  cursor: grab; touch-action: none; user-select: none; }
.visor-archivo-lienzo.arrastrando { cursor: grabbing; }
.visor-archivo-hojas { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; width: max-content; min-width: 100%; }
.visor-archivo-hojas canvas { display: block; background: var(--fondo); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.archivo-suelto #caja { height: 100vh; }
.archivo-suelto p:empty { display: none; }  /* archivo/: el archivo solo, del alto del marco que lo muestra */
.visor-archivo-aviso { margin: calc(var(--espacio) * 2); max-width: 40em; color: var(--texto-suave); white-space: normal; }
@media (max-width: 900px) {
  .dos-paneles { grid-template-columns: 1fr; height: auto; }
  .dos-paneles > section + section { border-left: 0; border-top: 1px solid var(--borde); }
}
/* Un visor dentro de otro (documentos/?doc=…&solo=1): solo el documento, sin título, menú ni listado; su archivo va
   encima de los datos. */
.solo header, .solo #listado, .solo #doc-anterior, .solo #doc-siguiente { display: none; }
.solo .dos-paneles { grid-template-columns: 1fr; height: auto; }
.solo .dos-paneles > section + section { border-left: 0; }
.solo #vista-archivo { flex: none; height: calc(100vh - 70px); }  /* el archivo cabe entero en el marco; los datos siguen debajo */
/* El documento que otro visor muestra a su derecha, con la página del visor de documentos. */
.visor-documento { display: block; width: 100%; height: 75vh; border: 1px solid var(--borde); background: var(--fondo); }

form { display: flex; flex-wrap: wrap; gap: var(--espacio); align-items: end; margin-bottom: var(--espacio); }
label { display: flex; flex-direction: column; font-size: 12px; color: var(--texto-suave); }
label:has(input[type=checkbox]), label:has(input[type=radio]) { flex-direction: row; align-items: center; gap: 4px; }
input, select, button { font: inherit; padding: 4px 6px; }
button { cursor: pointer; }
button[aria-pressed=true] { background: var(--acento); color: #fff; border-color: var(--acento); }

table { border-collapse: collapse; width: 100%; background: var(--fondo); }
th, td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: 12px; color: var(--texto-suave); position: sticky; top: 0; background: var(--fondo); }
td.monto, th.monto { text-align: right; white-space: nowrap; }
.sin-corte { white-space: nowrap; }
/* Menú ▾ de cada columna, como el filtro de Excel: se abre bajo su encabezado y se cierra con Esc o al pulsar fuera. */
th[data-columna] { white-space: nowrap; }
th .filtro { padding: 0 4px; margin-left: 2px; font-size: 11px; line-height: 1.4; color: var(--texto-suave); background: none;
  border: 1px solid var(--borde); border-radius: 3px; }
th .filtro[aria-pressed=true] { color: #fff; background: var(--acento); border-color: var(--acento); }  /* columna filtrada */
.menu { position: fixed; inset: auto; margin: 0; display: none; flex-flow: column nowrap; align-items: stretch; gap: var(--espacio);
  width: 320px; max-height: 70vh; padding: var(--espacio); border: 1px solid var(--borde); border-radius: 4px;
  background: var(--fondo); color: var(--texto); box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); }
.menu:popover-open { display: flex; }
.menu p { margin: 0; }
.menu-orden { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--espacio); border-bottom: 1px solid var(--borde); }
.menu-orden button { text-align: left; }
.menu-filtro { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.menu-valores { overflow: auto; max-height: 40vh; border: 1px solid var(--borde); padding: 4px; }
/* Cada valor en tres columnas alineadas: la casilla, el nombre y cuántos documentos tiene, a la derecha. */
.menu .casilla { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: start; font-size: 13px; color: var(--texto); }
.menu .casilla small { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.menu .casilla.dentro { padding-left: 20px; }
.menu-botones { display: flex; gap: var(--espacio); padding-top: var(--espacio); border-top: 1px solid var(--borde); }
#filtros-activos { margin: 0 0 var(--espacio); font-size: 12px; color: var(--texto-suave); }
/* Grilla de captura, como la del buscador: cada campo con el ancho de lo que se escribe y el resto para el resultado. */
.grilla td:has(> input) { width: 1%; }
.grilla td.resultado { min-width: 18em; }
/* El paso 1 de la rendición (visores/rendicion/rendicion.md#paso-1-tus-pagos): la lista de pagos y, a su derecha,
   «Tu rendición», con anchos fijos y centrados: en pantalla ancha sobra margen y ningún campo se estira; en una que no
   les da el ancho, «Tu rendición» se pliega en un botón de la barra y se abre encima, desde la derecha; si ni la tabla
   entra, el paso se desplaza de lado (visores/conocimiento_captura.md#la-fila-y-lo-que-se-elige). */
.dos-paneles.pagos > section:first-child { padding-inline: var(--espacio); }
.rendir { width: 1242px; margin: 0 auto; display: grid; grid-template-columns: 962px 260px; column-gap: 20px; align-items: start; }
.barra-paso { position: sticky; top: calc(var(--espacio) * -1); z-index: 4; background: var(--fondo); padding: var(--espacio) 0 4px; }
.barra-paso .barra { margin: 0; min-height: 34px; flex-wrap: nowrap; gap: 14px; }
.barra-paso h2 { margin: 0; font-size: 17px; white-space: nowrap; }
.barra-paso label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--texto); white-space: nowrap; }
.barra-paso select { width: 150px; }
.barra-paso .campo-fecha { min-width: 0; width: 112px; }
.barra-paso #actualizado { margin-left: auto; white-space: nowrap; }
.barra-paso .plegada { margin-left: auto; display: none; gap: var(--espacio); }
#tabla-pagos { table-layout: fixed; width: 962px; --c-fecha: 80px; --c-mov: 172px; --c-monto: 72px; }
#tabla-pagos .c-fecha { width: var(--c-fecha); }
#tabla-pagos .c-mov { width: var(--c-mov); }
#tabla-pagos .c-monto { width: var(--c-monto); }
/* Sin banco la tabla mide lo mismo: Fecha e Importe, que se escriben, se reparten el ancho de la descripción del banco
   (conocimiento_rendiciones_sin_banco.md#lo-que-cambia-y-lo-que-no). Un cambio de ancho arriba cambia las dos tablas. */
#tabla-pagos.escritos .c-fecha { width: calc(var(--c-fecha) + var(--c-mov) / 2); }
#tabla-pagos.escritos .c-monto { width: calc(var(--c-monto) + var(--c-mov) / 2); }
#tabla-pagos td.escrito { vertical-align: top; }
#tabla-pagos td.escrito input { height: 28px; }
#tabla-pagos .fecha-escrita { display: flex; gap: 2px; align-items: center; }
#tabla-pagos .fecha-escrita input { flex: 1; min-width: 0; width: 100%; }
#tabla-pagos .fecha-escrita .clip { flex: none; width: 28px; height: 28px; padding: 0; color: var(--acento); }
#tabla-pagos .paga { display: flex; gap: 2px; align-items: center; justify-content: flex-end; }
#tabla-pagos .paga input { width: 104px; flex: none; text-align: right; }
#tabla-pagos .paga .clip, #tabla-pagos .paga .hueco { flex: none; width: 24px; height: 28px; padding: 0; }
#tabla-pagos tr.nueva > td { background: var(--seleccion); }
#tabla-pagos .pista { display: block; line-height: 28px; color: var(--texto-suave); font-size: 13px; }
#tabla-pagos .pista.error { color: var(--error); }
.captura .aviso-mes { margin-top: 4px; padding: 4px 8px; border-left: 3px solid #e3c24f; background: #fff8e1; color: #5c4300; line-height: 1.35; white-space: normal; }
.captura .aviso-mes b { font-weight: 600; }
#tabla-pagos .c-puente { width: 26px; }
#tabla-pagos .c-captura { width: 612px; }
#tabla-pagos thead { position: sticky; top: var(--alto-barra, 76px); z-index: 3; }  /* el encabezado, fijo bajo la barra */
#tabla-pagos th { position: static; padding: 6px 4px 4px; vertical-align: bottom; border-bottom: 2px solid var(--borde); }
#tabla-pagos td { padding: 8px 4px; }
#tabla-pagos td.sin-corte, #tabla-pagos .desc, #tabla-pagos td.pagado { line-height: 28px; }
#tabla-pagos .desc { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tabla-pagos td.movimiento > small { display: block; }
#tabla-pagos td.pagado { font-weight: 600; }
#tabla-pagos td.pagado .por-rendir { line-height: 1.15; }
.linea-th { display: grid; grid-template-columns: 76px 296px 128px 104px; }
.linea-th > :first-child { text-align: right; padding-right: 4px; }
.linea-th > :nth-child(3) { padding-left: 6px; }
.linea-th > :nth-child(4) { padding-left: 4px; }
/* Lo del banco y lo que se rinde, separados por un espacio donde va «=», «≈» o «≠»: el signo es la separación. */
#tabla-pagos .puente { text-align: center; padding-inline: 0; }
.signo { font-size: 20px; font-weight: 700; line-height: 28px; cursor: default; }
.signo.si { color: var(--hecho); }
.signo.no { color: #b25e00; }
/* Cada comprobante del pago, en dos alturas sobre tres columnas —el comprobante, su centro de costo y la acción—; lo
   que se avisa va debajo, a todo el ancho. Con comprobante se lee; sin él, se busca: cada cosa en su sitio. */
.captura .linea, .captura .pasada { display: grid; grid-template-columns: 372px 128px 104px; grid-template-rows: 28px 28px; row-gap: 2px; align-items: center; }
.captura :is(.linea, .pasada) + :is(.linea, .pasada) { margin-top: 8px; }
.captura .lee { grid-area: 1 / 1; min-width: 0; }
.captura .bajo { grid-area: 2 / 1; min-width: 0; }
.captura .de-centro { grid-area: 1 / 2; padding-left: 6px; min-width: 0; }
.captura .de-accion { grid-area: 1 / 3; padding-left: 4px; }
.captura .de-accion2 { grid-area: 2 / 3; padding-left: 4px; }
.captura .linea > :is(small, [data-items-de]) { grid-column: 1 / -1; }
.captura .linea:not([data-lleno="1"]) .con-doc, .captura .linea[data-lleno="1"] .sin-doc { display: none; }
.captura :is(.lee.con-doc, .pasada .lee) { display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px 28px; column-gap: 4px; align-items: center; }
.captura :is(.bajo.con-doc, .pasada .bajo) { display: grid; grid-template-columns: 76px minmax(0, 1fr) 126px; column-gap: 4px; align-items: center; }
/* «Más ▾», siempre en el mismo lugar de la línea, con o sin comprobante y en la fila verde: verde cuando ya tiene algo. */
.captura .mas:not([hidden]) { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.captura .mas.tiene { color: var(--hecho); border-color: #9fd4ae; background: #e6f4ea; }
/* Con comprobante, lo que se le agrega va a la vista: «Soporte» donde la línea sin él tiene «Más ▾» y «Comentario» bajo
   el centro de costo, en la línea y en la fila verde. Sus soportes, en su propia línea, cada uno con su ✕. */
.captura .de-centro2 { grid-area: 2 / 2; padding-left: 6px; min-width: 0; }
.captura :is(.linea, .pasada) > .soportes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
.captura .soportes:empty { display: none; }
.captura .soporte { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.captura .soportes button { height: 22px; }
.captura .ver-soporte { display: inline-flex; align-items: center; gap: 4px; max-width: 320px; padding: 0 6px; font-size: 12px;
  color: var(--acento); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.captura :is(.linea, .pasada) > .comentario { grid-column: 1 / -1; width: 100%; margin-top: 2px; }
.captura .pasada > small { grid-column: 1 / -1; }
.captura .linea.soltar { outline: 2px dashed var(--acento); outline-offset: 3px; background: #e8f0fe; }
.ver-doc.soportes { display: flex; margin-top: 2px; font-size: 12px; }
.captura .lee.sin-doc { display: flex; align-items: center; gap: 4px; }
.captura .lee.sin-doc .quita { margin-left: auto; }
.captura .busca { display: grid; grid-template-columns: 104px 48px 78px 126px; column-gap: 4px; align-items: center; }
.captura :is(input, select, button) { height: 28px; padding: 2px 5px; }
.captura .de-centro select, .captura .de-accion button, .captura .de-accion2 button { width: 100%; }
.captura input::placeholder { font-size: 12px; }  /* «RUC o nombre» entra entero en su campo */
.captura .rinde { text-align: right; font-weight: 600; }
.captura .nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.captura .ori { grid-column: 1; text-align: right; padding-right: 6px; white-space: nowrap; }
.captura .bajo .detalle { grid-column: 2; }  /* en su columna, haya o no importe original */
.captura .detalle { display: flex; align-items: center; gap: 6px; padding-left: 4px; min-width: 0; white-space: nowrap; overflow: hidden; }
.captura .detalle small { overflow: hidden; text-overflow: ellipsis; }
.captura .detalle .falta { color: #b25e00; font-weight: 600; }
.captura .de-centro small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lo que el sistema sugirió se marca así; lo que se propone presionar, como botón azul claro con todo escrito: el azul
   es lo que se presiona, y el amarillo, la etiqueta que no. */
.pastilla { flex: none; font-size: 11px; font-weight: 600; color: #6b4e00; background: #fff1c2; border: 1px solid #e3c24f;
  border-radius: 10px; padding: 0 7px; line-height: 18px; }
.captura .propuesta { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 6px; padding: 0 12px; overflow: hidden;
  white-space: nowrap; color: #0a3a8c; background: #dce8fc; border: 1px solid #a9c3ee; border-radius: 6px; font-size: 13px; font-weight: 600; }
.captura .propuesta:hover { background: #cddffb; }
.captura .propuesta span { overflow: hidden; text-overflow: ellipsis; }
.captura .propuesta .icono-clip { flex: none; }
.captura .clip { display: grid; place-items: center; width: 28px; padding: 0; color: var(--acento); }
.captura .clip:disabled { color: var(--borde); }
.captura .clip.quita { color: var(--error); }  /* quitar va en rojo, para no confundirlo con lo demás */
.captura .clip.mini { width: 22px; height: 22px; flex: none; }
.captura .principal:disabled { opacity: .45; cursor: default; }
.captura .quitar { color: var(--error); border: 1px solid var(--error); background: var(--fondo); border-radius: 3px; }
.captura .hecho { display: flex; align-items: center; gap: 4px; color: var(--hecho); font-weight: 600; font-size: 13px; white-space: nowrap; }
.captura small:empty { display: none; }
.captura [data-aviso], .captura [data-saldo] { display: block; margin-top: 2px; white-space: normal; }
.captura .pie-pago { display: flex; align-items: center; gap: var(--espacio); margin-top: 4px; }
.captura .pie-pago:not(:has(small:not(:empty), button:not([hidden]))) { display: none; }
.captura .pie-pago [data-otro] { margin-left: auto; height: 26px; }
/* Lo que el pago ya cubre en una caja: sus líneas de solo lectura, sobre las mismas columnas; apagadas, salvo en el
   pago que pasó entero a la caja que se arma. */
.captura .pasada { color: var(--texto-suave); }
.captura .pasada .rinde { background: transparent; border-color: transparent; color: inherit; }
tr.en-caja .captura .pasada { color: var(--texto); }
/* Las filas de un gasto sin comprobante, bajo la línea de su pago y a todo su ancho: sus campos —con el ancho de lo
   que lleva cada uno, que la página arma—, el monto y la ✕ que la quita. */
.captura .fila-sin { display: grid; column-gap: 3px; margin-top: 6px; align-items: center; }
.captura .fila-sin :is(input, select):not([data-monto]) { font-size: 12px; min-width: 0; }
.captura .fila-sin [data-monto] { text-align: right; }
/* Pasar a la caja se ve en la fila: mientras se registra, su acción dice «Pasando…»; al entrar, la fila se pinta de
   verde (entra) y se queda así, en su lugar (en-caja), mientras «Ver y firmar» se resalta (suma); el pago al que le
   queda algo vuelve marcado (recien). Un clic en «Tu rendición» resalta el gasto presionado y la fila de su pago con
   el mismo color, que se sostiene mientras la lista llega a ella (ir-a). La página espera a
   que cada animación termine para volver a dibujar la lista: cuánto dura cada una se decide aquí. */
tr.recien > td { animation: recien 1.5s ease-out; }
@keyframes recien { from { background: var(--nuevo); } }
tr.en-caja > td { background: var(--nuevo); }
/* El pago que cubre otra rendición sin terminar: en gris, en su lugar, con dónde está en vez de sus líneas. */
tr.tomado > td { background: var(--fondo-suave); color: var(--texto-suave); }
.captura .aviso-tomado { grid-area: 1 / 1 / 3 / 3; align-self: center; padding-left: 4px; white-space: normal; }
tr.entra > td { animation: entra .3s ease-out both; }
@keyframes entra { from { background: var(--fondo); } to { background: var(--nuevo); } }
:is(tr.ir-a > td, .lista-caja li.ir-a) { animation: ir-a 2s ease-out; }
@keyframes ir-a { 0%, 50% { background: var(--seleccion); } }
tr.ir-a > td:first-child, .lista-caja li.ir-a { box-shadow: inset 3px 0 var(--acento); }
[data-revisar].suma { animation: suma .8s ease-out; }
@keyframes suma { from { transform: scale(1.06); background: var(--nuevo); border-color: var(--hecho); color: var(--hecho); } }
@media (prefers-reduced-motion: reduce) { tr.entra > td, tr.ir-a > td, .lista-caja li.ir-a, tr.recien > td, [data-revisar].suma { animation-duration: 1ms; } }
/* Lo que le falta: al comprobante, con el formato del pago —en negrita lo pendiente y debajo su importe original—. */
.por-rendir { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; text-align: right; }
.por-rendir small { font-size: 11px; }
/* Dos datos en una línea, cada uno a su lado: la fecha de un pago y su monto. */
.entre { display: flex; justify-content: space-between; gap: calc(var(--espacio) * 2); }
.icono-clip { width: 16px; height: 16px; vertical-align: middle; }
/* «Tu rendición»: lo que la caja lleva, a la derecha de la lista y fijo al bajar por ella; cada gasto en dos líneas
   —de quién es y lo que se rinde; debajo, su número, su centro de costo y la fecha de su pago— con la ✕ que lo saca;
   al pie, el total y «Ver y firmar», con lo que falta para firmar debajo. */
.lista-caja { position: sticky; top: calc(var(--arriba, 0px) + var(--espacio)); margin-top: var(--espacio);
  max-height: calc(100vh - 42px - var(--arriba, 0px) - var(--espacio) * 2); display: flex;
  flex-direction: column; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo-suave); }
.lista-caja .cab { display: flex; align-items: baseline; gap: var(--espacio); padding: 10px 12px 8px; border-bottom: 1px solid var(--borde); }
.lista-caja h2 { font-size: 15px; margin: 0; }
.lista-caja .cerrar-lista { margin-left: auto; display: none; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--texto-suave); }
.lista-caja ul { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 48px; background: var(--fondo); }
.lista-caja li { display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; column-gap: 6px; padding: 6px 6px 6px 12px;
  border-bottom: 1px solid var(--borde); cursor: pointer; }
.lista-caja li:hover { background: var(--seleccion); }
.lista-caja li .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-caja li.falta small { color: var(--alerta); }  /* lo que impide firmar: el centro de costo que falta, el anulado */
.lista-caja li .m { text-align: right; }
.lista-caja li small { grid-column: 1 / 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-caja li .x { grid-row: 1 / 3; grid-column: 3; align-self: center; width: 26px; height: 26px; padding: 0; display: grid;
  place-items: center; color: var(--error); background: none; border: 1px solid transparent; border-radius: 3px; }
.lista-caja li .x:hover { border-color: var(--error); }
.lista-caja li.vacio { cursor: default; }
.lista-caja li.vacio:hover { background: none; }
.lista-caja li.vacio { display: block; color: var(--texto-suave); border: 0; padding: 14px 12px; }
.lista-caja .pie-lista { padding: 10px 12px 12px; border-top: 1px solid var(--borde); }
.lista-caja #falta-caja { margin: 6px 0 0; }
.lista-caja #falta-caja:empty { display: none; }
/* Los cargos de la cuenta, en su bloque arriba de los pagos: un título que dice qué son y, al final, una raya que los
   separa de los pagos. */
#cargos-caja tr.bloque td { background: var(--fondo-suave); font-weight: 600; }
#cargos-caja tr.bloque small { font-weight: 400; color: var(--texto-suave); }
#cargos-caja tr:last-child > td { border-bottom: 3px solid var(--borde); }
#cargos-caja .movimiento small { display: block; }
#nota-caja { display: block; margin: var(--espacio) 0; font-size: var(--tamano); }  /* dentro de la hoja, con la letra de los controles */
#nota-caja input { width: 100%; max-width: 640px; font-size: var(--tamano); }
.lista-caja .total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--espacio); }
.lista-caja .total b { font-size: 16px; }
.lista-caja .principal { width: 100%; height: 32px; }
[data-revisar]:disabled { opacity: .45; cursor: default; }
/* «Otro comprobante»: un menú bajo su botón, cada opción con su icono. */
.menu-otro { width: auto; min-width: 220px; gap: 0; padding: 4px; }
.menu-otro button { display: flex; align-items: center; gap: var(--espacio); text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 3px; }
.menu-otro button:hover { background: var(--seleccion); }
.menu-otro .icono-clip { color: var(--acento); }
/* El flotante de elegir, en el paso 1: empieza donde el comprobante de la fila, con columnas del ancho de lo que llevan. */
#paso-pagos .flotante { right: auto; width: 640px; }
#tabla-elegir { table-layout: fixed; }
#tabla-elegir .c-importe { width: 84px; }
#tabla-elegir .c-numero { width: 110px; }
#tabla-elegir .c-fecha { width: 88px; }
#tabla-elegir .c-botones { width: 112px; }
#tabla-elegir td { vertical-align: middle; }
#tabla-elegir td.prov { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tabla-elegir td.prov small { display: block; }
#tabla-elegir .acciones { display: flex; gap: 4px; justify-content: flex-end; }
#tabla-elegir .clip { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--acento); }
@media (max-width: 1274px) {
  .rendir { width: 962px; grid-template-columns: 962px; }
  .barra-paso .plegada { display: flex; }
  .lista-caja { position: fixed; top: 0; right: 0; bottom: 0; margin: 0; width: 320px; max-height: none; border-radius: 0; z-index: 12;
    transform: translateX(105%); transition: transform .15s ease-out; box-shadow: -8px 0 24px rgb(0 0 0 / .25); }
  .lista-caja.abierta { transform: none; }
  .lista-caja .cerrar-lista { display: grid; }
}
@media (max-width: 977px) { .rendir { margin: 0; } }
/* Calendario para elegir un día: resaltados, los que tienen algo; apagados, los que no se pueden elegir. */
/* El campo que abre el calendario: se ve como un campo, con su icono y su fecha; resaltado, si la eligió el usuario. */
.campo-fecha { display: flex; align-items: center; gap: 6px; min-width: 9em; border: 1px solid var(--borde); border-radius: 3px;
  background: var(--fondo); color: var(--texto); font-size: var(--tamano); }
.campo-fecha svg { color: var(--acento); }
.campo-fecha.elegida { border-color: var(--acento); background: var(--seleccion); font-weight: 600; }
.calendario { width: auto; }
.calendario .barra { justify-content: space-between; }
.calendario table { width: auto; }
.calendario th { position: static; text-align: center; }
.calendario td { padding: 1px; border: 0; }
.calendario td button { width: 2.6em; padding: 4px 0; border: 1px solid transparent; border-radius: 3px; background: none; }
.calendario td button:disabled { color: var(--borde); cursor: default; }
.calendario td button.con { background: var(--seleccion); border-color: var(--acento); font-weight: 600; }
.calendario td button.en-rango { box-shadow: inset 0 0 0 2px var(--acento); }
.calendario td button[aria-pressed=true] { background: var(--acento); color: #fff; }
/* Una cuenta: el signo, el concepto y su cifra, del ancho de lo que dice; lo que detalla a la línea de arriba va adentro. */
.cuenta { width: auto; margin-bottom: var(--espacio); }
.cuenta td:first-child { width: 1.5em; font-weight: 600; }
.cuenta td.monto { padding-left: calc(var(--espacio) * 6); font-variant-numeric: tabular-nums; }
.cuenta .dentro td { color: var(--texto-suave); }
.cuenta .dentro td:nth-child(2) { padding-left: calc(var(--espacio) * 3); }
/* Una tabla de pocas columnas, del ancho de lo que dice. */
.angosta { width: auto; margin-bottom: var(--espacio); }
.angosta td.monto, .angosta th.monto { padding-left: calc(var(--espacio) * 6); }
/* La cuenta de varios meses, una columna por cifra: los títulos se parten en líneas para que la tabla quepa a lo ancho. */
.meses th.monto { white-space: normal; }
/* Un texto largo en una celda se corta en dos líneas; completo, al pasar el cursor. */
.recorte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 22em; }
tbody tr[tabindex] { cursor: pointer; }
tbody tr[tabindex]:hover { background: var(--fondo-suave); }
tbody tr[aria-selected=true] { background: var(--seleccion); }
small { color: var(--texto-suave); overflow-wrap: anywhere; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px calc(var(--espacio) * 2); margin: 0; }
dt { color: var(--texto-suave); }
dd { margin: 0; overflow-wrap: anywhere; }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--espacio) * 2); }

[role=status] { min-height: 1.4em; margin: var(--espacio) 0; color: var(--texto-suave); }
.error { color: var(--error); }
.alerta { color: var(--alerta); }
.nuevo { background: var(--nuevo); }

pre { font: 12px/1.4 var(--letra-codigo); background: var(--fondo); border: 1px solid var(--borde); padding: var(--espacio); overflow: auto; max-height: calc(100vh - 220px); }

/* Documento: la cabecera dice quién, cuánto y de qué empresa; los bloques, su estado y su pago, como etiqueta y valor. */
#cabecera h2 { margin-bottom: 2px; }
#cabecera p { margin: 2px 0; }
.importe { font-size: 24px; font-weight: 600; }
.bloque { background: var(--fondo); border-left: 3px solid var(--acento); padding: var(--espacio) calc(var(--espacio) * 1.5); margin: var(--espacio) 0; }
.bloque h3 { border: 0; margin: 0 0 4px; }
.bloque.estado { border-left-color: var(--alerta); }
.bloque.estado h3 { color: var(--alerta); }
.solo-importe .extra { display: none; }
#detalle td:nth-child(2) { overflow-wrap: anywhere; }
#columnas { font-size: 12px; font-weight: normal; margin-left: var(--espacio); padding: 1px 6px; }
tfoot td { border-top: 2px solid var(--borde); }
.secundario { font-size: 12px; }
/* La acción que hace avanzar la tarea, como «Pasar a caja»: resaltada con el color de acento. */
.principal { background: var(--acento); color: #fff; border: 1px solid var(--acento); border-radius: 3px; font-weight: 600; }
/* Un flotante sobre la lista, como el de elegir comprobantes para un pago: un velo oscurece lo demás y quedan a la
   vista él, la fila de la que sale y, mientras muestra uno de sus comprobantes, el panel de la derecha. Va dentro
   del panel que se desplaza, para moverse con su fila. */
#velo { position: fixed; inset: 0; z-index: 10; background: rgb(0 0 0 / 0.3); }
.al-frente { position: relative; z-index: 11; }
tr.al-frente { background: var(--fondo); }
.dos-paneles > section:has(.flotante) { position: relative; }
.flotante { position: absolute; left: calc(var(--espacio) * 2); right: calc(var(--espacio) * 2); z-index: 11;
  display: flex; flex-direction: column; padding: var(--espacio) calc(var(--espacio) * 1.5); border: 1px solid var(--borde);
  border-radius: 6px; background: var(--fondo); box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); }
.flotante > p, .flotante > form { margin: 0 0 var(--espacio); }
.flotante [role=status]:empty { display: none; }
.flotante .desplazable { overscroll-behavior: contain; }
/* Lo que una celda propone mientras se escribe, bajo ella y encima de todo: cada opción con su nombre, debajo su
   documento y a la derecha su cifra; la marcada, con el color de la selección. */
.sugerencias { position: absolute; z-index: 12; width: 440px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 4px 0; list-style: none; background: var(--fondo); border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
.sugerencias li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 4px 10px; cursor: pointer; }
.sugerencias li:hover, .sugerencias li[aria-selected=true] { background: var(--seleccion); }
.sugerencias .nombre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sugerencias .doc { grid-column: 1; color: var(--texto-suave); }
.sugerencias .cuantos { grid-row: 1 / span 2; grid-column: 2; padding: 2px 8px; border-radius: 10px; background: var(--nuevo);
  color: var(--hecho); white-space: nowrap; }
.sugerencias .cuantos.cero { background: none; color: var(--texto-suave); }
.sugerencias mark { background: none; color: inherit; font-weight: bold; }
.sugerencias li.mas { display: block; cursor: default; background: none; color: var(--texto-suave); font-size: 12px; }
.sugerencias li.mas.error { color: var(--error); }
details > summary { cursor: pointer; font-weight: 600; margin: calc(var(--espacio) * 2) 0 var(--espacio); }
#resultado-sunat:empty { display: none; }
#estado-visor:empty { min-height: 0; margin: 0; }
/* Un solo panel: la pantalla que no muestra un documento al lado, como la hoja de una rendición
   (visores/rendicion/rendicion_firma.md), que se ve como el papel que se firma, o la caja que se revisa. */
.dos-paneles.una { grid-template-columns: minmax(0, 1fr); }
.dos-paneles.una > section + section { display: none; }
/* Los pasos 1 y 2 de la rendición (visores/rendicion/rendicion.md), Revisar y Datos de facturas abren el comprobante a pedido, encima de la
   derecha de la tabla, con un ancho fijo y tras el velo, sin moverla: queda a la vista la fila. Si la tabla no entra, se desplaza el
   paso entero, con su barra siempre al pie de la pantalla. */
.dos-paneles.una.cajon > section + section { display: block; position: fixed; top: 42px; right: 0; bottom: 0; z-index: 12;
  width: min(100vw, 640px); box-shadow: -8px 0 24px rgb(0 0 0 / 0.25); }
#cerrar-cajon { float: right; margin-left: var(--espacio); padding: 2px 4px; }
.dos-paneles:not(.cajon) #cerrar-cajon { display: none; }
#paso-revisar .desplazable { overflow: visible; }
.ver-doc { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; white-space: nowrap; }
.ver-doc .icono-clip { color: var(--acento); }
.hoja { max-width: 960px; margin: var(--espacio) 0 calc(var(--espacio) * 4); padding: calc(var(--espacio) * 3);
  border: 1px solid var(--borde); background: var(--fondo); overflow-x: auto; }
.hoja h1 { margin-bottom: 2px; }
.hoja th { vertical-align: bottom; border-bottom: 2px solid var(--texto); }
.hoja .monto { padding-right: 16px; }  /* aire entre un monto, a la derecha, y la columna que le sigue */
.hoja .grupo td { font-weight: 600; padding-top: calc(var(--espacio) * 2); border-bottom: 0; }
.hoja .sub td { font-weight: 600; border-bottom: 0; }
.hoja .total td { font-weight: 600; border-top: 2px solid var(--texto); border-bottom: 0; }
.hoja .codigo { background: var(--acento); color: #fff; font-weight: 600; border-radius: 3px; }  /* el código de lo que anexa: en el PDF con anexos, un botón */
.hoja .anexo { margin-top: calc(var(--espacio) * 4); padding-top: calc(var(--espacio) * 2); border-top: 1px dashed var(--borde); }
.hoja .firmar { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--espacio) * 3); }
.hoja .firma { margin: calc(var(--espacio) * 3) 0 0 auto; width: 280px; text-align: center; }
.hoja .zona-firma { height: 84px; border-bottom: 1px solid var(--texto); display: flex; align-items: center; justify-content: center; }
.hoja .zona-firma.soltar { border: 2px dashed var(--acento); color: var(--texto-suave); }
.hoja .zona-firma.sobre { background: var(--seleccion); }
.hoja .zona-firma img, .mi-firma img { max-height: 72px; max-width: 220px; }
.mi-firma img { display: block; margin: 4px 0; padding: 4px; border: 1px solid var(--borde); background: var(--fondo); cursor: grab; }

.hoja th { position: static; }  /* la hoja se lee entera: su cabecera no se queda fija al desplazarla */

/* Estados de cuenta: la franja donde se sube —toda la pantalla recibe los archivos que se sueltan—, lo que espera una
   respuesta de la tesorera y lo que no se cargó. */
.franja-subir { display: flex; flex-wrap: wrap; gap: calc(var(--espacio) * 1.5); align-items: center; margin-bottom: calc(var(--espacio) * 2);
  padding: var(--espacio) calc(var(--espacio) * 1.5); border: 1px dashed var(--texto-suave); border-radius: 6px; background: var(--fondo-suave); }
.franja-subir [role=status] { min-height: 0; margin: 0 0 0 auto; color: var(--texto); }
.soltando .franja-subir { border-color: var(--acento); background: var(--seleccion); }
.pide-respuesta, .no-entro { margin-bottom: calc(var(--espacio) * 2); padding-left: calc(var(--espacio) * 1.5); border-left: 3px solid var(--alerta); }
.no-entro { border-left-color: var(--error); }
.cuentas-banco { margin-bottom: calc(var(--espacio) * 2); table-layout: fixed; }  /* las columnas, en el mismo sitio en la tabla de cada empresa */
.cuentas-banco td small { display: block; }
.marca { padding: 1px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
/* Si los saldos de una cuenta cuadran, falta con qué validarlos o no cuadran: el hecho en la marca, el motivo debajo. */
.marca.ok { background: var(--nuevo); }
.marca.falta { background: #fbe7d6; color: var(--alerta); }
.marca.mal { background: #f8d7d4; color: var(--error); }

/* Revisión de rendiciones: lo que Cuentas por Pagar decidió o cambió de un gasto, y lo que quien rinde ve de eso. El
   rechazo y la alerta de lo ya rechazado llevan el motivo debajo, en su color; nada cambia la forma de la fila. */
small.debajo, .cambiado, .rechazado small, .antes small { display: block; white-space: normal; }
/* La fila de un gasto: las fechas, el monto y la acción ocupan lo justo; el resto se lo reparten el comprobante y el
   centro de costo, el comprobante con más, porque lleva el proveedor y sus alertas. */
.justo { width: 1%; white-space: nowrap; }
.revision-gastos th, .revision-gastos td { padding-left: 4px; padding-right: 4px; }
.revision-gastos th.justo { white-space: normal; }  /* «Fecha de pago» se parte: la columna mide lo que su fecha */
.revision-gastos .comprobante { width: 60%; min-width: 8em; }
.revision-gastos .centro { width: 40%; min-width: 7em; }
.pago-banco + .pago-banco { margin-top: 4px; }
/* La cuenta contable del gasto (bd/asientos.md): un campo de forma fija; la sugerida, en el cuadro amarillo; la que pone
   la configuración, en gris y sin elegir. Sin plan contable, la columna no se ve. */
.revision-gastos .cuenta-contable { width: 250px; min-width: 250px; }
.sin-cuentas .cuenta-contable { display: none; }
.campo-cuenta { position: relative; display: flex; align-items: center; gap: 4px; height: 30px; }
.campo-cuenta input { flex: 1; min-width: 0; height: 30px; }
.campo-cuenta .puesta { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; padding: 0 8px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 3px; background: var(--fondo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo-cuenta .puesta.sugerida { border: 1px dashed #c9a227; background: #fffbea; }
.campo-cuenta .puesta.fija { cursor: default; background: var(--fondo-suave); color: var(--texto-suave); }
.campo-cuenta button { flex: none; height: 30px; }
.campo-cuenta .quitar { width: 30px; padding: 0; display: grid; place-items: center; }
/* «No es esta» va dentro del cuadro de la cuenta, gris y sin borde: es parte del campo, no una acción de la fila, y no
   se confunde con la ✕ roja que rechaza el gasto. */
.campo-cuenta .puesta:has(+ .quitar) { padding-right: 30px; }
.campo-cuenta .puesta + .quitar { position: absolute; right: 1px; top: 1px; width: 28px; height: 28px; border: 0;
  background: transparent; color: var(--texto-suave); }
.campo-cuenta .puesta + .quitar:hover { color: var(--texto); background: rgb(0 0 0 / .06); }
.campo-cuenta .usar { white-space: nowrap; border: 1px solid var(--acento); border-radius: 3px; background: var(--fondo); color: var(--acento);
  box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.campo-cuenta .usar:hover { background: var(--seleccion); }
#opciones-cuenta { position: fixed; width: 420px; }
/* El asiento de lo aprobado: un flotante grande tras el velo; lo que falta, en el color de la alerta. */
.flotante.asiento { position: fixed; top: 56px; left: 4vw; right: 4vw; bottom: 24px; }
.flotante.asiento .desplazable { overflow: auto; }
.flotante.asiento table { margin-bottom: calc(var(--espacio) * 2); }
.flotante.asiento tr.voucher td { background: var(--fondo-suave); font-weight: 600; }
.flotante.asiento .falta { color: var(--alerta); font-weight: 600; }
.cerrar-flotante { margin-left: auto; width: 30px; height: 30px; padding: 0; }
.pago-banco small.operacion { white-space: nowrap; }
/* Rechazar, el lápiz y aprobar en línea; la decisión tomada queda pintada en su color: verde aprobado, rojo rechazado. */
.acciones-gasto { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px; align-items: center; }
.acciones-gasto small { grid-column: 1 / -1; }
.acciones-gasto [data-aprueba] { color: #1e6b34; }
.acciones-gasto [data-rechaza] { color: var(--error); }
.acciones-gasto [data-aprueba][aria-pressed=true] { background: #1e6b34; border-color: #1e6b34; color: #fff; }
.acciones-gasto [data-rechaza][aria-pressed=true] { background: var(--error); border-color: var(--error); color: #fff; }
.acciones-caja { display: flex; gap: 4px; align-items: center; }
.acciones-caja [data-flujo]:not(:disabled), #bajar-elegidas:not(:disabled) { color: var(--acento); }
#bajar-elegidas:disabled { cursor: default; }  /* apagado hasta elegir alguna: se ve gris */
[aria-busy=true] { cursor: progress; }
button.bajado { animation: bajado .3s ease-out; }  /* lo bajado se ve donde se presionó */
@keyframes bajado { from { background: var(--nuevo); border-color: var(--hecho); color: var(--hecho); } }
small.error:empty { display: none; }
.rechazado { display: block; margin-top: 2px; color: var(--error); font-weight: 600; white-space: normal; }
.rechazado small { font-weight: 400; }
tr.quitada > td:not(:last-child) { color: var(--texto-suave); }  /* el cargo de la cuenta quitado: queda para la próxima rendición */
.cambiado { color: var(--alerta); }
.antes { display: block; margin-top: 2px; color: var(--alerta); font-weight: 600; }
.antes small { font-weight: 400; }
.aprobado { color: #1e6b34; font-weight: 600; white-space: nowrap; }
.rechazo-de { color: var(--error); font-weight: 600; }
.decision { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.decision input { flex: 1; min-width: 12em; }
.revision-acciones { white-space: nowrap; width: 1%; }
/* El motivo de un rechazo, en la misma columna: la casilla arriba, ocupando lo que miden «Rechazar» y «Cancelar» debajo. */
.revision-acciones .decision { display: grid; grid-template-columns: auto auto; justify-content: start; }
.revision-acciones .decision input { grid-column: 1 / -1; width: 0; min-width: 100%; }
/* Lo que se cambia con el lápiz no ensancha la tabla: si no cabe, se desplaza dentro de su fila. */
.edicion .dentro { width: 0; min-width: 100%; overflow-x: auto; }
.edicion td { background: var(--fondo-suave); }
.edicion fieldset { border: 1px solid var(--borde); margin: 0 0 var(--espacio); padding: var(--espacio); }
.edicion legend { font-size: 12px; color: var(--texto-suave); }
.resumen-revision { display: flex; gap: calc(var(--espacio) * 2); flex-wrap: wrap; margin: var(--espacio) 0; }
.resumen-revision > div { border: 1px solid var(--borde); border-radius: 4px; padding: 6px 10px; }
textarea { font: inherit; width: 100%; min-height: 4em; }

/* Datos de facturas (visores/asignar/asignar.md): la tabla de ancho fijo, centrada; el proveedor en hasta dos renglones; el
   monto como en Excel contable —la moneda a la izquierda, la cifra a la derecha—; el centro de costo con la forma del campo
   de la cuenta; la fila guardada, en verde. El documento se abre a pedido encima, como en la rendición. */
.asignar { width: 1270px; margin: 0 auto; }
@media (max-width: 1330px) { .asignar { margin: 0; } }
.tabla-asignar { table-layout: fixed; width: 100%; }
/* Revisar, igual: la caja mide siempre lo mismo y se centra, cada columna con el ancho de su texto real y lo que queda
   para el comprobante; en una pantalla que no le da el ancho, se desplaza de lado entera, sin que nada se encoja. */
.revision-caja { width: 1176px; margin: 0 auto; }
/* Sin desplazamiento propio: el encabezado de los gastos se fija contra lo que se desplaza (encabezadoFijo, comun.js), y a
   lo ancho se desplaza el panel entero. */
.revision-caja .desplazable { overflow: visible; }
@media (max-width: 1236px) { .revision-caja { margin: 0; } }
.tabla-revisar { table-layout: fixed; width: 100%; }
.tabla-revisar th.elegir { width: 34px; }
.tabla-revisar th.emision, .tabla-revisar th.pago { width: 88px; }
.tabla-revisar th.comprobante { width: auto; }
.tabla-revisar th.monto { width: 84px; }
.tabla-revisar th.centro { width: 160px; }
.tabla-revisar th.flujo-caja { width: 180px; }
.tabla-revisar th.cuenta-contable { width: 230px; }
.tabla-revisar th.revision-acciones { width: 112px; }
.tabla-asignar th.elegir { width: 34px; }
.tabla-asignar th.emision { width: 96px; }
.tabla-asignar th.comprobante { width: auto; }
.tabla-asignar th.monto { width: 110px; }
.tabla-asignar th.centro-costo { width: 150px; }
.tabla-asignar th.flujo-caja { width: 170px; }
.tabla-asignar th.cuenta-contable { width: 220px; }
.tabla-asignar th.pago { width: 178px; }
.tabla-asignar th.accion { width: 64px; }
/* El pago (conocimiento_pago_facturas.md): la fecha angosta, que abre el calendario, y la flecha con lo demás; debajo, la
   detracción; lo vencido en rojo y lo sugerido en amarillo, como el resto de la fila. Sus fechas se abren debajo. */
.campo-pago { position: relative; display: flex; align-items: center; gap: 4px; height: 30px; }
.caja-fecha { flex: 1; min-width: 0; display: flex; align-items: center; height: 30px; border: 1px solid var(--borde); border-radius: 3px; background: var(--fondo); }
.caja-fecha.sugerida { border: 1px dashed #c9a227; background: #fffbea; }
.caja-fecha input { flex: 1; min-width: 0; width: 100%; height: 28px; border: 0; background: transparent; padding: 0 0 0 6px; cursor: pointer; }
.caja-fecha input::-webkit-calendar-picker-indicator, .pago-partes input[type=date]::-webkit-calendar-picker-indicator { display: none; }
.caja-fecha input.vacia::-webkit-datetime-edit { visibility: hidden; }
.caja-fecha .no-es { border: 0; background: none; color: var(--texto-suave); padding: 0 5px; }
.caja-fecha .usar { white-space: nowrap; border: 1px solid var(--acento); border-radius: 3px; background: var(--fondo); color: var(--acento);
  height: 24px; padding: 0 4px; margin-right: 2px; display: flex; align-items: center; gap: 2px; font-size: 13px; }
.campo-pago .mas { flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.campo-pago .chip { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px;
  border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.detenida { background: #fdecea; color: var(--error); }
.chip.varias { border: 1px solid var(--borde); background: var(--fondo); }
.chip.varias.sugerida { border: 1px dashed #c9a227; background: #fffbea; }
.campo-pago .puesta.fija { flex: 1; }
.menu-pago { position: absolute; right: 0; top: 32px; z-index: 5; display: flex; flex-direction: column; min-width: 230px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.menu-pago[hidden] { display: none; }
.menu-pago button { border: 0; border-radius: 0; text-align: left; padding: 8px 12px; background: none; }
.menu-pago button:hover { background: var(--fondo-suave); }
.pago .vencida, .pago-partes .vencida, input.vencida { color: var(--error) !important; font-weight: 600; }
.det-linea { display: inline-flex; align-items: center; margin-top: 3px; height: 22px; padding: 0 6px; font-size: 13px;
  border: 1px solid var(--borde); border-radius: 3px; background: var(--fondo); color: var(--texto-suave); }
.det-linea.sug { border: 1px dashed #c9a227; background: #fffbea; }
.punto { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e08a00; }
.partes-pago { border-left: 3px solid var(--acento); padding: 4px 10px 6px; }
.partes-pago .modos { display: inline-flex; border: 1px solid var(--acento); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.partes-pago .modo { border: 0; border-radius: 0; height: 26px; padding: 0 12px; background: var(--fondo); color: var(--acento); }
.partes-pago .modo[aria-pressed="true"] { background: var(--acento); color: #fff; }
.partes-pago[data-modo="imp"] .col-pct { display: none; }
.tabla-partes { width: 880px; table-layout: fixed; border-collapse: collapse; }
.tabla-partes th { text-align: left; font-weight: 600; color: var(--texto-suave); padding: 2px 8px; }
.tabla-partes td { padding: 3px 8px; height: 30px; }
.tabla-partes .c-fecha { width: 140px; } .tabla-partes .c-pct { width: 150px; } .tabla-partes .c-imp { width: 150px; }
.tabla-partes .c-estado { width: 240px; } .tabla-partes .c-accion { width: 200px; }
.tabla-partes td.acc-fecha { white-space: nowrap; }
.tabla-partes th.monto, .tabla-partes td.monto { text-align: right; }
.tabla-partes input[type=date] { width: 124px; height: 28px; cursor: pointer; }
.tabla-partes input[type=date].sugerida { border: 1px dashed #c9a227; background: #fffbea; }
.tabla-partes .pct input { width: 64px; height: 28px; text-align: right; }
.tabla-partes .imp { width: 110px; height: 28px; text-align: right; }
.tabla-partes tr.detraccion td { color: var(--texto-suave); border-top: 1px dashed var(--borde); }
.tabla-partes .dividir { height: 26px; padding: 0 8px; }
.tabla-partes .quitar { color: var(--error); border: 0; background: none; }
.partes-pago .pie-partes { margin-top: 4px; } .partes-pago .pie-partes small { color: var(--texto-suave); }
.partes-pago .aviso-pago { color: #9a5b00; margin-top: 4px; }
.partes-pago.detener { display: flex; gap: 8px; align-items: center; } .partes-pago.detener select { width: 240px; height: 30px; }
.revision-gastos .proveedor { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.concepto { display: flex; gap: 6px; margin-top: 1px; color: var(--texto-suave); font-size: 13px; white-space: nowrap; }
.concepto .texto { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.concepto .mas { flex: none; }
.revision-gastos .ver-doc { max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-size: 13px; }
.tabla-asignar tr.hecha > td { background: var(--nuevo); }
/* El reparto de una factura: sus partes debajo de su fila, con las mismas columnas, marcadas por una franja. */
.revision-gastos tr.parte > td { background: var(--fondo-suave); border-top: 0; padding-top: 3px; padding-bottom: 3px; }
.revision-gastos tr.parte .item { padding-left: 10px; border-left: 3px solid var(--acento); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.revision-gastos tr.parte.pie small { color: var(--texto-suave); }
.revision-gastos tr.parte.pie button { margin-right: 8px; }
.monto-parte { width: 100%; height: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.tabla-asignar td.vacio { padding: calc(var(--espacio) * 2) 4px; color: var(--texto-suave); }
.sin-centros .centro-costo, .sin-flujos .flujo-caja { display: none; }
.importe-fila { display: flex; justify-content: space-between; gap: 6px; font-variant-numeric: tabular-nums; }
.importe-fila .moneda { color: var(--texto-suave); }
.campo-centro { display: flex; align-items: center; gap: 4px; height: 30px; }
.campo-centro select { flex: 1; min-width: 64px; height: 30px; }
.campo-centro select.sugerida { border: 1px dashed #c9a227; background: #fffbea; }
.campo-centro .puesta { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; padding: 0 8px; border: 1px solid var(--borde);
  border-radius: 3px; background: var(--fondo-suave); color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo-centro button { flex: none; height: 30px; }
.campo-centro .quitar { width: 30px; padding: 0; display: grid; place-items: center; }
.campo-centro .usar { white-space: nowrap; border: 1px solid var(--acento); border-radius: 3px; background: var(--fondo); color: var(--acento);
  box-shadow: 0 1px 2px rgb(0 0 0 / .15); overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex: 0 1 auto; min-width: 0; }
.guardar { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; color: var(--hecho); border-color: var(--hecho); }
.guardar:disabled { color: var(--texto-suave); border-color: var(--borde); opacity: .5; }
.guardar[aria-pressed=true] { background: var(--hecho); border-color: var(--hecho); color: #fff; }
.guardar[aria-busy=true] { width: auto; padding: 0 6px; font-size: 12px; }
.contador.falta { color: var(--alerta); }
.contador.listo { color: var(--hecho); }

/* Sesión (sesion.md): la pantalla de entrada y la de la contraseña, una caja angosta al centro; quien entró y su menú, a
   la derecha del encabezado; y el aviso de cierre, arriba, sobre todo lo demás. */
.acceso { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; background: var(--fondo-suave); }
.acceso-caja { width: 360px; margin-top: 12vh; padding: calc(var(--espacio) * 3); background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 6px; display: grid; gap: calc(var(--espacio) * 1.5); }
.acceso-caja h1 { font-size: 20px; }
.acceso-caja p { margin: 0; color: var(--texto-suave); }
.acceso-caja p:empty { display: none; }
.acceso-caja label { display: grid; gap: 4px; }
.acceso-caja input, .acceso-caja button { min-height: 32px; }
/* Quien entró: un círculo con sus iniciales y su nombre, que se reconoce como su cuenta; abre una tarjeta con quién es y
   lo que hace con su cuenta, con «Salir» aparte al final. */
.cuenta-usuario { margin-left: auto; display: flex; gap: calc(var(--espacio) * 2); align-items: center; align-self: center; }
.cuenta-usuario details { position: relative; }
.cuenta-usuario summary { display: flex; align-items: center; gap: var(--espacio); height: 34px; padding: 0 6px 0 3px; border: 1px solid var(--borde);
  border-radius: 17px; cursor: pointer; list-style: none; white-space: nowrap; }
.cuenta-usuario summary::-webkit-details-marker { display: none; }
.cuenta-usuario summary:hover, .cuenta-usuario details[open] summary { background: var(--seleccion); border-color: var(--seleccion); }
.cuenta-usuario summary .icono { width: 16px; height: 16px; color: var(--texto-suave); transition: transform .15s; }
.cuenta-usuario details[open] summary .icono { transform: rotate(180deg); }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--acento); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.avatar.grande { width: 40px; height: 40px; font-size: 15px; }
.menu-cuenta { position: absolute; right: 0; z-index: 5; margin-top: 6px; min-width: 270px; padding: 6px 0; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); display: grid; }
.menu-cuenta .quien { display: flex; align-items: center; gap: calc(var(--espacio) * 1.5); padding: var(--espacio) calc(var(--espacio) * 2) calc(var(--espacio) * 1.5);
  margin-bottom: 6px; border-bottom: 1px solid var(--borde); }
.menu-cuenta .quien b { display: block; }
.menu-cuenta .quien small { display: block; color: var(--texto-suave); }
.menu-cuenta a, .menu-cuenta button { display: flex; align-items: center; gap: calc(var(--espacio) * 1.5); min-height: 32px; padding: 4px calc(var(--espacio) * 2);
  text-align: left; border: 0; border-radius: 0; background: none; color: var(--texto); font: inherit; text-decoration: none; cursor: pointer; }
.menu-cuenta .icono { width: 18px; height: 18px; flex: none; color: var(--texto-suave); }
.menu-cuenta a:hover, .menu-cuenta button:hover { background: var(--fondo-suave); }
.menu-cuenta hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--borde); }
/* Menú de pantallas (visores/pantallas.md): junto al título, un grupo por tarea que se abre con sus pantallas; cada
   uno, y cada pantalla dentro, con la cifra de lo que espera. No ocupa ancho: cabe en la línea del título. */
.menu-pantallas { display: flex; gap: 2px; align-items: baseline; }
.menu-pantallas > a, .menu-pantallas summary { display: inline-block; padding: 5px 10px; border-radius: 4px; color: var(--acento);
  text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; }
.menu-pantallas summary::-webkit-details-marker { display: none; }
.menu-pantallas details { position: relative; }
.menu-pantallas details[open] summary, .menu-pantallas > a:hover, .menu-pantallas summary:hover { background: var(--seleccion); }
.menu-pantallas .actual { color: var(--texto); font-weight: 600; }
.desplegable { position: absolute; left: 0; z-index: 5; margin-top: 4px; min-width: 260px; padding: var(--espacio) 0; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); display: grid; }
.desplegable a { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio); min-height: 32px;
  padding: 4px calc(var(--espacio) * 2); color: var(--acento); text-decoration: none; }
.desplegable a:hover { background: var(--fondo-suave); }
.cifra { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 10px; background: var(--alerta); color: #fff;
  font-size: 12px; font-weight: 600; text-align: center; }
/* Inicio: una fila por lo que le toca a quien entró, con el botón que lleva a hacerlo. */
.inicio { padding: calc(var(--espacio) * 2) calc(var(--espacio) * 3); }
.inicio table { width: 800px; border-collapse: collapse; }
.inicio td { padding: var(--espacio) calc(var(--espacio) * 1.5) var(--espacio) 0; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.inicio td.donde { width: 200px; color: var(--texto-suave); }
.inicio td.accion { width: 140px; text-align: right; }
.inicio #nota { color: var(--texto-suave); }
a.boton { display: inline-block; padding: 5px 14px; text-decoration: none; }
.aviso-sesion { position: sticky; top: 0; z-index: 10; padding: var(--espacio) calc(var(--espacio) * 2); background: #fff4e5;
  border-bottom: 1px solid var(--alerta); color: var(--alerta); font-weight: 600; }
.aviso-sesion button { margin-left: var(--espacio); }
/* «Ver como»: el administrador mira la pantalla de otra persona; arriba, siempre a la vista, y con cómo volver. */
.viendo { position: sticky; top: 0; z-index: 11; padding: var(--espacio) calc(var(--espacio) * 2); background: #e8f0fe;
  border-bottom: 1px solid var(--acento); color: var(--texto); }
.viendo button { margin-left: var(--espacio); }
.lista-personas { width: 800px; border-collapse: collapse; }
.lista-personas td, .lista-personas th { padding: 6px calc(var(--espacio) * 1.5) 6px 0; border-bottom: 1px solid var(--borde); text-align: left; }
.lista-personas th { font-size: 12px; color: var(--texto-suave); font-weight: normal; }
/* encabezadoFijo (comun.js): la fila de encabezados, a la vista al bajar, bajo la barra fija; su raya, en la propia celda. */
.encabezado-fijo thead th { position: sticky; top: var(--bajo-barra, 0px); z-index: 1; box-shadow: inset 0 -1px 0 var(--borde); }
/* Las partes del comprobante repartido en la rendición, debajo de su línea y sobre sus columnas (visores/reparto.js):
   su nombre o su %, su centro de costo y lo que le toca; marcadas por una franja. */
.captura .parte-rinde { display: grid; grid-template-columns: 372px 128px 104px; align-items: center; min-height: 30px; background: #f6f8fb; }
.captura .parte-rinde .de-quien { padding-left: 14px; border-left: 3px solid var(--acento); line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.captura .parte-rinde .de-centro { padding-left: 6px; min-width: 0; }
.captura .parte-rinde .de-centro select { width: 100%; }
.captura .parte-rinde .de-accion { text-align: right; padding-right: 8px; }
.captura .parte-rinde.pie { padding: 2px 0 2px 14px; display: block; }
.captura .parte-rinde.pie button { height: 26px; }
/* Por porcentaje, en la rendición y en Datos de facturas y Revisar: la casilla del % y, en la última, el % que queda. */
.por-pct { display: flex !important; align-items: center; gap: 6px; }
.por-pct .pct input { width: 64px; height: 28px; text-align: right; }
.por-pct .pct-fijo { display: inline-block; min-width: 64px; text-align: right; padding-right: 13px; }
.por-pct .quita { margin-left: auto; }
/* Claves de SUNAT: la lista de empresas, con su RUC y quién puso las claves debajo, y la ventana para ponerlas, al centro
   tras el velo. */
.lista-claves td small { display: block; color: var(--texto-suave); }
.lista-claves .ok, #estado .ok { color: var(--hecho); font-weight: 600; }
.lista-claves .no, .lista-claves .aviso, #estado .aviso { color: var(--alerta); font-weight: 600; }
.flotante.claves { position: fixed; top: 80px; left: 50%; right: auto; width: 460px; transform: translateX(-50%); align-items: stretch;
  flex-wrap: nowrap; gap: 0; }  /* es un form: sin el acomodo en fila de los formularios */
.flotante.claves label { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--espacio); font-weight: 600; }
.flotante.claves small { color: var(--texto-suave); }
.flotante.claves .barra:last-child { justify-content: flex-end; margin-top: var(--espacio); }
.flotante.claves .barra:first-child { flex-wrap: nowrap; align-items: center; }
.flotante.claves h2 { margin: 0; font-size: 16px; }
.flotante.claves details { margin-bottom: var(--espacio); }
.flotante.claves summary { cursor: pointer; color: var(--texto-suave); margin-bottom: var(--espacio); }
/* Los campos de la ventana de claves, con su recuadro completo y parejo —el borde hundido del navegador parece cortado—
   y el foco en el color de acento. */
.flotante.claves input { height: 32px; border: 1px solid #9aa0a6; border-radius: 4px; padding: 4px 8px; background: var(--fondo); font-weight: 400; }
.flotante.claves input:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento); }