/* ─────────────────────────────────────────────────────────────────────
 * docgen_editor_v2.css · sprint 49cb.105
 *
 * Editor de plantillas DocGen con lienzo A4 + bloques flotantes en mm.
 * Reemplaza al editor visual flow-based de docgen.js v1.
 * Todas las unidades de posicionado son milímetros para garantizar
 * fidelidad pixel-perfect con el render mPDF.
 * ───────────────────────────────────────────────────────────────────── */

/* ── Layout general del editor ──────────────────────────────────── */

.dgv2-root {
    --dgv2-canvas-bg: #ffffff;
    --dgv2-canvas-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    --dgv2-page-bg: #e9eaee;
    --dgv2-ruler-bg: #f4f4f7;
    --dgv2-ruler-fg: #6c6c78;
    --dgv2-grid: rgba(120, 130, 160, .12);
    --dgv2-grid-major: rgba(120, 130, 160, .22);
    --dgv2-selected: #4a3fb8;
    --dgv2-selected-soft: rgba(74, 63, 184, .12);
    --dgv2-handle: #4a3fb8;
    --dgv2-edit: #ff6b35;
    --dgv2-edit-soft: rgba(255, 107, 53, .07);

    position: relative;
    display: grid;
    grid-template-columns: 220px 28px 1fr;
    grid-template-rows: 28px 1fr;
    background: var(--dgv2-page-bg);
    user-select: none;
    overflow: auto;
    min-height: 600px;
    height: 100%;
    font: 12px/1.4 -apple-system, Segoe UI, sans-serif;
}

/* Paleta de variables a la izquierda (toda la altura). */
.dgv2-paleta {
    grid-row: 1 / span 2;
    grid-column: 1;
    background: #f8f8fb;
    border-right: 1px solid #d4d4dc;
    overflow-y: auto;
    padding: 10px 10px 60px;
    position: sticky;
    left: 0; top: 0;
    z-index: 3;
}
.dgv2-paleta h3 {
    margin: 0 0 8px;
    font-size: 11px;
    color: #2d2580;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.dgv2-paleta .modo-aviso {
    background: #fff7d6;
    color: #444;
    padding: 6px 8px;
    border: 1px solid #f0d65c;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 10px;
}
.dgv2-paleta .modo-aviso.active {
    background: #ddf6e3;
    border-color: #6abf7a;
}
.dgv2-paleta .grupo { margin-bottom: 12px; }
.dgv2-paleta .grupo-tit {
    font-size: 10px;
    font-weight: 700;
    color: #2d2580;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
    padding: 2px 0;
    border-bottom: 1px solid #ddd;
}
.dgv2-paleta .var {
    padding: 4px 7px;
    cursor: pointer;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #e5e5ec;
    margin-bottom: 3px;
    transition: background .1s, color .1s;
}
.dgv2-paleta .var:hover {
    background: var(--dgv2-selected);
    color: #fff;
    border-color: var(--dgv2-selected);
}
.dgv2-paleta .var:hover .var-key { color: rgba(255, 255, 255, .8); }
.dgv2-paleta .var-label { font-size: 11px; font-weight: 500; }
.dgv2-paleta .var-key {
    font-family: Consolas, Menlo, monospace;
    color: #888;
    font-size: 10px;
}
.dgv2-paleta .var-badge {
    display: inline-block;
    margin-right: 4px;
    font-size: 11px;
    filter: saturate(.6);
}
.dgv2-paleta .var:hover .var-badge { filter: saturate(1.5); }

/* Esquina superior-izquierda donde las dos reglas se cruzan. */
.dgv2-corner {
    grid-row: 1; grid-column: 2;
    background: var(--dgv2-ruler-bg);
    border-right: 1px solid #d4d4dc;
    border-bottom: 1px solid #d4d4dc;
    position: sticky;
    left: 220px; top: 0;
    z-index: 3;
}

/* ── Reglas (mm) ──────────────────────────────────────────────── */

