/* ════════════════════════════════════════════════════════════════════
   Comprobante contable — JournalEntryDialog
   PORTE LITERAL del prototipo aprobado «legibilidad».
   Lo único que cambia respecto del prototipo es la PALETA: donde el
   prototipo clavaba violeta (#5B4AE0) acá se lee la paleta del ERP por
   las variables de MudBlazor, así el tema claro y el oscuro siguen
   funcionando solos.

   ⚠ ESTA HOJA REQUIERE css/dialog-system.css, CARGADA ANTES.
   Lo que era genérico —el campo, el grupo de campos, la rejilla de 12, los
   botones, la barra de pie y la paleta— se mudó allá, porque era del DIÁLOGO
   y no del comprobante; acá quedó solo lo que ningún otro diálogo tiene: la
   rejilla de 8 columnas, la fila de 52px, las marcas de documento, el renglón
   de totales y la tipografía de la plata. Los --je-* siguen existiendo, ahora
   como alias de los --dlg-* (ver el bloque de abajo).
   ════════════════════════════════════════════════════════════════════

   REGLA DE ORO DE ESTA PANTALLA: acá NO se usa una sola unidad `vh`.
   El alto lo manda la ventana flotante, no la pantalla.

   La cadena que sostiene todo:
       .floating-window (max-height)
         └ .floating-window-body   flex:1 · min-height:0
           └ shell de DialogShell  flex:1 · min-height:0
             └ .mud-dialog-content flex:1 · min-height:0 · sin scroll
               └ .je               flex:1 · min-height:0
                 └ .je-lineas      flex:1 · min-height:96px · EL ÚNICO SCROLL
   Si en cualquier eslabón falta `min-height: 0`, el flex-item se niega a
   encogerse por debajo de su contenido y el pie vuelve a irse abajo.
   ════════════════════════════════════════════════════════════════════ */

/* ─── LA REJILLA COMPARTIDA ───────────────────────────────────────────
   Un solo lugar define el ancho de las columnas. Encabezado, filas y el
   renglón de totales del pie usan esta misma variable, así los totales
   caen exactamente bajo su columna.

   El pie NO es descendiente de .je (vive en DialogActions), por eso las
   variables se declaran para los dos y `--je-marc` se les pasa en línea
   desde Blazor a ambos. */
.je,
.je-pie {
    /* ─── La paleta: ALIAS del sistema de diálogo ───
       Los valores ya no viven acá: los declara dialog-system.css como --dlg-*
       sobre estas mismas dos raíces, y acá se les da el nombre con el que las
       llaman las 90 reglas del comprobante. Mismo valor calculado, mismas
       reglas, mismo píxel; lo único que cambió es de dónde sale el número.
       Si algún día el comprobante necesita un tono propio, se rompe el alias
       en esta línea y no se toca el sistema. */
    --je-mono: var(--dlg-mono);
    --je-primary: var(--dlg-primary);
    --je-surf: var(--dlg-surf);
    --je-surf2: var(--dlg-surf2);
    --je-lines: var(--dlg-lines);
    --je-lines2: var(--dlg-lines2);
    --je-txt: var(--dlg-txt);
    --je-dim: var(--dlg-dim);
    --je-dim2: var(--dlg-dim2);
    --je-verde: var(--dlg-verde);
    --je-verde-bg: var(--dlg-verde-bg);
    --je-rojo: var(--dlg-rojo);
    --je-rojo-bg: var(--dlg-rojo-bg);
    --je-ambar: var(--dlg-ambar);
    --je-ambar-bg: var(--dlg-ambar-bg);
    --je-ambar-bd: var(--dlg-ambar-bd);

    /* ─── Lo que SÍ es del comprobante y de nadie más ─── */
    --je-rail: var(--mud-palette-lines-default);
    --je-sel: var(--mud-palette-primary-hover);

    /* Alto de fila del prototipo en su densidad por omisión («cómoda»): es el
       que deja entrar los DOS renglones de la celda de cuenta y de auxiliar. */
    --je-fila-h: 52px;

    /* Ancho de la barra de desplazamiento del scroller. El renglón de totales
       vive FUERA del scroller: sin descontarlo, los totales quedan corridos
       respecto de su columna. Lo mide je-grid.js. */
    --je-sbw: 0px;

    /* Columna de marcas: 0px cuando NADIE la usa. Lo fija Blazor en línea. */
    --je-marc: 0px;

    /*   #    registro cuenta glosa            auxiliar          marcas      debe  haber  acc */
    --je-grid: 44px 88px 152px minmax(104px, 1.05fr) minmax(136px, 1.7fr) var(--je-marc) 130px 130px 34px;
}

