/* ════════════════════════════════════════════════════════════════════
   FACTURACIÓN — la ventana de emisión y la representación impresa
   Portada del prototipo aprobado el 16-10-2026 (plan de Facturación, E0):
   cintillo, avisos, cabecera plegable, grilla de líneas, pie de dos niveles,
   revisión con vista previa y línea de tiempo de lo emitido.

   Usa el sistema de diálogo (dialog-system.css): .campo, .campo-grupo, .g*,
   .btn, .btn-sm y .estado vienen de allá. Acá va sólo lo propio, colgado de
   .fac para no tocar ninguna otra pantalla.
   ════════════════════════════════════════════════════════════════════ */

/* Los colores van en la raíz de la ventana y también en la barra de botones de un diálogo, que MudBlazor dibuja
   fuera del contenido: sin ellos el botón primario queda blanco sobre blanco. */
.fac,
.fac-acciones,
.fac-pagina {
    --dlg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --dlg-primary: var(--mud-palette-primary);
    --dlg-surf: var(--mud-palette-surface);
    --dlg-surf2: var(--mud-palette-background-gray);
    --dlg-lines: var(--mud-palette-lines-default);
    --dlg-lines2: var(--mud-palette-table-lines);
    --dlg-txt: var(--mud-palette-text-primary);
    --dlg-dim: var(--mud-palette-text-secondary);
    --dlg-dim2: var(--mud-palette-text-disabled);
    --dlg-verde: color-mix(in srgb, var(--mud-palette-success) 55%, var(--mud-palette-text-primary));
    --dlg-verde-bg: color-mix(in srgb, var(--mud-palette-success) 13%, var(--mud-palette-surface));
    --dlg-rojo: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
    --dlg-rojo-bg: color-mix(in srgb, var(--mud-palette-error) 11%, var(--mud-palette-surface));
    --dlg-ambar: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-text-primary));
    --dlg-ambar-bg: color-mix(in srgb, var(--mud-palette-warning) 17%, var(--mud-palette-surface));
    --dlg-ambar-bd: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-surface));
    --fac-azul: color-mix(in srgb, var(--mud-palette-info) 60%, var(--mud-palette-text-primary));
    --fac-azul-bg: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface));
    --fac-sel: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --dlg-margen: 14px;
}

.fac {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    font-size: 13px;
    color: var(--dlg-txt);
    background: var(--dlg-surf);
}

.fac .mono { font-family: var(--dlg-mono); font-variant-numeric: tabular-nums; }
.fac .dim { color: var(--dlg-dim); }
.fac .scroll { flex: 1; min-height: 0; overflow: auto; }
.fac kbd { font-family: var(--dlg-mono); font-size: 10.5px; background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-bottom-width: 2px; border-radius: 4px; padding: 1px 4px; color: var(--dlg-dim); }
.fac .btn, .fac-acciones .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fac-acciones { display: flex; gap: 8px; justify-content: flex-end; width: 100%; }
.fac-acciones .btn:disabled { opacity: .42; cursor: not-allowed; filter: none; }
.fac .btn.out { border-color: var(--dlg-lines); background: var(--dlg-surf); }
.fac .btn.out:hover { border-color: var(--dlg-primary); color: var(--dlg-primary); }
.fac .btn:disabled { opacity: .42; cursor: not-allowed; filter: none; }
.fac .btn-sm { margin-left: 0; }

/* ── Cintillo y avisos ── */
.fac .cintillo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 14px; font-size: 12px; font-weight: 600; background: var(--fac-azul-bg); color: var(--fac-azul); border-bottom: 1px solid color-mix(in srgb, var(--fac-azul) 25%, transparent); flex-shrink: 0; }
.fac .cintillo .pasos { margin-left: auto; }
/* Lo importado de otro sistema: la etiqueta de origen en vez de «Emitida en producción» y los pasos (31-10-2026). */
.fac .cintillo .origen { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--fac-azul-bg); color: var(--fac-azul); border: 1px solid color-mix(in srgb, var(--fac-azul) 30%, transparent); }
.fac .aviso { display: flex; align-items: center; gap: 9px; padding: 7px 14px; background: var(--dlg-ambar-bg); border-bottom: 1px solid var(--dlg-ambar-bd); color: var(--dlg-ambar); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.fac .aviso.rojo { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); border-color: color-mix(in srgb, var(--dlg-rojo) 35%, transparent); }
.fac .aviso.verde { background: var(--dlg-verde-bg); color: var(--dlg-verde); border-color: color-mix(in srgb, var(--dlg-verde) 35%, transparent); }
.fac .aviso .der { margin-left: auto; }

/* ── Pasos ── */
.fac .pasos { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--dlg-dim); flex-wrap: wrap; }
.fac .pasos .p { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--dlg-lines); background: var(--dlg-surf); white-space: nowrap; }
.fac .pasos .p.on { background: var(--dlg-primary); border-color: var(--dlg-primary); color: var(--mud-palette-primary-text); font-weight: 700; }
.fac .pasos .p.hecho { color: var(--dlg-verde); border-color: color-mix(in srgb, var(--dlg-verde) 35%, transparent); }

