/* ===========================================================================
   Zona Inmobiliaria JR · Revisor de promesas
   ---------------------------------------------------------------------------
   El naranja #EF7F2D es la marca y solo la marca: nunca dice el estado de algo.
   El cian #029DD6 es lo que se puede tocar. La escala de riesgo va aparte, en
   tierras apagadas, para que un documento crítico no compita visualmente con
   el logo ni con un botón.

   Esto es una herramienta de trabajo: alguien va a pasar horas leyendo dos
   columnas de texto legal aquí dentro. Por eso el documento manda --tipografía
   con serifa, medida de línea holgada, el máximo de alto disponible-- y todo
   lo demás se hace a un lado: gris, pequeño, sin sombras que llamen la
   atención. Lo que brilla es lo que hay que mirar.
   =========================================================================== */

:root{
  /* --- marca --- */
  --jr-naranja:#EF7F2D; --jr-naranja-900:#C4611A;
  --jr-cian:#029DD6; --jr-cian-900:#02719A;

  /* --- superficies --- */
  --ground:#EFF2F4; --surface:#FFFFFF; --surface-2:#F6F8F9; --surface-3:#EDF1F3;
  --ink:#141A1E; --ink-2:#39444B; --muted:#68757D;
  --line:#D6DDE1; --line-2:#E8ECEF;

  --accent:var(--jr-cian-900); --accent-soft:#E3F2F9;

  /* --- riesgo: tierras, no semáforo de tránsito --- */
  --critico:#A8251D; --alto:#B25C0D; --medio:#6F6318; --bajo:#4E6375;
  --critico-soft:#FAE8E6; --alto-soft:#FBF0E2; --medio-soft:#F6F2DE; --bajo-soft:#EAEFF3;

  /* --- diferencias entre los dos documentos --- */
  --add:#02719A; --add-soft:#E3F2F9; --del-soft:#FAE8E6;

  /* --- ritmo --- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:34px;
  --r1:4px; --r2:7px; --r3:10px;

  /* Dos alturas y nada más. La primera para tarjetas, la segunda para lo que
     flota encima de todo. Tres alturas de sombra ya es ruido. */
  --sombra:0 1px 2px rgba(20,26,30,.05), 0 10px 26px -20px rgba(20,26,30,.35);
  --sombra-alta:0 14px 44px -12px rgba(20,26,30,.24), 0 3px 9px rgba(20,26,30,.08);

  --f-doc:'Spectral', Georgia, 'Times New Roman', serif;
  --f-ui:'Public Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Los dos paneles y el riel comparten alto exacto: si no coinciden, el salto
     sincronizado deja una marca arriba y la otra abajo. */
  --alto-panel:clamp(430px, 64vh, 780px);
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#0E1215; --surface:#161C20; --surface-2:#1C2328; --surface-3:#222A30;
    --ink:#E6EAED; --ink-2:#BFC8CD; --muted:#8C979E;
    --line:#2A333A; --line-2:#212930;
    --accent:#54BFE7; --accent-soft:#0F2E3B;
    --critico:#E89286; --alto:#DFA466; --medio:#CABD70; --bajo:#9DB4C6;
    --critico-soft:#2E1A17; --alto-soft:#2E2416; --medio-soft:#2A2716; --bajo-soft:#1A232A;
    --add:#54BFE7; --add-soft:#0F2E3B; --del-soft:#2E1A17;
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -20px rgba(0,0,0,.9);
    --sombra-alta:0 14px 44px -12px rgba(0,0,0,.7), 0 3px 9px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--f-ui);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:var(--f-doc);margin:0;text-wrap:balance;letter-spacing:-.01em}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--jr-cian);outline-offset:2px;border-radius:var(--r1)}
[hidden]{display:none!important}
::selection{background:var(--accent-soft);color:var(--ink)}

/* ---------------------------------------------------------------- barra --- */
.barra{
  display:flex;align-items:center;gap:var(--e4);
  padding:0 var(--e5);height:60px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,26,30,.02), 0 6px 18px -18px rgba(20,26,30,.5);
  position:sticky;top:0;z-index:40;
}
/* El naranja entra por una línea fina arriba. Es identidad, no un aviso: si
   ocupara más, competiría con los niveles de riesgo, que sí hay que mirar. */
.barra::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg, var(--jr-naranja), var(--jr-naranja-900));
}
.marca{display:flex;align-items:center;gap:var(--e3);text-decoration:none;color:inherit;flex:none}
/* El logo de la empresa, no un cuadro con las letras. El archivo es un JPG
   con fondo blanco, asi que en modo oscuro se le pone su propio fondo claro y
   se lee como una placa en vez de como un recorte pegado. */
