/* ════════════════════════════════════════════════════════════════════
   SISTEMA DE DIÁLOGO — Erp
   El traje común de los diálogos: campo, grupo de campos, rejilla de 12,
   botones y barra de pie.

   DE DÓNDE SALE
   Todo esto nació dentro de journal-entry.css, la hoja del comprobante
   contable, porque el comprobante fue la primera pantalla portada del
   prototipo aprobado «legibilidad». Pero el sistema nunca fue del
   comprobante: es del diálogo. Vivía ahí por accidente histórico, y
   cualquier otra pantalla que lo quisiera tenía que cargar —y arriesgarse
   a romper— la hoja del comprobante entero.

   CÓMO SE SEPARÓ, SIN MOVER EL COMPROBANTE NI UN PÍXEL
   1. Los valores de la paleta se declaran acá UNA vez, con nombre propio
      (--dlg-*), sobre las raíces del sistema: .dlg y .dlg-pie (los diálogos
      nuevos), .je y .je-pie (el comprobante, que ya existía) y .nov / .nov-pie
      (la reja de Novedades del Mes y la de Cierre del Mes, que la comparten).
      Agregar una raíz es ADITIVO: no cambia ni un valor de las anteriores.
   2. journal-entry.css conserva sus --je-* pero ahora son ALIAS
      (--je-primary: var(--dlg-primary)). Mismo valor calculado, mismas
      reglas, mismo resultado: el comprobante no se entera.
   3. Las reglas compartidas (.campo, .campo-grupo, .g*, .btn, el pie) se
      mudaron acá con su selector original en la lista, así el comprobante
      las sigue recibiendo exactamente igual.
   Medido antes y después: fila 52px, columna de marcas 132px, los 13
   campos del panel y las dos insignias, idénticos.

   ⚠ ESTA HOJA CARGA ANTES QUE journal-entry.css (ver _Host.cshtml). Es a
   propósito: lo propio del comprobante tiene que poder ganarle al sistema,
   nunca al revés.
   ════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · LA PALETA DEL SISTEMA ═══
   El TONO sale de la paleta del ERP por las variables de MudBlazor —nunca un
   hexadecimal crudo— así el tema claro y el oscuro siguen funcionando solos.

   Los colores semánticos se MEZCLAN con el texto del tema en vez de usar el
   tono crudo. Es la diferencia entre legible e ilegible: el ámbar de la paleta
   (#F9A825) sobre su propio fondo claro daba 1,97:1 —texto invisible—.
   Mezclado con el texto del tema da un ámbar oscuro en claro y uno claro en
   oscuro, sin necesitar un bloque por tema: --mud-palette-text-primary ya se
   invierte solo. */
.dlg,
.dlg-pie,
.dlg-cuerpo,
.je,
.je-pie,
.nov,
.nov-pie {
    --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));

    /* El respiro del diálogo contra el borde de la ventana flotante. Es UN solo
       número y lo usan el cuerpo y el pie, por eso los dos quedan a plomo.
       14px es la medida del comprobante (.je-cab-campos), medida en pantalla. */
    --dlg-margen: 14px;
}

/* ═══ 2 · RAÍZ DEL DIÁLOGO DE FORMULARIO ═══
   .dlg es lo que va DENTRO de <DialogContent>. Trae su propio relleno: sin él
   los campos quedan pegados al borde de la ventana flotante, que es justo el
   defecto que hizo nacer esta hoja. */
.dlg {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--dlg-margen);
    min-width: 0;
    font-size: 13px;
    color: var(--dlg-txt);
    background: var(--dlg-surf);
}

/* En modo diálogo modal (sin ventana flotante) MudBlazor le pone SU relleno al
   contenido; con el de .dlg encima serían dos. Manda el del sistema. */
.mud-dialog-content:has(> .dlg) {
    padding: 0;
}

