/* ═══════════════════════════════════════════════════════════
   QA DTP — oscuro, vidrio y un acento eléctrico.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── el tema oscuro, que es el de siempre ──────────────────
     Todo el CSS toma los colores de acá. Los literales que había
     desparramados —rgba(255,255,255,…), rgba(0,0,0,…), #0a0b0e—
     pasaron a ser variables con un ROL: superficie, hundido, sombra,
     texto sobre el acento. Así el tema claro es sólo redefinir esta
     lista, no reescribir mil reglas. */

  /* los dos triplos que sostienen todo: el blanco de los velos y el
     acento. Se usan como rgba(var(--w),.08), que es CSS válido. */
  --w:255,255,255;
  --acc-rgb:208,253,62;

  --bg:#08090c;
  --bg-2:#0c0e13;
  --line:rgba(var(--w),.08);
  --line-2:rgba(var(--w),.14);
  --glass:rgba(var(--w),.028);
  --glass-2:rgba(var(--w),.045);
  --txt:#f4f6fa;
  --dim:#9aa3b8;
  --dim-2:#646d82;

  --acc:#d0fd3e;              /* el relleno: botones, pastillas, barras */
  --acc-txt:#d0fd3e;          /* el acento cuando es TEXTO o trazo */
  --acc-dim:rgba(var(--acc-rgb),.16);
  --on-acc:#0a0b0e;           /* lo que va encima del acento */

  --surf:#0d0f14;             /* paneles y ventanas levantadas */
  --surf-2:#12151c;           /* desplegables, lo más alto */
  --surf-0:#000;              /* el fondo detrás de una página de PDF */
  --sunk:rgba(0,0,0,.32);     /* campos y cajas hundidas */
  --sunk-2:rgba(0,0,0,.48);   /* las mismas, con foco */
  --sunk-soft:rgba(0,0,0,.22);
  --sh:rgba(0,0,0,.9);        /* la sombra de lo que flota */
  --ink-ov:rgba(0,0,0,.66);   /* etiqueta encima de una imagen */
  --pg-ring:rgba(0,0,0,.35);  /* el borde de una página renderizada */

  --nav-bg:rgba(8,9,12,.72);
  --side-bg:rgba(10,11,15,.72);
  --side-bg-2:rgba(10,11,15,.9);
  --bar-bg:rgba(12,14,19,.92);
  --scrim:rgba(4,5,7,.72);

  --logo-b:#4a5266;
  --aura-1:rgba(var(--acc-rgb),.13);
  --aura-2:rgba(70,130,255,.14);
  --aura-3:rgba(160,90,255,.09);
  --grid-op:.5;

  /* La escala de severidad es la del PowerPoint de Marcos: 1 verde
     aceptable, 2 azul detalle menor, 3 amarillo revisar, 4 naranja
     inconsistencia severa, 5 rojo detiene entrega. Los tonos son los
     equivalentes sobre fondo oscuro de los que usa el documento. */
  --s1:#4ade80; --s2:#7c8cf8; --s3:#e0b341; --s4:#f08a2c; --s5:#e11d48;
  --cy:#8ee7ff;
  --g1:#d0fd3e; --g2:#8ee7ff; --g3:#b79bff;   /* el degradado del titular */

  --f:"Sora",-apple-system,"Segoe UI",sans-serif;
  --m:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:16px;
  --pad:clamp(18px,4vw,44px);
}

/* ── el tema claro ─────────────────────────────────────────
   Marcos: "hay una posibilidad white y dark". Los mismos roles, los
   valores dados vuelta. Dos cosas no se dan vuelta a propósito: el
   verde del acento —es la marca— y el blanco de la página del PDF,
   que es papel y no puede cambiar de color debajo del que revisa. */
html[data-tema="claro"]{
  --w:14,20,32;               /* los velos ahora oscurecen, no aclaran */
  --acc-rgb:120,158,0;        /* el mismo verde bajado para que se lea */

  --bg:#f6f7f9;
  --bg-2:#eef0f4;
  --line:rgba(var(--w),.11);
  --line-2:rgba(var(--w),.18);
  --glass:rgba(var(--w),.035);
  --glass-2:rgba(var(--w),.06);
  --txt:#12151c;
  --dim:#525a6b;
  --dim-2:#78808f;

  --acc:#c2ee2a;              /* el relleno sigue siendo lima */
  --acc-txt:#4f6b00;          /* como texto, el verde oscuro */
  --acc-dim:rgba(var(--acc-rgb),.14);
  --on-acc:#0a0b0e;

  --surf:#ffffff;
  --surf-2:#ffffff;
  --surf-0:#dfe3ea;
  --sunk:rgba(var(--w),.045);
  --sunk-2:#ffffff;
  --sunk-soft:rgba(var(--w),.03);
  --sh:rgba(20,26,40,.22);
  --ink-ov:rgba(0,0,0,.6);    /* sigue yendo sobre una imagen */
  --pg-ring:rgba(var(--w),.22);

  --nav-bg:rgba(246,247,249,.82);
  --side-bg:rgba(255,255,255,.86);
  --side-bg-2:rgba(255,255,255,.96);
  --bar-bg:rgba(255,255,255,.94);
  --scrim:rgba(30,36,50,.38);

  --logo-b:#98a0b0;
  --aura-1:rgba(var(--acc-rgb),.11);
  --aura-2:rgba(70,130,255,.10);
  --aura-3:rgba(160,90,255,.07);
  --grid-op:.85;

  /* Los mismos cinco niveles, oscurecidos lo justo para que se lean
     sobre blanco. El rojo y el naranja casi no cambian; el verde y el
     amarillo sobre papel desaparecían. */
  --s1:#1d9a4e; --s2:#4356d6; --s3:#a97a06; --s4:#d1690b; --s5:#d01a3f;
  --cy:#0d7490;
  --g1:#5f8200; --g2:#0e7c9c; --g3:#6d4bc4;   /* el mismo, sobre papel */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--txt);
  font:15px/1.6 var(--f);letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{width:100%;max-width:1300px;margin:0 auto;padding:0 var(--pad)}
::selection{background:var(--acc);color:var(--on-acc)}

/* atmósfera */
.aura{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(680px 420px at 12% -8%,var(--aura-1),transparent 62%),
    radial-gradient(760px 500px at 92% 4%,var(--aura-2),transparent 65%),
    radial-gradient(900px 620px at 50% 108%,var(--aura-3),transparent 70%)}
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--grid-op);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1100px 700px at 50% 0%,#000 10%,transparent 80%);
  -webkit-mask-image:radial-gradient(1100px 700px at 50% 0%,#000 10%,transparent 80%)}
header,main,footer{position:relative;z-index:1}

/* ── nav ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px);
  background:var(--nav-bg);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:62px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--txt)}
/* el isotipo de EasyQLab (20/10, ver /marca): dos páginas y una Q; el trazo es 2,5 sobre 32 */
.logo svg{width:26px;height:26px;fill:none;stroke-width:2.5}
.logo .a{stroke:var(--acc-txt)} .logo .b{stroke:var(--logo-b)}
.logo span{font-weight:600;font-size:15px;letter-spacing:.01em}
.logo i{font-style:normal;color:var(--acc-txt)}
.nav-meta{display:flex;gap:9px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1 var(--f);
  padding:7px 12px;border-radius:99px;background:var(--acc-dim);color:var(--acc-txt);
  border:1px solid rgba(var(--acc-rgb),.22)}
.chip.ghost{background:var(--glass);color:var(--dim);border-color:var(--line)}
.chip .live{width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6);animation:ping 2.4s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(var(--acc-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0)}}

main{flex:1;padding:clamp(34px,6vw,74px) 0 70px}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero,.up,.cta,.run-card,.sheet{animation:rise .6s cubic-bezier(.16,.8,.3,1) both;
  animation-delay:calc(var(--d,0)*90ms)}

/* ── hero ────────────────────────────────────────────── */
.hero{max-width:760px;margin-bottom:clamp(30px,5vw,54px)}
/* el modo rápido se anuncia en el titular, no en una caja aparte */
.hero.rap{border-left:2px solid var(--acc);padding-left:clamp(14px,2vw,22px)}
h1{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(33px,5.4vw,58px)}
h1 em{font-style:normal;background:linear-gradient(96deg,var(--g1),var(--g2) 62%,var(--g3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:20px 0 0;color:var(--dim);font-size:clamp(14px,1.5vw,16.5px);
  max-width:62ch;font-weight:300;line-height:1.65}

/* ── carga ───────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
.up-top{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.step{font:500 10.5px/1 var(--m);color:var(--acc-txt);background:var(--acc-dim);
  padding:5px 8px;border-radius:6px}
h2{margin:0;font-size:14.5px;font-weight:500;letter-spacing:-.01em}

.drop{position:relative;border-radius:var(--r);padding:clamp(30px,4.6vw,50px) 22px;
  text-align:center;cursor:pointer;background:var(--glass);
  border:1px dashed var(--line-2);transition:.24s cubic-bezier(.2,.8,.3,1)}
.drop::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(240px 130px at 50% 0%,rgba(var(--acc-rgb),.1),transparent 70%);
  opacity:0;transition:opacity .24s}
.drop:hover,.drop:focus-visible,.drop.over{background:var(--glass-2);outline:none;
  border-color:rgba(var(--acc-rgb),.5);transform:translateY(-2px)}
.drop:hover::after,.drop.over::after{opacity:1}
.orb{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 15px;
  border-radius:14px;background:var(--acc-dim);border:1px solid rgba(var(--acc-rgb),.24);
  transition:.24s}
.orb svg{width:20px;height:20px;fill:none;stroke:var(--acc-txt);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.drop:hover .orb{transform:translateY(-2px) scale(1.06);
  box-shadow:0 10px 30px -10px rgba(var(--acc-rgb),.5)}
.drop-in strong{display:block;font-size:14.5px;font-weight:500}
.drop-in em{display:block;font-style:normal;font-size:12.5px;color:var(--dim-2);margin-top:5px}

.files{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.file{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;
  background:var(--glass);border:1px solid var(--line);font-size:13px;
  animation:rise .35s cubic-bezier(.16,.8,.3,1) both}
.file .tag{font:500 10.5px/1 var(--f);letter-spacing:.02em;padding:5px 9px;border-radius:7px;
  background:var(--acc-dim);color:var(--acc-txt);border:1px solid rgba(var(--acc-rgb),.2);
  min-width:62px;text-align:center;outline:none}
.file .tag:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16)}
.file .tag.src{background:var(--glass-2);color:var(--dim);border-color:var(--line)}
.file .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--m);font-size:11.5px;color:var(--dim)}
.file .sz{font-family:var(--m);font-size:11px;color:var(--dim-2)}
.file .x{background:none;border:0;color:var(--dim-2);cursor:pointer;font-size:17px;
  line-height:1;padding:0 2px}
.file .x:hover{color:var(--s4)}

.cta{margin-top:clamp(22px,3.4vw,34px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  background:var(--acc);color:var(--on-acc);padding:14px 26px;border-radius:12px;
  font:600 14px/1 var(--f);letter-spacing:-.01em;transition:.2s;
  box-shadow:0 8px 26px -10px rgba(var(--acc-rgb),.55)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(var(--acc-rgb),.7)}
.btn:hover:not(:disabled) svg{transform:translateX(4px)}
.btn:disabled{background:var(--glass-2);color:var(--dim-2);box-shadow:none;cursor:not-allowed}
.btn.sm{padding:9px 15px;font-size:12.5px;border-radius:10px}
.btn.ghost{background:var(--glass);color:var(--dim);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--glass-2);color:var(--txt);transform:none}
#hint{margin:0;color:var(--dim-2);font-size:13px;font-weight:300}

/* ── progreso ────────────────────────────────────────── */
.run-card{border-radius:20px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(14px);padding:clamp(20px,3vw,30px);max-width:820px;margin:0 auto}
.run-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.eyebrow{font:500 10.5px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
.run-sub{margin:9px 0 0;font-family:var(--m);font-size:12.5px;color:var(--acc-txt)}
.pct{font-weight:600;font-size:40px;letter-spacing:-.045em;line-height:1}
.pct i{font-style:normal;font-size:19px;color:var(--dim-2);margin-left:2px}
.track{height:3px;border-radius:3px;background:rgba(var(--w),.07);
  margin:20px 0 6px;overflow:hidden}
.track span{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--acc),#8ee7ff);
  transition:width .5s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 14px rgba(var(--acc-rgb),.6)}
.queue{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.queue li{display:flex;align-items:center;gap:13px;padding:13px 2px;font-size:13.5px;
  border-bottom:1px solid var(--line)}
.queue li:last-child{border-bottom:0}
.queue .dot{width:7px;height:7px;border-radius:50%;background:rgba(var(--w),.16);flex:none}
.queue li.run .dot{background:var(--acc);box-shadow:0 0 10px var(--acc);animation:blink 1.1s infinite}
.queue li.ok .dot{background:var(--s1)}
.queue li.err .dot{background:var(--s4)}
@keyframes blink{50%{opacity:.3}}
.queue .nm{flex:1;font-weight:500}
.queue .st{font-family:var(--m);font-size:11.5px;color:var(--dim-2)}
.queue li.ok .st{color:var(--dim)}

/* ── resultados ──────────────────────────────────────── */
.res-top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  flex-wrap:wrap;margin-bottom:22px}
.res-title{margin:9px 0 0;font-size:clamp(23px,3vw,31px);font-weight:600;letter-spacing:-.032em}
.res-tools{display:flex;align-items:center;gap:16px}
.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;
  color:var(--dim);font-weight:300}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .tr{width:34px;height:19px;border-radius:99px;background:rgba(var(--w),.1);
  position:relative;transition:.2s;flex:none}
.toggle .tr i{position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;
  background:var(--dim);transition:.22s cubic-bezier(.2,.8,.3,1)}
.toggle input:checked + .tr{background:var(--acc)}
.toggle input:checked + .tr i{transform:translateX(15px);background:var(--on-acc)}
.toggle input:focus-visible + .tr{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.25)}

.tabs{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:20px;
  scrollbar-width:thin}
.tab{flex:none;min-width:158px;text-align:left;cursor:pointer;padding:15px 17px;
  border-radius:15px;background:var(--glass);border:1px solid var(--line);
  color:var(--txt);font:inherit;transition:.22s cubic-bezier(.2,.8,.3,1);position:relative}
.tab:hover{background:var(--glass-2);transform:translateY(-2px)}
.tab.on{border-color:rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.07);
  box-shadow:0 10px 30px -14px rgba(var(--acc-rgb),.5)}
.tab .t-l{font-size:13px;font-weight:500}
.tab .t-n{display:block;font-size:29px;font-weight:600;letter-spacing:-.045em;margin:6px 0 3px}
.tab.on .t-n{color:var(--acc-txt)}
.tab .t-s{font:400 10.5px/1 var(--m);color:var(--dim-2)}
.tab .t-b{display:flex;gap:3px;margin-top:11px;height:3px}
.tab .t-b span{flex:1;border-radius:2px;background:rgba(var(--w),.09)}
.tab .warn{position:absolute;top:13px;right:14px;width:6px;height:6px;border-radius:50%;
  background:var(--s4);box-shadow:0 0 9px var(--s4)}
/* El veredicto del idioma en su tarjeta, con el color del semaforo (19/10:
   «Rechazado tiene que ser rojo en todos lados»); el punto de graves de un
   idioma rechazado tambien va en rojo, no en naranja. */
.tab .t-v{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:500 11px/1.25 var(--f)}
.tab .t-v i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor;flex:none}
.tab.sem-block .t-v{color:var(--s5)}
.tab.sem-warn .t-v{color:var(--s3)}
.tab.sem-ok .t-v{color:var(--s1)}
.tab.sem-block .warn{background:var(--s5);box-shadow:0 0 9px var(--s5)}

/* El idioma que se analizo en OTRA corrida del mismo proyecto. Marcos, 4/9:
   "yo hago clic en open y solamente me abre el primero". Van punteadas y sin
   numeros, porque sus numeros todavia no se leyeron: tocarlas abre esa
   corrida, no la mezcla con esta. */
.tab.otra{min-width:118px;border-style:dashed;background:transparent;opacity:.72}
.tab.otra:hover{opacity:1;background:var(--glass)}
.tab.otra .t-l{display:block;margin-bottom:9px}
.tab.otra:disabled{opacity:.4;cursor:progress}

/* La pestaña Resumen (Marcos, 19/10): va delante de las de idioma y se
   distingue por el borde, no por el color: es una tarjeta más. */