.je-grid {
    display: grid;
    grid-template-columns: var(--je-grid);
    align-items: stretch;
    min-width: 0;
}

/* Suma de los mínimos de las 9 columnas = 818px. Por debajo de ~910px un
   comprobante de 9 columnas no se lee: esta ventana necesita más piso que el
   min-width:480px genérico de floating-windows.css. */
.floating-window:has(.je) {
    min-width: 910px;
}

.je {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* min-width:0 NO es decorativo: sin él, .je es un ítem flex con min-width:auto
       y se estira hasta el min-content de las filas. Las columnas dejan de encoger,
       la fila queda MÁS ANCHA que la ventana y el Haber se pierde en silencio. */
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    color: var(--je-txt);
    background: var(--je-surf);
}

/* ═══ 1 · AVISO CONTABILIZADO — una línea, nunca se va de pantalla ═══ */
.je-aviso {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    background: var(--je-ambar-bg);
    border-bottom: 1px solid var(--je-ambar-bd);
    color: var(--je-ambar);
    font-size: 12px;
    font-weight: 600;
}

.je-aviso .ico {
    font-size: 14px;
    line-height: 1;
}

.je-aviso .col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.je-aviso .det {
    font-weight: 400;
    color: var(--je-ambar);
    opacity: .85;
}

.je-aviso.abierto {
    align-items: flex-start;
}

.je-aviso.abierto .det {
    display: block;
    margin-top: 2px;
    line-height: 1.45;
}

.je-aviso:not(.abierto) .col > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.je-aviso button {
    margin-left: auto;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--je-ambar-bd);
    color: var(--je-ambar);
    border-radius: 5px;
    padding: 2px 8px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ═══ 2 · CABECERA DEL COMPROBANTE (plegable) ═══
   Sin max-height y sin scroll interno: plegada mide 30px y desplegada mide lo
   que miden sus campos. La tira de 89px con scroll propio era inusable. */
.je-cab {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--je-lines);
    background: var(--je-surf);
}

.je-cab-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    cursor: pointer;
    user-select: none;
}

.je-cab-bar:hover {
    background: var(--je-surf2);
}

.je-cab-bar .tit {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--je-primary);
    white-space: nowrap;
}

.je-cab-bar .chev {
    transition: transform .18s;
    color: var(--je-dim);
    font-size: 11px;
}

.je-cab.plegada .je-cab-bar .chev {
    transform: rotate(-90deg);
}

.je-cab-bar .resumen {
    margin-left: 6px;
    font-size: 12px;
    color: var(--je-dim);
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.je-cab.plegada .resumen {
    display: block;
}

/* El cintillo no se puede plegar con la cabecera incompleta: el dato que falta
   tiene que quedar a la vista, y con el motivo dicho. */
.je-cab-bar .falta-cab {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--je-rojo);
    white-space: nowrap;
}

.je-cab-campos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px 12px;
    padding: 2px 14px 12px;
}

.je-cab.plegada .je-cab-campos {
    display: none;
}

/* Los campos de la cabecera (.campo, .campo.ro, .chk, .ayuda) y los anchos
   .g2...g12 los pone el SISTEMA DE DIÁLOGO — css/dialog-system.css. */

/* ═══ 3 · BARRA DE LÍNEAS — fuera del scroller ═══ */
.je-barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-bottom: 1px solid var(--je-lines2);
    background: var(--je-surf);
}

.je-barra .tit {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--je-primary);
}