/* ═══ 2 bis · EL RESPIRO DEL CUERPO EN VENTANA FLOTANTE ═══
   Quién pone el relleno del cuerpo del diálogo depende del modo, y ahí estaba el
   defecto: las tres reglas de MudBlazor que le dan relleno a .mud-dialog-content
   cuelgan de .mud-dialog, y en modo ventana flotante ese contenedor NO existe
   (DialogShell dibuja el contenido sin <MudDialog>). Medido en pantalla: de esas
   tres reglas calzaban CERO, relleno efectivo 0px. Por eso los campos quedaban
   pegados al borde, y no en un diálogo suelto sino en todos los flotantes.

   Se repone acá, en el sistema, con el mismo margen que respira el comprobante.
   Sólo lo lleva el cuerpo que scrollea: el que maneja su propio scroll interno
   —el comprobante contable— sigue con relleno 0 y su rejilla intacta. */
.dlg-cuerpo {
    padding: var(--dlg-margen);
}

/* El contenido que ya trae el suyo no lleva otro encima: .dlg tiene su propio
   padding y sumarlos daría el doble de aire.

   ⚠ Va SIN el `>` a propósito. Con hijo directo se escapaban los diálogos que
   envuelven su `.dlg` en otra cosa —AuxiliaryDialog lo mete dentro de un
   <MudForm>—, y ahí el aire salía DOBLE: 29px medidos del borde de la ventana a
   la rejilla, en vez de los 15 previstos. Buscar el `.dlg` a cualquier
   profundidad cuesta lo mismo y no deja ese hueco. */
.dlg-cuerpo:has(.dlg) {
    padding: 0;
}

/* La rejilla de 12 del sistema. Es la misma de la cabecera del comprobante. */
.dlg-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px 12px;
    min-width: 0;
}

/* Separador de ancho completo dentro de una rejilla del sistema. */
.dlg-sep,
.exp-sep {
    grid-column: span 12;
    height: 1px;
    background: var(--dlg-lines);
    margin: 2px 0;
}

/* ═══ 3 · CAMPO — rótulo arriba, dato abajo ═══
   La pieza atómica del sistema. Sirve con un control nativo (input/select/
   textarea), con un valor de solo lectura (.ro) o con casillas (.chk). */
.campo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.campo > label {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dlg-dim);
}

.campo > .val,
.campo > input,
.campo > select,
.campo > textarea {
    font: inherit;
    font-size: 13px;
    color: var(--dlg-txt);
    background: var(--dlg-surf);
    border: 1px solid var(--dlg-lines);
    border-radius: 6px;
    padding: 7px 9px;
    min-height: 34px;
    width: 100%;
}

.campo > input:focus,
.campo > select:focus,
.campo > textarea:focus {
    outline: none;
    border-color: var(--dlg-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dlg-primary) 18%, transparent);
}

/* Solo lectura: NO es un input deshabilitado —un input gris se sigue leyendo
   como «esto debería poder escribirse»—. Es el dato, en su caja, sin promesa. */
.campo.ro > .val {
    background: var(--dlg-surf2);
    color: var(--dlg-dim);
    font-family: var(--dlg-mono);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.campo .chk {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 34px;
}

.campo .chk label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    cursor: pointer;
}

.campo .chk input {
    accent-color: var(--dlg-primary);
}

.campo .pista {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--dlg-dim2);
    font-size: 10px;
}

/* El texto de ayuda solo existe si HAY algo que decir: si reservara alto fijo,
   el panel crecería una fila entera por nada. */
.campo .ayuda {
    font-size: 11px;
    color: var(--dlg-dim2);
    line-height: 1.3;
}

.campo .ayuda.malo {
    color: var(--dlg-rojo);
    font-weight: 600;
}

.campo .ayuda.dudoso {
    color: var(--dlg-ambar);
    font-weight: 600;
}

.campo.mono > input,
.campo.mono > .val {
    font-family: var(--dlg-mono);
    font-variant-numeric: tabular-nums;
}

.campo > input.ro,
.campo > .val.ro {
    background: var(--dlg-surf2);
    color: var(--dlg-dim);
}

.campo > input.grande,
.campo > select.grande {
    min-height: 40px;
    font-size: 14.5px;
}

/* Dos severidades: `malo` es un error del usuario y `dudoso` es un dato que
   todavía no llega —pintar de rojo lo que solo falta sería mentir—. */
