/* ════════════════════════════════════════════════════════════════════
   DISEÑADOR DE DOCUMENTOS IMPRESOS (18-10-2026)
   La lista /billing/disenos y el diseñador /billing/disenos/{tipo}.

   Cuelga de .fac-pagina (facturacion.css), que ya declara la paleta --dlg-* con
   las variables de MudBlazor: el tema claro y el oscuro funcionan solos. Lo de
   acá va colgado de .dd-* para no tocar ninguna otra pantalla, y facturacion.css
   no se edita (la está cambiando otra sesión).

   LA HOJA ES SIEMPRE PAPEL BLANCO, en cualquier tema: lo que se diseña es lo que
   se imprime. Los tiradores, las guías y el recuadro de selección viven dentro
   de la hoja escalada y se contraescalan con --s (la escala que pone el JS).
   ════════════════════════════════════════════════════════════════════ */

.dd-pagina {
    --dd-sel: #2f80ed;
    --dd-guia: #e5398a;
    --dd-mesa: color-mix(in srgb, var(--dlg-surf2) 72%, var(--dlg-lines));
    --dd-radio: 12px;
}

/* ── Cabecera ── */
.dd-pagina .titulo h1 { font-size: 26px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dd-pagina .titulo h1 a { color: inherit; text-decoration: none; }
.dd-pagina .titulo h1 a:hover { color: var(--dlg-primary); }
.dd-pagina .titulo h1 .sep { color: var(--dlg-dim2); font-weight: 400; }
.dd-pagina .titulo .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
/* La flecha para volver a la lista de diseños, al lado del título (02-11-2026); los chips quedan bajo el título. */
.dd-pagina .dd-titulo-fila { display: flex; align-items: center; gap: 12px; }
.dd-pagina .dd-titulo-fila + .chips { margin-left: 48px; }
.dd-pagina .dd-atras { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--dlg-lines); background: var(--dlg-surf); color: var(--dlg-txt); text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.dd-pagina .dd-atras:hover, .dd-pagina .dd-atras:focus-visible { border-color: var(--dlg-primary); color: var(--dlg-primary); background: var(--fac-sel); outline: none; }
.dd-pagina .titulo .chips .dim { font-size: 12px; }
.dd-pagina .btn:disabled { opacity: .42; cursor: not-allowed; }
.dd-pagina .btn.rojo { color: var(--dlg-rojo); }
.dd-pagina .btn.rojo:hover { border-color: var(--dlg-rojo); color: var(--dlg-rojo); }

/* ── La rejilla del diseñador: caja | editor | propiedades y revisión ── */
.dd {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr) 336px;
    gap: 12px;
    height: calc(100vh - 205px);
    min-height: 620px;
}
.dd-caja, .dd-editor, .dd-props-zona, .dd-panel {
    background: var(--dlg-surf);
    border: 1px solid var(--dlg-lines);
    border-radius: var(--dd-radio);
    min-width: 0;
}
.dd-caja { display: flex; flex-direction: column; overflow: hidden; }
.dd-editor { display: flex; flex-direction: column; overflow: hidden; position: relative; }
/* Las propiedades se desplazan solas y la revisión con «Publicar» queda siempre a la vista, como en la foto. */
.dd-lado { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dd-props-zona { flex: 1 1 auto; min-height: 220px; overflow-y: auto; }
.dd-lado > .dd-panel { flex-shrink: 0; }

@media (max-width: 1400px) { .dd { grid-template-columns: 214px minmax(0, 1fr) 306px; } }
@media (max-width: 1100px) {
    .dd { grid-template-columns: minmax(0, 1fr); height: auto; }
    .dd-caja { max-height: 300px; }
    .dd-editor { height: 78vh; min-height: 520px; }
    .dd-lado { overflow: visible; }
    .dd-props-zona { overflow: visible; }
}

.dd-ico { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* ── Caja de herramientas ── */
.dd-caja-cab { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--dlg-lines2); }
.dd-caja-tit { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-primary); }
.dd-buscar { display: flex; align-items: center; gap: 6px; border: 1px solid var(--dlg-lines); border-radius: 8px; padding: 5px 8px; background: var(--dlg-surf); color: var(--dlg-dim); }
.dd-buscar:focus-within { border-color: var(--dlg-primary); }
.dd-buscar .dd-ico { width: 16px; height: 16px; }
.dd-buscar input { border: 0; outline: none; background: none; font: inherit; font-size: 12.5px; color: var(--dlg-txt); width: 100%; min-width: 0; }
.dd-caja-cuerpo { flex: 1; overflow-y: auto; padding: 6px 10px 10px; }
.dd-caja-pie { padding: 8px 12px; font-size: 11px; color: var(--dlg-dim); border-top: 1px solid var(--dlg-lines2); line-height: 1.35; }
.dd-sec { margin-top: 4px; }
.dd-sec-cab {
    display: flex; align-items: center; gap: 7px; width: 100%; background: none; border: 0; cursor: pointer;
    padding: 7px 2px; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dlg-dim);
}
.dd-sec-cab:hover { color: var(--dlg-primary); }
.dd-sec-cab .dd-ico { width: 16px; height: 16px; }
.dd-sec-cab .n { font-family: var(--dlg-mono); font-size: 10.5px; font-weight: 600; opacity: .7; }
.dd-sec-cab .chev { margin-left: auto; transition: transform .15s; }
.dd-sec.plegada .chev { transform: rotate(-90deg); }
.dd-sec.plegada .dd-herrs { display: none; }
.dd-herrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; padding-bottom: 6px; }
.dd-herr {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 58px;
    padding: 8px 3px 6px; border: 1px solid var(--dlg-lines); border-radius: 8px; background: var(--dlg-surf);
    color: var(--dlg-txt); font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; cursor: grab;
    transition: border-color .12s, background .12s, transform .12s;
}
.dd-herr .dd-ico { width: 20px; height: 20px; color: var(--dlg-primary); }
.dd-herr span { overflow-wrap: anywhere; }
.dd-herr:hover:not(:disabled) { border-color: var(--dlg-primary); background: var(--fac-sel); }
.dd-herr:active:not(:disabled) { transform: scale(.97); cursor: grabbing; }
.dd-herr:focus-visible { outline: 2px solid var(--dlg-primary); outline-offset: 1px; }
.dd-herr:disabled { opacity: .5; cursor: not-allowed; }
.dd-herr.ya { opacity: .55; border-style: dashed; }