.je-barra .cuenta {
    font-size: 11.5px;
    color: var(--je-dim);
    font-variant-numeric: tabular-nums;
}

.je-barra .der {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Los botones (.btn-sm, .btn) y las teclas <kbd> los pone el SISTEMA DE
   DIÁLOGO — css/dialog-system.css. */

/* ═══ 4 · CAJA DE LÍNEAS — EL ÚNICO SCROLL ═══ */
.je-lineas {
    /* `flex-basis: auto` y NO `0`. La ventana flotante no tiene alto propio: se
       estira con su contenido hasta su max-height. Con basis 0 la caja aporta 0 al
       alto natural y queda clavada en su piso —dos líneas visibles en un
       comprobante de 28—. Con basis auto la caja aporta el alto de sus filas, la
       ventana crece hasta donde puede y recién ahí la caja saca su barra. */
    flex: 1 1 auto;
    /* 96px = encabezado fijo + un par de renglones. Es el mínimo con el que la
       pantalla sigue diciendo la verdad en una ventana aplastada. */
    min-height: 96px;
    min-width: 0;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    outline: none;
    background: var(--je-surf);
    /* Para que el offsetTop de las filas se mida contra la caja: es lo que usa
       je-grid.js para desplazar sin meter la fila debajo del encabezado fijo. */
    position: relative;
}

.je-head {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--je-surf2);
    border-bottom: 1px solid var(--je-lines);
    box-shadow: 0 1px 0 var(--je-lines);
}

/* overflow:hidden es OBLIGATORIO: la columna de marcas mide 0px cuando nadie la
   usa, y su rótulo debe desaparecer sin desbordar. Ojo: la celda NUNCA se quita
   con display:none — eso saca el ítem de la rejilla y corre una columna todos
   los rótulos y todos los totales. */
.je-head .h {
    padding: 7px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--je-dim);
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.je-head .h.num {
    justify-content: flex-end;
}

/* ─── FILA COLAPSADA ───
   ALTO FIJO, no min-height: ninguna línea puede crecer por su contenido. Con
   alto fijo el scroll es predecible, 171 filas miden lo mismo, y ni un error de
   validación ni tres marcas de documento mueven nada de lo de abajo. */
.je-row {
    height: var(--je-fila-h);
    border-bottom: 1px solid var(--je-lines2);
    cursor: default;
    position: relative;
    background: var(--je-surf);
}

.je-row:hover {
    background: var(--je-surf2);
}

/* La selección la pinta el JS con un atributo propio (data-sel) y no con una
   clase: así Blazor nunca la pisa al re-renderizar la fila, y moverse con las
   flechas no cuesta un solo viaje al servidor. */
.je-row[data-sel="1"] {
    background: var(--je-sel);
}

.je-row.abierta {
    background: var(--je-sel);
}

/* La línea por la que se abrió el comprobante desde el mayor del auxiliar (Arturo, 02-11-2026: «que los deje resaltado en
   la línea que corresponde de manera elegante»). Un riel del color de la marca y un tinte suave que se quedan mientras
   la ventana está abierta; al llegar, un destello breve para que el ojo la encuentre. Va después de la selección para
   ganarle, y el riel rojo del error sigue mandando: una línea con error se ve con error. */
.je-row.resaltada {
    background: color-mix(in srgb, var(--je-primary) 15%, var(--je-surf));
    box-shadow: inset 4px 0 0 var(--je-primary);
    animation: je-resaltada-llega 1.8s ease-out;
}

.je-row.resaltada:hover,
.je-row.resaltada[data-sel="1"] {
    background: color-mix(in srgb, var(--je-primary) 21%, var(--je-surf));
}

.je-row.resaltada.err {
    box-shadow: inset 4px 0 0 var(--je-rojo);
}

.je-row.resaltada .c-n {
    color: var(--je-primary);
    font-weight: 700;
}

@keyframes je-resaltada-llega {
    0%, 35% { background: color-mix(in srgb, var(--je-primary) 34%, var(--je-surf)); }
    100% { background: color-mix(in srgb, var(--je-primary) 15%, var(--je-surf)); }
}

