/* =========================================================================
   FINANCORE APP — Plataforma
   Mismo sistema visual que el sitio: claro, minimalista, un solo azul.
   Los tokens son idénticos a los de web.css a propósito.
   ========================================================================= */
:root{
  --ink:#161921; --ink-2:#586074; --ink-3:#5E6878; --ink-4:#666F7F;
  --bg:#FFFFFF; --bg-2:#F7F8FA; --bg-3:#EFF1F5; --tint:#EDF3FF;
  --line:#E7EAF0; --line-2:#DDE2EB;
  --blue:#1565C0; --blue-b:#2D7DEC; --blue-d:#0E4A93; --navy:#0D2B55;
  --gold:#E8A020; --gold-bg:#FEF7EA; --gold-line:#F3E0BA;
  --green:#1B7A3D; --green-bg:#ECF8F0; --green-line:#CBE9D6;
  /* 23-sep-2026, medido: #D33A3A sobre su propio tinte #FDF0F0 daba 4,26:1,
     y es el color del aviso de vencidos y del boton de borrar. #C93434 sube a
     4,76 y es el mismo rojo. */
  --red:#C93434; --red-bg:#FDF0F0; --red-line:#F5CFCF;
  /* Sin azul oscuro (regla de Daniel del 28-sep; 1-oct-2026): el degradado
     de la marca acababa en #0D2B55. Ahora va en el azul claro, el mismo de
     la piel: blanco encima 4,6:1 en #1976D2 y 5,8:1 en #1565C0. */
  --fin:linear-gradient(160deg,#1976D2 0%,#1565C0 100%);
  --fin-b:linear-gradient(180deg,#1976D2 0%,#1565C0 100%);
  --ff:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Tipografia de titulo. Financore Platform usa una geometrica pesada para
     todo lo que es encabezado o menu, y el cuerpo en algo neutro. Copiar esa
     separacion es lo que mas acerca las dos pantallas — mas que el color. */
  --fd:Poppins,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.8,.28,1);
  --sh:0 1px 2px rgba(22,25,33,.04),0 6px 18px rgba(22,25,33,.05);
  --sh-2:0 2px 4px rgba(22,25,33,.04),0 16px 40px rgba(22,25,33,.09);
  /* Azul de la plataforma: el mismo tono apagado de sus botones. El --blue
     vivo se queda para acentos y enlaces; este manda en lo solido. */
  --plat:#5B70A8; --plat-d:#4A5D91; --plat-bg:#EEF1F8;
  /* Tintas semanticas: el texto oscuro que va sobre los fondos palidos de
     aviso, error y bien. Estaban escritas a mano en veintitantos sitios; ahora
     son variables porque en tema oscuro esos fondos dejan de ser palidos y un
     marron oscuro sobre marron oscuro no se lee. */
  --gold-ink:#8A5C00; --red-ink:#8E1B1B; --green-ink:#14672F;
  /* El aviso flotante va al reves del fondo: oscuro sobre claro y claro sobre
     oscuro. Si usara --ink, que tambien es el color del texto normal, en tema
     oscuro saldria blanco sobre blanco. */
  --aviso-bg:#161921; --aviso-ink:#FFFFFF;
  --navy-ink:#0D2B55; --oro-c:#95610A; --sobre-azul:#FFFFFF;
  --r:16px;      /* mas redondo, como las tarjetas de la plataforma */
  --r-s:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ff);background:var(--bg-2);color:var(--ink);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:var(--fm)}
.hidden{display:none !important}
a{color:var(--blue);text-decoration:none}
/* el fondo decorativo del tema oscuro ya no aplica */
.bg-grid,.bg-orb{display:none}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:244px 1fr;min-height:100vh}
.side{background:var(--bg);border-right:1px solid var(--line);padding:20px 14px;display:flex;
  flex-direction:column;position:sticky;top:0;height:100vh}
.side-logo{display:flex;gap:10px;align-items:center;margin-bottom:24px;padding:0 6px}
.side-logo .t{font-weight:800;font-size:15.5px;letter-spacing:-.03em;line-height:1.1}
.side-logo .t span{color:var(--blue)}
.side-logo .s{font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:1px;margin-top:2px;font-weight:600}
.logo-mark{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--tint);overflow:hidden}
.logo-mark img{width:78%;height:78%;object-fit:contain;display:block}
.logo-mark.sm{width:34px;height:34px}
#nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
/* Las opciones del menu ahora son <button> de verdad (antes eran <div> y no
   se podian usar con teclado), asi que hay que quitarles lo que el navegador
   le pone a un boton: borde, fondo gris, centrado y su propia tipografia. */
.nav-i{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;cursor:pointer;
  font-family:var(--fd);font-weight:500;
  width:100%;border:0;background:none;text-align:left;appearance:none;
  color:var(--ink-2);font-size:13.5px;font-weight:500;transition:.16s}
.nav-i:hover{background:var(--bg-2);color:var(--ink)}
/* El activo va macizo y en blanco, como el "Home" de la plataforma. Un
   fondo palido con texto azul se pierde de un vistazo; este no. */
.nav-i.on{background:var(--fin-b);color:#fff;font-weight:600;
  box-shadow:0 2px 10px rgba(21,101,192,.3)}
.nav-i.on:hover{filter:brightness(1.06);color:#fff}
.nav-i.on .ic{opacity:.95}
.nav-i .ic{width:18px;text-align:center;font-size:13px}
/* "Tu dia" resalta (Daniel, 30-sep-2026) y los bloques del menu respiran. */
.nav-sep.nav-sep-dest{font-size:12.5px !important;font-weight:800 !important;letter-spacing:1.4px;color:#E8A020 !important;opacity:1 !important}
.nav-i.nav-gap{margin-top:10px}
.nav-sep{font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--ink-3);
  margin:16px 0 5px;padding-left:11px;font-weight:700}
.side-foot{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.whoami{font-size:11.5px;color:var(--ink-3);padding:0 4px 6px;line-height:1.5}
.whoami b{color:var(--ink);display:block;font-size:13px;font-weight:700}
main{padding:26px 30px 60px;max-width:1280px;width:100%}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  #nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%}
  .side-foot{flex-direction:row;flex-wrap:wrap;border:none;padding:0}
  main{padding:18px 16px 50px}
}

/* ---------- encabezados ---------- */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ph h2{font-family:var(--fd);font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
h1,h2,h4,h5{font-family:var(--fd);letter-spacing:-.015em}
.card h4{font-family:var(--fd);font-weight:600}
.ph p{color:var(--ink-2);font-size:13.5px;margin-top:3px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}
h3.sec{font-family:var(--fd);font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--ink-3);
  margin:26px 0 12px;font-weight:700}
h4,h5{font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* ---------- tarjetas ---------- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  transition:.24s var(--ease)}
.card:hover{border-color:var(--line-2);box-shadow:var(--sh)}
.card.flat:hover{box-shadow:none;border-color:var(--line)}
.card h4{font-size:14.5px;margin-bottom:4px}
.card .sub{color:var(--ink-2);font-size:12.5px}
.cards{display:grid;gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1000px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-3);
  font-weight:700;margin-bottom:6px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.stat .d{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.v.ok{color:var(--green)} .v.warn{color:var(--gold-ink)} .v.bad{color:var(--red)}
.v.gold{color:var(--gold-ink)} .v.info{color:var(--blue)}

/* ---------- medidor de puntaje ---------- */
.gauge{position:relative;width:150px;height:150px;margin:0 auto}
.gauge svg{transform:rotate(-90deg)}
.gauge .lbl{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.gauge .lbl b{font-size:32px;font-weight:800;letter-spacing:-.05em;display:block;line-height:1;color:var(--ink)}
.gauge .lbl small{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--ink-3);font-weight:700}

/* minmax(0,1fr) y no 1fr (1-oct-2026): con 1fr la columna no baja del ancho
   de su contenido (el medidor de 172 px + el relleno), y entre 820 y ~1000 px
   la tercera, Equifax, se salia por la derecha y quedaba cortada. */
.buros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.buros .med{min-width:0}
@media(max-width:820px){.buros{grid-template-columns:1fr}}
.buro{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center;
  transition:.24s var(--ease)}
.buro:hover{border-color:var(--line-2);box-shadow:var(--sh)}
.buro .nom{font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.4px;margin-bottom:12px}
.buro .banda{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.9px;padding:3px 10px;border-radius:5px;margin-top:10px}
.buro .esc{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-4);
  font-family:var(--fm);margin-top:8px;padding:0 6px}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-3);
  font-weight:700;padding:10px;border-bottom:1px solid var(--line);background:var(--bg-2)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg-2)}
td b{color:var(--ink)}
td.num,th.num{text-align:right;font-family:var(--fm)}
.tw{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--bg)}

/* ---------- insignias ---------- */
.bdg{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 9px;
  border-radius:6px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.b-ok{background:var(--green-bg);color:var(--green)}
.b-warn{background:var(--gold-bg);color:var(--gold-ink)}
.b-bad{background:var(--red-bg);color:var(--red-ink)}
.b-info{background:var(--tint);color:var(--blue)}
.b-gold{background:var(--gold-bg);color:var(--gold-ink)}
.b-mut{background:var(--bg-3);color:var(--ink-2)}

/* ---------- barras ---------- */
.bar{height:8px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;transition:width .7s var(--ease)}
.bar i.ok{background:var(--green)}
.bar i.warn{background:var(--gold)}
.bar i.bad{background:var(--red)}
.bar i.gold{background:var(--blue-b)}

/* ---------- hallazgos ---------- */
.find{display:flex;gap:12px;padding:14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);
  border-left-width:3px;margin-bottom:8px;transition:.2s}
.find:hover{box-shadow:var(--sh)}
.find.crit{border-left-color:var(--red)}
.find.alta{border-left-color:var(--gold)}
.find.media{border-left-color:var(--blue-b)}
.find.baja{border-left-color:var(--ink-4)}
.find.good{border-left-color:var(--green)}
.find .n{font-size:17px;line-height:1.3;flex:none;width:24px;text-align:center}
.find b{display:block;font-size:13.5px;margin-bottom:3px;color:var(--ink)}
.find p{color:var(--ink-2);font-size:12.8px;line-height:1.55}
.find .why{color:var(--ink-3);font-size:11.8px;margin-top:5px;font-style:italic}

/* ---------- pasos ---------- */
.steps{counter-reset:s;display:flex;flex-direction:column;gap:8px}
.step{display:flex;gap:13px;padding:13px;border-radius:11px;background:var(--bg-2);border:1px solid var(--line)}
.step .num{counter-increment:s;flex:none;width:26px;height:26px;border-radius:8px;display:grid;
  place-items:center;font-weight:800;font-size:11.5px;background:var(--tint);color:var(--blue)}
.step .num:before{content:counter(s)}
.step b{font-size:13.5px;color:var(--ink)}
.step p{color:var(--ink-2);font-size:12.8px;margin-top:3px}

/* ---------- herramientas ---------- */
.tool{display:flex;gap:13px;padding:16px;border-radius:13px;background:var(--bg);border:1px solid var(--line);
  transition:.24s var(--ease)}
.tool:hover{border-color:var(--line-2);box-shadow:var(--sh)}
.tool .rank{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:14px;background:var(--fin);color:#fff}
.tool.sec .rank{background:var(--bg-3);color:var(--ink-2)}
.tool h5{font-size:14px}
.tool .desc{color:var(--ink-2);font-size:12.5px;margin:5px 0 7px;line-height:1.55}
.tool .fit{font-size:12.3px;color:var(--ink-2);background:var(--tint);border-left:2px solid var(--blue-b);
  padding:8px 11px;border-radius:0 8px 8px 0;margin-top:8px}
.tool .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}

/* ---------- productos ---------- */
.prod{padding:15px;border-radius:13px;border:1px solid var(--line);background:var(--bg);transition:.22s}
.prod:hover{border-color:var(--line-2);box-shadow:var(--sh)}
.prod.q{border-color:var(--green-line);background:var(--green-bg)}
.prod.c{border-color:var(--gold-line);background:var(--gold-bg)}
.prod.n{opacity:.55}
.prod .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.prod h5{font-size:13.5px}
.prod .kv{display:flex;gap:13px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-bottom:8px}
.prod .kv b{color:var(--ink-2);font-family:var(--fm)}
.prod .gapx{font-size:12px;color:var(--gold-ink);background:rgba(255,255,255,.75);padding:7px 10px;
  border-radius:8px;margin-top:6px;border:1px solid var(--gold-line)}

/* ---------- documentos ---------- */
.doc{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:12px;background:#fff;
  border:1px solid var(--line);margin-bottom:8px;transition:.2s}
.doc.on{border-color:var(--green-line);background:var(--green-bg)}
.doc .cb{flex:none;width:21px;height:21px;border-radius:6px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;cursor:pointer;font-size:11px;font-weight:900;transition:.18s;background:#fff}
.doc.on .cb{background:var(--green);border-color:var(--green);color:#fff}
.doc b{font-size:13.3px;color:var(--ink)}
.doc p{color:var(--ink-2);font-size:11.8px;margin-top:2px}
.doc .fields{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:700px){.doc .fields{grid-template-columns:1fr}}

/* ---------- filas repetibles ---------- */
.rrow{display:grid;gap:8px;padding:11px;border-radius:11px;background:var(--bg);border:1px solid var(--line);
  margin-bottom:8px;align-items:end}
.rrow .x{background:var(--red-bg);border:1px solid var(--red-line);color:var(--red);border-radius:8px;
  cursor:pointer;font-weight:800;height:36px;transition:.18s}
.rrow .x:hover{background:var(--red-bg)}

/* ---------- pestañas ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{padding:10px 15px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  border-bottom:2px solid transparent;transition:.18s;white-space:nowrap;
  /* Las pestañas se escriben como <button>, y un <button> sin fondo se lleva
     el del navegador: gris macizo con color-scheme:dark. Salia asi en Caja
     Negra. Una pestaña es texto con una raya debajo, no una caja: transparente
     y se acabo. Mismo caso que el `.btn` de mas abajo. */
  background:transparent;border-top:0;border-left:0;border-right:0}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- formularios ---------- */
input,select,textarea{background:var(--bg);border:1.5px solid var(--line-2);border-radius:9px;padding:10px 12px;
  color:var(--ink);font-family:inherit;font-size:13.5px;width:100%;transition:.16s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--tint)}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input[type=file]{padding:8px}
label.fl{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-3);
  margin-bottom:5px;font-weight:700}
.field{margin-bottom:12px}
.hint{font-size:11.8px;color:var(--ink-3);margin-top:5px;line-height:1.5}