/* ── Cabecera plegable ── */
.fac .cab { border-bottom: 1px solid var(--dlg-lines); flex-shrink: 0; }
.fac .cab-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; user-select: none; }
.fac .cab-bar .chev { transition: transform .15s; color: var(--dlg-dim); }
.fac .cab.plegada .chev { transform: rotate(-90deg); }
.fac .cab-bar .tit { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-primary); white-space: nowrap; }
.fac .cab-bar .resumen { color: var(--dlg-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fac .cab-bar .falta { margin-left: auto; color: var(--dlg-rojo); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.fac .cab-campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; padding: 2px 14px 14px; }
.fac .cab.plegada .cab-campos { display: none; }
/* El sistema alinea los campos de un grupo por abajo: con un giro de dos líneas, su rótulo subía y el de «Dirección y
   comuna» quedaba más abajo en el mismo renglón (17-10-2026). Acá los rótulos van arriba y las cajas de solo lectura
   del renglón se estiran a la misma altura. */
.fac .cab-campos .grupo-campos { align-items: stretch; }
.fac .cab-campos .campo.ro > .val { flex: 1; }
.fac .grupo-rot .pista { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--dlg-dim2); }

/* «Más opciones» de la cotización (27-10-2026): lo que no lleva toda cotización, plegado. La barra se lee como el
   rótulo de un grupo, con un resumen en gris de lo que hay adentro. */
.fac .mas-opciones { display: flex; flex-direction: column; gap: 8px; }
.fac .mas-opciones-bar { display: flex; align-self: flex-start; justify-content: flex-start; align-items: baseline; gap: 8px; padding: 0; max-width: 100%; border: 0; background: none; cursor: pointer; text-align: left; font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-primary); }
.fac .mas-opciones-bar .chev { width: 10px; color: var(--dlg-dim); }
.fac .mas-opciones-bar .pista { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--dlg-dim2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Autocompletar del cliente */
.fac .ac-lista { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 3px; background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 8px; box-shadow: 0 12px 30px rgba(15, 30, 45, .22); max-height: 260px; overflow: auto; }
.fac .ac-op { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 8px 10px; cursor: pointer; align-items: center; border: 0; background: none; width: 100%; text-align: left; color: var(--dlg-txt); }
.fac .ac-op:hover, .fac .ac-op.sel { background: var(--fac-sel); }
.fac .ac-op .k { font-family: var(--dlg-mono); font-size: 12px; color: var(--dlg-dim); }
.fac .ac-lista .ac-sin { padding: 9px 10px; color: var(--dlg-dim); font-size: 12px; }
.fac .ac-op .n { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ─── El catálogo de venta de la cotización (27-10-2026) ───
   Flota anclado al código de la línea: lo ubica js/catalogo-flotante.js con position: fixed, así no se recorta en la
   grilla con scroll ni empuja los campos de abajo. Nace invisible y aparece cuando el JS lo deja en su sitio. El estado
   que cambia va en atributos (aria-selected) y no en la clase, que el JS también toca. Vive dentro del campo del código,
   que es «mono»: la letra se devuelve a la de la pantalla. */
.fac .cat-panel { position: fixed; z-index: 30; visibility: hidden; font-family: var(--mud-typography-default-family, system-ui, sans-serif); font-variant-numeric: normal; display: flex; flex-direction: column; background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 12px; box-shadow: 0 18px 48px rgba(15, 30, 45, .28), 0 2px 8px rgba(15, 30, 45, .12); overflow: hidden; }
.fac .cat-panel.ubicado { visibility: visible; animation: cat-aparecer .14s ease-out; }
@keyframes cat-aparecer { from { opacity: 0; } to { opacity: 1; } }
.fac .cat-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--dlg-lines2); background: var(--dlg-surf2); flex-shrink: 0; }
.fac .cat-tit { font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--dlg-primary); }
.fac .cat-cuenta { font-size: 11.5px; color: var(--dlg-dim); }
.fac .cat-lista { flex: 1; min-height: 0; overflow: auto; padding: 5px; }
.fac .cat-op { display: grid; grid-template-columns: minmax(0, 1fr) auto 132px; align-items: center; gap: 16px; width: 100%; padding: 9px 12px 9px 14px; border: 0; border-radius: 8px; background: none; color: var(--dlg-txt); text-align: left; cursor: pointer; }
.fac .cat-op + .cat-op { margin-top: 1px; }
.fac .cat-op:hover { background: var(--dlg-surf2); }
.fac .cat-op[aria-selected="true"] { background: var(--fac-sel); box-shadow: inset 3px 0 0 var(--dlg-primary); }
.fac .cat-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fac .cat-nom { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fac .cat-cod { display: flex; align-items: center; gap: 8px; font-family: var(--dlg-mono); font-size: 11.5px; color: var(--dlg-dim); white-space: nowrap; overflow: hidden; }
.fac .cat-uni { padding: 0 5px; border: 1px solid var(--dlg-lines); border-radius: 4px; font-size: 10px; line-height: 15px; color: var(--dlg-dim2); }
.fac .cat-op mark { background: color-mix(in srgb, var(--dlg-primary) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.fac .cat-stock .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 650; white-space: nowrap; }
.fac .cat-stock .pill.ok { background: var(--dlg-verde-bg); color: var(--dlg-verde); }
.fac .cat-stock .pill.cero { background: var(--dlg-ambar-bg); color: var(--dlg-ambar); }
.fac .cat-precio { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fac .cat-precio b { font-family: var(--dlg-mono); font-size: 13px; font-weight: 700; }
.fac .cat-precio small { font-size: 10.5px; color: var(--dlg-dim); }
.fac .cat-precio i { font-size: 11.5px; color: var(--dlg-dim2); }
.fac .cat-vacio { padding: 24px 22px; text-align: center; }
.fac .cat-vacio b { display: block; font-size: 13px; margin-bottom: 5px; }
.fac .cat-vacio span { font-size: 12px; color: var(--dlg-dim); line-height: 1.45; }
.fac .cat-pie { display: flex; align-items: center; gap: 16px; padding: 7px 16px; border-top: 1px solid var(--dlg-lines2); background: var(--dlg-surf2); font-size: 11px; color: var(--dlg-dim); flex-shrink: 0; }
.fac .cat-pie kbd { font-family: var(--dlg-mono); font-size: 10px; padding: 0 5px; margin-right: 3px; border: 1px solid var(--dlg-lines); border-bottom-width: 2px; border-radius: 4px; background: var(--dlg-surf); color: var(--dlg-txt); }
.fac .cat-pie .cat-crear { margin-left: auto; padding: 3px 10px; border: 1px solid var(--dlg-lines); border-radius: 6px; background: var(--dlg-surf); color: var(--dlg-primary); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.fac .cat-pie .cat-crear:hover { background: var(--fac-sel); }
.fac .cat-vacio .cat-crear-vacio { margin-top: 12px; }
.fac .ac-nuevo { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-top: 1px solid var(--dlg-lines); background: var(--dlg-surf2); color: var(--dlg-primary); font-weight: 700; cursor: pointer; }

/* ── Barra y grilla de líneas ── */
.fac .lbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--dlg-lines); flex-shrink: 0; flex-wrap: wrap; }
.fac .lbar .tit { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-primary); }
.fac .lbar .n { font-family: var(--dlg-mono); font-size: 11.5px; color: var(--dlg-dim); }
.fac .lbar .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fac .lgrid { display: grid; grid-template-columns: 38px minmax(120px, 150px) minmax(180px, 1.8fr) 78px 64px 118px 64px 132px 128px 34px; min-width: 980px; }
.fac .lcab { position: sticky; top: 0; z-index: 2; background: var(--dlg-surf2); border-bottom: 1px solid var(--dlg-lines); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dlg-dim); }
.fac .lcab > div { padding: 7px 8px; white-space: nowrap; }
.fac .lcab > .n { text-align: right; }
.fac .lfila { min-height: 52px; border-bottom: 1px solid var(--dlg-lines2); cursor: pointer; }
.fac .lfila > div { padding: 8px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.fac .lfila:hover { background: color-mix(in srgb, var(--fac-sel) 60%, transparent); }
.fac .lfila.sel { background: var(--fac-sel); }
.fac .lfila.malo { box-shadow: inset 3px 0 0 var(--dlg-rojo); }
.fac .lfila.dud { box-shadow: inset 3px 0 0 var(--dlg-ambar-bd); }
.fac .lfila .cod { font-family: var(--dlg-mono); font-size: 12px; font-weight: 600; }
.fac .lfila .nom { font-size: 11px; color: var(--dlg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fac .lfila .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
.fac .lfila .num { font-family: var(--dlg-mono); font-variant-numeric: tabular-nums; text-align: right; align-items: flex-end; }
.fac .lfila .idx { color: var(--dlg-dim2); font-family: var(--dlg-mono); font-size: 11.5px; align-items: center; }
.fac .lfila .quitar { background: none; border: 0; color: var(--dlg-dim); cursor: pointer; border-radius: 6px; padding: 4px; }
.fac .lfila .quitar:hover { color: var(--dlg-rojo); background: var(--dlg-rojo-bg); }
.fac .marcas { flex-direction: row !important; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-start !important; }
.fac .marca { font-size: 10px; font-weight: 800; letter-spacing: .03em; padding: 2px 5px; border-radius: 4px; background: var(--dlg-surf2); border: 1px solid var(--dlg-lines); color: var(--dlg-dim); white-space: nowrap; }
.fac .marca.ref { background: var(--fac-azul-bg); color: var(--fac-azul); border-color: color-mix(in srgb, var(--fac-azul) 30%, transparent); }
.fac .marca.falta { background: var(--dlg-ambar-bg); color: var(--dlg-ambar); border-color: var(--dlg-ambar-bd); }
.fac .marca.mal { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); border-color: color-mix(in srgb, var(--dlg-rojo) 30%, transparent); }
.fac .lexp { min-width: 980px; padding: 12px 14px 14px 46px; background: var(--dlg-surf2); border-bottom: 1px solid var(--dlg-lines); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; cursor: default; }
.fac .lexp .acc { grid-column: span 12; display: flex; gap: 8px; justify-content: flex-end; }

/* ── La emisión, más completa (Arturo, 31-10-2026: «profesionaliza la UI de Emisión de documentos») ── */
/* Los atajos y los botones de la barra de líneas; «Vista previa» marca si está abierta. */
.fac .lbar .atajos { font-size: 11.5px; }
.fac .lbar .btn-sm.on { border-color: var(--dlg-primary); background: var(--fac-sel); color: var(--dlg-primary); }
@media (max-width: 1250px) { .fac .lbar .atajos { display: none; } }
/* Las filas se ordenan arrastrándolas: la asa a la izquierda y una raya donde va a caer. */
.fac .lfila[draggable="true"] .idx { cursor: grab; }
.fac .lfila .asa { color: var(--dlg-dim2); font-size: 12px; line-height: 1; margin-bottom: 2px; }
.fac .lfila.sobre { box-shadow: inset 0 3px 0 var(--dlg-primary); }
.fac .lexp .acc .sep { flex: 1; }
/* El último precio cobrado al cliente, bajo el precio de la línea, con «usar». */
.fac .lexp .ayuda .usar { margin-left: 6px; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--dlg-primary); cursor: pointer; text-decoration: underline; }
/* Lo que se sabe del cliente: deuda, vencido, condición habitual y sus últimas facturas. */
.fac .info-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 14px; border-bottom: 1px solid var(--dlg-lines); background: var(--dlg-surf2); font-size: 12px; flex-shrink: 0; }
.fac .info-cliente .rot { font-weight: 700; color: var(--dlg-txt); }
.fac .info-cliente .chip-info { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--dlg-lines); background: var(--dlg-surf); color: var(--dlg-txt); font-weight: 600; white-space: nowrap; }
.fac .info-cliente .chip-info.ok { background: var(--dlg-verde-bg); color: var(--dlg-verde); border-color: color-mix(in srgb, var(--dlg-verde) 30%, transparent); }
.fac .info-cliente .chip-info.mal { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); border-color: color-mix(in srgb, var(--dlg-rojo) 30%, transparent); }
.fac .info-cliente .ultimas { margin-left: auto; color: var(--dlg-dim); display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.fac .info-cliente .venta { font-family: var(--dlg-mono); font-size: 11.5px; color: var(--dlg-txt); }
.fac .info-cliente .venta + .venta::before { content: "·"; margin-right: 10px; color: var(--dlg-dim2); }
/* El paso 1 con la hoja al lado: datos y líneas a la izquierda, la hoja a la derecha, cada una con su scroll. */
.fac .paso1 { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fac .paso1-izq { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
/* Las líneas nunca quedan aplastadas por los datos de arriba: con poco alto, la columna se desplaza entera. */
.fac .paso1-izq > .scroll { min-height: 260px; }
.fac .paso1.con-vista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
.fac .paso1-der { min-height: 0; overflow: auto; border-left: 1px solid var(--dlg-lines); padding: 12px; background: var(--dlg-surf2); overscroll-behavior: contain; }
.fac .paso1-der .visor { padding: 10px; }
.fac .paso1-der .fac-hoja { zoom: .54; }
/* Con la hoja al lado, la izquierda se desplaza entera y la grilla se angosta para no pedir scroll horizontal. */
.fac .paso1.con-vista .paso1-izq > .scroll { flex: none; overflow-y: hidden; }
.fac .paso1.con-vista .lgrid { grid-template-columns: 30px minmax(100px, 130px) minmax(110px, 1.2fr) 58px 54px 96px 52px 92px 104px 30px; min-width: 740px; }
.fac .paso1.con-vista .lexp { min-width: 740px; padding-left: 14px; }
/* Pegar líneas desde Excel: lo pegado y cómo se entendió. */
.pegar-lineas textarea { width: 100%; box-sizing: border-box; font-family: var(--dlg-mono); font-size: 12px; padding: 8px 10px; border: 1px solid var(--dlg-lines); border-radius: 8px; resize: vertical; background: var(--dlg-surf); color: var(--dlg-txt); }
.pegar-lineas .tabla-pegada { margin-top: 10px; max-height: 260px; overflow: auto; border: 1px solid var(--dlg-lines); border-radius: 8px; }
.pegar-lineas table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pegar-lineas th { position: sticky; top: 0; background: var(--dlg-surf2); text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dlg-dim); padding: 6px 8px; }
.pegar-lineas td { padding: 5px 8px; border-top: 1px solid var(--dlg-lines2); }
.pegar-lineas .n { text-align: right; font-family: var(--dlg-mono); }
.pegar-lineas tr.malo td { color: var(--dlg-rojo); background: var(--dlg-rojo-bg); }
.pegar-lineas .marca { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--dlg-verde-bg); color: var(--dlg-verde); }
.pegar-lineas .marca.mal { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); }
/* Las observaciones: una línea que se agranda a mano, para no quitarle alto a las líneas del documento. */
.fac .cab-campos textarea.obs { min-height: 34px; resize: vertical; }
/* Las observaciones del documento en la hoja. */
.fac-hoja .refs.obs { white-space: pre-line; }
.fac .vacio { padding: 26px; text-align: center; color: var(--dlg-dim); }