/* ── Barra del editor ── */
.dd-barra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 10px; border-bottom: 1px solid var(--dlg-lines); background: var(--dlg-surf); }
.dd-grupo { display: inline-flex; align-items: center; gap: 2px; padding-right: 6px; border-right: 1px solid var(--dlg-lines2); }
.dd-grupo:last-of-type { border-right: 0; }
.dd-espacio { flex: 1; }
.dd-b {
    display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 7px;
    background: none; color: var(--dlg-txt); cursor: pointer;
}
.dd-b:hover:not(:disabled) { background: var(--fac-sel); color: var(--dlg-primary); }
.dd-b.on { background: var(--fac-sel); color: var(--dlg-primary); border-color: color-mix(in srgb, var(--dlg-primary) 30%, transparent); }
.dd-b.rojo:hover:not(:disabled) { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); }
.dd-b:disabled { opacity: .32; cursor: not-allowed; }
.dd-b:focus-visible, .dd-zoom:focus-visible, .dd-vista:focus-visible { outline: 2px solid var(--dlg-primary); outline-offset: 1px; }
.dd-seg { display: inline-flex; border: 1px solid var(--dlg-lines); border-radius: 8px; padding: 1px; gap: 1px; }
.dd-seg .dd-b { width: 28px; height: 26px; border-radius: 6px; }
.dd-seg.chico .dd-b { width: 24px; height: 24px; }
.dd-seg.chico .dd-ico { width: 15px; height: 15px; }
.dd-papel { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--dlg-lines); border-radius: 8px; padding: 0 4px 0 7px; height: 30px; color: var(--dlg-dim); margin-right: 4px; }
.dd-papel .dd-ico { width: 16px; height: 16px; }
.dd-papel select, .dd-paso { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--dlg-txt); outline: none; cursor: pointer; height: 28px; }
.dd-paso { border: 1px solid var(--dlg-lines); border-radius: 7px; padding: 0 4px; margin-left: 2px; font-weight: 500; }
.dd-papel select option, .dd-paso option { color: #111; }
.dd-zoom { min-width: 56px; height: 30px; border: 1px solid var(--dlg-lines); border-radius: 7px; background: var(--dlg-surf); color: var(--dlg-txt); font-family: var(--dlg-mono); font-size: 11.5px; cursor: pointer; }
.dd-zoom:hover { border-color: var(--dlg-primary); color: var(--dlg-primary); }
.dd-vista {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--dlg-primary); background: var(--dlg-primary); color: var(--mud-palette-primary-text); font: inherit; font-size: 12.5px; font-weight: 700;
}
.dd-vista:hover { filter: brightness(1.08); }