/* El monograma de la marca --los edificios que forman la J y la R--. El logo
   completo es horizontal y a la altura de la barra la palabra no se leeria:
   un logo que no se lee no es un logo. El logo entero va en la pantalla de
   entrada, que es donde hay sitio. */
.marca-jr{
  height:36px;width:36px;object-fit:contain;display:block;flex:none;
}
.marca-txt{display:flex;flex-direction:column;font-weight:650;font-size:14.5px;
  line-height:1.25;padding-left:var(--e3);border-left:1px solid var(--line)}
.marca-txt small{font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.01em}
.miga{
  flex:1;font-size:13px;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:var(--e4);border-left:1px solid var(--line-2);
}
.usuario{
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  padding:5px var(--e3);border:1px solid var(--line);border-radius:99px;
  background:var(--surface-2);cursor:pointer;transition:border-color .14s,background .14s;
}
.usuario:hover{border-color:var(--jr-cian);background:var(--accent-soft)}

.vista{max-width:1560px;margin:0 auto;padding:var(--e5) var(--e5) 72px}

/* ---------------------------------------------------------------- carga --- */
.cargar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--e6);box-shadow:var(--sombra);
}
.cargar h1{font-size:27px;font-weight:600;margin-bottom:var(--e2)}
.lede{color:var(--muted);font-size:14.5px;max-width:74ch;margin:0 0 var(--e5);line-height:1.6}
.zona{
  border:2px dashed var(--line);border-radius:var(--r2);background:var(--surface-2);
  padding:42px var(--e5);text-align:center;cursor:pointer;
  transition:border-color .16s,background .16s,transform .16s;
}
.zona:hover,.zona.sobre{border-color:var(--jr-cian);background:var(--accent-soft)}
.zona.sobre{transform:scale(1.004)}
.zona-centro{display:flex;flex-direction:column;gap:var(--e1)}
.zona-centro strong{font-size:16.5px;font-weight:650}
.zona-centro span{font-size:13px;color:var(--muted)}
.seleccionados{
  list-style:none;margin:var(--e4) 0 0;padding:0;
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r1);overflow:hidden;
}
.seleccionados li{background:var(--surface);padding:9px var(--e3);display:flex;align-items:center;gap:var(--e3);font-size:13.5px}
.seleccionados .peso{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.seleccionados .quitar{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:17px;line-height:1;padding:0 var(--e1);border-radius:var(--r1)}
.seleccionados .quitar:hover{color:var(--critico);background:var(--critico-soft)}
.cargar-pie{display:flex;gap:var(--e4);align-items:flex-end;margin-top:var(--e5);flex-wrap:wrap}

.campo{display:flex;flex-direction:column;gap:var(--e1);flex:1;min-width:250px}
.campo span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:750}
.campo em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0}
.campo input{padding:10px var(--e3);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);transition:border-color .14s,box-shadow .14s}
.campo input:focus{border-color:var(--jr-cian);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.aviso{margin-top:var(--e4);padding:11px var(--e4);border-radius:var(--r1);background:var(--critico-soft);color:var(--critico);font-size:13.5px;border-left:3px solid var(--critico)}

/* --------------------------------------------------------------- botones --- */
.btn{
  font-size:13.5px;font-weight:650;padding:10px 19px;border-radius:var(--r1);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
  transition:border-color .14s,background .14s,box-shadow .14s,transform .1s;
}
.btn:hover:not(:disabled){border-color:var(--muted);background:var(--surface-2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.pri{
  background:var(--jr-cian);border-color:var(--jr-cian);color:#fff;
  box-shadow:0 2px 8px -3px rgba(2,157,214,.65);
}
.btn.pri:hover:not(:disabled){background:var(--jr-cian-900);border-color:var(--jr-cian-900);box-shadow:0 3px 11px -3px rgba(2,157,214,.7)}
.btn:disabled{opacity:.42;cursor:not-allowed}

/* ------------------------------------------------------------ historial --- */
.historial{margin-top:var(--e6)}
.historial h2{font-size:20px;font-weight:600;margin-bottom:var(--e3)}
.lista-casos{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;box-shadow:var(--sombra);
}
.caso-fila{
  background:var(--surface);padding:15px var(--e4) 15px var(--e3);
  display:grid;grid-template-columns:1fr auto auto auto auto;gap:var(--e4);align-items:center;
  cursor:pointer;text-align:left;border:none;width:100%;font:inherit;color:inherit;
  border-left:3px solid transparent;
  transition:background .14s,border-left-color .14s;
}
.caso-fila:hover{background:var(--surface-2);border-left-color:var(--jr-cian)}
.caso-fila .nom{display:flex;flex-direction:column;gap:3px;min-width:0}
.caso-fila .nom strong{font-family:var(--f-doc);font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caso-fila .nom span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.caso-fila .fecha{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.vacio{background:var(--surface);padding:var(--e6);text-align:center;color:var(--muted);font-size:14px}

.pill{font-size:10.5px;font-weight:750;padding:4px 10px;border-radius:99px;white-space:nowrap;letter-spacing:.05em;text-transform:uppercase}
.pill.cargado{background:var(--bajo-soft);color:var(--bajo)}
.pill.revisando{background:var(--alto-soft);color:var(--alto)}
.pill.revisado{background:var(--add-soft);color:var(--add)}
.pill.error{background:var(--critico-soft);color:var(--critico)}
.pill.cerrado{background:var(--medio-soft);color:var(--medio)}

/* -------------------------------------------------------------- cargando --- */
.cargando{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  padding:56px var(--e5);display:flex;flex-direction:column;align-items:center;gap:var(--e2);
  text-align:center;box-shadow:var(--sombra);
}
.cargando strong{font-family:var(--f-doc);font-size:20px;font-weight:600}
.cargando span{font-size:14px;color:var(--accent);font-weight:650}
.cargando small{font-size:12.5px;color:var(--muted);max-width:50ch;line-height:1.55;margin-top:var(--e2)}
.pulso{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--jr-cian);animation:giro .9s linear infinite;margin-bottom:var(--e2)}
@keyframes giro{to{transform:rotate(360deg)}}
.panel-error{background:var(--critico-soft);border:1px solid var(--critico);border-left-width:3px;border-radius:var(--r2);padding:var(--e4) var(--e5);color:var(--critico);font-size:14px;white-space:pre-wrap;line-height:1.6}

/* ------------------------------------------------------- barra del caso --- */
/* La revisión entera es una sola pieza: cabecera, contexto, columnas, detalle
   y pie comparten borde y se leen como un documento, no como cinco cajas. */
.tbar{
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center;
  padding:var(--e4) var(--e5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r3) var(--r3) 0 0;border-bottom:none;
  /* Se queda pegada bajo la cabecera: en una revision de 24 hallazgos se pasa
     el dia desplazando, y el semaforo y el boton de cerrar son lo que hay que
     tener siempre a mano. */
  position:sticky;top:60px;z-index:30;
}
.caseid{display:flex;flex-direction:column;gap:3px;margin-right:auto;min-width:210px}
.caseid strong{font-family:var(--f-doc);font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.caseid span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.chips{display:flex;gap:var(--e1);flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;font-variant-numeric:tabular-nums;
  border:1px solid transparent;transition:opacity .16s;
}
.chip b{font-size:12.5px;letter-spacing:0}
.chip.c{background:var(--critico-soft);color:var(--critico);border-color:color-mix(in srgb, var(--critico) 22%, transparent)}
.chip.a{background:var(--alto-soft);color:var(--alto);border-color:color-mix(in srgb, var(--alto) 22%, transparent)}
.chip.m{background:var(--medio-soft);color:var(--medio);border-color:color-mix(in srgb, var(--medio) 22%, transparent)}
.chip.b{background:var(--bajo-soft);color:var(--bajo);border-color:color-mix(in srgb, var(--bajo) 22%, transparent)}
.chip.off{opacity:.32;border-color:transparent}

.prog{display:flex;flex-direction:column;gap:var(--e1);min-width:170px}
.prog-lab{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.bar{height:5px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--jr-cian),var(--jr-cian-900));width:0;border-radius:99px;transition:width .35s cubic-bezier(.2,.9,.3,1)}

/* Las dos bandas de contexto: perfil del caso y expediente. Son metadato, así
   que van tenues; lo que no es tenue es lo que está mal (OCR, ilegible). */
.perfil{
  display:flex;gap:var(--e1);flex-wrap:wrap;align-items:center;
  padding:9px var(--e5);background:var(--surface-2);
  border:1px solid var(--line);border-bottom:none;font-size:11px;
}
.perfil:empty{display:none}
.perfil b{color:var(--muted);letter-spacing:.09em;text-transform:uppercase;font-weight:750;margin-right:var(--e1);font-size:10px}
.mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);padding:3px 9px;font-weight:600;color:var(--ink-2);font-size:11px}
.mod.ocr{border-color:var(--alto);color:var(--alto);background:var(--alto-soft)}
.mod.nolee{border-color:var(--critico);color:var(--critico);background:var(--critico-soft)}
.mod.ajustado{border-color:var(--jr-cian);color:var(--jr-cian-900);background:var(--accent-soft);font-weight:700}
.mod-editar{
  font-family:var(--f-ui);font-size:11px;font-weight:700;color:var(--jr-cian-900);
  background:none;border:0;cursor:pointer;padding:3px 7px;border-radius:var(--r1);margin-left:var(--e1);
}
.mod-editar:hover{background:var(--accent-soft)}

/* ------------------------------------------------------- tres columnas --- */
.grid3{
  display:grid;grid-template-columns:340px 1fr 1fr;
  background:var(--surface);border:1px solid var(--line);min-height:430px;
}
@media(max-width:1200px){.grid3{grid-template-columns:1fr 1fr}.rail{grid-column:1/-1;height:300px}}
@media(max-width:820px){.grid3{grid-template-columns:1fr}.pane+.pane{border-left:none;border-top:1px solid var(--line)}}

.rail{border-right:1px solid var(--line);background:var(--surface-2);overflow-y:auto;height:var(--alto-panel)}
.rail-h{
  display:flex;align-items:center;gap:var(--e3);padding:11px var(--e4);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:750;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-2);z-index:2;
}
.filtro{margin-left:auto;display:flex;align-items:center;gap:var(--e1);text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px;cursor:pointer;color:var(--ink-2)}

/* Cada hallazgo lleva su riesgo en una barra de color a la izquierda: el nivel
   se reconoce de un barrido, sin leer la palabra. */
.fitem{
  width:100%;text-align:left;border:none;border-bottom:1px solid var(--line-2);
  border-left:3px solid transparent;background:transparent;
  padding:13px var(--e4);cursor:pointer;display:flex;flex-direction:column;gap:var(--e1);
  font:inherit;color:inherit;transition:background .13s,border-left-color .13s;
}
.fitem:hover{background:var(--surface)}
.fitem.sel{background:var(--surface);box-shadow:inset -3px 0 0 var(--jr-cian)}
.fitem.resuelto{opacity:.48}
.fitem.resuelto:hover{opacity:.7}
.fitem-top{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:750}
.fid{color:var(--muted);font-variant-numeric:tabular-nums}
.lvl-CRITICO{color:var(--critico)} .lvl-ALTO{color:var(--alto)}
.lvl-MEDIO{color:var(--medio)} .lvl-BAJO{color:var(--bajo)}
.fitem h5{margin:0;font-family:var(--f-doc);font-size:14.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.fitem .cl{font-size:11px;color:var(--muted);letter-spacing:.02em}
.estado{margin-left:auto;font-size:9.5px;letter-spacing:.07em;padding:2px 7px;border-radius:99px;font-weight:750}
.estado.aceptado{background:var(--add-soft);color:var(--add)}
.estado.rechazado{background:var(--del-soft);color:var(--critico)}
.estado.dir{background:var(--alto-soft);color:var(--alto)}

.pane{display:flex;flex-direction:column;min-width:0}
.pane+.pane{border-left:1px solid var(--line)}
.pane-h{
  padding:12px var(--e5);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:750;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:var(--e2);position:sticky;top:0;
  background:var(--surface-2);z-index:2;
}
.pane-h .tick{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.pane-h.nueva{color:var(--jr-cian-900);background:var(--accent-soft);
  box-shadow:inset 0 2px 0 var(--jr-cian)}
.pane-h.nueva .tick{background:var(--jr-cian);box-shadow:0 0 0 3px var(--accent-soft)}

/* El documento es el trabajo. Todo lo de arriba existe para que esto se lea. */
.doc{
  padding:var(--e5) var(--e5) 40px;overflow-y:auto;height:var(--alto-panel);
  font-family:var(--f-doc);font-size:14.5px;line-height:1.78;color:var(--ink-2);
  scroll-behavior:auto;
}
.doc p{margin:0 0 var(--e4);text-align:justify;hyphens:auto}
.doc .nueva-sec{margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--line-2)}
.doc h6{font-family:var(--f-ui);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:750;margin:0 0 var(--e2)}
.ghost{font-family:var(--f-ui);font-size:12px;color:var(--muted);font-style:italic;padding:8px var(--e3);border:1px dashed var(--line);border-radius:var(--r1);display:inline-block}

mark{background:transparent;color:inherit;padding:1px 2px;border-radius:3px;cursor:pointer}
mark.orig{background:var(--del-soft);box-shadow:inset 0 -1.5px 0 color-mix(in srgb, var(--critico) 55%, transparent)}
mark.prop{background:var(--add-soft);box-shadow:inset 0 -1.5px 0 color-mix(in srgb, var(--add) 55%, transparent)}
mark.prop.pend{box-shadow:inset 0 -1.5px 0 transparent;border-bottom:1.5px dashed var(--add)}
mark.rej{background:transparent;color:var(--muted);box-shadow:none;text-decoration:line-through 1px}
mark.hot{outline:2px solid var(--jr-cian);outline-offset:2px}
mark[data-h]{transition:filter .13s}
mark[data-h]:hover{filter:brightness(.955)}

/* ------------------------------------------------------------- detalle --- */
.detalle{
  background:var(--surface-2);border:1px solid var(--line);border-top:none;
  padding:var(--e4) var(--e5);display:flex;flex-direction:column;gap:var(--e3);
}
.dh{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
.dh h4{font-family:var(--f-doc);font-size:17.5px;font-weight:600;margin:0;line-height:1.35}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px var(--e5);font-size:13px;margin:0}
.kv dt{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:750;padding-top:3px;white-space:nowrap}
.kv dd{margin:0;color:var(--ink-2);line-height:1.55}
.acts{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center}
.act{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;
  padding:8px var(--e4);border-radius:var(--r1);border:1px solid var(--line);
  background:var(--surface);cursor:pointer;transition:background .13s,border-color .13s,color .13s;
}
.act:hover:not(:disabled){border-color:var(--muted);background:var(--surface-2)}
.act .k{font-size:9.5px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 5px;font-weight:750}
.act.si.on{background:var(--add-soft);border-color:var(--add);color:var(--add)}
.act.no.on{background:var(--del-soft);border-color:var(--critico);color:var(--critico)}
.act:disabled{opacity:.4;cursor:not-allowed}
.pista{font-size:12.5px;color:var(--muted);line-height:1.55}
.pista.alerta{color:var(--alto);font-weight:600}
.slots{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:flex-end}
.slot{display:flex;flex-direction:column;gap:var(--e1)}
.slot label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:750}
.slot input{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);min-width:200px}
.slot input:focus{border-color:var(--jr-cian);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.slot .quien{font-size:11px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}

.notif{
  background:var(--surface);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--r3) var(--r3);padding:var(--e3) var(--e5);
  display:flex;gap:var(--e4);align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted);
}
.notif .tag{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:var(--jr-naranja-900)}
.notif b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.descargas{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e2)}
.descargas a{font-size:12.5px;font-weight:600;color:var(--jr-cian-900);text-decoration:none;padding:5px 11px;border:1px solid var(--line);border-radius:var(--r1);background:var(--surface)}
.descargas a:hover{border-color:var(--jr-cian);background:var(--accent-soft)}