.campo.malo > input,
.campo.malo > select {
    border-color: var(--dlg-rojo);
    background: var(--dlg-rojo-bg);
}

.campo.dudoso > input,
.campo.dudoso > select {
    border-color: var(--dlg-ambar-bd);
    background: var(--dlg-ambar-bg);
}

/* ═══ 4 · GRUPO de campos con rótulo propio ═══
   El grupo es UN SOLO ítem de la rejilla de 12 y adentro corre su propia
   rejilla de 6. Eso es lo que lo hace sobrevivir al plegado de <1080px: la
   regla que allí convierte g2..g5 en «media rejilla» apila los campos DENTRO
   del grupo en vez de despegarlos de su rótulo, que es lo que pasaría con el
   rótulo suelto en la rejilla de afuera. */
.campo-grupo {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.campo-grupo > .grupo-rot {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dlg-primary);
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--dlg-primary) 22%, transparent);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.campo-grupo > .grupo-rot .pista {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--dlg-dim2);
    font-size: 10px;
}

.campo-grupo > .grupo-campos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px 12px;
    align-items: end;
}

/* ═══ 5 · ANCHOS ═══
   Fuera de un grupo cuentan sobre 12; dentro de .grupo-campos, sobre 6. */
.g2 { grid-column: span 2; }
.g3 { grid-column: span 3; }
.g4 { grid-column: span 4; }
.g5 { grid-column: span 5; }
.g6 { grid-column: span 6; }
.g7 { grid-column: span 7; }
.g8 { grid-column: span 8; }
.g12 { grid-column: span 12; }

@media (max-width: 1080px) {
    .g2, .g3, .g4, .g5 { grid-column: span 6; }
    .g7, .g8 { grid-column: span 12; }
}

/* ═══ 6 · LOS CONTROLES DE MUDBLAZOR, CON EL TRAJE DEL SISTEMA ═══
   Cuando el campo necesita lo que MudBlazor trae de fábrica —validación de
   MudForm, autocompletado, desplegable con íconos— el control va DENTRO del
   .campo y acá se le saca el traje de MudBlazor para ponerle el del sistema.
   El rótulo lo pone el .campo, no el componente: dos rótulos es un rótulo mal
   puesto. */
.dlg .mud-input-control,
.je-exp .mud-input-control,
.nov-exp .mud-input-control {
    margin-top: 0 !important;
}

/* ─── Un renglón, una línea de base ───
   MudBlazor deja 4px por debajo del control para el texto de ayuda, y su caja mide
   38px. Un .campo.ro al lado medía 34px sin ese margen: 7,41px de diferencia que
   desalineaban los rótulos del MISMO renglón (medido: «TIPO» arrancaba 7px más
   arriba que «RUT»). Acá los dos miden 38px y el hueco de ayuda se lo queda el
   helper-text cuando existe. Va solo en .dlg: el comprobante no se toca. */
.dlg .mud-input-control {
    margin-bottom: 0 !important;
}

.dlg .campo.ro > .val {
    min-height: 38px;
}

.dlg .mud-input.mud-input-outlined,
.je-exp .mud-input.mud-input-outlined,
.nov-exp .mud-input.mud-input-outlined {
    background: var(--dlg-surf);
    border-radius: 6px;
    font-size: 14.5px;
}

.dlg .mud-input.mud-input-outlined > input,
.dlg .mud-input.mud-input-outlined > .mud-input-slot,
.je-exp .mud-input.mud-input-outlined > input,
.je-exp .mud-input.mud-input-outlined > .mud-input-slot,
.nov-exp .mud-input.mud-input-outlined > input,
.nov-exp .mud-input.mud-input-outlined > .mud-input-slot {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14.5px;
}

.dlg .mud-input-outlined-border,
.je-exp .mud-input-outlined-border,
.nov-exp .mud-input-outlined-border {
    border-color: var(--dlg-lines) !important;
    border-width: 1px !important;
    border-radius: 6px !important;
}

.dlg .mud-input.mud-focused .mud-input-outlined-border,
.je-exp .mud-input.mud-focused .mud-input-outlined-border,
.nov-exp .mud-input.mud-focused .mud-input-outlined-border {
    border-color: var(--dlg-primary) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dlg-primary) 18%, transparent);
}