/* ── Pie de dos niveles ── */
.fac .pie { border-top: 2px solid var(--dlg-lines); background: var(--dlg-surf2); flex-shrink: 0; }
.fac .tot { display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap; padding: 8px 14px 6px; border-bottom: 1px solid var(--dlg-lines); }
.fac .tot div { display: flex; flex-direction: column; align-items: flex-end; }
.fac .tot span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dlg-dim); }
.fac .tot b { font-family: var(--dlg-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; }
.fac .tot .grande b { font-size: 19px; font-weight: 800; }
.fac .acc-pie { display: flex; align-items: center; gap: 10px; padding: 9px 14px; flex-wrap: wrap; }
.fac .acc-pie .der { margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.fac .pastilla { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dlg-dim); background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.fac .pastilla .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--mud-palette-success); }

/* ── Revisar y emitido ── */
.fac .rev { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; padding: 16px; min-height: 100%; }
.fac .rev .izq { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1000px) { .fac .rev { grid-template-columns: minmax(0, 1fr); } }
/* Con las dos columnas lado a lado, cada una se desplaza sola: la hoja no arrastra la línea de tiempo ni «Ahora
   puedes» (Arturo, 31-10-2026: «la hoja también debe tener un scroll independiente del modal»). Angosto, en una
   columna, se desplaza todo junto como antes. */