@media (prefers-reduced-motion: reduce) {
    .je-row.resaltada { animation: none; }
}

/* El riel es del ERROR, como en el prototipo, y SOLO del error.
   El ÁMBAR —dato pendiente— no lleva riel a propósito: en el tenant asysa lo
   traen 13.732 de 23.893 líneas migradas, así que un riel por línea deja una
   pared de color de punta a punta que nadie mira. El ámbar se dice donde
   importa: la insignia «sin doc / sin aux / sin C.C.» de la columna de marcas y
   el punto sobre la celda culpable. */
.je-row.err {
    box-shadow: inset 3px 0 0 var(--je-rojo);
}

.c {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3px 8px;
    min-width: 0;
    overflow: hidden;
}

.c.num {
    align-items: flex-end;
}

.c.ctr {
    align-items: center;
}

/* # de línea */
.c-n {
    align-items: flex-end;
    justify-content: center;
    font-family: var(--je-mono);
    font-size: 11px;
    color: var(--je-dim2);
    font-variant-numeric: tabular-nums;
    padding-right: 9px;
}

/* Registro: cuándo se registró el movimiento en el comprobante (27-10-2026).
   Dos renglones como la cuenta, el día arriba y la hora abajo, atenuados:
   es un dato de consulta y no compite con la cuenta ni con la plata. */
.c-reg .dia,
.c-reg .hora {
    display: block;
    white-space: nowrap;
    font-family: var(--je-mono);
    font-variant-numeric: tabular-nums;
}

.c-reg .dia {
    font-size: 11.5px;
    color: var(--je-dim);
    line-height: 1.25;
}

.c-reg .hora {
    font-size: 10.5px;
    color: var(--je-dim2);
    line-height: 1.3;
    margin-top: 1px;
}

.c-reg .sin {
    font-size: 12px;
    color: var(--je-dim2);
}

/* display:block en TODAS las celdas de texto. En un <span> inline el
   overflow:hidden y el text-overflow:ellipsis NO se aplican —el texto se sale y
   lo corta el padre a hachazos, sin puntos suspensivos—. */
.c-cta .cod,
.c-cta .nom,
.c-aux .nom,
.c-aux .rut {
    display: block;
}

/* Cuenta — el código son SIEMPRE 11 caracteres (dato real): jamás se trunca. */
.c-cta .cod {
    font-family: var(--je-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-cta .cod i {
    opacity: .38;
    font-style: normal;
}

.c-cta .nom {
    font-size: 10.5px;
    color: var(--je-dim);
    line-height: 1.3;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-cta .sin {
    font-size: 12px;
    color: var(--je-dim2);
    font-style: italic;
}

/* Corrida: línea con la MISMA cuenta que la anterior. El código sigue legible,
   solo baja de énfasis y aparece el riel de continuidad. */
.je-row.corrida .c-cta .cod {
    opacity: .5;
    font-weight: 500;
}

.je-row.corrida .c-cta .nom {
    display: none;
}

.je-row.corrida .c-cta::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--je-rail);
    opacity: .55;
}

/* Glosa — dos renglones de verdad: la glosa larga BAJA en vez de recortarse. */
.c-glosa .txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.36;
    word-break: break-word;
}

.c-glosa .vacio {
    color: var(--je-dim2);
    font-style: italic;
    font-size: 11.5px;
}