.dlg .campo.malo .mud-input-outlined-border,
.je-exp .campo.malo .mud-input-outlined-border,
.nov-exp .campo.malo .mud-input-outlined-border {
    border-color: var(--dlg-rojo) !important;
}

.dlg .campo.malo .mud-input.mud-input-outlined,
.je-exp .campo.malo .mud-input.mud-input-outlined,
.nov-exp .campo.malo .mud-input.mud-input-outlined {
    background: var(--dlg-rojo-bg);
}

.dlg .campo.dudoso .mud-input-outlined-border,
.je-exp .campo.dudoso .mud-input-outlined-border,
.nov-exp .campo.dudoso .mud-input-outlined-border {
    border-color: var(--dlg-ambar-bd) !important;
}

.dlg .campo.dudoso .mud-input.mud-input-outlined,
.je-exp .campo.dudoso .mud-input.mud-input-outlined,
.nov-exp .campo.dudoso .mud-input.mud-input-outlined {
    background: var(--dlg-ambar-bg);
}

.dlg .campo.mono .mud-input input,
.je-exp .campo.mono .mud-input input,
.nov-exp .campo.mono .mud-input input {
    font-family: var(--dlg-mono);
    font-variant-numeric: tabular-nums;
}

/* Un textarea no puede quedar clavado en 38px: crece con sus renglones y el
   alto lo manda el componente (Lines). El selector repite `.mud-input-slot`
   a propósito —el textarea LLEVA esa clase—: sin eso la regla de arriba, que
   tiene una clase más, le gana y el campo de notas queda de un solo renglón. */
.dlg .mud-input.mud-input-outlined > textarea,
.dlg .mud-input.mud-input-outlined > textarea.mud-input-slot {
    height: auto;
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14.5px;
}

/* ─── El campo en falta ───
   Cuando el error lo detecta MudForm (y no el código de la pantalla con
   .campo.malo), MudBlazor marca el control con .mud-input-error. Pero el borde
   neutro de más arriba lleva `!important` y se comía la marca: quedaba el
   mensaje en rojo y el campo culpable sin señalar. Estas dos reglas le ganan
   por especificidad y le ponen el MISMO rojo de .campo.malo. */
.dlg .mud-input.mud-input-error .mud-input-outlined-border {
    border-color: var(--dlg-rojo) !important;
}

.dlg .mud-input.mud-input-error.mud-input-outlined {
    background: var(--dlg-rojo-bg);
}

/* El mensaje de validación de MudForm, con la voz del sistema: es el mismo
   ámbar/rojo de .campo .ayuda y no un bloque tipográfico ajeno. */
.dlg .mud-input-helper-text {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 3px;
}

.dlg .mud-input-helper-text.mud-input-error {
    color: var(--dlg-rojo);
    font-weight: 600;
}

/* MudBlazor sangra el mensaje 8px (px-2). A plomo con su campo se lee como
   parte del campo y no como una nota suelta. */
.dlg .mud-input-control-helper-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ═══ 7 · BOTONES ═══ */
.btn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dlg-txt);
}

.btn.txt:hover {
    background: var(--dlg-lines2);
}

.btn.pri {
    background: var(--dlg-primary);
    color: var(--mud-palette-primary-text);
}

.btn.pri:hover {
    filter: brightness(1.08);
}

.btn.pri:disabled {
    opacity: .4;
    cursor: not-allowed;
    filter: none;
}

.btn.pri kbd {
    margin-left: 5px;
    color: var(--mud-palette-primary-text);
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .3);
}

.btn-sm {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--dlg-lines);
    background: var(--dlg-surf);
    color: var(--dlg-txt);
    cursor: pointer;
    white-space: nowrap;
}

.btn-sm:hover {
    border-color: var(--dlg-primary);
    color: var(--dlg-primary);
}

/* Con un icono adelante: el icono y el texto a una misma altura, y el icono del color de la marca para que el botón
   se lea como una acción del sistema y no como un rótulo. */