.tab.resumen{border-color:rgba(var(--w),.2)}
.res-acts{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
/* el interruptor de la revision de la traduccion, en la cabecera (19/10) */
.res-trad{margin-right:8px;padding:6px 4px}
.res-trad[hidden]{display:none}
.filters[hidden],.cats[hidden]{display:none}

/* ── el Resumen del proyecto ─────────────────────────── */
.rs{border-radius:20px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(14px);padding:clamp(18px,2.6vw,28px)}
.rs-h{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  flex-wrap:wrap;margin-bottom:18px}
.rs-t{margin:8px 0 0;font-size:clamp(20px,2.6vw,26px);font-weight:600;letter-spacing:-.03em}
.rs-meta{margin:8px 0 0;font:300 12.5px/1.6 var(--f);color:var(--dim)}
.rs-meta b{font-weight:500;color:var(--txt)}
.rs-acts{display:flex;gap:9px;flex-wrap:wrap}
.rs-tabla{overflow-x:auto}
.rs-tb{width:100%;border-collapse:collapse;font-size:13px}
.rs-tb th{font:500 10px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim-2);padding:8px 10px;border-bottom:1px solid var(--line-2);text-align:left;
  white-space:nowrap;vertical-align:bottom}
.rs-tb th.grupo{text-align:center;border-bottom:0;padding-bottom:2px;color:var(--dim)}
.rs-tb th.num,.rs-tb td.num{text-align:right}
.rs-tb td.num{font-family:var(--m);font-weight:500}
.rs-tb td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.rs-tb td small{display:block;font:300 11px/1.3 var(--f);color:var(--dim-2);margin-top:2px}
.rs-fila{cursor:pointer}
.rs-fila:hover td{background:var(--glass-2)}
.rs-tb td.cero{color:var(--dim-2);font-weight:400}
.rs-total td{font-weight:600;border-bottom:0;border-top:1px solid var(--line-2)}
.rs-v{display:inline-flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap}
.rs-v::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor}
.rs-v.ok{color:var(--s1)}.rs-v.warn{color:var(--s3)}.rs-v.block{color:var(--s5)}
.rs-corte{margin:16px 0 0;font:300 12px/1.6 var(--f);color:var(--dim-2)}
/* lo que antes iba en la cabecera: el estado con su porque, la hojita, lo omitido (19/10) */
.rs-estado{margin:10px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:300 13px/1.5 var(--f);color:var(--dim)}
.rs-estado .rs-v{font-size:14px}
.rs-hojita{margin:8px 0 0;font:300 12px/1.6 var(--f);color:var(--dim-2);max-width:92ch}
.rs-hojita em{font-style:normal;color:var(--dim)}
.rs-omit{margin:8px 0 0;font:400 12.5px/1.5 var(--f);color:var(--s3);max-width:92ch}
/* el analisis del proyecto escrito por la IA */
.rs-ia{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rs-ia-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.rs-ia-s{margin:7px 0 0;font:300 12.5px/1.5 var(--f);color:var(--dim);max-width:80ch}
.rs-ia-txt{margin:14px 0 0;font:300 13.5px/1.65 var(--f);color:var(--txt);white-space:pre-wrap;
  word-break:break-word;max-width:92ch}
.rs-ia-meta{display:block;margin-top:9px;font:400 11px/1 var(--m);color:var(--dim-2);font-style:normal}
.rs-ia-vacio{margin:12px 0 0;font:300 12.5px/1.5 var(--f);color:var(--dim-2)}
.rs-ia .pq-estado{margin-top:12px}

/* ── las preguntas al proyecto ───────────────────────── */
/* Desde el 19/10 es una VENTANA FLOTANTE chica (Marcos: «me está ocupando
   parte de los findings»; quiere el widget de Grammarly): 380 px, pegada al
   boton redondo de abajo a la izquierda, plegable. La ubica `ubicarPreguntas`. */
.pq{position:fixed;left:24px;bottom:92px;width:min(380px,calc(100vw - 32px));
  max-height:min(72vh,680px);z-index:140;display:flex;flex-direction:column;gap:10px;
  padding:16px 16px 14px;background:var(--surf);border:1px solid var(--line-2);
  border-radius:18px;box-shadow:0 30px 80px -30px var(--sh);animation:pqin .18s ease-out}
.pq[hidden]{display:none}
/* «que el chat se pueda agrandar y achicar» (Juanma, 20/10): el botón ⤢ lo
   pasa a 760 px y casi todo el alto; ⤡ lo devuelve. Se acuerda. */
.pq.grande{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 24px)}
@keyframes pqin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.pq-btns{display:flex;gap:6px;flex:none}
.pq-btns .btn{padding:7px 10px}
/* (a 76 px: a la derecha del menu plegado, que abajo tiene ES/EN y el tema) */
.pq-fab{position:fixed;left:76px;bottom:24px;width:54px;height:54px;border-radius:50%;z-index:141;
  display:grid;place-items:center;border:1px solid transparent;cursor:grab;background:var(--acc);
  color:var(--on-acc);box-shadow:0 14px 34px -10px rgba(var(--acc-rgb),.7);touch-action:none;
  user-select:none;transition:transform .15s,background .15s}
.pq-fab[hidden]{display:none}
.pq-fab svg .b{opacity:.45}
.pq-k{display:flex;align-items:center;gap:8px}
.pq-iso{width:18px;height:18px;flex:none;fill:none;stroke-width:2.6}
.pq-iso .a{stroke:var(--acc-txt)} .pq-iso .b{stroke:var(--logo-b)}
.pq-fab svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.pq-fab:hover{transform:translateY(-2px)}
.pq-fab.arrastrando{cursor:grabbing;transform:scale(1.06)}
.pq-fab.abierto{background:var(--surf-2);color:var(--acc-txt);border-color:rgba(var(--acc-rgb),.5)}
.pq-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pq-s{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--dim);font-weight:300}
/* Columna flex con alto máximo: cuando el hilo no entra, flex ENCOGE a sus
   hermanos hasta su mínimo y el estado en dos renglones se pisaba con el hilo
   (Juanma, 20/10, en castellano). Sólo el hilo se encoge; el estado va en un
   renglón con puntos suspensivos y el texto entero en el tooltip. */