@media (min-width: 1001px) {
    /* Flex y no height:100%: el alto de .scroll sale del flex de la ventana y un porcentaje no lo alcanza. */
    .fac .scroll:has(> .rev) { overflow: hidden; display: flex; flex-direction: column; }
    .fac .scroll > .rev { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
    .fac .scroll > .rev > .izq, .fac .scroll > .rev > .visor { min-height: 0; overflow: auto; overscroll-behavior: contain; }
}
.fac .tarjeta { background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fac .tarjeta h3 { margin: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-primary); }
.fac .kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 10px; font-size: 12.5px; margin: 0; }
.fac .kv dt { color: var(--dlg-dim); }
.fac .kv dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.fac .kv dd .nota { display: block; font-weight: 400; font-size: 11.5px; color: var(--dlg-dim); }
.fac .total-grande { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--dlg-lines); padding-top: 10px; }
.fac .total-grande b { font-family: var(--dlg-mono); font-size: 26px; font-weight: 800; }
.fac .pasa { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--dlg-dim); }
.fac .ambiente { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 8px; font-weight: 700; font-size: 12px; }
/* Producción es lo normal: verde. Lo de prueba (certificación o simulación) en rojo (Arturo, 30-10-2026). */
.fac .ambiente.cert { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); border: 1px solid color-mix(in srgb, var(--dlg-rojo) 35%, transparent); }
.fac .ambiente.prod { background: var(--dlg-verde-bg); color: var(--dlg-verde); border: 1px solid color-mix(in srgb, var(--dlg-verde) 35%, transparent); }
.fac .visor { background: var(--dlg-surf2); border: 1px solid var(--dlg-lines); border-radius: 12px; padding: 16px; overflow: auto; min-width: 0; }
.fac .revision { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; }
.fac .revision.ok { background: var(--dlg-verde-bg); color: var(--dlg-verde); }
.fac .revision.mal { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); }
.fac .revision.espera { background: var(--fac-azul-bg); color: var(--fac-azul); }
.fac .linea-tiempo { display: flex; flex-direction: column; }
.fac .hito { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 14px; }
.fac .hito::before { content: ''; position: absolute; left: 13px; top: 24px; bottom: 0; width: 2px; background: var(--dlg-lines); }
.fac .hito:last-child::before { display: none; }
.fac .hito .bola { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--dlg-surf2); border: 2px solid var(--dlg-lines); color: var(--dlg-dim); z-index: 1; }
.fac .hito.hecho .bola { background: var(--dlg-verde-bg); border-color: var(--dlg-verde); color: var(--dlg-verde); }
.fac .hito.ahora .bola { background: var(--fac-azul-bg); border-color: var(--fac-azul); color: var(--fac-azul); animation: fac-latido 1.2s ease-in-out infinite; }
.fac .hito.malo .bola { background: var(--dlg-rojo-bg); border-color: var(--dlg-rojo); color: var(--dlg-rojo); }
.fac .hito b { display: block; font-size: 13px; }
.fac .hito span { color: var(--dlg-dim); font-size: 12px; }
@keyframes fac-latido { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fac-azul) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .fac .hito.ahora .bola { animation: none; } .fac .cab-bar .chev { transition: none; } }
.fac .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
/* Lo que todavía no pasa va en gris, también el título (Arturo, 31-10-2026: «mientras no esté pagado aparece en gris»). */
.fac .hito:not(.hecho):not(.ahora):not(.malo) b { color: var(--dlg-dim); font-weight: 600; }
/* «Ver PDF» y «PDF cedible» marcan qué muestra la hoja; el XML y el PDF de respaldo van en el mismo visor. */
.fac .acciones .btn.on { border-color: var(--dlg-primary); background: var(--fac-sel); color: var(--dlg-primary); }
/* «Ahora puedes» ordenado: grupos (ver, compartir, gestionar) con dos botones parejos por fila, cada uno con su ícono
   (Arturo, 31-10-2026: «agrega íconos representativos… y que se vea más ordenado»). El texto largo se corta con «…» y
   el botón lo dice entero en su título; los que no caben en media fila van a todo el ancho (.ancho). */
