:root[data-theme="light"]{
    color-scheme: light;
    --bg:#eceef5; --bg-2:#e6e9f2;
    --surface:#ffffff; --panel:#ffffff; --panel2:#f0f2f8;
    --glass:rgba(255,255,255,.7);
    --line:rgba(18,22,45,.09); --line2:rgba(18,22,45,.16);
    --txt:#0d1220; --muted:#586074;
    --violeta:#5a5cf0; --violeta2:#9a54f5;
    --accent:var(--violeta); --accent2:var(--violeta2);
    --ok:#0f9d58; --danger:#e5484d;
    --ring:rgba(90,92,240,.34);
    --shadow-sm:0 1px 2px rgba(20,24,60,.05), 0 4px 14px rgba(20,24,60,.07);
    --shadow:0 18px 50px -16px rgba(30,32,80,.30);
    --glow:0 12px 32px -10px rgba(96,84,245,.5);
    --paper:#fff;
  }
  /* En oscuro la profundidad no la da la sombra —sobre casi negro no se ve— sino cuánto
     más clara es cada superficie que la de atrás, más una línea de luz arriba. Por eso las
     superficies suben respecto del fondo y los bordes pesan más que en claro. */
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#07080d; --bg-2:#0a0c12;
    --surface:#171a24; --panel:#171a24; --panel2:#212530;
    --glass:rgba(31,35,47,.62);
    --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
    --txt:#eceef6; --muted:#98a1b4;
    --violeta:#7d7dff; --violeta2:#c07bff;
    --accent:var(--violeta); --accent2:var(--violeta2);
    --ok:#3ad07f; --danger:#f0595e;
    --ring:rgba(125,125,255,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.42);
    --shadow:0 30px 70px -20px rgba(0,0,0,.78);
    --glow:0 14px 40px -10px rgba(125,125,255,.5);
    --paper:#fff;
  }
  /* Tintes (el clic derecho en el logo los ofrece; el doble clic va rotando). Solo cambian
     el acento: todo lo demás —vidrios, sombras, halos— se deriva de estas variables.
     Cada bloque vale además para cualquier elemento que lleve el tinte puesto —ese es el
     segundo selector— y no sólo para la app entera: así el puntito de cada tema en el menú
     del logo se pinta con el acento de ese tema en lugar de copiarle el número, y el color
     de cada uno sigue viviendo acá, en un solo lugar. */
  :root[data-tinte="naranja"][data-theme="light"], [data-theme="light"] [data-tinte="naranja"]{
    --accent:#e2530b; --accent2:#f79009;
    --ring:rgba(226,83,11,.32);
    --glow:0 12px 32px -10px rgba(226,83,11,.5);
  }
  :root[data-tinte="naranja"][data-theme="dark"], [data-theme="dark"] [data-tinte="naranja"]{
    --accent:#ff8b3d; --accent2:#ffb020;
    --ring:rgba(255,139,61,.4);
    --glow:0 14px 40px -10px rgba(255,139,61,.5);
  }
  :root[data-tinte="magenta"][data-theme="light"], [data-theme="light"] [data-tinte="magenta"]{
    --accent:#cc1a6f; --accent2:#e8459a;
    --ring:rgba(204,26,111,.32);
    --glow:0 12px 32px -10px rgba(204,26,111,.5);
  }
  :root[data-tinte="magenta"][data-theme="dark"], [data-theme="dark"] [data-tinte="magenta"]{
    --accent:#ff5fae; --accent2:#ff8ad0;
    --ring:rgba(255,95,174,.4);
    --glow:0 14px 40px -10px rgba(255,95,174,.5);
  }
  :root[data-tinte="turquesa"][data-theme="light"], [data-theme="light"] [data-tinte="turquesa"]{
    --accent:#0b7f78; --accent2:#0aa2b8;
    --ring:rgba(11,127,120,.32);
    --glow:0 12px 32px -10px rgba(11,127,120,.5);
  }
  :root[data-tinte="turquesa"][data-theme="dark"], [data-theme="dark"] [data-tinte="turquesa"]{
    --accent:#2dd4bf; --accent2:#38bdf8;
    --ring:rgba(45,212,191,.4);
    --glow:0 14px 40px -10px rgba(45,212,191,.5);
  }
  :root[data-tinte="rojo"][data-theme="light"], [data-theme="light"] [data-tinte="rojo"]{
    --accent:#b71725; --accent2:#dd4a3a;
    --ring:rgba(183,23,37,.32);
    --glow:0 12px 32px -10px rgba(183,23,37,.5);
  }
  :root[data-tinte="rojo"][data-theme="dark"], [data-theme="dark"] [data-tinte="rojo"]{
    --accent:#f2606c; --accent2:#ff8d72;
    --ring:rgba(242,96,108,.4);
    --glow:0 14px 40px -10px rgba(242,96,108,.5);
  }
  :root[data-tinte="azul"][data-theme="light"], [data-theme="light"] [data-tinte="azul"]{
    --accent:#134577; --accent2:#2b7fbf;
    --ring:rgba(19,69,119,.32);
    --glow:0 12px 32px -10px rgba(19,69,119,.5);
  }
  :root[data-tinte="azul"][data-theme="dark"], [data-theme="dark"] [data-tinte="azul"]{
    --accent:#5aa2e0; --accent2:#86c6f2;
    --ring:rgba(90,162,224,.4);
    --glow:0 14px 40px -10px rgba(90,162,224,.5);
  }
  /* El violeta es el de fábrica y no tiene bloque propio —el :root ya lo tiene puesto—,
     así que se lo escribe acá para el puntito, que tiene que poder mostrarlo con la app
     en cualquier otro tema. */
  [data-tinte="violeta"]{ --accent:var(--violeta); --accent2:var(--violeta2); }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:var(--bg); color:var(--txt);
    font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  /* La interfaz no es texto para copiar: arrastrar sobre un menú, una pestaña o un
     rótulo no tiene que dejar nada pintado, como en cualquier programa de escritorio.
     Va en el <body> porque los menús, los diálogos y los avisos se cuelgan ahí, fuera
     de .app. Abajo se vuelve a habilitar donde el texto SÍ es el contenido. */
  body{ -webkit-user-select:none; user-select:none; }
  /* lo que uno escribe, la capa de texto de la hoja y la ficha del archivo */
  input, textarea, .textLayer, #dInfoBody{ -webkit-user-select:text; user-select:text; }
  .app{min-height:100vh;display:flex;flex-direction:column}

  /* ---- topbar ---- */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;row-gap:10px;
    padding:14px 22px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
  .tabs{max-width:100%;overflow-x:auto}
  .brand{display:flex;align-items:center;gap:12px}
  .brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--sobre,#fff);
    background:linear-gradient(140deg,var(--accent),var(--accent2));box-shadow:var(--shadow)}
  .brand h1{font-size:17px;margin:0;letter-spacing:.2px}
  .brand p{font-size:12.5px;margin:0;color:var(--muted)}
  .topbar-right{display:flex;align-items:center;gap:10px}
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--panel2)}
  .badge b{color:var(--ok)}
  .iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);
    color:var(--txt);cursor:pointer;font-size:16px;line-height:1;transition:.12s}
  .iconbtn:hover{border-color:var(--accent)}
  svg{flex:none}
  .iconbtn svg{vertical-align:middle}
  .badge svg{vertical-align:-2px}
  #pickFolder{display:inline-flex;align-items:center;gap:6px}
  .drop .ico svg{display:block;margin:0 auto}
  .step-status{display:inline-flex;align-items:center;gap:4px}

  /* ---- workspace ---- */
  .workspace{flex:1;display:grid;grid-template-columns:390px 1fr;gap:22px;
    padding:22px;padding-bottom:104px;max-width:1240px;width:100%;margin:0 auto;align-items:start}
  @media (max-width:900px){.workspace{grid-template-columns:1fr}}

  .sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:78px}
  @media (max-width:900px){.sidebar{position:static}}

  .step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 16px 18px}
  .step-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .step-num{width:24px;height:24px;flex:none;border-radius:999px;display:grid;place-items:center;
    font-size:12.5px;font-weight:700;background:var(--panel2);border:1px solid var(--line2);color:var(--muted)}
  .step.done .step-num{background:var(--ok);border-color:var(--ok);color:#fff}
  .step-head h2{font-size:14px;margin:0;font-weight:650;letter-spacing:.2px;flex:1}
  .step-status{font-size:12px;color:var(--ok);font-weight:600}

  /* ---- dropzones ---- */
  .drop{border:1.5px dashed var(--line2);border-radius:13px;padding:20px;text-align:center;
    color:var(--muted);cursor:pointer;transition:.15s;background:var(--panel2);display:block}
  .drop:hover,.drop.hover{border-color:var(--accent);color:var(--txt);background:color-mix(in srgb,var(--accent) 8%,var(--panel2))}
  .drop .ico{font-size:22px;display:block;margin-bottom:6px;opacity:.9}
  .drop strong{color:var(--txt);display:block;font-size:14px}
  .drop small{display:block;margin-top:5px;font-size:12px;line-height:1.5}
  input[type=file]{display:none}

  /* El cuadriculado del fondo transparente va blanco y gris también en modo oscuro: el
     sello se va a estampar sobre papel blanco, así que así es como se va a ver de verdad
     (y una firma negra sobre un cuadriculado oscuro no se veía). */
  .stampPreviewBox{display:flex;align-items:center;justify-content:center;gap:14px;min-height:92px;padding:14px;
    border:1px solid var(--line);border-radius:12px;
    background:
      linear-gradient(45deg,rgba(128,128,128,.10) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.10) 75%),
      linear-gradient(45deg,rgba(128,128,128,.10) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.10) 75%),
      #fff;
    background-size:16px 16px,16px 16px,auto;background-position:0 0,8px 8px,0 0}
  .stampPreviewBox img{max-height:78px;max-width:100%;object-fit:contain}

  /* la listita de sellos que se van juntando */
  .sellitos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .selloMini{position:relative;flex:none;width:56px;height:44px;padding:3px;cursor:pointer;
    border:1px solid var(--line2);border-radius:9px;background:#fff;
    display:flex;align-items:center;justify-content:center}
  .selloMini:hover{border-color:var(--accent)}
  .selloMini img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
  .selloMini.activo{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent)}
  .selloMini .x{position:absolute;top:-6px;right:-6px;width:17px;height:17px;border-radius:50%;
    display:none;align-items:center;justify-content:center;font-size:12px;line-height:1;
    background:var(--panel2);color:var(--muted);border:1px solid var(--line2)}
  .selloMini:hover .x,.selloMini:focus-within .x{display:flex}
  .selloMini .x:hover{color:var(--danger);border-color:var(--danger)}

  /* la biblioteca de textos: lo mismo que los sellitos, pero un texto no se reconoce de
     reojo como un dibujo, hay que leerlo. Por eso van uno abajo del otro y a lo ancho de
     la columna —el renglón entero— en vez de en fichitas que lo cortan a la tercera letra. */
  .textitos{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-height:168px;overflow-y:auto}
  /* Mismo vidrio y misma luz que los botones, no el relleno de los campos: un renglón de
     éstos se aprieta, y con el fondo del textarea de arriba parecía otro campo más.

     REGLA DE LA LISTA: NADA SE PINTA AFUERA DE LA CAJA. El contenedor tiene que scrollear
     —si no, veinte textos empujan el resto del panel fuera de la vista— y poner overflow-y
     vuelve `auto` también al overflow-x, que recorta contra los costados. Con el renglón
     midiendo exactamente el ancho del contenedor, un anillo o una sombra no tienen dónde
     caer: se comen a los lados y quedan torcidos. Por eso marcado es UN RELLENO —que es
     además lo que usa la lista de PDFs apilados para decir "ésta es"; el anillo es de las
     tarjetas, que tienen aire alrededor, como los sellitos— y el hover es borde y luz. */
  .textoMini{position:relative;display:flex;align-items:center;gap:8px;width:100%;cursor:pointer;
    padding:7px 30px 7px 10px;text-align:left;font-size:13px;line-height:1.35;
    border:1px solid var(--line2);border-radius:10px;color:var(--txt);
    background-color:var(--glass);background-image:linear-gradient(var(--luz),var(--luz));
    --luz:rgba(0,0,0,0);
    transition:border-color .16s ease, background-color .16s ease, --luz .11s ease}
  .textoMini:hover{border-color:var(--accent);
    --luz:color-mix(in srgb, currentColor 10%, transparent)}
  .textoMini:active{--luz:color-mix(in srgb, currentColor 17%, transparent)}
  .textoMini .t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .textoMini.activo{border-color:var(--accent);
    background-color:color-mix(in srgb, var(--accent) 12%, var(--surface))}
  .textoMini .x{position:absolute;top:50%;right:7px;transform:translateY(-50%);
    width:17px;height:17px;border-radius:50%;
    display:none;align-items:center;justify-content:center;font-size:12px;line-height:1;
    background:var(--panel);color:var(--muted);border:1px solid var(--line2)}
  .textoMini:hover .x,.textoMini:focus-within .x{display:flex}
  .textoMini .x:hover{color:var(--danger);border-color:var(--danger)}

  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .row + .row{margin-top:12px}
  .field{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);font-size:12.5px;margin-bottom:6px}
  .valpill{color:var(--txt);font-variant-numeric:tabular-nums;font-weight:600}
  .btn{appearance:none;border:1px solid var(--line2);background-color:var(--panel2);color:var(--txt);
    padding:9px 14px;border-radius:10px;cursor:pointer;font-size:13.5px}
  .btn:hover{border-color:var(--accent)}
  .btn.small{padding:7px 11px;font-size:13px}
  .btn.ghost{background-color:transparent;border-color:transparent;color:var(--muted)}
  .btn.ghost:hover{color:var(--txt);border-color:var(--line2)}
  .btn.primary{background-color:var(--accent);border-color:var(--accent);color:#fff;font-weight:650}
  .btn.primary:hover{background-color:var(--accent2)}
  .btn.primary:disabled{opacity:.5;cursor:not-allowed;background-color:var(--accent)}
  input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
  input[type=number]{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
    border-radius:8px;padding:7px 9px;font-size:14px;width:72px}
  .presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:168px}
  .presets .btn{padding:9px 0;font-size:15px;line-height:1}
  .switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13.5px}
  .switch input{accent-color:var(--accent);width:16px;height:16px}
  .checkline{display:flex;gap:18px;flex-wrap:wrap}
  .hint{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.5}
  /* Las explicaciones sólo se leen desde el signo de pregunta. Los nodos fuente
     quedan en su sección para conservar las ayudas que cambian con las opciones. */
  [data-help]{ display:none !important; }
  .hint:empty{ display:none; }
  .help-button{ flex:none; display:inline-grid; place-items:center; width:28px; height:28px;
    padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted);
    font:600 11px/1 system-ui,sans-serif; cursor:pointer; }
  .help-button > span{ display:grid; place-items:center; width:15px; height:15px;
    border:1px solid currentColor; border-radius:50%; }
  .help-button:hover, .help-button[aria-expanded="true"]{ background:var(--panel2); color:var(--txt); }
  .help-button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .help-button[hidden], .context-help[hidden]{ display:none; }
  .help-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .help-heading h3, .mbox .help-heading h3{ margin:0; }
  .docempty{ position:relative; }
  .docempty > .help-button{ position:absolute; top:6px; right:6px; z-index:1; }
  .context-help{ position:fixed; z-index:450; width:360px; max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain;
    padding:14px; border:1px solid var(--line2); border-radius:12px;
    background:var(--surface); color:var(--txt); box-shadow:var(--shadow);
    font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
  .context-help:focus{ outline:none; }
  .context-help .help-heading{ margin-bottom:10px; }
  .context-help h4{ margin:0; font-size:13px; font-weight:650; }
  .context-help .help-close{ flex:none; width:24px; height:24px; padding:0; border:0;
    border-radius:6px; background:transparent; color:var(--muted); font:18px/1 system-ui; cursor:pointer; }
  .context-help .help-close:hover{ background:var(--panel2); color:var(--txt); }
  .context-help .help-close:focus-visible{ outline:2px solid var(--accent); }
  .context-help-copy > div + div{ margin-top:12px; }
  .context-help-copy p{ margin:0; }
  .context-help-copy strong{ display:block; margin-bottom:2px; }
  .muted{color:var(--muted)}
  .divider{height:1px;background:var(--line);margin:16px 0}

  /* ---- file list ---- */
  #pdfList .sum{font-size:13px;margin-bottom:9px}
  #pdfList .sum b{color:var(--accent)}
  #pdfList .skip{color:var(--muted)}
  .filelist{max-height:168px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
  .filelist .fi{display:flex;justify-content:space-between;gap:10px;padding:7px 11px;font-size:12.5px;border-bottom:1px solid var(--line)}
  .filelist .fi:last-child{border-bottom:none}
  .filelist .fi .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .filelist .fi .st{flex:none;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
  .filelist .fi.ok .st{color:var(--ok)}
  .filelist .fi.err .st{color:var(--danger)}

  /* ---- stage ---- */
  .stage{background:var(--panel);border:1px solid var(--line);border-radius:16px;min-height:520px;
    display:flex;align-items:center;justify-content:center;padding:26px}
  .stage-empty{text-align:center;max-width:360px;color:var(--muted)}
  .stage-empty .big{font-size:44px;margin-bottom:10px}
  .stage-empty h3{color:var(--txt);margin:0 0 6px;font-size:17px}
  .stage-empty ol{text-align:left;margin:16px auto 0;padding-left:18px;max-width:280px;font-size:13.5px;line-height:1.8}
  .stage-empty .done{color:var(--ok)}

  .stage-preview{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
  .previewWrap{position:relative;display:inline-block;line-height:0;border-radius:6px;
    box-shadow:var(--shadow);background:var(--paper);max-width:100%}
  .previewWrap canvas{display:block;background:#fff;border-radius:6px;max-width:100%;height:auto}
  .placeholderPage{background:#fff;border-radius:6px;max-width:100%}
  .preview-spinner{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--panel) 55%,transparent);border-radius:6px;z-index:3}
  .preview-spinner.show{display:flex}
  .preview-spinner i{width:30px;height:30px;border-radius:50%;border:3px solid var(--line2);
    border-top-color:var(--accent);animation:spin .8s linear infinite;display:block}
  @keyframes spin{to{transform:rotate(360deg)}}

  #stampOverlay{position:absolute;top:0;left:0;cursor:grab;touch-action:none;outline:none;
    box-shadow:0 0 0 1.5px transparent;border-radius:2px;transition:box-shadow .1s}
  #stampOverlay:hover,#stampOverlay:focus{box-shadow:0 0 0 1.5px var(--accent)}
  #stampOverlay:active{cursor:grabbing}
  #stampOverlay img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
  .rz{position:absolute;right:-7px;bottom:-7px;width:15px;height:15px;border-radius:50%;
    background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);
    cursor:nwse-resize;display:none}
  #stampOverlay:hover .rz,#stampOverlay:focus .rz{display:block}

  .pager{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--muted);font-size:13px}
  .pager .btn{padding:5px 12px;font-size:15px}

  /* ---- action bar ---- */
  .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--panel);
    border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.10)}
  .actionbar-inner{max-width:1240px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px}
  .ab-left{flex:1;min-width:0}
  .ab-left .applyHint{font-size:13px;color:var(--muted)}
  .progress{height:8px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);
    overflow:hidden;margin-top:8px;max-width:520px;display:none}
  .progress.show{display:block}
  .progress > span{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
  .actionbar .btn.primary{font-size:15.5px;padding:13px 26px;white-space:nowrap}

  .toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(10px);
    background:var(--txt);color:var(--panel);padding:11px 18px;border-radius:11px;font-size:13.5px;font-weight:500;
    box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:60}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ---- tabs / vistas ---- */
  .tabs{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:4px}
  .tab{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;
    padding:7px 16px;border-radius:9px;cursor:pointer;transition:.12s}
  .tab:hover{color:var(--txt)}
  .tab.active{background:var(--panel);color:var(--txt);box-shadow:0 1px 5px rgba(0,0,0,.14)}
  .solo{max-width:720px;margin:0 auto;width:100%;padding:22px;padding-bottom:110px;display:flex;flex-direction:column;gap:16px}
  .levels{display:flex;flex-direction:column;gap:8px}
  .level{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:11px;padding:11px 14px;cursor:pointer;transition:.12s}
  .level:hover{border-color:var(--accent)}
  .level input{accent-color:var(--accent);width:16px;height:16px;flex:none}
  .level b{display:block;font-size:14px}
  .level span{font-size:12px;color:var(--muted)}
  .level:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel2))}
  /* Color y brillo: el renglón que explica la opción elegida. Alto fijo a propósito —el
     texto de cada una mide distinto, y sin esto el panel se mueve solo mientras elegís. */
  .colordice{min-height:3.4em}
  .cres{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 11px;font-size:12.5px;border-bottom:1px solid var(--line)}
  .cres:last-child{border-bottom:none}
  .cres .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cres .sz{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
  .cres .sz b{color:var(--ok)}
  .cres.err .sz{color:var(--danger)}
  /* ---- unir / separar / rotar ---- */
  .uitem{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12.5px;border-bottom:1px solid var(--line)}
  .uitem:last-child{border-bottom:none}
  .uitem .idx{color:var(--muted);min-width:18px;text-align:right;font-variant-numeric:tabular-nums}
  .uitem .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .uitem .sz{color:var(--muted);flex:none}
  .iconmini{width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);cursor:pointer;display:inline-grid;place-items:center;flex:none;transition:.12s}
  .iconmini:hover{color:var(--txt);border-color:var(--accent)}
  .iconmini:disabled{opacity:.35;cursor:default}
  .iconmini:disabled:hover{border-color:var(--line2);color:var(--muted)}
  .angles{display:flex;gap:8px;flex-wrap:wrap}
  .angle{flex:1;min-width:120px;border:1px solid var(--line2);border-radius:11px;padding:12px;text-align:center;cursor:pointer;transition:.12s}
  .angle:hover{border-color:var(--accent)}
  .angle input{display:none}
  .angle b{display:block;font-size:14px}
  .angle span{font-size:12px;color:var(--muted)}
  .angle:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel2))}
  .textin{width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);border-radius:9px;padding:10px 12px;font-size:14px}
  .textin:focus{outline:none;border-color:var(--accent)}

  /* =====================================================     ULTRA-MODERN SKIN — glass · gradientes · micro-interacciones
     ============================================================ */
  :root{ --r:16px;
    --optw:340px;                       /* ancho de la columna de opciones */
    --dur-col:.36s;  --ease-col:cubic-bezier(.22,.75,.25,1);
    --dur-thumb:.23s; --ease-thumb:cubic-bezier(.4,0,.2,1); }
  body{
    background:
      radial-gradient(1200px 760px at 8% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
      radial-gradient(1100px 720px at 104% -6%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 55%),
      var(--bg);
    background-attachment:fixed;
    transition:background-color .4s ease, color .3s ease;
  }
  ::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent); }
  *::-webkit-scrollbar{ width:11px; height:11px; }
  *::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
  *::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:padding-box; }

  .topbar{
    background:color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--line);
  }
  .actionbar{
    background:color-mix(in srgb, var(--bg) 66%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--line); box-shadow:0 -12px 40px -22px rgba(0,0,0,.5);
  }

  .brand .logo{ border-radius:13px; box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.28); }
  .brand h1{ font-weight:680; letter-spacing:-.015em; }

  .badge{ background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .iconbtn{ background:var(--glass); border:1px solid var(--line); border-radius:12px;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); position:relative; isolation:isolate;
    transition:border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
  .iconbtn::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    background:currentColor; opacity:0; transition:opacity .16s ease; }
  .iconbtn:hover{ border-color:var(--accent); background:var(--panel2); box-shadow:var(--shadow-sm); }
  .iconbtn:active::after{ opacity:.14; }

  .tabs{ background:var(--glass); border:1px solid var(--line); border-radius:15px; padding:5px; gap:3px;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .tab{ border-radius:11px; padding:8px 17px; font-weight:600; letter-spacing:-.005em; color:var(--muted); transition:.2s; }
  .tab:hover{ color:var(--txt); }
  .tab.active{ color:var(--txt); background:var(--surface); box-shadow:var(--shadow-sm); }

  /* Nada de `transition:all` ni de animar filter: sobre un gradiente con glow eso parpadea.
     El brillo tampoco lo puede dar un ::after que anime su opacidad: al arrancar la
     animación el navegador lo promueve a capa propia y por un cuadro se ve el panel de
     atrás —más claro en el tema claro, más oscuro en el oscuro—, igual en WebKit que en
     Chromium. Entonces la luz es una capa más del fondo y lo que se anima es su color,
     registrado con @property (si no, un color adentro de un gradiente no interpola). Se
     pinta en la misma capa que el botón: no hay promoción ni cuadro en blanco. */
  @property --luz{ syntax:"<color>"; inherits:false; initial-value:rgba(0,0,0,0); }
  .btn{ background-color:var(--glass); background-image:linear-gradient(var(--luz),var(--luz));
    border:1px solid var(--line2); border-radius:12px; font-weight:560;
    position:relative; --luz:rgba(0,0,0,0);
    transition:border-color .18s ease, background-color .18s ease, color .18s ease,
               box-shadow .26s var(--ease-out), --luz .24s ease; }
  /* La luz entra rápido y se va despacio: así el botón se siente vivo al pasarle por
     encima y no queda titilando cuando el mouse lo cruza de largo. Nada se mueve ni un
     pixel: todo el efecto es luz, color y halo. */
  .btn:hover{ --luz:color-mix(in srgb, currentColor 10%, transparent);
    transition:border-color .16s ease, background-color .16s ease, color .16s ease,
               box-shadow .2s var(--ease-out), --luz .11s ease; }
  .btn:active{ --luz:color-mix(in srgb, currentColor 17%, transparent); }
  .btn:disabled{ --luz:rgba(0,0,0,0); }
  .btn:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
  .btn.ghost{ background-color:transparent; border-color:transparent; }
  .btn.ghost:hover{ background-color:var(--panel2); border-color:transparent; box-shadow:none; transform:none; }
  .btn.primary{ background-image:linear-gradient(var(--luz),var(--luz)), linear-gradient(135deg, var(--accent), var(--accent2));
    border:0; color:var(--sobre,#fff); font-weight:640;
    box-shadow:var(--glow), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  .btn.primary:hover{ --luz:rgba(255,255,255,.16);
    box-shadow:var(--glow), 0 0 0 4px var(--ring); }
  .btn.primary:active{ --luz:rgba(0,0,0,.14);
    box-shadow:var(--glow), 0 0 0 2px var(--ring); }
  .btn.primary:disabled{ background-image:linear-gradient(135deg, var(--accent), var(--accent2)); opacity:.4; box-shadow:none; transform:none; filter:grayscale(.2); }

  .step,.stage{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
  .step-num{ font-weight:700; }
  .step.done .step-num{ background:linear-gradient(135deg, var(--accent), var(--accent2)); border:0; color:var(--sobre,#fff); box-shadow:var(--glow); }

  .drop{ border:1.5px dashed var(--line2); border-radius:var(--r); background:var(--panel2); transition:.22s; }
  .drop .ico{ transition:.22s; }
  .drop:hover,.drop.hover{ border-color:var(--accent); color:var(--txt);
    background:color-mix(in srgb, var(--accent) 7%, var(--surface));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-sm); }
  .drop:hover .ico,.drop.hover .ico{ color:var(--accent); }

  input[type=number],.textin{ border-radius:10px; transition:.16s; }
  input[type=number]:focus,.textin:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
  #stampOverlay:focus{ box-shadow:0 0 0 2px var(--accent), 0 0 0 6px var(--ring); }

  .level,.angle{ background:var(--surface); border-radius:14px; transition:.18s; }
  .level:hover,.angle:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
  .level:has(input:checked),.angle:has(input:checked){
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 9%, var(--surface));
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), var(--glow); }

  .progress{ border-radius:999px; }
  .progress > span{ background:linear-gradient(90deg, var(--accent), var(--accent2)); }
  .preview-spinner i{ border-top-color:var(--accent); }

  .previewWrap{ border-radius:12px; box-shadow:var(--shadow); }
  .previewWrap canvas,.placeholderPage{ border-radius:12px; }

  .toast{ background:color-mix(in srgb, var(--surface) 84%, transparent); color:var(--txt);
    border:1px solid var(--line2); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-radius:14px; box-shadow:var(--shadow); font-weight:550; }
  .filelist{ border-radius:12px; }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

  /* organizar: grilla de miniaturas */
  .orggrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:14px; margin-top:14px; }
  .thumb{ position:relative; border:1px solid var(--line2); border-radius:12px; background:var(--panel2); padding:8px; cursor:grab; transition:.15s; user-select:none; }
  .thumb:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
  .thumb.dragging{ opacity:.4; }
  .thumb.over{ border-color:var(--accent); box-shadow:0 0 0 2px var(--ring); }
  .thumb .pg{ display:flex; align-items:center; justify-content:center; height:150px; overflow:hidden; border-radius:8px; background:#fff; }
  .thumb .pg img{ max-width:100%; max-height:100%; display:block; transition:transform .2s; }
  .thumb .cap{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:7px; font-size:11.5px; color:var(--muted); }
  .thumb .acts{ display:flex; gap:4px; }

  /* visor de página de alto fijo: el pasador no se mueve aunque cambie el tamaño de hoja */
  /* Centrado con margin:auto (no con align/justify) para que al hacer zoom se pueda
     scrollear hasta arriba de todo; scrollbar-gutter fijo para que no parpadee. */
  .pageViewport{ width:100%; height:clamp(360px, 62vh, 660px); display:flex; flex-direction:column;
    justify-content:safe center; align-items:safe center;
    overflow:auto; scrollbar-gutter:stable; border-radius:14px;
    background:color-mix(in srgb, var(--txt) 4%, transparent);
    border:1px solid var(--line); padding:12px; }
  .pageViewport .previewWrap{ flex:none; margin:0; }
  .pagerbar{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
  .zoomctl{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:11px;
    background:var(--glass); padding:3px; }
  .zoomctl .btn{ padding:5px 10px; border:0; background-color:transparent; box-shadow:none; }
  .zoomctl .btn:hover{ background-color:var(--panel2); transform:none; }
  .zoomval{ font-size:12.5px; color:var(--muted); min-width:46px; text-align:center; font-variant-numeric:tabular-nums; }
  .pgsize{ font-size:11.5px; color:var(--muted); }

  /* ---- workspace tipo Preview ---- */
  .docbar{ display:flex; gap:8px; align-items:center; padding:10px 22px; border-bottom:1px solid var(--line);
    overflow-x:auto; background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  /* Las solapas: la que no está abierta es apenas un nombre sobre el fondo, y la abierta
     es una tarjeta. Cada una lleva la carita de su primera página, que es lo que hace que
     se reconozcan de un vistazo cuando hay varios PDFs con nombres parecidos. */
  .doctab{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:11px;
    border:1px solid transparent; background:transparent; color:var(--muted);
    cursor:pointer; font-size:13px; white-space:nowrap;
    transition:background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; }
  .doctab:hover{ background:var(--panel2); color:var(--txt); }
  .doctab.active{ background:var(--surface); color:var(--txt); font-weight:640;
    border-color:var(--accent);          /* el borde del color del tema: se ve cuál está abierto */
    /* sombra propia y corta: la de las píldoras grandes (--shadow-sm, 14 px de difuminado)
       no entra en el alto de la barra y se cortaba al ras del borde */
    box-shadow:0 1px 2px color-mix(in srgb, var(--sombra) 12%, transparent),
               0 2px 6px color-mix(in srgb, var(--sombra) 16%, transparent); }
  .doctab .mini{ flex:none; width:15px; height:19px; border-radius:3px; overflow:hidden;
    background:var(--panel2); display:grid; place-items:center;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--sombra) 20%, transparent);
    opacity:.72; transition:opacity .16s ease; }
  .doctab.active .mini, .doctab:hover .mini{ opacity:1; }
  /* "contain" y no "cover": así una hoja apaisada se ve apaisada, que también ayuda a
     distinguir un archivo de otro. */
  .doctab .mini img{ width:100%; height:100%; object-fit:contain; display:block; }
  .doctab .cnt{ color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums;
    padding:1px 5px; border-radius:99px; background:var(--panel2); }
  .doctab.active .cnt{ background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); }
  /* la cruz aparece cuando hace falta: en la que está abierta o al pasar por encima */
  .doctab .x{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:6px;
    color:var(--muted); opacity:0; transition:opacity .14s ease, background-color .14s ease, color .14s ease; }
  .doctab.active .x, .doctab:hover .x, .doctab .x:focus-visible{ opacity:1; }
  .doctab .x:hover{ background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
  /* Varios archivos marcados a la vez. Es exactamente lo que hace la columna con varias
     hojas marcadas —el tinte del acento y ningún borde—, así que se lee como lo mismo que
     ya sabés hacer abajo: marcada es un relleno, abierta es la tarjeta con el borde nítido,
     y las dos cosas se ven a la vez sin pisarse. Sólo se pinta cuando hay más de una
     marcada (la clase .multi la pone dSyncTabs): con una sola es la que estás mirando, y
     un realce de más no diría nada nuevo.
     El :not(.active) no es adorno: sin él, el relleno le ganaría por especificidad a la
     tarjeta de la solapa abierta y no se sabría cuál de las marcadas estás viendo. */
  .docbar.multi .doctab.sel:not(.active){ color:var(--txt); border-color:transparent;
    background:color-mix(in srgb, var(--accent) 22%, transparent); }
  .docbar.multi .doctab.sel:not(.active):hover{
    background:color-mix(in srgb, var(--accent) 32%, transparent); }
  .docbar.multi .doctab.sel .mini{ opacity:1; }

  /* ---- todas las solapas, apiladas ----
     Con muchos PDFs abiertos la fila deja de servir: cada solapa se queda en su ancho
     mínimo y del nombre no sobrevive ni la primera palabra. La lista es la misma fila
     dicha en vertical, donde el nombre entero sí entra. Cuelga del <body> —adentro de la
     barra de vidrio la recortaría el backdrop-filter, igual que a los menús y al globo— y
     se abre y se apaga con el mismo idioma que el menú del clic derecho. */
  .tablist{ position:fixed; z-index:210; width:min(330px, calc(100vw - 24px));
    display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--line2); border-radius:13px; padding:5px;
    box-shadow:var(--shadow); overscroll-behavior:contain;
    opacity:0; transform:scale(.96); transform-origin:top right;
    /* lo mismo que .ctxmenu: apagándose es invisible pero sigue en la página, y sin esto
       se comería el clic siguiente */
    pointer-events:none;
    transition:opacity .12s ease, transform .14s cubic-bezier(.2,.85,.25,1); }
  .tablist.on{ opacity:1; transform:none; pointer-events:auto; }
  .tablist .cab{ padding:6px 10px 7px; font-size:11px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; flex:none; }
  .tl-rows{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; position:relative; }
  /* El renglón dice lo que la solapa apretada no puede: el nombre entero, cuántas páginas
     tiene y si está sin guardar. La carita de la primera página es la misma que arriba,
     de la misma caché, sólo que acá entra más grande. */
  .tabrow{ display:flex; align-items:center; gap:10px; width:100%; padding:6px 8px;
    border:1px solid transparent; border-radius:10px; background:transparent;
    cursor:pointer; text-align:left;
    transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease,
               transform .26s cubic-bezier(.2,.85,.25,1); }
  .tabrow:hover{ background:var(--panel2); }
  .tabrow.active{ background:var(--surface); border-color:var(--accent);
    box-shadow:0 1px 2px color-mix(in srgb, var(--sombra) 12%, transparent),
               0 2px 6px color-mix(in srgb, var(--sombra) 16%, transparent); }
  /* Marcada es un relleno y abierta es la tarjeta con el borde nítido: las mismas dos
     cosas que arriba, para que se lea como lo mismo que ya sabés hacer en la fila. */
  .tablist.multi .tabrow.sel:not(.active){ border-color:transparent;
    background:color-mix(in srgb, var(--accent) 22%, transparent); }
  .tablist.multi .tabrow.sel:not(.active):hover{
    background:color-mix(in srgb, var(--accent) 32%, transparent); }
  .tabrow .mini{ flex:none; width:24px; height:31px; border-radius:3px; overflow:hidden;
    background:var(--panel2); display:grid; place-items:center;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--sombra) 20%, transparent);
    opacity:.82; transition:opacity .16s ease; }
  .tabrow.active .mini, .tabrow:hover .mini, .tablist.multi .tabrow.sel .mini{ opacity:1; }
  .tabrow .mini img{ width:100%; height:100%; object-fit:contain; display:block; }
  .tl-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .tabrow .nm{ font-size:13px; color:var(--txt); overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
  .tabrow.active .nm{ font-weight:640; }
  .tabrow .sub{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* el punto de "sin guardar" es el mismo de la solapa, dicho con palabras porque acá hay
     lugar para decirlo */
  .tabrow .sub.dirty{ color:var(--accent); }
  .tabrow .x{ display:inline-grid; place-items:center; width:22px; height:22px; flex:none;
    border-radius:7px; color:var(--muted); opacity:0;
    transition:opacity .14s ease, background-color .14s ease, color .14s ease; }
  .tabrow.active .x, .tabrow:hover .x, .tabrow .x:focus-visible{ opacity:1; }
  .tabrow .x:hover{ background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
  .tabrow.dragging{ opacity:.45; }
  @media (hover:none){
    .tabrow{ padding:9px 8px; }
    .tabrow .x{ opacity:1; width:26px; height:26px; }   /* sin mouse no hay "al pasar por encima" */
  }
  .docwrap{ display:grid; grid-template-columns:196px 1fr; gap:18px; padding:16px 22px 130px; max-width:1420px; margin:0 auto; }
  .thumbs{ display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 300px); overflow:auto; padding:2px 6px 2px 2px; }
  /* La miniatura se ilumina y le crece un halo al pasarle el mouse. Nada se mueve de
     lugar: es el mismo idioma que los botones de acción. Las dos sombras van siempre
     declaradas para que la lista interpole y no pegue un salto. */
  .tcard{ border:1px solid var(--line2); border-radius:11px; padding:6px; cursor:pointer; flex:none;
    background-color:var(--panel2); background-image:linear-gradient(var(--luz),var(--luz));
    --luz:rgba(0,0,0,0);
    box-shadow:0 0 0 0 var(--ring), 0 1px 2px rgba(0,0,0,.05);
    transition:border-color .18s ease, background-color .18s ease,
               box-shadow .26s var(--ease-out), --luz .24s ease,
               height .23s cubic-bezier(.4,0,.2,1), opacity .18s ease, padding .23s, margin .23s, transform .23s; }
  /* al quitar una página, la miniatura se colapsa en vez de desaparecer de golpe */
  .tcard.plegado, .insadd.plegado{ height:0 !important; min-height:0 !important; opacity:0;
    padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important;
    overflow:hidden; pointer-events:none; transform:scale(.92); }
  .insadd.plegado{ transition:height .23s cubic-bezier(.4,0,.2,1), opacity .18s ease; }
  .tcard:hover{ border-color:var(--accent);
    --luz:color-mix(in srgb, var(--accent) 9%, transparent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 2px 8px rgba(0,0,0,.10); }
  .tcard.sel{ border-color:var(--accent);
    background-color:color-mix(in srgb, var(--accent) 10%, var(--panel2));
    box-shadow:0 0 0 2px var(--ring), 0 1px 2px rgba(0,0,0,.05); }
  .tcard.sel:hover{ box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 2px 8px rgba(0,0,0,.10); }
  .tcard.cur .box{ outline:2px solid var(--accent); outline-offset:-1px; }
  .tcard.dragging{ opacity:.35; }
  .tcard.over{ box-shadow:0 -3px 0 0 var(--accent); }
  .tcard .box{ height:148px; width:100%; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:7px; overflow:hidden; }
  .tcard .box img{ max-width:100%; max-height:100%; display:block; }
  .tcard .n{ text-align:center; font-size:11px; color:var(--muted); margin-top:5px; }
  .docmain{ display:flex; flex-direction:column; gap:12px; min-width:0; }
  .selinfo{ font-size:12.5px; color:var(--muted); margin-left:auto; }
  .docempty{ max-width:560px; margin:60px auto; text-align:center; }
  /* "o empezá con hojas en blanco": el renglón con la palabra en el medio de la línea */
  .docempty .nuevo{ margin-top:22px; }
  .docempty .oline{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12.5px; }
  .docempty .oline::before, .docempty .oline::after{ content:""; flex:1; height:1px; background:var(--line); }
  /* la fila de "hojas en blanco" entra en un renglón aunque le sobre al recuadro de
     arriba: se sale de los 560 px justo lo que necesita y se queda centrada */
  .docempty .nuevorow{ justify-content:center; margin-top:14px;
    width:max-content; max-width:min(760px, 92vw);
    position:relative; left:50%; transform:translateX(-50%); }
  .docempty .cantlbl{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; }
  .docempty .cantlbl input{ width:66px; text-align:center; }
  .docpanel{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:14px; box-shadow:var(--shadow-sm); }
  .pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:760px){ .pgrid{ grid-template-columns:1fr; } }
  /* Lo que muestran estas vistas previas NO está todavía en el PDF: se pone recién al
     apretar Aplicar. Por eso quedan siempre con el punteado y el tirador a la vista
     —igual que mientras las arrastrás—; sin eso parecían parte de la hoja y la gente
     cerraba la herramienta creyendo que ya estaba hecho. La opacidad que elige el usuario
     va en el contenido (--op), nunca en la marca, para que no se desdibuje. */
  #dStampOv{ position:absolute; top:0; left:0; cursor:grab; touch-action:none; border-radius:2px;
    z-index:4; outline:1.5px dashed color-mix(in srgb, var(--accent) 58%, transparent);
    outline-offset:2px; transition:outline-color .1s; }
  #dStampOv:hover, #dStampOv:focus{ outline-color:var(--accent); }
  #dStampOv:active{ cursor:grabbing; }
  #dStampOv img{ width:100%; height:100%; display:block; pointer-events:none; user-select:none;
    opacity:var(--op,1); }
  #dStampOv .rz{ display:block; opacity:.62; transition:opacity .1s; }
  #dStampOv:hover .rz, #dStampOv:focus .rz{ opacity:1; }
  /* Insertar: la vista previa de lo que va a entrar. Mismo punteado y mismo tirador que
     el sello, porque es el mismo trato — se arrastra, se estira, y no está en el PDF
     hasta apretar Insertar. Los tres contenidos (texto, imagen, parche) comparten el
     recuadro; el que no va queda en display:none. */
  #dInsOv{ position:absolute; top:0; left:0; cursor:grab; touch-action:none; z-index:4;
    user-select:none; white-space:pre; border-radius:1px;
    outline:1.5px dashed color-mix(in srgb, var(--accent) 58%, transparent); outline-offset:2px;
    transition:outline-color .1s; }
  #dInsOv:hover, #dInsOv:focus{ outline-color:var(--accent); }
  #dInsOv:active{ cursor:grabbing; }
  /* La familia la pone dInsFuenteElegir: si se puede elegir la fuente, la previa tiene que
     mostrar ESA. La Helvetica queda como respaldo, que es la que se usa sin elegir nada. */
  /* la marca de agua también muestra la fuente elegida, por la misma razón */
  #dWmOv > span#dWmOvTxt{ font-family:var(--wm-font, Helvetica), Helvetica, Arial, sans-serif; }
  #dInsOv > span#dInsOvTxt{ display:block; font-family:var(--ins-font, Helvetica), Helvetica, Arial, sans-serif;
    pointer-events:none; white-space:pre; }
  #dInsOv > img{ display:block; width:100%; height:100%; pointer-events:none; }
  /* La forma se dibuja adentro del recuadro que se arrastra, y con el trazo centrado en el
     borde: la mitad del grosor cae para afuera, así que el dibujo tiene que poder asomarse
     (si no, un trazo gordo se vería cortado justo en el borde y en el PDF no lo estaría). */
  #dInsOv > svg{ width:100%; height:100%; overflow:visible; pointer-events:none; }
  /* La punta redonda no es un gusto: es lo que hace que el punteado sean puntos —una raya
     de largo cero con la punta redonda es un círculo— y es lo mismo que se le pide al PDF
     al escribirlo (borderLineCap). Con la punta cuadrada, que es la que trae por omisión,
     el punteado no dibuja nada. */
  #dInsOv > svg path{ stroke-linecap:round; }
  #dInsOv.tapa{ box-shadow:0 0 0 1px rgba(0,0,0,.12); }
  #dInsOv .rz{ display:block; opacity:.62; transition:opacity .1s; }
  #dInsOv:hover .rz, #dInsOv:focus .rz{ opacity:1; }
  #dInsOv.sinmano .rz{ display:none; }

  /* Insertar una línea o una flecha: acá la previa no es un recuadro punteado sino el trazo
     mismo con una manija en cada punta. El halo en color de acento hace el trabajo que en el
     resto hace el punteado —decir que eso todavía no está en el PDF—, porque un punteado
     alrededor de una línea punteada no se leería como tal.
     La capa tapa la hoja entera pero no recibe el clic: sólo lo reciben el trazo y las dos
     manijas, así que fuera de ahí la hoja sigue siendo la hoja (se selecciona el texto, se
     arrastra para mover). */
  #dInsLnOv{ position:absolute; inset:0; z-index:4; pointer-events:none; touch-action:none;
    outline:none; }
  #dInsLnOv .lnsvg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  #dInsLnOv .lnhalo{ fill:none; stroke-linecap:round;
    stroke:color-mix(in srgb, var(--accent) 32%, transparent); }
  #dInsLnOv .lnsh{ fill:none; stroke-linecap:round; }
  #dInsLnOv .lnpt{ stroke:none; }
  /* el trazo real puede ser finito o punteado: de lo que se agarra es de esta franja
     transparente y ancha, que perdona el pulso */
  #dInsLnOv .lnhit{ fill:none; stroke:transparent; stroke-linecap:round;
    pointer-events:stroke; cursor:grab; }
  /* Las manijas van huecas, no rellenas: la punta de flecha nace justo en el extremo y una
     manija maciza se la comería entera —quedaría una flecha que no se ve hasta insertarla—.
     Así el anillo la rodea y la deja mirar. */
  #dInsLnOv .lnh{ position:absolute; width:17px; height:17px; margin:-9px 0 0 -9px;
    border-radius:50%; background:transparent; border:2px solid var(--accent);
    box-shadow:0 0 0 1.5px rgba(255,255,255,.92), 0 1px 4px rgba(0,0,0,.22);
    pointer-events:auto; touch-action:none; cursor:grab; }
  #dInsLnOv .lnh:active, #dInsLnOv .lnhit:active{ cursor:grabbing; }

  /* Insertar y la marca de agua: sólo se ve el grupo de opciones de lo elegido —el tipo
     que se inserta, o la tinta de la marca—. Misma clase porque es la misma idea. */
  #dInsBody{ display:flex; flex-direction:column; }
  .insgrupo{ display:none; flex-direction:column; }
  .insgrupo.on{ display:flex; }
  .drop.chico{ padding:13px; }
  .drop.chico strong{ font-size:13px; }
  input[type=color].colorin{ width:46px; height:34px; padding:2px; cursor:pointer;
    background:var(--panel2); border:1px solid var(--line2); border-radius:9px; }
  input[type=color].colorin::-webkit-color-swatch-wrapper{ padding:0; }
  input[type=color].colorin::-webkit-color-swatch{ border:0; border-radius:6px; }

  /* vista previa en vivo de textos (marca de agua y numeración) */
  .txtov{ position:absolute; left:0; top:0; cursor:grab; touch-action:none; z-index:4; user-select:none;
    white-space:nowrap; transform-origin:50% 50%;
    outline:1.5px dashed color-mix(in srgb, var(--accent) 58%, transparent); outline-offset:4px;
    transition:outline-color .1s; }
  .txtov:active{ cursor:grabbing; }
  /* el punteado va en el recuadro y la opacidad en el texto: si fueran el mismo elemento,
     una marca al 18% se llevaría puesto también el punteado */
  .txtov span{ display:block; font-family:Helvetica,Arial,sans-serif; line-height:1; pointer-events:none;
    opacity:var(--op,1); }
  /* la marca de agua también puede ser una imagen: el ancho lo pone el panel y el alto sale
     de su proporción, igual que en la hoja */
  .txtov img{ display:block; pointer-events:none; user-select:none; opacity:var(--op,1); }
  .txtov:hover, .txtov:focus{ outline-color:var(--accent); }
  .doctab.dragging{ opacity:.45; }
  .thumbs.dropdoc{ outline:2px dashed var(--accent); outline-offset:4px; border-radius:12px; }

  /* ====== layout de aplicación: todo el alto para el trabajo ====== */
  html,body{ height:100%; }
  .app{ height:100vh; display:flex; flex-direction:column; overflow:hidden; }
  .view{ flex:1; min-height:0; overflow:auto; }
  #viewDocumento{ flex-direction:column; overflow:hidden; padding:0; }

  /* header compacto: marca + solapas de PDFs + controles */
  .topbar{ padding:8px 14px; gap:12px; flex-wrap:nowrap; row-gap:0; }
  .brand{ gap:9px; flex:none; cursor:default; user-select:none; }
  .brand .logo{ width:30px; height:30px; border-radius:9px; }
  .pwa-action{ flex:none; white-space:nowrap; }
  .pwa-action[hidden]{ display:none; }
  .pwa-update{ display:flex; align-items:center; justify-content:center; gap:12px;
    flex:none; padding:8px 14px; background:var(--panel2); border-bottom:1px solid var(--line);
    font-size:13px; }
  .pwa-update[hidden]{ display:none; }
  .pwa-update span{ min-width:0; }
  .pwa-update button{ flex:none; }
  .brand h1{ font-size:14.5px; font-weight:680; letter-spacing:-.01em; white-space:nowrap; }
  /* El recorte hace falta (con muchas solapas, las de más se esconden), pero pegado al
     borde se comía la sombra de la solapa abierta. Se le da aire con relleno y se lo
     descuenta con margen negativo: el recorte se corre para afuera y la caja donde las
     solapas reparten el ancho no se mueve.
     El que recorta es la tira y no la barra: los botones cuelgan de la barra, así que
     quedan fuera del recorte y siguen a la vista con veinte PDFs abiertos —que es
     justo cuando más falta hacen—. Los 10 px de separación son los mismos que se corrió
     el recorte para afuera: el borde de la tira llega hasta el botón y ni uno más. */
  .topbar .docbar{ flex:1; min-width:0; border:0; background:transparent; backdrop-filter:none;
    -webkit-backdrop-filter:none; padding:0; gap:10px; overflow:visible; }
  .tabstrip{ flex:1; min-width:0; display:flex; align-items:center; gap:6px;
    padding:8px 10px; margin:-8px -10px; overflow:hidden;
    position:relative; }   /* la raya del arrastre se cuelga de acá */
  /* Las solapas reparten el ancho: una sola ocupa todo y la activa pesa más. */
  /* El ancho se reparte con flex-basis en % (Chrome no interpola flex-grow):
     así la activa se agranda y las demás se achican en una sola animación. */
  .doctab{ padding:5px 10px; font-size:12.5px; border-radius:9px;
    flex:0 1 auto; min-width:78px; overflow:hidden; white-space:nowrap;
    transition:flex-basis .26s cubic-bezier(.2,.85,.25,1), transform .26s cubic-bezier(.2,.85,.25,1),
               opacity .2s, padding .26s,
               background-color .16s, border-color .16s, box-shadow .16s; }
  /* aparición al abrir un archivo y desaparición al cerrarlo */
  .doctab.entra, .doctab.sale{ flex-basis:0% !important; min-width:0 !important;
    opacity:0; padding-left:0; padding-right:0; border-color:transparent; }
  .doctab.sale{ pointer-events:none; }
  .doctab:not(.active) .cnt{ display:none; }   /* dejar el poco ancho para el nombre */
  .doctab .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .doctab .cnt, .doctab .x, .doctab .dot{ flex:none; }
  #docBar > .btn{ flex:none; }
  #dOpenMore{ width:30px; height:28px; padding:0; display:grid; place-items:center; border-radius:9px; }
  #dOpenMore svg{ width:15px; height:15px; }
  /* El botón de la lista: el mismo cuerpo que el +, con la cuenta al lado. El número es
     lo primero que la fila apretada dejó de decir —con catorce solapas de 78 px no se
     sabe ni cuántas hay—, así que va escrito en el botón y no sólo en el globo. */
  #dTabsLista{ height:28px; min-width:44px; padding:0 8px; gap:5px; border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center; }
  #dTabsLista svg{ width:15px; height:15px; }
  #dTabsLista .n{ font-size:11.5px; font-weight:640; font-variant-numeric:tabular-nums;
    color:var(--muted); }
  #dTabsLista.on, #dTabsLista.on .n{ color:var(--accent); }
  #dTabsLista.on{ background-color:color-mix(in srgb, var(--accent) 13%, transparent);
    border-color:color-mix(in srgb, var(--accent) 34%, transparent); }
  .badge{ padding:5px 10px; font-size:12px; }
  .iconbtn{ width:32px; height:32px; }
  @media (max-width:720px){ .brand h1{ display:none; } }

  /* Miniaturas, vista previa y herramientas comparten el borde superior. La isla
     del archivo permanece arriba de la navegación, dentro de la columna derecha. */
  #viewDocumento .docwrap{ flex:1; min-height:0; padding:14px 14px 0; gap:14px;
    max-width:none; margin:0; width:100%; grid-template-columns:170px minmax(0,1fr) var(--optw);
    grid-template-rows:minmax(0,1fr); }
  #viewDocumento .thumbs{ grid-column:1; grid-row:1; padding-top:0; padding-bottom:0;
    max-height:none; height:100%; min-height:0; overflow-y:auto; gap:0; scrollbar-gutter:stable; }
  #viewDocumento .docmain{ grid-column:2; grid-row:1; min-height:0; height:100%; gap:8px; padding-bottom:14px; }
  #viewDocumento .docsidebar{ grid-column:3; grid-row:1; display:flex; flex-direction:column;
    gap:12px; min-width:0; min-height:0; padding-bottom:14px; }
  #viewDocumento .optslot{ flex:1; min-height:0; min-width:0; display:flex; }
  #viewDocumento .optcol{ width:100%; flex:1; min-width:0; }
  .pageViewport.girando{ overflow:hidden; }
  .pageViewport.girando .previewWrap{ will-change:transform; }
  #viewDocumento .pageViewport{ flex:1; min-height:0; height:auto;
    overflow-anchor:none; }   /* el scroll lo movemos nosotros: nada de anclaje automático */
  /* Con zoom la hoja puede pasarse del ancho del visor: se llega con scroll
     (si no, el zoom quedaba topado en el ancho del contenedor). */
  #viewDocumento .previewWrap{ max-width:none; width:max-content; }
  #viewDocumento .previewWrap canvas{ max-width:none; }
  /* En modo Ajustar sí se deja encoger: así, mientras se arrastra el borde de la ventana,
     la hoja acompaña sola y no se sale del visor hasta que se redibuja. */
  #viewDocumento .pageViewport.enajuste .previewWrap{ max-width:100%; }
  #viewDocumento .pageViewport.enajuste .previewWrap canvas{ max-width:100%; height:auto; }
  /* Apagado el ajuste, la hoja va SUELTA: alrededor se le deja un hueco del tamaño del
     visor, así se la puede correr hasta esconder un pedazo —igual que lo esconde el zoom—
     sin que se vaya del todo. El hueco es margen de la hoja y no otro sistema de
     coordenadas: sigue siendo el mismo scroll, así el arrastre, la rueda, las barras y el
     ancla del zoom no se enteran. Va después de .enajuste para ganarle el max-width. */
  #viewDocumento .pageViewport.suelta .previewWrap{ max-width:none;
    margin:var(--holguraY, 0px) var(--holguraX, 0px); }
  #viewDocumento .pageViewport.suelta .previewWrap canvas{ max-width:none; }
  /* mientras se mueve el borde no vale la pena mostrar barras ni la capa de texto corrida */
  #viewDocumento .pageViewport.enajuste.redimensionando{ overflow:hidden; }
  #viewDocumento .pageViewport.redimensionando .textLayer,
  #viewDocumento .pageViewport.escalando .textLayer{ opacity:0; }

  /* ---- todas las hojas seguidas ----
     La corrida es una pila de huecos, uno por página y del tamaño exacto que le toca con
     el zoom de ahora: el scroll mide entonces lo que mide el documento entero, y no cambia
     cuando una hoja se dibuja o se descarta al alejarse. Cada hueco tiene la cara de la
     hoja —papel, sombra y esquinas—, así que el corte entre dos páginas se ve sin ninguna
     raya de más. El número va en el aire de abajo (el hueco entre dos hojas es de la de
     arriba) y queda marcado en la que estás mirando: en la corrida, cuál es la actual no lo
     puede decir el borde de la pantalla, y las herramientas trabajan sobre ella.
     La sombra es más corta que la de la hoja suelta: la de la hoja suelta se abre 60 px
     para despegarla del fondo, y con las hojas a 30 px una de otra eso las emborronaría
     entre sí. Las dos —los huecos y la hoja grande que se planta encima— usan la misma. */
  .hojastira{ display:flex; flex-direction:column; align-items:center; gap:30px;
    position:relative; flex:none; padding-bottom:30px; }
  .hojastira[hidden]{ display:none; }
  .hojastira .hslot{ position:relative; flex:none; background:var(--paper);
    border-radius:12px; box-shadow:var(--sh-2, var(--shadow)); }
  .hojastira .hslot > canvas{ display:block; width:100%; height:100%; max-width:none;
    background:#fff; border-radius:inherit; }
  .hojastira .hslot::after{ content:attr(data-n); position:absolute; left:0; right:0; top:100%;
    text-align:center; font-size:11.5px; line-height:30px; color:var(--muted);
    pointer-events:none; }
  /* el hueco de la que estás mirando no dibuja nada: lo tapa entera la hoja grande */
  .hojastira .hslot.actual{ background:transparent; box-shadow:none; }
  .hojastira .hslot.actual::after{ color:var(--txt); font-weight:640; }
  /* La hoja grande se muda al hueco de la página actual y lo llena. Debajo le queda el
     dibujo que el hueco ya tenía, así el cambio de página no parpadea: mientras la hoja
     grande se rasteriza de nuevo se esconde, y lo que se ve es ese dibujo. */
  #viewDocumento .pageViewport.entira .previewWrap{ position:absolute; inset:0; margin:0;
    max-width:none; width:auto; box-shadow:var(--sh-2, var(--shadow)); }
  #viewDocumento .pageViewport.entira .previewWrap > canvas{ width:100%; height:100%;
    max-width:none; }
  #viewDocumento .pageViewport.entira .previewWrap.esperando{ visibility:hidden; }
  #viewDocumento .pgsize{ padding-bottom:2px; }

  /* miniaturas rectangulares: respetan la forma real de cada hoja */
  #viewDocumento .tcard{ padding:5px; }
  #viewDocumento .tcard .box{ height:auto; min-height:56px; }
  #viewDocumento .tcard .box img{ width:100%; height:auto; max-height:none; }
  #viewDocumento .tcard .n{ margin-top:3px; font-size:10.5px; }
  .doctab .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

  /* modal de confirmación */
  .modal{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center;
    background:color-mix(in srgb, #000 42%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .modal.show{ display:flex; }
  /* El de confirmar nunca aparece solo: pregunta por algo que ya está abierto —la
     biblioteca de fuentes, el lote de archivos, la rueda de color—, y todos ésos son
     .modal también. Con el mismo 90 manda el orden del HTML, y como #modal es el primero
     del archivo quedaba atrás justo de lo que estaba preguntando. Va arriba de los demás
     porque es el que tiene la última palabra. */
  #modal{ z-index:92; }
  .mbox{ background:var(--surface); border:1px solid var(--line2); border-radius:16px; padding:22px; max-width:420px;
    box-shadow:var(--shadow); }
  .mbox h3{ margin:0 0 8px; font-size:16px; }
  .mbox p{ margin:0 0 18px; font-size:13.5px; color:var(--muted); line-height:1.55; }
  #modal.about .mbox{ width:420px; max-width:calc(100vw - 32px); }
  #modal.about #mText{ white-space:pre-line; }
  .mrow{ display:flex; gap:9px; justify-content:flex-end; }
  /* El diálogo que cambia lo que dice mientras escribís no puede ajustarse a lo que dice:
     cada texto nuevo lo movería. Toma el ancho entero y el alto lo fija ask() midiendo. */
  .mbox.fija{ width:420px; max-width:calc(100vw - 32px); }
  #mOk{ text-align:center; }
  .btn.danger{ background-color:var(--danger); border-color:var(--danger); color:#fff; font-weight:640; }

  /* ---- arrastre por puntero ---- */
  .dragghost{ position:fixed; z-index:95; pointer-events:none; transform:translate(-50%,-50%) rotate(-3deg);
    box-shadow:var(--shadow); border-radius:10px; overflow:hidden; opacity:.92; background:#fff; }
  .dragghost img{ display:block; width:118px; height:auto; }
  .dragghost.isdoc{ background:var(--accent); color:var(--sobre,#fff); padding:8px 14px; font-size:12.5px; font-weight:650;
    border-radius:11px; transform:translate(-50%,-50%) rotate(-2deg); }
  .tcard.dragging{ opacity:.35; }
  #viewDocumento .tcard{ cursor:grab; }
  #viewDocumento .tcard:active{ cursor:grabbing; }
  .doctab{ cursor:grab; } .doctab.dragging{ opacity:.4; }
  .tabrow{ cursor:grab; }   /* también se arrastra, igual que la solapa */
  /* Dónde va a caer la solapa que estás arrastrando. Es la misma idea que el hueco que se
     abre entre dos miniaturas, pero acá alcanza con una raya: la fila es angosta y las
     solapas ya se reparten el ancho. */
  .tabcaret{ position:absolute; width:3px; border-radius:2px; background:var(--accent);
    opacity:0; pointer-events:none; z-index:2;
    transition:left .16s cubic-bezier(.2,.85,.25,1), top .16s cubic-bezier(.2,.85,.25,1),
               opacity .13s ease; }
  .tabcaret.on{ opacity:1; }
  /* La misma raya, acostada: en la lista el hueco se abre entre dos renglones y no entre
     dos solapas. El alto y el ancho los pone el JS, que es el que sabe qué nodo mide. */
  .tabcaret.vert{ transition:top .16s cubic-bezier(.2,.85,.25,1), opacity .13s ease; }

  /* ---- isla del archivo, fija arriba de las herramientas ---- */
  .savebar{ display:flex; align-items:center; justify-content:space-between; gap:3px; padding:6px;
    border:1px solid var(--line); border-radius:16px; background:var(--glass); box-shadow:var(--shadow-sm);
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    flex:none; flex-wrap:wrap; }
  .savebar .selinfo{ flex:0 0 100%; order:1; margin:0; padding:3px 6px 1px;
    font-size:11px; line-height:1.3; color:var(--muted); }
  .savebar .selinfo:empty{ display:none; }
  /* islas flotantes sobre la vista previa */
  .viewportwrap{ position:relative; flex:1; min-height:0; display:flex; }
  .document-search{ flex:none; padding:8px; border:1px solid var(--line); border-radius:12px;
    background:var(--panel); color:var(--txt); }
  .document-search[hidden]{ display:none; }
  .document-search-row{ display:flex; align-items:center; gap:4px; }
  .document-search-row input{ flex:1; min-width:0; width:0; padding:7px 9px; }
  .document-search-row .btn{ flex:none; padding:5px 9px; }
  #dSearchCount{ flex:none; min-width:42px; text-align:center; font-size:12px; }
  .document-search-options{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
    margin-top:6px; font-size:11.5px; color:var(--muted); }
  .document-search-options label{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
  .document-search-options input{ width:auto; margin:0; }
  .document-search-options select{ width:auto; max-width:150px; padding:3px 6px; font-size:11.5px; }
  #dSearchStatus{ flex:1; min-width:100px; }
  .document-search-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:8; }
  .document-search-hit{ position:absolute; background:rgba(255,210,0,.32); border-radius:2px;
    outline:1px solid rgba(161,113,0,.35); }
  .document-search-hit.active{ background:rgba(255,140,0,.5); outline:2px solid #aa5200; }
  #dSearchOpen svg{ width:17px; height:17px; }
  #docViewport.escalando .document-search-layer,
  #docViewport.redimensionando .document-search-layer{ opacity:0; }

  /* dentro del visor, siempre debajo de la hoja (se llega con scroll) */
  /* las acciones de la página ahora viven en la barra, como una píldora más */
  .pagebar{ display:flex; align-items:center; gap:3px; padding:5px; flex:none;
    border:1px solid var(--line); border-radius:16px; background:var(--glass);
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
  .pagebar .sep{ width:1px; height:19px; background:var(--line); margin:0 3px; }
  .pagebar .btn.ico{ width:32px; height:30px; display:grid; place-items:center; padding:0;
    border:0; background:transparent; box-shadow:none; color:var(--muted); border-radius:11px; }
  .pagebar .btn.ico:hover{ background-color:var(--panel2); color:var(--txt); }
  .pagebar .btn.ico.danger:hover{ background-color:var(--danger); color:#fff; }
  .pagebar .btn.ico:disabled{ opacity:.35; cursor:default; }
  .pagebar .btn.ico:disabled:hover{ background-color:transparent; color:var(--muted); }

  .pagebar .sep, .savebar .sep{ width:1px; height:19px; background:var(--line); margin:0 3px; }
  .savebar .btn.ico{ width:32px; height:30px; display:grid; place-items:center; padding:0;
    border:0; background:transparent; box-shadow:none; color:var(--muted); border-radius:11px; }
  .savebar .btn.ico:hover{ background-color:var(--panel2); color:var(--txt); }
  .savebar .btn.ico.danger:hover{ background-color:var(--danger); color:#fff; }
  .savebar .btn.ico:disabled{ opacity:.35; cursor:default; }
  .savebar .btn.ico:disabled:hover{ background-color:transparent; color:var(--muted); }
  .savebar .btn.primary.ico{ background-image:linear-gradient(var(--luz),var(--luz)), linear-gradient(135deg,var(--accent),var(--accent2));
    color:var(--sobre,#fff); box-shadow:var(--glow); width:34px; }
  .savebar .btn.primary.ico:hover{ background-color:transparent; }
  .savebar .btn.primary.ico:hover{ --luz:rgba(255,255,255,.15); }
  .savebar .btn.primary.ico:active{ --luz:rgba(0,0,0,.13); }
  #dSaveAll.ico{ width:32px; height:28px; display:grid; place-items:center; padding:0; }
  /* ---- footer compacto: pasador + zoom + tamaño ---- */
  .docfoot{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
    font-size:12.5px; color:var(--muted); padding:2px 0 4px; flex:none; }
  .docfoot .btn{ padding:4px 9px; font-size:12.5px; border:0; background-color:transparent; box-shadow:none; color:var(--muted); }
  .docfoot .btn:hover{ background-color:var(--panel2); color:var(--txt); transform:none; }
  /* los dos ajustes: el que está puesto queda marcado */
  .docfoot .btn.on{ background-color:var(--surface); color:var(--txt); box-shadow:var(--sh-1); font-weight:640; }
  .docfoot .btn.ico{ width:28px; height:24px; display:grid; place-items:center; padding:0; }
  .docfoot .btn.ico svg{ width:15px; height:15px; display:block; }
  .docfoot .preview-tools{ display:flex; align-items:center; gap:2px; padding:2px; flex:none;
    border:1px solid var(--line); border-radius:9px; background:var(--panel2); }
  .docfoot .preview-tools .btn{ border-radius:6px; }
  .docfoot .fsep{ width:1px; height:15px; background:var(--line); margin:0 5px; }
  .docfoot .zoomval{ min-width:42px; text-align:center; }
  /* deslizador de zoom: más chico que los del panel.
     Va con input[type=range] adelante para ganarle en especificidad a la regla general. */
  input[type=range].zoomslider{ width:130px; height:16px; margin:0 3px; flex:none; }
  input[type=range].zoomslider::-webkit-slider-runnable-track{ height:5px; }
  input[type=range].zoomslider::-webkit-slider-thumb{ width:13px; height:13px; margin-top:-4px; }
  input[type=range].zoomslider::-moz-range-track,
  input[type=range].zoomslider::-moz-range-progress{ height:5px; }
  input[type=range].zoomslider::-moz-range-thumb{ width:12px; height:12px; }

  /* La mano mueve el visor; el cursor deja actuar a cada capa de la herramienta. */
  #viewDocumento .pageViewport.agarrando,
  #viewDocumento .pageViewport.agarrando *{ cursor:grabbing !important; user-select:none !important; }
  #viewDocumento .pageViewport.mano,
  #viewDocumento .pageViewport.mano *{ cursor:grab !important; user-select:none !important; }
  #viewDocumento .pageViewport.mano{ touch-action:none; }
  #viewDocumento .pageViewport.mano.agarrando,
  #viewDocumento .pageViewport.mano.agarrando *{ cursor:grabbing !important; }
  .docfoot .pgsize{ font-size:11.5px; }
  /* El interruptor de cómo se ven las hojas —de a una, o todas seguidas— es el mismo de las
     opciones cortas de los paneles, a la medida de la barra: el pie es más bajo y más chico
     que un panel, así que la pastilla se aprieta y el rótulo se achica hasta que la altura
     da lo mismo que los botones de al lado (24 px). Mismo track y misma marca en la
     elegida, así que no hay nada nuevo que aprender.
     Y no se encoge: el pie ya se acomoda en dos renglones cuando no entra, y eso es mejor
     que recortar un rótulo de dos palabras, que es lo único que este control tiene para
     decir. */
  .docfoot .segs{ padding:2px; border-radius:10px; flex:none; }
  .docfoot .segs .seg{ padding:2px 7px; gap:5px; font-size:12px; line-height:1;
    border-radius:7px; }
  .docfoot .segs .seg .sico svg{ width:14px; height:14px; }

  /* ---- controles dentro de cada miniatura ---- */
  #viewDocumento .tcard .box{ position:relative; }
  /* una sola píldora flotante con las acciones de la página */
  /* Sin vidrio: la píldora tiene fondo sólido. Con backdrop-filter parpadeaba, porque la
     tarjeta le anima la sombra y el fondo justo debajo mientras aparece, y el vidrio en
     vivo vuelve a muestrear en cada cuadro. Encima está sobre la miniatura, que es blanca:
     no hay nada que valga la pena dejar pasar. */
  .tacts{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
    display:flex; align-items:center; gap:1px; padding:3px;
    border-radius:999px; border:1px solid var(--line2);
    background:var(--surface);
    box-shadow:0 3px 12px rgba(0,0,0,.16);
    opacity:0; visibility:hidden;
    transition:opacity .15s ease, visibility 0s linear .15s; }
  /* las acciones aparecen al pasar por encima y en la que estás viendo; en una selección
     de varias no hace falta repetirlas en todas */
  .tcard:hover .tacts, .tcard.cur .tacts, .tcard:focus-within .tacts{
    opacity:1; visibility:visible; transition:opacity .15s ease, visibility 0s; }
  .tact{ width:25px; height:25px; display:grid; place-items:center; border-radius:999px; cursor:pointer;
    border:0; background:transparent; color:var(--muted); padding:0; transition:background .13s, color .13s; }
  .tact svg{ width:13px; height:13px; }
  .tact:hover{ color:var(--txt); background:var(--panel2); }
  .tact:active{ background:color-mix(in srgb, var(--txt) 14%, transparent); }
  .tact.danger:hover{ color:#fff; background:var(--danger); }
  .tacts .div{ width:1px; height:15px; background:var(--line); margin:0 2px; flex:none; }

  /* ---- puntos para agregar un PDF entre páginas ---- */
  .insadd{ height:14px; flex:none; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; position:relative;
    transition:height .17s cubic-bezier(.2,.85,.25,1); }
  /* al arrastrar, se abre un espacio ENTRE miniaturas (nunca sobre una) */
  .insadd.open{ height:74px; cursor:copy; }
  .insadd.open span{ opacity:0 !important; }
  .insadd.open::after{ content:""; position:absolute; inset:5px 2px; border-radius:11px;
    border:2px dashed var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); }
  .insadd span{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
    background:var(--surface); border:1px solid var(--line2); color:var(--muted);
    opacity:0; transform:scale(.8); transition:.15s; box-shadow:var(--shadow-sm); }
  .insadd::before{ content:""; position:absolute; left:6px; right:6px; height:2px; border-radius:2px;
    background:var(--accent); opacity:0; transition:.15s; }
  .insadd:hover span{ opacity:1; transform:scale(1); color:var(--accent); border-color:var(--accent); }
  .insadd:hover::before{ opacity:.35; }
  /* El cursor de la columna: la misma raya del hover, pero encendida y para quedarse. No
     titila —una raya que parpadea al lado de las miniaturas es ruido— y le crecen dos
     puntitos en las puntas, como el cursor de una regla, para que se lea "acá entra" y no
     "acá hay un borde". */
  .insadd.caret{ height:20px; }
  .insadd.caret::before{ opacity:1; height:2.5px;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
  .insadd.caret::after{ content:""; position:absolute; left:3px; right:3px; height:9px;
    border-left:2.5px solid var(--accent); border-right:2.5px solid var(--accent);
    border-radius:2px; pointer-events:none; }
  .insadd.caret:hover span{ opacity:1; }
  /* mientras se arrastra manda el hueco de 74 px, no el cursor */
  .insadd.caret.open::after{ inset:5px 2px; border:2px dashed var(--accent); border-radius:11px;
    background:color-mix(in srgb, var(--accent) 13%, transparent); height:auto; }

  /* ---- columna de opciones de la herramienta activa ---- */
  .optcol{ display:flex; flex-direction:column; min-height:0; background:var(--surface);
    border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden; }
  .optcol-head{ display:flex; align-items:center; gap:8px;
    padding:13px 14px; border-bottom:1px solid var(--line); flex:none; }
  .optcol-head h3{ flex:1; min-width:0; margin:0; font-size:14.5px; font-weight:680; letter-spacing:-.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .optcol-head .iconbtn{ flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
    background:transparent; border-color:transparent; color:var(--muted); }
  .optcol-head .iconbtn:hover, .optcol-head .iconbtn[aria-expanded="true"]{ background:var(--panel2); color:var(--accent); }
  .optcol-head .iconbtn svg{ width:17px; height:17px; }
  .breadcrumb-sep{ flex:none; font-size:17px; line-height:1; color:var(--muted); opacity:.55; }
  .tools-home .breadcrumb-sep{ display:none; }
  .optcol-head [hidden]{ display:none; }
  .tool-home{ display:flex; flex-direction:column; gap:12px; }
  .tool-home[hidden]{ display:none; }
  .tool-group h4{ margin:0 0 5px; color:var(--muted); font-size:10.5px; font-weight:650;
    letter-spacing:.035em; text-transform:uppercase; }
  .tool-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
  .tool-card{ display:flex; align-items:center; justify-content:flex-start; gap:9px;
    min-width:0; min-height:32px; padding:6px 9px; border:1px solid var(--line); border-radius:8px;
    background:var(--panel2); color:var(--txt); font:inherit; cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .tool-card:hover{ background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); box-shadow:var(--sh-1); }
  .tool-card:focus-visible, .tool-menu-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .tool-card .tico{ flex:none; display:grid; place-items:center; color:var(--muted); }
  .tool-card .tico svg{ width:17px; height:17px; display:block; }
  .tool-card .lbl{ font-size:12px; font-weight:560; line-height:1.3; text-align:left; }
  .tool-switch-menu{ position:fixed; z-index:170; width:290px; max-width:calc(100vw - 24px);
    max-height:min(600px,calc(100dvh - 24px)); overflow:auto; overscroll-behavior:contain; padding:6px;
    border:1px solid var(--line2); border-radius:var(--r-lg); background:var(--surface);
    box-shadow:var(--shadow), inset 0 1px 0 var(--brillo); }
  .tool-switch-menu[hidden]{ display:none; }
  .tool-menu-group{ padding:10px 10px 4px; font-size:10.5px; font-weight:650;
    color:var(--muted); text-transform:uppercase; letter-spacing:.035em; }
  .tool-menu-group:first-child{ padding-top:5px; }
  .tool-menu-item{ display:flex; align-items:center; gap:10px; width:100%; border:0; padding:8px 10px;
    border-radius:var(--r-sm); background:transparent; color:var(--txt); font:inherit; font-size:12.5px;
    text-align:left; cursor:pointer; }
  .tool-menu-item:hover, .tool-menu-item:focus-visible{ background:var(--panel2); }
  .tool-menu-item.on, .tool-menu-item[aria-checked="true"]{ background:color-mix(in srgb,var(--accent) 10%,var(--surface)); color:var(--accent); }
  .tool-menu-item .tico{ display:grid; place-items:center; flex:none; color:var(--muted); }
  .tool-menu-item .tico svg{ width:17px; height:17px; display:block; }
  .tool-menu-item .lbl{ flex:1; min-width:0; }
  .tool-menu-item .check, .tool-menu-item .tick{ margin-left:auto; display:grid; place-items:center; width:16px; visibility:hidden; }
  .tool-menu-item[aria-checked="true"] .check, .tool-menu-item[aria-checked="true"] .tick{ visibility:visible; }
  .tool-menu-item .check svg, .tool-menu-item .tick svg{ width:15px; height:15px; }
  .optcol-body{ padding:14px; overflow:auto; min-height:0; flex:1 1 auto; display:flex; flex-direction:column;
    scrollbar-gutter:stable; }   /* el ancho no cambia cuando aparece la barra */
  .optcol .docpanel{ border:0; background:transparent; box-shadow:none; padding:0; margin:0;
    flex:1 1 auto; display:flex; flex-direction:column; }
  /* el bloque de acción se va al fondo de la columna */
  .optcol .docpanel .pgroup{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  .optcol .docpanel .pacts{ margin-top:auto !important; padding-top:12px; }
  .optcol .docpanel .pacts-hint{ margin-top:auto; padding-top:12px; }
  .optcol .docpanel .pacts-hint:not([data-help]):not(:empty) + .pacts{ margin-top:10px !important; padding-top:0; }
  .optcol .pgrid{ grid-template-columns:1fr; gap:14px; }
  .optcol .stampPreviewBox{ min-height:78px; }
  .optcol .levels{ gap:7px; }
  .optcol .btn.primary{ width:100%; justify-content:center; }
  /* panel de información */
  .inforow{ display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
  .inforow:last-child{ border-bottom:0; }
  .inforow .k{ flex:none; width:112px; color:var(--muted); }
  .inforow .v{ flex:1; min-width:0; color:var(--txt); word-break:break-word; }
  .inforow .v.warn{ color:var(--danger); font-weight:600; }
  /* los datos que la app escribe al guardar se editan en la fila misma */
  .inforow input.metain{ width:100%; font:inherit; color:var(--txt); background:transparent;
    border:1px solid transparent; border-radius:8px; padding:3px 6px; margin:-3px -6px; }
  .inforow input.metain:hover{ background:var(--panel2); border-color:var(--line2); }
  .inforow input.metain:focus{ outline:none; background:var(--surface); border-color:var(--accent);
    box-shadow:0 0 0 3px var(--ring); }
  .inforow input.metain::placeholder{ color:var(--muted); }
  .inforow .metaorig{ display:block; margin:4px 0 0; padding:0; border:0; background:none;
    font:inherit; font-size:11.5px; color:var(--muted); text-align:left; cursor:pointer; }
  .inforow .metaorig:hover{ color:var(--accent); }
  .avisofirma{ margin-top:12px; padding:10px 12px; border-radius:11px; font-size:12px; line-height:1.5;
    border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--txt); }
  /* panel de adjuntos: la lista de lo que viaja adentro del PDF */
  .adjlista{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
  .adjlista:empty{ display:none; }
  .adjrow{ display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:12.5px;
    border:1px solid var(--line2); border-radius:11px; background:var(--panel2); }
  .adjrow .ext{ flex:none; min-width:36px; padding:3px 5px; border-radius:7px; text-align:center;
    font-size:10px; font-weight:700; letter-spacing:.03em;
    background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent); }
  .adjrow .nm{ flex:1; min-width:0; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .adjrow .sz{ flex:none; color:var(--muted); font-variant-numeric:tabular-nums; }
  .adjrow .iconbtn{ flex:none; width:26px; height:26px; border-radius:8px; }
  .adjrow .iconbtn svg{ width:13px; height:13px; }
  .adjrow .iconbtn.quita:hover{ border-color:var(--danger); color:var(--danger); }

  /* ---- modales de herramientas (legado) ---- */
  .sheet{ position:fixed; inset:0; z-index:88; display:none; align-items:center; justify-content:center; padding:20px;
    background:color-mix(in srgb,#000 38%,transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .sheet.show{ display:flex; }
  .sheet-box{ background:var(--surface); border:1px solid var(--line2); border-radius:18px;
    box-shadow:var(--shadow), inset 0 1px 0 var(--brillo);
    width:min(560px,100%); max-height:86vh; overflow:auto; }
  .sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px 0; }
  .sheet-head h3{ margin:0; font-size:16px; }
  .sheet-body{ padding:14px 18px; }
  .sheet-foot{ display:flex; justify-content:flex-end; gap:9px; padding:0 18px 18px; }
  /* el panel de sellado no bloquea: es flotante para poder ubicar el sello */
  .sheet.float{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
    align-items:flex-end; justify-content:flex-start; pointer-events:none; padding:18px 18px 18px 200px; }
  .sheet.float .sheet-box{ pointer-events:auto; width:min(390px,100%); }
  @media (max-width:900px){ .sheet.float{ padding:18px; justify-content:center; } }

  /* ---- desplegable propio (sin selects nativos) ---- */
  .dd{ position:relative; display:inline-block; }
  .dd-btn{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
  .dd-btn .chev{ opacity:.6; flex:none; transition:transform .15s; }
  .dd.open .dd-btn .chev{ transform:rotate(180deg); }
  /* el menú se monta en el <body> y se ubica a mano: no lo recorta ninguna columna con scroll */
  .dd-menu{ position:fixed; z-index:200; visibility:hidden; opacity:0; pointer-events:none;
    background:var(--surface); border:1px solid var(--line2); border-radius:13px; padding:5px;
    box-shadow:var(--shadow); max-height:280px; overflow:auto; overscroll-behavior:contain;
    transform:scale(.97); transform-origin:top center;
    transition:opacity .13s ease, transform .13s cubic-bezier(.2,.85,.25,1), visibility .13s; }
  .dd-menu.open{ visibility:visible; opacity:1; pointer-events:auto; transform:none; }
  .dd-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:transparent;
    color:var(--txt); font:inherit; font-size:13px; padding:8px 10px; border-radius:9px; cursor:pointer; white-space:nowrap; }
  .dd-item:hover{ background:var(--panel2); }
  .dd-item.on{ background:color-mix(in srgb,var(--accent) 12%,transparent); font-weight:640; }
  .dd-item .tick{ margin-left:auto; opacity:0; color:var(--accent); }
  .dd-item.on .tick{ opacity:1; }

  /* ---- menú del clic derecho ---- */
  /* El clic derecho no estrena un idioma propio: el vidrio, el radio y la forma de los
     ítems los comparte con los desplegables —está en las mismas reglas, más abajo, para
     que no puedan desincronizarse—. Va colgado del <body>, porque adentro de la columna
     de miniaturas (que scrollea) quedaría recortado, y por eso se ubica a mano. */
  .ctxmenu{ position:fixed; z-index:210; min-width:206px; max-width:290px;
    background:var(--surface); border:1px solid var(--line2); border-radius:13px; padding:5px;
    /* el tope da para el menú más largo (una página con herramienta abierta y algo
       copiado) sin cortarlo, y a lo ancho nunca scrollea */
    box-shadow:var(--shadow); max-height:min(78vh,560px); overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:contain;
    opacity:0; transform:scale(.96); transform-origin:var(--org, top left);
    /* Sin pointer-events:none, el menú que se está apagando —invisible pero todavía en la
       página— se come el clic siguiente. Es el mismo cuidado que toma .dd-menu. */
    pointer-events:none;
    transition:opacity .12s ease, transform .14s cubic-bezier(.2,.85,.25,1); }
  .ctxmenu.on{ opacity:1; transform:none; pointer-events:auto; }
  /* El encabezado dice sobre qué se abrió. Con varias páginas marcadas el menú actúa
     sobre todas, y eso tiene que estar escrito ANTES de elegir, no después. */
  .ctxmenu .cab{ padding:6px 10px 7px; font-size:11px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:var(--muted);
    /* en la solapa el encabezado es el nombre del archivo, y un nombre largo sin espacios
       no tiene dónde cortarse: sin esto saca una barra de scroll horizontal */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ctx-item{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0;
    background:transparent; color:var(--txt); font:inherit; font-size:13px; padding:8px 10px;
    border-radius:9px; cursor:pointer; white-space:nowrap; }
  .ctx-item:hover:not(:disabled){ background:var(--panel2); }
  .ctx-item:disabled{ opacity:.36; cursor:default; }
  .ctx-item .ico{ display:grid; place-items:center; width:15px; flex:none; opacity:.7; }
  .ctx-item .ico svg{ display:block; }
  .ctx-item .txt{ overflow:hidden; text-overflow:ellipsis; }
  /* El atajo va apagado y a la derecha: se lee si lo buscás y no le compite al rótulo. */
  .ctx-item .k{ margin-left:auto; padding-left:14px; font-size:11.5px; color:var(--muted);
    font-variant-numeric:tabular-nums; }
  .ctx-item.danger:hover:not(:disabled){ background:color-mix(in srgb, var(--danger) 13%, transparent);
    color:var(--danger); }
  .ctx-item.danger:hover:not(:disabled) .ico, .ctx-item.danger:hover:not(:disabled) .k{ opacity:1; color:inherit; }
  .ctx-sep{ height:1px; margin:5px 8px; background:var(--line); }
  /* El rótulo de un bloque adentro del menú. Un menú largo se lee por bloques, y decir de
     qué habla el bloque separa mejor que una línea. */
  .ctxmenu .cab.sub{ margin-top:4px; padding-top:9px; border-top:1px solid var(--line); }
  /* Lo que ya está puesto se marca con el tilde de los desplegables: el mismo idioma. */
  .ctx-item.on{ background:color-mix(in srgb, var(--accent) 12%, transparent); font-weight:640; }
  .ctx-item .tick{ display:grid; place-items:center; margin-left:auto; padding-left:12px; color:var(--accent); }
  .ctx-item .tick svg{ display:block; }
  /* El puntito de un tema: su acento, en el mismo degradado que el logo. Va a full color
     —el ícono del menú vive apagado para no competirle al rótulo— porque acá el color no
     acompaña al rótulo: es lo que se elige. El de "a medida" es la rueda entera, la misma
     que se abre al elegirlo. */
  .tsw{ width:13px; height:13px; border-radius:50%; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--txt) 22%, transparent);
    background:linear-gradient(135deg, var(--accent), var(--accent2)); }
  .tsw.propio{ background:conic-gradient(from 90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
  .ctx-item .ico:has(.tsw){ opacity:1; }
  /* Con el dedo no hay clic derecho, pero sí hay pulsación larga: los ítems se agrandan
     para que se puedan apuntar. */
  @media (hover:none){ .ctx-item{ padding:11px 11px; font-size:14px; } .ctxmenu{ min-width:230px; } }

  /* ---- recuadro de recorte ---- */
  /* la capa no captura clics: solo el recuadro, así afuera se sigue pudiendo seleccionar texto */
  #dCropOv{ position:absolute; inset:0; z-index:5; overflow:hidden; border-radius:inherit; pointer-events:none; }
  #dCropOv .cropbox{ position:absolute; cursor:move; touch-action:none; pointer-events:auto;
    outline:1.5px solid rgba(255,255,255,.95);
    box-shadow:0 0 0 9999px rgba(12,12,28,.52), 0 0 0 1px rgba(0,0,0,.25) inset; }
  #dCropOv .cg{ position:absolute; inset:0; pointer-events:none; opacity:.55;
    background:
      linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.85) calc(33.333% - .5px),
        rgba(255,255,255,.85) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
      linear-gradient(to right, transparent calc(66.666% - .5px), rgba(255,255,255,.85) calc(66.666% - .5px),
        rgba(255,255,255,.85) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
      linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.85) calc(33.333% - .5px),
        rgba(255,255,255,.85) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
      linear-gradient(to bottom, transparent calc(66.666% - .5px), rgba(255,255,255,.85) calc(66.666% - .5px),
        rgba(255,255,255,.85) calc(66.666% + .5px), transparent calc(66.666% + .5px)); }
  #dCropOv .ch{ position:absolute; width:13px; height:13px; border-radius:4px; background:#fff;
    border:1.5px solid var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.35); touch-action:none; }
  #dCropOv .ch.nw{ left:-7px;  top:-7px;    cursor:nwse-resize; }
  #dCropOv .ch.ne{ right:-7px; top:-7px;    cursor:nesw-resize; }
  #dCropOv .ch.sw{ left:-7px;  bottom:-7px; cursor:nesw-resize; }
  #dCropOv .ch.se{ right:-7px; bottom:-7px; cursor:nwse-resize; }
  #dCropOv .ch.n{ left:50%; top:-7px;    margin-left:-6.5px; cursor:ns-resize; }
  #dCropOv .ch.s{ left:50%; bottom:-7px; margin-left:-6.5px; cursor:ns-resize; }
  #dCropOv .ch.w{ top:50%; left:-7px;    margin-top:-6.5px;  cursor:ew-resize; }
  #dCropOv .ch.e{ top:50%; right:-7px;   margin-top:-6.5px;  cursor:ew-resize; }

  /* ---- cuadrilátero para enderezar ---- */
  #dWarpOv{ position:absolute; inset:0; z-index:5; border-radius:inherit; pointer-events:none; }
  /* Los cuatro puntos son los mismos acá y en el escáner: mismo dibujo, mismo gesto. */
  .quadov{ position:absolute; inset:0; }
  .quadov .wsvg{ position:absolute; inset:0; width:100%; height:100%; }
  .quadov .wshade{ fill:rgba(12,12,28,.52); }
  .quadov .wline{ fill:none; stroke:rgba(255,255,255,.95); stroke-width:1.5; stroke-linejoin:round; }
  .quadov .wh, .quadov .wm{ position:absolute; pointer-events:auto; touch-action:none; cursor:grab;
    box-shadow:0 1px 4px rgba(0,0,0,.35); }
  .quadov .wh{ width:15px; height:15px; margin:-8px 0 0 -8px; border-radius:50%; background:#fff;
    border:2px solid var(--accent); }
  .quadov .wh:active{ cursor:grabbing; }
  .quadov .wm{ width:11px; height:11px; margin:-6px 0 0 -6px; border-radius:3px;
    background:color-mix(in srgb, var(--accent) 78%, #fff); border:1.5px solid rgba(255,255,255,.9); }
  #dWarpOv .wloupe{ position:absolute; display:none; width:140px; height:140px; border-radius:50%; overflow:hidden;
    pointer-events:none; margin:-158px 0 0 -70px; background:var(--panel);
    box-shadow:0 6px 22px rgba(0,0,0,.4), 0 0 0 2px var(--accent); }
  #dWarpOv .wloupe.on{ display:block; }
  #dWarpOv .wloupe canvas{ display:block; width:140px; height:140px; }
  #dWarpOv .wloupe i{ position:absolute; left:50%; top:50%; width:19px; height:19px; margin:-10px 0 0 -10px;
    border-radius:50%; border:1.5px solid var(--accent); box-shadow:0 0 0 1px rgba(255,255,255,.75); }
  #dWarpOv .wloupe i::before, #dWarpOv .wloupe i::after{ content:""; position:absolute; background:var(--accent); opacity:.8; }
  #dWarpOv .wloupe i::before{ left:50%; top:-9px; width:1px; height:36px; margin-left:-.5px; }
  #dWarpOv .wloupe i::after{ top:50%; left:-9px; height:1px; width:36px; margin-top:-.5px; }

  /* miniatura del resultado, dentro del panel */
  .warpprev{ position:relative; margin-top:12px; border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--panel2); padding:10px; display:flex; align-items:center; justify-content:center; min-height:96px; }
  .warpprev canvas{ display:block; max-width:100%; max-height:190px; border-radius:3px;
    box-shadow:0 2px 10px rgba(0,0,0,.22); background:#fff; }
  .warpprev .lbl{ position:absolute; left:10px; top:-8px; padding:0 6px; font-size:11px; letter-spacing:.02em;
    color:var(--txt2); background:var(--panel); border-radius:99px; }


  /* ---- escanear con la cámara ----
     El visor ocupa toda la pantalla porque mientras escaneás no hay nada más que mirar que
     la hoja y el botón. Adentro manda el negro aunque la app esté en claro: al lado de la
     imagen de la cámara cualquier superficie clara encandila. Se redefinen las variables de
     superficie y no el color de cada cosa, así los botones de siempre entran sin una sola
     regla nueva —y el acento sigue siendo el que eligió el usuario. */
  .scancam{ position:fixed; inset:0; z-index:130; display:none; flex-direction:column;
    color-scheme:dark;
    --surface:#12131a; --panel:#181a22; --panel2:#232634;
    --glass:rgba(255,255,255,.09);
    --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.2);
    --txt:#f2f3f8; --muted:#a9b0c0;
    --shadow-sm:0 1px 2px rgba(0,0,0,.55);
    background:#07080c; color:var(--txt);
    -webkit-user-select:none; user-select:none; touch-action:manipulation; }
  .scancam.on{ display:flex; }
  .scancam .scanvista{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:60px 10px 124px; }
  /* El marco lo mide el JS con la proporción de verdad del video (o de la foto): así el
     cuadrilátero de arriba cae justo, sin cuentas de bandas negras. */
  .scancam .scanmarco{ position:relative; border-radius:12px; overflow:hidden; background:#000;
    box-shadow:0 18px 60px -20px rgba(0,0,0,.9); }
  .scancam video, .scancam .scanmarco img{ display:block; width:100%; height:100%;
    object-fit:contain; background:#000; }
  .scanguia{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .2s ease; }
  .scanguia.on{ opacity:1; }
  .scanguia .wshade{ fill:rgba(6,7,12,.44); }
  .scanguia .wline{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linejoin:round; }

  .scantop{ position:absolute; left:0; right:0; top:0; z-index:2; display:flex; align-items:center; gap:8px;
    padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
    background:linear-gradient(rgba(0,0,0,.62), transparent); }
  .scantop .scangap{ flex:1; }
  .scantop .switch{ padding:6px 12px; border-radius:99px; font-size:12.5px;
    background:var(--glass); border:1px solid var(--line);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .scancam .btn.ico{ width:34px; height:32px; display:grid; place-items:center; padding:0; flex:none; }
  .scancam .btn.ico.on{ border-color:var(--accent); color:var(--accent); }
  /* Lo que la app ve por la cámara, dicho en una línea: sin esto no se entiende por qué a
     veces encuentra la hoja y a veces no. */
  .scanaviso{ position:absolute; left:50%; top:calc(60px + env(safe-area-inset-top)); transform:translateX(-50%);
    z-index:2; max-width:min(92vw, 470px); text-align:center; font-size:12.5px; line-height:1.45;
    color:#eef0f8; background:rgba(8,9,16,.62); border:1px solid rgba(255,255,255,.1);
    border-radius:99px; padding:7px 15px; pointer-events:none;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .scanpie{ position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:10px 12px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(transparent, rgba(0,0,0,.74) 34%); }
  .scanacc{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-top:8px; }
  .scanacc .scanlado{ display:flex; align-items:center; }
  .scanacc .scanlado:last-child{ justify-content:flex-end; }
  .scanacc.revacc{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  /* el redondel de sacar la foto, que es lo que todo el mundo busca sin leer nada */
  .scanshot{ width:66px; height:66px; padding:0; border-radius:50%; cursor:pointer;
    border:3px solid rgba(255,255,255,.92); background:transparent; display:grid; place-items:center; }
  .scanshot i{ display:block; width:52px; height:52px; border-radius:50%; background:#fff;
    transition:transform .12s ease, background-color .12s ease; }
  .scanshot:active i{ transform:scale(.86); background:#dfe1ee; }
  .scanshot:disabled{ opacity:.5; cursor:not-allowed; }
  /* el fogonazo: se ve que la foto salió sin tener que ir a mirar la tira */
  .scanflash{ position:absolute; inset:0; z-index:3; background:#fff; opacity:0; pointer-events:none; }
  .scanflash.on{ animation:scanflash .34s ease-out; }
  @keyframes scanflash{ from{ opacity:.8; } to{ opacity:0; } }
  /* la revisión va encima de la cámara, que sigue prendida atrás */
  .scanrev{ position:absolute; inset:0; z-index:4; background:#07080c; }
  .scanrev .scanvista{ padding:16px 10px 92px; }

  /* La tira de hojas sacadas es la misma abajo de la cámara y adentro del panel: lo que se
     ve ahí es lo que va a entrar al PDF, y en ese orden. */
  .scantira{ display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding:7px 3px 8px; }
  .scantira .stoma{ position:relative; flex:none; cursor:pointer; line-height:0; border-radius:7px;
    border:1px solid var(--line2); background:var(--panel2); box-shadow:var(--shadow-sm); }
  .scantira .stoma img{ display:block; height:74px; width:auto; border-radius:6px; background:#fff; }
  .scantira .stoma .sn{ position:absolute; left:3px; bottom:3px; min-width:17px; height:17px; padding:0 4px;
    display:flex; align-items:center; justify-content:center; line-height:1;
    font-size:11px; font-weight:700; font-style:normal; color:#fff;
    background:rgba(8,9,16,.72); border-radius:5px; }
  .scantira .stoma .sx{ position:absolute; right:-6px; top:-6px; width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#fff; background:var(--danger);
    box-shadow:0 1px 4px rgba(0,0,0,.4); opacity:0; transition:opacity .15s ease; }
  .scantira .stoma .sx svg{ width:11px; height:11px; }
  .scantira .stoma:hover .sx, .scantira .stoma:focus-visible .sx{ opacity:1; }
  @media (hover:none){ .scantira .stoma .sx{ opacity:1; } }
  .scancam .scantira .stoma img{ height:62px; }
  /* el panel antes de la primera hoja: dice de qué se trata en vez de mostrar un hueco */
  .scanvacio{ text-align:center; padding:20px 14px 16px; border:1px dashed var(--line2);
    border-radius:var(--r-md); background:var(--panel2); }
  .scanvacio .sico{ display:block; color:var(--accent); margin-bottom:4px; }
  .scanvacio strong{ display:block; font-size:13.5px; }
  .scanvacio small{ display:block; margin-top:5px; font-size:12px; color:var(--muted); line-height:1.5; }

  /* ---- zonas del OCR: se marcan sobre la hoja y se leen sólo esas ---- */
  #dOcrOv{ position:absolute; inset:0; z-index:5; border-radius:inherit; overflow:hidden;
    pointer-events:auto; cursor:crosshair; touch-action:none; }
  #dOcrOv .ozona{ position:absolute; cursor:move; touch-action:none;
    border:1.5px solid var(--accent);
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    box-shadow:0 0 0 1px rgba(255,255,255,.55) inset; }
  #dOcrOv .ozona .on{ position:absolute; left:-1.5px; top:-1.5px; min-width:19px; height:19px; padding:0 5px;
    display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; font-style:normal;
    color:var(--sobre, #fff); background:var(--accent); border-radius:5px 0 5px 0; pointer-events:none; }
  #dOcrOv .ozona .ox{ position:absolute; right:-9px; top:-9px; width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; line-height:1;
    color:#fff; background:#d0424a; border:1.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; }
  #dOcrOv .ozona .oh{ position:absolute; width:12px; height:12px; border-radius:3px; background:#fff;
    border:1.5px solid var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.3); }
  #dOcrOv .ozona .oh.nw{ left:-6px;  top:-6px;    cursor:nwse-resize; }
  #dOcrOv .ozona .oh.ne{ right:-6px; top:-6px;    cursor:nesw-resize; }
  #dOcrOv .ozona .oh.sw{ left:-6px;  bottom:-6px; cursor:nesw-resize; }
  #dOcrOv .ozona .oh.se{ right:-6px; bottom:-6px; cursor:nwse-resize; }
  /* ---- OCR ---- */
  .ocrprog{ margin-top:12px; height:6px; border-radius:99px; background:var(--panel2); overflow:hidden; }
  .ocrprog i{ display:block; height:100%; width:0%; border-radius:99px;
    background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .18s ease; }
  .ocrtexto{ margin-top:12px; }
  .ocrtexto textarea{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; line-height:1.45; }

  /* ---- capa de texto seleccionable sobre la página ---- */
  .textLayer{ position:absolute; left:0; top:0; overflow:hidden; opacity:1; line-height:1; z-index:2;
    text-align:initial; forced-color-adjust:none; transform-origin:0 0; }
  .textLayer span, .textLayer br{ color:transparent; position:absolute; white-space:pre;
    cursor:text; transform-origin:0% 0%; }
  .textLayer ::selection{ background:color-mix(in srgb, var(--accent) 45%, transparent); }
  .textLayer .endOfContent{ display:block; position:absolute; inset:100% 0 0; z-index:-1; cursor:default; user-select:none; }

  /* ---- abrir muchos PDFs de una vez: la lista de lo que va a entrar ----
     El diálogo es el de siempre (.mbox), un poco más ancho porque acá hay que leer nombres
     de archivo enteros. La lista scrollea sola: con veinte archivos el cuadro no puede
     crecer hasta taparle la ventana, y los botones tienen que quedar a la vista. */
  .lotbox{ width:min(560px, 94vw); max-width:none; }
  .lotbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
  /* Sin archivos en la lista no hay nada que ordenar ni que listar: los dos se retiran.
     El [hidden] necesita la regla porque el display de la caja le gana al del navegador. */
  .lotbar[hidden], .lotlist[hidden]{ display:none; }
  .lotlab{ font-size:12px; color:var(--muted); }
  .lotcnt{ margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .lotlist{ max-height:min(44vh, 320px); overflow:auto; border:1px solid var(--line2);
    border-radius:12px; background:var(--panel2); padding:4px; }
  /* Cada renglón: el número de orden (que es lo que va a mandar al unir), el nombre —que
     se recorta por el final, no por el medio— y el peso. La ✕ saca ese archivo del lote y
     aparece igual que la de las solapas: cuando hace falta. */
  .lotit{ display:flex; align-items:center; gap:9px; padding:6px 7px; border-radius:9px;
    font-size:12.5px; transition:background-color .14s ease; }
  .lotit:hover{ background:var(--surface); }
  .lotit .n{ flex:none; min-width:19px; height:19px; padding:0 4px; border-radius:99px;
    display:grid; place-items:center; font-size:10.5px; font-variant-numeric:tabular-nums;
    background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); font-weight:640; }
  .lotit .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lotit .sz{ flex:none; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
  .lotit .x{ flex:none; display:inline-grid; place-items:center; width:20px; height:20px;
    border:0; background:transparent; border-radius:6px; color:var(--muted); cursor:pointer;
    opacity:0; transition:opacity .14s ease, background-color .14s ease, color .14s ease; }
  .lotit:hover .x, .lotit .x:focus-visible{ opacity:1; }
  .lotit .x:hover{ background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
  /* Cuatro botones no siempre entran en un renglón: que bajen en vez de desbordar. */
  .lotrow{ margin-top:16px; flex-wrap:wrap; }
  /* Un .btn común apagado no se ve apagado (sólo el primario se atenúa) y encima se
     ilumina al pasarle por encima: acá hay uno que se apaga —unir uno solo es abrirlo—
     y tiene que verse que no se puede apretar. */
  .lotrow .btn:disabled{ opacity:.42; cursor:default; }
  .lotrow .btn:disabled:hover{ border-color:var(--line2); box-shadow:none; }

  /* La biblioteca de fuentes reusa el renglón del lote —insignia, nombre, peso y la ✕—
     y le agrega el segundo renglón que dice de dónde salió cada una: con veinte fuentes
     guardadas, "de un PDF que abriste" o "subset" es lo que las distingue. */
  .lotit .nm .de{ display:block; font-size:11px; color:var(--muted); }
  .lotit .nm:has(.de){ line-height:1.35; }

  /* ---- rueda de color: matiz alrededor, saturación hacia afuera, brillo aparte ---- */
  .cbox{ width:min(520px, 94vw); }
  .crow{ display:flex; gap:20px; align-items:flex-start; margin-top:6px; }
  .rueda{ position:relative; width:210px; height:210px; flex:none; border-radius:50%; cursor:crosshair;
    touch-action:none; box-shadow:var(--sh-2), inset 0 0 0 1px color-mix(in srgb, var(--sombra) 18%, transparent);
    background:
      radial-gradient(circle closest-side, #fff, rgba(255,255,255,0) 100%),
      conic-gradient(from 90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
  .rueda::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:#000; opacity:var(--oscuro, 0); }
  .rueda .mano{ position:absolute; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
    border:2.5px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.4);
    pointer-events:none; z-index:2; }
  .ccol{ flex:1; min-width:0; }
  .muestra{ height:64px; border-radius:14px; border:1px solid var(--line2);
    background:linear-gradient(135deg, var(--c1,#5a5cf0), var(--c2,#9a54f5)); box-shadow:var(--sh-1); }
  #cHex{ font-variant-numeric:tabular-nums; text-transform:uppercase; }
  @media (max-width:560px){ .crow{ flex-direction:column; align-items:center; } .ccol{ width:100%; } }

  /* velo para arrastrar PDFs sobre toda la ventana */
  .dropveil{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent) 16%, color-mix(in srgb, var(--bg) 72%, transparent));
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .dropveil.show{ display:flex; }
  .dropveil .dv-inner{ pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:34px 54px; border-radius:20px; border:2px dashed var(--accent); background:var(--surface);
    box-shadow:var(--shadow); color:var(--txt); }
  .dropveil strong{ font-size:17px; }
  .dropveil span{ font-size:13px; color:var(--muted); }

  /* =====================================================     PASADA 2026 — profundidad en capas, controles propios y ritmo tipográfico.
     Va al final a propósito: solo afina lo de arriba, no lo reemplaza.
     ============================================================ */
  :root{
    --r-xs:8px; --r-sm:10px; --r-md:13px; --r-lg:17px; --r-xl:22px;
    --ease-out:cubic-bezier(.22,.75,.25,1);
    --ease-in-out:cubic-bezier(.6,0,.25,1);
    /* dos sombras: una ambiental amplia y difusa, y una de contacto bien corta */
    --sh-1:0 .5px 1px color-mix(in srgb, var(--sombra) 42%, transparent),
           0 2px 6px -2px color-mix(in srgb, var(--sombra) 30%, transparent);
    --sh-2:0 1px 2px color-mix(in srgb, var(--sombra) 34%, transparent),
           0 10px 26px -12px color-mix(in srgb, var(--sombra) 46%, transparent);
    --sh-3:0 2px 4px color-mix(in srgb, var(--sombra) 26%, transparent),
           0 28px 60px -22px color-mix(in srgb, var(--sombra) 60%, transparent);
  }
  :root[data-theme="light"]{
    --sombra:#1b2145; --brillo:rgba(255,255,255,.9);
    --track:rgba(18,22,45,.13);
    --line:rgba(18,22,45,.075); --line2:rgba(18,22,45,.13);
    --panel2:#f2f4fa; --muted:#5b6479;
  }
  :root[data-theme="dark"]{
    --sombra:#000; --brillo:rgba(255,255,255,.11);
    --track:rgba(255,255,255,.15);
    --line:rgba(255,255,255,.105); --line2:rgba(255,255,255,.19);
  }

  /* --- tipografía --- */
  body{
    font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    letter-spacing:-.004em;
    font-synthesis-weight:none;
  }
  h1,h2,h3,b,strong,.doctab .nm,.optcol-head h3{ letter-spacing:-.017em; }
  .field, .hint, .inforow, .selinfo, .pgsize, .valpill, .dd-btn, .n{ font-variant-numeric:tabular-nums; }
  .hint{ text-wrap:pretty; line-height:1.5; }
  .field > span:first-child{ font-weight:520; letter-spacing:-.002em; }

  /* --- fondo: aurora más suave + un grano finísimo que le saca el plano digital --- */
  body{
    background:
      radial-gradient(1300px 820px at 4% -14%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
      radial-gradient(1180px 780px at 106% -8%, color-mix(in srgb, var(--accent2) 11%, transparent), transparent 58%),
      radial-gradient(900px 620px at 50% 118%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
      var(--bg);
  }
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  }
  .app{ position:relative; z-index:1; }

  /* --- superficies: hairline arriba para que la luz venga de arriba --- */
  .optcol, .savebar, .pagebar, .docfoot, .toast, .dd-menu, .ctxmenu, .tablist{
    box-shadow:var(--sh-2), inset 0 1px 0 var(--brillo);
  }
  .optcol{ border-radius:var(--r-xl); }
  .optcol-head{ padding:14px 16px 13px; }
  .optcol-head h3{ font-size:15px; font-weight:660; }
  .optcol-body{ padding:16px; }
  .previewWrap{ box-shadow:var(--sh-3); }

  /* --- botones: un pelín más redondos y con mejor peso --- */
  .btn{ border-radius:var(--r-md); font-weight:560; }
  .btn:hover{ box-shadow:var(--sh-1); }
  .btn.primary{ box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.22); }
  .btn.primary:hover, .btn.primary:active{ box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.22); }
  .iconbtn{ border-radius:var(--r-md); }

  /* --- foco visible y consistente (teclado) --- */
  :where(button,a,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
  }
  .btn:focus-visible, .iconbtn:focus-visible, .dd-btn:focus-visible{ outline-offset:3px; }

  /* --- deslizadores propios: la barra se llena hasta donde estás --- */
  input[type=range]{
    -webkit-appearance:none; appearance:none; width:100%; height:20px;
    background:transparent; cursor:pointer; margin:2px 0;
  }
  input[type=range]::-webkit-slider-runnable-track{
    height:6px; border-radius:99px;
    background:linear-gradient(90deg, var(--accent) 0 var(--p,50%), var(--track) var(--p,50%) 100%);
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:17px; height:17px; margin-top:-5.5px; border-radius:50%;
    background:#fff; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow:0 1px 3px color-mix(in srgb, var(--sombra) 45%, transparent), 0 0 0 0 var(--ring);
    transition:box-shadow .16s var(--ease-out);
  }
  input[type=range]:hover::-webkit-slider-thumb{ box-shadow:0 1px 3px color-mix(in srgb, var(--sombra) 45%, transparent), 0 0 0 5px var(--ring); }
  input[type=range]:active::-webkit-slider-thumb{ box-shadow:0 1px 3px color-mix(in srgb, var(--sombra) 45%, transparent), 0 0 0 8px var(--ring); }
  input[type=range]::-moz-range-track{ height:6px; border-radius:99px; background:var(--track); }
  input[type=range]::-moz-range-progress{ height:6px; border-radius:99px; background:var(--accent); }
  input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff;
    border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); }

  /* --- casillas y radios propios (nada de controles del sistema) --- */
  .switch input[type=checkbox], .level input[type=radio], .level input[type=checkbox]{
    -webkit-appearance:none; appearance:none; position:relative; flex:none;
    width:18px; height:18px; margin:0; cursor:pointer;
    border:1.5px solid var(--line2); background:var(--panel2);
    border-radius:6px; transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out);
  }
  .level input[type=radio]{ border-radius:50%; }
  .switch input[type=checkbox]:checked, .level input:checked{
    background:linear-gradient(135deg, var(--accent), var(--accent2)); border-color:transparent;
  }
  .switch input[type=checkbox]:checked::after{
    content:""; position:absolute; left:5.5px; top:2px; width:4px; height:9px;
    border:solid var(--sobre,#fff); border-width:0 2px 2px 0; transform:rotate(43deg);
  }
  .level input[type=radio]:checked::after{
    content:""; position:absolute; inset:4px; border-radius:50%; background:var(--sobre,#fff);
  }
  .switch input[type=checkbox]:focus-visible, .level input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .switch{ gap:9px; }

  /* --- campos de texto --- */
  .textin, input[type=number]{ border-radius:var(--r-sm); background:var(--panel2);
    border:1px solid var(--line2); transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background-color .16s var(--ease-out); }
  .textin:hover, input[type=number]:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line2)); }
  .textin:focus, input[type=number]:focus{ background:var(--surface); box-shadow:0 0 0 3.5px var(--ring); }

  /* --- píldora de valor: chapita, no solo texto --- */
  .valpill{ font-size:12.5px; font-weight:620; padding:1.5px 8px; border-radius:99px;
    background:color-mix(in srgb, var(--accent) 11%, transparent); color:var(--txt); }

  /* --- miniaturas --- */
  .tcard{ border-radius:var(--r-md); }
  .tcard .box{ border-radius:9px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sombra) 10%, transparent); }
  .tcard .n{ font-weight:560; }

  /* ---- miniatura activa: anillo con halo y número en píldora ----
     Nada de bordes duros: la hoja se marca con un anillo y un halo suave, y el número
     de la página que estás viendo pasa a ser una chapita llena. */
  /* Acá las tarjetas van sin fondo ni borde, pero conservan las mismas transiciones: la
     lista tiene que nombrar transform y height o al reordenar y al plegar no se ve nada. */
  #viewDocumento .tcard{ position:relative; border-color:transparent;
    background-color:transparent; background-image:linear-gradient(var(--luz),var(--luz));
    --luz:rgba(0,0,0,0); box-shadow:none;
    transition:background-color .2s var(--ease-out), border-color .18s ease,
               box-shadow .26s var(--ease-out), --luz .2s ease,
               transform .23s cubic-bezier(.4,0,.2,1), height .23s cubic-bezier(.4,0,.2,1),
               opacity .18s ease, padding .23s, margin .23s; }
  #viewDocumento .tcard .box{ transition:box-shadow .22s var(--ease-out); }
  #viewDocumento .tcard{ text-align:center; }
  #viewDocumento .tcard .n{ display:inline-block; padding:1.5px 9px; border-radius:99px; line-height:1.5;
    transition:background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); }

  #viewDocumento .tcard:hover{ border-color:transparent;
    --luz:color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent); }
  #viewDocumento .tcard:hover .box{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent), var(--sh-1); }

  /* seleccionadas (varias a la vez) */
  #viewDocumento .tcard.sel{ background:color-mix(in srgb, var(--accent) 12%, transparent);
    border-color:transparent; box-shadow:none; }
  #viewDocumento .tcard.sel .box{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent), var(--sh-1); }

  /* la que estás viendo manda: anillo nítido + halo */
  #viewDocumento .tcard.cur .box{ outline:0;
    box-shadow:0 0 0 2px var(--accent),
               0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent),
               var(--sh-2); }
  #viewDocumento .tcard.cur .n{ color:var(--sobre,#fff); background:linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow:0 4px 12px -4px color-mix(in srgb, var(--accent) 75%, transparent); font-weight:640; }

  /* tilde solo cuando hay varias marcadas: en una sola sobraría */
  #viewDocumento .tcard .tick{ position:absolute; top:10px; right:10px; width:19px; height:19px; border-radius:50%;
    display:grid; place-items:center; color:var(--sobre,#fff); z-index:4; pointer-events:none;
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow:0 2px 7px -1px color-mix(in srgb, var(--sombra) 55%, transparent), 0 0 0 2px var(--surface);
    opacity:0; transform:scale(.4); transition:opacity .16s ease, transform .24s var(--ease-out); }
  #viewDocumento .tcard .tick svg{ width:11px; height:11px; }
  #docThumbs.multi .tcard.sel .tick{ opacity:1; transform:none; }

  /* La página que sacaste de la herramienta abierta. Va sobre la .box y con el prefijo de
     la capa: la regla vieja apuntaba a un canvas que la miniatura no tiene (es un <img>),
     y sin el prefijo la perdía contra el outline:0 de la página actual. */
  /* La tinta va fija y oscura, no var(--txt): esto se pinta sobre la miniatura, que es
     blanca en los dos temas, y en oscuro --txt es casi blanco —papel blanco sobre papel
     blanco—. Es el mismo criterio que ya toma la previa apagada del sello. Y el apagado
     va sobre la imagen y no sobre la .box, que es la que dibuja los anillos de estado y
     la que contiene la píldora de girar/extraer/quitar. */
  #viewDocumento .tcard.sinprevia .box{ outline:2px dashed rgba(42,48,68,.5); outline-offset:-3px; }
  #viewDocumento .tcard.sinprevia .box img{ opacity:.7; }
  /* Lo que está en el portapapeles se marca con una chapita en la esquina de adelante, del
     mismo palo que el tilde de la esquina de atrás. No puede ser un anillo: los anillos de
     la .box ya son "seleccionada" y "la que estás viendo", y una hoja copiada puede ser las
     tres cosas a la vez. Va en gris y no en acento, que es el color de la selección. */
  #viewDocumento .tcard .clipmk{ position:absolute; top:10px; left:10px; width:19px; height:19px;
    border-radius:50%; display:grid; place-items:center; z-index:4; pointer-events:none;
    color:#fff; background:rgba(19,24,40,.8);
    box-shadow:0 2px 7px -1px rgba(0,0,0,.4), 0 0 0 2px var(--surface);
    opacity:0; transform:scale(.4); transition:opacity .16s ease, transform .24s var(--ease-out); }
  #viewDocumento .tcard .clipmk svg{ width:11px; height:11px; display:block; }
  #viewDocumento .tcard.copiada .clipmk{ opacity:1; transform:none; }


  /* --- solapas de archivo --- */
  .doctab{ border-radius:var(--r-md); }
  .tabrow{ border-radius:var(--r-md); }

  /* --- la barra de herramientas y las islas comparten el mismo vidrio --- */
  .savebar, .pagebar{ border-radius:var(--r-lg); }

  /* --- el pie, más liviano --- */
  .docfoot{ border-radius:var(--r-lg); }

  /* --- menús --- */
  .dd-menu, .ctxmenu, .tablist{ border-radius:var(--r-lg); padding:6px; }
  .dd-item, .ctx-item{ border-radius:var(--r-sm); padding:8px 11px; }


  /* ---- Editar texto ---- */
  .editLayer{ position:absolute; left:0; top:0; z-index:3; pointer-events:none; }
  .previewWrap:not(.editando) > .editLayer{ display:none; }
  .previewWrap.editando .textLayer{ pointer-events:none; }        /* que los clics lleguen a las cajas */
  .previewWrap.editando .editLayer{ pointer-events:auto; }
  .edbox{ position:absolute; cursor:text; border-radius:2px;
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background:color-mix(in srgb, var(--accent) 8%, transparent);
    transition:background .12s ease; }
  .edbox:hover{ background:color-mix(in srgb, var(--accent) 20%, transparent); }
  .edbox.sel{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 26%, transparent);
    box-shadow:0 0 0 2px var(--ring); }
  /* las imágenes también se pueden agarrar */
  /* los dibujos: mismo trato que las imágenes, con su propio color para distinguirlos */
  .edvec{ position:absolute; cursor:move; border-radius:3px;
          border:1px dashed color-mix(in srgb, var(--accent) 55%, #7aa2ff); }
  .edvec:hover{ background:color-mix(in srgb, #7aa2ff 16%, transparent); }
  .edvec.sel{ border-style:solid; border-color:#7aa2ff;
              background:color-mix(in srgb, #7aa2ff 18%, transparent); }
  /* El fondo de la hoja: es un elemento como cualquier otro —se ordena en la pila, se
     saca, se duplica— pero su caja es la hoja entera. Si recibiera el clic no quedaría
     blanco donde soltar la selección ni donde marcar un rectángulo, y cada clic al aire
     lo agarraría a él. Entonces no recibe el clic y tampoco se dibuja solo: se llega
     desde la lista de capas, y ahí sí se resalta —al pasar el mouse y al agarrarlo—. */
  .edvec.fondo{ pointer-events:none; border-color:transparent; background:none; }
  .edvec.fondo.sel{ border-color:#7aa2ff;
                    background:color-mix(in srgb, #7aa2ff 12%, transparent); }
  .edimg{ position:absolute; cursor:move; border-radius:3px;
    border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    background:color-mix(in srgb, var(--accent) 5%, transparent);
    transition:background .12s ease, border-color .12s ease; }
  .edimg:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
  .edimg.sel{ border-style:solid; border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 20%, transparent); box-shadow:0 0 0 2px var(--ring); }
  .edbox{ cursor:move; }
  #dDirectTools{ display:none; width:100%; min-width:0; flex:none; position:relative; z-index:20; container-type:inline-size;
    border:1px solid var(--line); border-radius:var(--r-lg); background:var(--glass);
    box-shadow:var(--sh-2), inset 0 1px 0 var(--brillo);
    -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
  .pro-editor #dDirectTools{ display:block; }
  .font-needed{ padding:10px 12px; border-top:1px solid var(--line); font-size:13px; }
  .font-needed[hidden]{ display:none; }
  .font-needed p{ margin:0 0 8px; overflow-wrap:anywhere; }
  .font-needed .row{ flex-wrap:wrap; }
  .font-needed small{ display:block; margin-top:8px; color:var(--muted); }
  #dDirectTools select{ max-width:205px; padding:5px 7px; border:1px solid var(--line); border-radius:7px;
    background:var(--panel); color:var(--txt); }
  #dDirectTools .btn{ padding:5px 8px; font-size:12px; }
  #dDirectTools label{ display:flex; align-items:center; gap:5px; font-size:12px; }
  #dDirectEstado:not(.error){ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #dDirectEstado.error{ position:absolute; top:calc(100% + 6px); left:8px; right:8px; padding:10px 12px;
    color:var(--danger); background:var(--surface); border:1px solid var(--danger); border-radius:var(--r-md);
    box-shadow:var(--sh-2); font-size:12px; overflow-wrap:anywhere; }
  .direct-layer{ position:absolute; left:0; top:0; z-index:8; transform-origin:0 0; pointer-events:none; }
  .direct-box{ position:absolute; pointer-events:auto; overflow:hidden;
    outline:2px solid var(--accent); border-radius:2px; background:#fff;
    box-shadow:0 0 0 4px #ffffffb3; }
  .direct-page{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .direct-input{ display:block; box-sizing:border-box; width:100%; min-width:100px; margin:0; padding:0;
    border:0; outline:none; border-radius:2px; resize:none; overflow:hidden;
    background:transparent; color:#111; caret-color:var(--accent); line-height:1.2; white-space:pre; overflow-wrap:normal; }
  .direct-new .direct-box{ overflow:visible; background:transparent; outline:none; box-shadow:none; }
  .direct-new .direct-input{ min-width:2px; background:transparent; outline:none; border-radius:0; box-shadow:none; }
  #dDirectToggle.on{ background:color-mix(in srgb,var(--accent) 15%,var(--surface)); border-color:var(--accent); }
  .direct-edit #docEditLayer{ cursor:text; }
  .edscan{ position:absolute; box-sizing:border-box; border:1px dashed #16a085;
    background:transparent; cursor:move; touch-action:none; }
  .edscan:hover, .edscan.sel{ background:#16a08518; border-style:solid; }
  .edscan.moving{ cursor:grabbing; }
  .scan-drag-image, .scan-drag-mask{ position:absolute; pointer-events:none; }
  #docEditLayer .scan-background{ pointer-events:none; border-color:transparent; background:none; }
  #docEditLayer .edlocked{ pointer-events:none; border-color:transparent; background:none; box-shadow:none; }
  #docEditLayer .scan-hidden{ display:none; }
  .direct-scan-tools[hidden]{ display:none; }
  #dDirectScanEstado{ display:block; font-size:12px; color:var(--muted); line-height:1.5; overflow-wrap:anywhere; }
  #dDirectScanEstado:empty{ display:none; }

  .font-picker{ position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-width:0; }
  .font-picker-native{ position:absolute!important; width:1px!important; height:1px!important; min-width:0!important;
    padding:0!important; opacity:0; clip-path:inset(50%); pointer-events:none; }
  .font-picker-trigger{ position:relative; flex:1; min-width:110px; min-height:34px; display:flex; align-items:center;
    padding:6px 25px 6px 10px; border:1px solid var(--line2); border-radius:9px; text-align:left;
    color:var(--txt); background:var(--surface); cursor:pointer; font:inherit; }
  .font-picker-trigger:hover,.font-picker-trigger[aria-expanded=true]{ border-color:var(--accent); background:var(--panel2); }
  .font-picker-trigger:focus-visible,.font-picker-search:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .font-picker-trigger:disabled{ opacity:.6; cursor:wait; }
  .font-picker-name{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:1.2; font-synthesis:none; }
  .font-picker-details{ display:none; }
  .font-picker-chevron{ position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--muted); }
  .font-picker .font-style{ flex:none; width:30px; min-width:30px; height:34px; padding:0; font-size:14px; }
  .font-picker-style{ max-width:110px; min-width:65px; width:auto; font-size:12px; }
  .font-picker .font-style.on{ background:var(--accent); color:white; border-color:var(--accent); }
  .font-picker .font-style:disabled{ opacity:.35; cursor:not-allowed; }
  .font-picker-popover{ position:fixed; z-index:450; box-sizing:border-box; display:flex; flex-direction:column;
    padding:7px; border:1px solid var(--line2); border-radius:13px; background:var(--surface); color:var(--txt);
    box-shadow:var(--shadow); font-family:inherit; }
  .font-picker-search{ box-sizing:border-box; width:100%; flex:none; margin:0 0 5px; padding:8px;
    border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--txt); font:inherit; font-size:13px; }
  .font-picker-search::placeholder{ color:var(--muted); }
  .font-picker-list{ min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  .font-picker-option{ position:relative; display:flex; align-items:center;
    padding:5px 9px; margin:1px 0; border:1px solid transparent; border-radius:6px; cursor:pointer; }
  .font-picker-option.active{ background:var(--panel2); border-color:var(--line2); }
  .font-picker-option[aria-selected=true]{ background:var(--panel2); border-color:var(--accent); }
  .font-picker-sample{ min-width:0; font-size:16px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-synthesis:none; }
  .font-picker-count{ flex:none; padding:5px 5px 1px; color:var(--muted); font-size:10px; line-height:1.4; border-top:1px solid var(--line); }
  .font-picker-empty{ padding:24px 12px; text-align:center; color:var(--muted); font-size:13px; }
  .font-style-status:empty{ display:none; }
  .font-style-status{ width:100%; font-size:11px; color:var(--muted); }
  #textSuggestions{ position:fixed; z-index:300; width:320px; max-width:calc(100vw - 16px);
    background:var(--surface); color:var(--txt); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:5px; }
  #textSuggestions small{ display:block; color:var(--muted); font-size:10px; padding:5px; }
  #textSuggestions [role=option]{ padding:9px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:6px; }
  #textSuggestions [role=option]:hover,#textSuggestions [aria-selected=true]{ background:var(--panel2); }
  #fontModal .mbox{ width:min(760px,94vw); }
  .font-filters{ display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
  .font-filters input{ flex:1; min-width:180px; }
  .font-filters input,.font-filters select,.font-actions select{ padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--txt); }
  #fbList{ display:block; max-height:50vh; overflow:auto; }
  .font-card{ padding:13px; border:1px solid var(--line); border-radius:12px; margin:8px 0; }
  .font-heading,.font-actions,.font-license{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .font-heading{ justify-content:space-between; }
  .font-heading span,.font-license{ font-size:11px; color:var(--muted); }
  .font-sample{ font-size:13px; color:var(--muted); margin:12px 0; overflow:hidden; min-height:30px; }
  .font-sample.ready{ font-size:23px; color:var(--txt); }
  .font-actions select{ flex:1; min-width:120px; max-width:100%; }
  .font-license{ margin-top:6px; }
  .font-license-text{ white-space:pre-wrap; font-size:11px; max-height:180px; overflow:auto; }
  #fbStatus{ font-size:12px; min-height:18px; }
  .direct-edit .edbox:not(.sel), .direct-edit .edimg:not(.sel), .direct-edit .edvec:not(.sel){ border-color:transparent; background:transparent; }
  .direct-edit .edbox:hover, .direct-edit .edimg:hover, .direct-edit .edvec:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
  /* las guías del imán: se dibujan sólo mientras se arrastra */
  .edguia{ position:absolute; pointer-events:none; z-index:5;
           background:repeating-linear-gradient(var(--dir), var(--accent) 0 5px, transparent 5px 9px); }
  .edguia.v{ width:1px; --dir:to bottom; }
  .edguia.h{ height:1px; --dir:to right; }

  /* ---- Rellenar: los recuadros donde se escribe ----
     La capa tapa la hoja entera y recibe el puntero: el hueco aparece donde se hace clic,
     no hay nada dibujado que lo anuncie de antemano, y el cursor de texto sobre toda la
     hoja es justamente lo que dice que se puede escribir en cualquier hueco. */
  #dRellOv{ position:absolute; inset:0; z-index:5; cursor:text; border-radius:inherit; }
  .previewWrap.rellenando .textLayer{ pointer-events:none; }   /* no se selecciona la hoja */
  /* El hueco que un clic tomaría: punteado y casi transparente, porque lo que importa es
     ver qué queda adentro —la raya, el borde de la casilla, el aire entre dos palabras—. */
  .rhueco{ position:absolute; pointer-events:none; border-radius:2px;
           border:1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
           background:color-mix(in srgb, var(--accent) 9%, transparent); }
  /* El cursor cuenta qué va a pasar: sobre un dato que no está en foco, el gesto lo MUEVE
     —y un clic entra a escribir—; adentro del que está en foco manda el texto. */
  .rcampo{ position:absolute; border-radius:2px; cursor:move;
           border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
           background:color-mix(in srgb, var(--accent) 7%, transparent);
           transition:border-color .12s ease; }
  .rcampo:hover{ border-color:var(--accent); }
  .rcampo.sel{ border-color:var(--accent); box-shadow:0 0 0 2px var(--ring); }
  /* No entra: se dejó de achicar en el piso de 5 pt y el dato se sale del hueco. Se avisa
     y no se corrige: abreviar o dejarlo salir lo decide el que rellena. */
  .rcampo.aprieta{ border-color:var(--danger);
                   background:color-mix(in srgb, var(--danger) 10%, transparent); }
  /* El renglón: la misma fuente y el mismo cuerpo con los que va a entrar al PDF, apoyado
     en su base. No es un campo de texto con su propio alto y su propio centrado: es el
     texto, puesto donde va a quedar. */
  .rcampo .rin{ position:absolute; display:block; white-space:pre; outline:none;
                min-width:1px; caret-color:var(--accent); cursor:move;
                font-family:var(--ins-font, Helvetica), Helvetica, Arial, sans-serif; }
  .rcampo .rin:focus{ cursor:text; }
  /* ---- las manijas del hueco ----
     Aparecen sobre el recuadro agarrado y nada más: ocho cuadraditos no pueden estar sobre
     cada dato de un formulario lleno, o la hoja no se ve. Van montadas sobre el borde
     —la mitad adentro, la mitad afuera— así no le comen lugar al renglón que se está
     escribiendo, y no reciben el cursor de texto sino el de estirar. */
  .rcampo .rman{ display:none; position:absolute; width:9px; height:9px; border-radius:2px;
                 background:var(--panel); border:1.5px solid var(--accent); box-sizing:border-box;
                 touch-action:none; z-index:2; }
  .rcampo.sel .rman{ display:block; }
  .rcampo .rman.nw{ left:-5px;  top:-5px;    cursor:nwse-resize; }
  .rcampo .rman.ne{ right:-5px; top:-5px;    cursor:nesw-resize; }
  .rcampo .rman.se{ right:-5px; bottom:-5px; cursor:nwse-resize; }
  .rcampo .rman.sw{ left:-5px;  bottom:-5px; cursor:nesw-resize; }
  .rcampo .rman.n{ left:50%; top:-5px;    margin-left:-4.5px; cursor:ns-resize; }
  .rcampo .rman.s{ left:50%; bottom:-5px; margin-left:-4.5px; cursor:ns-resize; }
  .rcampo .rman.w{ top:50%; left:-5px;    margin-top:-4.5px;  cursor:ew-resize; }
  .rcampo .rman.e{ top:50%; right:-5px;   margin-top:-4.5px;  cursor:ew-resize; }
  /* Un hueco chico —la casilla de un «marque con una X»— mide menos que sus propias manijas:
     ahí queda sólo la de la esquina, corrida para afuera, y el hueco se sigue viendo. */
  .rcampo.chico .rman{ display:none; }
  .rcampo.chico.sel .rman.se{ display:block; right:-8px; bottom:-8px; }
  /* ---- lo que el PDF deja hacer: campos, botones y links ----
     Acá no hay nada que encontrar: el lugar y el tamaño de cada recuadro los dice el PDF.
     Por eso se marcan solos al abrir el documento —como los marca Preview— y la capa NO
     recibe el puntero: lo reciben los recuadros, así el resto de la hoja se sigue
     arrastrando y seleccionando como siempre. La excepción es crear un campo, que es la
     única vez que hay que poder apuntar al aire de la hoja. */
  #dFormOv{ position:absolute; inset:0; z-index:5; border-radius:inherit; pointer-events:none; }
  #dFormOv.creando{ pointer-events:auto; cursor:crosshair; }
  /* Sólo mientras se crea un campo: ahí la hoja entera es el lienzo del recuadro. */
  .previewWrap.formulando .textLayer{ pointer-events:none; }
  .fcampo{ position:absolute; border-radius:2px; pointer-events:auto; cursor:text;
           border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
           background:color-mix(in srgb, var(--accent) 7%, transparent);
           transition:border-color .12s ease, box-shadow .12s ease; }
  .fcampo:hover{ border-color:var(--accent); }
  .fcampo.marca, .fcampo.eleccion, .fcampo.boton{ cursor:pointer; }
  .fcampo.redondo{ border-radius:50%; }
  /* Mientras se crean campos, los que ya están se ven pero no se tocan: el gesto de la
     hoja es arrastrar el recuadro del que viene, y un clic que abriera un campo justo
     encima de donde ibas a dibujar sería una trampa. */
  .fcampo.mirando{ pointer-events:none; cursor:default;
                   border-style:dashed; background:transparent; }
  /* Un campo que el formulario marcó como de sólo lectura, o una firma: se ve que está, y
     se ve que no se toca. */
  .fcampo.trabado{ cursor:default; border-style:dashed;
                   border-color:color-mix(in srgb, var(--muted) 45%, transparent);
                   background:color-mix(in srgb, var(--muted) 6%, transparent); }
  /* El renglón abierto para escribir. Va opaco a propósito: abajo está el valor viejo
     dibujado en la hoja, y dejarlo asomar sería mostrar dos datos encima del otro. */
  .fcampo.pend{ background:color-mix(in srgb, var(--paper) 92%, var(--accent));
                border-color:var(--accent); box-shadow:0 0 0 2px var(--ring); }
  /* No entra: el formulario le fijó el cuerpo y el dato es más largo que el recuadro. */
  .fcampo.aprieta{ border-color:var(--danger);
                   background:color-mix(in srgb, var(--paper) 88%, var(--danger)); }
  .fcampo .fin{ position:absolute; display:block; white-space:pre; outline:none;
                min-width:1px; caret-color:var(--accent); color:#111;
                font-family:Helvetica, Arial, sans-serif; }
  /* El desplegable del navegador, puesto justo encima del campo y transparente: abajo se
     sigue viendo el dibujo que el PDF ya tiene —el valor de verdad— y elegir es el control
     de siempre, con su teclado y su lista. */
  .fcampo .fpick{ position:absolute; inset:0; width:100%; height:100%; opacity:0;
                  border:0; padding:0; margin:0; cursor:pointer; appearance:none; }
  /* Un link no se pinta: un PDF lleno de recuadros de colores no se puede leer. Se muestra
     al pasar por arriba, que es cuando uno pregunta "¿esto es un link?". Y la transición es
     de lo que se pinta y no de dónde está: un `transition:.12s` pelado también animaba
     left/top/width/height, y con eso el link salía nadando detrás de la hoja cada vez que
     el zoom la estiraba (ver dFormReencajar). */
  .flink{ position:absolute; pointer-events:auto; cursor:pointer; border-radius:2px;
          border:1px solid transparent;
          transition:border-color .12s ease, background-color .12s ease; }
  .flink:hover{ border-color:var(--accent);
                background:color-mix(in srgb, var(--accent) 10%, transparent); }
  /* El recuadro que se está arrastrando para crear un campo. */
  .fdib{ position:absolute; pointer-events:none; border-radius:2px;
         border:1px dashed var(--accent);
         background:color-mix(in srgb, var(--accent) 12%, transparent); }

  /* la lista de campos creados: el nombre, el tipo y la cruz de sacarlo */
  #dFormLista{ gap:6px; max-height:min(38vh, 420px); }
  .fli{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--r-sm, 9px);
        background:var(--panel2); border:1px solid transparent; }
  .fli .fnom{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .fli .fnom b{ font-size:12.5px; font-weight:600; max-width:100%; overflow:hidden;
                text-overflow:ellipsis; white-space:nowrap; }
  .fli .fnom span{ font-size:11px; color:var(--muted); }
  .fli .x{ flex:none; cursor:pointer; opacity:.55; padding:0 2px; font-size:15px; line-height:1; }
  .fli .x:hover{ opacity:1; color:var(--danger); }

  /* botón sólo ícono: cuadrado, sin el ancho que le da el texto */
  .btn.small.iconbtn{ padding:0; width:30px; min-width:30px; height:28px;
                      display:inline-flex; align-items:center; justify-content:center; }
  /* qué hay agarrado arriba, y abajo lo que se puede hacer con eso: en el ancho del
     panel los cuatro no entran en una línea y quedaba partido de cualquier manera */
  #dEdElem{ flex-wrap:wrap; }
  #dEdElem .corte{ flex:1 0 100%; height:0; }
  #dEdElem #dEdBorrar{ margin-left:auto; }
  .edatajo{ margin-top:10px; opacity:.72; font-size:11.5px; line-height:1.6; }
  /* ---- las capas de la hoja ----
     La pila puesta en vertical, que es la dirección donde hay lugar en una columna de
     340 px: arriba lo que está adelante, como en cualquier lista de capas. Cada renglón
     es un elemento de la hoja —el mismo que se agarra con el mouse— así que se marca
     igual que allá, y se arrastra como las solapas y las miniaturas: con la misma raya
     acostada diciendo dónde va a caer. */
  .edcapas{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  .capascab{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
  .capascab .tit{ font-size:11px; font-weight:700; letter-spacing:.04em;
                  text-transform:uppercase; color:var(--muted); }
  .capascab .n{ margin-left:auto; font-size:11.5px; color:var(--muted);
                font-variant-numeric:tabular-nums; }
  .capasfil{ margin:0 0 8px; font-size:12px; }
  .caparows{ position:relative; max-height:min(44vh, 320px); overflow-y:auto; overflow-x:hidden;
             display:flex; flex-direction:column; gap:2px; padding:3px;
             border:1px solid var(--line2); border-radius:12px; background:var(--panel2); }
  .caparow{ display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:9px;
            border:1px solid transparent; cursor:grab; user-select:none; }
  .caparow:hover{ background:var(--surface); }
  .caparow.sel{ border-color:var(--accent);
                background:color-mix(in srgb, var(--accent) 14%, transparent); }
  .caparow .ico{ flex:none; display:inline-grid; place-items:center; width:17px; height:17px;
                 color:var(--muted); }
  .caparow.sel .ico{ color:var(--accent); }
  .caparow .tx{ flex:1; min-width:0; font-size:12.5px; color:var(--txt);
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* lo que no se puede cambiar de capa sigue en la lista —el orden que muestra tiene que
     ser el de la hoja, con todo adentro— pero se ve que no se arrastra */
  .caparow.fija{ cursor:default; }
  .caparow.fija .tx{ color:var(--muted); }
  .caparow .capa-lock{ flex:none; width:28px; height:28px; padding:5px; border-radius:6px; color:var(--muted); }
  .caparow .capa-lock[aria-pressed="true"]{ color:var(--accent); background:var(--panel2); }
  .caparow .capa-lock:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .caparow.dragging{ opacity:.45; }
  .capashint{ margin-top:8px; }
  /* mientras se relee la hoja después de un cambio: la lista de antes, apagada */
  .edcapas.releyendo{ opacity:.5; pointer-events:none; }
  /* el elemento que está señalando el renglón de abajo del mouse: el mismo resaltado que
     al pasar por encima en la hoja, para que los dos se lean como la misma cosa */
  .editLayer .mira{ box-shadow:0 0 0 2px var(--accent);
                    background:color-mix(in srgb, var(--accent) 22%, transparent); }
  /* por qué este documento no se puede editar: va arriba de todo y se ve */
  .edtrabado{ margin:0 0 12px; padding:10px 12px; border-radius:10px; font-size:12.5px;
              line-height:1.5; color:var(--warn-fg, #8a5300);
              background:color-mix(in srgb, #f0a020 16%, transparent);
              border:1px solid color-mix(in srgb, #f0a020 42%, transparent); }
  @media (prefers-color-scheme: dark){ .edtrabado{ color:#f2c98a; } }
  :root[data-theme="dark"] .edtrabado{ color:#f2c98a; }
  :root[data-theme="light"] .edtrabado{ color:#8a5300; }
  /* manijas del elemento agarrado: van centradas en el punto que marcan */
  .edman{ position:absolute; width:11px; height:11px; margin:-6px 0 0 -6px; z-index:6;
          border-radius:3px; background:var(--panel); border:2px solid var(--accent);
          box-shadow:0 1px 3px rgba(0,0,0,.3); box-sizing:content-box; }
  .edman.nw{ cursor:nwse-resize; }  .edman.se{ cursor:nwse-resize; }
  .edman.ne{ cursor:nesw-resize; }  .edman.sw{ cursor:nesw-resize; }
  /* el rectángulo con el que se agarran varios de una */
  .edred{ position:absolute; pointer-events:none; z-index:7; border-radius:3px;
          border:1.5px dashed var(--accent);
          background:color-mix(in srgb, var(--accent) 12%, transparent); }
  .edman.n, .edman.s{ cursor:ns-resize; }
  .edman.e, .edman.w{ cursor:ew-resize; }
  .edman.giro{ border-radius:50%; cursor:grab; }
  /* una página que sacaste de la herramienta: la vista previa queda en gris punteado, no
     desaparece — si no, no habría con qué reponerla ni forma de saber qué pasó */
  #dStampOv.fuera img, .txtov.fuera span, .txtov.fuera img{ opacity:.28; filter:grayscale(1); }
  /* gris fijo, no var(--txt): esto va apoyado sobre la hoja blanca, así que en el tema
     oscuro un gris claro no se vería */
  #dStampOv.fuera, .txtov.fuera{ outline-color:rgba(42,48,68,.55); }
  #dStampOv.fuera .rz{ display:none; }

  /* Burbuja flotando mientras hay una vista previa arriba de la hoja. El punteado solo
     dice "esto se puede mover"; la burbuja dice lo otro: que todavía no está aplicado.
     Traslúcida y vidriada, como el globo de ayuda: se lee que está apoyada arriba de la
     hoja y no pintada en ella. Oscura fija (no var(--txt)): siempre va sobre la hoja
     blanca, en los dos temas. */
  .previaAviso{ position:absolute; left:12px; top:12px; z-index:6; pointer-events:none;
    display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
    font-size:11.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
    color:rgba(255,255,255,.95); background:rgba(20,24,38,.5);
    -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
    box-shadow:0 2px 10px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.16); }
  .previaAviso i{ width:6px; height:6px; border-radius:50%; background:#fff; opacity:.95; flex:none;
    box-shadow:0 0 0 3px rgba(255,255,255,.2); }
  .previaAviso.fuera{ background:rgba(20,24,38,.38); color:rgba(255,255,255,.8); }
  .previaAviso.fuera i{ opacity:.6; box-shadow:none; }
  .alcinfo{ margin-top:6px; font-size:11.5px; opacity:.85; }
  .alcinfo a{ color:var(--accent); }

  /* ============================================================
     INTERRUPTORES SEGMENTADOS — dos o tres opciones cortas, todas a la vista
     ============================================================
     Reemplazan al desplegable cuando abrirlo cuesta más que leer las opciones: se ven
     todas juntas, se elige de un clic y el dibujo de cada una dice de qué se trata. */
  .segs{ display:flex; align-items:stretch; gap:3px; width:100%; padding:3px;
    background:var(--panel2); border:1px solid var(--line2); border-radius:12px; }
  .row > .segs{ flex:1 1 100%; }
  /* reparten el sobrante, no el ancho: así el rótulo largo se queda con lo que necesita
     y no se recorta por culpa de uno corto que tiene al lado */
  .segs .seg{ position:relative; flex:1 1 auto; min-width:0;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:7px 8px; border-radius:9px; cursor:pointer;
    font-size:12.5px; font-weight:560; color:var(--muted); white-space:nowrap; user-select:none;
    transition:background-color .16s var(--ease-out), color .16s var(--ease-out),
               box-shadow .16s var(--ease-out); }
  /* el radio sigue siendo el que manda (foco y flechas del teclado), pero no se dibuja */
  .segs .seg input{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; margin:0; }
  .segs .seg .sico{ display:block; line-height:0; flex:none; opacity:.72;
    transition:opacity .16s var(--ease-out), color .16s var(--ease-out); }
  .segs .seg .sico svg{ display:block; }
  .segs .seg .lbl{ min-width:0; }
  .segs .seg .lbl > span{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .segs .seg:hover{ color:var(--txt); }
  .segs .seg:hover .sico{ opacity:1; }
  .segs .seg:has(input:checked){ color:var(--txt); font-weight:660;
    background:color-mix(in srgb, var(--accent) 12%, var(--surface));
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent), var(--shadow-sm); }
  .segs .seg:has(input:checked) .sico{ opacity:1; color:var(--accent); }
  .segs .seg:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:1px; }
  /* no se estira: ocupa lo que necesita (va en una fila con otras cosas al lado) */
  .segs.compacto{ width:auto; }
  .row > .segs.compacto{ flex:0 0 auto; }
  .segs.compacto .seg{ flex:0 0 auto; }

  /* Sólo íconos: el elegido es el único que dice su nombre, y lo abre animado — el mismo
     gesto que la barra de herramientas. Del resto se encarga el globo, que no empuja
     nada de lugar. Es para cuando los rótulos son frases largas y no entran las cuatro. */
  .segs.ico .seg .lbl{ display:grid; grid-template-columns:0fr; opacity:0; margin-left:0;
    transition:grid-template-columns var(--dur-col) var(--ease-col),
               opacity .18s ease, margin-left var(--dur-col) var(--ease-col); }
  .segs.ico .seg .lbl > span{ white-space:nowrap; }
  .segs.ico .seg:has(input:checked) .lbl{ grid-template-columns:1fr; opacity:1; margin-left:6px; }
  /* Con el dedo no hay globo que valga: sin nada que explique los íconos, se muestran
     todos los rótulos y las opciones se acomodan de a dos por renglón. */
  @media (hover:none){
    .segs.ico{ flex-wrap:wrap; }
    .segs.ico .seg{ flex:1 1 calc(50% - 3px); }
    .segs.ico .seg .lbl{ grid-template-columns:1fr; opacity:1; margin-left:6px; }
  }

  /* el ícono de cada opción, también adentro del desplegable */
  .dd-btn .sico, .dd-item .sico{ display:block; line-height:0; flex:none; opacity:.7; }
  .dd-btn .sico svg, .dd-item .sico svg{ display:block; }
  .dd-btn .txt{ overflow:hidden; text-overflow:ellipsis; }
  .dd-item.on .sico{ opacity:1; color:var(--accent); }
  .edman.giro{ transform-origin:50% 50%; }
  .edman.giro::before{ content:""; position:absolute; left:50%; top:100%; width:2px;
                       height:var(--tallo,20px); margin-left:-1px;
                       background:var(--accent); opacity:.55; }
  .edman:hover{ background:var(--accent); }

  /* dónde va a quedar el renglón después de editarlo */
  .edghost{ position:absolute; pointer-events:none; border-radius:2px;
    border:1.5px dashed var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); }
  .edghost.choca{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 18%, transparent); }

  .edsem{ display:flex; gap:9px; align-items:flex-start; margin:12px 0; padding:10px 11px;
    border-radius:10px; font-size:13px; line-height:1.45;
    background:var(--panel2); border:1px solid var(--line); }
  .edsem .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:6px; background:var(--muted); }
  .edsem.verde .dot{ background:var(--ok); }
  .edsem.amarillo .dot{ background:#d99b00; }
  .edsem.rojo .dot{ background:var(--danger); }
  .edlibre, .edmeta, .edresumen{ font:11.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--muted); margin-top:8px; white-space:pre-wrap; }
  .edmeta{ border-top:1px solid var(--line); padding-top:9px; margin-top:12px; }
  #dEdTexto{ font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; resize:vertical; }

  /* Las acciones del archivo conservan su tamaño al cambiar de herramienta. */
  .savebar .btn.ico[data-panel]{ flex:none; width:32px; min-width:32px; padding:0; }
  .savebar .btn.ico[data-panel] .lbl{ display:none; }
  .savebar .btn.ico[data-panel].on{ background-color:var(--panel2); color:var(--txt); }

  /* Globo de ayuda propio, colgado del <body>: adentro de la barra lo recortaría el
     vidrio (backdrop-filter recorta lo que se le sale). Aparece sin empujar nada. */
  .tip{ position:fixed; left:0; top:0; z-index:400; padding:5px 9px; border-radius:8px;
    font-size:12px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
    color:var(--surface); background:color-mix(in srgb, var(--txt) 90%, transparent);
    box-shadow:var(--shadow); pointer-events:none;
    opacity:0; transform:translateY(-5px);
    transition:opacity .13s ease, transform .18s var(--ease-col); }
  .tip.on{ opacity:1; transform:none; }
  @media (hover:none){ .tip{ display:none; } }
  .solomini{ display:none !important; }

  @media (max-width:1100px){
    .solomini{ display:inline-flex !important; }
    #viewDocumento .docwrap{ grid-template-columns:minmax(0,1fr) minmax(285px,320px); }
    #viewDocumento .docmain{ grid-column:1; }
    #viewDocumento .docsidebar{ grid-column:2; }
    #viewDocumento .thumbs{
      position:fixed; left:12px; bottom:64px; top:auto; z-index:70;
      width:186px; max-height:min(70vh, calc(100dvh - 140px - var(--pwa-update-height, 0px))); height:auto; padding:8px;
      background:var(--surface); border:1px solid var(--line);
      border-radius:var(--r-xl); box-shadow:var(--shadow), inset 0 1px 0 var(--brillo);
      opacity:0; visibility:hidden; transform:translateX(-14px) scale(.985);
      transform-origin:0 100%;
      transition:opacity .18s ease, transform .22s var(--ease-col), visibility 0s linear .22s; }
    #viewDocumento .docwrap.withmini .thumbs{
      opacity:1; visibility:visible; transform:none;
      transition:opacity .18s ease, transform .22s var(--ease-col), visibility 0s; }
    .docfoot{ gap:4px; }
    .docfoot .fsep{ margin:0 2px; }
    .docfoot .zoomslider{ width:95px; }
  }
  @media (max-width:700px){
    #viewDocumento .docwrap{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(280px,1fr) minmax(210px,.85fr);
      padding:10px 10px 0; gap:10px; overflow:auto; }
    #viewDocumento .docmain{ grid-column:1; grid-row:1; padding-bottom:0; }
    #viewDocumento .docsidebar{ grid-column:1; grid-row:2; gap:8px; padding-bottom:10px; }
    #viewDocumento .thumbs{ bottom:auto; top:calc(65px + var(--pwa-update-height, 0px));
      max-height:calc(100dvh - 140px - var(--pwa-update-height, 0px)); }
    .savebar{ justify-content:flex-end; }
    .savebar #dUndo{ margin-right:auto; }
    .savebar .selinfo{ flex:1; order:0; padding:0 4px; }
    .optcol-head{ padding:10px 12px; }
    .optcol-body{ padding:12px; }
    .docfoot .pgsize{ display:none; }
    .docfoot input[type=range].zoomslider{ width:80px; }
  }

  /* ---- Editar: los cuatro modos, con su dibujo ---- */
  .modos{ gap:6px; }
  .modos .level{ gap:10px; padding:9px 11px; align-items:center; }
  .modos .level b{ font-size:13px; line-height:1.25; }
  .modos .level span{ font-size:11.5px; line-height:1.3; }
  .modos .dib{ flex:none; width:46px; color:var(--muted); line-height:0;
    transition:color .12s; }
  .modos .dib svg{ display:block; width:46px; height:22px; }
  /* la elegida se destaca: el dibujo toma el color de la marca */
  .modos .level:has(input:checked) .dib{ color:var(--accent); }
  .modos .level:hover .dib{ color:var(--txt); }

  /* ============================================================
     ZONAS DE ARRASTRE — soltar en un lugar quiere decir algo
     ============================================================ */
  /* El velo es un cartel, no una puerta: si atajara el cursor, la columna de
     páginas y la barra de archivos nunca recibirían nada. */
  .dropveil{ pointer-events:none; }
  .dropveil .dv-inner{ max-width:min(420px, 84vw); text-align:center; }
  .dropveil span{ line-height:1.45; }

  /* la zona apuntada se enciende: el borde punteado es el mismo idioma que el
     hueco entre miniaturas y que el recuadro de "abrí uno o varios PDFs" */
  #docThumbs.dropzona, .docbar.dropzona{
    outline:2px dashed var(--accent); outline-offset:3px; border-radius:var(--r-lg);
    background:color-mix(in srgb, var(--accent) 8%, transparent); }
  /* la columna de Adjuntar ya tiene su fondo y su sombra: le alcanza el borde */
  #optCol.dropzona{ outline:2px dashed var(--accent); outline-offset:3px; }

  /* el cartelito de las zonas específicas: abajo y al medio, arriba del pie de
     página y zoom, que es la franja que queda libre en las dos disposiciones */
  .droppill{ position:fixed; left:50%; bottom:64px; z-index:90; pointer-events:none;
    max-width:calc(100vw - 24px);
    display:flex; align-items:baseline; gap:8px; padding:9px 16px; border-radius:999px;
    border:1px solid var(--line2); background:var(--surface); box-shadow:var(--sh-2);
    opacity:0; transform:translate(-50%, 10px); transition:opacity .14s ease, transform .2s var(--ease-out); }
  .droppill.show{ opacity:1; transform:translate(-50%, 0); }
  .droppill strong{ font-size:13.5px; color:var(--txt); }
  .droppill span{ font-size:12.5px; color:var(--muted); }

  /* Pro Editor: controles de una sola altura y utilidades bajo demanda. */
  .pro-toolstrip{ display:flex; align-items:center; gap:8px; padding:6px 8px; height:42px; flex-wrap:nowrap; }
  .pro-toolstrip .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px;
    flex:none; white-space:nowrap; border-radius:var(--r-sm); }
  .pro-toolstrip .btn svg{ width:16px; height:16px; flex:none; }
  .pro-format{ display:flex; align-items:center; gap:6px; min-width:0; flex:0 1 auto; border:0;
    margin:0; padding:2px; overflow-x:auto; scrollbar-width:none; }
  .pro-format::-webkit-scrollbar{ display:none; }
  .pro-format:disabled{ opacity:.45; }
  #dDirectTools .font-picker{ flex:0 0 190px; flex-wrap:nowrap; min-width:190px; }
  #dDirectTools .font-picker-trigger{ min-width:0; min-height:30px; height:30px; display:flex; align-items:center;
    padding:0 24px 0 9px; border-radius:var(--r-sm); background:var(--panel2); }
  #dDirectTools .font-picker-name{ flex:1; font-size:13px; }
  #dDirectTools .font-picker-details{ display:none; }
  #dDirectTools .font-picker-chevron{ top:50%; transform:translateY(-50%); right:7px; }
  #dDirectTools .font-style{ width:28px; min-width:28px; height:30px; padding:0; font-size:13px; }
  #dDirectTools .on{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
  #dDirectTools .font-style-status{ position:absolute; top:calc(100% + 8px); left:0; padding:8px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-1); }
  #dDirectTools .pro-size{ flex:none; gap:0; height:30px; border:1px solid var(--line2); border-radius:var(--r-sm);
    background:var(--panel2); color:var(--muted); overflow:hidden; }
  #dDirectTools .pro-size:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
  #dDirectSize{ width:52px; height:28px; padding:0 0 0 7px; border:0; border-radius:0; background:transparent; font-size:12px; outline:none; }
  #dDirectSize::-webkit-inner-spin-button{ opacity:1; }
  #dDirectColor{ flex:none; width:30px; height:30px; padding:3px; border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--panel2); cursor:pointer; }
  .pro-styles, #dDirectAlign{ display:flex; align-items:center; gap:2px; flex:none; }
  #dDirectAlign{ padding-left:6px; border-left:1px solid var(--line); }
  #dDirectTools #dDirectAlign .pro-icon{ width:28px; }
  .pro-size span{ padding:0 6px 0 2px; font-size:10px; }
  #dDirectTools .pro-icon{ width:32px; padding:0; }
  .pro-utilities{ display:flex; align-items:center; gap:3px; margin-left:auto; padding-left:8px; border-left:1px solid var(--line); }
  .pro-popover{ position:relative; flex:none; font-size:12px; }
  .pro-popover > summary{ list-style:none; user-select:none; }
  .pro-popover > summary::-webkit-details-marker{ display:none; }
  .pro-popover > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  #dDirectTools .pro-popover[open] > summary{ color:var(--accent); background:var(--panel2); }
  .pro-popover-panel{ position:absolute; top:calc(100% + 10px); right:0; z-index:30; width:280px;
    max-width:calc(100vw - 40px); max-height:min(420px,65dvh); overflow:auto; padding:16px;
    background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-lg); box-shadow:var(--sh-2),inset 0 1px 0 var(--brillo); }
  .pro-popover-title{ display:block; color:var(--txt); font-size:13px; font-weight:660; margin-bottom:14px; }
  .pro-popover-panel p{ margin:6px 0 16px; color:var(--muted); font-size:12px; line-height:1.5; }
  #dDirectTools .pro-popover-panel .switch{ gap:8px; color:var(--txt); margin-bottom:14px; }
  #dDirectTools .pro-scan-language{ justify-content:space-between; gap:12px; margin-bottom:14px; color:var(--muted); }
  #dDirectTools .pro-scan-language select{ flex:1; min-width:0; height:32px; padding:5px 8px; border-radius:var(--r-sm); background:var(--panel2); }
  #dDirectTools #dDirectReconocer{ width:100%; margin-bottom:12px; }
  #dDirectReconocer:disabled{ cursor:wait; }
  #dDirectScanToggle.busy{ color:var(--accent); }
  #dDirectScanToggle.busy::after{ content:""; width:10px; height:10px; border:2px solid var(--line2);
    border-top-color:currentColor; border-radius:50%; animation:spin .8s linear infinite; }
  @media(prefers-reduced-motion:reduce){ #dDirectScanToggle.busy::after{ animation:none; } }
  .pro-editor #dEdElem{ padding:10px 0; border-bottom:1px solid var(--line); }
  .pro-editor #dEdElemQue{ width:100%; overflow-wrap:anywhere; }
  .pro-editor .edbox:not(.sel){ background:transparent; border-color:color-mix(in srgb, var(--accent) 20%, transparent); }
  .pro-editor .edbox:not(.sel):hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); }
  @container(max-width:620px){
    .pro-toolstrip{ gap:4px; }
    .pro-format{ flex:1; }
    .pro-utilities{ border-left:0; padding-left:0; }
    .pro-popover-panel{ max-width:calc(100vw - 64px); }
  }

/* Background text recognition stays in the footer, outside the PDF surface. */
.text-index-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);flex-shrink:0;cursor:help;}
.text-index-status[hidden]{display:none;}
.text-index-status i{width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:text-index-spin .8s linear infinite;}
@keyframes text-index-spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.text-index-status i{animation-duration:2s;}}