.pq-h,.pq-estado,.pq-form{flex:none}
.pq-estado{margin:0;font:400 11.5px/1.4 var(--m);color:var(--acc-txt);min-height:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pq-estado.mal{color:var(--s4)}
.pq-hilo{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px;
  scrollbar-width:thin}
.pq-q,.pq-a{border-radius:12px;padding:10px 12px;border:1px solid var(--line);background:var(--glass)}
.pq-q{align-self:flex-end;max-width:92%;background:rgba(var(--acc-rgb),.07);
  border-color:rgba(var(--acc-rgb),.3)}
/* el rótulo («Vos», «EasyQLab») es el <b> hijo directo; las negritas de la respuesta (.pq-txt b) son normales */
.pq-q > b,.pq-a > b{display:block;font:500 10px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim-2);margin-bottom:6px}
.pq-q p,.pq-a p{margin:0;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
/* la respuesta: texto con renglones, y lo que la IA marca con **…** o el
   rótulo al principio del renglón («Swahili:», «hoja 2:») en negrita, para
   que se lea (Juanma, 20/10: «que los mensajes tengan negrita») */
.pq-txt{margin:0;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.pq-txt b,.rs-ia-txt b{font-weight:600}
.pq-a em{display:block;margin-top:7px;font:400 11px/1 var(--m);color:var(--dim-2);font-style:normal}
.pq-a.pensando p{color:var(--acc-txt)}
.pq-vacio{margin:auto 0;text-align:center;color:var(--dim-2);font-size:13px;font-weight:300;line-height:1.5}
.pq-form{display:flex;gap:9px;align-items:flex-end}
.pq-form textarea{flex:1;resize:vertical;min-height:58px;background:var(--sunk);
  border:1px solid var(--line);color:var(--txt);border-radius:11px;padding:10px 12px;
  font:300 13px/1.45 var(--f)}
.pq-form textarea:focus{outline:none;border-color:rgba(var(--acc-rgb),.5);background:var(--sunk-2)}

.sheet{border-radius:20px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(14px);padding:clamp(18px,2.6vw,28px)}
.sh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:22px}
.sh-top h3{margin:0 0 11px;font-size:19px;font-weight:600;letter-spacing:-.028em}
.stats{display:flex;gap:20px;flex-wrap:wrap}
.stats div{font:400 10px/1 var(--f);letter-spacing:.13em;text-transform:uppercase;color:var(--dim-2)}
.stats b{display:block;font:500 13.5px/1.3 var(--m);color:var(--txt);letter-spacing:0;
  text-transform:none;margin-top:6px}
.dl{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  font:500 12.5px/1 var(--f);color:var(--txt);padding:11px 16px;border-radius:11px;
  background:var(--glass-2);border:1px solid var(--line);transition:.2s}
.dl:hover{border-color:rgba(var(--acc-rgb),.45);color:var(--acc-txt)}
.dl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* Cada formato con su color. Marcos, 7/9: "el esquema es todo monocolor, ayer
   que estaba cansado con los ojos me pasaba de que no lo veia". El rojo del PDF
   y el verde de la planilla son los colores con los que esta gente convive todo
   el dia: se reconocen antes de leer la palabra. */
.dl b{font:700 9px/1 var(--m);letter-spacing:.08em;padding:4px 5px;border-radius:5px;
  color:#fff}
.dl-pdf{border-color:color-mix(in srgb,#e5342a 34%,transparent);
  background:color-mix(in srgb,#e5342a 9%,transparent)}
.dl-pdf svg{color:#e5342a}
.dl-pdf b{background:#e5342a}
.dl-pdf:hover{border-color:color-mix(in srgb,#e5342a 62%,transparent);
  background:color-mix(in srgb,#e5342a 15%,transparent);color:var(--txt)}
.dl-csv{border-color:color-mix(in srgb,#1a8f4c 36%,transparent);
  background:color-mix(in srgb,#1a8f4c 9%,transparent)}
.dl-csv svg{color:#1e9e55}
.dl-csv b{background:#1a8f4c}
.dl-csv:hover{border-color:color-mix(in srgb,#1a8f4c 64%,transparent);
  background:color-mix(in srgb,#1a8f4c 15%,transparent);color:var(--txt)}
/* Los dos de SUBIR -el PDF del revisor y el corregido de la segunda vuelta-
   (19/10): chicos, al lado de los de bajar, con el texto entero en el tooltip. */
.dl-up{border-color:color-mix(in srgb,var(--cy) 30%,transparent)}
.dl-up svg{color:var(--cy)}
.dl-up:hover{border-color:color-mix(in srgb,var(--cy) 60%,transparent);color:var(--txt)}
.dl:disabled{opacity:.45;cursor:not-allowed}
.dl:disabled:hover{border-color:var(--line);color:var(--txt)}
/* el ⓘ de la calidad de las paginas, pegado al nombre del archivo */
.sh-tip{padding:0;margin-left:6px;vertical-align:middle;cursor:help}
.sh-tip svg{width:13px;height:13px}
.sh-tip::after{left:auto;right:0}

/* Nada se corta a la mitad (Marcos, 19/10: «se corta la palabra», en la
   cabecera del idioma y en las fichas; Juanma: que se vea la palabra entera).
   Lo que puede ser largo -un nombre de archivo sin espacios, un idioma de
   tres palabras, un titulo de hallazgo- ENVUELVE en vez de desbordar o
   recortarse; y donde quedan puntos suspensivos (listas apretadas) el texto
   entero va en el tooltip. */
.sh-top > div{min-width:0;flex:1 1 280px}
.sh-top h3,.stats b,.res-proy,.v-lab,.n-t{overflow-wrap:anywhere}
.tab .t-l,.tab .t-v span{overflow-wrap:anywhere;white-space:normal}
.note > div{min-width:0}
.rs-tb td b,.rs-tb td small{overflow-wrap:anywhere}
.rs-v{white-space:normal}

.pages{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);margin-bottom:24px}
.pg h4{margin:0 0 9px;font:500 10px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);display:flex;justify-content:space-between;align-items:baseline}
.pg h4 em{font-style:normal;font-family:var(--m);font-size:10.5px;letter-spacing:0;
  text-transform:none;color:var(--acc-txt)}
.canvas{position:relative;line-height:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--surf-0);
  box-shadow:0 20px 50px -26px var(--sh)}
.canvas img{width:100%;display:block}
.canvas.void{padding:46px 16px;text-align:center;font-family:var(--m);font-size:11.5px;
  color:var(--dim-2);line-height:1.6;background:var(--glass)}
/* el panel de paginas cuando todavia no hay paginas: mejor decir que esta
   pasando que dejarlo en blanco, que se lee como roto */
.canvas.sin-pag{background:var(--glass);border-style:dashed;min-height:340px;
  display:grid;place-items:center;padding:40px 22px}
.canvas.sin-pag .void{display:flex;flex-direction:column;align-items:center;gap:9px;
  line-height:1.55;max-width:380px;text-align:center}
.canvas.sin-pag strong{font:600 14px/1.4 var(--f);color:var(--txt);letter-spacing:-.01em}
.canvas.sin-pag span{font:300 12.5px/1.6 var(--f);color:var(--dim)}
.canvas.sin-pag .sp{width:20px;height:20px;border-radius:50%;margin-bottom:3px;
  border:2px solid var(--line-2);border-top-color:var(--acc-txt);
  animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* El recuadro va AFUERA de la caja del hallazgo, con aire fijo en pixeles.
   La caja (`pos()`) ya trae aire en puntos del PDF, pero ese aire se achica
   con la letra -una nota al pie de 7 pt queda con 2 puntos- y con la escala
   de la hoja, y el borde de 1,5 a 3 px (el elegido) se comia lo poco que
   quedaba hacia ADENTRO: Marcos, 12/10, en arabe: "el cuadro rojo se sigue
   pegando al texto; me gustaria que sea un poquito mas grande, como lo
   habiamos arreglado". Ahora la caja es el contenido, y el aire (--g) y el
   borde (--b) crecen hacia afuera, iguales a cualquier zoom; el margen
   negativo la deja en su lugar. `ubicarChapas` lo sabe (FUERA). */
.box{position:absolute;cursor:pointer;--b:1.5px;--g:3px;box-sizing:content-box;
  border:var(--b) solid;padding:var(--g);
  margin:calc(-1 * (var(--b) + var(--g))) 0 0 calc(-1 * (var(--b) + var(--g)));
  border-radius:4px;transition:.16s}
.box:hover,.box.hov{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.3)}

/* ── el numero de cada marca, en el margen blanco de la hoja ───────
   Marcos, 11/9: "el numero tiene que estar en un espacio en blanco, un poco
   mas alejado del texto, no interponerse". Y Juanma, el mismo dia: en el
   margen de la propia hoja, no afuera, y mas chico para que no moleste.
   `ubicarChapas()` elige el lugar mirando la imagen de la hoja: pegado al
   borde, donde no hay nada impreso, y apilado si dos coinciden. */
.chapa{position:absolute;left:3px;min-width:13px;height:13px;padding:0 3px;
  border-radius:4px;color:var(--on-acc);font:700 9px/13px var(--m);text-align:center;
  cursor:pointer;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .12s}
.chapa.hov{transform:scale(1.15)}
.chapa.oculta,.chapa.fundida{display:none}
/* un numero que lleva varias marcas que no entraban al lado de la suya: un
   naipe detras dice que son varias; el titulo las lista y cada clic va a la
   siguiente */
.chapa.grupo{box-shadow:2px 2px 0 -.5px #fff,2px 2px 0 .5px rgba(0,0,0,.45)}
/* y cuantos son (Marcos, 12/10: la columna de «4» del birmano) */
.chapa.grupo[data-n]::after{content:attr(data-n);position:absolute;top:-6px;right:-7px;
  min-width:9px;height:9px;padding:0 2px;border-radius:5px;background:#fff;color:#111;
  font:700 7px/9px var(--m);box-shadow:0 0 0 .5px rgba(0,0,0,.45);pointer-events:none}

/* ── el hallazgo que se esta mirando ──────────────────
   Marcos y Paola, 28/8: "el cuadradito amarillo con azul no me da tanta
   visualidad, se puede poner algun color rojo?" · "no podia identificar cual
   era el error que estaba tomando cuando tenias muchos errores juntos, porque
   es un verdecito muy leve".

   La idea que quedo es de Juan: el NUMERO conserva el color de la severidad
   -esa informacion no se pierde- y el recuadro del ACTIVO, y solo del activo,
   se pone rojo y grueso. Asi el color sigue diciendo que tan grave es, y el
   rojo dice cual estas mirando. */
.box.on{border-color:#ff2d55 !important;--b:3px;border-radius:5px;
  box-shadow:0 0 0 3px rgba(255,45,85,.35),0 0 22px -2px rgba(255,45,85,.7);
  animation:latido 1.4s ease-out 2}
.chapa.on{background:#ff2d55 !important;color:#fff;
  box-shadow:0 0 0 2px rgba(255,45,85,.35),0 0 10px -2px rgba(255,45,85,.7)}
@keyframes latido{
  0%{box-shadow:0 0 0 3px rgba(255,45,85,.35),0 0 0 0 rgba(255,45,85,.55)}
  70%{box-shadow:0 0 0 3px rgba(255,45,85,.35),0 0 0 14px rgba(255,45,85,0)}
  100%{box-shadow:0 0 0 3px rgba(255,45,85,.35),0 0 22px -2px rgba(255,45,85,.7)}}
/* los otros «iguales» del elegido (su mismo grupo): punteados, del mismo
   rojo, sin latido. Marcos, 12/10: que se vea dónde está el segundo. */
.box.hermana{border-color:#ff2d55 !important;border-style:dashed;--b:2px}
/* y la caja del original que le corresponde, del mismo rojo */
.box.src{border-color:#ff2d55;border-style:dashed;--b:2px;
  background:rgba(255,45,85,.08);box-shadow:0 0 0 2px rgba(255,45,85,.18);
  pointer-events:none}

/* hallazgos */
.notes{display:flex;flex-direction:column;gap:9px}
.note{display:grid;grid-template-columns:34px 1fr;gap:0 14px;padding:15px 16px;
  border-radius:13px;background:var(--glass);border:1px solid var(--line);transition:.2s}
.note:hover{background:var(--glass-2)}
/* la ficha del activo, con el mismo rojo que su recuadro: que se vea de
   que fila estamos hablando sin tener que buscarla */
.note.hl{border-color:rgba(255,45,85,.5);background:rgba(255,45,85,.06);
  box-shadow:inset 3px 0 0 #ff2d55}
.pill{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  color:var(--on-acc);font:600 13px/1 var(--f)}
.n-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.n-t{font-size:14px;font-weight:500;letter-spacing:-.012em}
.n-c{font:500 10px/1 var(--m);color:var(--dim);background:var(--glass-2);
  border:1px solid var(--line);padding:4px 7px;border-radius:6px}
.n-w{margin-left:auto;font:400 10.5px/1 var(--m);color:var(--dim-2)}
.n-m{margin:8px 0 0;font-size:13.5px;color:var(--dim);font-weight:300;line-height:1.6;max-width:88ch}
.ev{margin-top:11px;border-radius:10px;background:var(--sunk);border:1px solid var(--line);
  padding:10px 13px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;
  font-family:var(--m);font-size:11.5px;align-items:baseline}
.ev dt{color:var(--dim-2);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.ev dd{margin:0;color:var(--txt);word-break:break-word}
.n-h{margin:10px 0 0;font-size:12px;color:var(--cy);font-weight:300;
  padding-left:12px;border-left:2px solid rgba(142,231,255,.35);max-width:84ch}
.void-box{padding:34px;text-align:center;border-radius:14px;background:var(--glass);
  border:1px solid var(--line)}
.void-box strong{display:block;font-size:16px;font-weight:500;margin-bottom:7px}
.void-box span{color:var(--dim);font-size:13px;font-weight:300}

footer{border-top:1px solid var(--line);margin-top:auto}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0 30px}
footer span{font-size:12px;color:var(--dim-2);font-weight:300}

@media (max-width:900px){
  .cols,.pages{grid-template-columns:1fr}
  .note{grid-template-columns:28px 1fr;gap:0 11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── veredicto, filtros y visor con zoom ──────────────── */
.verdict{display:flex;align-items:center;gap:14px}
.beacon{width:12px;height:12px;border-radius:50%;flex:none;position:relative}
.beacon::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid currentColor;opacity:.35}
.verdict.ok .beacon{background:var(--s1);color:var(--s1);box-shadow:0 0 16px rgba(74,222,128,.7)}
.verdict.warn .beacon{background:var(--s3);color:var(--s3);box-shadow:0 0 16px rgba(240,138,44,.7)}
.verdict.block .beacon{background:var(--s5);color:var(--s5);
  box-shadow:0 0 16px rgba(225,29,72,.75);animation:blink 1.4s infinite}
.v-lab{font-size:clamp(20px,2.6vw,27px);font-weight:600;letter-spacing:-.03em;display:block}
.verdict.ok .v-lab{color:var(--s1)}
.verdict.warn .v-lab{color:var(--s3)}
.verdict.block .v-lab{color:var(--s5)}
.v-sub{margin:3px 0 0;font-size:12.5px;color:var(--dim);font-weight:300}

.filters{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:16px}
.sevs{display:flex;gap:7px;flex-wrap:wrap}
.sev-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:8px 13px;
  border-radius:10px;border:1px solid var(--line);background:var(--glass);
  color:var(--dim);font:500 12px/1 var(--f);transition:.18s}
.sev-btn:hover{background:var(--glass-2);color:var(--txt)}
.sev-btn .sq{width:9px;height:9px;border-radius:3px;opacity:.35;transition:opacity .18s}
.sev-btn.on{color:var(--txt);border-color:var(--line-2);background:var(--glass-2)}
.sev-btn.on .sq{opacity:1}
.sev-btn .n{font-family:var(--m);font-size:11px;color:var(--dim-2)}
.sev-btn:disabled{opacity:.35;cursor:default}
.f-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sel{background:var(--glass);border:1px solid var(--line);color:var(--dim);
  border-radius:10px;padding:9px 12px;font:400 12.5px/1 var(--f);cursor:pointer}
.sel:focus{outline:none;border-color:rgba(var(--acc-rgb),.45);color:var(--txt)}
.search{display:flex;align-items:center;gap:8px;background:var(--glass);
  border:1px solid var(--line);border-radius:10px;padding:0 12px}
.search svg{width:14px;height:14px;fill:none;stroke:var(--dim-2);stroke-width:2;flex:none}
.search input{background:none;border:0;outline:none;color:var(--txt);padding:9px 0;
  font:400 12.5px/1 var(--f);width:210px}
.search input::placeholder{color:var(--dim-2)}
.search:focus-within{border-color:rgba(var(--acc-rgb),.45)}

/* visor sincronizado */
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:12px}
.zoom{display:flex;align-items:center;gap:2px;background:var(--glass);
  border:1px solid var(--line);border-radius:10px;padding:3px}
.zoom button{width:30px;height:28px;border:0;background:none;color:var(--dim);cursor:pointer;
  border-radius:7px;font:500 15px/1 var(--f);transition:.15s}
.zoom button:hover{background:var(--glass-2);color:var(--acc-txt)}
.zoom .lvl{min-width:52px;text-align:center;font:500 11.5px/28px var(--m);color:var(--txt)}
.zoom .fit{width:auto;padding:0 10px;font-size:11.5px}
.sync{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);
  font-weight:300;cursor:pointer}
.canvas{overflow:auto;max-height:78vh;scrollbar-width:thin}
.canvas .inner{position:relative;line-height:0;width:100%}
.canvas img{width:100%;display:block}
.canvas::-webkit-scrollbar{width:9px;height:9px}
.canvas::-webkit-scrollbar-thumb{background:rgba(var(--w),.14);border-radius:9px}

.note .n-cat{font:400 10px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc-txt);background:var(--acc-dim);border:1px solid rgba(var(--acc-rgb),.2);
  padding:4px 8px;border-radius:6px}

.langsw{display:flex;gap:2px;background:var(--glass);border:1px solid var(--line);
  border-radius:99px;padding:3px}
.langsw button{border:0;background:none;color:var(--dim-2);cursor:pointer;
  font:600 11px/1 var(--f);letter-spacing:.04em;padding:6px 11px;border-radius:99px;
  transition:.16s}
.langsw button:hover{color:var(--txt)}
.langsw button.on{background:var(--acc);color:var(--on-acc)}

/* el mismo par de botones que el idioma, pero con luna y sol */
.temasw{display:flex;gap:2px;background:var(--glass);border:1px solid var(--line);
  border-radius:99px;padding:3px}
.temasw button{border:0;background:none;color:var(--dim-2);cursor:pointer;
  display:grid;place-items:center;padding:5px 9px;border-radius:99px;transition:.16s}
.temasw button svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.temasw button:hover{color:var(--txt)}
.temasw button.on{background:var(--acc);color:var(--on-acc)}

/* ── salto al error ───────────────────────────────────── */
.note{cursor:pointer;position:relative}
.n-go svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.n-go:hover{border-color:rgba(var(--acc-rgb),.5);color:var(--acc-txt)}
@keyframes flashbox{0%,100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0)}
  20%,60%{box-shadow:0 0 0 5px rgba(var(--acc-rgb),.55)}}
.box.flash{animation:flashbox 1.15s ease-out 2}
@keyframes flashpane{0%,100%{box-shadow:inset 0 0 0 0 rgba(var(--acc-rgb),0)}
  25%,65%{box-shadow:inset 0 0 0 3px rgba(var(--acc-rgb),.75)}}
.canvas.flash{animation:flashpane 1.15s ease-out 2}

/* ── panel de controles ───────────────────────────────── */
.chip.btn-chip{cursor:pointer;font-family:var(--f)}
.chip.btn-chip:hover{background:rgba(var(--acc-rgb),.26)}
.sheetwrap{position:fixed;inset:0;z-index:60;display:none;background:var(--scrim);
  backdrop-filter:blur(6px);padding:5vh 20px;overflow:auto}
.sheetwrap.open{display:block}
.panel{max-width:920px;margin:0 auto;background:var(--surf);border:1px solid var(--line-2);
  border-radius:20px;padding:clamp(20px,3vw,30px);box-shadow:0 40px 90px -30px var(--sh)}
.p-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:6px;flex-wrap:wrap}
.p-top h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.028em}
.p-top p{margin:6px 0 0;font-size:13px;color:var(--dim);font-weight:300;max-width:62ch}
.p-close{background:none;border:0;color:var(--dim-2);font-size:24px;line-height:1;
  cursor:pointer;padding:0 4px}
.p-close:hover{color:var(--txt)}
.p-acts{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 18px;align-items:center}
.p-acts .count{margin-left:auto;font:500 12px/1 var(--m);color:var(--acc-txt)}
.cat-h{font:500 10px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);margin:18px 0 9px}
.ck{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--glass);margin-bottom:6px;cursor:pointer;
  transition:.16s}
.ck:hover{background:var(--glass-2)}
/* Un control apagado se atenua por dentro, NO con opacity en la fila.
   `opacity` crea un contexto de apilado: el desplegable de severidad quedaba
   encerrado en la fila y las filas de abajo se le pintaban encima. Es el
   "error de desplegable" que reporto Marcos. */
.ck.off .id,.ck.off .txt{opacity:.45}
/* y la fila con el desplegable abierto se levanta sobre las que siguen */
.ck:has(.dd.open){position:relative;z-index:30}
.ck input{position:absolute;opacity:0;pointer-events:none}
.ck .sw{width:34px;height:19px;border-radius:99px;background:rgba(var(--w),.1);
  position:relative;transition:.2s;flex:none;margin-top:2px}
.ck .sw i{position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;
  background:var(--dim);transition:.22s cubic-bezier(.2,.8,.3,1)}
.ck.on .sw{background:var(--acc)}
.ck.on .sw i{transform:translateX(15px);background:var(--on-acc)}
.ck .id{font:500 10px/1 var(--m);color:var(--dim-2);background:var(--sunk);
  border:1px solid var(--line);padding:4px 6px;border-radius:5px;margin-top:2px;flex:none}
.ck .txt b{display:block;font-size:13.5px;font-weight:500}
.ck .txt span{display:block;font-size:12px;color:var(--dim);font-weight:300;margin-top:3px}

/* ── evidencia gráfica ────────────────────────────────── */
.swatch{display:inline-flex;align-items:center;gap:7px}
.swatch i{width:13px;height:13px;border-radius:4px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(var(--w),.3)}
.cmp{display:flex;align-items:flex-end;gap:16px;margin:12px 0 4px;flex-wrap:wrap}
.cmp > div{flex:1;min-width:150px}
.cmp-l{display:block;font:500 9.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim-2);margin-bottom:7px}
.cmp-col{height:46px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(var(--w),.16),
  0 6px 18px -8px var(--sh)}
.cmp code{display:block;margin-top:7px;font-family:var(--m);font-size:11.5px;color:var(--dim)}
.cmp-font{padding:12px 14px;border-radius:10px;background:var(--sunk);
  border:1px solid var(--line);font-family:var(--m);font-size:12px;color:var(--txt);
  word-break:break-word}
.cmp-a{width:18px;height:18px;fill:none;stroke:var(--dim-2);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-bottom:16px}
.zoom button:disabled{opacity:.25;cursor:default}
.zoom button:disabled:hover{background:none;color:var(--dim)}

/* ── ignorar hallazgos ──────────────────────────────────
   Los botones van fijos abajo del título y siempre visibles. Estuvieron
   pegados al fondo de la tarjeta y apareciendo sólo al pasar el mouse: en la
   columna lateral la tarjeta es más alta que el hueco visible, así que el
   botón de ignorar quedaba abajo de todo, fuera de la vista. */
/* Marcos, 7/9: "el boton de dismiss se sale del cuadro, y me da una bronca
   porque ya lo habiamos fixado". Se salia porque la fila no envolvia: tres
   botones en una columna angosta no entran, y el tercero se iba afuera de la
   ficha en vez de bajar. */
.n-acts{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 2px;min-width:0}
.n-acts>*{max-width:100%}
.n-go,.n-ig{position:static;display:inline-flex;align-items:center;gap:7px;
  background:var(--glass-2);border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font:500 11px/1 var(--f);padding:7px 11px;border-radius:8px;transition:.18s}
.n-ig svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.n-ig:hover{border-color:rgba(242,84,61,.55);color:var(--s4)}
.note.ign{opacity:.42}
.note.ign .n-t{text-decoration:line-through;text-decoration-color:var(--dim-2)}
.note.ign .n-acts{opacity:1}
.note.ign .n-ig:hover{border-color:rgba(74,222,128,.55);color:var(--s1)}
.n-ign{font:500 9.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim-2);border:1px dashed var(--line-2);padding:4px 7px;border-radius:6px}
/* ── lo que escribe la persona ───────────────────────────
   Tiene que distinguirse de lo automático de un vistazo: quien lee el informe
   necesita saber qué dijo la máquina y qué agregó un humano. */
.n-ed-b{position:static;display:inline-flex;align-items:center;gap:7px;
  background:var(--glass-2);border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font:500 11px/1 var(--f);padding:7px 11px;border-radius:8px;transition:.18s}
.n-ed-b svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.n-ed-b:hover{border-color:rgba(var(--acc-rgb),.5);color:var(--acc-txt)}
.n-ed,.n-mio{font:500 9.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;
  padding:4px 7px;border-radius:6px}
.n-ed{color:var(--acc-txt);border:1px solid rgba(var(--acc-rgb),.35);background:rgba(var(--acc-rgb),.07)}
.n-mio{color:var(--cy);border:1px solid rgba(142,231,255,.35);background:rgba(142,231,255,.08)}
.note.mio{border-left:2px solid rgba(142,231,255,.5)}
.n-nota{margin:9px 0 0;padding:9px 11px;border-radius:9px;font-size:12.5px;line-height:1.55;
  font-weight:300;color:var(--txt);background:rgba(142,231,255,.06);
  border:1px solid rgba(142,231,255,.18)}
.n-nota b{color:var(--cy);font-weight:600}

/* La ficha es una grilla de 34px + 1fr. Sin `min-width:0` la segunda columna
   se estira hasta el ancho de su contenido: el editor, con sus campos al 100%,
   la empujaba fuera del panel. Marcos: "se me desborda de la interfaz". Una vez
   guardado se veia bien porque el texto ya cabia. */
.note > div{min-width:0}
.editor input,.editor textarea{max-width:100%;box-sizing:border-box}
.editor{margin:12px 0 2px;padding:13px;border-radius:11px;cursor:default;
  background:var(--sunk);border:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:10px}
.editor .campo span{font-size:9.5px}
.editor input,.editor textarea{width:100%;background:var(--sunk);
  border:1px solid var(--line);border-radius:8px;color:var(--txt);
  font:300 12.5px/1.5 var(--f);padding:8px 10px;resize:vertical}
.editor input:focus,.editor textarea:focus{outline:none;
  border-color:rgba(var(--acc-rgb),.5);background:var(--sunk-2)}
.ed-sev{display:flex;align-items:center;gap:6px}
.ed-sev>span{font:500 9.5px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim-2);margin-right:3px}
.ed-s{width:26px;height:26px;border-radius:7px;cursor:pointer;transition:.15s;
  background:transparent;border:1px solid var(--line);color:var(--dim);
  font:600 11px/1 var(--m)}
.ed-s:hover{border-color:var(--c);color:var(--c)}
.ed-s.on{background:var(--c);border-color:var(--c);color:var(--on-acc)}
.ed-acts{display:flex;align-items:center;gap:8px}
.ed-sp{flex:1}

/* mientras se dibuja un comentario nuevo la hoja pide el recuadro */
.canvas.marcando{cursor:crosshair}
.canvas.marcando .inner{cursor:crosshair}
/* mientras se dibuja, las marcas que ya estan no tienen que robar el clic */
.canvas.marcando .box,.canvas.marcando .hbox{pointer-events:none}
/* la que se esta dibujando es la caja exacta del arrastre: sin aire */
.box.nueva{border:1.5px dashed var(--acc);background:rgba(var(--acc-rgb),.12);
  box-sizing:border-box;padding:0;margin:0;
  pointer-events:none}
.vtoggle.mk.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}

/* ── facturacion: la planilla que Marcos hacia a mano ── */
.tabla-wrap{overflow-x:auto;margin:-4px -4px 0;padding:4px;scrollbar-width:thin}
.tabla{width:100%;border-collapse:collapse;font-size:12.5px}
.tabla th{font:500 9.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim-2);text-align:left;padding:0 12px 11px;white-space:nowrap;
  border-bottom:1px solid var(--line)}
.tabla td{padding:11px 12px;border-bottom:1px solid rgba(var(--w),.04);
  color:var(--dim);font-weight:300;vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover td{background:rgba(var(--w),.02)}
.tabla td b{color:var(--txt);font-weight:600}
.tabla .n{text-align:right;font-family:var(--m);white-space:nowrap}
.tabla .m{font-family:var(--m);font-size:11.5px;white-space:nowrap}
.tabla .corta{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.bil-nota{margin:14px 2px 0;font-size:12px;line-height:1.6;font-weight:300;color:var(--dim-2)}

.k-p{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font:400 11px/1.3 var(--m);color:var(--dim-2)}

.row.ir{cursor:pointer;border-radius:9px;transition:.15s}
.row.ir:hover{background:var(--glass-2)}
.row.ir .p-ref{margin-right:2px}


/* buscar proyectos por referencia, cliente o nombre */
.p-buscar{position:relative;margin:0 0 16px}
.p-buscar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;fill:none;stroke:var(--dim-2);stroke-width:2;
  stroke-linecap:round;pointer-events:none}
.p-buscar input{width:100%;background:var(--glass);border:1px solid var(--line);
  border-radius:11px;color:var(--txt);font:300 13px/1 var(--f);padding:13px 14px 13px 38px}
.p-buscar input:focus{outline:none;border-color:rgba(var(--acc-rgb),.45);background:var(--glass-2)}
.p-ref{font:600 11.5px/1 var(--m);color:var(--acc-txt);text-decoration:none;
  padding:4px 8px;border-radius:6px;background:rgba(var(--acc-rgb),.1)}

/* arriba del analisis: el proyecto fijo y, al lado, el perfil */
.pp-fijo{display:inline-flex;align-items:baseline;gap:9px;padding:7px 12px;
  border-radius:9px;background:var(--glass);border:1px solid var(--line)}
.pp-fijo b{font:600 13px/1 var(--f);color:var(--txt)}
.pp-fijo em{font:300 12px/1 var(--f);font-style:normal;color:var(--dim)}
.pp-fijo i{font:400 11px/1 var(--m);font-style:normal;color:var(--dim-2)}
.pp-sp{flex:1}

.umb{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;
  align-items:end}
.umb-f{display:flex;flex-direction:column;gap:7px}
.umb-f span{font:400 12px/1.45 var(--f);color:var(--dim)}
/* el piso de confianza: la palanca que pidio Marcos el 30/8 */
.umb-conf{margin-top:14px;padding-top:16px;border-top:1px solid var(--line);
  flex-direction:column;align-items:flex-start;gap:8px}
.umb-f.ancho{max-width:none}
.umb-nota{margin:0;font:300 12.5px/1.6 var(--f);color:var(--dim-2);max-width:78ch}
.igbar.conf{border-color:rgba(var(--acc-rgb),.3);background:rgba(var(--acc-rgb),.05)}
/* si entre los escondidos hay graves, el aviso cambia de tono */
.igbar.conf.ojo{border-color:rgba(240,138,44,.45);background:rgba(240,138,44,.08)}
.igbar.conf.ojo span{color:var(--s3)}
.n-baja{font:500 9px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim-2);background:var(--glass-2);border:1px solid var(--line);
  padding:5px 7px;border-radius:6px}
.umb-f input{width:100px;background:var(--sunk);border:1px solid var(--line);
  color:var(--txt);border-radius:9px;padding:9px 11px;font:500 13px/1 var(--m)}
.umb-f input:focus{outline:none;border-color:rgba(var(--acc-rgb),.5)}

/* La barra de sensibilidad. Marcos, 4/9: "me refiero mas a una barra de corte:
   en base a esa sensibilidad se muestran mas o menos items". El numero va al
   lado y se mueve mientras se arrastra, para que se vea donde queda antes de
   soltar. */
.conf-barra{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.conf-barra span{flex:1 1 100%}
.conf-barra input[type=range]{flex:1 1 200px;width:auto;min-width:180px;
  padding:0;border:0;background:transparent;accent-color:var(--acc);cursor:pointer}
/* "No se pudo actualizar la lista". Antes la lista se vaciaba en silencio ante
   un corte de red y parecia que se habian borrado los proyectos. */
.lista-vieja{margin:0 0 12px;padding:11px 15px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--s3) 32%,transparent);
  background:color-mix(in srgb,var(--s3) 9%,transparent);
  font:300 12.5px/1.6 var(--f);color:var(--dim)}
.lista-vieja em{display:block;margin-top:4px;font:400 11px/1.5 var(--m);
  font-style:normal;color:var(--dim-2);word-break:break-word}

/* El proyecto al que pertenece el analisis, arriba del veredicto. */
.res-proy{margin:0 0 8px;font:500 10px/1 var(--f);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2)}

/* Con que se corrio esta corrida. Marcos, 7/9: "habria que ver una forma de
   avisar de que el proyecto esta atado a una sensibilidad". Un renglon gris
   arriba de las pestañas: informa, no interrumpe. */
.hojita{margin:-6px 0 16px;font:300 12px/1.6 var(--f);color:var(--dim-2);
  max-width:96ch}
.hojita em{font-style:normal;color:var(--dim)}

/* "No se pudo guardar". Marcos, 4/9: los tres proyectos de Euge decian guardado
   y no estaban, porque el error se iba a un console.warn que nadie mira. Va
   arriba de todo y en rojo: se perdio trabajo, no es un detalle. */
.nosave{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:0 0 18px;padding:14px 17px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--s5) 38%,transparent);
  background:color-mix(in srgb,var(--s5) 10%,transparent)}