/* Auxiliar — el campo que más varía y el peor truncado. Se lleva el mayor flex. */
.c-aux .nom {
    font-size: 12.5px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-aux .rut {
    font-family: var(--je-mono);
    font-size: 10.5px;
    color: var(--je-dim);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    margin-top: 1px;
}

.c-aux .sin {
    color: var(--je-dim2);
    font-size: 12px;
}

/* Marcas: documento / centro de costo / EFE. Columna de ancho 0 si nadie las usa. */
.c-marc {
    flex-direction: row;
    align-items: center;
    align-content: center;
    gap: 3px 4px;
    flex-wrap: wrap;
    max-height: 100%;
}

/* sin marcas la celda no debe aportar ni sus 16px de padding a una columna de 0px */
.c-marc:empty {
    padding: 0;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .02em;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    background: var(--je-surf2);
    border: 1px solid var(--je-lines);
    color: var(--je-dim);
}

.marca .v {
    font-family: var(--je-mono);
    color: var(--je-txt);
}

/* Lo que la cuenta EXIGE y la línea no trae. Es dato pendiente, no error. */
.marca.falta {
    background: var(--je-ambar-bg);
    border-color: var(--je-ambar-bd);
    color: var(--je-ambar);
}

/* ─── El documento que la línea REFERENCIA ───
   La línea lleva DOS documentos y hay que verlos los dos sin que se confundan: el del
   movimiento (CB 72026, con qué se movió la plata) y el que referencia (FACTURA DE COMPRA
   53848721, qué se pagó con ella). La insignia referenciada se separa por dos señales
   independientes —la flecha «↪» del marcado y este color primario— porque el color solo
   no sirve para quien no lo distingue; el `title` de cada una lo dice con todas las letras.

   NO lleva riel, ni fondo saturado, ni negrita: es la MISMA insignia de siempre teñida,
   para que dos marcas en una fila de 52px sigan leyéndose como una unidad y no como
   ruido. Las dos caben en los 132px de la columna ajustando a dos renglones. */
.marca.ref {
    background: color-mix(in srgb, var(--je-primary) 9%, var(--je-surf));
    border-color: color-mix(in srgb, var(--je-primary) 34%, var(--je-lines));
    color: color-mix(in srgb, var(--je-primary) 78%, var(--je-txt));
}

/* Se puede abrir: un clic muestra el PDF del documento referenciado. */
.marca.ref {
    cursor: pointer;
}

.marca.ref:hover {
    border-color: var(--je-primary);
}

.marca.ref .v {
    color: color-mix(in srgb, var(--je-primary) 42%, var(--je-txt));
}

/* Importes — tipografía de libro contable */
.c-imp {
    align-items: flex-end;
    justify-content: center;
}

.c-imp .n {
    font-family: var(--je-mono);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.c-debe {
    background: color-mix(in srgb, var(--je-primary) 3.5%, transparent);
}

/* Acción / chevron */
.c-act {
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--je-dim2);
    font-size: 12px;
    cursor: pointer;
}

.c-act .chev {
    display: inline-block;
    transition: transform .16s;
}

.je-row.abierta .c-act .chev {
    transform: rotate(90deg);
    color: var(--je-primary);
}

/* Punto de problema: absoluto, NO empuja nada */
.c.malo::after,
.c.dudoso::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.c.malo::after {
    background: var(--je-rojo);
}

.c.dudoso::after {
    background: var(--je-ambar);
}

.vacio-msg {
    padding: 34px;
    text-align: center;
    color: var(--je-dim2);
    font-size: 13px;
}

/* ═══ PANEL EXPANDIDO (acordeón) ═══ */
.je-exp {
    border-bottom: 1px solid var(--je-lines);
    background: var(--je-surf2);
    box-shadow: inset 3px 0 0 var(--je-primary), inset 0 1px 0 var(--je-lines2);
    padding: 14px 16px 16px 18px;
    animation: je-exp-in .16s ease-out;
}

@keyframes je-exp-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.je-exp .exp-tit {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--je-primary);
}

.je-exp .exp-tit .n {
    font-family: var(--je-mono);
    background: var(--je-primary);
    color: var(--mud-palette-primary-text);
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0;
}

.je-exp .exp-tit .der {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.exp-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px 12px;
    align-items: end;
}

/* El separador .exp-sep, el GRUPO de campos con rótulo propio (.campo-grupo)
   —el que nació acá por los DOS documentos de la línea— y el traje del sistema
   para los controles de MudBlazor (incluidas las severidades .malo/.dudoso)
   los pone ahora el SISTEMA DE DIÁLOGO — css/dialog-system.css.

   Los controles MudBlazor del panel son los ÚNICOS de las líneas: como hay un
   solo editor abierto a la vez, son a lo sumo 6 vivos en vez de 6 × 171. */