/* --------------------------------------------------------------- modal --- */
.modal{position:fixed;inset:0;background:rgba(10,14,17,.55);display:grid;place-items:center;z-index:60;padding:var(--e5);backdrop-filter:blur(2px)}
.modal-caja{background:var(--surface);border-radius:var(--r3);box-shadow:var(--sombra-alta);max-width:840px;width:100%;max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.modal-cab{display:flex;align-items:center;padding:var(--e4) var(--e5);border-bottom:1px solid var(--line)}
.modal-cab h3{font-size:18px;font-weight:600;flex:1}
.cerrar{border:none;background:transparent;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 var(--e1);border-radius:var(--r1)}
.cerrar:hover{background:var(--surface-2);color:var(--ink)}
.modal-cuerpo{padding:var(--e5);overflow-y:auto}
.modal-cuerpo textarea{width:100%;min-height:240px;padding:var(--e3);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface-2);font-family:var(--f-doc);font-size:14px;line-height:1.7;resize:vertical}
.modal-pie{display:flex;gap:var(--e2);justify-content:flex-end;padding:var(--e3) var(--e5);border-top:1px solid var(--line);background:var(--surface-2)}

.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:750;padding:var(--e2) var(--e3);border-bottom:1px solid var(--line)}
.tabla td{padding:10px var(--e3);border-bottom:1px solid var(--line-2);vertical-align:top}