.nosave>div{flex:1 1 320px;min-width:0}
.nosave strong{display:block;font:600 13.5px/1.4 var(--f);color:var(--s5)}
.nosave span{display:block;margin-top:3px;font:300 12.5px/1.6 var(--f);
  color:var(--dim);max-width:76ch}
.nosave em{display:block;margin-top:6px;font:400 11.5px/1.5 var(--m);
  font-style:normal;color:var(--dim-2);word-break:break-word}
/* El consumo que no se anoto: el trabajo esta guardado, asi que es un aviso y
   no una perdida. En naranja, no en rojo. */
.nosave.leve{border-color:color-mix(in srgb,var(--s3) 36%,transparent);
  background:color-mix(in srgb,var(--s3) 9%,transparent)}
.nosave.leve strong{color:var(--s3)}

/* Ningún idioma se pudo analizar: la tarjeta de progreso se queda, con el
   motivo de cada uno en la cola y la salida para volver a los archivos. */
.run-card.fallida .pct{opacity:.35}
.run-card.fallida .run-sub{color:var(--s5)}
.run-falla{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.run-falla p{flex:1 1 320px;margin:0;font:300 12.5px/1.6 var(--f);color:var(--dim)}

/* El idioma que la herramienta todavia no cubre entero. Marcos, 4/9: "hay que
   dejar en claro". Es un aviso, no un error: el archivo se analiza igual. */
.file .parcial{flex:none;font:500 9px/1 var(--f);letter-spacing:.04em;
  text-transform:uppercase;padding:5px 7px;border-radius:6px;cursor:help;
  color:var(--s3);background:color-mix(in srgb,var(--s3) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--s3) 30%,transparent)}

.conf-barra output{flex:none;min-width:52px;text-align:right;
  font:500 15px/1 var(--m);color:var(--acc-txt);font-variant-numeric:tabular-nums}
#umbReset{justify-self:start}

.cfg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;padding-bottom:2px}
.cfg-tab{background:none;border:1px solid transparent;color:var(--dim);cursor:pointer;
  font:500 12.5px/1 var(--f);padding:9px 14px;border-radius:9px;transition:.16s}
.cfg-tab:hover{color:var(--txt);background:var(--glass)}
.cfg-tab.on{color:var(--on-acc);background:var(--acc);border-color:var(--acc)}
.cfg-s[hidden]{display:none}
.bil-ido{display:inline-block;margin-left:7px;font:500 9.5px/1 var(--f);font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2);
  border:1px dashed var(--line-2);padding:3px 6px;border-radius:5px}

.cfg-pie{display:flex;justify-content:flex-end;margin:18px 0 8px}
/* el display de la clase le gana al [hidden]: hay que decirlo */
.cfg-pie[hidden],.profbar[hidden]{display:none}
.cfg-guardar:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}

/* el aviso de guardado */
.cfg-save{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font:500 11.5px/1 var(--f);color:var(--acc-txt);opacity:0;transform:translateY(-3px);
  transition:opacity .2s,transform .2s;padding:6px 10px;border-radius:8px;
  background:rgba(var(--acc-rgb),.09);border:1px solid rgba(var(--acc-rgb),.28)}
.cfg-save.on{opacity:1;transform:none}
.cfg-save[hidden]{display:none}
.cfg-save svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* la Configuracion sin catalogo: decir que pasa, no quedarse en blanco */
.ck-vacio{display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;padding:46px 24px;border-radius:13px;
  border:1px dashed var(--line-2);background:var(--glass)}
.ck-vacio strong{font:600 14px/1.4 var(--f);color:var(--txt);letter-spacing:-.01em}
.ck-vacio span{font:300 12.5px/1.6 var(--f);color:var(--dim);max-width:420px}
.ck-vacio .sp{width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--acc-txt);
  animation:girar .7s linear infinite}

.igbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;
  padding:11px 14px;border-radius:11px;background:rgba(var(--w),.02);
  border:1px dashed var(--line-2)}
.igbar span{font-size:12.5px;color:var(--dim);font-weight:300}
.igbar button{margin-left:auto}
button.dl{font-family:var(--f)}
button.dl:disabled{opacity:.6;cursor:default}

/* ── casillas de severidad ────────────────────────────── */
.sevs{align-items:center}
.sev-lab{font:500 10px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);margin-right:4px}
.sev-btn .tick{width:15px;height:15px;border-radius:5px;flex:none;display:grid;
  place-items:center;border:1.5px solid var(--line-2);transition:.16s}
.sev-btn .tick svg{width:10px;height:10px;fill:none;stroke:var(--on-acc);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:.16s}
.sev-btn.on .tick{background:var(--c);border-color:var(--c)}
.sev-btn.on .tick svg{opacity:1}
.sev-btn .sq{display:none}

/* ═══════════ estructura con barra lateral ═══════════ */
.app{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  border-right:1px solid var(--line);background:var(--side-bg);
  backdrop-filter:blur(18px);padding:20px 14px;z-index:30}
.side .logo{margin:4px 8px 26px}
.nav-main{display:flex;flex-direction:column;gap:3px;flex:1}
.nav-foot{display:flex;flex-direction:column;gap:3px;
  border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.nav-i{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:var(--dim);text-decoration:none;font:500 13.5px/1 var(--f);transition:.16s}
.nav-i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav-i:hover{background:var(--glass-2);color:var(--txt)}
.nav-i.on{background:rgba(var(--acc-rgb),.1);color:var(--acc-txt)}
.side-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 8px 2px}
.side-chip{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--f);
  color:var(--dim-2)}
.side-chip .live{width:5px;height:5px;border-radius:50%;background:var(--acc)}
.main{min-width:0;padding:clamp(24px,4vw,44px) clamp(18px,3.4vw,42px) 70px}

/* ── el ancho, y los monitores de 34 pulgadas ──────────────────────────
   Marcos, en `juan 2.docx` y otra vez en la reunion del 7/9: "en esta
   industria, por lo general, la mayoria usa monitores gigantes de 34, curvos.
   Me queda toda esta parte de la pantalla inutil. Se puede hacer que la
   pantalla se expanda para usar el maximo? Es decir, que se expanda a donde
   esta todo lo naranja, y cuando se colapse el menu tambien lo tome."

   Estaba clavado en 1300px, asi que en un 34" quedaban dos mil pixeles muertos
   a la derecha.

   No se estira todo por igual, a proposito. La pantalla de ANALISIS es la que
   gana de verdad: son tres columnas -miniaturas, las dos hojas, los hallazgos-
   y cada pixel de mas hace las hojas mas grandes, que es para lo que se compra
   un monitor asi. El Panel y Proyectos crecen menos, y Configuracion y
   Facturacion no crecen: son formularios y texto, y un renglon de dos mil
   pixeles no se lee.

   Los limites de linea de cada bloque de texto ya estan en `ch` -88ch, 78ch-,
   asi que ensanchar el contenedor no estira la prosa.

   Los RESULTADOS no tienen tope: tenian el de 2040px de toda la pantalla, y en
   un 34" las hojas se quedaban chicas con la pantalla vacia a los costados.
   Las hojas crecen hasta el alto de la pantalla (`altoParaHojas`) y se centran
   en su columna. Subir archivos y el progreso siguen con el suyo. */
.view{max-width:1300px;margin:0 auto}
#view-run{max-width:none}
#setup,#progress{max-width:2040px;margin-inline:auto}
#view-dash,#view-log{max-width:1640px}

.burger{display:none;position:fixed;top:14px;left:14px;z-index:50;width:40px;height:40px;
  border-radius:11px;background:var(--side-bg-2);border:1px solid var(--line);
  color:var(--txt);cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round}

/* encabezado de vista */
.vh{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  flex-wrap:wrap;margin-bottom:26px}
.vt{margin:9px 0 0;font-size:clamp(24px,3vw,33px);font-weight:600;letter-spacing:-.034em}
.card{background:var(--glass);border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,2.4vw,26px);margin-bottom:20px}
.card-h{margin-bottom:16px}
.card-h h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em}
.card-h p{margin:6px 0 0;font-size:13px;color:var(--dim);font-weight:300;max-width:70ch}