.btn-sm.con-icono {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-sm.con-icono .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--dlg-primary);
}

/* Un botón que no se puede apretar tiene que verse así: sin esto quedaba idéntico al que sí. */
.btn-sm:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.btn-sm:disabled:hover {
    border-color: var(--dlg-lines);
    color: var(--dlg-txt);
}

.btn-sm.pri {
    background: var(--dlg-primary);
    border-color: var(--dlg-primary);
    color: var(--mud-palette-primary-text);
}

.btn-sm.pri:hover {
    filter: brightness(1.08);
    color: var(--mud-palette-primary-text);
}

.btn-sm.rojo {
    color: var(--dlg-rojo);
}

.btn-sm.rojo:hover {
    border-color: var(--dlg-rojo);
    color: var(--dlg-rojo);
}

.dlg kbd,
.dlg-pie kbd,
.je kbd,
.je-pie kbd,
.nov kbd,
.nov-pie 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);
}

.btn-sm.pri kbd {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .3);
    color: var(--mud-palette-primary-text);
    margin-left: 4px;
}

/* ═══ 8 · PIE FIJO — estado a la izquierda, botones a la derecha ═══
   Nunca scrollea. MudBlazor le pone relleno propio a la barra de acciones; acá
   lo manda el pie, que necesita llegar de borde a borde (en el comprobante el
   renglón de totales tiene que caer bajo su columna). */
.mud-dialog-actions:has(> .dlg-pie),
.mud-dialog-actions:has(> .je-pie),
.floating-window-body .mud-dialog-actions:has(> .dlg-pie),
.floating-window-body .mud-dialog-actions:has(> .je-pie) {
    padding: 0 !important;
    border-top: 2px solid var(--mud-palette-lines-default) !important;
}

.dlg-pie,
.je-pie {
    background: var(--dlg-surf2);
    flex-shrink: 0;
    width: 100%;
    color: var(--dlg-txt);
    font-size: 13px;
}

.dlg-acciones,
.je-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px var(--dlg-margen);
}

.dlg-acciones .der,
.je-acciones .der {
    margin-left: auto;
    display: flex;
    gap: 9px;
    align-items: center;
}

/* La insignia de estado del pie. */
.estado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 750;
    letter-spacing: .01em;
    white-space: nowrap;
}

.estado.ok {
    background: var(--dlg-verde-bg);
    color: var(--dlg-verde);
    border: 1px solid color-mix(in srgb, var(--dlg-verde) 35%, transparent);
}

.estado.mal {
    background: var(--dlg-rojo-bg);
    color: var(--dlg-rojo);
    border: 1px solid color-mix(in srgb, var(--dlg-rojo) 35%, transparent);
}

.estado.neutro {
    background: var(--dlg-surf);
    color: var(--dlg-dim);
    border: 1px solid var(--dlg-lines);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
}

.estado .cifra {
    font-family: var(--dlg-mono);
    font-variant-numeric: tabular-nums;
}

.estado .ico {
    font-size: 15px;
}

/* ═══ 9 · LA PASTILLA DEL TRABAJO SIN GUARDAR ═══

   EL PELIGRO QUE RESUELVE
   Blazor Server guarda el estado de la pantalla en la RAM del servidor. Si la
   conexión se corta lo suficiente, el circuito muere y se pierde todo lo no
   guardado. Ahora hay un respaldo automático que lo evita — pero contarlo mal
   sería PEOR que no tenerlo.

   POR QUÉ ACÁ NUNCA SE DICE «BORRADOR» NI «GUARDADO»
   En este ERP «Borrador» ya tiene dueño: JournalEntryStatus.Draft, que es un
   comprobante que YA existe en la base, con número, y que no mueve saldos hasta
   publicarlo. Tiene su propio contador en la fila de KPI. Si al respaldo
   automático le dijéramos «borrador guardado», el usuario entendería «quedó
   registrado como comprobante N° …». Ese es exactamente el error contable que
   hay que hacer imposible.

   El verbo de esto es RESPALDAR — en Chile «respaldo» es copia de seguridad y
   nadie lo confunde con «quedó contabilizado». Y hay una segunda barrera, más
   fuerte que la palabra: la pastilla EMPIEZA SIEMPRE diciendo el estado real
   del documento, y el respaldo va después, subordinado:

       ● Sin guardar · respaldado 14:32

   Es imposible leer eso y creer que quedó guardado: lo primero que dice es
   «Sin guardar».

   DÓNDE VA
   En .je-acciones, inmediatamente a la izquierda del grupo de botones. Ahí, y
   no en un rincón: el peligro («creí que estaba guardado») se resuelve justo en
   el segundo en que el usuario decide irse, y así la pastilla queda pegada al
   botón Guardar.

   LO QUE NO PUEDE HACER
   Competir con CUADRADO / DIFERENCIA, que sigue siendo lo más fuerte del pie:
   sin mayúsculas, sin fondo y más chica. Y no mueve NADA: la fila de 52px, la
   columna de marcas de 132px, los márgenes de 15px y el pie fijo del
   comprobante están verificados al pixel contra el prototipo aprobado. */