/* ---------- botones ---------- */
.btn{border:1.5px solid transparent;border-radius:9px;padding:10px 17px;font-family:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;transition:.18s var(--ease);white-space:nowrap;display:inline-flex;
  align-items:center;gap:7px;justify-content:center;letter-spacing:-.01em;
  /* -------------------------------------------------------------------
     UN BOTON SIN VARIANTE NO PUEDE QUEDARSE SIN FONDO
     -------------------------------------------------------------------
     23-sep-2026. Daniel: "sigo con esos contenedores negros". Uno de los
     que quedaban era el boton "Esta en Infinanzas Credit", que salia GRIS
     MACIZO --rgb(107,107,107)-- en mitad del azul.

     Ese gris no estaba escrito en ninguna hoja: se buscó y no aparece. Es
     el fondo que pone el NAVEGADOR a un <button> cuando nadie le da uno, y
     con color-scheme:dark Chrome lo pinta gris medio.

     `<button class="btn">` sin variante existe en varios sitios de la app.
     Todos salian asi. Se arregla aqui, en la base, y no boton por boton:
     sin variante, un boton es un boton secundario --el mismo fondo de caja
     y la misma tinta que el resto--. Las variantes que vienen justo debajo
     (gold, primary, ghost, red) lo pisan por orden, que es como tiene que
     ser: misma especificidad y la ultima manda. */
  background:var(--bg);color:var(--ink);border-color:var(--line-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-gold,.btn-primary{background:var(--fin-b);color:#fff;border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.24)}
.btn-gold:hover,.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:var(--bg);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-blue{background:var(--tint);color:var(--blue);border-color:var(--tint)}
.btn-blue:hover{background:var(--tint)}
.btn-red{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.btn-red:hover{background:var(--red-bg)}
.btn.tiny{padding:7px 11px;font-size:11.5px;border-radius:8px}
.btn.file{position:relative;overflow:hidden}
.btn.file input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---------- avisos ---------- */
.note{background:var(--tint);border:1px solid var(--tint);border-radius:11px;padding:13px 15px;
  font-size:12.8px;color:var(--ink-2);line-height:1.6;margin:12px 0}
.note b{color:var(--ink)}
.note.gold{background:var(--gold-bg);border-color:var(--gold-line);color:var(--gold-ink)}
.note.gold b{color:var(--gold-ink)}
.note.red{background:var(--red-bg);border-color:var(--red-line);color:var(--red-ink)}
.note.red b{color:var(--red-ink)}
.note.ok{background:var(--green-bg);border-color:var(--green-line);color:var(--green-ink)}
.note.ok b{color:var(--green-ink)}

/* ---------- varios ---------- */
.empty{text-align:center;padding:56px 20px;color:var(--ink-3)}
.empty .ic{font-size:36px;margin-bottom:12px;opacity:.4}
.split{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
@media(max-width:1050px){.split{grid-template-columns:1fr}}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--bg);
  border:1px solid var(--line-2);font-size:12px;color:var(--ink-2);cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--tint);border-color:var(--blue);color:var(--blue);font-weight:600}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.pl-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.pl-line.tot{border-top:1.5px solid var(--line-2);border-bottom:none;margin-top:5px;padding-top:11px;
  font-weight:800;font-size:14.5px;color:var(--ink)}
.pl-line .r{font-family:var(--fm);display:flex;gap:13px;align-items:center;color:var(--ink)}
.pl-line .pc{font-size:11px;color:var(--ink-3);min-width:50px;text-align:right}

/* EL AVISO VA POR ENCIMA DE TODO, Y ESO NO ES COSMETICO.

   Tenia z-index:999 y el modal tambien (cristal.css los ponia juntos en la
   misma linea). Con el mismo z-index manda el orden del DOM, asi que el
   aviso quedaba DEBAJO del modal. Resultado: un guardado que falla dentro de
   un modal no dice nada — el usuario pulsa Guardar y no pasa nada visible.

   Eso es lo que convierte cualquier fallo en "no funciona y no sé por qué".
   1100 lo deja por encima del modal (900) y del resto. */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,90px);background:var(--aviso-bg);color:var(--aviso-ink);
  padding:12px 22px;border-radius:10px;font-weight:600;font-size:13px;z-index:1100;
  transition:.3s var(--ease);box-shadow:var(--sh-2);max-width:min(520px,90vw);text-align:center}
.toast.on{transform:translate(-50%,0)}
.modal{position:fixed;inset:0;background:rgba(22,25,33,.55);backdrop-filter:blur(4px);z-index:900;
  display:grid;place-items:center;padding:24px}
.modal-box{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:24px;
  width:min(880px,100%);max-height:88vh;overflow:auto;box-shadow:var(--sh-2)}

/* ---------- zona de PDF ---------- */
.drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:26px 20px;text-align:center;
  background:var(--bg);transition:.22s;cursor:pointer;position:relative}