/* panel */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  margin-bottom:22px}
.kpi{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.kpi .k-l{font:500 10px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;color:var(--dim-2)}
.kpi .k-v{display:block;margin:11px 0 3px;font-size:31px;font-weight:600;letter-spacing:-.045em}
.kpi .k-s{font:400 11.5px/1.4 var(--m);color:var(--dim-2)}
.kpi.acc .k-v{color:var(--acc-txt)}
.dash-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
/* Marcos: "estaria bueno decir que lo que muestra el dashboard es el periodo
   actual del consumo". Va escrito, arriba de los numeros. */
.dash-aviso{margin:-4px 0 16px;font:300 12.5px/1.6 var(--f);color:var(--dim-2);max-width:78ch}
.row{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .r-m{flex:1;min-width:0}
.row .r-t{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .r-s{font:400 11px/1.4 var(--m);color:var(--dim-2);margin-top:3px}
.row .r-n{font:500 13px/1 var(--m);color:var(--dim);display:flex;gap:14px;flex:none}
/* Dos numeros sueltos no dicen nada. Marcos: "esos numeros no los entiendo".
   Misma pieza que la cabecera del proyecto: el numero, y debajo que es. */
.row .r-c{display:block;text-align:right;min-width:34px}
.row .r-c u{display:block;text-decoration:none;font:400 8.5px/1.4 var(--f);
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim-2);margin-top:5px}
.row .r-c.grave{color:var(--c)}
@media (max-width:640px){.row .r-c u{display:none}}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.bar-row .b-l{width:52px;font:500 11px/1 var(--m);color:var(--dim-2)}
.bar-row .b-t{flex:1;height:9px;border-radius:5px;background:rgba(var(--w),.06);overflow:hidden}
.bar-row .b-t i{display:block;height:100%;border-radius:5px}
.bar-row .b-n{width:34px;text-align:right;font:500 12px/1 var(--m)}
.empty{padding:26px;text-align:center;color:var(--dim-2);font-size:13px;font-weight:300}

/* ── mientras carga ───────────────────────────────────
   Un numero a medio llenar no se distingue de uno final y el que lo mira se
   lo cree. Un esqueleto no se lo cree nadie. */
.esq{display:flex;flex-direction:column;gap:14px;padding:18px 2px}
.esq.finas{gap:11px;padding:10px 2px}
.esq-f{display:flex;align-items:center;gap:14px}
.esq-b{display:block;height:11px;border-radius:6px;
  background:linear-gradient(90deg,rgba(var(--w),.05) 25%,rgba(var(--w),.11) 37%,
                             rgba(var(--w),.05) 63%);
  background-size:400% 100%;animation:brillo 1.4s ease-in-out infinite}
.esq-b.sm{height:8px;opacity:.7}
.esq-b.alto{height:26px;border-radius:8px;margin:10px 0 8px}
.esq-kpi .esq-b{margin-bottom:0}
.esq-kpi{display:flex;flex-direction:column;gap:6px}
@keyframes brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.esq-b{animation:none}}

/* ── gráficos ─────────────────────────────────────────
   Una serie por gráfico y un solo color: el largo dice el valor, el color no
   dice nada. Por eso no hay leyenda ni paleta que validar.
   La barra crece desde la base y sólo se le redondea la punta; el número va
   en su propia columna, alineado, porque adentro de la barra se corta y
   encima de la punta se pisa con el de al lado. */
.gr{margin-top:2px}
.gr-row{display:grid;grid-template-columns:minmax(84px,30%) 1fr auto;
  align-items:center;gap:12px;padding:6px 0}
.gr-row .g-l{font:400 12.5px/1.35 var(--f);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-row .g-t{height:10px;border-radius:0 5px 5px 0;background:rgba(var(--w),.06)}
.gr-row .g-t i{display:block;height:100%;border-radius:0 5px 5px 0;
  background:var(--acc);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.gr-row .g-n{font:500 12px/1 var(--m);color:var(--txt);min-width:62px;
  text-align:right;font-variant-numeric:tabular-nums}
.gr-row:hover .g-l{color:var(--txt)}

/* proporcion fija y no estirada: con preserveAspectRatio=none los puntos
   salen ovalados y las lineas de distinto grosor segun el ancho */
.gr-svg{display:block;width:100%;height:auto;aspect-ratio:640/150;margin-top:4px;overflow:visible}
.gr-svg .g-tick{fill:var(--dim-2);font:400 10px/1 var(--m)}
.gr-svg .g-tick.fin{text-anchor:end}
.gr-svg .g-eje{stroke:var(--line-2);stroke-width:1}
.gr-svg .g-ref{stroke:var(--dim-2);stroke-width:1;stroke-dasharray:2 4}
.gr-svg .g-area{fill:var(--acc);opacity:.1;stroke:none}
.gr-svg .g-lin{fill:none;stroke:var(--acc);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gr-svg .g-proy{stroke:var(--acc);stroke-width:2;stroke-dasharray:4 5;opacity:.55;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
/* el anillo del color de la superficie: si no, el punto se pierde donde
   cruza la línea */
.gr-svg .g-pt{fill:var(--acc);stroke:var(--surf);stroke-width:2}
.gr-svg .g-pt.fin{fill:var(--bg);stroke:var(--acc);stroke-width:2}
.gr-pie{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;
  font:400 11.5px/1 var(--f);color:var(--dim)}
.gr-pie i{display:inline-block;width:14px;height:2px;border-radius:2px;
  margin-right:7px;vertical-align:middle;background:var(--acc)}
.gr-pie i.proy{background:repeating-linear-gradient(90deg,var(--acc) 0 4px,transparent 4px 9px);
  opacity:.75}
.gr-pie i.ref{background:repeating-linear-gradient(90deg,var(--dim-2) 0 2px,transparent 2px 6px)}

/* ── facturación, ahora pantalla propia ───────────────
   Marcos: "billing no es settings, settings no es billing". */
.v-sub2{margin:-6px 0 18px;max-width:70ch;font-size:13.5px;font-weight:300;color:var(--dim)}
.bil-filtros{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.bil-filtros .p-buscar{flex:1;min-width:240px;margin:0}
/* el rango a medida: dos fechas, con su etiqueta */
.rango{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rango[hidden]{display:none}
.rango label{display:flex;align-items:center;gap:7px;
  font:500 10px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2)}
.rango input{font:400 12px/1 var(--m);padding:9px 10px;color-scheme:dark}
html[data-tema="claro"] .rango input{color-scheme:light}
.vh-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}


/* configuración */
.ck .sev-sel{margin-left:auto;flex:none}
.sev-sel select{background:var(--sunk);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:6px 8px;font:500 11.5px/1 var(--m);cursor:pointer}
.sev-sel select:focus{outline:none;border-color:rgba(var(--acc-rgb),.5)}
.ck .txt{flex:1;min-width:0}
.inp{background:var(--sunk);border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:9px 12px;font:400 12.5px/1 var(--m);width:150px}
.inp:focus{outline:none;border-color:rgba(var(--acc-rgb),.5)}
.fn-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.fn-row:last-child{border-bottom:0}
.fn-row .f-lang{min-width:120px;font-size:13px;font-weight:500}
.fn-row .f-map{flex:1;font-family:var(--m);font-size:12px;color:var(--dim)}
.fn-row .f-x{background:none;border:0;color:var(--dim-2);cursor:pointer;font-size:17px}
.fn-row .f-x:hover{color:var(--s4)}
.count{font:500 12px/1 var(--m);color:var(--acc-txt)}

@media (max-width:1000px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:250px;transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.2,.8,.3,1)}
  .side.open{transform:none}
  .burger{display:flex}
  .main{padding-top:66px}
  .dash-cols{grid-template-columns:1fr}
}

/* ── perfiles de configuración ────────────────────────── */
.profbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.prof-list{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.prof{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px;
  background:var(--glass);border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font:500 12.5px/1 var(--f);transition:.16s}
.prof:hover{background:var(--glass-2);color:var(--txt)}
.prof.on{border-color:rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.08);color:var(--acc-txt)}
.prof .p-n::before{content:"# "}
.prof .p-x{color:var(--dim-2);font-size:15px;line-height:1}
.prof .p-x:hover{color:var(--s4)}
.prof.add{border-style:dashed;color:var(--dim-2)}
.prof.add:hover:not(:disabled){color:var(--acc-txt);border-color:rgba(var(--acc-rgb),.45)}
.prof.add:disabled{opacity:.4;cursor:not-allowed}
.prof-plan{display:flex;align-items:center;gap:9px}
.prof-plan .p-lab{font:500 10px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim-2)}
.prof-plan .p-lim{font:400 11.5px/1 var(--m);color:var(--dim-2)}
.profpick{display:flex;align-items:center;gap:9px;margin-right:4px}
.profpick .pp-l{font:500 10px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim-2)}
.profpick .pp-n{font:400 11.5px/1 var(--m);color:var(--dim-2)}

/* controles que todavía no se pueden correr */
.ck.pend{opacity:.5;cursor:default;border-style:dashed}
.ck.pend .sw{background:rgba(var(--w),.06)}
.ck.pend .sw i{background:var(--dim-2)}
.ck.pend .sev-sel{display:none}
.need{display:inline-block;margin-top:6px;font:500 10px/1 var(--f);letter-spacing:.06em;
  text-transform:uppercase;color:var(--s3);border:1px dashed rgba(240,138,44,.4);
  padding:4px 8px;border-radius:6px}

/* renombrar la configuración en el lugar */
.prof .p-n::before{content:none}
.prof .p-n{outline:none;border-radius:5px;padding:1px 2px}
.prof .p-n.edit{background:var(--sunk-2);box-shadow:0 0 0 2px rgba(var(--acc-rgb),.5);
  cursor:text;min-width:34px;color:var(--txt)}
.p-ed{background:none;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
  color:var(--dim-2);opacity:0;transition:.16s}
.p-ed svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.prof:hover .p-ed,.prof.on .p-ed{opacity:1}
.p-ed:hover{color:var(--acc-txt)}
.p-x{background:none;border:0;padding:0;cursor:pointer;color:var(--dim-2);font-size:15px;
  line-height:1}

/* ── desplegables propios ─────────────────────────────── */
.dd{position:relative;display:inline-flex}
.dd select{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.dd-btn{display:inline-flex;align-items:center;gap:9px;background:var(--glass);
  border:1px solid var(--line);color:var(--txt);border-radius:10px;cursor:pointer;
  padding:9px 12px;font:500 12.5px/1 var(--f);transition:.16s;white-space:nowrap}
.dd.wide .dd-btn{min-width:132px;justify-content:space-between}
.dd-btn:hover{background:var(--glass-2);border-color:var(--line-2)}
.dd.open .dd-btn{border-color:rgba(var(--acc-rgb),.5);background:var(--glass-2)}
.dd-btn svg{width:13px;height:13px;fill:none;stroke:var(--dim-2);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;flex:none}
.dd.open .dd-btn svg{transform:rotate(180deg);stroke:var(--acc-txt)}

.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;z-index:70;
  background:var(--surf-2);border:1px solid var(--line-2);border-radius:12px;padding:5px;
  box-shadow:0 20px 50px -14px var(--sh);display:none;
  max-height:260px;overflow:auto}
.dd.up .dd-menu{top:auto;bottom:calc(100% + 6px)}
.dd.open .dd-menu,.dd-menu.portal{display:block;animation:ddin .14s ease-out}
/* abierto, el menú vive al final de la página: ninguna capa de la pantalla lo tapa */
.dd-menu.portal{position:fixed;top:auto;bottom:auto;right:auto;z-index:1000}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;color:var(--dim);cursor:pointer;text-align:left;
  padding:9px 11px;border-radius:8px;font:400 12.5px/1.3 var(--f);white-space:nowrap;
  transition:.12s}
.dd-opt:hover{background:var(--glass-2);color:var(--txt)}
.dd-opt svg{width:12px;height:12px;fill:none;stroke:var(--acc-txt);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;flex:none}
.dd-opt.on{color:var(--acc-txt);background:rgba(var(--acc-rgb),.08)}
.dd-opt.on svg{opacity:1}
.sev-sel .dd-btn{padding:6px 9px;font-size:11.5px;border-radius:8px}

/* ═══════════ visor: escenario, miniaturas y lista al costado ═══════════ */
/* La columna de hallazgos crece con la pantalla, con techo: en 1440 queda en
   320, en 1920 en 400 y desde 2300 en 480. Todo lo demas es de las hojas. */
.stage{--notas:clamp(320px,21vw,480px);
       display:grid;grid-template-columns:minmax(0,1fr) var(--notas);gap:clamp(12px,1.4vw,18px);
       align-items:start}
.stage.has-th{grid-template-columns:66px minmax(0,1fr) var(--notas)}
.pgs{min-width:0}
.pgs .pages:last-child{margin-bottom:0}

/* La tira de miniaturas scrollea a lo ALTO cuando el documento tiene muchas
   hojas, y nunca a lo ancho: una miniatura mide lo que mide la columna, asi que
   una barra horizontal ahi solo puede ser un desborde de un pixel. Marcos, 10/9,
   con la captura y una cruz encima: "miniaturas al 100%", "sin barra". */
.thumbs{position:sticky;top:14px;display:flex;flex-direction:column;gap:8px;
        max-height:calc(100vh - 34px);overflow-y:auto;overflow-x:hidden;
        scrollbar-width:thin;padding-right:2px}
.thumb{position:relative;padding:0;border:1px solid var(--line);border-radius:8px;
       background:var(--sunk);cursor:pointer;overflow:hidden;line-height:0;transition:.16s}
.thumb img{width:100%;display:block;opacity:.72;transition:opacity .16s}
.thumb:hover{border-color:var(--line-2)}
.thumb:hover img{opacity:1}
.thumb.on{border-color:rgba(var(--acc-rgb),.55);box-shadow:0 0 0 2px rgba(var(--acc-rgb),.16)}
.thumb.on img{opacity:1}
.thumb .t-n{position:absolute;left:3px;bottom:2px;font:500 9px/1.5 var(--m);color:var(--dim);
            background:var(--ink-ov);border-radius:4px;padding:0 4px}
.thumb i{position:absolute;top:3px;right:3px;min-width:13px;height:13px;padding:0 3px;
         border-radius:7px;font:600 8.5px/13px var(--m);color:var(--on-acc);text-align:center;
         font-style:normal}

.notes-side{position:sticky;top:14px;display:flex;flex-direction:column;
            max-height:calc(100vh - 34px);min-width:0}
.ns-h{display:flex;align-items:baseline;gap:9px;padding:0 10px 10px 2px;flex:none}
.ns-h span{font:500 10px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.ns-h em{font:600 13px/1 var(--m);font-style:normal;color:var(--acc-txt);margin-left:auto}
/* el orden y el buscador, arriba de la lista y no arriba de la pagina */
.ns-ctrl{display:flex;gap:8px;align-items:center;flex:none;margin-bottom:10px}
.ns-ctrl .dd{flex:none}
.ns-ctrl .search{flex:1;min-width:0;margin:0}
.ns-ctrl .search input{width:100%}
.notes-side .notes{overflow:auto;scrollbar-width:thin;padding-right:4px;gap:8px}
.notes-side .notes::-webkit-scrollbar{width:9px}
.notes-side .notes::-webkit-scrollbar-thumb{background:rgba(var(--w),.14);border-radius:9px}
.notes-side .note{padding:13px 14px}
.notes-side .n-m{font-size:12.5px}
.notes-side .n-w{margin-left:0}
.notes-side .igbar{flex:none}

/* Apilado sólo en ventanas angostas (media pantalla). Estaba en 1280, pero las
   columnas de más abajo («cerrar la lista de hallazgos») le ganaban a esta
   regla: entre 1000 y 1280 quedaban las tres columnas con las miniaturas EN
   FILA dentro de su columna de 66 px -se veía una sola- y la lista sin su
   propio scroll. Las columnas del apilado están en «ventanas angostas». */
@media (max-width:1000px){
  .stage,.stage.has-th{grid-template-columns:minmax(0,1fr)}
  .thumbs{position:static;flex-direction:row;max-height:none;overflow-x:auto;
          padding-bottom:6px;margin-bottom:12px}
  .thumb{flex:none;width:58px}
  .notes-side{position:static;max-height:none;margin-top:20px}
  .notes-side .notes{overflow:visible;max-height:none}
}

/* ── modo de comparación y superposición ── */
.vmode{display:flex;gap:2px;background:var(--glass);border:1px solid var(--line);
       border-radius:10px;padding:2px}
.vmode button{border:0;background:none;color:var(--dim-2);cursor:pointer;font:500 11.5px/1 var(--f);
              padding:7px 12px;border-radius:8px;transition:.16s}
.vmode button:hover{color:var(--txt)}
.vmode button.on{background:var(--acc);color:var(--on-acc)}

/* ── la cola de la capa 3, en la barra del visor ──────────────────────
   Sobria y en su renglón, como todo lo demás de la barra. Marcos no quiere
   esperar la IA para ver el análisis, así que esto no bloquea nada: sólo
   cuenta lo que falta. Las miniaturas llevan la marca de cada hoja. */
/* `display:flex` de una clase le gana al `[hidden]{display:none}` del
   navegador -misma especificidad, y el del autor va despues-, asi que con la
   capa 3 apagada el recuadro vacio se veia igual y le robaba un renglon a la
   barra en 1920. */
.iacola[hidden]{display:none}
/* Sin recuadro ni relleno, y el detalle en el cartelito: con un chip de los
   otros la barra pasaba de 56 a 98 px en 1920 —dos renglones— y el alto de la
   barra es alto que se le saca a las hojas (Juanma, 11/9). QUÉ hojas están en
   la cola lo dicen las miniaturas; acá va cuántas faltan. */
.iacola{display:flex;align-items:center;gap:4px;flex:none;
        font:500 10.5px/1 var(--m);color:var(--dim-2);cursor:default;
        justify-content:center;padding:1px 0 3px;white-space:nowrap}
/* un documento de una sola hoja no tiene tira de miniaturas: ahí va suelto en
   la barra del visor, que con un solo paginador tiene espacio de sobra */
.viewer-bar > .iacola{padding:0 9px;font-size:11.5px}
.iacola b{font:600 10px/1 var(--f);letter-spacing:.08em;color:var(--dim)}
.iacola em{font-style:normal;color:var(--s4)}
.iacola .pt{width:6px;height:6px;border-radius:50%;background:var(--dim-2);flex:none}
.iacola.activa{color:var(--txt)}
.iacola.activa b{color:var(--acc-txt)}
.iacola.activa .pt{background:var(--acc);animation:iapulso 1.25s ease-in-out infinite}
/* la corrida es final: el punto quieto, en verde, y la palabra (12/10) */
.iacola.final .pt{background:var(--s1)}
.iacola.final span{font:500 10px/1 var(--f);color:var(--dim)}
@keyframes iapulso{0%,100%{opacity:.35}50%{opacity:1}}

/* la miniatura dice en qué anda su hoja: un filete a la izquierda, que es el
   único lado libre -el número va abajo y la severidad arriba a la derecha- */
.thumb.ia-cola::after,.thumb.ia-corre::after,.thumb.ia-ok::after,.thumb.ia-mal::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.thumb.ia-cola::after{background:rgba(var(--w),.22)}
.thumb.ia-corre::after{background:var(--acc);animation:iapulso 1.25s ease-in-out infinite}
.thumb.ia-ok::after{background:rgba(var(--acc-rgb),.4)}
.thumb.ia-mal::after{background:var(--s4)}

.ovl-ctl{display:flex;align-items:center;gap:10px}
.ovl-ctl input[type=range]{-webkit-appearance:none;appearance:none;width:118px;height:4px;
  border-radius:4px;background:linear-gradient(90deg,var(--acc),rgba(var(--w),.14));outline:none}
.ovl-ctl input[type=range]:disabled{opacity:.35}
.ovl-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--acc);cursor:pointer;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.2)}
.ovl-ctl input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;
  background:var(--acc);cursor:pointer}