.fac .ahora-puedes .grupo { display: grid; gap: 6px; }
.fac .ahora-puedes .grupo > span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-dim); }
.fac .ahora-puedes .acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fac .ahora-puedes .acciones .btn { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; padding: 8px 12px; text-align: left; white-space: nowrap; text-decoration: none; }
.fac .ahora-puedes .acciones .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fac .ahora-puedes .acciones .btn .mud-icon-root { flex-shrink: 0; width: 18px; height: 18px; color: var(--dlg-dim); }
.fac .ahora-puedes .acciones .btn.on .mud-icon-root { color: var(--dlg-primary); }
.fac .ahora-puedes .acciones .ancho { grid-column: 1 / -1; }
/* El botón chico de arriba del visor: la hoja de ERA o el PDF del navegador. */
.fac .visor-barra { display: flex; justify-content: flex-end; margin: -6px -4px 10px 0; }
.fac .seg { display: inline-flex; border: 1px solid var(--dlg-lines); border-radius: 8px; overflow: hidden; }
.fac .seg button { background: var(--dlg-surf); border: 0; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--dlg-dim); cursor: pointer; }
.fac .seg button + button { border-left: 1px solid var(--dlg-lines); }
.fac .seg button.on { background: var(--fac-sel); color: var(--dlg-primary); }
.fac .seg button:disabled { opacity: .42; cursor: not-allowed; }
/* Las flechas del cintillo: el documento anterior y el siguiente de la lista. */
.fac .recorrido { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
.fac .cintillo .pasos + .recorrido { margin-left: 12px; }
.fac .recorrido .flecha { width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.fac .recorrido .flecha:hover:not(:disabled) { background: color-mix(in srgb, currentColor 14%, transparent); }
.fac .recorrido .flecha:disabled { opacity: .35; cursor: default; }
.fac .visor-pdf { display: block; height: max(640px, calc(100vh - 300px)); min-height: 640px; width: 100%; border: 1px solid var(--dlg-lines); border-radius: 8px; background: #fff; }
.fac .visor-xml { min-height: 640px; margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--dlg-lines); border-radius: 8px; background: var(--dlg-surf); font-family: var(--dlg-mono); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* «Detalle»: el documento en tablas para copiarlo a Excel (31-10-2026). */
.fac .visor-detalle { min-height: 640px; overflow: auto; padding: 12px 14px; border: 1px solid var(--dlg-lines); border-radius: 8px; background: var(--dlg-surf); }
.fac .visor-detalle .copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.fac .visor-detalle .copiar .dim { flex: 1; min-width: 200px; font-size: 12px; }
.fac .visor-detalle h4 { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-dim); }
.fac .visor-detalle table.t { width: 100%; font-size: 12px; }
.fac .visor-detalle td.num { text-align: right; font-family: var(--dlg-mono); white-space: nowrap; }
.fac .visor-vacio { padding: 40px 16px; text-align: center; color: var(--dlg-dim); }

/* ── Representación impresa: siempre papel blanco, en cualquier tema ── */
.fac-hoja { --papel: #ffffff; --papel-txt: #1a1a1a; --papel-dim: #5a5a5a; --papel-linea: #d0d0d0;
    background: var(--papel); color: var(--papel-txt); width: min(100%, 800px); margin: 0 auto; padding: 34px 38px; border-radius: 4px; box-shadow: 0 4px 22px rgba(0, 0, 0, .18); font-size: 11.5px; line-height: 1.4; }
.fac-hoja .h-cab { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.fac-hoja .emisor .logo { display: block; max-height: 56px; max-width: 220px; object-fit: contain; margin-bottom: 6px; }
.fac-hoja .emisor b { font-size: 15px; display: block; }
.fac-hoja .emisor span { display: block; color: var(--papel-dim); }
.fac-hoja .recuadro { border: 3px solid #c40000; color: #c40000; text-align: center; padding: 12px 8px; font-weight: 800; line-height: 1.5; }
.fac-hoja .recuadro .u { font-size: 10.5px; font-weight: 700; }
.fac-hoja .rec { margin: 18px 0 0; display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px minmax(0, 1fr); gap: 3px 10px; border: 1px solid var(--papel-linea); padding: 10px 12px; border-radius: 4px; }
.fac-hoja .rec dt { color: var(--papel-dim); font-weight: 600; }
.fac-hoja .rec dd { margin: 0; }
.fac-hoja table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.fac-hoja th { background: #eef1f4; color: #333; text-align: left; font-size: 10.5px; padding: 6px 8px; border-bottom: 1px solid var(--papel-linea); }
.fac-hoja td { padding: 6px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.fac-hoja td.n, .fac-hoja th.n { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; }
.fac-hoja .refs { margin-top: 10px; font-size: 11px; color: var(--papel-dim); }
.fac-hoja .h-pie { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; margin-top: 18px; align-items: end; }
.fac-hoja .timbre { border: 1px dashed #999; height: 120px; display: grid; place-items: center; text-align: center; color: #777; font-size: 11px; padding: 8px; }
/* El timbre real: el código arriba a la izquierda, y la leyenda pegada debajo y centrada con él (no con la columna). */
.fac-hoja .timbre-real { justify-self: start; align-self: start; }
.fac-hoja .timbre-real img { display: block; height: 100px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.fac-hoja .timbre-real .timbre-txt { width: 0; min-width: 100%; }
.fac-hoja .timbre-txt { text-align: center; font-size: 9.5px; color: #333; margin-top: 4px; }
.fac-hoja .totales { border: 1px solid var(--papel-linea); border-radius: 4px; }
.fac-hoja .totales div { display: flex; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid #eee; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.fac-hoja .totales div.t { font-weight: 800; font-size: 13px; border-bottom: 0; }
/* La copia cedible: el acuse de recibo de la Ley 19.983, como en el PDF. */
.fac-hoja .acuse { margin-top: 16px; margin-left: auto; width: min(100%, 420px); border: 1px solid var(--papel-txt); padding: 8px 10px; font-size: 10.5px; }
.fac-hoja .acuse-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fac-hoja .acuse-cab .cedible { color: #c40000; font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.fac-hoja .acuse-fila { display: grid; grid-template-columns: auto minmax(0, 3fr) auto minmax(0, 2fr); gap: 4px; align-items: end; margin-top: 8px; }
.fac-hoja .acuse-fila.firma { grid-template-columns: auto minmax(0, 1fr); }
.fac-hoja .acuse-fila span { font-weight: 700; }
.fac-hoja .acuse-fila i { border-bottom: 1px solid var(--papel-txt); height: 14px; }
.fac-hoja .acuse p { margin: 8px 0 0; font-size: 9px; text-align: justify; color: var(--papel-dim); }
.fac-hoja .borrador { text-align: center; font-weight: 800; letter-spacing: .3em; color: #c40000; opacity: .55; font-size: 12px; margin-bottom: 10px; }

/* ── Páginas de Facturación (lista de documentos): cifras, panel con pestañas, tabla y chips del prototipo ── */
.fac-pagina { color: var(--dlg-txt); font-size: 13px; }
.fac-pagina .mono { font-family: var(--dlg-mono); font-variant-numeric: tabular-nums; }
.fac-pagina .dim { color: var(--dlg-dim); }
.fac-pagina .titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fac-pagina .titulo h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.fac-pagina .titulo p { margin: 2px 0 0; color: var(--dlg-dim); font-size: 14px; }
.fac-pagina .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.fac-pagina .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fac-pagina .btn.out { border-color: var(--dlg-lines); background: var(--dlg-surf); }
.fac-pagina .btn.out:hover { border-color: var(--dlg-primary); color: var(--dlg-primary); }
.fac-pagina .btn-sm { margin-left: 0; display: inline-flex; }
.fac-pagina .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fac-pagina .cifra { background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 12px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; min-width: 0; }
.fac-pagina .cifra .ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; font-size: 18px; flex-shrink: 0; }
.fac-pagina .cifra b { display: block; font-size: 22px; font-weight: 800; font-family: var(--dlg-mono); font-variant-numeric: tabular-nums; }
.fac-pagina .cifra span { color: var(--dlg-dim); font-size: 12px; }
.fac-pagina .panel { background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 12px; min-width: 0; }
.fac-pagina .panel-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--dlg-lines); }
.fac-pagina .tabs { display: flex; gap: 2px; overflow-x: auto; }
.fac-pagina .tab { background: none; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--dlg-dim); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.fac-pagina .tab.on { background: var(--fac-sel); color: var(--dlg-primary); }
.fac-pagina .tab .n { font-family: var(--dlg-mono); font-size: 11px; margin-left: 4px; opacity: .8; }
.fac-pagina .filtro { display: flex; align-items: center; gap: 8px; background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 8px; padding: 6px 10px; min-width: 0; flex: 1 1 220px; }
.fac-pagina .filtro input { border: 0; background: none; outline: none; width: 100%; min-width: 0; color: inherit; font: inherit; }
.fac-pagina .periodo { display: flex; gap: 6px; align-items: center; }
.fac-pagina .periodo select { border: 1px solid var(--dlg-lines); background: var(--dlg-surf); color: var(--dlg-txt); border-radius: 8px; padding: 6px 8px; font: inherit; }
.fac-pagina .tabla-scroll { overflow-x: auto; }
.fac-pagina table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fac-pagina table.t th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dlg-dim); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--dlg-lines); white-space: nowrap; }
.fac-pagina table.t td { padding: 10px 12px; border-bottom: 1px solid var(--dlg-lines2); vertical-align: middle; }
.fac-pagina table.t tr.click { cursor: pointer; }
.fac-pagina table.t tr.click:hover td { background: var(--fac-sel); }
.fac-pagina table.t td.num, .fac-pagina table.t th.num { text-align: right; font-family: var(--dlg-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fac-pagina .nowrap { white-space: nowrap; }
.fac-pagina .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.fac-pagina .chip.ok { background: var(--dlg-verde-bg); color: var(--dlg-verde); border-color: color-mix(in srgb, var(--dlg-verde) 30%, transparent); }
.fac-pagina .chip.mal { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); border-color: color-mix(in srgb, var(--dlg-rojo) 30%, transparent); }
.fac-pagina .chip.amb { background: var(--dlg-ambar-bg); color: var(--dlg-ambar); border-color: var(--dlg-ambar-bd); }
.fac-pagina .chip.azul { background: var(--fac-azul-bg); color: var(--fac-azul); border-color: color-mix(in srgb, var(--fac-azul) 30%, transparent); }
.fac-pagina .chip.neu { background: var(--dlg-surf2); color: var(--dlg-dim); border-color: var(--dlg-lines); }
.fac-pagina .tipo { font-family: var(--dlg-mono); font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: var(--dlg-surf2); border: 1px solid var(--dlg-lines); white-space: nowrap; }
.fac-pagina .vacio { padding: 26px; text-align: center; color: var(--dlg-dim); }

/* ── Cotización (17-10-2026) ── */
.fac input.mini { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--dlg-lines); border-radius: 6px; background: var(--dlg-surf); color: var(--dlg-txt); }
.fac-pagina table.t td.rojo { color: var(--dlg-rojo); font-weight: 600; }

/* ── Estado de cuenta de auxiliares (17-10-2026) ── */
.fac-pagina .param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fac-pagina .param { padding: 14px 16px; border-right: 1px solid var(--dlg-lines2); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fac-pagina .param:last-child { border-right: 0; }
.fac-pagina .param h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dlg-dim); font-weight: 800; }
.fac-pagina .param .fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
.fac-pagina .seg { display: inline-flex; border: 1px solid var(--dlg-lines); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.fac-pagina .seg button { background: var(--dlg-surf); border: 0; padding: 6px 12px; font: inherit; font-weight: 600; color: var(--dlg-dim); cursor: pointer; }
.fac-pagina .seg button + button { border-left: 1px solid var(--dlg-lines); }
.fac-pagina .seg button.on { background: var(--fac-sel); color: var(--dlg-primary); }
.fac-pagina .campo-in { border: 1px solid var(--dlg-lines); background: var(--dlg-surf); color: var(--dlg-txt); border-radius: 8px; padding: 6px 8px; font: inherit; font-weight: 400; max-width: 60%; }
.fac-pagina .check { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-wrap: wrap; }
.fac-pagina .check input { accent-color: var(--dlg-primary); }
.fac-pagina .elegidos { display: flex; flex-wrap: wrap; gap: 6px; }
.fac-pagina .elegidos .chip button { background: none; border: 0; cursor: pointer; color: inherit; padding: 0 0 0 2px; font: inherit; font-size: 13px; line-height: 1; }
.fac-pagina .calzan { border: 1px solid var(--dlg-lines); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.fac-pagina .calzan button { display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--dlg-lines2); padding: 7px 10px; font: inherit; color: inherit; cursor: pointer; }
.fac-pagina .calzan button:hover { background: var(--fac-sel); }
.fac-pagina .calzan button .mas { margin-left: auto; color: var(--dlg-primary); font-weight: 800; }
.fac-pagina .enlace { background: none; border: 0; padding: 0; color: var(--dlg-primary); font: inherit; font-weight: 600; cursor: pointer; align-self: flex-start; }
.fac-pagina table.t tr.sec td { background: var(--fac-sel); font-weight: 800; color: var(--dlg-primary); border-top: 2px solid var(--dlg-lines); }
.fac-pagina table.t tr.rub td { background: var(--dlg-surf2); font-weight: 700; }
.fac-pagina table.t tr.tot td { font-weight: 800; border-top: 1px solid var(--dlg-lines); }
.fac-pagina table.t tr.nota td { color: var(--dlg-dim); font-style: italic; }
.fac-pagina table.t tfoot td { font-weight: 800; background: var(--dlg-surf2); padding: 10px 12px; }
.fac-pagina table.t tfoot td.num { text-align: right; font-family: var(--dlg-mono); }
.fac-pagina button.chip { cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.fac-pagina a.btn { text-decoration: none; color: inherit; }

/* ── Consultas: buscador del tamaño justo y selección en dos listas (18-10-2026) ── */
.fac-pagina .param .filtro { flex: 0 0 auto; }
.fac-pagina h1:focus, .fac-pagina h1:focus-visible { outline: none; }
.fac-pagina .subtabs { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--dlg-lines2); }
.fac-pagina .subtabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; font: inherit; font-weight: 700; color: var(--dlg-dim); cursor: pointer; }
.fac-pagina .subtabs button.on { color: var(--dlg-primary); border-bottom-color: var(--dlg-primary); }
.fac-pagina .subtabs .n { font-family: var(--dlg-mono); font-size: 11px; margin-left: 4px; opacity: .8; }
.fac-pagina .tab-cuerpo { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.fac-pagina .fila-params { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.fac-pagina .fila-params .fila { gap: 10px; font-weight: 600; display: flex; align-items: center; }
.fac-pagina .nota-info { border: 1px solid var(--dlg-ambar-bd); background: var(--dlg-ambar-bg); color: var(--dlg-ambar); border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.fac-pagina .sel-doble { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.fac-pagina .sel-doble.uno { grid-template-columns: minmax(0, 1fr); }
.fac-pagina .sel-lado { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 1px solid var(--dlg-lines); border-radius: 10px; padding: 10px; background: var(--dlg-surf); }
.fac-pagina .sel-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dlg-dim); font-weight: 800; }
.fac-pagina .sel-tit .n { font-family: var(--dlg-mono); margin-left: 6px; text-transform: none; }
.fac-pagina .sel-busca { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fac-pagina .sel-busca input.campo-in { flex: 1 1 140px; max-width: none; }
.fac-pagina .sel-busca select.campo-in { max-width: 140px; }
.fac-pagina .sel-tabla { height: 300px; overflow: auto; border: 1px solid var(--dlg-lines2); border-radius: 8px; }
.fac-pagina .sel-doble.uno .sel-tabla { height: 240px; }
.fac-pagina .sel-tabla table.t th { position: sticky; top: 0; background: var(--dlg-surf2); z-index: 1; padding: 7px 10px; }
.fac-pagina .sel-tabla table.t th.ord { cursor: pointer; user-select: none; }
.fac-pagina .sel-tabla table.t td { padding: 6px 10px; }
.fac-pagina .sel-tabla tr.marcado td { background: var(--fac-sel); color: var(--dlg-primary); font-weight: 700; }
.fac-pagina .sel-tabla tr.ya td { opacity: .55; }
.fac-pagina .sel-mas { padding: 6px 10px; font-size: 12px; }
.fac-pagina .sel-botones { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.fac-pagina .sel-botones .btn { justify-content: center; min-width: 110px; }
@media (max-width: 900px) { .fac-pagina .sel-doble { grid-template-columns: minmax(0, 1fr); } .fac-pagina .sel-botones { flex-direction: row; flex-wrap: wrap; } }

/* ── Línea de la cotización: el nombre bajo el código y la descripción larga (18-10-2026) ── */
.fac .lfila .desc.dim { color: var(--dlg-dim2); }
.fac .campo label .pista { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dlg-dim2); }
.fac .campo > textarea { resize: vertical; min-height: 54px; }
.fac .campo.malo > textarea { border-color: var(--dlg-rojo); background: var(--dlg-rojo-bg); }

/* ── La ficha del cliente en su diálogo modal (18-10-2026) ──
   Arturo: «sale cortado los márgenes de crear cliente». Los campos, el título y los botones van a plomo, a los 24px con
   que MudBlazor pone el título; antes los campos quedaban pegados al borde y los botones a 8px. */
.fac-ficha.dlg { padding: 4px 24px 12px; }
.mud-dialog-actions:has(> .fac-acciones) { padding: 8px 24px 18px; }

/* ── Folios CAF conectados al motor (18-10-2026) ──
   Una tarjeta por tipo con lo que queda y la barra de uso; los tipos que se emiten y no tienen CAF salen en rojo. */
.fol-pagina .fol-problema { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-bottom: 16px; border-color: color-mix(in srgb, var(--dlg-rojo) 35%, transparent); background: var(--dlg-rojo-bg); color: var(--dlg-rojo); }
.fol-pagina .fol-problema span { color: var(--dlg-txt); font-size: 13px; }
.fol-pagina .fol-problema a { font-size: 12.5px; font-weight: 700; color: var(--dlg-primary); text-decoration: none; }
.fol-pagina .fol-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fol-pagina .fol-tipo { background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; overflow: hidden; }
.fol-pagina .fol-tipo::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--dlg-verde); }
.fol-pagina .fol-tipo.bajo::before { background: var(--dlg-ambar); }
.fol-pagina .fol-tipo.agotado::before, .fol-pagina .fol-tipo.falta::before { background: var(--dlg-rojo); }
.fol-pagina .fol-tipo.falta { border-style: dashed; }
.fol-pagina .fol-tipo.falta .fol-tipo-cifra span { color: var(--dlg-rojo); font-weight: 600; }
.fol-pagina .fol-tipo .btn { align-self: flex-start; }
.fol-pagina .fol-tipo-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fol-pagina .fol-tipo-cab b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fol-pagina .fol-tipo-cab .chip { margin-left: auto; }
.fol-pagina .fol-td { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; font-family: var(--dlg-mono); font-size: 11px; font-weight: 800; background: var(--fac-sel); color: var(--dlg-primary); }
.fol-pagina .fol-tipo-cifra b { font-size: 26px; font-weight: 800; font-family: var(--dlg-mono); font-variant-numeric: tabular-nums; }
.fol-pagina .fol-tipo-cifra span { color: var(--dlg-dim); font-size: 12px; }
.fol-pagina .fol-tipo-pie { display: flex; justify-content: space-between; gap: 8px; color: var(--dlg-dim); font-size: 11.5px; }
.fol-pagina .fol-riel { height: 6px; border-radius: 999px; background: var(--dlg-lines2); overflow: hidden; }
.fol-pagina .fol-riel i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dlg-verde), color-mix(in srgb, var(--dlg-verde) 40%, var(--dlg-ambar))); }
.fol-pagina .fol-tipo.bajo .fol-riel i { background: var(--dlg-ambar); }
.fol-pagina .fol-tipo.agotado .fol-riel i { background: var(--dlg-rojo); }
.fol-pagina .fol-sel { border: 1px solid var(--dlg-lines); background: var(--dlg-surf); color: var(--dlg-txt); border-radius: 8px; padding: 6px 8px; font: inherit; }
.fol-pagina .dim { color: var(--dlg-dim); font-size: 12px; }

/* El diálogo de carga */
.fol-carga { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.fol-carga > * { grid-column: 1 / -1; }
.fol-carga .campo.g6 { grid-column: span 6; }
.campo > label.fol-soltar { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--dlg-lines); border-radius: 12px; cursor: pointer; background: var(--dlg-surf2); transition: border-color .15s, background .15s; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--dlg-txt); }
.fol-soltar:hover { border-color: var(--dlg-primary); }
.fol-soltar.con { border-style: solid; border-color: color-mix(in srgb, var(--dlg-verde) 45%, transparent); background: var(--dlg-verde-bg); }
.fol-soltar input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fol-soltar-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: grid; place-items: center; background: var(--fac-sel); color: var(--dlg-primary); font-weight: 800; }
.fol-soltar-ico.ok { background: var(--dlg-verde); color: #fff; }
.fol-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--dlg-lines2); border: 1px solid var(--dlg-lines); border-radius: 10px; overflow: hidden; }
.fol-ficha > div { background: var(--dlg-surf); padding: 9px 12px; display: flex; flex-direction: column; min-width: 0; }
.fol-ficha span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dlg-dim); font-weight: 700; }
.fol-ficha b { font-family: var(--dlg-mono); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fol-ficha i { font-style: normal; font-size: 11.5px; color: var(--dlg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fol-opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.fol-op { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--dlg-lines); border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--dlg-txt); }
.fol-op.on { border-color: var(--dlg-primary); background: var(--fac-sel); }
.fol-nota { padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.fol-nota.amb { background: var(--dlg-ambar-bg); color: var(--dlg-ambar); border: 1px solid var(--dlg-ambar-bd); }
.fol-nota.mal { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); border: 1px solid color-mix(in srgb, var(--dlg-rojo) 30%, transparent); }
.fol-codigo { display: inline-block; margin-left: 6px; font-family: var(--dlg-mono); font-size: 11px; opacity: .75; }
.fol-listo { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: var(--dlg-verde-bg); border: 1px solid color-mix(in srgb, var(--dlg-verde) 35%, transparent); }
.fol-listo-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; background: var(--dlg-verde); color: #fff; font-weight: 800; font-size: 18px; }
.fol-listo b { display: block; }
.fol-listo span { font-size: 12.5px; color: var(--dlg-dim); }
@media (max-width: 600px) { .fol-carga .campo.g6 { grid-column: 1 / -1; } .fol-ficha { grid-template-columns: minmax(0, 1fr); } }

/* El robot de folios: botón en cada tarjeta, reglas y últimos pedidos */
.fol-pagina .fol-tipo-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fol-pagina .fol-robot { margin-bottom: 16px; }
.fol-pagina .fol-robot-cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
@media (max-width: 1100px) { .fol-pagina .fol-robot-cuerpo { grid-template-columns: minmax(0, 1fr); } }
.fol-pagina input.fol-num { width: 76px; text-align: right; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--dlg-lines); border-radius: 6px; background: var(--dlg-surf); color: var(--dlg-txt); }
.fol-pagina .fol-interruptor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--dlg-dim); }
.fol-pagina .fol-interruptor input { accent-color: var(--dlg-primary); width: 16px; height: 16px; }
.fol-pagina .fol-historia { border-left: 1px solid var(--dlg-lines2); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fol-pagina .fol-historia h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dlg-dim); font-weight: 800; }
.fol-pagina .fol-intento { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; min-width: 0; }
.fol-pagina .fol-intento > div { display: flex; flex-direction: column; min-width: 0; }
.fol-pagina .fol-intento span:not(.fol-td) { color: var(--dlg-dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fol-pagina .fol-intento.ok .fol-td { background: var(--dlg-verde-bg); color: var(--dlg-verde); }
.fol-pagina .fol-intento.mal .fol-td { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); }
.fol-nota.azul { background: var(--fac-azul-bg); color: var(--fac-azul); border: 1px solid color-mix(in srgb, var(--fac-azul) 30%, transparent); }

/* Folios vencidos (31-10-2026): la lista exacta de lo que se anula en el S.I.I. y el botón de lo irreversible. */
.fol-anular-lista { width: 100%; border-collapse: collapse; font-size: 12.5px; border: 1px solid var(--dlg-lines); border-radius: 10px; overflow: hidden; }
.fol-anular-lista th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dlg-dim); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--dlg-lines); background: var(--dlg-surf2); white-space: nowrap; }
.fol-anular-lista td { padding: 8px 10px; border-bottom: 1px solid var(--dlg-lines2); white-space: nowrap; }
.fol-anular-lista .num { text-align: right; font-family: var(--dlg-mono); font-variant-numeric: tabular-nums; }
.fol-anular-lista tr.fol-total td { font-weight: 800; border-bottom: 0; }
.fol-anular-lista .fol-reintento { display: block; font-size: 11px; color: var(--dlg-ambar); }
.btn.pri.fol-irreversible { background: var(--dlg-rojo); color: #fff; }
.fol-pagina .fol-vencidos { margin-bottom: 16px; }
/* Con la columna «Anular vencidos» la tabla de reglas no cabe al lado de la bitácora hasta pantallas anchas: va encima. */
@media (max-width: 1500px) { .fol-pagina .fol-robot-cuerpo.con-vencidos { grid-template-columns: minmax(0, 1fr); } .fol-pagina .fol-robot-cuerpo.con-vencidos .fol-historia { border-left: 0; border-top: 1px solid var(--dlg-lines2); } }
.fol-pagina .fol-vencidos td.fol-accion { vertical-align: top; text-align: right; }
.fol-pagina .fol-vencidos .fol-motivo { display: block; color: var(--dlg-dim); font-size: 11.5px; max-width: 360px; white-space: normal; }
/* La pausa del pedido automático (01-11-2026): cuándo se detiene y la fila que dice por qué se detuvo. */
.fol-pagina .fol-pausa-op { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fol-pagina select.fol-sel { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--dlg-lines); border-radius: 6px; background: var(--dlg-surf); color: var(--dlg-txt); }
.fol-pagina tr.fol-pausa td { background: var(--dlg-ambar-bg); }
.fol-pagina .fol-pausa-cuerpo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fol-pagina .fol-pausa-cuerpo .fol-motivo { flex: 1 1 280px; color: var(--dlg-txt); font-size: 12px; white-space: normal; }

/* Nota sobre varios documentos (19-10-2026): los documentos que corrige y los que se pueden agregar */
.fac .nota-docs { padding: 10px 16px; border-bottom: 1px solid var(--dlg-lines); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.fac .nota-docs-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.fac .nota-doc, .fac .nota-candidato { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 4px 8px; border-radius: 8px; background: var(--dlg-bg-suave, rgba(0,0,0,.03)); }
.fac .nota-doc .malo { color: var(--dlg-rojo); font-weight: 600; }
.fac .nota-doc .quitar { margin-left: auto; background: none; border: 0; color: var(--dlg-dim); cursor: pointer; border-radius: 6px; padding: 2px 6px; }
.fac .nota-doc .quitar:hover { color: var(--dlg-rojo); background: var(--dlg-rojo-bg); }
.fac .nota-candidatos { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; padding: 4px 0 2px; }
.fac .nota-candidato .btn-sm { margin-left: auto; }

/* Productos parecidos en «Nuevo producto» (27-10-2026): para no crear dos fichas del mismo producto. */
.fac-ficha .parecidos { margin-top: 14px; border: 1px solid var(--dlg-lines); border-radius: 8px; overflow: hidden; }
.fac-ficha .parecidos-tit { padding: 8px 12px; font-size: 12px; font-weight: 700; background: var(--dlg-surf2); border-bottom: 1px solid var(--dlg-lines2); }
.fac-ficha .parecido { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 12px; font-size: 12.5px; }
.fac-ficha .parecido + .parecido { border-top: 1px solid var(--dlg-lines2); }
.fac-ficha .parecido .k { font-family: var(--dlg-mono); font-size: 12px; color: var(--dlg-dim); }
.fac-ficha .parecido .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fac-ficha .parecido .dim { font-size: 11.5px; }

/* ── El folio elegido a mano en «Revisar» (29-10-2026) ──
   El siguiente por omisión; uno de los libres si se escribe o se toca un tramo. */
.fac .folio-eleccion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 400; }
.fac .folio-eleccion input.mini { width: 110px; font-weight: 700; }
.fac .folio-libres { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; font-weight: 400; font-size: 11.5px; }
.fac .folio-libres button { font: inherit; font-family: var(--dlg-mono); font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--dlg-lines); background: var(--dlg-surf2); color: var(--dlg-txt); cursor: pointer; }
.fac .folio-libres button:hover:not(:disabled) { border-color: var(--dlg-primary); color: var(--dlg-primary); }
.fac .folio-libres button:disabled { opacity: .45; cursor: not-allowed; }