dl.porque{margin:0;font-size:14px;line-height:1.65}
dl.porque dt{font-family:var(--f-ui);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:750;margin:var(--e4) 0 3px}
dl.porque dt:first-child{margin-top:0}
dl.porque dd{margin:0;color:var(--ink-2)}

/* ------------------------------------------------------ aviso flotante --- */
.aviso-flotante{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:var(--surface);
  padding:11px var(--e5);border-radius:99px;font-size:13.5px;font-weight:600;
  box-shadow:var(--sombra-alta);z-index:70;max-width:min(620px,90vw);text-align:center;
}
.aviso-flotante.mal{background:var(--critico);color:#fff}

/* --------------------------------------------- menú sobre la corrección --- */
/* Sale pegado al texto marcado: antes había que bajar al pie de la página por
   cada hallazgo y volver a subir. */
.globo{
  position:fixed;z-index:65;width:340px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--sombra-alta);padding:var(--e3) var(--e4) var(--e3);font-size:13px;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top center;
  transition:opacity .15s ease, transform .17s cubic-bezier(.2,.9,.3,1.25);
}
.globo.abierto{opacity:1;transform:none}
.globo-pico{
  position:absolute;width:11px;height:11px;background:var(--surface);
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);top:-6px;left:24px;
}
.globo.abajo .globo-pico{top:auto;bottom:-6px;transform:rotate(225deg)}
.globo-cab{display:flex;align-items:center;gap:var(--e2);margin-bottom:var(--e1)}
.globo-id{font-family:var(--f-ui);font-size:10.5px;font-weight:750;letter-spacing:.07em;color:var(--muted)}
.globo-nivel{font-size:9.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:99px}
.globo-nivel.CRITICO{background:var(--critico-soft);color:var(--critico)}
.globo-nivel.ALTO{background:var(--alto-soft);color:var(--alto)}
.globo-nivel.MEDIO{background:var(--medio-soft);color:var(--medio)}
.globo-nivel.BAJO{background:var(--bajo-soft);color:var(--bajo)}
.globo-x{margin-left:auto;background:none;border:0;font-size:19px;line-height:1;color:var(--muted);cursor:pointer;padding:0 3px;border-radius:var(--r1)}
.globo-x:hover{background:var(--surface-2);color:var(--ink)}
.globo-tit{font-family:var(--f-doc);font-size:15px;font-weight:600;line-height:1.35;margin:0 0 var(--e2);color:var(--ink)}
.globo-cuerpo{color:var(--ink-2);line-height:1.55;font-size:12.5px}
.globo-cuerpo .fila{margin-bottom:var(--e2)}
.globo-cuerpo .et{font-family:var(--f-ui);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:750;display:block;margin-bottom:1px}
.globo-cuerpo .resuelto{display:inline-block;margin-bottom:var(--e2);font-weight:700;font-size:12px}
.globo-cuerpo .resuelto.ok{color:var(--add)}
.globo-cuerpo .resuelto.mal{color:var(--critico)}
.globo-pie{display:flex;gap:var(--e1);margin-top:var(--e3);flex-wrap:wrap}
.gbtn{
  font-family:var(--f-ui);font-size:12px;font-weight:650;padding:7px 11px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:var(--r1);cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.gbtn:hover:not(:disabled){background:var(--surface-2);border-color:var(--muted)}
.gbtn:disabled{opacity:.42;cursor:not-allowed}
.gbtn.si{border-color:color-mix(in srgb, var(--add) 50%, var(--line));color:var(--add)}
.gbtn.si:hover:not(:disabled){background:var(--add);border-color:var(--add);color:#fff}
.gbtn.si.activo{background:var(--add);border-color:var(--add);color:#fff}
.gbtn.no{border-color:color-mix(in srgb, var(--critico) 50%, var(--line));color:var(--critico)}
.gbtn.no:hover:not(:disabled){background:var(--critico);border-color:var(--critico);color:#fff}
.gbtn.no.activo{background:var(--critico);border-color:var(--critico);color:#fff}

@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(2,157,214,.5)}
  100%{box-shadow:0 0 0 10px rgba(2,157,214,0)}
}
mark.late{animation:latido .6s ease-out 1}

/* ------------------------------------------------------ perfil del caso --- */
.grupo-perfil{margin-bottom:var(--e5)}
.grupo-perfil h5{
  font-family:var(--f-ui);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:750;margin:0 0 var(--e2);
  padding-bottom:var(--e1);border-bottom:1px solid var(--line-2);
}
.opt-perfil{display:flex;gap:var(--e3);align-items:flex-start;padding:9px var(--e2);border-radius:var(--r1);cursor:pointer;transition:background .12s}
.opt-perfil:hover{background:var(--surface-2)}
.opt-perfil input{margin-top:3px;flex:none;accent-color:var(--jr-cian)}
.opt-txt{font-size:13.5px;line-height:1.45}
.opt-txt b{font-weight:650;color:var(--ink)}
.opt-txt small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}
.detectado{
  display:inline-block;margin-left:var(--e2);font-size:9.5px;font-weight:750;
  letter-spacing:.06em;text-transform:uppercase;color:var(--jr-cian-900);
  background:var(--accent-soft);border-radius:99px;padding:1px 7px;vertical-align:1px;
}

/* ------------------------------------------------- biblioteca de modelos --- */
.cab-modelos{display:flex;align-items:flex-start;gap:var(--e5);margin-bottom:var(--e5)}
.cab-modelos h2{font-size:22px;font-weight:600;margin:0 0 var(--e1)}
.cab-modelos .pista{max-width:66ch;margin:0}
.cab-modelos .btn{margin-left:auto;flex:none}
.caja-modelo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--e5);margin-bottom:var(--e5);box-shadow:var(--sombra)}
.caja-modelo h3{font-size:15px;font-weight:650;margin:0 0 var(--e4)}
.fila-modelo{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
@media(max-width:760px){.fila-modelo{grid-template-columns:1fr}.cab-modelos{flex-direction:column}.cab-modelos .btn{margin-left:0}}
.caja-modelo .campo{display:block;margin-bottom:var(--e3);min-width:0}
.caja-modelo .campo>span{display:block;font-family:var(--f-ui);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:750;margin-bottom:var(--e1)}
.caja-modelo input[type=text],.caja-modelo input[type=file]{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r1);background:var(--surface)}
.mods-check{display:flex;flex-wrap:wrap;gap:var(--e1)}
.mods-check label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--line);border-radius:99px;padding:5px 11px;cursor:pointer;background:var(--surface);transition:border-color .12s,background .12s}
.mods-check label:hover{border-color:var(--jr-cian)}
.mods-check input{margin:0;accent-color:var(--jr-cian)}
.mods-check input:checked+span{font-weight:650;color:var(--jr-cian-900)}
.pie-modelo{display:flex;align-items:center;gap:var(--e4);margin-top:var(--e1)}
.pie-modelo .btn{margin-left:auto}
.grid-modelos{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--e5);align-items:start}
@media(max-width:960px){.grid-modelos{grid-template-columns:1fr}}
.tit-sec{font-family:var(--f-ui);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:750;margin:0 0 var(--e2)}
.mod-fila{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--e3) var(--e4);margin-bottom:var(--e2);display:flex;align-items:flex-start;gap:var(--e3);cursor:pointer;transition:border-color .13s,box-shadow .13s}
.mod-fila:hover{border-color:var(--jr-cian);box-shadow:var(--sombra)}
.mod-fila .nom{font-weight:650;font-size:14px}
.mod-fila .meta{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.mod-fila .quitar-mod{margin-left:auto;background:none;border:0;color:var(--muted);font-size:17px;cursor:pointer;line-height:1;padding:0 var(--e1);border-radius:var(--r1);flex:none}
.mod-fila .quitar-mod:hover{color:var(--critico);background:var(--critico-soft)}
.cob-fila{display:flex;align-items:center;gap:var(--e3);padding:8px 2px;border-bottom:1px solid var(--line-2);font-size:13px}
.cob-fila:last-child{border-bottom:0}
.cob-fila .barra{flex:1;height:5px;background:var(--surface-3);border-radius:99px;overflow:hidden;min-width:44px}
.cob-fila .barra i{display:block;height:100%;background:var(--jr-cian);border-radius:99px;transition:width .4s cubic-bezier(.2,.9,.3,1)}
.cob-fila .cuenta{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;min-width:44px;text-align:right;font-weight:600}
.cob-fila.siempre .cuenta{color:var(--add);font-weight:750}
.vacio-bib{padding:var(--e6);text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:var(--r2);line-height:1.6}
.enlace-bib{font-family:var(--f-ui);font-size:12.5px;font-weight:650;color:var(--jr-cian-900);background:none;border:0;cursor:pointer;padding:6px var(--e3);border-radius:99px}
.enlace-bib:hover{background:var(--accent-soft)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ===========================================================================
   Celular y tableta
   ---------------------------------------------------------------------------
   Esto se diseño para escritorio: dos columnas de texto legal en paralelo es
   lo que hace util la revision, y eso no cabe en un telefono. Pero se consulta
   desde el telefono --un asesor en la calle, Gerencia mirando en que va una
   revision antes de una reunion-- y ahi tiene que poderse leer y aprobar.

   Asi que en pantalla angosta no se encoge la version de escritorio: cambia.
   Los documentos se apilan uno debajo del otro con su propio alto, el riel se
   vuelve una lista corta, el menu flotante ocupa el ancho, y todo lo que se
   toca crece a 44px, que es lo que mide un dedo.
   =========================================================================== */

@media (max-width:820px){
  .vista{padding:var(--e4) var(--e3) 48px}

  .barra{height:auto;padding:var(--e3) var(--e4);gap:var(--e3);flex-wrap:wrap}
  .marca-txt small{display:none}
  .marca-jr{height:32px}
  .marca-txt{padding-left:var(--e2);font-size:13.5px}
  .miga{order:3;flex-basis:100%;padding-left:0;border-left:0;font-size:12px}
  .usuario{padding:7px var(--e3)}

  .cargar{padding:var(--e4)}
  .cargar h1{font-size:22px}
  .zona{padding:var(--e5) var(--e3)}
  .cargar-pie{flex-direction:column;align-items:stretch}
  .cargar-pie .btn{width:100%;padding:13px}

  .caso-fila{grid-template-columns:1fr auto;gap:var(--e2) var(--e3);padding:var(--e3)}
  .caso-fila .fecha{grid-column:1/-1;font-size:11px}

  /* La barra del caso deja de ser pegajosa: en vertical se comeria media
     pantalla y lo que hace falta es el documento. */
  .tbar{position:static;padding:var(--e3) var(--e4);gap:var(--e2) var(--e3)}
  .caseid{min-width:100%;margin-right:0}
  .caseid strong{font-size:17px}
  .chips{width:100%}
  .prog{min-width:100%}
  .tbar .btn{flex:1;min-width:140px;padding:12px}

  .perfil{padding:var(--e2) var(--e4)}

  .grid3{grid-template-columns:1fr;min-height:0}
  .rail{grid-column:auto;height:auto;max-height:290px;border-right:0;border-bottom:1px solid var(--line)}
  .fitem{padding:var(--e3) var(--e4);min-height:44px}
  .pane+.pane{border-left:0;border-top:1px solid var(--line)}
  /* Cada documento con su propio alto: apilados, uno de 64vh dejaria el otro
     fuera de la pantalla siempre. */
  .doc{height:52vh;min-height:280px;padding:var(--e4) var(--e4) var(--e5);font-size:15px;line-height:1.75}
  .doc p{text-align:left;hyphens:none}

  .detalle{padding:var(--e4)}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dt{padding-top:var(--e2)}
  .acts{gap:var(--e2)}
  .act{flex:1;justify-content:center;min-height:44px}
  .act .k{display:none}          /* no hay teclado que mostrar */
  .slot input{min-width:0;width:100%;min-height:44px}
  .slots{flex-direction:column;align-items:stretch}

  .notif{padding:var(--e3) var(--e4);font-size:12px}

  /* El menu de la correccion pasa a hoja inferior: anclarlo a una palabra en
     una pantalla de 380px lo deja siempre medio fuera. */
  .globo{
    position:fixed;left:0!important;right:0;bottom:0;top:auto!important;
    width:auto;max-width:none;border-radius:var(--r3) var(--r3) 0 0;
    border-bottom:0;padding:var(--e4) var(--e4) var(--e5);
    transform:translateY(100%);
    box-shadow:0 -12px 40px -12px rgba(20,26,30,.35);
  }
  .globo.abierto{transform:none}
  .globo-pico{display:none}
  .globo-tit{font-size:16px}
  .globo-cuerpo{font-size:13.5px}
  .gbtn{flex:1;min-height:44px;justify-content:center;display:flex;align-items:center}

  .modal{padding:0;place-items:end stretch}
  .modal-caja{max-height:92vh;border-radius:var(--r3) var(--r3) 0 0}
  .modal-cuerpo{padding:var(--e4)}
  .modal-pie{padding:var(--e3) var(--e4)}
  .modal-pie .btn{flex:1;min-height:44px}

  .cab-modelos .btn{width:100%}
  .grid-modelos{gap:var(--e5)}
}

@media (max-width:420px){
  .marca-txt{font-size:13px}
  .caseid strong{font-size:15.5px}
  .chip{font-size:10px;padding:4px 8px}
  .doc{font-size:14.5px;padding:var(--e3)}
  .vista{padding:var(--e3) var(--e2) 40px}
}

/* En pantalla tactil no hay «pasar por encima»: lo que se toca necesita area,
   no un cambio de color al acercarse. */
@media (hover:none){
  .fitem,.caso-fila,.mod-fila{min-height:44px}
  .btn,.act,.gbtn{min-height:44px}
}

/* Borrar una revision. Se sube el archivo equivocado mas seguido de lo que uno
   cree; hasta ahora la unica forma de quitarlo era entrar al servidor.
   Aparece al pasar por encima para que no invite a pulsarlo sin querer. */
.cab-lista{display:flex;align-items:baseline;gap:var(--e4);margin-bottom:var(--e3)}
.cab-lista h2{margin:0}
.cab-lista .enlace-bib{margin-left:auto}

.acc-fila{display:flex;gap:2px}
.acc-mini{
  background:none;border:0;color:var(--muted);font-size:15px;line-height:1;
  cursor:pointer;padding:5px 8px;border-radius:var(--r1);
  opacity:0;transition:opacity .14s,color .14s,background .14s;
}
.caso-fila:hover .acc-mini,.acc-mini:focus-visible{opacity:1}
.acc-mini:hover{color:var(--jr-cian-900);background:var(--accent-soft)}
.acc-mini.mal:hover{color:var(--critico);background:var(--critico-soft)}
/* En pantalla tactil no hay «pasar por encima»: siempre visible, pero tenue. */
@media (hover:none){ .acc-mini{opacity:.55} }