.ovl-ctl .lvl{min-width:38px;font:500 11.5px/1 var(--m);color:var(--txt)}

.pages.ovl{grid-template-columns:minmax(0,1fr)}
.canvas .inner{isolation:isolate;background:#fff}
.canvas img.over{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.canvas img.over.diff{mix-blend-mode:difference}

/* ── navegador de hallazgos ── */
.fnav{display:flex;align-items:center;gap:2px;margin-left:auto;background:var(--glass);
      border:1px solid var(--line);border-radius:10px;padding:2px}
.fnav button{width:28px;height:26px;border:0;background:none;color:var(--dim);cursor:pointer;
             border-radius:7px;display:grid;place-items:center;transition:.14s}
.fnav button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
                 stroke-linecap:round;stroke-linejoin:round}
.fnav button:hover:not(:disabled){background:var(--glass-2);color:var(--acc-txt)}
.fnav button:disabled{opacity:.25;cursor:default}
.fnav .pos{min-width:62px;text-align:center;font:500 11.5px/26px var(--m);color:var(--txt)}

.viewer-bar{flex-wrap:wrap}
.sh-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ── chips de categoría ── */
.cats{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:-8px 0 20px}
.cat-btn{cursor:pointer;padding:7px 12px;border-radius:9px;border:1px solid var(--line);
         background:var(--glass);color:var(--dim-2);font:500 11.5px/1 var(--f);
         display:inline-flex;align-items:center;gap:8px;transition:.16s}
.cat-btn:hover{background:var(--glass-2);color:var(--txt)}
.cat-btn.on{color:var(--txt);border-color:var(--line-2);background:var(--glass-2)}
.cat-btn:not(.on){opacity:.5;text-decoration:line-through;text-decoration-color:var(--dim-2)}
.cat-btn .n{font-family:var(--m);font-size:10.5px;color:var(--dim-2)}
.cat-all{background:none;border:0;cursor:pointer;color:var(--acc-txt);font:500 11.5px/1 var(--f);
         padding:7px 4px;text-decoration:underline;text-underline-offset:3px}

/* ═══════════ archivos con problemas ═══════════ */
.file.bad-row{border-color:rgba(242,84,61,.4);background:rgba(242,84,61,.06)}
.file .bad{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--f);
           color:var(--s4);white-space:nowrap}
.file .bad svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
               stroke-linecap:round;stroke-linejoin:round;flex:none}
#hint.bad{color:var(--s4)}
/* El archivo cuyo idioma no se reconoce: no frena la corrida, queda afuera y
   lo dice (Marcos, 12/10). Gris y no rojo: no es un error del archivo. */
.file.sin-idioma{opacity:.82}
.file.sin-idioma .nm{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--dim-2) 60%,transparent)}
.file.sin-idioma{flex-wrap:wrap;row-gap:6px}
/* el aviso va en su propio renglón, debajo: al lado se comía el nombre */
.file .noreco{display:inline-flex;align-items:center;gap:6px;font:500 11px/1.3 var(--f);
  color:var(--s3);cursor:help;min-width:0;order:9;flex-basis:100%;padding-left:2px}
.file .noreco svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.queue li.skip{opacity:.65}
.queue li.skip .nm{font-weight:400;text-decoration:line-through}
.res-omit{margin:-8px 0 16px;padding:9px 13px;border-radius:10px;font:400 12.5px/1.55 var(--f);
  color:var(--s3);background:color-mix(in srgb,var(--s3) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--s3) 26%,transparent)}
.file .lang-sel + .dd-btn,.file .dd .dd-btn{padding:5px 9px;font-size:10.5px;border-radius:7px}
.file .dd{flex:none}
/* Falta el idioma. Antes decia "guess" y mostraba el nombre entero del
   archivo adentro del campo: Marcos pregunto que significaba el amarillo.
   Ahora el amarillo significa una sola cosa -esto todavia no se puede
   analizar- y al lado dice por que. */
.file .dd.falta .dd-btn,.file .lang-sel.falta + .dd-btn{border-color:rgba(240,138,44,.55);
  color:var(--s3);background:rgba(240,138,44,.09)}
/* la region, al lado del idioma: por-BR y por-PT son los dos Portuguese */
.file .reg{flex:none;font:500 9.5px/1 var(--m);letter-spacing:.06em;color:var(--dim-2);
  background:var(--glass-2);border:1px solid var(--line);padding:5px 6px;border-radius:6px}
.file .inp-lang{flex:none;width:130px;background:var(--sunk);border:1px solid rgba(var(--acc-rgb),.45);
  color:var(--txt);border-radius:7px;padding:5px 9px;font:500 10.5px/1 var(--f);outline:none}

.warn-box{display:flex;align-items:flex-start;gap:13px;padding:15px 17px;margin-bottom:20px;
          border-radius:13px;border:1px solid rgba(240,138,44,.35);background:rgba(240,138,44,.08)}
.warn-box svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--s3);stroke-width:1.9;
              stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.warn-box strong{display:block;font-size:14px;font-weight:500;color:var(--s3)}
.warn-box span{display:block;margin-top:5px;font-size:12.5px;color:var(--dim);font-weight:300;
               line-height:1.6;max-width:80ch}

/* ═══════════ contra la revisión humana ═══════════ */
.fb-cta{display:flex;align-items:center;gap:15px;padding:16px 18px;margin-bottom:20px;
        border-radius:14px;border:1px dashed var(--line-2);background:rgba(var(--w),.015)}
.fb-cta svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--acc-txt);stroke-width:1.7;
            stroke-linecap:round;stroke-linejoin:round}
.fb-cta div{flex:1;min-width:0}
.fb-cta strong{display:block;font-size:14px;font-weight:500}
.fb-cta span{display:block;margin-top:4px;font-size:12.5px;color:var(--dim);font-weight:300;
             line-height:1.55;max-width:88ch}

.fb{margin-bottom:22px;border-radius:16px;border:1px solid var(--line);background:var(--sunk-soft);
    overflow:hidden}

/* ── la segunda vuelta ────────────────────────────────
   Corre un analisis entero, asi que el cartel tiene que decir que esta
   trabajando y no quedarse mudo dos minutos. */
.v2-run{border-style:solid;border-color:rgba(var(--acc-rgb),.3)}
.v2-spin{width:18px;height:18px;flex:none;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--acc);
  animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.v2-no{font:400 11.5px/1.4 var(--f);color:var(--dim-2);flex:none;max-width:24ch;text-align:right}
.fb-h{display:flex;align-items:center;gap:18px;padding:16px 18px;border-bottom:1px solid var(--line)}
.fb-h.ok{background:rgba(74,222,128,.07)}
.fb-h.warn{background:rgba(240,138,44,.07)}
.fb-h.block{background:rgba(232,58,58,.07)}
.fb-score{display:flex;align-items:baseline;gap:6px;flex:none}
.fb-score b{font-size:33px;font-weight:600;letter-spacing:-.045em;line-height:1}
.fb-h.ok .fb-score b{color:var(--s1)}
.fb-h.warn .fb-score b{color:var(--s3)}
.fb-h.block .fb-score b{color:var(--s5)}
.fb-score i{font-style:normal;font:400 12px/1 var(--m);color:var(--dim-2)}
.fb-t{flex:1;min-width:0}
.fb-t strong{display:block;font-size:15px;font-weight:500;letter-spacing:-.015em}
.fb-t span{display:block;margin-top:4px;font:400 11.5px/1.5 var(--m);color:var(--dim-2);
           word-break:break-word}

.fb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fb-col{padding:14px 16px;border-right:1px solid var(--line);min-width:0}
.fb-col:last-child{border-right:0}
.fb-col h5{margin:0 0 10px;display:flex;align-items:center;gap:8px;
           font:500 10px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;color:var(--dim-2)}
.fb-col h5 em{font-style:normal;font:600 12px/1 var(--m);margin-left:auto}
.fb-col.c-ok h5,.fb-col.c-ok h5 em{color:var(--s1)}
.fb-col.c-miss h5,.fb-col.c-miss h5 em{color:var(--s5)}
.fb-col.c-extra h5,.fb-col.c-extra h5 em{color:var(--acc-txt)}
/* la segunda vuelta: resueltos verde, siguen amarillo, nuevos rojo */
.fb-col.c-sigue h5,.fb-col.c-sigue h5 em{color:var(--s3)}
.fb-col p{margin:0;padding:10px 2px;font-size:12px;color:var(--dim-2);font-weight:300}
.fb-i{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
      padding:9px 10px;margin-bottom:5px;border-radius:9px;border:1px solid transparent;
      background:var(--glass);color:var(--dim);font:400 12px/1.4 var(--f);transition:.14s}
.fb-i:hover{background:var(--glass-2);border-color:var(--line-2);color:var(--txt)}
.fb-i .fb-p{font:500 9.5px/1 var(--m);color:var(--dim-2);flex:none}
.fb-i .fb-k{font:500 9px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;
            color:var(--dim-2);flex:none}
.fb-i .fb-x{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-i .fb-w{font:500 9.5px/1 var(--m);color:var(--dim-2);flex:none}
.fb-i .pill.sm{width:18px;height:18px;border-radius:6px;font-size:10px;flex:none}

@media (max-width:900px){.fb-cols{grid-template-columns:minmax(0,1fr)}
  .fb-col{border-right:0;border-bottom:1px solid var(--line)}}

/* la marca del revisor sobre la página */
.hbox{position:absolute;cursor:pointer;border:1.5px dashed #8ee7ff;border-radius:3px;
      background:rgba(142,231,255,.1);transition:.16s}
.hbox.solo{border-color:var(--s5);background:rgba(232,58,58,.12)}

/* La caja del ORIGINAL: solo la del hallazgo elegido, para que el original
   siga siendo legible. Punteada y sin numero, para no confundirla con las del
   target, que son el mapa de lo que hay que revisar. El color lo pone la regla
   de arriba: es el mismo rojo del activo, asi se ve que son la misma cosa. */

/* la pagina del original no siempre es la misma que la de la traduccion:
   cuando el texto se expande, el parrafo se corre de hoja */
.pg h4 .corrio{font-style:normal;color:var(--s3);margin-left:7px}
.pg h4 .corrio.otra{cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* la marca que se ignoro se va de la pagina sin redibujarla */
.box.oculta{display:none}
.n-sinsrc{margin:8px 0 0;font:300 11.5px/1.5 var(--f);color:var(--dim-2)}
.hbox:hover,.hbox.on{box-shadow:0 0 0 3px rgba(142,231,255,.3)}
.hbox b{position:absolute;top:-2px;right:-2px;padding:0 4px;height:14px;border-radius:5px;
        background:#8ee7ff;color:#04202a;font:600 8.5px/14px var(--m)}
.hbox.solo b{background:var(--s5);color:#fff}
.fb-note{margin:0;padding:11px 16px;border-top:1px solid var(--line);font-size:11.5px;
         color:var(--dim-2);font-weight:300;line-height:1.55}
#demo{margin-left:auto}

/* ═══════════ barra lateral minimizable ═══════════ */
.side-top{display:flex;align-items:center;gap:6px;margin:4px 8px 26px}
.side-top .logo{margin:0;flex:1;min-width:0}
.side-min{background:none;border:0;padding:5px;border-radius:8px;cursor:pointer;
          color:var(--dim-2);display:grid;place-items:center;transition:.16s;flex:none}
.side-min svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
              stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.side-min:hover{background:var(--glass-2);color:var(--acc-txt)}

.app.mini{grid-template-columns:62px 1fr}
.app.mini .side{padding-left:9px;padding-right:9px}
.app.mini .side-top{flex-direction:column;gap:10px;margin:4px 0 22px}
.app.mini .logo span,.app.mini .nav-i span{display:none}
.app.mini .side-min svg{transform:rotate(180deg)}
.app.mini .nav-i{justify-content:center;padding:11px 0}
.app.mini .side-foot{flex-direction:column;align-items:stretch;gap:7px;padding:12px 0 2px}
/* plegada, la barra tiene 44 px adentro: los dos pares de botones (ES/EN y
   luna/sol) iban en fila, medían 66 px y sobresalían del borde (Juanma,
   20/10: «está desfasado»); van apilados, una columna de 40 px */
.app.mini .langsw,.app.mini .temasw{flex-direction:column;align-self:center;border-radius:16px;padding:3px;gap:2px}
.app.mini .langsw button{padding:7px 0;width:34px;font-size:10px;text-align:center}
.app.mini .temasw button{padding:7px 0;width:34px}
.app.mini .side-chip span:not(.live){display:none}
.app.mini .side-chip{justify-content:center;padding:6px}

/* ═══════════ cerrar la lista de hallazgos ═══════════ */
.stage.no-notes,.stage.no-notes.has-th{grid-template-columns:minmax(0,1fr)}
.stage.has-th:not(.no-notes){grid-template-columns:66px minmax(0,1fr) var(--notas)}
.stage:not(.has-th):not(.no-notes){grid-template-columns:minmax(0,1fr) var(--notas)}
.stage.no-notes.has-th{grid-template-columns:66px minmax(0,1fr)}
.stage.no-notes .notes-side{display:none}

.vtoggle{display:inline-flex;align-items:center;gap:8px;background:var(--glass);
         border:1px solid var(--line);color:var(--dim);cursor:pointer;font:500 11.5px/1 var(--f);
         padding:7px 12px;border-radius:10px;transition:.16s}
.vtoggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;
             stroke-linecap:round;stroke-linejoin:round}
.vtoggle:hover{background:var(--glass-2);color:var(--txt)}
.vtoggle.off{opacity:.55}
.vtoggle.off svg{stroke:var(--dim-2)}

/* ═══════════ la página entra entera ═══════════
   El panel tiene un alto definido y `applyZoom` achica la página para que
   entre completa: sin scroll adentro del visor hasta que uno acerca a mano. */
.canvas{max-height:none;display:block;background:var(--sunk)}
.canvas .inner{margin:0 auto}
.pgs .pages{margin-bottom:0}

.pnav{display:flex;align-items:center;gap:2px;background:var(--glass);
      border:1px solid var(--line);border-radius:10px;padding:2px}
.pnav button{width:28px;height:26px;border:0;background:none;color:var(--dim);cursor:pointer;
             border-radius:7px;display:grid;place-items:center;transition:.14s}
.pnav button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
                 stroke-linecap:round;stroke-linejoin:round}
.pnav button:hover:not(:disabled){background:var(--glass-2);color:var(--acc-txt)}
.pnav button:disabled{opacity:.25;cursor:default}
.pnav .pos{padding:0 8px;font:500 11.5px/26px var(--m);color:var(--txt);white-space:nowrap}
/* lado a lado hay dos: el del original y el de la traduccion, cada uno con su
   nombre para que no haya que adivinar cual mueve cual */
.pnav .quien{padding:0 4px 0 8px;font:600 9.5px/26px var(--m);letter-spacing:.08em;
             text-transform:uppercase;color:var(--dim);white-space:nowrap;
             max-width:9em;overflow:hidden;text-overflow:ellipsis}
.pg{display:flex;flex-direction:column;align-items:center;min-width:0}
.pg h4{width:100%}
.pages{align-items:start}
.hbox b{top:0;right:0}

/* La barra del visor acompaña: si uno baja para ver el pie de la página, el
   zoom y el paginador se van con la vista en lugar de quedar arriba de todo. */
/* Marcos, 10/9: "mejora UI para que los botones y el texto no esten tan pegados
   al margen". Al ensanchar el visor para los monitores grandes, la barra y la
   cabecera de los hallazgos quedaron al ras del borde del panel. */
.viewer-bar{position:sticky;top:0;z-index:6;background:var(--bar-bg);
            backdrop-filter:blur(12px);padding:10px 14px;margin-bottom:6px;
            border-radius:0 0 10px 10px}
.thumbs,.notes-side{top:66px;max-height:calc(100vh - 86px)}
/* punto de color de la severidad, dentro del desplegable y en su botón */
.dd-dot{width:9px;height:9px;border-radius:3px;flex:none;display:inline-block;
        box-shadow:inset 0 0 0 1px var(--pg-ring)}
.dd-opt{gap:9px}
.dd-opt > span{flex:1;text-align:left}
.sev-sel .dd-btn{min-width:118px}
.sh-note{margin:12px 0 0;font-size:11.5px;color:var(--dim-2);font-weight:300;
         line-height:1.55;max-width:78ch}
/* cuántas veces aparece el mismo problema */
.n-x{font:500 10px/1 var(--m);color:var(--on-acc);background:var(--acc);padding:4px 7px;
     border-radius:6px;white-space:nowrap}

/* ═══════════ carteles explicativos ═══════════ */
.tip{position:relative;display:inline-flex;align-items:center;gap:7px;cursor:help;
     color:var(--dim-2);font:500 11.5px/1 var(--f);padding:9px 4px}
.tip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;
         stroke-linecap:round;stroke-linejoin:round}
.tip:hover,.tip:focus-visible{color:var(--acc-txt);outline:none}
.tip::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 8px);z-index:80;
  width:min(460px,72vw);padding:13px 15px;border-radius:12px;background:var(--surf);
  border:1px solid var(--line-2);box-shadow:0 22px 60px -18px var(--sh);
  color:var(--dim);font:300 12.5px/1.6 var(--f);text-align:left;white-space:pre-line;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s;pointer-events:none}