.dgv2-rule-h, .dgv2-rule-v {
    background: var(--dgv2-ruler-bg);
    color: var(--dgv2-ruler-fg);
    position: relative;
    font-size: 9px;
    overflow: hidden;
}
.dgv2-rule-h {
    grid-row: 1; grid-column: 3;
    border-bottom: 1px solid #d4d4dc;
    position: sticky;
    top: 0;
    z-index: 2;
    height: 28px;
}
.dgv2-rule-v {
    grid-row: 2; grid-column: 2;
    border-right: 1px solid #d4d4dc;
    position: sticky;
    left: 220px;
    z-index: 2;
    width: 28px;
}
.dgv2-rule-tick {
    position: absolute;
    background: var(--dgv2-ruler-fg);
}
.dgv2-rule-h .dgv2-rule-tick { width: 1px; bottom: 0; }
.dgv2-rule-h .dgv2-rule-tick.major { height: 8px; }
.dgv2-rule-h .dgv2-rule-tick.minor { height: 4px; opacity: .6; }
.dgv2-rule-v .dgv2-rule-tick { height: 1px; right: 0; }
.dgv2-rule-v .dgv2-rule-tick.major { width: 8px; }
.dgv2-rule-v .dgv2-rule-tick.minor { width: 4px; opacity: .6; }
.dgv2-rule-label {
    position: absolute;
    font-size: 8px;
    color: var(--dgv2-ruler-fg);
}
.dgv2-rule-h .dgv2-rule-label { bottom: 9px; }
.dgv2-rule-v .dgv2-rule-label {
    right: 9px;
    transform: rotate(-90deg);
    transform-origin: right center;
    white-space: nowrap;
}
.dgv2-rule-cursor {
    position: absolute;
    background: var(--dgv2-selected);
    pointer-events: none;
}
.dgv2-rule-h .dgv2-rule-cursor { width: 1px; top: 0; bottom: 0; }
.dgv2-rule-v .dgv2-rule-cursor { height: 1px; left: 0; right: 0; }

/* Etiquetas de guía sobre la regla durante drag/resize. */
.dgv2-rule-guide {
    position: absolute;
    background: var(--dgv2-selected);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    line-height: 1.2;
}
.dgv2-rule-h .dgv2-rule-guide {
    top: 4px;
    transform: translateX(-50%);
}
.dgv2-rule-v .dgv2-rule-guide {
    left: 4px;
    transform: translateY(-50%);
    writing-mode: horizontal-tb;
}
/* Líneas guía verticales/horizontales que cruzan el lienzo desde la regla. */
.dgv2-canvas-guide {
    position: absolute;
    background: var(--dgv2-selected);
    opacity: .45;
    pointer-events: none;
    z-index: 990;
}
.dgv2-canvas-guide.x { width: 1px; top: 0; bottom: 0; }
.dgv2-canvas-guide.y { height: 1px; left: 0; right: 0; }

/* Líneas de snap inteligente entre bloques (naranjas). */
.dgv2-snap-guide {
    position: absolute;
    background: var(--dgv2-edit);
    opacity: .85;
    pointer-events: none;
    z-index: 991;
    box-shadow: 0 0 4px rgba(255, 107, 53, .5);
}
.dgv2-snap-guide.x { width: 1px; top: 0; bottom: 0; }
.dgv2-snap-guide.y { height: 1px; left: 0; right: 0; }

/* Modos de visualización · toggles. */
.dgv2-root.no-rules {
    grid-template-columns: 220px 0 1fr;
    grid-template-rows: 0 1fr;
}
.dgv2-root.no-rules .dgv2-corner,
.dgv2-root.no-rules .dgv2-rule-h,
.dgv2-root.no-rules .dgv2-rule-v { display: none; }
.dgv2-root.no-rules .dgv2-status { left: 220px; }
.dgv2-root.no-paleta {
    grid-template-columns: 0 28px 1fr;
}
.dgv2-root.no-paleta .dgv2-paleta { display: none; }
.dgv2-root.no-paleta .dgv2-corner { left: 0; }
.dgv2-root.no-paleta .dgv2-rule-v { left: 0; }
.dgv2-root.no-paleta .dgv2-status { left: 28px; }
.dgv2-root.no-paleta.no-rules { grid-template-columns: 0 0 1fr; }
.dgv2-root.no-paleta.no-rules .dgv2-status { left: 0; }

/* ── Viewport del lienzo ─────────────────────────────────────────── */

.dgv2-viewport {
    grid-row: 2; grid-column: 3;
    overflow: auto;
    padding: 24px;
    position: relative;
}

/* ── Lienzo A4 ───────────────────────────────────────────────────── */