/* ── Aviso de la copia local ── */
.dd-local { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: var(--dlg-ambar-bg); color: var(--dlg-ambar); border-bottom: 1px solid var(--dlg-ambar-bd); font-size: 12.5px; }
.dd-local[hidden] { display: none; }
.dd-local > div { flex: 1 1 260px; }
.dd-local .ojo { font-weight: 700; }

/* ── La mesa y la hoja ── */
.dd-mesa-scroll {
    flex: 1; min-height: 0; overflow: auto; outline: none; position: relative;
    background-color: var(--dd-mesa);
    background-image: radial-gradient(color-mix(in srgb, var(--dlg-txt) 9%, transparent) 1px, transparent 1px);
    background-size: 16px 16px;
}
.dd-mesa-scroll:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dlg-primary) 40%, transparent); }
.dd-mesa-scroll.soltando { box-shadow: inset 0 0 0 2px var(--dd-sel); }
.dd-mesa { display: grid; place-items: start center; width: max-content; min-width: 100%; min-height: 100%; box-sizing: border-box; padding: 34px 34px 48px 42px; }
.dd-marco { position: relative; flex: none; }
.dd-hoja {
    position: absolute; top: 0; left: 0; transform-origin: 0 0; background: #fff; color: #000; color-scheme: light;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 10px 30px rgba(15, 30, 45, .16);
    font-family: 'Lato', 'Inter', 'Helvetica Neue', Arial, sans-serif; line-height: 1.2;
}
.dd-hoja.con-grilla {
    background-image:
        linear-gradient(rgba(33, 72, 103, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 72, 103, .07) 1px, transparent 1px);
    background-size: var(--paso, 4px) var(--paso, 4px);
}
.dd-hoja.rollo { box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 10px 30px rgba(15, 30, 45, .16); }
.dd-rollo-corte {
    position: absolute; left: 0; right: 0; bottom: 0; height: 16px; display: grid; place-items: center; pointer-events: none;
    font-size: 7px; color: #8a96a3; letter-spacing: .04em;
    background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(33, 72, 103, .07) 4px 8px);
    border-top: 1px dashed #b8c2cc;
}

/* Reglas en puntos, pegadas al borde de la hoja */
.dd-regla { position: absolute; pointer-events: none; color: var(--dlg-dim); }
.dd-regla.h { left: 0; top: -21px; height: 18px; }
.dd-regla.v { top: 0; left: -21px; width: 18px; }
.dd-regla svg { display: block; overflow: visible; }
.dd-regla line { stroke: currentColor; stroke-width: 1; opacity: .55; }
.dd-regla text { fill: currentColor; font-family: var(--dlg-mono); font-size: 8.5px; opacity: .85; }
.dd-regla .banda { fill: color-mix(in srgb, var(--dd-sel) 22%, transparent); }