.tip:hover::after,.tip:focus-visible::after{opacity:1;visibility:visible;transform:none}

/* ═══════════ opción antes de analizar ═══════════ */
.opts{margin-top:clamp(18px,2.6vw,26px)}
.opt{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:14px;
     border:1px solid var(--line);background:var(--glass);cursor:not-allowed;position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .tr{width:34px;height:19px;border-radius:99px;background:rgba(var(--w),.09);
         position:relative;flex:none;transition:.2s}
.opt .tr i{position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;
           background:var(--dim-2);transition:.2s}
.opt input:checked + .tr{background:var(--acc)}
.opt input:checked + .tr i{transform:translateX(15px);background:var(--on-acc)}
.opt-t{flex:1;min-width:0}
.opt-t b{display:block;font-size:14px;font-weight:500}
.opt-t em{display:block;font-style:normal;font-size:12.5px;color:var(--dim-2);
          font-weight:300;margin-top:3px}
.opt-tag{font:500 9.5px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;
         color:var(--s3);border:1px dashed rgba(240,138,44,.45);padding:5px 9px;border-radius:7px}
.opt[data-tip]{cursor:help}
.opt[data-tip]::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 8px);
  z-index:80;width:min(520px,80vw);padding:13px 15px;border-radius:12px;background:var(--surf);
  border:1px solid var(--line-2);box-shadow:0 22px 60px -18px var(--sh);
  color:var(--dim);font:300 12.5px/1.6 var(--f);opacity:0;visibility:hidden;
  transform:translateY(-4px);transition:.18s;pointer-events:none}
.opt[data-tip]:hover::after{opacity:1;visibility:visible;transform:none}

/* ═══════════ listas del cliente ═══════════ */
.lst-row{display:flex;gap:10px;flex-wrap:wrap}
.lst-i{flex:1;min-width:118px;padding:13px 15px;border-radius:12px;
       border:1px solid var(--line);background:var(--glass)}
.lst-i b{display:block;font-size:23px;font-weight:600;letter-spacing:-.04em;color:var(--acc-txt)}
.lst-i span{display:block;font:400 11px/1.4 var(--m);color:var(--dim-2);margin-top:3px}
.lst-i em{display:block;font-style:normal;font:500 9px/1 var(--f);letter-spacing:.1em;
          text-transform:uppercase;color:var(--s3);margin-top:7px}
.lst-i.off{opacity:.4}
.lst-i.off b{color:var(--dim-2)}
.lst-msg{margin:13px 0 0;font-size:12.5px;color:var(--acc-txt);font-weight:300}


/* ═══════════ pantalla de ingreso ═══════════ */
.login{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
       background:var(--bg);padding:24px}
/* `display:grid` le gana al [hidden] del navegador por especificidad: sin esta
   linea la pantalla de ingreso tapa la aplicacion aunque este marcada oculta. */
.login[hidden]{display:none}
.login-card{width:min(380px,100%);display:flex;flex-direction:column;gap:14px;
            padding:32px 30px;border-radius:20px;border:1px solid var(--line);
            background:var(--glass);box-shadow:0 40px 90px -30px var(--sh)}
.login-card .logo{margin-bottom:0}
.login-tag{margin:-4px 0 8px;font-size:13.5px;line-height:1.4;color:var(--dim);font-weight:300;letter-spacing:-.005em}
.login-card h1{font-size:22px;font-weight:600;letter-spacing:-.03em;margin:0 0 4px}
.campo{display:flex;flex-direction:column;gap:6px}
/* el display de la clase le gana al [hidden] del navegador */
.campo[hidden]{display:none}
.campo span{font:500 10px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;
            color:var(--dim-2)}
.campo input{background:var(--sunk);border:1px solid var(--line);color:var(--txt);
             border-radius:10px;padding:12px 13px;font:400 14px/1 var(--f);outline:none;
             transition:.16s}
.campo input:focus{border-color:rgba(var(--acc-rgb),.5);background:var(--sunk-2)}
.login-card .btn{justify-content:center;margin-top:6px}
.login-err{margin:0;font-size:12.5px;color:var(--s4);font-weight:300}

/* ═══════════ quién soy ═══════════ */
.yo{display:flex;align-items:center;gap:10px;padding:11px 8px;margin-bottom:6px;
    border-top:1px solid var(--line)}
.yo-i{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
      background:var(--acc-dim);color:var(--acc-txt);font:600 12px/1 var(--f)}
.yo-t{flex:1;min-width:0}
.yo-t b{display:block;font:500 11.5px/1.3 var(--f);overflow:hidden;
        text-overflow:ellipsis;white-space:nowrap}
.yo-t em{display:block;font-style:normal;font:400 10px/1.3 var(--m);color:var(--dim-2)}
.yo-x{background:none;border:0;padding:4px;border-radius:7px;cursor:pointer;color:var(--dim-2);
      display:grid;place-items:center;flex:none;transition:.16s}
.yo-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
          stroke-linecap:round;stroke-linejoin:round}
.yo-x:hover{background:var(--glass-2);color:var(--s4)}
.app.mini .yo{flex-direction:column;gap:7px;padding:11px 0}
.app.mini .yo-t{display:none}

/* ═══════════ en qué proyecto se guarda ═══════════ */
.proy-pick{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
           margin-bottom:clamp(16px,2.4vw,24px)}
.proy-pick .pp-lab{font:500 10px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;
                   color:var(--dim-2)}
.proy-pick .pp-none{font:400 12px/1 var(--m);color:var(--dim-2)}

/* ═══════════ proyectos ═══════════ */
.proy-h{display:flex;align-items:center;gap:14px;padding:0 0 12px;
        border-bottom:1px solid var(--line);margin-bottom:4px}
.proy-cli{font:400 11px/1 var(--m);color:var(--dim-2);margin-left:8px}
.row.an{cursor:pointer;border-radius:9px;padding:12px 10px;margin:0 -10px;transition:.14s}
.row.an:hover{background:var(--glass-2)}
.an-ver{background:none;border:1px solid var(--line);color:var(--dim-2);cursor:pointer;
        font:500 10px/1 var(--f);padding:6px 10px;border-radius:7px;opacity:0;transition:.16s}
.row.an:hover .an-ver{opacity:1;color:var(--acc-txt);border-color:rgba(var(--acc-rgb),.45)}

/* Misma historia que .login: una regla de display con clase le gana al
   [hidden] del navegador. Sin esto, el bloque de usuario muestra un avatar
   vacio en modo local y los chips de categoria dejan un hueco. */
.yo[hidden]{display:none}
.cats[hidden]{display:none}

/* ═══════════ tablero ═══════════ */
.dash-filtro{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dash-filtro .pp-lab{font:500 10px/1 var(--f);letter-spacing:.15em;
                     text-transform:uppercase;color:var(--dim-2)}
.kpi .k-bar{display:block;height:4px;border-radius:4px;background:rgba(var(--w),.08);
            margin:8px 0 7px;overflow:hidden}
.kpi .k-bar i{display:block;height:100%;border-radius:4px;background:var(--acc)}
.kpi.alerta .k-bar i{background:var(--s3)}
.kpi.alerta .k-v{color:var(--s3)}

/* ═══════════ alta de cuenta ═══════════ */
.login-alt{margin:2px 0 0;text-align:center;font-size:12.5px;color:var(--dim-2);font-weight:300}
.login-alt button{background:none;border:0;padding:0 0 0 5px;cursor:pointer;color:var(--acc-txt);
                  font:500 12.5px/1 var(--f);text-decoration:underline;
                  text-underline-offset:3px}

/* ═══════════ panel de administración ═══════════ */
.adm-t{display:flex;flex-direction:column}
.adm-h,.adm-r{display:grid;grid-template-columns:minmax(0,2.2fr) 60px minmax(0,1.6fr) minmax(0,1.8fr) 130px;
              gap:16px;align-items:center}
.adm-h{padding:0 0 11px;border-bottom:1px solid var(--line);
       font:500 10px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.adm-r{padding:15px 0;border-bottom:1px solid var(--line)}
.adm-r:last-child{border-bottom:0}
.adm-n b{display:block;font-size:14px;font-weight:500}
.adm-n em{display:block;font-style:normal;font:400 10.5px/1.4 var(--m);color:var(--dim-2);
          margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-plan{font:600 11px/1 var(--m);color:var(--acc-txt);background:var(--acc-dim);
          padding:6px 8px;border-radius:7px;text-align:center}
.adm-uso b{display:block;font:500 13px/1 var(--m)}
.adm-bar{display:block;height:4px;border-radius:4px;background:rgba(var(--w),.08);
         margin:6px 0 5px;overflow:hidden}
.adm-bar u{display:block;height:100%;background:var(--acc);text-decoration:none}
.adm-bar.alta u{background:var(--s3)}
.adm-uso em{font-style:normal;font:400 10px/1 var(--m);color:var(--dim-2)}
.adm-w{font:400 11.5px/1.5 var(--m);color:var(--dim)}
.adm-f{font:400 11px/1 var(--m);color:var(--dim-2)}
@media (max-width:1100px){
  .adm-h{display:none}
  .adm-r{grid-template-columns:1fr;gap:8px}
}

/* ═══════════ ventana propia ═══════════ */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;
       background:var(--scrim);backdrop-filter:blur(8px);
       animation:modalin .16s ease-out}
.modal[hidden]{display:none}
@keyframes modalin{from{opacity:0}to{opacity:1}}
.modal-card{width:min(420px,100%);display:flex;flex-direction:column;gap:14px;
            padding:26px 26px 22px;border-radius:18px;border:1px solid var(--line-2);
            background:var(--surf);box-shadow:0 40px 90px -30px var(--sh);
            animation:rise .22s cubic-bezier(.16,.8,.3,1) both}
.modal-card h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.025em}
.modal-card .campo input{width:100%}
.modal-card .dd,.modal-card .dd-btn{width:100%}
.modal-card .dd-btn{justify-content:space-between}
.modal-err{margin:0;font-size:12.5px;color:var(--s4);font-weight:300}
.modal-acts{display:flex;gap:9px;justify-content:flex-end;margin-top:4px}

/* el cartel de lo que se va a perder: se lee antes que el campo */
.modal-aviso{margin:-4px 0 0;font-size:13px;line-height:1.55;font-weight:300;
             color:var(--dim);padding:12px 14px;border-radius:11px;
             border:1px solid rgba(225,29,72,.28);background:rgba(225,29,72,.07)}
.modal-aviso[hidden]{display:none}
.modal-aviso b{color:var(--txt);font-weight:600}

/* accion destructiva: se ve distinta al resto y no se toca por error */
.btn.peligro{background:var(--s5);color:#fff;border-color:transparent;
             box-shadow:0 6px 18px -8px rgba(225,29,72,.8)}
.btn.peligro:hover{background:#f43f5e}
.btn.peligro:disabled{background:rgba(225,29,72,.18);color:rgba(var(--w),.35);
                      box-shadow:none;cursor:not-allowed;transform:none}
.btn.peligro.ghost{background:transparent;color:var(--dim);
                   border:1px solid var(--line);box-shadow:none}
.btn.peligro.ghost:hover{background:rgba(225,29,72,.1);color:var(--s5);
                         border-color:rgba(225,29,72,.4)}
.p-del{margin-left:auto}

/* ═══════════ mirando la cuenta de un cliente ═══════════ */
.viendo{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:20px;
        border-radius:12px;border:1px solid rgba(240,138,44,.4);background:rgba(240,138,44,.09)}
.viendo[hidden]{display:none}
.viendo svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--s3);stroke-width:1.9;
            stroke-linecap:round;stroke-linejoin:round}
.viendo span{flex:1;min-width:0;font-size:13px}
.viendo b{font-weight:500;color:var(--s3)}
.viendo em{font-style:normal;color:var(--dim-2);font-size:12px}
.adm-r[data-org]{cursor:pointer;border-radius:10px;padding-left:10px;padding-right:10px;
                 margin-left:-10px;margin-right:-10px;transition:.14s}
.adm-r[data-org]:hover{background:var(--glass-2)}
.adm-r[data-org]:focus-visible{outline:2px solid rgba(var(--acc-rgb),.5);outline-offset:-2px}

/* ═══════════ proyectos: filas que se abren ═══════════ */
.lista-p{padding:6px 0}
.vacio-p{text-align:center;padding:44px 24px}
.vacio-p strong{display:block;font-size:17px;font-weight:500;margin-bottom:7px}
.vacio-p span{display:block;color:var(--dim);font-size:13px;font-weight:300;margin-bottom:18px}
.p-row{border-bottom:1px solid var(--line)}
.p-row:last-child{border-bottom:0}
/* la columna del veredicto va antes de los numeros: Marcos quiere saber si
   el proyecto requiere revision SIN abrirlo */
.p-cab{display:grid;grid-template-columns:16px minmax(0,2fr) 140px 66px 74px 90px 108px;
       gap:12px;align-items:center;width:100%;text-align:left;cursor:pointer;
       background:none;border:0;padding:15px 14px;color:var(--txt);
       border-radius:11px;transition:.14s;font-family:var(--f)}