/* Debe y Haber: la tipografía de la plata, que es lo que más se mira. Esto SÍ
   es del comprobante: ningún otro diálogo tiene una columna de dinero. */
.je-exp .campo.plata .mud-input input {
    font-family: var(--je-mono);
    font-size: 19px !important;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.je-exp .campo.plata .mud-input.mud-input-outlined > input {
    height: 38px;
}

/* ═══ PIE FIJO — totales, cuadratura y botones. Nunca scrollea. ═══
   La barra en sí (.je-pie, .je-acciones, .je-acciones .der, .estado) y el
   relleno cero de .mud-dialog-actions los pone el SISTEMA DE DIÁLOGO —
   css/dialog-system.css. Acá queda SOLO el renglón de totales, que es lo único
   que ningún otro diálogo tiene: cada total cae bajo su columna de la rejilla. */
.je-tot {
    border-bottom: 1px solid var(--je-lines2);
    padding-right: var(--je-sbw);
}

.je-tot .t {
    padding: 9px 8px;
    display: flex;
    align-items: center;
    font-family: var(--je-mono);
    font-size: 15px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    justify-content: flex-end;
    white-space: nowrap;
    overflow: hidden;
}

.je-tot .rot {
    justify-content: flex-end;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--je-dim);
}

.je-tot .t.debe {
    background: color-mix(in srgb, var(--je-primary) 5%, transparent);
}

.contadores {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--je-dim);
}

.contadores .prob {
    color: var(--je-rojo);
    font-weight: 650;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--je-rojo) 35%, transparent);
    background: var(--je-rojo-bg);
    border-radius: 6px;
    padding: 3px 9px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--je-rojo);
}

.contadores .prob.fijo {
    cursor: default;
}

/* ─── Opción del desplegable de cuenta / auxiliar ───
   Vive FUERA de .je (MudBlazor manda sus popover al final del <body>), así que
   acá no hay variables --je-* que heredar: se leen las de MudBlazor directo.
   Es la misma forma del selector del prototipo: código a la izquierda con el
   color de la marca, nombre a la derecha y sin envolver. */
.je-op {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    width: 100%;
}

.je-op .cod {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 650;
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}

.je-op .nom {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   RESPALDO DEL TRABAJO SIN GUARDAR
   ────────────────────────────────────────────────────────────────────
   Tres piezas y una regla que las une.

   LA REGLA VISUAL: lo que TODAVÍA NO EXISTE en la contabilidad se dibuja
   con borde PUNTEADO; lo que ya existe en la base va con borde sólido.
   Se aprende sin leer, y es la segunda barrera contra la confusión que
   esta función podría crear («creí que estaba guardado»).

   LA PRIMERA BARRERA ES LA PALABRA. Acá NUNCA se dice «borrador» ni
   «guardado» para hablar del respaldo: en este ERP «Borrador» ya es un
   comprobante que EXISTE con número (JournalEntryStatus.Draft) y tiene
   su propio contador en la lista. El verbo del respaldo es RESPALDAR.

   ⚠ NADA DE ESTO PUEDE MOVER EL PIE. La pastilla es más baja que
   .estado (12,5px sin fondo contra 13,5px con relleno de 7px), no lleva
   `margin` vertical y .der sigue empujada por su `margin-left:auto`.
   Medido: el pie mantiene su alto con y sin pastilla.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1 · LA PASTILLA, pegada a los botones ───
   Va acá y no en un rincón: el peligro aparece justo en el segundo en que
   el usuario decide irse, y así queda al lado del botón Guardar. */
.je-acciones .wip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    line-height: 1.2;
    color: var(--je-txt);
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
}

.je-acciones .wip:hover {
    background: color-mix(in srgb, var(--je-txt) 6%, transparent);
}

.je-acciones .wip:focus-visible {
    outline: 2px solid var(--je-primary);
    outline-offset: 1px;
}

/* El punto: 8px. NUNCA es lo único que distingue un estado — al lado va
   siempre la palabra, para quien no distingue los colores. */
.je-acciones .wip .pt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.je-acciones .wip.sin-guardar .pt {
    border: 1.5px dashed var(--je-dim);   /* hueco y punteado: todavía no existe */
    background: none;
}