.wip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    border: 0;
    background: none;
    font: inherit;
    color: var(--dlg-txt);
    cursor: pointer;
    white-space: nowrap;
    border-radius: 6px;
    position: relative;
}

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

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

/* El punto de estado. REGLA VISUAL QUE SE GENERALIZA: lo que todavía no existe
   se dibuja PUNTEADO; lo que ya existe en la base, sólido. Se aprende sin leer.
   Y nunca es solo el color: cada estado trae además su palabra. */
.wip .pt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.wip.sin-guardar .pt {
    background: transparent;
    border: 1.5px dashed var(--dlg-dim);
}

.wip.borrador .pt {
    background: var(--dlg-ambar);
    border: 1.5px solid var(--dlg-ambar);
}

.wip.contabilizado .pt {
    background: var(--dlg-verde);
    border: 1.5px solid var(--dlg-verde);
}

.wip .est {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
}

.wip.sin-guardar .est { color: var(--dlg-txt); }
.wip.borrador .est { color: var(--dlg-ambar); }
.wip.contabilizado .est { color: var(--dlg-verde); }

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

.wip .resp {
    font-size: 11px;
    font-weight: 400;
    color: var(--dlg-dim);
    font-variant-numeric: tabular-nums;
}

/* Se atenúa sola a los 3 segundos. En CSS y no en el servidor: es puro adorno y
   no vale un viaje por el circuito ni un temporizador más. */
.wip .resp.recien {
    animation: wip-calma .6s ease 3s forwards;
}

@keyframes wip-calma {
    to { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .wip .resp.recien { animation: none; opacity: .55; }
}

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

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

/* La región viva va SEPARADA de la pastilla y a propósito: un lector de
   pantalla diciendo «respaldado» cada quince segundos es una tortura. Solo
   recibe texto en tres momentos: falló el respaldo, se recuperó el respaldo, y
   se guardó de verdad. */
.wip-anuncio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ═══ 9b · LA ESCALERA ═══
   Los tres peldaños del documento, a demanda. Permanente es la PALABRA de la
   pastilla; la explicación se abre al pulsarla. Así no se abarrota un pie que
   ya carga CUADRADO, los contadores y dos botones. */
.wip-escalera {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 1396;
    width: 340px;
    padding: 12px 14px;
    background: var(--dlg-surf);
    border: 1px solid var(--dlg-lines);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    cursor: default;
    text-align: left;
    white-space: normal;
}

.wip-escalera .peldano {
    display: grid;
    grid-template-columns: 14px 108px 1fr;
    gap: 8px;
    align-items: start;
    padding: 6px 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--dlg-dim);
    opacity: .45;
}

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

.wip-escalera .peldano .nom {
    font-weight: 700;
    font-size: 12px;
}

.wip-escalera .peldano .marca {
    font-size: 10px;
    line-height: 1.7;
}

.wip-escalera .nota {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--dlg-lines2);
    font-size: 11px;
    line-height: 1.5;
    color: var(--dlg-dim);
}