.drop:hover,.drop.over{background:var(--tint);border-color:var(--blue)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .ic{font-size:26px;margin-bottom:8px;opacity:.6}
.drop b{display:block;font-size:14px;margin-bottom:4px;color:var(--ink)}
.drop p{color:var(--ink-2);font-size:12.3px;line-height:1.55}
.prog{height:5px;border-radius:99px;background:var(--bg-3);overflow:hidden;margin-top:12px}
.prog i{display:block;height:100%;background:var(--blue-b);transition:width .3s}
.prog-txt{margin-top:6px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.prog-txt b{color:var(--ink);font-weight:700}
.pdf-log{font-family:var(--fm);font-size:11px;color:var(--ink-2);background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-top:11px;
  max-height:190px;overflow:auto;line-height:1.7}
.pdf-log .ok{color:var(--green)} .pdf-log .warn{color:var(--gold-ink)} .pdf-log .bad{color:var(--red)}

/* ---------- revisión antes de importar ---------- */
.pv{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--bg);
  border:1px solid var(--line);margin-bottom:6px}
.pv.on{border-color:var(--green-line);background:var(--green-bg)}
.pv .cb{flex:none;width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;cursor:pointer;font-size:10px;font-weight:900;background:var(--bg);transition:.16s}
.pv.on .cb{background:var(--green);border-color:var(--green);color:#fff}
.pv .nm{flex:1;font-size:12.8px;font-weight:600;color:var(--ink)}
.pv .mt{font-size:11px;color:var(--ink-3);font-family:var(--fm)}

/* ---------- adjuntos ---------- */
.adj{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.adj-f{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line-2);
  border-radius:8px;padding:6px 8px 6px 10px;font-size:12px;max-width:100%}
.adj-f .ic{font-size:9px;font-weight:800;letter-spacing:.5px;background:var(--tint);color:var(--blue);
  padding:2px 5px;border-radius:4px;flex:none}
.adj-f a{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.adj-f a:hover{color:var(--blue)}
.adj-f small{color:var(--ink-3);font-family:var(--fm);font-size:10.5px;flex:none}
.adj-f button{background:none;border:none;color:var(--ink-4);cursor:pointer;font-size:16px;line-height:1;
  padding:0 2px;flex:none;transition:.16s}
.adj-f button:hover{color:var(--red)}
.adj-add{display:inline-flex;align-items:center;gap:6px;position:relative;overflow:hidden;
  background:var(--tint);border:1px dashed var(--line-2);border-radius:8px;padding:7px 12px;font-size:12px;
  font-weight:600;color:var(--blue);cursor:pointer;transition:.18s}
.adj-add:hover{background:var(--tint);border-color:var(--blue)}
.adj-add input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---------- estado de guardado ---------- */
.guardado{font-size:11px;padding:5px 9px;border-radius:7px;margin-bottom:8px;text-align:center;
  transition:.22s;line-height:1.4;font-weight:600}
.guardado:empty{display:none}
.guardado.pendiente{background:var(--gold-bg);color:var(--gold-ink)}
.guardado.guardando{background:var(--tint);color:var(--blue)}
.guardado.guardado{background:var(--green-bg);color:var(--green)}
.guardado.error{background:var(--red-bg);color:var(--red)}

/* =========================================================================
   INFORMES (papel) — se mantienen sobre blanco, listos para imprimir
   ========================================================================= */
.rep{background:#fff;color:var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--sh-2);
  border:1px solid var(--line)}
.rep .rhead{background:var(--fin);color:#fff;padding:30px 38px;border-bottom:3px solid var(--gold)}
.rep .rhead .brand{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.rep .rhead .idw{display:flex;gap:14px;align-items:center}
.rep .rhead .idw img{width:48px;height:48px;background:#fff;border-radius:12px;padding:6px;object-fit:contain}
.rep .rhead h1{font-size:22px;font-weight:800;letter-spacing:-.035em}
.rep .rhead .who{font-size:13px;color:#CFE1F5;margin-top:4px}
.rep .rhead .tagr{font-size:10.5px;color:#FFE3AE;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
.rep .rbody{padding:32px 38px}
.rep h2{font-size:16px;font-weight:800;color:var(--navy);margin:28px 0 12px;padding-bottom:7px;
  border-bottom:2px solid var(--gold);letter-spacing:-.025em}
.rep h2:first-child{margin-top:0}
.rep h3{font-size:13.5px;font-weight:700;margin:18px 0 8px;color:var(--navy)}
.rep p{font-size:13px;line-height:1.65;color:var(--ink-2);margin-bottom:9px}
.rep ul,.rep ol{margin:0 0 12px 20px}
.rep li{font-size:13px;line-height:1.65;color:var(--ink-2);margin-bottom:5px}
.rep table{font-size:12px}
.rep th{background:var(--bg-2);color:var(--ink-3)}
.rep td{color:var(--ink-2)}
.rep .box{background:var(--bg-2);border-left:3px solid var(--blue);padding:14px 16px;
  border-radius:0 9px 9px 0;margin:12px 0}
.rep .box.red{background:var(--red-bg);border-left-color:var(--red)}
.rep .box.grn{background:var(--green-bg);border-left-color:var(--green)}
.rep .box.blu{background:var(--tint);border-left-color:var(--blue-b)}
.rep .box.amb{background:var(--gold-bg);border-left-color:var(--gold)}
.rep .box b{color:var(--ink)}
.rep .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px;margin:14px 0}
.rep .kpi{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:13px}
.rep .kpi .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-3);font-weight:700}
.rep .kpi .v{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.04em;margin-top:4px}
.rep .vd{padding:16px 20px;border-radius:11px;font-weight:700;font-size:14px;margin:14px 0;
  display:flex;gap:12px;align-items:center}
.rep .vd.go{background:var(--green-bg);color:#14672F;border:1.5px solid var(--green-line)}
.rep .vd.mid{background:var(--gold-bg);color:#8A5C00;border:1.5px solid var(--gold-line)}
.rep .vd.no{background:var(--red-bg);color:#8E1B1B;border:1.5px solid var(--red-line)}
.rep .cta{background:var(--fin);color:#fff;padding:20px 24px;border-radius:12px;margin:18px 0;text-align:center}
.rep .cta a{display:inline-block;background:#fff;color:var(--blue);padding:12px 26px;border-radius:9px;
  font-weight:800;font-size:13.5px;margin-top:11px}
.rep .rfoot{background:var(--bg-2);padding:22px 38px;font-size:11px;color:var(--ink-3);
  border-top:1px solid var(--line);line-height:1.6}
.rep .rfoot b{color:var(--ink-2)}
.rep .pill{display:inline-block;font-size:10px;font-weight:800;padding:2.5px 9px;border-radius:5px;
  text-transform:uppercase;letter-spacing:.5px}
.pill.g{background:var(--green-bg);color:var(--green)}
.pill.y{background:var(--gold-bg);color:var(--gold-ink)}
.pill.r{background:var(--red-bg);color:var(--red-ink)}
.pill.b{background:var(--tint);color:var(--blue)}
.pill.n{background:var(--bg-3);color:var(--ink-2)}

@media print{
  body{background:var(--bg)}
  .side,.ph,.tabs,.toast{display:none !important}
  .app{grid-template-columns:1fr}
  main{padding:0;max-width:none}
  .rep{box-shadow:none;border-radius:0;border:none}
  .rep h2{page-break-after:avoid}
  .rep .box,.rep .vd,.rep table{page-break-inside:avoid}
}

/* ---- Tarjeta de cuenta negativa (estilo del reporte de la plataforma) ---- */
.cta-neg{display:flex;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin-bottom:10px;transition:box-shadow .15s,border-color .15s}
.cta-neg:hover{border-color:var(--line-2);box-shadow:0 4px 14px rgba(13,43,85,.08)}
.cta-neg .ico{width:42px;height:42px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 42px}
.cta-neg .cuerpo{flex:1 1 140px;min-width:120px}
.cta-neg .nom{font-weight:700;font-size:14.5px;color:var(--navy-ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta-neg .num{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.cta-neg .buros{display:flex;gap:12px;margin-top:7px;flex-wrap:wrap}
.cta-neg .buros span{font-size:11.5px;font-weight:700;letter-spacing:.01em}
.cta-neg .buros .b-tu{color:#00A9CE}
.cta-neg .buros .b-ex{color:#26478D}
.cta-neg .buros .b-eq{color:#C8102E}
.cta-neg .buros .b-off{color:#B4BFD0;font-weight:600;text-decoration:line-through}
/* La gravedad, en una franja a la izquierda (28-sep-2026): se ve de un vistazo
   que partida pesa mas sin leer la pastilla. */
.cta-neg{border-left:4px solid var(--line-2)}
.cta-neg.p-crit{border-left-color:#E5484D}
.cta-neg.p-alta{border-left-color:#E8A020}
.cta-neg.p-media{border-left-color:#1976D2}
.cta-neg .der{display:flex;align-items:center;gap:10px;flex:0 0 auto;max-width:46%}
.pill-neg{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:normal;text-align:center;line-height:1.3}
.pill-neg.crit{background:var(--red-bg);color:var(--red-ink)}
.pill-neg.alta{background:var(--gold-bg);color:var(--gold-ink)}
.pill-neg.media{background:var(--tint);color:var(--blue)}
.cta-neg .chev{color:var(--ink-3);font-size:17px;line-height:1;cursor:pointer;
  background:none;border:0;padding:4px 2px}
.cta-neg-det{background:var(--bg-2);border:1px solid var(--line);border-top:0;
  border-radius:0 0 14px 14px;padding:13px 16px;margin:-12px 0 10px;font-size:12.8px;color:var(--ink-2)}
.cta-neg-det .fila{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid rgba(13,43,85,.06)}
.cta-neg-det .fila:last-child{border-bottom:0}
.cta-neg-det .fila b{flex:0 0 148px;color:var(--navy-ink);font-weight:600}

/* ================= Asistente (chat) ================= */
/* El boton del asistente lleva el icono de Financore con sus colores, asi que
   el boton va claro: sobre el degradado azul el mark se perdia. */
.chat-btn{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:18px;
  border:1px solid var(--line-2);cursor:pointer;padding:0;line-height:0;
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(13,43,85,.18);
  transition:transform .14s,box-shadow .14s}
.chat-btn img{width:34px;height:34px;object-fit:contain;display:block}
.chat-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(13,43,85,.26)}
.chat-btn:active{transform:translateY(0)}

.chat{position:fixed;right:22px;bottom:88px;z-index:61;width:430px;max-width:calc(100vw - 44px);
  height:min(640px,calc(100vh - 130px));background:var(--bg);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px rgba(13,43,85,.22);display:none;flex-direction:column;overflow:hidden}
.chat.on{display:flex}
.ch-top{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.ch-top b{font-size:14.5px;color:var(--navy-ink);letter-spacing:-.01em}
.ch-sub{font-size:11.5px;color:var(--ink-3);margin-left:8px}
.ch-acc{display:flex;gap:4px}
.ch-ico{background:none;border:0;color:var(--ink-3);font-size:15px;cursor:pointer;padding:5px 8px;border-radius:8px}
.ch-ico:hover{background:var(--bg-3);color:var(--navy-ink)}

.ch-ctx{display:flex;align-items:center;gap:9px;padding:9px 16px;background:var(--tint);
  border-bottom:1px solid var(--line);font-size:12.3px;color:var(--ink-2);cursor:pointer}
.ch-ctx input{accent-color:var(--blue);cursor:pointer}
.ch-ctx b{color:var(--navy-ink)}

.ch-cuerpo{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.ch-msg{display:flex}
.ch-msg.yo{justify-content:flex-end}
.ch-msg .b{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.2px;line-height:1.55;word-wrap:break-word}
.ch-msg.yo .b{background:linear-gradient(180deg,#1E88E5 0%,#1565C0 100%);color:#fff;border-bottom-right-radius:5px}
.ch-msg.ia .b{background:var(--bg-2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.ch-msg.ia .b b{color:var(--navy-ink)}
.ch-msg.ia .b .ch-h{display:block;margin:10px 0 4px;font-size:13px}
.ch-msg.ia .b .ch-li{display:block;padding-left:15px;position:relative;margin:3px 0}
.ch-msg.ia .b .ch-li::before{content:'·';position:absolute;left:5px;color:var(--blue);font-weight:800}
.ch-msg.ia .b .ch-li i{font-style:normal;color:var(--blue);font-weight:700}
.ch-msg.ia .b code{background:var(--bg-3);padding:1px 5px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:11.8px}
.ch-msg.ia .b pre{background:var(--bg-3);padding:10px;border-radius:9px;overflow-x:auto;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;margin:8px 0;white-space:pre-wrap}

.ch-esc i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-3);
  margin-right:4px;animation:chp 1.2s infinite}
.ch-esc i:nth-child(2){animation-delay:.18s}
.ch-esc i:nth-child(3){animation-delay:.36s}
@keyframes chp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ch-vacio{text-align:center;padding:22px 6px;color:var(--ink-3)}
.ch-vacio .ic{margin-bottom:10px;line-height:0}
.ch-vacio .ic img{width:42px;height:42px;object-fit:contain;display:inline-block}
.ch-vacio b{display:block;color:var(--navy-ink);font-size:14.5px;margin-bottom:5px}
.ch-vacio p{font-size:12.5px;line-height:1.55;margin-bottom:14px}
.ch-sug{display:flex;flex-direction:column;gap:7px;text-align:left}
.ch-sug button{background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;
  font-size:12.3px;color:var(--ink-2);cursor:pointer;line-height:1.45;font-family:inherit;transition:border-color .13s,background .13s}
.ch-sug button:hover{border-color:var(--line-2);background:var(--bg);color:var(--navy-ink)}

.ch-uso{padding:5px 16px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);text-align:right}
.ch-pie{display:flex;gap:9px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg-2)}
.ch-pie textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font-family:inherit;font-size:13.2px;color:var(--ink);background:var(--bg);line-height:1.5;max-height:140px}
.ch-pie textarea:focus{outline:0;border-color:var(--line-2);box-shadow:0 0 0 3px rgba(30,136,229,.12)}
.ch-env{flex:0 0 40px;height:40px;border-radius:12px;border:0;cursor:pointer;color:#fff;font-size:17px;
  background:linear-gradient(180deg,#1976D2 0%,#1565C0 100%)}
.ch-env:disabled{opacity:.5;cursor:default}

@media (max-width:560px){
  .chat{right:12px;left:12px;width:auto;bottom:80px;height:min(560px,calc(100vh - 110px))}
  .chat-btn{right:14px;bottom:14px}
}
@media print{.chat,.chat-btn{display:none!important}}

/* Enlaces externos del menú: se distinguen de las vistas internas */
.nav-i.ext{text-decoration:none;color:var(--ink-2);display:flex;align-items:center}
.nav-i.ext:hover{color:var(--navy-ink)}
.nav-i.ext .ic{opacity:.6}

/* Rejilla de negativas, como el listado de cuentas del reporte */
.neg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;align-items:start}
.neg-grid .cta-neg{margin-bottom:0}
.neg-grid .cta-neg-det{margin:0}
@media (max-width:760px){.neg-grid{grid-template-columns:1fr}}

/* ---- Negativas en el informe: mismas tarjetas, formateadas para papel ---- */
.rep .ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:12px 0}
.rep .ncard{border:1px solid #E3E9F2;border-radius:11px;padding:11px 13px;background:#fff;break-inside:avoid}
.rep .ntop{display:flex;justify-content:space-between;align-items:flex-start;gap:9px}
.rep .nnom{font-weight:800;font-size:13px;color:#0D2B55;line-height:1.3}
.rep .nnum{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#5A6680;margin-top:2px}
.rep .npill{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;
  background:#FDECEC;color:#B3261E;white-space:nowrap}
.rep .nburos{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap}
.rep .nburos span{font-size:10.5px;font-weight:700}
.rep .nburos .n-tu{color:#00A9CE}
.rep .nburos .n-ex{color:#26478D}
.rep .nburos .n-eq{color:#C8102E}
.rep .nburos .n-off{color:#B4BFD0;font-weight:600;text-decoration:line-through}
.rep .nbase{font-size:10.5px;color:#5A6680;margin-top:7px;line-height:1.45}
@media print{.rep .ngrid{grid-template-columns:repeat(2,1fr)}}

/* Marca del despacho en el informe: si no hay logo, la inicial */
.rep .rhead .idw .sinlogo{width:42px;height:42px;border-radius:9px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;color:#fff;flex:0 0 42px}
.rep .rhead .idw img{max-height:44px;max-width:150px;object-fit:contain}

/* ================= Embudo de clientes ================= */
.embudo{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.emb-col{flex:0 0 232px;background:var(--bg-2);border:1px solid var(--line);border-radius:13px;
  padding:10px;transition:background .13s,border-color .13s}
.emb-col.sobre{background:var(--tint);border-color:var(--line-2)}
.emb-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-top:3px solid;border-radius:2px;padding-top:8px;margin-bottom:4px}
.emb-t{font-weight:800;font-size:12.5px;color:var(--navy-ink);letter-spacing:-.01em}
.emb-n{font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.emb-q{font-size:10.5px;color:var(--ink-3);line-height:1.45;margin-bottom:9px;min-height:30px}
.emb-cuerpo{display:flex;flex-direction:column;gap:8px;min-height:56px}
.emb-vacio{text-align:center;color:var(--ink-3);font-size:11px;padding:12px 0;opacity:.5}
.emb-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 11px;
  cursor:pointer;transition:box-shadow .13s,border-color .13s,transform .08s}
.emb-card:hover{border-color:var(--line-2);box-shadow:0 4px 12px rgba(13,43,85,.09)}
.emb-card:active{transform:scale(.985)}
.emb-nom{font-weight:700;font-size:13px;color:var(--navy-ink);line-height:1.3}
.emb-sub{font-size:11px;color:var(--ink-3);margin-top:2px}
.emb-pies{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.emb-pin{font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;
  background:var(--bg-3);color:var(--ink-3)}
.emb-pin.ok{background:var(--green-bg);color:var(--green-ink)}
.emb-pin.warn{background:var(--gold-bg);color:var(--gold-ink)}
.emb-pin.bad{background:var(--red-bg);color:var(--red-ink)}
.btn.on{background:var(--tint);color:var(--blue);border-color:var(--line-2)}
@media (max-width:900px){.emb-col{flex:0 0 200px}}

/* Pie de guardado: confirma y empuja al siguiente paso */
.pie-guardar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding:14px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:13px}
.pie-nota{font-size:11.5px;color:var(--ink-3);margin-left:12px}
.pie-paso{text-align:right;font-size:12.5px;color:var(--ink-2)}
.pie-paso span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-3);margin-bottom:2px}
.pie-paso b{color:var(--navy-ink);font-size:13.5px}
@media (max-width:620px){.pie-guardar{flex-direction:column;align-items:flex-start}.pie-paso{text-align:left}.pie-nota{display:block;margin:8px 0 0}}

/* ================= Contratos ================= */
.contrato{background:var(--bg);color:var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--sh-2);
  font-size:13px;line-height:1.65}
.contrato .c-cab{background:var(--navy);color:#fff;padding:22px 28px;display:flex;
  justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.contrato .c-marca{display:flex;align-items:center;gap:12px}
.contrato .c-logo{max-height:44px;max-width:150px;object-fit:contain}
.contrato .c-inicial{width:42px;height:42px;border-radius:9px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px}
.contrato .c-emp{font-weight:800;font-size:15px;letter-spacing:-.01em}
.contrato .c-lema{font-size:11px;color:#c9d0e0}
.contrato .c-tit{text-align:right}
.contrato .c-tit h1{font-size:18px;font-weight:800;margin:0;letter-spacing:-.01em}
.contrato .c-sub{font-size:11.5px;color:#c9d0e0;margin-top:3px}
.contrato .c-cuerpo{padding:26px 30px}
.contrato h2{font-size:14px;font-weight:800;color:var(--navy-ink);margin:22px 0 9px;
  padding-bottom:6px;border-bottom:1px solid #E3E9F2}
.contrato p{margin:0 0 9px}
.contrato .c-indice{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:20px;font-size:12.5px}
.contrato .c-indice ol{margin:7px 0 0;padding-left:20px}
.contrato .c-seccion{margin-bottom:30px}
.contrato .c-seccion-tit{background:var(--bg-3);border-left:3px solid var(--navy);padding:9px 13px;
  font-weight:800;font-size:13.5px;color:var(--navy-ink);margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.contrato .c-seccion-tit span{font-size:10.5px;font-weight:600;color:var(--ink-3);
  font-family:'JetBrains Mono',monospace}
.contrato .c-aviso{background:#FFF8E6;border:1px solid #F0DFA8;border-radius:9px;
  padding:11px 14px;font-size:12px;margin-bottom:14px}
.contrato .c-legal{font-size:11.8px;line-height:1.7;text-align:justify}
.contrato .c-trad{color:#4A5468}
.contrato .c-nota{font-size:11.5px;color:#5A6680;margin:6px 0 10px}
.contrato .c-caja{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:13px 16px;margin:12px 0;font-size:12.5px}
.contrato .c-caja ul{margin:7px 0 0;padding-left:19px}
.contrato .c-caja li{margin-bottom:5px}
.contrato .c-rojo{background:var(--red-bg);border-color:#F2C4C0}
.contrato .c-negrita{background:var(--bg);border:2px solid var(--navy)}
.contrato .c-lista{padding-left:20px;margin:0 0 10px}
.contrato .c-lista li{margin-bottom:7px}
.contrato table{width:100%;border-collapse:collapse;margin:10px 0}
.contrato .c-partes td{padding:9px 11px;border:1px solid #E3E9F2;vertical-align:top;font-size:12.5px}
.contrato .c-k{background:var(--bg-2);font-weight:700;color:var(--navy-ink);width:32%}
.contrato .c-pagos td{padding:9px 11px;border-bottom:1px solid #E3E9F2;font-size:12.5px}
.contrato .c-num{text-align:right;font-family:'JetBrains Mono',monospace}
.contrato .c-falta{color:var(--red-ink);font-weight:700;font-size:11.5px}
.contrato .c-firma{margin-top:26px}
.contrato .c-firma td{padding:0 12px;vertical-align:top;width:33%}
.contrato .c-linea{border-bottom:1px solid #6B7688;height:34px}
.contrato .c-etq{font-size:10.5px;color:#5A6680;margin-top:5px}
.contrato .c-etq2{font-size:11px;color:var(--navy-ink);font-weight:600}
.contrato .c-firma-final{margin-top:34px}
.contrato .c-cancel{border:1px dashed #6B7688;border-radius:9px;padding:15px 17px;margin:14px 0}
.contrato .c-cancel-tit{font-weight:800;color:var(--navy-ink);font-size:13px;margin-bottom:10px;
  display:flex;justify-content:space-between;gap:10px}
.contrato .c-copia{font-size:10.5px;color:var(--ink-3);font-weight:600}
.contrato .c-pie{background:var(--bg-2);border-top:1px solid var(--line);padding:14px 30px;
  font-size:11px;color:#5A6680;text-align:center}
@media print{
  .contrato{box-shadow:none;border-radius:0}
  .contrato .c-seccion{page-break-before:always;break-before:page}
  .contrato .c-seccion:first-of-type{page-break-before:auto;break-before:auto}
  .contrato .c-cancel,.contrato .c-firma,.contrato .c-caja{break-inside:avoid}
}

/* Barra de acciones sobre el informe personal. Va pegada arriba del
   diagnostico: el informe es lo primero que se ve al abrir el expediente,
   asi que las acciones tienen que estar ahi y no al final de la pagina. */
.acc-informe {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  padding: 0 0 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

/* ===== Plan de trabajo: fases grandes + urgencia por color =====
   El plan es lo que el consultor le lee al cliente, asi que la fase tiene que
   leerse de lejos y cada paso decir solo cuando toca hacerlo. */
.fase{margin-bottom:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.fase-h{padding:16px 18px 14px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.fase-h .fase-n{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--blue,#1565C0)}
.fase-h .fase-d{display:inline-block;margin-left:9px;font-size:11px;font-weight:600;color:var(--ink-3)}
.fase-h h4{margin:4px 0 0;font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.fase .steps{padding:14px}

.step{border-left:4px solid var(--line-2)}
.step.pr-ya{border-left-color:#16A34A;background:#F2FBF5}
.step.pr-pronto{border-left-color:#D9A017;background:#FFFBF0}
.step.pr-luego{border-left-color:#1565C0;background:#F3F8FE}
.step.pr-critico{border-left-color:#DC2626;background:#FEF4F4}
.step.pr-ya .num{background:#16A34A;color:#fff}
.step.pr-pronto .num{background:#D9A017;color:#fff}
.step.pr-luego .num{background:#1565C0;color:#fff}
.step.pr-critico .num{background:#DC2626;color:#fff}

.pr-tag{display:inline-block;margin-left:9px;padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;vertical-align:middle}
.pr-tag.pr-ya{background:#DCFCE7;color:#15803D}
.pr-tag.pr-pronto{background:#FEF3C7;color:#7A4A06}   /* #A16207 daba 4,42:1 y el rotulo es de 10px */
.pr-tag.pr-luego{background:#DBEAFE;color:#1D4ED8}
.pr-tag.pr-critico{background:#FEE2E2;color:#B91C1C}

.leyenda{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:0 0 14px;
  font-size:11.5px;color:var(--ink-3);font-weight:600}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block}
.leyenda i.pr-ya{background:#16A34A}
.leyenda i.pr-pronto{background:#D9A017}
.leyenda i.pr-luego{background:#1565C0}
.leyenda i.pr-critico{background:#DC2626}

/* Sello de version en el pie del menu: si no coincide con lo ultimo que se
   toco, el navegador esta sirviendo codigo viejo. */
.whoami .version{display:block;margin-top:5px;font-family:var(--fm);font-size:9.5px;
  color:var(--ink-4);letter-spacing:.3px}
.subir-mini{position:relative;overflow:hidden;cursor:pointer}
.subir-mini input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* ===== Resumen para el cliente: tres bloques por color =====
   Rojo lo que le afecta, azul lo que hacemos nosotros, verde lo que le toca
   a el. El cliente tiene que poder ubicarse sin leer: mira el color y sabe
   si eso es un problema, una promesa nuestra o una tarea suya. */
.rep h2.bloque{position:relative;padding:12px 16px 12px 46px;border-radius:10px;margin-top:30px;
  border:0;color:#fff;font-size:17px}
.rep h2.bloque:before{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:17px;line-height:1}
.rep h2.bloque.rojo{background:#B32020}
.rep h2.bloque.rojo:before{content:'\26A0'}
.rep h2.bloque.azul{background:#1565C0}
.rep h2.bloque.azul:before{content:'\25C6'}
.rep h2.bloque.verde{background:#1B7A3D}
.rep h2.bloque.verde:before{content:'\2713'}

.rep .afecta{border:1px solid #E7EAF0;border-left:4px solid #B32020;border-radius:10px;
  padding:14px 16px;margin:12px 0;background:#FDF7F7}
.rep .af-h{display:flex;align-items:flex-start;gap:11px;margin-bottom:6px}
.rep .af-n{flex:none;width:24px;height:24px;border-radius:7px;background:#B32020;color:#fff;
  font-size:13px;font-weight:800;display:grid;place-items:center}
.rep .af-h b{font-size:15px;color:#161921}
.rep .af-p{font-size:13px;color:#4A5468;line-height:1.6;margin:0}

/* Cada cuenta negativa en UN renglon: el cliente no necesita el numero de
   cuenta ni la base legal — necesita reconocerla. */
.rep ul.negs{list-style:none;margin:11px 0 0;padding:0}
.rep ul.negs li{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:8px 11px;background:#fff;border:1px solid #EFE2E2;border-radius:8px;margin-bottom:6px;font-size:12.5px}
.rep ul.negs li b{color:#161921}
.rep ul.negs .nm{font-family:var(--fm);color:#8E1B1B;font-weight:600}
.rep ul.negs .ne{margin-left:auto;background:#FDEAEA;color:#8E1B1B;border-radius:999px;
  padding:2px 9px;font-size:11px;font-weight:700}
.rep ul.negs .nb{color:#77809a;font-size:11px}

.rep ul.hacemos{list-style:none;margin:14px 0 0;padding:0}
.rep ul.hacemos li{padding:12px 14px 12px 40px;position:relative;background:#F4F8FE;
  border:1px solid #DCE9FA;border-radius:9px;margin-bottom:8px;font-size:13px;line-height:1.6;color:#33415C}
.rep ul.hacemos li:before{content:'\25C6';position:absolute;left:15px;top:12px;color:#1565C0}
.rep ul.hacemos li b{color:#0D2B55}

.rep ol.tuyo{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:t}
.rep ol.tuyo li{counter-increment:t;padding:12px 14px 12px 42px;position:relative;background:#F3FAF5;
  border:1px solid #D6EDDD;border-radius:9px;margin-bottom:8px;font-size:13px;line-height:1.6;color:#2C4536}
.rep ol.tuyo li:before{content:counter(t);position:absolute;left:13px;top:11px;width:20px;height:20px;
  border-radius:6px;background:#1B7A3D;color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center}
.rep ol.tuyo li b{color:#14532D}

@media print{
  .rep h2.bloque{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rep ul.hacemos li,.rep ol.tuyo li,.rep .afecta,.rep ul.negs li{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
}

/* ===== "Lo que esto te cuesta" — lo primero que ve el cliente =====
   El numero sale de su propio reporte. No se adorna ni se suaviza: se pone
   grande, y el saca su conclusion sin que nadie lo humille. */
.rep .duele{background:linear-gradient(160deg,#8E1B1B 0%,#5E0F0F 100%);color:#fff;
  border-radius:14px;padding:26px 28px;margin:22px 0 16px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
.rep .duele .d-k{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;
  font-weight:700;opacity:.82;margin-bottom:8px}
.rep .duele .d-n{font-size:46px;font-weight:900;letter-spacing:-.035em;line-height:1}
.rep .duele .d-n small{display:block;font-size:13px;font-weight:600;opacity:.85;
  letter-spacing:0;margin-top:7px}
.rep .duele .d-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.rep .duele .d-g > div{background:rgba(255,255,255,.12);border-radius:10px;padding:13px 14px}
.rep .duele .d-g span{display:block;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.9px;opacity:.8;margin-bottom:5px}
.rep .duele .d-g b{display:block;font-family:var(--fm);font-size:20px;font-weight:800;line-height:1.1}
.rep .duele .d-g i{display:block;font-style:normal;font-size:11px;opacity:.78;margin-top:5px;line-height:1.45}
.rep .duele .d-p{font-size:12.5px;line-height:1.65;margin-top:20px;opacity:.92;
  border-top:1px solid rgba(255,255,255,.22);padding-top:15px}

.rep .cierra{border:1px solid #F0DADA;border-left:4px solid #B32020;background:#FDF7F7;
  border-radius:10px;padding:16px 18px;margin-bottom:18px;break-inside:avoid}
.rep .cierra b{font-size:14px;color:#8E1B1B}
.rep .cierra ul{margin:10px 0 0;padding-left:20px}
.rep .cierra li{font-size:13px;line-height:1.65;color:#3A4254;margin-bottom:6px}
.rep .cierra p{font-size:12.5px;color:#5A6680;margin:12px 0 0;font-style:italic}

@media print{ .rep .duele .d-g{grid-template-columns:repeat(3,1fr)} }

/* Los tres buros en el resumen del cliente, como en el panel */
.rep .buros3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.rep .bur{border:1px solid #E7EAF0;border-radius:11px;padding:16px 14px;text-align:center;
  background:#fff;break-inside:avoid}
.rep .bur-n{font-size:11.5px;font-weight:700;color:#5A6680;letter-spacing:.3px;margin-bottom:8px}
.rep .bur-v{font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1}
.rep .bur-b{height:7px;border-radius:99px;background:#EEF1F6;overflow:hidden;margin:11px 0 8px}
.rep .bur-b i{display:block;height:100%;border-radius:99px}
.rep .bur-r{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.9px}
@media print{ .rep .buros3{grid-template-columns:repeat(3,1fr)}
  .rep .bur,.rep .bur-b i{-webkit-print-color-adjust:exact;print-color-adjust:exact} }

/* Todas las cuentas con problemas, juntas y graduadas por color.
   El cliente tiene que entender la gravedad sin leer una palabra. */
.rep h3.tcj{font-size:16px;margin:26px 0 6px;color:#161921}
.rep .nivel{margin:14px 0;break-inside:avoid}
.rep .niv-h{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.rep .niv-p{width:12px;height:12px;border-radius:4px;display:inline-block;flex:none;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.rep .niv-h b{font-size:13.5px;letter-spacing:-.01em}
.rep .niv-c{font-size:11px;color:#77809a;margin-left:auto;font-weight:600}
.rep .niv-d{font-size:12px;color:#5A6680;line-height:1.55;margin:0 0 9px 21px}
.rep .nivel ul.negs{margin-left:21px}

/* El segundo dolor: el saldo que esta en manos de cobradores. Va mas oscuro
   que el del interes — es el que de verdad bloquea aprobaciones. */
.rep .duele.mora{background:linear-gradient(160deg,#5E0F0F 0%,#3A0A0A 100%);margin-top:14px}

/* ===== Hoja de ruta del informe tecnico =====
   Cuatro areas, cuatro colores: rojo bloquea, ambar se somete, azul se
   calcula, verde se sostiene. El consultor tiene que saber que hacer sin
   leer el informe entero. */
.rep .ruta{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:16px 0 8px}
.rep .ruta-c{border:1px solid #E7EAF0;border-top:4px solid #ccc;border-radius:11px;
  padding:14px 14px 12px;background:#fff;break-inside:avoid;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.rep .ruta-k{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px}
.rep .ruta-n{font-size:30px;font-weight:900;letter-spacing:-.035em;line-height:1.05;margin:5px 0 2px}
.rep .ruta-t{font-size:13px;font-weight:800;color:#161921;margin-bottom:5px}
.rep .ruta-d{font-size:11.5px;line-height:1.5;color:#5A6680}
.rep .ruta-s{font-size:10px;color:#9AA3B5;margin-top:8px;padding-top:7px;border-top:1px solid #EFF2F7;font-weight:700;text-transform:uppercase;letter-spacing:.7px}
@media print{ .rep .ruta{grid-template-columns:repeat(4,1fr)} }

/* Cada seccion del tecnico lleva su area en el borde, para ubicarse de un
   vistazo al pasar las paginas. */
.rep h2.area{padding-left:14px;border-left:5px solid #ccc}
.rep h2.area.bloquea{border-left-color:#B32020}
.rep h2.area.somete{border-left-color:#D97706}
.rep h2.area.calcula{border-left-color:#1565C0}
.rep h2.area.sostiene{border-left-color:#1B7A3D}

/* ===== Resumen del cliente: espejo, contraste y cierre ===== */
.rep .espejo{background:#F7F8FA;border:1px solid #E7EAF0;border-radius:12px;
  padding:20px 22px;margin:18px 0;break-inside:avoid}
.rep .espejo .esp-k{font-size:14.5px;font-weight:800;color:#161921;margin-bottom:11px}
.rep .espejo ul{margin:0;padding-left:20px}
.rep .espejo li{font-size:13.5px;line-height:1.75;color:#33415C;margin-bottom:6px}
.rep .espejo p{font-size:12.5px;color:#5A6680;line-height:1.65;margin:13px 0 0;
  padding-top:12px;border-top:1px solid #E7EAF0}

.rep .contraste{margin:22px 0;break-inside:avoid}
.rep .contraste .con-k{font-size:15px;font-weight:800;color:#161921;margin-bottom:12px}
.rep .contraste .con-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rep .contraste .con-g > div{border:1px solid #EFE2E2;border-radius:11px;padding:15px 17px;background:#FDF7F7}
.rep .contraste .con-g > div.ok{border-color:#D6EDDD;background:#F3FAF5}
.rep .contraste .con-g b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.9px;
  color:#8E1B1B;margin-bottom:9px}
.rep .contraste .con-g .ok b{color:#1B7A3D}
.rep .contraste .con-g ul{margin:0;padding-left:18px}
.rep .contraste .con-g li{font-size:12.5px;line-height:1.6;color:#3A4254;margin-bottom:6px}
.rep .contraste > p{font-size:12.5px;color:#5A6680;margin:12px 0 0;font-style:italic}

.rep .cierre{background:linear-gradient(160deg,#1976D2 0%,#1565C0 100%);color:#fff;
  border-radius:14px;padding:24px 26px;margin:24px 0 8px;break-inside:avoid;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.rep .cierre .cie-k{font-size:17px;font-weight:900;letter-spacing:-.02em;margin-bottom:13px}
.rep .cierre ol{margin:0;padding-left:20px}
.rep .cierre li{font-size:13px;line-height:1.7;margin-bottom:9px;color:#DCE4F0}
.rep .cierre li b{color:#fff}
.rep .cierre .cie-reloj{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);
  font-size:13px;line-height:1.65;color:#F2C879}
.rep .cierre .cie-reloj b{color:#fff}
@media print{ .rep .contraste .con-g{grid-template-columns:1fr 1fr} }

/* ===== El informe tecnico como PLAN DE ACCION =====
   Cada seccion es un paso numerado con su area y su color. El consultor tiene
   que poder trabajarlo de arriba abajo sin leerlo entero. */
.rep .etapa{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:34px 0 14px;padding-bottom:9px;border-bottom:2px solid #161921}
.rep .etapa b{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1.6px;color:#161921}
.rep .etapa span{font-size:12px;color:#5A6680;line-height:1.5}

.rep .paso{display:flex;gap:14px;align-items:flex-start;margin:20px 0 10px;
  padding:14px 16px;border-radius:12px;background:#F7F8FA;border:1px solid #E7EAF0;
  border-left:5px solid #ccc;break-inside:avoid;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.rep .paso.bloquea{border-left-color:#B32020;background:#FDF7F7}
.rep .paso.somete{border-left-color:#D97706;background:#FFFBF3}
.rep .paso.calcula{border-left-color:#1565C0;background:#F4F8FE}
.rep .paso.sostiene{border-left-color:#1B7A3D;background:#F4FAF6}
.rep .paso-n{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-size:15px;font-weight:900;color:#fff;background:#8895AA}
.rep .paso.bloquea .paso-n{background:#B32020}
.rep .paso.somete .paso-n{background:#D97706}
.rep .paso.calcula .paso-n{background:#1565C0}
.rep .paso.sostiene .paso-n{background:#1B7A3D}
.rep .paso-c{flex:1;min-width:0}
.rep .paso-a{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;
  color:#77809a;margin-bottom:3px}
.rep h2.paso-t{margin:0;padding:0;border:0;font-size:17px;letter-spacing:-.02em;color:#161921}
.rep .paso-q{font-size:12.5px;line-height:1.6;color:#4A5468;margin-top:5px}

.rep h2.anexo{margin-top:36px;font-size:15px;color:#5A6680;border-bottom:1px solid #E7EAF0}

/* Buscador de clientes: con 150 expedientes, el scroll no es una opcion. */
.buscador{display:flex;align-items:center;gap:9px;margin:0 0 16px;padding:0 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:11px}
.buscador .lupa{font-size:17px;color:var(--ink-3);flex:none;line-height:1}
.buscador input{flex:1;border:0;outline:0;padding:12px 0;font-size:14px;background:transparent;
  font-family:inherit;color:var(--ink)}
.buscador input::-webkit-search-cancel-button{display:none}
.buscador:focus-within{border-color:var(--blue,#1565C0);box-shadow:0 0 0 3px rgba(21,101,192,.1)}

/* Bitacora del expediente */
.nota-nueva{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.nota-nueva textarea{width:100%;border:0;outline:0;resize:vertical;font-family:inherit;font-size:13.5px;
  line-height:1.6;color:var(--ink);background:transparent;min-height:62px}
.nota-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.nota-pie span{font-size:11px;color:var(--ink-4)}
.bitacora{display:flex;flex-direction:column;gap:9px}
.bit-i{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--blue,#1565C0);
  border-radius:10px;padding:11px 14px}
.bit-h{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.bit-h b{font-size:12.5px;color:var(--ink)}
.bit-h span{font-size:11px;color:var(--ink-4)}
.bit-h .x{margin-left:auto;border:0;background:transparent;color:var(--ink-4);cursor:pointer;font-size:12px;padding:2px 5px}
.bit-h .x:hover{color:var(--red)}
.bit-i p{font-size:13px;line-height:1.65;color:var(--ink-2);margin:0;white-space:pre-wrap}


/* Enlace de herramienta: el consultor lo copia y lo manda. Se rompe por
   cualquier lado porque algunas URL de referido son larguisimas. */
.enlace-t{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--bg-3);flex-wrap:wrap}
.enlace-t a{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  color:var(--fin-b,#1565C0);text-decoration:none;word-break:break-all;flex:1;min-width:180px}
.enlace-t a:hover{text-decoration:underline}
.enlace-r{margin:8px 0 16px;padding:9px 11px;background:var(--bg-2,#f6f7f9);
  border-left:3px solid var(--fin-b,#1565C0);border-radius:0 5px 5px 0;font-size:12px}
.enlace-r a{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  color:var(--fin-b,#1565C0);word-break:break-all}
@media print{.enlace-t button{display:none}}


/* Bloque listo para pegar en WhatsApp. Se ve distinto del resto de la
   respuesta a proposito: el consultor tiene que saber de un vistazo que ESO
   es lo unico que sale de la app hacia el cliente. */
.ch-mandar{margin:10px 0 2px;border:1px solid #25D366;border-radius:10px;overflow:hidden;background:#f2fbf5}
.ch-mandar-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;background:#25D366;color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.ch-mandar-h button{border:0;background:rgba(255,255,255,.22);color:#fff;font-weight:700;
  font-size:11px;padding:3px 10px;border-radius:99px;cursor:pointer}
.ch-mandar-h button:hover{background:rgba(255,255,255,.36)}
.ch-mandar-b{padding:10px 11px;font-size:13px;line-height:1.5;color:#123}


/* Selector mensual / anual. Va antes de las tarjetas a proposito: el ciclo se
   elige antes de ver el precio, no despues de ver el boton. */
.ciclo{display:inline-flex;gap:4px;padding:4px;margin:0 0 14px;
  background:var(--bg-3,#eceff3);border-radius:99px}
.ciclo button{border:0;background:transparent;cursor:pointer;padding:7px 18px;
  border-radius:99px;font-size:13px;font-weight:700;color:var(--ink-3,#66707d);
  display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s}
.ciclo button.on{background:var(--bg);color:var(--navy-ink);
  box-shadow:0 1px 3px rgba(16,32,52,.14)}
.ciclo button span{font-size:10.5px;font-weight:800;letter-spacing:.03em;
  background:#14683A;color:#fff;padding:2px 7px;border-radius:99px}
.ciclo button:not(.on) span{background:#5C677A}


/* Medidor de puntaje del resumen del cliente. Prefijo propio (mp-) porque
   .gauge ya existe en el panel del consultor y lleva un rotate(-90deg) que
   torcia este medidor entero, numeros incluidos. El numero manda; todo lo
   demas esta para situarlo. Se dibuja en SVG para que imprima nitido. */
.rep .buros3,.buros3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 22px}
.mp{background:var(--bg);border:1px solid #e6e9ee;border-radius:12px;padding:12px 8px 14px;text-align:center}
.mp svg{width:100%;max-width:168px;height:auto;display:block;margin:0 auto;transform:none}
.mp .mp-v{font:800 27px/1 system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.02em}
.mp .mp-t{font:600 9.5px/1 system-ui,sans-serif;fill:#9aa3ae}
.mp-d{font-size:12.5px;font-weight:800;margin-top:-2px}
.mp-d.sube{color:var(--green-ink)}
.mp-d.baja{color:var(--red-ink)}
.mp-n{font-size:12px;font-weight:700;color:#0f2b46;margin-top:5px}
.mp-b{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.mp-f{font-size:10px;color:#9aa3ae;margin-top:4px}
/* Con 1fr la columna no baja del ancho del medidor (172 px) y a ~960 px el
   tercero se salia del papel cortado (1-oct-2026). minmax(0,1fr) deja que
   el medidor encoja con su columna. */
.rep .buros3,.buros3{grid-template-columns:repeat(3,minmax(0,1fr))}
.buros3 > *{min-width:0}
@media (max-width:640px){.rep .buros3,.buros3{grid-template-columns:1fr;gap:10px}}
@media print{.mp{break-inside:avoid;border-color:#ccc}
  /* El medidor unico va impreso en el informe que se lleva el cliente. */
  .med{break-inside:avoid;border-color:#ccc;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}}


/* ---- Tarjetas del panel con tono ----
   El panel era correcto pero plano: tres cifras del mismo gris pidiendo la
   misma atencion. El tono no es decoracion, es jerarquia — cada tarjeta dice
   de que habla antes de que la leas, y la roja salta sin tener que buscarla. */
.card.stat{position:relative;overflow:hidden}
.card.stat.tono{padding-left:20px;background:linear-gradient(135deg,var(--t-bg) 0%,#fff 62%)}
.card.stat.tono::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--t-c)}
.card.stat.tono .v{color:var(--t-c)}
.card.stat.tono:hover{box-shadow:0 2px 4px rgba(22,25,33,.04),0 14px 30px var(--t-sh)}
/* El titulo se metia debajo del icono y "Reporte vencido" salia cortado. */
.card.stat.tono .k{padding-right:36px}
.stat .ico{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:var(--t-c);color:#fff;opacity:.92}

.t-azul {--t-c:var(--blue); --t-bg:var(--tint); --t-sh:rgba(21,101,192,.16)}
.t-oro  {--t-c:var(--oro-c); --t-bg:var(--gold-bg);  --t-sh:rgba(232,160,32,.18)}
.t-verde{--t-c:var(--green);--t-bg:var(--green-bg); --t-sh:rgba(30,142,66,.16)}
.t-rojo {--t-c:var(--red);  --t-bg:var(--red-bg);   --t-sh:rgba(211,58,58,.16)}
.t-navy {--t-c:var(--navy-ink); --t-bg:var(--bg-3); --t-sh:rgba(13,43,85,.16)}

/* La barra hereda el tono de su tarjeta en vez de ser siempre dorada. */
.card.stat.tono .bar i.tono{background:var(--t-c)}

/* El embudo con el color de cada etapa de fondo, no solo en el punto. */
.pl-line.etapa{border-radius:9px;padding:9px 12px;margin:0 -4px 3px;transition:background .14s}
.pl-line.etapa:hover{background:var(--bg-2)}


/* ---- Tabla de disputas ----
   Lo unico que se mira aqui son los tres numeros y su flecha. Todo lo demas
   se aparta para no competir con ellos. */
table.disp td{vertical-align:top}
table.disp .num{white-space:nowrap}
table.disp .num b{font-family:var(--fm);font-size:14px}
table.disp .sin{color:var(--ink-4)}
table.disp a{color:var(--blue);text-decoration:none}
table.disp a:hover{text-decoration:underline}
.dlt{font-size:11px;font-weight:800;padding:1px 6px;border-radius:99px;margin-left:3px}
.dlt.up{color:var(--green-ink);background:var(--green-bg)}
.dlt.dn{color:var(--red-ink);background:var(--red-bg)}

.chk{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:13.5px;line-height:1.45}
.chk input{margin-top:2px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--blue);cursor:pointer}

/* La contrasena guardada nunca se ve por accidente: solo si se pulsa Ver. */
#accPass{font-family:var(--fm);letter-spacing:.04em}


/* =========================================================================
   PASE DE BRANDING — alinear con Financore Platform
   La plataforma respira mas: tarjetas mas redondas, sombra suave en vez de
   borde marcado, numeros grandes y titulos en geometrica pesada. Lo que
   cambia no es el color sino el PESO de las cosas.
   ========================================================================= */

.card{border-radius:var(--r);border-color:#EDF0F5;
  box-shadow:0 1px 2px rgba(16,24,40,.03),0 8px 24px rgba(16,24,40,.045)}
.card:hover{box-shadow:0 2px 6px rgba(16,24,40,.05),0 16px 38px rgba(16,24,40,.09)}
.card.flat{box-shadow:none}
.card.flat:hover{box-shadow:0 1px 2px rgba(16,24,40,.03),0 8px 22px rgba(16,24,40,.05)}

/* Las cifras mandan: mas grandes y mas apretadas. */
.stat .v{font-family:var(--fd);font-size:31px;font-weight:700;letter-spacing:-.03em}
.stat .k{font-family:var(--fd);font-weight:600;letter-spacing:.9px;font-size:10px}
.card.stat{padding:17px 18px}
.card.stat.tono{padding-left:21px}
.card.stat.tono::before{width:5px}
.stat .ico{border-radius:11px;width:32px;height:32px}
.bar{height:7px}

/* Botones: la forma y la tipografia si se alinean con la plataforma, pero el
   color solido NO. Le habia puesto el azul apagado a .btn-primary mientras
   .btn-gold conservaba el degradado vivo, y quedaban dos botones principales
   de colores distintos en la misma columna. Manda el degradado: es el que ya
   se usaba y el que Daniel señalo. */
.btn{border-radius:var(--r-s);font-family:var(--fd);font-weight:600}
.btn-gold,.btn-primary{background:var(--fin-b);border-color:transparent;color:#fff}
.btn-gold:hover,.btn-primary:hover{filter:brightness(1.06)}

/* Pestañas y encabezados de tabla, en la misma geometrica. */
.tabs .tab,th{font-family:var(--fd);font-weight:600}
.ph p{color:var(--ink-2)}

/* -------- Lo perdido y lo vencido, en rojo --------
   Estaban en gris. Un expediente perdido y uno vencido son las dos unicas
   cosas del embudo que cuestan dinero, y en gris se leian como "archivado". */
.bdg.b-perdido{background:var(--red-bg);color:var(--red-ink);border:1px solid var(--red-line)}
.pl-line.etapa.perdida span:first-child{color:var(--red-ink)}

.dlt.cero{color:var(--ink-3);background:var(--bg-3)}
.tot-up{color:var(--green-ink)}
.tot-dn{color:var(--red-ink)}
table.disp .tot-up,table.disp .tot-dn{font-family:var(--fm);font-size:14px}

/* Iconos del menu: SVG de trazo, mismo tamaño optico en todos. */
.nav-i .ic{width:19px;height:19px;flex:none;display:grid;place-items:center}
.nav-i .ic svg{width:19px;height:19px;display:block;opacity:.85}
.nav-i.on .ic svg{opacity:1}
.nav-i:hover .ic svg{opacity:1}

/* Tarjetas de guia */
.card.guia{display:flex;flex-direction:column}
.guia h4{font-size:15px;margin-bottom:5px}
.guia-c{margin-top:9px;padding:9px 11px;background:var(--bg-2);border-radius:9px;
  font-size:12px;color:var(--ink-2);line-height:1.5}
.guia .acts{margin-top:auto}

/* Fila de credencial en el modal de acceso */
.acc-f{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-2);
  border-radius:10px;margin-bottom:8px}
.acc-f span{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-3);
  font-weight:700;width:86px;flex:none}
.acc-f code{font-family:var(--fm);font-size:13px;color:var(--ink);flex:1;word-break:break-all}

/* Palancas del panel: orden, no promesa. */
.palanca{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.palanca:first-of-type{border-top:0}
.palanca .pl-n{width:19px;height:19px;flex:none;border-radius:6px;background:var(--tint);
  color:var(--blue);font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.palanca b{font-size:12.5px;display:block;line-height:1.35}
.palanca .pl-d{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.palanca .pl-p{color:var(--ink-2);font-weight:600}
/* Para cerrar la venta (1-oct-2026): arriba de la columna del Analisis. Todo
   con variables de tema: el dorado y su tinta cambian solos en oscuro. */
.guion-cierre{text-align:left;background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:12px;
  padding:14px 14px 12px;margin-bottom:18px}
.guion-cierre .gc-k{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:var(--gold-ink);margin-bottom:6px}
.guion-cierre .gc-t{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4}
.guion-cierre .gc-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;color:var(--ink-3);margin-top:10px}
.guion-cierre .gc-q{font-size:12.5px;font-style:italic;color:var(--ink);line-height:1.5;margin-top:3px}
.guion-cierre .gc-h{font-size:15px;font-weight:800;color:var(--ink);margin-top:2px}
.guion-cierre .gc-h span{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.guion-cierre .gc-p{font-size:11px;color:var(--ink-3);margin-top:7px;line-height:1.4;text-align:center}


/* Aqui estaba el apano del scroll horizontal — columnas de 186px, mascara en
   el borde y scroll-snap. Se quito: el embudo ahora envuelve en dos filas y no
   hace falta esconder nada. */



/* =========================================================================
   PANEL — segunda pasada
   El degradado de color detras de cada tarjeta era lo que lo hacia ver viejo:
   relleno tenue, ruido de fondo, y encima competia con las cifras. Lo moderno
   hoy es al reves — carta blanca limpia, el color reservado al icono y al
   numero, y una franja fina que ordena sin gritar.
   ========================================================================= */
.card.stat.tono{background:var(--bg);padding:16px 17px 15px 19px}
.card.stat.tono::before{width:3px;border-radius:3px 0 0 3px;top:14px;bottom:14px}

/* El icono deja de ser un cuadro macizo de color: chip tenue con el trazo en
   color. Pesa menos en la pantalla y deja que manden los numeros. */
.stat .ico{background:var(--t-bg);color:var(--t-c);border-radius:10px;
  width:34px;height:34px;opacity:1;box-shadow:none}
.stat .ico svg{width:18px;height:18px;stroke-width:1.8}

.stat .k{color:var(--ink-3);font-size:10px;letter-spacing:.85px}
.stat .v{font-size:33px;line-height:1;margin-top:3px}
.stat .d{margin-top:7px;font-size:11px}
.card.stat.tono .bar{margin-top:12px;height:6px;background:var(--bg-3)}
.card.stat.tono:hover{transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(16,24,40,.05),0 14px 32px rgba(16,24,40,.08)}
.card.stat{transition:transform .14s var(--ease),box-shadow .14s var(--ease)}

/* Titulos de seccion con mas aire: el panel se leia como una lista continua. */
h3.sec{margin-top:26px;margin-bottom:11px}
.grid3,.grid4{gap:13px}

/* El embudo del panel, con mas presencia */
.pl-line.etapa{padding:10px 12px}
.pl-line.etapa .bar{height:9px;border-radius:99px}


/* =========================================================================
   PANEL — medidores de arco
   Tres barras planas no dicen de un vistazo cuanto queda; un arco si. Es la
   lectura del velocimetro: importa mas la posicion que el numero. En claro,
   no en oscuro: el resto de la app es clara y dos temas en una pantalla es
   peor que uno feo.
   ========================================================================= */
.mplan{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:18px 16px 16px;gap:2px}
.mplan-k{font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--ink-3)}
.mplan-g{position:relative;width:100%;max-width:150px;margin:6px auto 0}
.mplan-g svg{width:100%;height:auto;display:block;overflow:visible}
.mplan-g .pista{fill:none;stroke:var(--bg-3);stroke-width:10;stroke-linecap:round}
.mplan-g .lleno{fill:none;stroke:var(--t-c);stroke-width:10;stroke-linecap:round;
  transition:stroke-dasharray .6s var(--ease)}
/* El numero va DENTRO de la cupula, con su base en la del arco.

   El lienzo es viewBox="0 0 112 62" y el arco apoya en y=52: quedan 10
   unidades de aire debajo para que quepa el remate redondo del trazo. Con
   bottom:2px el numero se pegaba al fondo de ese aire —diez unidades por
   debajo de la base— y se montaba encima del extremo azul del arco.

   Va en porcentaje y no en pixeles porque el medidor se dibuja a tres tamanos
   distintos (panel, "Tu plan" y la rejilla de dos): 16% es justo ese aire,
   asi que cuadra en los tres sin tener que repetir la cuenta. */
.mplan-v{position:absolute;left:0;right:0;bottom:16%;line-height:1}
.mplan-v b{font-family:var(--fd);font-size:29px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.mplan-v span{font-family:var(--fd);font-size:14px;font-weight:600;color:var(--ink-3);margin-left:3px}
.mplan-p{font-size:11.5px;color:var(--ink-3);margin-top:9px;line-height:1.4}
.mplan.t-rojo .mplan-p{color:var(--red);font-weight:600}

/* Cartera: solo la cifra, sin adornos que compitan */
.cif{padding:17px 18px;border-left:3px solid var(--t-c)}
.cif-k{font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--ink-3)}
.cif-v{font-family:var(--fd);font-size:36px;font-weight:700;letter-spacing:-.035em;
  line-height:1;color:var(--t-c);margin-top:7px}
.cif-p{font-size:11.5px;color:var(--ink-3);margin-top:7px}

/* ---- Embudo: todas las columnas iguales, y en dos filas ----
   Intente encoger las vacias a una tira vertical y quedaba peor: el titulo de
   lado no se lee de un vistazo y las columnas parecian de otra cosa. Ahora
   todas se ven igual y el embudo ENVUELVE en vez de irse de lado — con diez
   etapas, el scroll horizontal escondia la mitad del tablero y ese fue el
   problema desde el principio. */
.embudo{flex-wrap:wrap;overflow-x:visible;
  -webkit-mask-image:none;mask-image:none}
.emb-col{flex:1 1 178px;max-width:230px;min-height:132px}
.emb-col .emb-q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* La vacia solo se distingue por el borde punteado: ni se encoge ni se gira. */
.emb-col.vacia{background:transparent;border-style:dashed}
.emb-col.vacia .emb-t{color:var(--ink-2)}
.emb-col.vacia.sobre{background:var(--tint);border-style:solid}

/* Con dos medidores en vez de tres, el arco puede respirar mas. */
.grid2 .mplan .mplan-g{max-width:184px}
.grid2 .mplan .mplan-v b{font-size:33px}
/* Reporte vencido a cero: el rojo marca la categoria, no una alarma. El
   numero en gris para no gritar cuando no hay nada que atender. */
.cif.t-rojo .cif-v.cero{color:var(--ink-3)}


/* ---- Que hago hoy ----
   Cada fila es una tarea, no una cifra: numero de orden, la orden en
   imperativo, de quien es, por que esta ahi y el boton al lado. El tono lo da
   la urgencia, igual que en el panel. */
.hoy{display:flex;flex-direction:column;gap:9px}
.tarea{display:flex;align-items:flex-start;gap:13px;background:var(--bg);
  border:1px solid #EDF0F5;border-left:4px solid var(--t-c);border-radius:var(--r);
  padding:14px 16px;box-shadow:0 1px 2px rgba(16,24,40,.03),0 6px 18px rgba(16,24,40,.04);
  transition:box-shadow .14s var(--ease),transform .14s var(--ease)}
.tarea:hover{transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(16,24,40,.05),0 14px 30px rgba(16,24,40,.08)}
.tarea-n{width:25px;height:25px;flex:none;border-radius:8px;background:var(--t-bg);
  color:var(--t-c);font-family:var(--fd);font-size:12px;font-weight:700;
  display:grid;place-items:center;margin-top:1px}
.tarea-c{flex:1;min-width:0}
.tarea-q{font-family:var(--fd);font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.tarea-w{font-size:12.5px;font-weight:700;color:var(--t-c);margin-top:2px}
.tarea-p{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.5}
/* Los dos botones de la derecha: el mensaje y el de abrir. En movil se
   apilan con el resto (la fila ya hace flex-wrap ahi abajo). */
.tarea-acc{flex:none;align-self:center;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.tarea .btn,.tarea-acc .btn,.tarea-acc a.btn{flex:none;align-self:center}
.tarea-acc a.btn{text-decoration:none}
@media (max-width:620px){
  .tarea{flex-wrap:wrap}
  .tarea .btn{width:100%;margin-top:8px}
}

/* El mensaje de felicitacion que se le manda al cliente. Va en un textarea
   para que se pueda seleccionar a mano si alguien prefiere no usar el boton. */
.msg-subida{width:100%;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  font-family:inherit;font-size:14.5px;line-height:1.65;color:#161921;background:#FBFCFE;
  resize:vertical;min-height:220px;}
.msg-subida:focus{outline:2px solid var(--blue);outline-offset:1px;}

/* ===== Perfil del cliente: datos y documentos, lado a lado =====
   La ficha dejaba media pantalla en blanco a la derecha y los documentos
   obligaban a bajar. Son las dos cosas que se miran a la vez al abrir. */
.perfil-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;}
@media(max-width:1000px){.perfil-cols{grid-template-columns:1fr;}}

.doc-panel{display:flex;flex-direction:column;}
.doc-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line);}
.doc-cab .sub{font-size:12.5px;}
.doc-cuenta{font-family:var(--fm);font-size:22px;font-weight:700;color:var(--gold);white-space:nowrap;}
.doc-cuenta.ok{color:var(--green);}
.doc-cuenta span{font-size:14px;color:var(--ink-3);font-weight:600;}

.doc-fila{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);}
.doc-fila:last-of-type{border-bottom:none;}
.doc-t b{font-size:14.5px;}
.doc-t .sub{font-size:11.5px;line-height:1.45;margin-top:2px;}
.doc-sube{cursor:pointer;margin:0;white-space:nowrap;}
.doc-archivos{grid-column:1 / -1;margin-top:4px;}
.doc-archivos .pl-line{padding:6px 0;font-size:12.5px;}

/* ===== Plan y consumo =====
   Los medidores son los mismos del panel, asi que el dato se lee igual en las
   dos pantallas. Aqui van cuatro en fila y encogen un poco. */
.medidores{gap:12px;}
/* Se achica el MEDIDOR ENTERO, no solo el dibujo.

   Antes esto recortaba el <svg> a 100px y dejaba el contenedor en 150. El
   numero va posicionado sobre el contenedor (left:0;right:0), asi que se
   seguia centrando sobre los 150 mientras el arco ocupaba los 100 de la
   izquierda: el "12 / 150" salia corrido a la derecha, pisando el borde del
   arco en vez de ir dentro.

   Acotando la caja, el dibujo y el numero comparten el mismo centro y no hay
   forma de que se descuadren otra vez. */
.medidores .mplan-g{max-width:100px;}
/* Y la cifra baja con el. A 100px de arco, el hueco util entre los dos
   extremos son unos 66px: "12 / 150" a 29px mide mas que eso y se salia por
   los dos lados, encima del trazo. Esta es la rejilla de cuatro de "Plan y
   consumo"; en el panel y en la rejilla de dos el medidor es mas ancho y la
   cifra grande si cabe. */
.medidores .mplan-v b{font-size:20px;}
.medidores .mplan-v span{font-size:11px;margin-left:2px;}
@media(max-width:1100px){.medidores{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.medidores{grid-template-columns:1fr;}}

.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;}
@media(max-width:980px){.planes{grid-template-columns:1fr;max-width:440px;}}

.plan{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:26px 22px 22px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;}
.plan:hover{box-shadow:0 10px 30px rgba(13,43,85,.09);}
.plan.destacado{border:2px solid var(--gold);box-shadow:0 14px 36px rgba(13,43,85,.12);}
.plan.actual{border:2px solid var(--blue);box-shadow:0 0 0 3px rgba(21,101,192,.10);}
.plan-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#1A1204;font-family:var(--fm);font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 13px;border-radius:999px;white-space:nowrap;}
.plan-tag.actual{background:var(--blue);color:var(--sobre-azul);}
.plan h4{margin:0 0 3px;font-size:19px;}
.plan-para{font-size:12.5px;color:var(--ink-3);line-height:1.5;min-height:38px;margin-bottom:14px;}
.plan-precio{font-size:38px;font-weight:800;color:var(--navy-ink);letter-spacing:-.03em;line-height:1;}
.plan-precio span{font-size:14px;color:var(--ink-3);font-weight:600;letter-spacing:0;}
.plan-ciclo{font-size:11.5px;color:var(--ink-3);margin-top:6px;min-height:17px;}
.plan-ciclo b{color:var(--green);}
.plan-lista{list-style:none;margin:18px 0 20px;padding:16px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;}
.plan-lista li{position:relative;padding-left:22px;font-size:13.5px;color:var(--ink-2);line-height:1.4;}
.plan-lista li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--blue);font-weight:800;}
.plan-lista b{font-family:var(--fm);color:var(--navy-ink);font-weight:700;}
.plan-acc{margin-top:auto;}

/* Barra de avance del cobro al cliente. Verde porque es dinero que YA entró:
   el consultor tiene que poder leerla de un vistazo sin contar cifras. */
.barra-cobro{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:9px}
.barra-cobro i{display:block;height:100%;border-radius:99px;background:#2E7D32;transition:width .3s}

/* Medidores de puntaje en "Qué cambió". Es la pantalla que el consultor le
   enseña al cliente cuando sube: el número va grande dentro del arco y los
   puntos ganados debajo, en verde. */
.mscore{padding:16px 14px 14px;text-align:center}
.mscore-k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;margin-bottom:4px}
.mscore-v{position:absolute;left:0;right:0;bottom:2px;text-align:center;
  font-size:27px;font-weight:900;letter-spacing:-.03em;color:var(--navy-ink);font-family:var(--fd,inherit)}
.mscore-d{font-size:15px;font-weight:800;margin-top:6px}
.mscore-p{font-size:12px;color:var(--ink-3)}

/* Coach de pagos: presupuesto, estrategia y el antes/después de la utilización. */
.pg-cab{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.pg-et{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--ink-3);margin-bottom:5px}
.pg-inp{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:800;color:var(--navy-ink)}
.pg-inp input{width:130px;font:inherit;padding:6px 10px;border:1.5px solid var(--line);border-radius:9px}
.pg-inp input:focus{outline:0;border-color:#1565C0}
.pg-modos{display:flex;gap:7px;flex-wrap:wrap}
.pg-res{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--bg-2);
  border:1px solid var(--line);border-radius:11px;padding:12px 16px;margin-bottom:12px}
.pg-res .k{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.pg-res b{font-size:23px;font-weight:900;letter-spacing:-.02em}
.pg-flecha{font-size:19px;color:var(--ink-3)}

/* ---- Medidor de puntaje: el ÚNICO de la app ----
   El mismo dibujo en "Puntajes por buró", en "Qué cambió" y en el informe
   impreso. Antes había cuatro y la app parecía cuatro productos pegados. */
.med{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 12px 14px;text-align:center;box-shadow:0 1px 3px rgba(22,25,33,.05)}
.med-g{width:172px;max-width:100%;margin:0 auto}
.med-g svg{width:100%;height:auto;display:block}
.med-t{font-size:13.5px;font-weight:800;color:var(--ink,#161921);margin-top:6px}
/* El logo del buro, en lugar del nombre escrito. Alto fijo y ancho
   automatico: los tres logos tienen proporciones distintas —Equifax es
   ancho y bajo, Experian casi cuadrado— y fijando el ancho saldrian de
   tamanos que no casan. Fijando el ALTO se ven de la misma familia.
   Este estilo vive en style.css a proposito: extraerRepCSS() copia las
   reglas cargadas al informe suelto que se comparte, y desde aqui viaja. */
.med-t .buro-logo{height:17px;width:auto;display:block;margin:0 auto}
@media print{.med-t .buro-logo{height:15px}}
.med-b{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  color:var(--ink-3);margin-top:2px}
.med-p{font-size:11.5px;color:var(--ink-3,#98A0B0);margin-top:4px}



/* =========================================================================
   PAPEL CLARO DENTRO DEL TEMA OSCURO

   Hay piezas que son blancas SIEMPRE, a proposito: el medidor de puntaje es
   el mismo dibujo que sale impreso en el informe, y las tarjetas del plan van
   sobre un tinte de color que solo funciona claro. Eso esta bien.

   Lo que no estaba bien es que el fondo se fijara a mano y el texto siguiera
   saliendo de las variables. En el tema oscuro --ink pasa de #161921 a
   #E8EBF2, asi que el nombre del buro se volvia gris casi blanco sobre una
   tarjeta blanca. El numero del puntaje se leia porque va pintado dentro del
   SVG con un color fijo; el nombre de debajo, no.

   La regla es la misma que ya cumple el informe: quien fija un fondo claro a
   mano, fija tambien los colores de texto. Asi cualquier hijo que use --ink
   —ahora o cuando alguien anada algo dentro— sale oscuro y legible.
   ========================================================================= */
.med,
.step.pr-ya, .step.pr-pronto, .step.pr-luego, .step.pr-critico{
  color-scheme:light;
  --ink:#161921; --ink-2:#586074; --ink-3:#5E6878; --ink-4:#666F7F;
  /* 23-sep-2026, medido: #667085 daba 4,24:1 sobre el tinte azul de los
     formularios y 4,40:1 sobre el gris de las pastillas. Se queda corto
     por poco en media app. #5E6878 sube a 4,81 y 4,98 sin cambiar el
     tono. --oro-c daba 2,83:1 sobre el panel: era el peor de todos, y en
     el panel es la CIFRA del honorario. --green daba 4,20 sobre blanco. */
  --line:#E7EAF0; --line-2:#DDE2EB;
  /* -------------------------------------------------------------------
     Y TAMBIEN LOS TOKENS DE LA PIEL DE CRISTAL
     -------------------------------------------------------------------
     23-sep-2026. Esto de arriba ya estaba y aun asi el plan de 90 dias
     salia ilegible en tema oscuro: medido, 1,09:1 en el texto de cada
     paso. Las tarjetas mantienen su tinte claro --verde menta, rosa,
     crema-- y encima iba la letra clara del tema.

     La causa: glassy-piel.css pinta TODOS los parrafos de la app con su
     regla de tema oscuro sobre .piel-cristal, que le pone a `.sub` y a `p`
     el color var(--pc-txt2). Esa regla mide (0,6,0) y le gana a
     `.step.pr-ya p`, que mide (0,3,0).

     (El selector no se copia aqui a proposito: pruebas/tema.test.mjs busca
     el bloque del tema oscuro con un indexOf, y una copia suya dentro de un
     comentario lo manda a leer el sitio equivocado. Ya paso.)

     Esa regla ya
     arrastraba tres excepciones escritas a mano --.rec-t, .vent,
     .fc-destacado--, y anadir una cuarta solo aplaza el problema: el que
     escriba la quinta superficie clara no va a saber que tiene que venir
     aqui a apuntarse.

     Asi que no se toca esa regla: se le cambia el SIGNIFICADO de su token
     aqui dentro. Una superficie que se pinta clara a mano redefine tambien
     --pc-txt y --pc-txt2, y entonces `color:var(--pc-txt2)` resuelve solo a
     tinta oscura sobre esta tarjeta, en cualquier tema y sin que nadie
     tenga que acordarse. La declaracion propia de un elemento gana a la
     heredada de :root, que es justo lo que hace falta.

     La regla, dicha entera: QUIEN FIJA UN FONDO CLARO A MANO, FIJA TAMBIEN
     LOS TOKENS DE TEXTO. Los de la hoja base y los de la piel. */
  --pc-txt:#161921; --pc-txt2:#3C4356;
  color:#161921;
}

/* El nombre del buro es lo que el cliente lee primero para saber de cual de
   los tres le estas hablando: va al mismo negro que el numero. */
.med .med-t{color:#161921}
.med .med-b,.med .med-p{color:#586074}

/* El titulo del paso lleva el peso de la tarjeta; el cuerpo va un tono por
   debajo pero sigue siendo legible sobre el tinte. */
.step.pr-ya b,.step.pr-pronto b,.step.pr-luego b,.step.pr-critico b{color:#161921}
.step.pr-ya p,.step.pr-pronto p,.step.pr-luego p,.step.pr-critico p{color:#3C4356}

/* =========================================================================
   ACCESIBILIDAD

   Va al final a proposito: son reglas que tienen que ganarle a todo lo de
   arriba, y ponerlas aqui evita tener que subirle la especificidad a cada una
   o tocar ciento y pico de reglas que ya funcionan.
   ========================================================================= */

/* ---------- El foco se tiene que VER ----------
   La hoja tenia cinco reglas de foco en 82 KB, y varias hacian outline:none
   sin poner nada en su lugar. Quien navega con teclado no sabia donde estaba.

   :focus-visible y no :focus: el navegador lo saca con el tabulador pero no
   al hacer clic con el raton, que es lo que hacia que la gente pusiera
   outline:none en primer lugar. */
:focus-visible{
  outline:2.5px solid var(--blue);
  outline-offset:2px;
  border-radius:4px;
}
/* Sobre el azul macizo del menu activo, un contorno azul no se ve. */
.nav-i.on:focus-visible,.btn-primary:focus-visible,.btn.primary:focus-visible{
  outline-color:#fff;
  outline-offset:-4px;
}
/* Los campos ya tienen su propio halo; se le suma el contorno para quien lo
   necesita mas marcado. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:1px;
}

/* ---------- Solo para quien escucha la pagina ----------
   Texto que un lector de pantalla lee y nadie ve. Se usa para decir cosas que
   en la pantalla se entienden por la forma — "(se abre en otra pestaña)",
   "actual" — y en voz alta no se entienden por nada. */
.vo{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- Saltar al contenido ----------
   Sin esto, cada vez que se cambia de pantalla hay que tabular por las
   veinte opciones del menu antes de llegar a lo que se venia a hacer.
   Solo aparece cuando recibe el foco. */
.saltar{
  position:absolute;left:12px;top:-60px;z-index:1000;
  background:var(--navy);color:#fff;padding:11px 18px;border-radius:0 0 10px 10px;
  font:600 14px var(--ff);text-decoration:none;transition:top .16s var(--ease);
}
.saltar:focus{top:0}

/* ---------- Para quien prefiere que no se mueva nada ----------
   Mareo, migrana, vestibular. El sistema operativo ya lo sabe y lo dice; hasta
   ahora la app no escuchaba. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Mas contraste si el sistema lo pide ---------- */
@media (prefers-contrast:more){
  :root{--ink-2:#3C4356;--ink-3:#5E6779;--line:#B9C0CC;--line-2:#98A0B0}
}

/* La tecla del atajo, a la derecha del buscador. Un atajo que no se ve no lo
   usa nadie; esto es lo que lo convierte en algo que se descubre solo. */
.buscador .tecla{
  margin-left:auto;flex:none;font:600 11px var(--fm);color:var(--ink-3);
  background:var(--bg-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:2px 7px;line-height:1.4;
}
@media(max-width:760px){.buscador .tecla{display:none}}


/* =========================================================================
   TEMA OSCURO

   Como funciona, para quien lo lea dentro de seis meses:

   Todo el cromo de la app (menu, tarjetas, campos, ventanas) pinta con
   variables. Aqui se redefinen esas variables y ya esta — no hace falta
   duplicar ni una regla.

   LOS INFORMES NO SE OSCURECEN NUNCA. Esa es la regla importante de este
   bloque. Un informe se imprime y se manda al cliente final del consultor: si
   sale con fondo negro se gasta un cartucho de tinta y, peor, deja de parecer
   un documento serio. Por eso .rep vuelve a fijar la paleta clara para si
   mismo y para todo lo que lleva dentro.

   Tres estados, no dos:
     sin atributo   -> lo que diga el sistema operativo
     data-tema="claro"  -> claro aunque el sistema este en oscuro
     data-tema="oscuro" -> oscuro aunque el sistema este en claro

   El :not([data-tema="claro"]) del bloque de sistema es lo que hace que elegir
   "claro" a mano le gane a la preferencia del sistema. Sin eso, el boton no
   podria apagar el modo oscuro.
   ========================================================================= */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --ink:#F2F5FB; --ink-2:#E4EDFB; --ink-3:#CBDCF5; --ink-4:#AEC6E4;
    --bg:#141A26; --bg-2:#0E131C; --bg-3:#1D2533; --tint:#1A2740;
    --line:#26303F; --line-2:#323D4F;
    /* El azul sube de luminosidad: el #1565C0 sobre fondo oscuro se hunde. */
    --blue:#5A9BEF; --blue-b:#7DB2F5; --blue-d:#2D7DEC; --navy:#0B1220;
    --gold:#F0B44A; --gold-bg:#2A2212; --gold-line:#4A3A15; --gold-ink:#F0C874;
    --green:#4ECB7B; --green-bg:#122A1B; --green-line:#1D4A2C; --green-ink:#7FE0A3;
    /* 23-sep-2026. #2C1516 es rojo, pero tan oscuro que sobre el lienzo azul
     se lee como una caja negra, que es de lo que se quejaba Daniel. Sube a
     #4A1E21: se reconoce como rojo de aviso y la letra #F07070 encima mide
     4,85:1. Lo de peligro no puede ir en azul como el resto: el color ES la
     senal. */
  --red:#F07070; --red-bg:#4A1E21; --red-line:#6B2B2F; --red-ink:#F5A0A0;
    --plat:#7A8DC4; --plat-d:#63779E; --plat-bg:#1B2130;
    /* Los dos que van al reves del fondo: el aviso flotante y el azul que se usa
       como TEXTO (--navy es ademas una superficie oscura, y no puede ser las dos
       cosas). */
    --aviso-bg:#E8EBF2; --aviso-ink:#0E131C;
    --navy-ink:#E8F0FD; --oro-c:#F0B44A; --sobre-azul:#0A1424;
    /* Las sombras negras no se ven sobre negro: se sustituyen por un borde de luz
       muy tenue, que es como se separa una superficie de otra en oscuro. */
    --sh:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.03);
    --sh-2:0 6px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);
    color-scheme:dark;
  }
}

:root[data-tema="oscuro"]{
  --ink:#F2F5FB; --ink-2:#E4EDFB; --ink-3:#CBDCF5; --ink-4:#AEC6E4;
  --bg:#141A26; --bg-2:#0E131C; --bg-3:#1D2533; --tint:#1A2740;
  --line:#26303F; --line-2:#323D4F;
  /* El azul sube de luminosidad: el #1565C0 sobre fondo oscuro se hunde. */
  --blue:#5A9BEF; --blue-b:#7DB2F5; --blue-d:#2D7DEC; --navy:#0B1220;
  --gold:#F0B44A; --gold-bg:#2A2212; --gold-line:#4A3A15; --gold-ink:#F0C874;
  --green:#4ECB7B; --green-bg:#122A1B; --green-line:#1D4A2C; --green-ink:#7FE0A3;
  /* 23-sep-2026. #2C1516 es rojo, pero tan oscuro que sobre el lienzo azul
     se lee como una caja negra, que es de lo que se quejaba Daniel. Sube a
     #4A1E21: se reconoce como rojo de aviso y la letra #F07070 encima mide
     4,85:1. Lo de peligro no puede ir en azul como el resto: el color ES la
     senal. */
  --red:#F07070; --red-bg:#4A1E21; --red-line:#6B2B2F; --red-ink:#F5A0A0;
  --plat:#7A8DC4; --plat-d:#63779E; --plat-bg:#1B2130;
  /* Los dos que van al reves del fondo: el aviso flotante y el azul que se usa
     como TEXTO (--navy es ademas una superficie oscura, y no puede ser las dos
     cosas). */
  --aviso-bg:#E8EBF2; --aviso-ink:#0E131C;
  --navy-ink:#E8F0FD; --oro-c:#F0B44A; --sobre-azul:#0A1424;
  /* Las sombras negras no se ven sobre negro: se sustituyen por un borde de luz
     muy tenue, que es como se separa una superficie de otra en oscuro. */
  --sh:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.03);
  --sh-2:0 6px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);
  color-scheme:dark;
}

/* ---------- El informe se queda en papel blanco ----------
   Se fija la paleta clara DENTRO de .rep, asi que la heredan todas sus reglas
   sin tener que tocar ninguna. Vale para la pantalla, para imprimir y para el
   documento suelto que se descarga.

   .msg-subida entra aqui el 19-sep. Es el recuadro del mensaje que se le manda
   al cliente cuando sube el puntaje, y tenia el fondo clavado a mano (#FBFCFE)
   con el texto saliendo de --ink. En tema oscuro --ink es casi blanco: el
   consultor abria el mensaje y veia un recuadro en blanco.

   Es la tercera vez que aparece este mismo fallo —antes fueron el medidor y las
   tarjetas del plan— asi que en tema.test.mjs hay ahora una prueba que recorre
   la hoja entera y no deja pasar la cuarta. */
.rep,.doc,.hoja,.contrato,
.msg-subida,.ch-mandar{
  --ink:#161921; --ink-2:#586074; --ink-3:#5E6878; --ink-4:#666F7F;
  --bg:#FFFFFF; --bg-2:#F7F8FA; --bg-3:#EFF1F5; --tint:#EDF3FF;
  --line:#E7EAF0; --line-2:#DDE2EB;
  --blue:#1565C0; --blue-b:#2D7DEC; --blue-d:#0E4A93; --navy:#0D2B55;
  --gold:#E8A020; --gold-bg:#FEF7EA; --gold-line:#F3E0BA; --gold-ink:#8A5C00;
  --green:#1B7A3D; --green-bg:#ECF8F0; --green-line:#CBE9D6; --green-ink:#14672F;
  --red:#C93434; --red-bg:#FDF0F0; --red-line:#F5CFCF; --red-ink:#8E1B1B;
  --plat:#5B70A8; --plat-d:#4A5D91; --plat-bg:#EEF1F8;
  --aviso-bg:#161921; --aviso-ink:#FFFFFF;
  --navy-ink:#0D2B55; --oro-c:#95610A; --sobre-azul:#FFFFFF;
  --sh:0 1px 2px rgba(22,25,33,.04),0 6px 18px rgba(22,25,33,.05);
  --sh-2:0 2px 4px rgba(22,25,33,.04),0 16px 40px rgba(22,25,33,.09);
  color-scheme:light;
  color:#161921;
}

/* En oscuro, el informe blanco encima del fondo oscuro deslumbra si va a
   sangre. Un marco lo separa y baja el contraste del borde. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .rep{border:1px solid rgba(255,255,255,.08)}
}
:root[data-tema="oscuro"] .rep{border:1px solid rgba(255,255,255,.08)}

/* Imprimir: siempre claro, diga lo que diga el tema. */
@media print{
  :root,:root[data-tema="oscuro"]{
    --ink:#161921; --ink-2:#586074; --bg:#FFFFFF; --bg-2:#F7F8FA;
    --line:#E7EAF0; color-scheme:light;
  }
}

/* ---------- El selector de tema ---------- */
.tema-sel{display:inline-flex;gap:2px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:10px;padding:3px}
.tema-sel button{border:0;background:none;cursor:pointer;font:600 12px var(--ff);
  color:var(--ink-2);padding:6px 12px;border-radius:7px;transition:.15s}
.tema-sel button:hover{color:var(--ink)}
.tema-sel button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:var(--sh)}


/* Insignias de etapa: el tono lo trae el JS en --e, la hoja decide como pintarlo. */
.bdg-etapa{
  background:color-mix(in srgb, var(--e) 12%, transparent);
  /* El color de la etapa, oscurecido: tal cual, el naranja y el gris azulado
     median 3,1-3,8:1 sobre su propio tinte (auditoria 29-sep-2026). */
  color:color-mix(in srgb, var(--e) 72%, #000);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .bdg-etapa{
    background:color-mix(in srgb, var(--e) 22%, transparent);
    color:color-mix(in srgb, var(--e) 45%, #FFFFFF);
  }
}
:root[data-tema="oscuro"] .bdg-etapa{
  background:color-mix(in srgb, var(--e) 22%, transparent);
  color:color-mix(in srgb, var(--e) 45%, #FFFFFF);
}

/* ---------- El aviso de la prueba ----------
   Sale encima de cualquier pantalla. Tres tonos: azul mientras sobra tiempo,
   ambar los dos ultimos dias, rojo cuando se acabo. El color hace la mitad del
   trabajo; el texto hace la otra mitad. */
.aviso-prueba{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--tint);border:1px solid var(--line-2);border-left:4px solid var(--blue);
  border-radius:var(--r-s);padding:13px 18px;margin-bottom:18px;
}
.aviso-prueba b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.aviso-prueba span{font-size:12.8px;color:var(--ink-2);line-height:1.5}
.aviso-prueba > div{flex:1 1 340px;min-width:0}
.aviso-prueba.poco{background:var(--gold-bg);border-color:var(--gold-line);border-left-color:var(--gold)}
.aviso-prueba.poco b{color:var(--gold-ink)}
.aviso-prueba.fin{background:var(--red-bg);border-color:var(--red-line);border-left-color:var(--red)}
.aviso-prueba.fin b{color:var(--red-ink)}
@media(max-width:620px){.aviso-prueba .btn{width:100%}}

/* Al imprimir un informe, el aviso no sale: es de la app, no del documento. */
@media print{.aviso-prueba{display:none}}

/* Aviso de version nueva (26-sep-2026) */
.aviso-version{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:10px 12px 10px 16px;border-radius:12px;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);box-shadow:0 8px 28px rgba(13,43,85,.22);font-size:13.5px;font-weight:600}

/* =========================================================================
   INSTAGRAM (Daniel, 27-sep-2026)
   Todo con los tokens de la hoja (--ink, --bg, --line, --gold-*): asi se lee
   en claro y en oscuro sin una regla aparte. Las negritas llevan --ink
   explicito, porque sin color propio desaparecen en oscuro.
   ========================================================================= */
.nav-extra{margin-left:auto;flex:none;font-size:9.5px;font-weight:700;letter-spacing:.3px;
  padding:1px 7px;border-radius:99px;border:1px solid currentColor;opacity:.75;line-height:1.5}
.ig-lock{max-width:720px}
.ig-lock .ig-tit{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--ink);margin:12px 0 10px;letter-spacing:-.02em}
.ig-lista{margin:0 0 12px;padding-left:20px;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.ig-lista li{margin:6px 0}
.ig-lista b{color:var(--ink)}
.ig-precio{margin:14px 0 4px;font-size:13.5px;color:var(--ink-2)}
.ig-precio b{color:var(--ink)}
.ig-acc{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.ig-err{color:var(--red);font-size:13px;font-weight:600}
.ig-paso{margin-top:16px}
.ig-paso-h{display:flex;gap:12px;align-items:flex-start}
.ig-paso-h h4{font-size:16px;color:var(--ink)}
.ig-num{flex:none;width:30px;height:30px;border-radius:99px;display:grid;place-items:center;
  background:var(--tint);color:var(--blue);font-weight:800;font-size:14px;border:1px solid var(--line-2)}
.ig-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.ig-fotos{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ig-foto{position:relative;width:84px;height:120px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-3)}
.ig-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ig-foto button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:99px;border:0;
  background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.ig-notas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.ig-nota-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ig-nota-h b{color:var(--ink);font-size:13.5px}
.ig-nota-h span{color:var(--ink);font-weight:800;font-size:15px}
.ig-nota .sub{margin-top:6px;line-height:1.5}
.ig-cuello{margin-top:12px;border-left:4px solid var(--gold)}
.ig-cuello-k{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.ig-cuello b{color:var(--ink);font-size:15px;display:block}
.ig-cuello p{color:var(--ink-2);font-size:13.3px;margin-top:4px;line-height:1.55}
.ig-tabla{padding:0;overflow:hidden}
.ig-fila{display:grid;grid-template-columns:150px 1fr 1.3fr 90px;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);line-height:1.55;align-items:start}
.ig-fila:last-child{border-bottom:0}
.ig-cab{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-3);font-weight:700;background:var(--bg-2)}
.ig-campo{color:var(--ink);font-weight:700}
.ig-sug{color:var(--ink)}
.ig-fila > span{min-width:0;overflow-wrap:anywhere}
.ig-et{display:none;font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-3);font-weight:700;margin-bottom:2px}
.ig-largo{display:block;margin-top:6px;font-size:12px;color:var(--gold-ink);font-weight:600}
.ig-aviso{margin-top:8px;background:var(--gold-bg);border:1px solid var(--gold-line);border-left:3px solid var(--gold);
  color:var(--gold-ink);border-radius:8px;padding:7px 10px;font-size:12.3px;line-height:1.5}
.ig-aviso b{color:var(--gold-ink)}
.ig-aviso div + div{margin-top:4px}
.ig-reels{margin-top:12px}
.ig-reel h4{font-size:15px;color:var(--ink);margin:4px 0 10px}
.ig-reel-k{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--blue);font-weight:700}
.ig-reel dl{margin:0 0 12px}
.ig-reel dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-3);font-weight:700;margin-top:10px}
.ig-reel dd{margin:3px 0 0;color:var(--ink-2);font-size:13.3px;line-height:1.6;overflow-wrap:anywhere}
.ig-reel dd b{color:var(--ink)}
.ig-chat-lista{margin-top:14px;max-height:460px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.ig-msg{display:flex;flex-direction:column;max-width:92%}
.ig-msg.yo{align-self:flex-end}
.ig-msg .b{border-radius:12px;padding:9px 12px;font-size:13.4px;line-height:1.55;overflow-wrap:anywhere}
.ig-msg.yo .b{background:var(--tint);color:var(--ink);border:1px solid var(--line-2)}
.ig-msg.ia .b{background:var(--bg-2);color:var(--ink);border:1px solid var(--line)}
.ig-msg.ia .b b{color:var(--ink)}
.ig-sugs{display:flex;flex-wrap:wrap;gap:8px}
.ig-sugs button{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:99px;
  padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.ig-sugs button:hover{border-color:var(--blue)}
.ig-chat-pie{display:flex;gap:10px;margin-top:12px;align-items:flex-end}
.ig-chat-pie textarea{flex:1;min-width:0;resize:vertical}
@media(max-width:760px){
  .ig-form{grid-template-columns:1fr}
  .ig-cab{display:none}
  .ig-fila{grid-template-columns:1fr;gap:6px}
  .ig-et{display:block}
  .ig-fila .btn{width:auto}
  .ig-chat-pie{flex-direction:column;align-items:stretch}
}

/* Contenido: pagina de venta dentro de la app y prueba gratis (27-sep-2026).
   Estructura de la de Scripty, piel de la app: solo tokens del tema. */
.ig-land{max-width:1040px}
.ig-hero{padding:34px 30px;text-align:left}
.ig-hero h2{font-family:var(--fd);font-size:clamp(24px,4vw,38px);line-height:1.12;font-weight:800;
  color:var(--ink);letter-spacing:-.03em;margin:14px 0 12px;max-width:760px}
.ig-hero h2 em{font-style:normal;color:var(--blue)}
.ig-hero p{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:640px}
.ig-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.ig-feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ig-feat{grid-template-columns:1fr}}
.ig-feat h4{color:var(--ink);font-size:15px;margin:12px 0 6px}
.ig-feat p{color:var(--ink-2);font-size:13.3px;line-height:1.55}
.ig-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.ig-demo-p{color:var(--ink-2);font-size:13.5px;line-height:1.6;margin-bottom:14px}
.ig-demo-p b{color:var(--ink)}
.ig-notas-mini{grid-template-columns:1fr;gap:10px}
.ig-demo-fila{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.3px}
.ig-demo-fila i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-3);font-weight:700;padding-top:2px}
.ig-demo-fila span{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.ig-demo-fila.ok span{color:var(--ink);font-weight:600}
.ig-comp{padding:0;overflow:hidden}
.ig-comp-f{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.3px;color:var(--ink-2)}
.ig-comp-f:last-child{border-bottom:0}
.ig-comp-f.cab{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-3);font-weight:700;background:var(--bg-2)}
.ig-comp-f > span:first-child{color:var(--ink);font-weight:600}
.ig-comp-f .si{color:var(--blue);font-weight:800}
.ig-precio-card{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.ig-precio-card > div:first-child{max-width:520px}
.ig-precio-n{font-family:var(--fd);font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin:8px 0 4px}
.ig-precio-n small{font-size:15px;font-weight:600;color:var(--ink-3);margin-left:2px}
.ig-up{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;border-left:4px solid var(--blue)}
.ig-up b{color:var(--ink);font-size:15px}
.ig-up .sub{margin-top:4px;max-width:560px}
.ig-up .ig-acc{margin-top:0}
/* Tu plan de siguientes pasos (28-sep-2026): A-B-C de la evaluacion y D, el plan Despacho. */
.ig-plan-card{flex-direction:column;align-items:stretch}
.ig-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;color:var(--ink-2);font-size:14px;line-height:1.55}
.ig-plan li{display:flex;gap:12px;align-items:flex-start}
.ig-plan b{color:var(--ink);font-size:14px}
.ig-letra{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#1976D2,#1565C0)}
.ig-paso-d .ig-letra{color:var(--gold-ink);background:var(--gold-bg);border:1px solid var(--gold-line)}
.ig-plan-card .ig-acc{display:flex;flex-wrap:wrap;gap:10px}
.ig-ancho{grid-column:1 / -1}
.ig-form textarea{width:100%;resize:vertical}
@media (max-width:640px){
  .ig-hero{padding:24px 18px}
  .ig-comp-f{grid-template-columns:1.3fr .8fr 1fr;padding:11px 12px;font-size:12.5px}
  .ig-demo-fila{grid-template-columns:1fr}
}
/* Contenido: solo el @ (27-sep-2026) */
.ig-arroba{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ig-arroba input{flex:1 1 240px;min-width:0;font-size:16px}
.ig-cifras{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.ig-cifras > div:first-child b{display:block;color:var(--ink);font-size:16px}
.ig-cifras-n{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--ink-2)}
.ig-cifras-n b{color:var(--ink);font-size:15px}
.ig-link{display:inline;margin-left:6px;padding:0;border:0;background:none;color:var(--blue);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

/* Checkout con tarjeta 3D (27-sep-2026, diseño aprobado por Daniel).
   La tarjeta es un dibujo: sin numeros. Tokens del tema para el resto. */
.modal-box:has(.ck3d){max-width:min(980px,96vw);width:min(980px,96vw);padding:22px}
.ck3d{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;margin-top:10px}
.ck3d-izq{display:flex;flex-direction:column;align-items:center;gap:20px;padding:10px 6px}
.ck3d-escena{perspective:1100px;width:100%;max-width:380px}
.ck3d-flota{animation:ckFlota 6s ease-in-out infinite}
@keyframes ckFlota{50%{transform:translateY(-7px)}}
.ck3d-tarj{position:relative;aspect-ratio:1.586;width:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);color:#fff}
.ck3d-tarj.volteada{transform:rotateY(180deg)!important}
.ck3d-halo{position:absolute;inset:6% 4%;border-radius:22px;filter:blur(28px);opacity:.7;background:var(--halo);transform:translateZ(-40px)}
.ck3d-cara{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;overflow:hidden;border:1px solid rgba(255,255,255,.28);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.ck3d-frente{background:var(--piel)}
.ck3d-frente::before{content:"";position:absolute;inset:0;opacity:.18;background:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 11px)}
.ck3d-brillo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(420px 260px at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.45),transparent 60%)}
.ck3d-chip{position:absolute;left:8%;top:17%;width:14%;aspect-ratio:1.3;border-radius:7px;background:linear-gradient(135deg,#f7dc8a,#c99a2e)}
.ck3d-nfc{position:absolute;left:25%;top:19%;font-size:14px;opacity:.85}
.ck3d-marca{position:absolute;right:7%;top:12%;text-align:right;font-family:var(--fd);font-weight:800;letter-spacing:.14em;font-size:14px}
.ck3d-marca small{display:block;font-size:9px;letter-spacing:.2em;opacity:.85;font-weight:600;margin-top:2px}
.ck3d-num{position:absolute;left:8%;top:47%;font-family:'JetBrains Mono',monospace;font-size:clamp(14px,2.6vw,20px);letter-spacing:.14em;text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.35)}
.ck3d-pie{position:absolute;left:8%;right:7%;bottom:11%;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.ck3d-pie label{display:block;font-size:8px;letter-spacing:.18em;opacity:.75;margin-bottom:3px}
.ck3d-v{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.08em;max-width:190px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ck3d-plan{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.06em;color:#ffd76a}
.ck3d-dorso{transform:rotateY(180deg);background:linear-gradient(135deg,#0a1c3d,#12326f)}
.ck3d-banda{position:absolute;left:0;right:0;top:15%;height:18%;background:#050b16}
.ck3d-firma{position:absolute;left:8%;right:26%;top:44%;height:15%;border-radius:5px;background:repeating-linear-gradient(90deg,#e8edf6 0 8px,#d5dceb 8px 16px)}
.ck3d-cvc{position:absolute;right:8%;top:44%;height:15%;width:15%;border-radius:5px;background:#fff;color:#0a1c3d;display:grid;place-items:center;font-size:12px}
.ck3d-prot{position:absolute;left:8%;right:8%;bottom:12%;font-size:11px;color:rgba(255,255,255,.8)}
.ck3d-res{width:100%;max-width:380px;border-radius:16px;padding:16px;background:var(--bg-2);border:1px solid var(--line)}
.ck3d-fila{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px;color:var(--ink-2)}
.ck3d-fila b{color:var(--ink);font-weight:600}
.ck3d-fila .ok{color:var(--green,#22c55e);font-weight:600;white-space:nowrap}
.ck3d-total{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;display:flex;justify-content:space-between;align-items:baseline;color:var(--ink-2);font-size:13.5px}
.ck3d-total strong{font-family:var(--fd);font-size:24px;font-weight:800;color:var(--ink)}
.ck3d-der h3{font-family:var(--fd);font-size:21px;color:var(--ink)}
.ck3d-der .sub{margin:4px 0 16px}
.ck3d-acepto{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);margin:4px 0 16px;font-size:13px;color:var(--ink-2);cursor:pointer}
.ck3d-acepto input{margin-top:2px;width:17px;height:17px;accent-color:var(--blue)}
.ck3d-pagar{width:100%;padding:15px;font-size:15.5px}
.ck3d-pagar:disabled{opacity:.5;cursor:not-allowed}
.ck3d-sellos{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12px;color:var(--ink-3)}
@media (max-width:760px){.ck3d{grid-template-columns:1fr}.modal-box:has(.ck3d){padding:16px}}
@media (prefers-reduced-motion:reduce){.ck3d-flota{animation:none}.ck3d-tarj{transition:none}}
.chk:has(.ck3d){display:block;min-width:0;cursor:default;font-size:inherit}
.ck3d-der input[type=text]{width:100%}
.ck3d-fila .ok{color:#34d399}
.ck3d-der input[type=text]{padding:12px 14px;height:auto;min-height:44px;font-size:15px}
.pg-pago{width:92px!important;text-align:right}
.pg-pago.man{border-color:var(--gold)!important;box-shadow:0 0 0 2px rgba(245,197,66,.18)}
.tw tfoot td{border-top:2px solid var(--line-2);padding-top:10px}
/* Color de marca del despacho en sus documentos (27-sep-2026) */
.rep .rhead{border-bottom-color:var(--marca,var(--gold))}
.rep h2{border-bottom-color:var(--marca,var(--gold))}
.rep .box{border-left-color:var(--marca,var(--blue))}
.rep ol.tuyo li::marker{color:var(--marca,inherit)}
/* El boton flotante del asistente tapaba "Enviar" del chat de Contenido */
.ig-chat-pie{padding-right:74px}
@media (max-width:640px){.ig-chat-pie{padding-right:0;padding-bottom:62px}}
/* El boton del chat (Daniel, 28-sep-2026, segunda vuelta): el que cambia es
   el FONDO, no solo el icono.
     · Tema claro:  boton AZUL de la marca con el logo BLANCO.
     · Tema oscuro: boton BLANCO con el logo AZUL.
   Asi siempre contrasta con la pagina que tiene detras. El icono es una
   mascara de icono.png: su color es el `background`. */
.chat-btn{background:linear-gradient(145deg,#1976D2,#1565C0);color:#fff;border-color:transparent;
  box-shadow:0 10px 26px rgba(21,101,192,.34)}
.chat-btn .chat-ic{width:34px;height:34px;display:block;background:#fff;color:#fff;
  -webkit-mask:url(img/icono.png) center/contain no-repeat;mask:url(img/icono.png) center/contain no-repeat}
:root[data-tema="oscuro"] .chat-btn{background:#fff;color:#1565C0;border-color:rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(0,0,0,.35)}
:root[data-tema="oscuro"] .chat-btn .chat-ic{background:#1565C0}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .chat-btn{background:#fff;color:#1565C0;border-color:rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(0,0,0,.35)}
  :root:not([data-tema="claro"]) .chat-btn .chat-ic{background:#1565C0}
}

/* En oscuro la tarjeta se confundia con el recuadro de fuera y Experian y
   Equifax, en su azul y su rojo de marca, no se leian (Daniel, 28-sep-2026). */
:root[data-tema="oscuro"] .cta-neg{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
:root[data-tema="oscuro"] .cta-neg:hover{border-color:rgba(255,255,255,.28)}
:root[data-tema="oscuro"] .cta-neg.p-crit{border-left-color:#E5484D}
:root[data-tema="oscuro"] .cta-neg.p-alta{border-left-color:#E8A020}
:root[data-tema="oscuro"] .cta-neg.p-media{border-left-color:#3B8FE5}
:root[data-tema="oscuro"] .cta-neg .buros .b-tu{color:#5BD6F2}
:root[data-tema="oscuro"] .cta-neg .buros .b-ex{color:#9DB4FF}
:root[data-tema="oscuro"] .cta-neg .buros .b-eq{color:#FF8A98}
:root[data-tema="oscuro"] .cta-neg .buros .b-off{color:#8A96AD}
:root[data-tema="oscuro"] .cta-neg-det{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.16)}

/* ---------- La campana de novedades (28-sep-2026) ----------
   En el riel junto al logo (escritorio) o en la barra de arriba (movil). La
   lista cuelga de la pagina, fija, debajo de los modales (900) y del aviso (1100). */
.campana{margin-left:auto;flex:none;position:relative}
.campana-btn{position:relative;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh)}
.campana-btn:hover{border-color:var(--gold-line)}
.campana-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.campana-n{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--gold);color:#1a1405;font:700 11px/19px var(--ff);text-align:center;font-variant-numeric:tabular-nums}
.campana-lista{position:fixed;z-index:850;width:min(340px,calc(100vw - 24px));max-height:min(70vh,460px);overflow:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);padding:6px}
.nov-cab{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:.65;padding:8px 10px 6px}
.nov-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-radius:10px;
  padding:9px 10px;cursor:pointer;color:var(--ink);font:500 13px/1.35 var(--ff)}
.nov-item:hover,.nov-item:focus-visible{background:var(--tint)}
.nov-item.nueva{font-weight:700}
.nov-txt small{display:block;font-weight:500;font-size:11.5px;opacity:.6;margin-top:2px}
.nov-ico{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--line)}
.nov-item.nueva .nov-ico{background:var(--gold)}
.nov-vacia{padding:10px 10px 12px;font-size:13px;line-height:1.45;color:var(--ink);opacity:.7}
@media(max-width:900px){.campana-btn{width:42px;height:42px;border-radius:12px}}
.nov-activar{display:block;width:calc(100% - 12px);margin:2px 6px 6px;padding:9px 10px;border-radius:10px;cursor:pointer;
  background:var(--gold-bg);color:var(--ink);border:1px solid var(--gold-line);font:600 12.5px/1.3 var(--ff);text-align:left}
.nov-activar:hover,.nov-activar:focus-visible{border-color:var(--gold)}
.nov-nota{margin:0 6px 6px;padding:8px 10px;border-radius:10px;background:var(--tint);color:var(--ink);font-size:12px;line-height:1.4}

/* ===== Recorrido guiado (30-sep-2026 · 1-oct "que lo haga él") =====
   Tapa transparente que impide tocar la app, un hueco que ilumina lo que se
   explica (la sombra enorme oscurece todo lo demas) y el globo con el texto.
   En los pasos "libres" (un area grande que se tiene que leer) no se oscurece:
   solo se marca el borde, y el globo va abajo a la derecha.
   En los pasos de ACCION la tapa se cambia por cuatro muros alrededor del
   hueco: lo señalado se pulsa, lo de fuera no. #rc no recoge clics: solo sus
   piezas (tapa, muros y globo). */
#rc{position:fixed;inset:0;z-index:9000;pointer-events:none}
#rc .rc-tapa,#rc .rc-muro,#rc .rc-globo{pointer-events:auto}
#rc .rc-tapa{position:fixed;inset:0;background:transparent}
#rc .rc-muro{position:fixed;background:transparent}
#rc [hidden]{display:none}
#rc.rc-centro .rc-tapa{background:rgba(10,14,22,.55)}
#rc .rc-foco{position:fixed;border-radius:14px;box-shadow:0 0 0 3px var(--gold),0 0 0 9999px rgba(10,14,22,.55);
  pointer-events:none;transition:top .25s var(--ease),left .25s var(--ease),width .25s var(--ease),height .25s var(--ease)}
#rc.rc-libre .rc-foco{box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(232,160,32,.45)}
#rc.rc-accion .rc-foco{animation:rcLate 1.6s var(--ease) infinite}
#rc.rc-accion.rc-libre .rc-foco{animation:none}
#rc .rc-globo{position:fixed;right:20px;bottom:20px;width:min(400px,calc(100vw - 32px));
  background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-top:4px solid var(--gold);
  border-radius:16px;padding:18px 18px 14px;box-shadow:0 18px 50px rgba(10,14,22,.35);outline:none;
  animation:rcEntra .22s var(--ease)}
#rc.rc-centro .rc-globo{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);animation:none}
#rc .rc-globo h3,.rc-fin h3{margin:2px 0 6px;font:800 18px/1.25 var(--fd);color:var(--ink);text-wrap:balance}
#rc .rc-globo p,.rc-fin p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
#rc .rc-globo p b,.rc-fin p b{color:var(--ink)}
.rc-n{font:700 11px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
#rc .rc-hacer{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:12px;
  background:var(--gold-bg);border:1px solid var(--gold-line);color:var(--ink);font-size:14px;line-height:1.45}
#rc .rc-hacer b{color:var(--gold-ink)}
#rc .rc-punto{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(232,160,32,.6);animation:rcPunto 1.4s ease-out infinite}
#rc .rc-hecho{display:flex;gap:10px;align-items:center;margin:0 0 12px;padding:10px 12px;border-radius:12px;
  background:var(--green-bg);border:1px solid var(--green-line);color:var(--green-ink);font:700 15px/1.3 var(--ff);
  animation:rcEntra .2s var(--ease)}
#rc .rc-check{flex:none;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900}
#rc .rc-bar{height:4px;border-radius:4px;background:var(--bg-3);margin:0 0 12px;overflow:hidden}
#rc .rc-bar div{height:100%;background:var(--gold);border-radius:4px;transition:width .25s var(--ease)}
.rc-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#rc .rc-saltar{background:none;border:0;padding:6px 2px;color:var(--ink-3);font:600 13px var(--ff);cursor:pointer;text-decoration:underline}
/* El nombre de la empresa con su «Guardar» al lado, solo durante el recorrido. */
.rc-marca{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:2px 0 0;margin:16px 0 14px;border-radius:12px}
.rc-marca > :first-child{flex:1 1 220px;margin-bottom:0}
.rc-marca > .btn{flex:none;margin-bottom:2px}
@keyframes rcEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rcLate{0%,100%{box-shadow:0 0 0 3px var(--gold),0 0 0 9999px rgba(10,14,22,.55)}50%{box-shadow:0 0 0 6px var(--gold),0 0 0 9999px rgba(10,14,22,.55)}}
@keyframes rcPunto{0%{box-shadow:0 0 0 0 rgba(232,160,32,.6)}100%{box-shadow:0 0 0 10px rgba(232,160,32,0)}}
@media (max-width:700px){#rc .rc-globo{left:12px;right:12px;bottom:12px;width:auto;padding:14px 14px 12px}
  #rc .rc-globo h3{font-size:16px}#rc .rc-globo p{font-size:13.5px;margin-bottom:10px}}
@media (prefers-reduced-motion:reduce){#rc .rc-foco,#rc .rc-bar div{transition:none}#rc .rc-globo,#rc .rc-hecho,#rc.rc-accion .rc-foco,#rc .rc-punto{animation:none}}

/* EL INFORME EN EL TELEFONO (2-oct-2026, Daniel): casi todos los clientes lo
   abren desde el celular, por el enlace de WhatsApp. Las cajas de "Lo que
   esta en manos de cobradores" iban en tres columnas y la tercera se salia
   por la derecha; los margenes de escritorio (38 px por lado) se comian un
   quinto de la pantalla. */
@media (max-width:640px){
  .rep .rhead{padding:22px 18px}
  .rep .rhead .brand > div:last-child{text-align:left !important}
  .rep .rbody{padding:22px 16px}
  .rep .duele{padding:20px 18px}
  .rep .duele .d-n{font-size:38px}
  .rep .duele .d-g{grid-template-columns:1fr;gap:8px}
  .rep .ruta{grid-template-columns:1fr 1fr}
  .rep .contraste .con-g{grid-template-columns:1fr}
  .rep .ngrid{grid-template-columns:1fr}
  .rep table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:380px){ .rep .ruta{grid-template-columns:1fr} }