.je-acciones .wip.borrador .pt {
    background: var(--je-ambar);          /* lleno: ya existe, con número */
}

.je-acciones .wip.contabilizado .pt {
    background: var(--je-verde);
}

/* El ESTADO REAL del documento. Sin mayúsculas ni fondo: no puede competir
   con CUADRADO / DIFERENCIA, que sigue siendo lo más fuerte del pie. */
.je-acciones .wip .est {
    font-size: 12.5px;
    font-weight: 600;
}

.je-acciones .wip .sep {
    color: var(--je-dim2);
    font-size: 11px;
}

/* El respaldo va SUBORDINADO: más chico, más apagado y siempre después. */
.je-acciones .wip .resp {
    font-size: 11px;
    font-weight: 400;
    color: var(--je-dim);
    transition: opacity .6s ease;
}

.je-acciones .wip .resp.malo {
    color: var(--je-rojo);
    font-weight: 600;
}

.je-acciones .wip-reintentar {
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    color: var(--je-rojo);
    background: var(--je-rojo-bg);
    border: 1px solid color-mix(in srgb, var(--je-rojo) 35%, transparent);
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
}

/* ─── 2 · LA ESCALERA ───
   Los tres peldaños del documento, a demanda. Permanente es la PALABRA;
   la explicación se abre al pulsar, porque el pie ya carga CUADRADO, dos
   contadores y dos botones y no aguanta un párrafo más. */
.je-acciones .wip-escalera {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 430px;
    max-width: 78vw;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    text-align: left;
    white-space: normal;
    background: var(--je-surf);
    border: 1px solid var(--je-lines);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    cursor: default;
}

.je-acciones .wip-escalera .peldano {
    display: grid;
    grid-template-columns: 14px 108px 1fr;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--je-dim);
    opacity: .45;
}

.je-acciones .wip-escalera .peldano.actual {
    opacity: 1;
    color: var(--je-txt);
}

.je-acciones .wip-escalera .peldano .nom {
    font-weight: 700;
}

.je-acciones .wip-escalera .peldano.actual .nom {
    font-weight: 800;
}

.je-acciones .wip-escalera .nota {
    margin-top: 3px;
    padding-top: 8px;
    border-top: 1px solid var(--je-lines2);
    font-size: 11.5px;
    color: var(--je-dim);
}

/* Región viva del lector de pantalla. No se ve, pero EXISTE: la pastilla no
   puede ser `aria-live` o un lector diría «respaldado» cada quince segundos. */
.wip-anuncio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─── 3 · EL CINTILLO DE VUELTA ───
   Tiene la forma de .je-aviso pero SIN ámbar a propósito: recuperar el
   trabajo es una buena noticia, no una advertencia. */
.wip-vuelta {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    margin-bottom: 8px;
    border: 1px dashed var(--je-lines);
    border-radius: 8px;
    background: var(--je-surf2);
    font-size: 12.5px;
    color: var(--je-txt);
    flex-shrink: 0;
}

.wip-vuelta button {
    margin-left: auto;
    font: inherit;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--je-primary);
    background: none;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
}

/* ─── 4 · LA TIRA DE «TRABAJO SIN TERMINAR» (lista de comprobantes) ───
   Vive FUERA de .je —es la pantalla de lista, no el diálogo—, así que se
   apoya en las variables del sistema de diálogo, que se declaran sobre
   .dlg y .je. Acá no hay ninguna de las dos: se leen las de MudBlazor. */
.wip-tira {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 11px 14px;
    /* PUNTEADO: lo de adentro todavía no existe en la contabilidad. */
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

.wip-tira .fila {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.wip-tira .tit {
    font-weight: 750;
}

.wip-tira .det {
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
}

.wip-tira .acciones {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.wip-tira button {
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    border-radius: 7px;
    padding: 4px 11px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.wip-tira button.pri {
    border-color: transparent;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.wip-tira button.txt {
    border-color: transparent;
    background: none;
    color: var(--mud-palette-text-secondary);
}