/* ═══ 9c · LA TIRA DE «TRABAJO SIN TERMINAR» ═══
   Va sobre la tabla de comprobantes cuando quedó algo a medio hacer. PUNTEADA,
   por la misma regla de arriba: lo que todavía no existe en la base se dibuja
   punteado. No es una advertencia — es una buena noticia—, así que no va ámbar
   ni roja. */
.wip-tira {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font-size: 13px;
    line-height: 1.55;
}

.wip-tira .ico {
    font-size: 17px;
    line-height: 1.3;
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

.wip-tira .col { flex: 1; min-width: 0; }

.wip-tira .tit {
    font-weight: 700;
    display: block;
}

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

.wip-tira .acciones {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ═══ 9d · EL CINTILLO DE VUELTA ═══
   Después de restaurar en silencio. Tiene la forma de .je-aviso pero SIN ámbar:
   es una buena noticia, no una advertencia. */
.wip-vuelta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 12.5px;
    color: var(--dlg-dim);
    background: color-mix(in srgb, var(--dlg-primary) 6%, var(--dlg-surf));
    border-bottom: 1px solid var(--dlg-lines);
}

.wip-vuelta b { color: var(--dlg-txt); }

.wip-vuelta button {
    margin-left: auto;
    font: inherit;
    font-size: 11.5px;
    background: none;
    border: 0;
    color: var(--dlg-dim);
    cursor: pointer;
    text-decoration: underline;
}

/* ── Línea de tiempo de una vigencia legal ─────────────────────
   La usa el mantenedor de Parámetros Legales para mostrar la historia de un valor: qué regía,
   desde cuándo, quién lo cargó y de dónde salió. El borde izquierdo de color es lo que deja leer
   la columna de un vistazo sin tener que buscar la pastilla de estado en cada fila. */
.vig-linea {
    position: relative;
    padding: 10px 0 12px 16px;
    border-left: 3px solid var(--dlg-lines);
    margin-left: 4px;
}

.vig-linea + .vig-linea { margin-top: 2px; }

.vig-linea .vig-valor {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--dlg-txt);
}

.vig-linea .vig-rango {
    font-size: 12.5px;
    color: var(--dlg-dim);
    margin-left: 8px;
}

.vig-linea .vig-meta {
    font-size: 12px;
    color: var(--dlg-dim);
    margin-top: 3px;
    line-height: 1.55;
}

.vig-linea .vig-cita {
    font-size: 12px;
    font-style: italic;
    color: var(--dlg-dim);
    margin-top: 4px;
    padding-left: 10px;
    border-left: 2px solid var(--dlg-lines);
}

/* La que rige hoy, en color primario y con el texto en firme. */
.vig-linea.viga { border-left-color: var(--dlg-primary); }

/* Ya no rige: se atenúa, pero NO se esconde — es la defensa ante la Dirección del Trabajo. */
.vig-linea.reemplazada { opacity: .72; }

/* Confirmada y todavía no empieza. */
.vig-linea.futura { border-left-color: color-mix(in srgb, var(--dlg-primary) 45%, transparent); }

/* Esperando que una persona la confirme. */
.vig-linea.propuesta { border-left-color: #E0A100; }

/* Rechazada o vencida: nunca rigió. */
.vig-linea.descartada { opacity: .55; border-left-style: dashed; }

/* ── Pastilla de estado de una vigencia ────────────────────────
   Cuatro variantes, con el mismo color que el borde de .vig-linea para que se lean juntas. */
.vig-estado {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.vig-estado.viga {
    color: var(--dlg-primary);
    background: color-mix(in srgb, var(--dlg-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--dlg-primary) 30%, transparent);
}

.vig-estado.futura {
    color: var(--dlg-dim);
    background: color-mix(in srgb, var(--dlg-primary) 7%, transparent);
    border-color: var(--dlg-lines);
}

.vig-estado.propuesta {
    color: #8A6100;
    background: color-mix(in srgb, #E0A100 16%, transparent);
    border-color: color-mix(in srgb, #E0A100 40%, transparent);
}

.vig-estado.reemplazada,
.vig-estado.descartada {
    color: var(--dlg-dim);
    background: color-mix(in srgb, var(--dlg-dim) 10%, transparent);
    border-color: var(--dlg-lines);
}