/* Stack vertical de páginas A4 (multipágina · 49cb.108). */
.dgv2-canvas-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;          /* separación visible entre hojas */
    position: relative;
}
/* Cada hoja A4 es una .dgv2-canvas. Multipágina apila varias. */
.dgv2-canvas {
    position: relative;
    background: var(--dgv2-canvas-bg);
    box-shadow: var(--dgv2-canvas-shadow);
    margin: 0;
    cursor: default;
    background-image:
        linear-gradient(to right, var(--dgv2-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--dgv2-grid) 1px, transparent 1px),
        linear-gradient(to right, var(--dgv2-grid-major) 1px, transparent 1px),
        linear-gradient(to bottom, var(--dgv2-grid-major) 1px, transparent 1px);
    background-size:
        var(--dgv2-grid-step, 18.9px) var(--dgv2-grid-step, 18.9px),
        var(--dgv2-grid-step, 18.9px) var(--dgv2-grid-step, 18.9px),
        var(--dgv2-grid-major-step, 37.8px) var(--dgv2-grid-major-step, 37.8px),
        var(--dgv2-grid-major-step, 37.8px) var(--dgv2-grid-major-step, 37.8px);
}
.dgv2-canvas.no-grid { background-image: none; }

/* Badge "Página N" en la esquina superior derecha de cada hoja. */
.dgv2-page-badge {
    position: absolute;
    top: -24px;
    right: 0;
    background: var(--dgv2-selected);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px 4px 0 0;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 -1px 4px rgba(0,0,0,.15);
}
.dgv2-page-badge .num { font-weight: 800; }
.dgv2-page-badge .acc {
    margin-left: 10px;
    background: #d63838;
    color: #fff;
    border-radius: 3px;
    padding: 1px 8px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    pointer-events: auto;
    transition: background .12s, transform .12s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.dgv2-page-badge .acc:hover { background: #b02525; transform: scale(1.08); }

/* Barra de páginas (añadir/eliminar) debajo del stack. */
.dgv2-pagebar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 8px auto 24px;
}
.dgv2-add-page,
.dgv2-del-page {
    padding: 8px 18px;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;
    display: block;
}
.dgv2-add-page {
    color: var(--dgv2-selected);
    border: 2px dashed var(--dgv2-selected);
}
.dgv2-add-page:hover {
    background: var(--dgv2-selected);
    color: #fff;
}
.dgv2-del-page {
    color: #d63838;
    border: 2px dashed #d63838;
}
.dgv2-del-page:hover {
    background: #d63838;
    color: #fff;
}

/* ── Sección "flow" (contenido que no es bloque flotante) ──────── */

.dgv2-flow {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    color: #222;
}

/* ── Bloque flotante ─────────────────────────────────────────────── */

.dg-block {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    cursor: move;
    color: #222;
    background: transparent;
    border: 1px dashed transparent;
    transition: border-color .12s ease;
}
.dg-block:hover { border-color: rgba(74, 63, 184, .3); }
.dg-block.selected {
    border: 1px solid var(--dgv2-selected);
    background: var(--dgv2-selected-soft);
    z-index: 100;
}
.dg-block.dragging { opacity: .85; cursor: grabbing; }
.dg-block.resizing { opacity: .85; }
.dg-block-content { width: 100%; height: 100%; pointer-events: none; padding: 2px; box-sizing: border-box; }

/* Modo edición: bloque editable in-place. */
.dg-block.editing {
    outline: 2px solid var(--dgv2-edit);
    background: var(--dgv2-edit-soft);
    cursor: text;
    z-index: 200;
}
.dg-block.editing .dg-block-content {
    pointer-events: auto;
    cursor: text;
    outline: none;
}
.dg-block.editing .dg-block-content:focus { outline: none; }
.dg-block.editing .dgv2-handle { display: none; }

/* Chip de variable {{...}} dentro de contenido editable. */
.dg-var-chip {
    display: inline-block;
    background: #e9e7f6;
    color: #2d2580;
    border: 1px solid #c8c3e8;
    border-radius: 3px;
    padding: 0 5px;
    margin: 0 1px;
    font-size: 0.92em;
    font-weight: 500;
    cursor: default;
    user-select: all;
    line-height: 1.25;
}
.dg-var-chip:hover { background: #4a3fb8; color: #fff; border-color: #4a3fb8; }

/* Chip imagen: muestra el asset real ({{empresa.logo}} etc.) en miniatura.
   El tamaño visual está limitado para que se comporte como un chip y no
   ocupe todo el ancho del bloque. Al renderizar PDF, mPDF respeta el
   tamaño que defina la plantilla (no estos límites de display). */
.dg-var-img {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border: 1px dashed transparent;
    border-radius: 3px;
    padding: 1px;
    margin: 0 1px;
    max-width: 180px;
    max-height: 60px;
    cursor: default;
    user-select: all;
    line-height: 0;
}
.dg-var-img:hover {
    border-color: #4a3fb8;
    background: rgba(74, 63, 184, .06);
}
.dg-var-img img {
    display: inline-block;
    max-width: 100%;
    max-height: 60px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
.dg-var-img-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #2d2580;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;
    padding: 1px 5px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s;
    pointer-events: none;
    z-index: 10;
}
.dg-var-img:hover .dg-var-img-badge { opacity: 1; }
/* En modo edición (bloque editing), siempre visible el badge para que el usuario sepa que es variable. */
.dg-block.editing .dg-var-img-badge { opacity: .85; }

/* Mini-toolbar de formato flotante sobre bloque en edición. */
.dgv2-mini-toolbar {
    position: absolute;
    background: #2d2580;
    color: #fff;
    border-radius: 5px;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    display: flex;
    gap: 0;
    z-index: 2100;
    user-select: none;
    font-size: 11px;
    align-items: center;
}
.dgv2-mini-toolbar .grupo {
    display: flex;
    align-items: center;
    padding: 0 3px;
    border-right: 1px solid rgba(255, 255, 255, .15);
}
.dgv2-mini-toolbar .grupo:last-child { border-right: 0; }
.dgv2-mini-toolbar button {
    background: transparent;
    color: #fff;
    border: 0;
    width: 24px; height: 22px;
    padding: 0;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1;
    transition: background .1s;
}
.dgv2-mini-toolbar button:hover { background: rgba(255, 255, 255, .18); }
.dgv2-mini-toolbar button.ok {
    width: auto;
    padding: 0 8px;
    background: #5db074;
    font-weight: 600;
}
.dgv2-mini-toolbar button.ok:hover { background: #4ea063; }
.dgv2-mini-toolbar input[type="color"] {
    width: 24px; height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Imágenes dentro de bloques en el lienzo de edición: limitadas a un tamaño
   razonable para que no dominen visualmente el editor. Esto es solo display;
   al renderizar PDF, mPDF lee el HTML directo sin esta restricción. Si el
   usuario quiere ver la imagen a tamaño completo, doble-click → editar y
   ajustar manualmente. */
.dg-block img {
    max-width: 100%;
    max-height: 200px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ── Handles de resize (8 puntos) ───────────────────────────────── */

.dgv2-handle {
    position: absolute;
    background: var(--dgv2-handle);
    border: 1.5px solid #fff;
    border-radius: 50%;
    width: 10px; height: 10px;
    z-index: 1001;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.dgv2-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.dgv2-handle.n  { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
.dgv2-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.dgv2-handle.e  { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.dgv2-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.dgv2-handle.s  { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
.dgv2-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.dgv2-handle.w  { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* ── Toolbar contextual flotante ─────────────────────────────────── */

.dgv2-toolbar {
    position: absolute;
    background: #2d2580;
    color: #fff;
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    display: flex;
    gap: 2px;
    z-index: 2000;
    font-size: 11px;
    user-select: none;
}
.dgv2-toolbar button {
    background: transparent;
    color: #fff;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    transition: background .12s;
}
.dgv2-toolbar button:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.dgv2-toolbar button:disabled:hover { background: transparent; }
.dgv2-toolbar button:hover { background: rgba(255, 255, 255, .15); }
.dgv2-toolbar .sep {
    width: 1px;
    background: rgba(255, 255, 255, .2);
    margin: 4px 2px;
}

/* ── Status bar inferior ────────────────────────────────────────── */

.dgv2-status {
    position: absolute;
    left: 248px; bottom: 0; right: 0;
    background: #fff;
    border-top: 1px solid #d4d4dc;
    padding: 4px 12px;
    font-size: 11px;
    color: #555;
    display: flex;
    gap: 16px;
    z-index: 3;
}
.dgv2-status > span strong { color: #2d2580; }

/* ── Líneas guía de snap ────────────────────────────────────────── */

.dgv2-guide {
    position: absolute;
    background: #ff6b35;
    pointer-events: none;
    z-index: 999;
    opacity: .8;
}
.dgv2-guide.h { left: 0; right: 0; height: 1px; }
.dgv2-guide.v { top: 0; bottom: 0; width: 1px; }