.p-cab:hover{background:var(--glass-2)}
.p-fle{width:14px;height:14px;fill:none;stroke:var(--dim-2);stroke-width:2.2;
       stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.p-row.on .p-fle{transform:rotate(90deg);stroke:var(--acc-txt)}
.p-id{min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.p-id b{font-size:14px;font-weight:500}
.p-id em{font-style:normal;font:400 11px/1 var(--m);color:var(--dim-2)}
.p-id i{font-style:normal;font:500 9px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;
        color:var(--on-acc);background:var(--acc);padding:4px 7px;border-radius:6px}
.p-n{font:500 15px/1 var(--m)}
.p-n u{display:block;text-decoration:none;font:400 9.5px/1.4 var(--f);
       letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2);margin-top:4px}
.p-f{font:400 11px/1 var(--m);color:var(--dim-2);text-align:right}
.p-cuerpo:empty{display:none}
.p-cuerpo{padding:2px 14px 20px}
.p-sub{font:500 10px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
       color:var(--dim-2);margin:18px 0 8px}
.p-cod{font:400 11px/1 var(--m);color:var(--dim-2)}

/* ── el veredicto, a la vista ─────────────────────────
   Marcos: "estaria bueno que este pequeno resumen que tira aca arriba, que te
   dice requiere revision o esta bien, salga aca". El color no va solo: la
   pastilla dice la palabra, asi que se lee igual en blanco y negro. */
.ver{display:inline-block;max-width:100%;font-style:normal;font:500 9px/1 var(--f);
     letter-spacing:.04em;text-transform:uppercase;padding:6px 8px;border-radius:7px;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent}
.ver.ok{color:var(--s1);background:color-mix(in srgb,var(--s1) 13%,transparent);
        border-color:color-mix(in srgb,var(--s1) 30%,transparent)}
.ver.warn{color:var(--s3);background:color-mix(in srgb,var(--s3) 13%,transparent);
          border-color:color-mix(in srgb,var(--s3) 30%,transparent)}
.ver.block{color:var(--s5);background:color-mix(in srgb,var(--s5) 13%,transparent);
           border-color:color-mix(in srgb,var(--s5) 32%,transparent)}
.ver.sm{font-size:9px;padding:4px 7px;margin-left:8px;vertical-align:1px}
/* todavía en análisis: la IA no terminó de leer (12/10). Late como el chip. */
.ver.analizando{color:var(--acc-txt);background:rgba(var(--acc-rgb),.12);
                border-color:rgba(var(--acc-rgb),.35);animation:iapulso 1.25s ease-in-out infinite}
/* y «final» al lado del veredicto cuando la IA leyó todo */
.p-final{display:inline-block;font-style:normal;font:500 9px/1 var(--f);letter-spacing:.06em;
         text-transform:uppercase;color:var(--dim);margin-left:6px;vertical-align:1px}
.p-ver{min-width:0}

/* ── proyecto finalizado ──────────────────────────────
   No borra nada: bloquea. Y se nota de lejos que esta cerrado. */
.p-row.fin .p-cab{opacity:.62}
.p-row.fin .p-cab:hover{opacity:1}
/* "Finalizado" viaja a la columna de estado, al lado del veredicto: Marcos,
   4/9, "que este el estatus aca, con el resto". Se pinta como las otras
   pastillas de estado, en gris, porque un proyecto cerrado no pide nada. */
.p-ver i.p-fin{display:inline-block;max-width:100%;font-style:normal;
  font:500 9px/1 var(--f);letter-spacing:.04em;text-transform:uppercase;
  padding:6px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--dim);background:var(--glass-2);
  border:1px solid var(--line-2)}
.p-finav{margin:-8px 0 16px;font:300 12.5px/1.6 var(--f);color:var(--dim-2);max-width:70ch}

/* La corrida de un proyecto finalizado se lee, pero no se abre: es lo que
   "bloqueado" queria decir y no cumplia. Sin cursor de mano y sin resaltado al
   pasar, para que no invite a un clic que no hace nada. */
.row.an.bloq{cursor:default;opacity:.72}
.row.an.bloq:hover{background:transparent}

/* ── el resumen del proyecto ──────────────────────────
   Marcos: "una pequena descripcion de por que esta, cual es el resultado del
   analisis, sin necesidad de tener que abrir cada uno de los archivos. Pero
   una descripcion muy corta". Una linea. */
.p-res{margin:-4px 0 4px;padding:12px 15px;border-radius:12px;
  border:1px solid var(--line);border-left-width:3px;background:var(--sunk-soft)}
.p-res.ok{border-color:color-mix(in srgb,var(--s1) 26%,transparent)}
.p-res.warn{border-color:color-mix(in srgb,var(--s3) 26%,transparent)}
.p-res.block{border-color:color-mix(in srgb,var(--s5) 28%,transparent)}
.p-res p{margin:0;font:300 13px/1.6 var(--f);color:var(--dim);max-width:88ch}

/* el numero de corrida, para poder decir "el segundo analisis" */
.r-nro{flex:none;width:24px;height:24px;border-radius:8px;display:grid;
  place-items:center;font:500 11px/1 var(--m);color:var(--dim-2);
  background:var(--glass);border:1px solid var(--line)}
.row.an:hover .r-nro{color:var(--txt);border-color:var(--line-2)}

/* los archivos guardados */
.doc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px;
     background:var(--glass)}
.doc-h{display:flex;align-items:center;gap:10px}
.doc-h b{flex:1;min-width:0;font-size:13px;font-weight:500;overflow:hidden;
         text-overflow:ellipsis;white-space:nowrap}
.doc-f{font:600 9px/1 var(--m);color:var(--acc-txt);background:var(--acc-dim);
       padding:5px 7px;border-radius:6px;flex:none}
.doc-d{background:none;border:1px solid var(--line);color:var(--dim-2);cursor:pointer;
       font:500 10px/1 var(--f);padding:6px 10px;border-radius:7px;flex:none;transition:.14s}
.doc-d:hover{border-color:rgba(var(--acc-rgb),.45);color:var(--acc-txt)}
.doc-e{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
       display:flex;flex-direction:column;gap:7px}
.ent{display:flex;align-items:center;gap:10px}
.ent i{font-style:normal;font:500 9.5px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;
       color:var(--dim);background:var(--glass-2);padding:5px 8px;border-radius:6px;
       min-width:64px;text-align:center;flex:none}
.ent b{flex:1;min-width:0;font:400 12px/1.3 var(--m);color:var(--dim);overflow:hidden;
       text-overflow:ellipsis;white-space:nowrap}
.ent em{font-style:normal;font:400 10.5px/1 var(--m);color:var(--dim-2);flex:none}

@media (max-width:1000px){
  .p-cab{grid-template-columns:16px minmax(0,1fr) 140px;gap:10px}
  .p-n,.p-f{display:none}
}
@media (max-width:640px){
  .p-cab{grid-template-columns:16px minmax(0,1fr)}
  .p-ver{display:none}
}

/* Las miniaturas NO se agrandan con la pantalla. Se habian subido a 70px junto
   con la columna, y agrandarlas hace mas alta la pila entera: con seis hojas ya
   no entra en `max-height` y aparece una barra de scroll adentro de la tira.
   Marcos, 10/9: "antes las paginas estas estaban al 100%, ahora te sale esto".
   Una miniatura es para ver la hoja de un vistazo; que sea cuatro pixeles mas
   grande no aporta nada y cuesta la barra. */

/* ═══════════ pantalla completa ═══════════
   Juanma, 11/9: las dos hojas comparadas a toda la pantalla, con los hallazgos
   al costado. Es el mismo visor: se esconde la cabecera del analisis y el
   escenario se lleva todo el alto. Las hojas y la lista scrollean cada una
   por su lado; la ventana no se mueve. */
body.con-completa{overflow:hidden}
#detail.completa{position:fixed;inset:0;z-index:70;background:var(--bg);
  display:flex;flex-direction:column;padding:10px 14px 12px}
#detail.completa .sheet{flex:1;min-height:0;display:flex;flex-direction:column;padding:0;
  border:0;border-radius:0;background:none;backdrop-filter:none;animation:none}
/* la hoja ya entró: al salir de pantalla completa no vuelve a «subir» (ver
   `pantallaCompleta`) */
#detail.asentada .sheet{animation:none}
#detail.completa .sh-cab{display:none}
#detail.completa .viewer-bar{position:static;flex:none;border-radius:10px;margin-bottom:10px}
#detail.completa .stage{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
/* los mismos anchos de siempre: en pantalla completa no se apila aunque la
   pantalla sea de 1280, que es justo donde mas falta hace el lugar */
#detail.completa .stage.has-th:not(.no-notes){grid-template-columns:66px minmax(0,1fr) var(--notas)}
#detail.completa .stage:not(.has-th):not(.no-notes){grid-template-columns:minmax(0,1fr) var(--notas)}
#detail.completa .stage.no-notes.has-th{grid-template-columns:66px minmax(0,1fr)}
#detail.completa .pgs{min-height:0;overflow:auto;scrollbar-width:thin}
#detail.completa .thumbs{position:static;flex-direction:column;max-height:none;min-height:0;
  overflow-y:auto;overflow-x:hidden;margin:0;padding-bottom:0}
#detail.completa .thumb{width:auto}
#detail.completa .notes-side{position:static;max-height:none;min-height:0;margin-top:0}
#detail.completa .notes-side .notes{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
.zoom .full{display:flex;align-items:center;gap:6px;white-space:nowrap;width:auto;padding:0 10px;font-size:11.5px}
.zoom .full svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.zoom .full.on{color:var(--acc-txt);background:var(--glass-2)}

/* ═══════════ el visor se lleva el ancho ═══════════
   Juanma, 12/9: "sigue sobrando todo eso y se ve muy chico el pdf, tiene que
   ocupar esa parte".

   Dos hojas verticales lado a lado se quedan sin ANCHO mucho antes que sin
   alto -de ahi que sobre abajo-, asi que lo unico que agranda la hoja es
   sacarle ancho a lo que no es la hoja. Mientras el visor esta abierto
   (`.app.visor`, lo pone `ajustarAnchoVisor`) la barra lateral se colapsa a
   iconos -eso ya existia a mano- y los rellenos de la pagina se achican de
   42 y 28 a 12 y 10. En 1920 la hoja pasa de 507 a ~650 px de ancho.

   Fuera del visor no cambia nada: las pantallas de formulario siguen con su
   aire, que es lo que las hace legibles. */
.app.visor .main{padding-left:12px;padding-right:12px}
.app.visor #view-run .sheet{padding-left:10px;padding-right:10px}
.app.visor #view-run .stage{gap:clamp(8px,1vw,14px)}
/* Y la columna de hallazgos deja de crecer con la pantalla mas alla de lo que
   necesita para leerse: el resto es de las hojas. */
.app.visor .stage{--notas:clamp(300px,19vw,420px)}

/* ═══════════ ventanas angostas ═══════════
   Debajo de 1000 px la barra lateral sale del flujo (queda fija, detrás del
   botón de menú), pero `.app.mini` -que el visor prende solo- seguía pidiendo
   su columna de 62 px: el contenido entero caía en ESA columna y el visor
   quedaba de 16 px de ancho (el «colapso» con media pantalla). Y las dos
   hojas siguen lado a lado, que es para lo que está el visor: apiladas, cada
   una ocupaba la ventana entera. Las miniaturas van en fila arriba y los
   hallazgos debajo de las hojas. */
@media (max-width:1000px){
  .app.mini{grid-template-columns:minmax(0,1fr)}
  .stage.has-th:not(.no-notes),.stage:not(.has-th):not(.no-notes),.stage.no-notes.has-th{grid-template-columns:minmax(0,1fr)}
  .pages[data-pg]:not(.ovl){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* la pestaña IA · equipo de Configuración: el interruptor y sus notas, apilados */
.ia-eq{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ia-eq .umb-nota{margin:0}

/* las dos hojas de una fila aparecen juntas (Marcos, 18/9): mientras falta
   alguna, la fila queda con el fondo del lienzo y nada a medio cargar */
.pages.esperando .canvas .inner{visibility:hidden}
/* al pasar de hoja la imagen anterior se queda hasta que la nueva está lista;
   las marcas, que ya son las de la hoja nueva, esperan con ella */
.canvas .inner.cambiando .box,.canvas .inner.cambiando .chapa,.canvas .inner.cambiando .hbox{visibility:hidden!important}

/* el veredicto de la persona sobre un hallazgo: la referencia para calibrar */
.n-vd{position:static;display:inline-flex;align-items:center;gap:6px;
  background:var(--glass-2);border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font:500 11px/1 var(--f);padding:7px 11px;border-radius:8px;transition:.18s}
.n-vd:hover{border-color:rgba(74,222,128,.55);color:var(--s1)}
.n-vd.no:hover{border-color:rgba(242,84,61,.55);color:var(--s4)}
.n-vd.on{border-color:rgba(74,222,128,.7);color:var(--s1);background:rgba(74,222,128,.10)}
.n-vd.no.on{border-color:rgba(242,84,61,.7);color:var(--s4);background:rgba(242,84,61,.10)}
.n-vd-b{font:500 9.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:6px}
.n-vd-b.cierto{color:var(--s1);border:1px solid rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.n-vd-b.falso{color:var(--s4);border:1px solid rgba(242,84,61,.35);background:rgba(242,84,61,.08)}
/* la chapa del archivo vivo (Word / PowerPoint) junto a su PDF */
.file .vivo{font:500 9.5px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;color:var(--s1);border:1px solid rgba(74,222,128,.35);background:rgba(74,222,128,.08);white-space:nowrap}
/* el aviso del idioma con cobertura parcial, abierto con un clic */
.sop-nota{font:12px/1.45 var(--f);color:var(--fg2,#bbb);padding:6px 10px 10px 34px;opacity:.9}
/* lo que otros controles también vieron del mismo error */
.n-tambien{font:500 10px/1.2 var(--f);color:var(--fg2,#bbb);padding:3px 6px;border-radius:6px;border:1px dashed rgba(255,255,255,.18)}
/* los otros hallazgos del mismo párrafo: un número por cada uno, que lleva a él */
.n-mismo{display:inline-flex;align-items:center;gap:3px;font:500 10px/1.2 var(--f);color:var(--fg2,#bbb)}
.n-mismo b{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:5px;
  font:700 10px/1 var(--f);color:#111;cursor:pointer}
.n-mismo b:hover{outline:2px solid var(--fg,#fff);outline-offset:1px}
/* la flecha de lo aprendido de los veredictos: la confianza subió o bajó, cuánto y por cuántos */
.n-apr{font-style:normal;font-weight:600;color:var(--s1);white-space:nowrap}
/* la explicación de la IA vino en el otro idioma (12/10) */
.n-idioma{margin:4px 0 0;font-size:11.5px;color:var(--dim);font-weight:300;line-height:1.5;font-style:italic}
/* lo que el servidor terminó con la IA mientras no había nadie (12/10) */
.igbar.ia-aviso{border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.1)}
.igbar.ia-aviso span{color:var(--fg);font-weight:400}
.ns-h .rev{margin-left:auto;align-self:center}
.ns-h .rev.on{color:var(--s1);border-color:rgba(74,222,128,.55)}

/* El aviso de que la hoja no es el archivo sino un dibujo hecho con lo que el
   archivo dice (Word/PowerPoint/Excel sin PDF). Va donde se ven las hojas. */
.vistagen {
  /* en la barra del visor, en un renglón: arriba de las miniaturas se partía
     en cuatro y parecía una hoja 1 que no había cargado (Marcos, 1/10) */
  margin: 0; padding: 3px 8px; border-radius: 6px; cursor: help; white-space: nowrap;
  font-size: 11px; line-height: 1.3; align-self: center;
  color: var(--fg-dim, #6b7280); background: var(--chip, #f3f4f6);
  border: 1px dashed var(--bd, #d1d5db);
}

/* El separador de la lista: arriba lo que cuenta (lo mismo que la tarjeta del
   idioma), abajo lo ignorado y lo dudoso cuando están a la vista. Marcos,
   12/10: "arriba dice 1 mayor pero adentro hay 2 de severidad 5". */
.ns-sep{display:flex;align-items:center;gap:10px;margin:8px 2px 2px;
  font:500 10.5px/1.45 var(--f);color:var(--dim-2)}
.ns-sep::before,.ns-sep::after{content:"";flex:1 1 18px;height:1px;background:var(--line-2,var(--line))}
.ns-sep span{flex:0 1 auto;text-align:center}
.n-x[data-go]{cursor:pointer}
.n-x[data-go]:hover{filter:brightness(1.1);text-decoration:underline}