/* Elementos */
.dd-el { position: absolute; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
.dd-hoja:not(.solo-lectura) .dd-el { cursor: move; }
.dd-el .dd-c { position: absolute; inset: 0; overflow: hidden; }
.dd-hoja:not(.solo-lectura) .dd-el:hover { outline: calc(1px / var(--s, 1)) dashed rgba(47, 128, 237, .65); }
.dd-el.sel, .dd-hoja .dd-el.sel:hover { outline: calc(1.6px / var(--s, 1)) solid var(--dd-sel); z-index: 2; }
.dd-el.prob-aviso:not(.sel) { outline: calc(1.4px / var(--s, 1)) dashed #e6a700; }
.dd-el.prob-error:not(.sel) { outline: calc(1.6px / var(--s, 1)) dashed #d32f2f; }
.dd-el.t-tabla:not(.sel):not(.prob-error):not(.prob-aviso) { outline: calc(1px / var(--s, 1)) dashed rgba(33, 72, 103, .38); }
/* Una línea de 1 pt se agarra mal: se le da un área de clic más ancha que no se ve. */
.dd-el.t-linea::before { content: ''; position: absolute; inset: calc(-5px / var(--s, 1)); }
.dd-prob {
    position: absolute; top: calc(-7px / var(--s, 1)); right: calc(-7px / var(--s, 1)); width: calc(14px / var(--s, 1)); height: calc(14px / var(--s, 1));
    border-radius: 50%; background: #e6a700; color: #fff; font: 700 calc(10px / var(--s, 1))/calc(14px / var(--s, 1)) Arial, sans-serif; text-align: center; z-index: 3; pointer-events: none;
}
.dd-el.prob-error .dd-prob { background: #d32f2f; }
.dd-asa {
    position: absolute; z-index: 4; box-sizing: border-box; width: calc(9px / var(--s, 1)); height: calc(9px / var(--s, 1));
    background: #fff; border: calc(1.5px / var(--s, 1)) solid var(--dd-sel); border-radius: calc(2px / var(--s, 1));
}
.dd-asa.n, .dd-asa.s { left: 50%; margin-left: calc(-4.5px / var(--s, 1)); cursor: ns-resize; }
.dd-asa.e, .dd-asa.w { top: 50%; margin-top: calc(-4.5px / var(--s, 1)); cursor: ew-resize; }
.dd-asa.n, .dd-asa.ne, .dd-asa.nw { top: calc(-4.5px / var(--s, 1)); }
.dd-asa.s, .dd-asa.se, .dd-asa.sw { bottom: calc(-4.5px / var(--s, 1)); }
.dd-asa.e, .dd-asa.ne, .dd-asa.se { right: calc(-4.5px / var(--s, 1)); }
.dd-asa.w, .dd-asa.nw, .dd-asa.sw { left: calc(-4.5px / var(--s, 1)); }
.dd-asa.ne, .dd-asa.sw { cursor: nesw-resize; }
.dd-asa.nw, .dd-asa.se { cursor: nwse-resize; }
.dd-guia { position: absolute; background: var(--dd-guia); pointer-events: none; z-index: 5; }
.dd-guia.x { top: 0; height: 100%; width: calc(1px / var(--s, 1)); }
.dd-guia.y { left: 0; width: 100%; height: calc(1px / var(--s, 1)); }
.dd-recuadro-sel { position: absolute; z-index: 6; pointer-events: none; border: calc(1px / var(--s, 1)) solid var(--dd-sel); background: rgba(47, 128, 237, .08); }

/* Lo que se pinta dentro de cada elemento (en puntos de la hoja) */
.dd-tx { width: 100%; height: 100%; box-sizing: border-box; white-space: pre-wrap; overflow: hidden; overflow-wrap: anywhere; line-height: 1.2;
    display: flex; flex-direction: column; justify-content: flex-start; }
/* Como el PDF: la caja de hasta dos líneas y media centra el texto en alto; el rótulo de un dato va en seminegrita. */
.dd-tx.medio { justify-content: center; }
.dd-tx > div { max-height: 100%; }
.dd-tx .et { font-weight: 600; }
.dd-tx.negrita .et { font-weight: inherit; }
.dd-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.dd-vacio {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border: 1px dashed #b9c3cd; color: #7b8794; font-size: 9px; text-align: center; background: rgba(240, 244, 248, .6); overflow: hidden;
}
.dd-vacio .dd-ico { width: 14px; height: 14px; opacity: .7; }
.dd-vacio span { font-weight: 700; }
.dd-vacio small { font-size: 7px; }
.dd-linea, .dd-relleno { position: absolute; }
.dd-relleno { inset: 0; }
.dd-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dd-tabla th { font-weight: 700; padding: 2.5px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-tabla td { padding: 2.5px 4px; vertical-align: top; overflow: hidden; overflow-wrap: anywhere; }
.dd-tabla .det { font-size: .86em; color: #555; font-weight: 400; margin-top: 1px; }
.dd-marca-tabla {
    position: absolute; right: 3px; bottom: 3px; font: 600 7px Arial, sans-serif; color: #2f6fca; background: rgba(255, 255, 255, .9);
    border: .6px dashed #2f80ed; border-radius: 3px; padding: 1px 4px; pointer-events: none; white-space: nowrap;
}
.dd-totales { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.dd-totales .fila { display: flex; justify-content: space-between; gap: 6px; padding: 1.6px 5px; }
.dd-totales .fila.total { font-weight: 700; padding: 3px 5px; margin-top: 1px; }
.dd-timbre { height: 100%; display: flex; flex-direction: column; gap: 2px; position: relative; }
.dd-timbre .pdf417 {
    flex: 1; min-height: 20px;
    background:
        repeating-linear-gradient(90deg, #000 0 1.1px, transparent 1.1px 2.3px, #000 2.3px 2.9px, transparent 2.9px 4.4px, #000 4.4px 6px, transparent 6px 6.8px),
        repeating-linear-gradient(0deg, #fff 0 .5px, transparent .5px 3.2px);
    background-blend-mode: normal;
}
.dd-timbre .ley { line-height: 1.25; }
.dd-aviso-el { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .78); color: #b26a00; font: 700 8px Arial, sans-serif; }
.dd-recuadro { height: 100%; display: flex; flex-direction: column; }
.dd-recuadro .caja { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; text-align: center; }
.dd-recuadro .ofi { font-size: .78em; font-weight: 700; text-align: center; padding-top: 2px; }
.dd-refs th { text-align: left; }
.dd-acuse { height: 100%; box-sizing: border-box; padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.dd-acuse .t { font-weight: 700; text-align: center; }
.dd-acuse .g { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 5px; align-items: end; }
.dd-acuse .g i { border-bottom: .6px solid currentColor; height: 1em; }
.dd-acuse .g i.ancha { grid-column: span 3; }
.dd-acuse .ley { font-size: .82em; line-height: 1.25; color: #333; }
.dd-acuse .ced { font-weight: 800; letter-spacing: .25em; text-align: right; font-size: 1.35em; margin-top: auto; }

/* ── Barra de estado, atajos y aviso pasajero ── */
.dd-estado {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 5px 12px; border-top: 1px solid var(--dlg-lines);
    font-size: 11.5px; color: var(--dlg-dim); font-variant-numeric: tabular-nums; background: var(--dlg-surf);
}
.dd-estado-cursor { font-family: var(--dlg-mono); font-size: 11px; }
.dd-estado .dd-espacio { flex: 1; }
.dd-zoomes { display: inline-flex; align-items: center; gap: 2px; }
.dd-zoomes .dd-b { width: 26px; height: 26px; }
.dd-zoomes .dd-ico { width: 17px; height: 17px; }
.dd-zoomes .dd-zoom { height: 26px; min-width: 52px; }
.dd-atajos-b { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; font: inherit; font-size: 11.5px; color: var(--dlg-dim); cursor: pointer; }
.dd-atajos-b:hover { color: var(--dlg-primary); border-color: var(--dlg-lines); }
.dd-atajos-b .dd-ico { width: 16px; height: 16px; }
.dd-atajos {
    position: absolute; right: 12px; bottom: 40px; z-index: 20; width: min(440px, calc(100% - 24px)); max-height: 70%; overflow: auto;
    background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: 10px; box-shadow: 0 14px 40px rgba(15, 30, 45, .25); padding: 12px 14px;
}
.dd-atajos[hidden] { display: none; }
.dd-atajos-tit { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-primary); margin-bottom: 8px; }
.dd-atajos dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 12px; }
.dd-atajos dt { white-space: nowrap; color: var(--dlg-dim); }
.dd-atajos dd { margin: 0; }
.dd-atajos kbd, .dd-panel 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-txt);
}
.dd-toast {
    position: absolute; left: 50%; bottom: 46px; transform: translate(-50%, 8px); z-index: 25; max-width: min(560px, calc(100% - 32px));
    background: #1f2a37; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 12.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.dd-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .dd-toast, .dd-herr, .dd-sec-cab .chev { transition: none; } }

/* ── Propiedades ── */
.dd-props { font-size: 12.5px; color: var(--dlg-txt); }
.dd-props-cab { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; border-bottom: 1px solid var(--dlg-lines); }
.dd-props-cab > .dd-ico { width: 22px; height: 22px; color: var(--dlg-primary); }
.dd-props-cab b { display: block; font-size: 13.5px; }
.dd-props-cab small { display: block; color: var(--dlg-dim); font-size: 11.5px; }
.dd-props-cab > div:not(.acc) { min-width: 0; flex: 1; }
.dd-props-cab .acc { display: flex; gap: 1px; margin-left: auto; }
.dd-props-cab .acc .dd-b { width: 28px; height: 28px; }
.dd-props-prob { margin: 10px 14px 0; padding: 8px 10px; border-radius: 8px; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; font-weight: 600; }
.dd-props-prob.error { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); }
.dd-props-prob.aviso { background: var(--dlg-ambar-bg); color: var(--dlg-ambar); }
.dd-psec { padding: 10px 14px 12px; border-bottom: 1px solid var(--dlg-lines2); }
.dd-psec:last-child { border-bottom: 0; }
.dd-psec h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-dim); }
.dd-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dd-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dd-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; }
.dd-f + .dd-f, .dd-g2 + .dd-f, .dd-f + .dd-check, .dd-g2 + .dd-fila-b, .dd-f + .dd-fila-b { margin-top: 8px; }
.dd-g2 > .dd-f, .dd-g4 > .dd-f { margin-top: 0; }
.dd-f > span { font-size: 11px; font-weight: 600; color: var(--dlg-dim); }
.dd-props input[type="text"], .dd-props input[type="number"], .dd-props select, .dd-props textarea {
    width: 100%; box-sizing: border-box; border: 1px solid var(--dlg-lines); border-radius: 6px; padding: 5px 7px;
    font: inherit; font-size: 12.5px; background: var(--dlg-surf); color: var(--dlg-txt); min-width: 0;
}
.dd-props input[type="number"] { font-family: var(--dlg-mono); font-size: 12px; padding: 5px 4px 5px 6px; }
.dd-props textarea { resize: vertical; min-height: 54px; line-height: 1.35; }
.dd-props input:focus, .dd-props select:focus, .dd-props textarea:focus { outline: none; border-color: var(--dlg-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dlg-primary) 18%, transparent); }
.dd-props input:disabled, .dd-props select:disabled, .dd-props textarea:disabled { opacity: .6; }
.dd-props select option { color: #111; }
.dd-color .fila { display: flex; align-items: center; gap: 6px; }
.dd-color input[type="color"], .dd-color-mini { width: 34px; height: 26px; padding: 1px; border: 1px solid var(--dlg-lines); border-radius: 6px; background: var(--dlg-surf); cursor: pointer; flex-shrink: 0; }
.dd-color input[type="color"]:disabled { opacity: .35; cursor: not-allowed; }
.dd-color input[type="checkbox"], .dd-check input { accent-color: var(--dlg-primary); margin: 0; }
.dd-color code { font-family: var(--dlg-mono); font-size: 10.5px; color: var(--dlg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.dd-fila-b { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.dd-fila-b .sep { width: 1px; height: 20px; background: var(--dlg-lines); margin: 0 5px; }
.dd-fila-b .btn-sm { margin-right: 4px; }
.dd-ayuda { margin: 7px 0 0; font-size: 11.5px; color: var(--dlg-dim); line-height: 1.4; }
.dd-props .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.dd-props .btn-sm .dd-ico { width: 15px; height: 15px; }
.dd-subir { position: relative; overflow: hidden; cursor: pointer; }
.dd-subir input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dd-subir.off { opacity: .45; pointer-events: none; }
.dd-img-prev { border: 1px solid var(--dlg-lines); border-radius: 8px; padding: 6px; margin-bottom: 8px; background: repeating-conic-gradient(#eef1f4 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.dd-img-prev img { display: block; max-width: 100%; max-height: 90px; margin: 0 auto; object-fit: contain; }

/* Columnas de la tabla */
.dd-cols { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.dd-col { border: 1px solid var(--dlg-lines); border-radius: 8px; padding: 6px; background: var(--dlg-surf2); }
.dd-col .fila1 { display: flex; align-items: center; gap: 3px; }
.dd-col .fila1 select { flex: 1; }
.dd-col .fila1 .dd-b { width: 26px; height: 26px; }
.dd-col .fila1 .dd-ico { width: 16px; height: 16px; }
.dd-col .pct { font-family: var(--dlg-mono); font-size: 10.5px; color: var(--dlg-dim); min-width: 32px; text-align: right; padding-right: 2px; }
.dd-col .fila2 { display: grid; grid-template-columns: minmax(0, 1fr) 54px auto; gap: 4px; margin-top: 4px; align-items: center; }
.dd-agregar-col select { border-style: dashed !important; }

/* Lista de elementos (sin selección) */
.dd-capas { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; border: 1px solid var(--dlg-lines); border-radius: 8px; }
.dd-capa { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px; border: 0; border-bottom: 1px solid var(--dlg-lines2); background: none; color: var(--dlg-txt); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.dd-capa:last-child { border-bottom: 0; }
.dd-capa:hover { background: var(--fac-sel); }
.dd-capa .dd-ico { width: 16px; height: 16px; color: var(--dlg-dim); }
.dd-capa .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-capa .n i { color: var(--dlg-dim); }
.dd-capa .xy { font-family: var(--dlg-mono); font-size: 10.5px; color: var(--dlg-dim2); }
.dd-capa.prob-error .n, .dd-capa.prob-error .dd-ico { color: var(--dlg-rojo); }
.dd-capa.prob-aviso .n, .dd-capa.prob-aviso .dd-ico { color: var(--dlg-ambar); }

/* ── Paneles de la derecha (Blazor): revisión, publicar, versiones ── */
.dd-panel-cab { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--dlg-lines); }
.dd-panel-cab h3 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-primary); flex: 1; }
.dd-panel-cab .n { font-family: var(--dlg-mono); font-size: 11px; color: var(--dlg-dim); }
.dd-panel-cuerpo { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.dd-revision { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.dd-revision.ok { background: var(--dlg-verde-bg); color: var(--dlg-verde); }
.dd-revision.espera { background: var(--fac-azul-bg); color: var(--fac-azul); }
.dd-revision.mal { background: var(--dlg-rojo-bg); color: var(--dlg-rojo); }
.dd-revision.amb { background: var(--dlg-ambar-bg); color: var(--dlg-ambar); }
.dd-revision .mud-icon-root { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
button.dd-revision { border: 0; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
button.dd-revision:hover { filter: brightness(.97); box-shadow: inset 0 0 0 1px currentColor; }
button.dd-revision:disabled { cursor: default; box-shadow: none; filter: none; }
.dd-revision .ir { margin-left: auto; font-size: 11px; font-weight: 700; opacity: .8; white-space: nowrap; }
.dd-motivo { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.dd-motivo span { font-size: 11px; font-weight: 600; color: var(--dlg-dim); }
.dd-motivo input { border: 1px solid var(--dlg-lines); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12.5px; background: var(--dlg-surf); color: var(--dlg-txt); }
.dd-motivo input:focus { outline: none; border-color: var(--dlg-primary); }
.dd-publicar {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 10px 14px; border: 0; border-radius: 8px;
    background: var(--mud-palette-success); color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; letter-spacing: .01em;
}
.dd-publicar:hover:not(:disabled) { filter: brightness(1.07); }
.dd-publicar:disabled { opacity: .42; cursor: not-allowed; }
.dd-publicar .mud-icon-root { font-size: 19px; }
.dd-nota { font-size: 11.5px; color: var(--dlg-dim); line-height: 1.4; margin: 2px 0 0; }
.dd-versiones { list-style: none; margin: 0; padding: 0; max-height: 190px; overflow-y: auto; }
.dd-revisiones { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.dd-versiones li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--dlg-lines2); }
.dd-versiones li:last-child { border-bottom: 0; }
.dd-versiones .v { font-family: var(--dlg-mono); font-weight: 800; font-size: 12px; min-width: 30px; color: var(--dlg-primary); }
.dd-versiones .datos { flex: 1; min-width: 0; font-size: 12px; }
.dd-versiones .datos b { font-weight: 600; }
.dd-versiones .datos .meta { color: var(--dlg-dim); font-size: 11.5px; overflow-wrap: anywhere; }
.dd-versiones li.vigente { background: color-mix(in srgb, var(--dlg-verde-bg) 60%, transparent); }
.dd-versiones .acc { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.dd-versiones .btn-sm.borrar { color: var(--dlg-rojo); }
.dd-vacio-panel { padding: 14px; color: var(--dlg-dim); font-size: 12px; text-align: center; }
.dd-error { padding: 22px; border: 1px solid color-mix(in srgb, var(--dlg-rojo) 35%, transparent); background: var(--dlg-rojo-bg); color: var(--dlg-rojo); border-radius: var(--dd-radio); font-weight: 600; }
.dd-error p { margin: 6px 0 12px; font-weight: 400; color: var(--dlg-txt); }

/* ── Vista previa en PDF (dentro de la página) ── */
.dd-vista-fondo { position: fixed; inset: 0; z-index: 1350; background: rgba(15, 23, 42, .55); display: flex; padding: 22px; }
.dd-vista-caja {
    margin: auto; width: min(1180px, 100%); height: calc(100vh - 44px); display: flex; flex-direction: column; overflow: hidden;
    background: var(--dlg-surf); color: var(--dlg-txt); border-radius: var(--dd-radio); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); outline: none;
}
.dd-vista-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--dlg-lines); font-size: 12.5px; }
.dd-vista-cab h3 { margin: 0; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.dd-vista-cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dd-vista-cab select { border: 1px solid var(--dlg-lines); background: var(--dlg-surf); color: var(--dlg-txt); border-radius: 8px; padding: 6px 8px; font: inherit; max-width: 360px; }
.dd-vista-cab label.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.dd-vista-cab label.check input { accent-color: var(--dlg-primary); }
.dd-vista-cuerpo { flex: 1; min-height: 0; background: var(--dd-mesa); position: relative; }
.dd-vista-cuerpo iframe { width: 100%; height: 100%; border: 0; display: block; }
.dd-vista-cuerpo .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--dlg-dim); }
.dd-vista-cuerpo .centro.mal { color: var(--dlg-rojo); font-weight: 600; }
.dd-vista-pie { padding: 7px 14px; border-top: 1px solid var(--dlg-lines); font-size: 11.5px; color: var(--dlg-dim); }

/* ── La lista de documentos ── */
.dd-grupo-tit { margin: 18px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-dim); }
.dd-grupo-tit:first-of-type { margin-top: 0; }
.dd-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.dd-tarjeta {
    background: var(--dlg-surf); border: 1px solid var(--dlg-lines); border-radius: var(--dd-radio); padding: 16px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color .12s, box-shadow .12s; min-width: 0;
}
.dd-tarjeta:hover { border-color: color-mix(in srgb, var(--dlg-primary) 45%, var(--dlg-lines)); box-shadow: 0 6px 20px rgba(15, 30, 45, .08); }
.dd-tarjeta .cab { display: flex; gap: 14px; align-items: flex-start; }
.dd-tarjeta h3 { margin: 0; font-size: 15px; font-weight: 800; }
.dd-tarjeta .sub { color: var(--dlg-dim); font-size: 12px; margin-top: 2px; }
.dd-tarjeta .marcas-estado { display: flex; gap: 6px; flex-wrap: wrap; }
.dd-tarjeta .detalle { font-size: 12px; color: var(--dlg-dim); line-height: 1.4; min-height: 17px; }
.dd-tarjeta .pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--dlg-lines2); }
.dd-tarjeta .pie .papel { font-size: 12px; color: var(--dlg-dim); display: inline-flex; align-items: center; gap: 6px; }
.dd-miniatura { width: 44px; height: 56px; flex-shrink: 0; background: #fff; border: 1px solid #cfd6de; border-radius: 3px; box-shadow: 0 2px 6px rgba(15, 30, 45, .12); position: relative; overflow: hidden; }
.dd-miniatura::before { content: ''; position: absolute; left: 5px; top: 6px; width: 14px; height: 6px; background: #214867; border-radius: 1px; }
.dd-miniatura::after {
    content: ''; position: absolute; left: 5px; right: 5px; top: 18px; bottom: 8px;
    background: repeating-linear-gradient(#dfe5eb 0 2px, transparent 2px 5px);
}
.dd-miniatura.tributaria > i { position: absolute; right: 4px; top: 4px; width: 14px; height: 9px; border: 1.5px solid #c62828; }
.dd-miniatura.horizontal { width: 56px; height: 44px; margin-top: 6px; }
.dd-miniatura.rollo { width: 26px; height: 60px; border-radius: 2px 2px 0 0; }
.dd-miniatura.rollo::before { left: 4px; width: 10px; }
.dd-miniatura.rollo::after { left: 4px; right: 4px; }
.dd-miniatura.media { height: 34px; margin-top: 10px; }

/* ── El menú del botón derecho (18-10-2026) ──
   Se mudó a css/menu-contextual.css el 31-10-2026: es el menú de ERA en todo el sistema, no sólo el del diseñador. */
/* «Propiedades» desde el menú: el panel se marca un momento para que el ojo lo encuentre. */
.dd-destello { box-shadow: 0 0 0 2px var(--dlg-primary); border-radius: 10px; transition: box-shadow .2s; }

/* Un dato de la empresa que no está cargado: se ve su nombre, tenue, para que se note que falta (18-10-2026). */
.dd-tx .va.falta { color: #94a0ad; font-style: italic; }

/* La tabla de conceptos de la liquidación (18-10-2026) */
.dd-conceptos { height: 100%; box-sizing: border-box; overflow: hidden; }
.dd-conceptos .marco { display: flex; flex-direction: column; box-sizing: border-box; }
.dd-conceptos .cab { font-weight: 700; padding: 3px 4px; }
.dd-conceptos .rot { color: #6B7280; font-weight: 700; font-size: 0.87em; padding: 3px 4px 0; }
.dd-conceptos .fila { display: flex; align-items: flex-start; padding: 1px 4px; }
.dd-conceptos .fila .cod { flex: 0 0 4.3em; color: #6B7280; font-size: 0.87em; padding-top: 0.15em; }
.dd-conceptos .fila .con { flex: 1; min-width: 0; }
.dd-conceptos .fila .calc { color: #6B7280; font-size: 0.87em; }
.dd-conceptos .fila.nosuma { color: #6B7280; }
.dd-conceptos .fila .ns { font-size: 0.87em; }
.dd-conceptos .fila .monto { white-space: nowrap; padding-left: 6px; }
.dd-conceptos .sub { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.87em; padding: 1px 4px 2px; border-top: 0.6px solid #E5E7EB; }
.dd-conceptos .tot { display: flex; justify-content: space-between; font-weight: 700; padding: 4px; margin-top: 3px; }
.dd-conceptos.linea { padding: 5px; line-height: 1.3; }