:root{--bg:#0d1117;--card:#161b22;--panel:#0f141a;--line:#30363d;--line2:#21262d;
--text:#e6edf3;--soft:#c9d1d9;--mut:#8b949e;--faint:#6e7681;--mut2:#8b949e;
--green:#3fb950;--red:#f85149;--gold:#d4af37;--gold2:#f0c75e;--purple:#a371f7;--blue:#58a6ff;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;overflow-y:scroll}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
.mono{font-variant-numeric:tabular-nums}
.app{max-width:480px;margin:0 auto;min-height:100vh;padding-top:66px;padding-bottom:calc(74px + env(safe-area-inset-bottom));position:relative;overflow-x:hidden}
/* LA BARRA DE ARRIBA, COMO EN LINEMATE (19-sep-2026). Cesar mando un video de esa
   app y eligio la version con el nombre al centro viendo el mockup (opcion 1).
   Antes era una caja casi opaca y desenfocada: lo que pasaba por debajo no se veia.
   Ahora no hay caja ni desenfoque: el contenido pasa por debajo del nombre y se
   sigue leyendo, oscurecido. Los tramos del degradado son los MEDIDOS en el video,
   pixel a pixel: ~73% a la altura del nombre, ~45% abajo, y se suelta del todo al
   final. En reposo no hay nada debajo y la barra es del color de la pagina.
   El velo es un ::before que baja 16px por debajo de la barra: pointer-events:none,
   para que esos 16px no se coman los toques de la tarjeta que pase por ahi (la
   leccion del 5-sep). El 5-sep se rechazaron tres versiones que solo difuminaban el
   borde de la caja vieja: la diferencia es que aqui la caja desaparece. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;max-width:480px;margin:0 auto;padding:15px 18px;text-align:center}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-16px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(13,17,23,.92) 0%,rgba(13,17,23,.74) 28%,rgba(13,17,23,.55) 62%,rgba(13,17,23,.42) 82%,rgba(13,17,23,0) 100%)}
.topbar h1{font-size:24px;font-weight:800;letter-spacing:.5px;background:linear-gradient(90deg,#d4af37,#f0c75e,#d4af37);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 8px rgba(0,0,0,.55))}
/* LA CABECERA DE CADA PAGINA (19-sep-2026, opcion C, elegida por Cesar viendo el
   mockup de las 8 paginas reales). El titulo a la izquierda y, a la derecha, el
   numero que importa en esa pagina: el dia, los partidos, el acierto, lo que
   falta para el cobro. Ver _cabecera().
   Sustituye a la linea gris .date, que cada pagina usaba a su manera (la fecha en
   Analisis, el nombre en Ajustes, nada en Modelo y Mercado) y que ademas iba 18px
   mas adentro que las tarjetas. La cabecera va al borde de ellas.
   Las secciones de dentro (.sec-h en el Record, .set-h en Ajustes) van todas en
   el mismo estilo: letra normal, mas grande, sin mayusculas. */
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:16px 2px 12px;font-family:var(--font)}
.cab-tx{min-width:0}
.cab-t{margin:0;font-family:var(--font);font-size:23px;font-weight:800;letter-spacing:-.015em;line-height:1.15;color:var(--text);text-wrap:balance}
.cab-s{margin:4px 0 0;font-size:12.5px;line-height:1.35;color:var(--mut)}
.cab-d{text-align:right;flex-shrink:0}
.cab-n{font-size:23px;font-weight:800;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.cab-l{margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.sec-h{font-size:15px;font-weight:700;letter-spacing:-.005em;color:var(--text);padding:26px 2px 8px}
/* LOS MISMOS HUECOS EN LAS OCHO (19-sep-2026, Cesar: "que tengan el mismo margen
   superior e inferior, que todo quede bien compacto"). Medidos con Edge a 430px
   antes de tocar nada: bajo la cabecera habia 0, 6, 12 o 26px segun la pagina
   (Record y Ajustes abren con una seccion que traia su propio aire), y antes del
   pie 26 en seis paginas y 38 en Modelo y Mercado (su envoltorio sumaba 12 mas).
   Ahora: el titulo a 82px de arriba, 12px bajo la cabecera y 24px antes del pie,
   en todas. El primer bloque pierde su margen de arriba; el pie pone el suyo, y
   el margen de abajo del ultimo bloque (12 en las tarjetas) se funde con el. */
section.on>.cab+*{margin-top:0}
section.on>.cab+.sec-h,section.on>.cab+.set-h{padding-top:0}
.lab-real,.trends-real{padding-bottom:0}
/* El primer separador de Mercado es el rotulo «MERCADO», que repetia el titulo de
   la cabecera. En trends.html suelto SI hace falta (alli no hay cabecera). */
.trends-real>.sep:first-child{display:none}
.trends-real>.sep:first-child+h2{margin-top:0}
main{padding:0 16px}
section{display:none}section.on{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin:12px 0}
.card.elite{border:1px solid var(--gold);background:linear-gradient(160deg,#1e1a0e,#161b22)}
.card.valor{border:1px solid #aab4c2;background:linear-gradient(160deg,#1b1f26,#161b22)}
.card.bronce{border:1px solid #cc8b52;background:linear-gradient(160deg,#20170f,#161b22)}
.badge{font-size:12.5px;font-weight:800;letter-spacing:.4px;color:var(--mut);margin-bottom:12px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.badge.elite{color:var(--gold2)}.badge.valor{color:#aab4c2}.badge.bronce{color:#cc8b52}.badge.parlay{color:var(--purple)}
.stars{letter-spacing:1px;font-size:11px}
.row{display:flex;align-items:center;gap:12px}
.logos{display:flex;flex-shrink:0}
.logo{width:42px;height:42px;object-fit:contain;background:none;border:none}
.logo:nth-child(2){margin-left:6px}.logo.sm{width:30px;height:30px}
.info{flex:1;min-width:0}
.pick{font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.sub{color:var(--mut);font-size:12.5px;font-weight:600;margin-top:3px}
.odds{text-align:right;flex-shrink:0}
.cuota{font-size:23px;font-weight:800}.cuota.pos{color:var(--green)}.cuota.neg{color:var(--text)}
.u{background:var(--line2);border-radius:8px;padding:2px 9px;font-size:12.5px;font-weight:700;display:inline-block;margin-top:4px;color:var(--soft)}
/* PRECIO MINIMO (27-ago-2026) — el dato que hace el pick valido en CUALQUIER
   casa. Reusa la estructura del chip de ventaja para no romper el diseno.

   RECOGIDO A DOS LINEAS (10-sep-2026). Antes ocupaba CUATRO: el titulo, el
   contexto, el mejor precio y la comision de Kalshi, cada uno en su renglon,
   apilados en una columna estrecha al lado del numero grande. En el celular
   eso era un tercio de la tarjeta para un dato de dos cifras. Ahora el titulo
   y el numero comparten linea y todo el contexto va en la de abajo, separado
   por puntos. Es la opcion que eligio Cesar de las tres que se le enseñaron. */
.pm{margin-top:11px;background:rgba(88,166,255,.10);border:1px solid rgba(88,166,255,.38);border-radius:12px;padding:10px 13px}
.pm-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pm-l{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap}
.pm-v{font-size:23px;font-weight:800;color:#58a6ff;line-height:1;flex-shrink:0}
.pm-b{font-size:11px;color:var(--mut);font-weight:600;margin-top:5px;line-height:1.5;font-variant-numeric:tabular-nums}
.pm-b b{color:var(--soft)}
.pm-g{color:var(--green);font-weight:700}
.pm.lejos{background:rgba(210,153,34,.09);border-color:rgba(210,153,34,.4)}
.pm.lejos .pm-v{color:#d29922}
/* LOS CUATRO PASOS (10-sep-2026) — ver _pasos(). */
.paso{margin-top:12px}
.paso-l{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.paso-l.riesgo{color:#d29922}
.paso-t{font-size:13px;color:var(--soft);line-height:1.5}
.paso-t b{color:var(--text)}
/* SEGUIMIENTO — se publica el analisis pero NO lleva dinero.
   ANTES SE APAGABA LA TARJETA ENTERA (opacity:.62 + el pick y la cuota en
   gris). Distinguia, si, pero a costa de no poder leerla: hay dias en que dos
   de los tres analisis son seguimiento, asi que media pagina quedaba en
   penumbra justo cuando lo que se quiere es LEERLA --el seguimiento existe
   para ver si el filtro acierta, y no se puede juzgar lo que no se lee--.
   Ahora se distingue por COLOR y no por falta de luz: azul, que en esta paleta
   no significa ni dinero (dorado) ni resultado (verde/rojo), y que se separa
   del dorado tambien con vision deutan. El borde discontinuo se queda como
   segunda señal, para no depender solo del color. */
.card.seg{border-style:dashed;border-color:rgba(88,166,255,.5)}
/* EL SISTEMA VIVO (14-sep-2026), ver _seccion_vivo(). Aprobado por Cesar en el
   mockup: la tira de tandas, la hora de publicacion y lo plegado. */
.vv-tira{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px 4px;margin:12px 0}
.vv-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);padding-bottom:8px}
.vv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold2);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(240,199,94,.18)}
.vv-c{color:var(--gold2);font-variant-numeric:tabular-nums}
.vv-t{display:grid;grid-template-columns:16px auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line2);font-size:12.5px}
.vv-t .ico{width:15px;height:15px;margin:0;color:var(--soft)}
.vv-t.esp .ico{color:var(--faint)}
.vv-th{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.vv-th .h-loc{border-bottom:none}
.vv-tj{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vv-tr{font-weight:700;color:var(--mut);font-size:11px;white-space:nowrap}
.vv-tr.si{color:var(--gold2)}
.vv-t.esp .vv-th,.vv-t.esp .vv-tr{color:var(--faint)}
.vv-pub{margin-top:11px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--mut);background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:6px 9px;line-height:1.35}
.vv-pub .ico{width:14px;height:14px;margin:0;color:var(--soft)}
.vv-vac-t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--text)}
.vv-vac-t .ico{width:20px;height:20px;margin:0;color:var(--faint)}
.vv-vac-d{font-size:13px;color:var(--soft);line-height:1.55;margin-top:7px}
.vv-vac-s{font-size:11px;color:var(--faint);margin-top:8px}
.vv-sv{border-top:1px solid var(--line2)}
.vv-sv:first-child{border-top:none}
.vv-sv>summary{list-style:none;cursor:pointer;padding:9px 1px}
.vv-sv>summary::-webkit-details-marker{display:none}
.vv-sv>.card{margin:2px 0 12px}
.vv-svt{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;font-weight:800;color:var(--text)}
.vv-svd{font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.45}
.vv-svd b{color:var(--soft)}
@media (prefers-reduced-motion:no-preference){.vv-dot{animation:vvlat 2.4s ease-in-out infinite}}
@keyframes vvlat{50%{box-shadow:0 0 0 6px rgba(240,199,94,0)}}
.u.seg{background:rgba(88,166,255,.14);border:1px solid rgba(88,166,255,.5);color:#79b8ff;font-size:11px;letter-spacing:.3px}
.razon{color:var(--soft);font-size:13px;line-height:1.62;margin-top:13px;border-left:2px solid var(--gold);padding-left:12px}
/* La hora local lleva un subrayado de puntos: avisa de que ese dato se ha
   adaptado a tu reloj, y el title cuenta cual era la de Houston. Sin color
   propio — no es una alerta, es una cortesia. */
.h-loc{border-bottom:1px dotted var(--faint);cursor:help}
/* LA TARJETA CERRADA Y SU GANCHO (12-sep-2026) — ver _tarjeta_cerrada().
   Conserva el marco y la medalla del nivel a proposito: lo que se tapa es el
   contenido, no la categoria. Que se vea que ahi hay una señal elite es medio
   argumento de venta; taparla tambien seria tirarlo. */
.card.cerr{border-style:dashed}
.cerr-t{color:var(--soft);font-size:15px}
.cerr-ic{width:26px;height:26px;color:var(--faint)}
.gan{margin-top:13px;background:linear-gradient(160deg,rgba(212,175,55,.10),var(--panel));border:1px solid rgba(212,175,55,.4);border-radius:12px;padding:13px 14px}
.gan-t{font-size:13px;font-weight:800;color:var(--gold2);margin-bottom:6px}
.gan-t time{border-bottom-color:rgba(212,175,55,.5)}
.gan-d{font-size:12.5px;line-height:1.55;color:var(--soft)}
.gan-d b{color:var(--text)}
.gan-b{display:inline-block;margin-top:11px;background:var(--gold);color:#0d1117;font-weight:800;font-size:13px;padding:9px 16px;border-radius:9px;text-decoration:none}
.gan-b:hover,.gan-b:focus-visible{background:var(--gold2)}
.mut{color:#8b949e}
/* EL PIE LEGAL (11-sep-2026) — ver _pie(). Se llama .legal y NO .pie porque
   Trends ya usa .pie para el pie de sus tarjetas de rival, con otros valores:
   lo cazo comprobar_web.py al publicar, que para eso esta. Deliberadamente
   discreto: tiene que
   ESTAR y poder leerse, no competir con los analisis. Va dentro de <main>, asi
   que el padding-bottom de .app ya lo separa de la barra fija de abajo. */
/* PLANES (12-sep-2026) — ver generar_planes(). Tarjetas apiladas: el ancho de
   la app son 480px, asi que tres columnas no caben ni en escritorio. */
.pl-av{background:rgba(212,175,55,.07);border:1px solid var(--gold);border-radius:14px;padding:16px 17px;margin-bottom:20px}
.pl-av-t{font-size:15px;font-weight:800;color:var(--gold2);line-height:1.35;margin-bottom:9px}
.pl-av p{font-size:13px;line-height:1.62;color:var(--soft);margin:0 0 10px}
.pl-av p b{color:var(--text);font-weight:800}
.pl-av-p{margin-bottom:0!important;color:var(--text)!important;font-weight:600}
.pl-prog{display:flex;justify-content:space-between;align-items:baseline;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin:0 0 10px;font-size:12.5px;font-variant-numeric:tabular-nums}
.pl-prog b{font-size:15px;color:var(--gold2)}
.pl-card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:17px 18px;margin-bottom:13px}
/* El gratis se queda con el borde neutro a proposito: es el que menos
   tiene que llamar la atencion, pero la clase se DECLARA para que no
   salga como huerfana en revisar_todo.py. */
.pl-card.pl-free{border-color:var(--line)}
.pl-card.pl-vip{border-color:rgba(88,166,255,.5)}
.pl-card.pl-elite{border-color:var(--gold);background:linear-gradient(160deg,#1e1a0e,var(--card))}
.pl-n{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--mut)}
.pl-vip .pl-n{color:var(--blue)}.pl-elite .pl-n{color:var(--gold2)}
.pl-p{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:5px;line-height:1;font-variant-numeric:tabular-nums}
.pl-p small{font-size:13px;font-weight:600;color:var(--mut);letter-spacing:0}
.pl-p .pl-cts{font-size:.5em;font-weight:800;letter-spacing:0;vertical-align:.62em;margin-left:1px}
.pl-anual{font-size:11px;color:var(--green);font-weight:600;margin-top:6px}
.pl-g{font-size:13px;color:var(--soft);margin-top:9px;padding-bottom:11px;border-bottom:1px solid var(--line2);line-height:1.45}
.pl-l{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:8px}
.pl-l li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--soft)}
.pl-l li.off{color:var(--faint)}
.pl-l li b{color:var(--text)}
.pl-m{flex-shrink:0;font-size:11px;font-weight:800;margin-top:2px}
.pl-m.si{color:var(--green)}.pl-m.no{color:var(--red)}
.pl-esp{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px 18px;margin-top:20px;text-align:center}
.pl-esp-t{font-size:15px;font-weight:800;margin-bottom:8px}
.pl-esp p{font-size:13px;color:var(--mut);line-height:1.6;margin:0 0 14px}
.pl-btn{display:inline-block;background:var(--gold);color:#0d1117;font-weight:800;font-size:14px;padding:12px 22px;border-radius:10px;text-decoration:none}
.pl-btn:hover,.pl-btn:focus-visible{background:var(--gold2)}
.pl-esp-n{font-size:11px;color:var(--faint);margin-top:11px}
.pl-esp-n b{color:var(--gold2)}
.pl-fine{font-size:11px;color:var(--faint);line-height:1.6;margin-top:18px;text-align:center}
.pl-fine a{color:var(--mut)}
/* EL CAMPO DEL CORREO (23-sep-2026, PLAN_NEGOCIO §16.6, mockup aprobado por
   César). Va en la portada y en el Récord, antes del pie legal.
   EL COLOR ES EL AZUL Y NO EL DORADO, y lo pidió él: «no le pongas el color
   dorado, ya que en análisis ese es el color de la jugada elite». El azul es
   el que ya usan el precio mínimo y el seguimiento. */
.cy-ml{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);
 border-radius:12px;padding:14px 16px;margin:12px 0}
.cy-ml-t{font-size:14px;font-weight:800;color:var(--text);margin-bottom:5px}
.cy-ml-d{font-size:13px;line-height:1.55;color:var(--mut);margin-bottom:11px}
.cy-ml-d b{color:var(--soft);font-weight:600}
.cy-ml-f{display:flex;gap:8px}
.cy-ml-f input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);
 border-radius:9px;padding:11px 12px;color:var(--text);font:400 16px var(--font)}
.cy-ml-f input::placeholder{color:var(--faint)}
.cy-ml-f button{flex-shrink:0;background:var(--blue);color:#0d1117;border:none;
 border-radius:9px;padding:11px 16px;font:800 14px var(--font);cursor:pointer}
.cy-ml-f button[disabled]{opacity:.55}
.cy-ml-e{font-size:12.5px;color:var(--red);margin-top:8px}
.cy-ml-ok{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--soft);line-height:1.55}
.cy-ml-ok b{color:var(--text)}
.cy-ml-ok svg{width:17px;height:17px;flex-shrink:0;color:var(--green);margin-top:1px}
.cy-ml-mas{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding-top:11px;
 border-top:1px solid var(--line2);font-size:12.5px;line-height:1.5;color:var(--mut);cursor:pointer}
.cy-ml-mas input{flex-shrink:0;width:16px;height:16px;margin:1px 0 0;accent-color:var(--blue)}
/* SIN COLOR EN PLANES (23-sep-2026, César): esa página ya tiene su peso visual
   --el aviso, el selector, las tres tarjetas-- y un filo azul más competía. En
   Análisis y en el Récord sí lleva el azul, que ahí es lo único que destaca. */
.cy-ml.cy-ml-liso{border-left:1px solid var(--line);background:var(--panel)}
/* La trampa para robots: fuera de la pantalla y fuera del tabulador. */
.cy-ml-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* EL COBRO ENCENDIDO (23-sep-2026) — ver _planes_vendiendo() y _plan_tarjeta().
   Estos valores son EXACTAMENTE los del mockup que aprobo Cesar («El cobro de CY
   Elite», pantalla «1 · Planes»): no hay ni un numero elegido aqui. Lo unico que
   cambia es el nombre --alli eran .mk-* porque era un mockup suelto, y aqui la
   casa usa un prefijo por pagina (.pl-) para que revisar_todo.py no las vea
   huerfanas ni choquen con las de otra pagina. */
.pl-tog{display:flex;gap:8px;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:4px;margin:0 0 12px}
.pl-tog span{flex:1;text-align:center;border-radius:8px;padding:9px 6px;color:var(--mut);font:700 13px var(--font)}
/* EL MENSUAL, ENCENDIDO EN DORADO: es el unico que se puede comprar hoy. */
.pl-tog span.on{background:var(--gold);color:#0d1117}
/* EL ANUAL SE VE PERO ESTA CERRADO (decision de Cesar, 22-sep). Lo dicen TRES
   cosas y no solo el color: la letra apagada, el candado y la linea de debajo. */
.pl-tog span.off{color:var(--faint);font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.pl-lock{width:13px;height:13px;flex-shrink:0}
.pl-fund{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--soft);margin-bottom:12px;line-height:1.5}
.pl-fund b{color:var(--text)}
/* «ANTES DE PAGAR, ESTO» — del lienzo del 22-sep, artboard «Planes, dia 1 de
   2027», que es el que eligio Cesar el 23-sep viendo la vista previa. Los
   valores son los suyos: el borde dorado al 30 %, no el dorado entero. */
.pl-antes{background:var(--card);border:1px solid rgba(212,175,55,.30);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.pl-antes-t{font-size:14px;font-weight:700;color:var(--gold2);margin-bottom:6px}
.pl-antes p{font-size:13px;line-height:1.62;color:var(--soft);margin:0}
.pl-antes p b{color:var(--text);font-weight:600}
.pl-tog-n{font-size:12.5px;color:var(--mut);line-height:1.6;margin:-6px 2px 14px}
.pl-cta{display:block;text-align:center;margin-top:14px;background:var(--gold);color:#0d1117;border-radius:10px;padding:12px;font:800 14px var(--font);text-decoration:none}
.pl-cta:hover,.pl-cta:focus-visible{background:var(--gold2)}
.pl-actual{margin-top:14px;text-align:center;font-size:12.5px;color:var(--mut);border:1px dashed var(--line);border-radius:10px;padding:10px}
/* LEGAL (11-sep-2026) — ver generar_legal(). Texto largo para leer en el
   movil: linea corta, buen interlineado y los titulos bien separados.

   EL PREFIJO ES lgl Y NO lg PORQUE .lg YA ES DE TRENDS (el logo de 22px de
   sus tablas). Lo canto comprobar_web.py al publicar, igual que antes con
   .pie. Las cinco paginas comparten hoja de estilo, asi que un prefijo
   corto acaba chocando: mejor tres letras propias que dos genericas. */
.lgl-nav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.lgl-nav a{flex:1;min-width:92px;text-align:center;font-size:12.5px;font-weight:700;color:var(--soft);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 6px;text-decoration:none}
.lgl-nav a:hover,.lgl-nav a:focus-visible{border-color:var(--gold);color:var(--gold2)}
.lgl{display:block;margin-top:26px;scroll-margin-top:74px}
.legal-l{margin-top:9px;font-size:11px;color:var(--faint);text-align:center}
.legal-l a{color:var(--mut);text-decoration:none;padding:0 3px}
.legal-l a:hover,.legal-l a:focus-visible{color:var(--gold2);text-decoration:underline}
.lgl-h{font-size:15px;font-weight:700}
.lgl h3{font-size:15px;font-weight:700;color:var(--text);margin:20px 0 7px}
.lgl p{font-size:13px;line-height:1.7;color:var(--soft);margin:0 0 11px}
.lgl p b{color:var(--text)}
.lgl-f{font-size:11px;color:var(--faint);margin-top:11px}
.lgl-u{margin:0 0 11px;padding-left:18px;display:grid;gap:7px}
.lgl-u li{font-size:13px;line-height:1.7;color:var(--soft)}
.lgl-u li b{color:var(--text)}
.lgl-av{background:rgba(88,166,255,.09);border:1px solid rgba(88,166,255,.34);border-left-width:3px;border-radius:0 11px 11px 0;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--soft);margin:14px 0}
.lgl-n{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.lgl-volver{color:var(--blue);text-decoration:none;font-weight:600;font-size:13px}
/* AJUSTES (11-sep-2026) — ver generar_ajustes(). Filas de una linea con su
   icono, agrupadas bajo cabeceras cortas: el patron de la pantalla de ajustes
   de una app, que es lo que pidio Cesar. */
.set-h{font-size:15px;font-weight:700;letter-spacing:-.005em;color:var(--text);margin:0;padding:26px 2px 8px}
.set-g{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.set-f{display:flex;align-items:center;gap:12px;padding:13px 14px;border-top:1px solid var(--line2);color:var(--text);text-decoration:none;min-height:52px}
.set-g>*:first-child,.set-g>*:first-child>summary{border-top:none}
a.set-f:hover,a.set-f:focus-visible{background:var(--line2)}
.set-i{width:22px;height:22px;flex-shrink:0;color:var(--mut);display:grid;place-items:center}
.set-i svg{width:20px;height:20px}
.set-t{flex:1;min-width:0;font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:2px}
.set-n{font-size:11px;font-weight:400;color:var(--faint);line-height:1.4}
.set-v{font-size:13px;color:var(--mut);flex-shrink:0;font-weight:400}
.set-ar{width:17px;height:17px;color:var(--faint);flex-shrink:0}
.set-d>summary{display:flex;align-items:center;gap:12px;padding:13px 14px;border-top:1px solid var(--line2);cursor:pointer;list-style:none;min-height:52px}
.set-d>summary::-webkit-details-marker{display:none}
.set-d[open]>summary .set-ar{transform:rotate(180deg)}
.set-p{padding:2px 16px 16px;font-size:13px;line-height:1.62;color:var(--soft)}
.set-p p{margin:0 0 10px}.set-p p:last-child{margin-bottom:0}
.set-p b{color:var(--text)}
.set-p a{color:var(--blue)}
.set-tel{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-variant-numeric:tabular-nums;line-height:1.9}
.set-pie{text-align:center;font-size:11px;color:var(--faint);margin-top:26px;line-height:1.7}
/* EL COPYRIGHT, IGUAL EN LAS CINCO PAGINAS (11-sep-2026). Antes salia
   centrado en unas y a la izquierda en otras, y con separaciones distintas,
   porque cada pagina termina en un bloque con sus propios margenes. Ahora el
   aire lo pone el pie y no lo que tenga encima: margen fijo arriba, y abajo el
   padding de .app lo separa de la barra inferior. */
.legal{margin:24px 0 0;padding-top:14px;border-top:1px solid var(--line2)}
.legal-c{font-size:11px;line-height:1.55;color:#6e7681;text-align:center;
  max-width:34em;margin:0 auto}
/* LA RUEDA DE AJUSTES en la barra de arriba. La barra es text-align:center y
   el titulo va centrado de verdad (no en un flex), asi que el boton se coloca
   ENCIMA en absoluto: asi el titulo sigue centrado respecto a la pagina y no
   respecto al hueco que deje el icono.

   AQUI NO VA UN position:relative PARA LA BARRA, y eso importa. Lo puse y
   comprobar_web.py lo canto al publicar: la barra ya vale position FIXED, asi
   que una segunda regla mas abajo la pisaba y habria dejado de quedarse fija
   al hacer scroll. No hace ninguna falta: un elemento fixed YA ES bloque
   contenedor de sus hijos absolutos.
   (Y escrito sin llaves a proposito: un comentario con sintaxis CSS dentro
   hace que el propio guardian lo lea como una regla de verdad.) */
.t-set{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:2;
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--mut);text-decoration:none}
.t-set:hover,.t-set:focus-visible{color:var(--gold2);background:var(--line2)}
.t-set svg{width:21px;height:21px}
/* EL z-index DE LOS DOS BOTONES DE LA BARRA (23-sep-2026, lo encontro Cesar:
   «el boton de atras, al darle encima con el dedo, no funciona; si doy mas a la
   derecha si»). LA CAUSA: el h1 de la marca lleva un filter:drop-shadow, y un
   filtro CREA UN CONTEXTO DE APILADO. Eso hace que el titulo se pinte en la
   misma capa que los elementos posicionados y, por ir DESPUES en el HTML, por
   ENCIMA de la flecha. El h1 ocupa todo el ancho, asi que se tragaba el toque.
   La rueda no lo sufria porque va DESPUES del h1 y le gana por orden.
   Con z-index los dos botones quedan arriba pase lo que pase, y deja de
   depender del orden del HTML. No se le quita el filtro al h1: ese resplandor
   es lo que hace legible la marca sobre lo que pasa por debajo al hacer scroll
   (barra sin caja, decision del 19-sep). */
.t-atras{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:2;
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--mut);text-decoration:none}
.t-atras:hover,.t-atras:focus-visible{color:var(--gold2);background:var(--line2)}
.t-atras svg{width:22px;height:22px}
/* El pitcheo del dia comparte CSS con clasico.html: CSS_PITCHEO. */
.card.valor .razon{border-color:#aab4c2}.card.bronce .razon{border-color:#cc8b52}
.card.parlay{border:2px dashed var(--purple);background:#15121d;padding:14px 16px}
.patas{display:flex;flex-direction:column;gap:2px}
.pata{display:flex;align-items:center;gap:11px;padding:8px 0}
.pata .pn{flex:1;font-size:15px;font-weight:700}.pata .pc{font-size:14px;font-weight:800;color:var(--mut)}
.combo{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:11px;border-top:1px solid var(--line2);font-weight:700}
.combo .cuota{font-size:23px;color:var(--purple)}
.resumen{background:var(--card);border-left:3px solid var(--green);border-radius:8px;padding:15px 16px;font-size:13px;color:var(--soft);line-height:1.55;margin:12px 0}
.clv-box{background:#0d1117;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:12px 0}
.clv-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.clv-ti{font-size:12.5px;font-weight:800;color:var(--soft)}
.clv-n{font-size:15px;font-weight:800}.clv-n.g{color:var(--green)}.clv-n.r{color:var(--red)}
.clv-sub{font-size:12.5px;color:var(--mut);margin-top:3px}.clv-lec{font-size:11px;color:var(--faint);margin-top:4px;font-style:italic}
/* ===== HISTORIAL PRO (2-sep-2026) ==========================================
   TODAS las clases llevan prefijo "hi-", sin excepcion. Es la leccion del mismo
   dia: el dashboard concatena su hoja, la del LAB y la de Trends, y a igualdad
   de especificidad gana la ultima. Ese dia costo cuatro fallos en vivo --.gc,
   .logo, .mut y .chip-- todos por clases cortas sin prefijo. */

/* el veredicto: lo primero que se lee, y sin maquillaje */
.hi-ver{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 15px;border-left:3px solid var(--gold2)}
.hi-ver h4{font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold2);margin:0 0 8px}
.hi-ver p{font-size:13px;line-height:1.62;color:var(--text);margin:0}
.hi-ver p+p{margin-top:8px;color:var(--mut);font-size:12.5px}
.hi-ver b{color:var(--text);font-weight:700}

/* el balance */
.hi-hero{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px;overflow:hidden}
.hi-ht{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hi-hn{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.hi-hs{font-size:12.5px;color:var(--mut)}
.hi-hg{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:13px;
  padding-top:12px;border-top:1px solid var(--line)}
.hi-kpi{text-align:center}
.hi-kpi b{display:block;font-size:15px;font-weight:800;color:var(--text);
  line-height:1.2;font-variant-numeric:tabular-nums}
.hi-kpi span{display:block;font-size:11px;color:var(--mut);margin-top:2px}
.hi-nota{font-size:12.5px;line-height:1.6;color:var(--mut);margin:10px 2px 0}
/* LA TEMPORADA CERRADA, EN UNA TARJETA (23-sep-2026) — ver _temporada_cerrada().
   Del lienzo del 22-sep, artboard «Récord por temporada». Cesar: «ya es una
   temporada cerrada, no es necesario tanta información ni tanto espacio». */
.hi-tc{display:flex;flex-direction:column;gap:12px}
.hi-tc-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.hi-tc-g{display:flex;gap:8px}
.hi-tc-n{flex:1;text-align:center;min-width:0}
.hi-tc-n b{display:block;font-size:30px;font-weight:800;line-height:1.05;color:var(--text);font-variant-numeric:tabular-nums}
.hi-tc-n b.g{color:var(--green)}.hi-tc-n b.r{color:var(--red)}
.hi-tc-n span{display:block;font-size:11px;color:var(--mut);margin-top:4px;line-height:1.4}
.hi-tc-p{font-size:12.5px;color:var(--mut);line-height:1.65;margin:0}
.hi-tc-p b{color:var(--soft);font-weight:600}
/* COMO LE FUE CADA MES: lo unico que queda del detalle de la temporada. */
.hi-tc-ms{display:flex;flex-direction:column}
.hi-tc-m{display:grid;grid-template-columns:1fr 42px 62px;align-items:baseline;gap:8px;padding:7px 2px;border-top:1px solid var(--line2);font-size:12.5px}
.hi-tc-m span:first-child{color:var(--text);font-weight:600}
.hi-tc-m .mut{text-align:right;font-variant-numeric:tabular-nums}
.hi-tc-m b{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.hi-tc-m b.g{color:var(--green)}.hi-tc-m b.r{color:var(--red)}
.hi-cero{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;margin-top:12px}
.hi-cero-t{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.hi-cero p{font-size:13px;color:var(--soft);line-height:1.65;margin:0}

/* la curva. El trazo toma el COLOR DEL LADO en el que esta (verde arriba del
   cero, rojo abajo) con el mismo recorte que el area: nada de un cuarto color
   encima del relleno, y el signo se lee por la posicion, no por el color. */
.hi-cv{width:100%;height:auto;display:block;margin:14px 0 0}
.hi-cv .hi-ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hi-cv .hi-ln.g{stroke:var(--green)}
.hi-cv .hi-ln.r{stroke:var(--red)}
.hi-cv .hi-ar{stroke:none}
.hi-cv .hi-ar.g{fill:rgba(63,185,80,.15)}
.hi-cv .hi-ar.r{fill:rgba(248,81,73,.15)}
.hi-cv .hi-cero{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.hi-cv .hi-pt{fill:var(--green);stroke:var(--card);stroke-width:2}

/* CLV */
.hi-clv{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px}
.hi-clvt{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.hi-clvn{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.hi-clvs{font-size:12.5px;color:var(--mut)}
.hi-pr{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.hi-prh{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);margin-bottom:9px}
.hi-pr2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hi-pr2>div{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:10px}
.hi-pr2 b{display:block;font-size:15px;font-weight:800;line-height:1.2;
  font-variant-numeric:tabular-nums}
.hi-pr2 span{display:block;font-size:11px;color:var(--mut);margin-top:3px;
  line-height:1.4}

/* barras divergentes. EL COLOR NO LLEVA EL SIGNIFICADO: verde y rojo no se
   distinguen con daltonismo (DeltaE 2.2 en deuteranopia, medido con el
   validador). Lo llevan la POSICION respecto al cero y el numero con signo. */
.hi-brs{display:flex;flex-direction:column;gap:9px}
.hi-br{display:grid;grid-template-columns:1fr 92px 62px;align-items:center;gap:9px}
.hi-brk{font-size:12.5px;font-weight:700;color:var(--text);min-width:0}
.hi-brk span{display:block;font-size:11px;font-weight:400;color:var(--mut);
  margin-top:1px;font-variant-numeric:tabular-nums}
.hi-brt{position:relative;height:16px;background:var(--card);border-radius:4px}
.hi-brt i{position:absolute;top:3px;height:10px;border-radius:3px}
.hi-brt i.g{background:var(--green)}
.hi-brt i.r{background:var(--red)}
.hi-brt i.z{background:var(--mut)}
.hi-brt b{position:absolute;left:50%;top:0;width:1px;height:16px;background:var(--line)}
.hi-brv{font-size:13px;font-weight:800;text-align:right;
  font-variant-numeric:tabular-nums}

/* mes a mes */
.hi-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hi-t th{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);text-align:right;padding:0 4px 7px}
.hi-t th:first-child{text-align:left}
.hi-t td{font-size:12.5px;padding:7px 4px;border-top:1px solid var(--line)}
.hi-t td.hi-n{text-align:right;font-weight:700}
.hi-t td.hi-ms{font-weight:700;color:var(--text)}

/* los ultimos picks, dentro del desplegable */
.hi-pk{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.hi-pk:last-child{border-bottom:none}
.hi-pkr{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:800;flex:none}
.hi-pkr.W{background:rgba(63,185,80,.14);color:var(--green)}
.hi-pkr.L{background:rgba(248,81,73,.14);color:var(--red)}
.hi-pkr.P{background:var(--line);color:var(--mut)}
.hi-pkb{flex:1;min-width:0}
.hi-pkp{font-size:12.5px;font-weight:700;color:var(--text)}
.hi-pkd{font-size:11px;color:var(--mut);margin-top:1px;
  font-variant-numeric:tabular-nums}
.hi-pkn{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}

/* el verde y el rojo del historial, compartidos por curva, barras y picks */
.hi-hn.g,.hi-clvn.g,.hi-brv.g,.hi-pkn.g,.hi-kpi b.g,.hi-pr2 b.g,.hi-t td.g{color:var(--green)}
.hi-hn.r,.hi-clvn.r,.hi-brv.r,.hi-pkn.r,.hi-kpi b.r,.hi-pr2 b.r,.hi-t td.r{color:var(--red)}
.hi-brv.z,.hi-pkn.z,.hi-t td.z{color:var(--mut)}
.acc{width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 15px;color:var(--text);font-weight:800;font-size:14px;cursor:pointer;margin:10px 0;display:flex;align-items:center;gap:7px}
.acc .cnt{color:var(--mut);font-weight:600;font-size:12.5px}.acc .ar{margin-left:auto;color:var(--mut)}
/* los iconos de linea: en filas con gap, el gap ya los separa */
.acc .ico,.badge .ico{margin-right:0}
.pl-m .ico{display:block;width:13px;height:13px;margin:0}
details.dd summary{list-style:none}details.dd summary::-webkit-details-marker{display:none}
details.dd .pnl{border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;margin-top:-6px;padding:12px;background:var(--panel)}
.dlist{list-style:none;font-size:13px;color:var(--soft)}.dlist li{padding:6px 0;border-top:1px solid var(--line2)}.dlist li:first-child{border:none}
.hero{background:linear-gradient(160deg,#16191f,#101216);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0 4px}
.hero .lbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.hero .net{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;margin:6px 0 2px}
.hero .net.g{color:var(--green)}.hero .net.r{color:var(--red)}
.hero .sub2{font-size:13px;color:var(--mut);font-weight:600}
.hero .bar{height:7px;border-radius:99px;background:var(--red);margin:14px 0 10px;overflow:hidden;display:flex}
.hero .bar i{background:var(--green);display:block}
.hero .stats{display:flex;gap:8px}
.hero .stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.hero .stat b{font-size:15px;font-weight:800}.hero .stat span{display:block;font-size:10px;color:var(--faint);font-weight:600;margin-top:1px;text-transform:uppercase;letter-spacing:.05em}
.hrow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line2)}
.hres{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.hres.W{color:var(--green);background:rgba(63,185,80,.14)}.hres.L{color:var(--red);background:rgba(240,82,77,.13)}.hres.P{color:var(--faint);background:var(--line2)}
.hb{flex:1}.hb .hp{font-size:14px;font-weight:700}.hb .hd{font-size:11px;color:var(--faint);font-weight:600}
.hn{font-size:14px;font-weight:800}.hn.g{color:var(--green)}.hn.r{color:var(--red)}.hn.z{color:var(--faint)}
/* EL CIERRE DEL DIA (19-sep-2026) — ver _cierre_del_dia(). */
.cie{display:flex;flex-direction:column;gap:11px}
.cie-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cie-est{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid}
.cie-est.g{color:var(--green);background:rgba(63,185,80,.12);border-color:#1d4428}
.cie-est.r{color:var(--red);background:rgba(248,81,73,.1);border-color:#5c2523}
.cie-est.z{color:var(--soft);background:var(--line2);border-color:var(--line)}
.cie-cnt{font-size:12.5px;color:var(--mut);font-weight:600}
.cie-res{font-size:13px;color:var(--soft);line-height:1.55}
.cie-res b{color:var(--text)}
.cie-pie{border-top:1px solid var(--line2);padding-top:10px;font-size:12.5px;color:var(--mut);line-height:1.5}
.cie-pie b{color:var(--text)}
.frame-wrap{border:none;margin:0}
.frame{width:100%;height:calc(100vh - 150px);border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.note{color:var(--faint);font-size:12.5px;text-align:center;padding:12px 8px 2px;line-height:1.55}
.nota-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;text-align:center;color:var(--soft);margin:12px 0}
.bj-vuelta{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--mut)}.bj-vuelta a{color:var(--mut)}
nav{position:fixed;bottom:0;left:0;right:0;z-index:40;max-width:480px;margin:0 auto;background:rgba(15,20,26,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.nav-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--faint);font-family:inherit;cursor:pointer;padding:5px 0;text-decoration:none}
.nav-i svg{width:24px;height:24px;display:block}.nav-i span{font-size:11px;font-weight:700}
.nav-i.on{color:var(--text)}.nav-i.on svg{color:var(--gold2)}
/* EL MISMO GESTO QUE LA RUEDA (11-sep-2026, peticion de Cesar): al pasar el
   raton, el icono se enciende en dorado y el texto aclara. Antes los cuatro de
   abajo eran los unicos elementos pulsables de la web que no respondian.

   DOS DETALLES QUE NO SE VEN PERO IMPORTAN:

   · Va dentro de @media (hover:hover). En un movil NO existe el raton, y un
     :hover suelto se queda PEGADO despues de tocar: el icono se enciende y
     asi se queda hasta que tocas otra cosa. Con esta condicion, el telefono
     ni lee la regla.
   · El :active si es para el movil: da el destello al tocar, que es la
     confirmacion de que el dedo acerto.

   La pestaña activa (.on) no cambia al pasar por encima: ya esta encendida y
   parpadear seria ruido. */
@media (hover:hover){
  .nav-i:hover{color:var(--soft)}
  .nav-i:hover svg{color:var(--gold2)}
}
.nav-i:active svg{color:var(--gold2)}
.nav-i:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;border-radius:8px}

#cmp{margin:13px 0}
.cmp-acc{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:#161b22;border:1px solid #30363d;border-radius:12px;padding:12px 15px;color:#e6edf3;font-weight:800;font-size:14px;cursor:pointer}
.cmp-rt{display:flex;align-items:center;gap:7px;flex-shrink:0;font-weight:600;font-size:12.5px;color:#8b949e}
.cmp-panel{border:1px solid #30363d;border-top:none;border-radius:0 0 12px 12px;margin-top:-6px;padding:11px;background:#0f141a}
.cmp-g{background:#161b22;border:1px solid #30363d;border-radius:11px;margin-bottom:8px;overflow:hidden}
/* LA REJILLA QUE SUJETA LAS COLUMNAS (10-sep-2026).
   Antes esto era `display:flex` con `.cmp-mt{flex:1}` al lado de un chip de
   `min-width:84px`. El chip crece con su texto --"SF · +2.5" mide 72px y
   "WSH · +10.2" mide 90px, medido sobre la fuente real-- asi que cada juego
   le dejaba a la parte de la izquierda un ancho DISTINTO, y las columnas de
   ERA / BP / SV aparecian corridas unos pixeles de un juego a otro. Cesar lo
   vio: "se han movido porque no tienen el mismo tamano".
   Con grid, la primera pista es siempre `1fr` sobre un ancho fijo: la columna
   del chip mide 96px pase lo que pase y los numeros caen SIEMPRE en el mismo
   sitio. La cabecera usa el mismo hueco (.cmp-vsp) y el mismo gap. */
.cmp-h{display:grid;grid-template-columns:1fr 96px;align-items:center;gap:9px;padding:10px 11px}
.cmp-mt{min-width:0;display:flex;flex-direction:column;gap:3px}
.cmp-p{display:flex;align-items:center;gap:5px;font-size:12.5px;line-height:1.35;min-width:0}
.cmp-who{flex:1;min-width:0;display:flex;align-items:baseline;gap:5px}
.cmp-nm{min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* SIN COLOR EN LA FILA (peticion de Cesar): "noto demasiados colores, dejamos
   color neutro las letras". La ERA iba tenida por su valor y el nombre del
   que gana el duelo en dorado; con seis juegos en pantalla son doce numeros y
   seis nombres pidiendo atencion a la vez. EL UNICO COLOR QUE SE QUEDA es el
   del chip de ventaja (.cmp-v.alta), que ya dice quien gana y cuanto.
   La clase .win se conserva y marca al que gana el duelo solo con el grosor,
   sin color. */
.cmp-p.win .cmp-nm{font-weight:800}
.cmp-rec{flex-shrink:0;font-size:11px;color:#8b949e;font-variant-numeric:tabular-nums}
.cmp-nums{flex-shrink:0;display:flex;align-items:baseline;gap:4px}
/* LAS TRES COLUMNAS, IGUALES (10-sep-2026). La ERA iba a 12.5px y en negrita
   800 mientras BP y SV iban a 10.5px normales: se leia como si fueran tres
   cosas de tres importancias distintas y ademas descuadraba la linea base.
   Cesar: "los numeros de ERA estan en negrita y mas grande que los demas, que
   quede todo igual". Mismo tamano, mismo grosor y mismo ancho de columna las
   tres; la ERA conserva el gris claro porque es el dato del que va el bloque,
   BP y SV van en gris apagado. */
.cmp-er,.cmp-pen,.cmp-cl{width:32px;text-align:right;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.cmp-er{color:#e6edf3}
.cmp-pen,.cmp-cl{color:#8b949e}
.cmp-lg{width:18px;height:18px;object-fit:contain;flex-shrink:0}
/* El padding derecho es 12px y no 11px a proposito: la fila vive dentro de
   .cmp-g, que tiene 1px de borde. 11 + 1 = 12, y asi las etiquetas caen justo
   encima de sus numeros. */
.cmp-hd{display:flex;justify-content:flex-end;gap:9px;padding:0 12px 5px}
.cmp-hd .cmp-er,.cmp-hd .cmp-pen,.cmp-hd .cmp-cl{font-size:10px;font-weight:800;color:#6e7681;letter-spacing:.5px}
.cmp-vsp{width:96px;flex-shrink:0}
.cmp-v{text-align:right;font-size:10px;font-weight:800;background:#0f141a;color:#8b949e;border:1px solid #30363d;border-radius:6px;padding:4px 7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-v.alta{background:#0f2e1a;color:#3fb950;border-color:#1f5c37}
@media (max-width:409px){.cmp-cl,.cmp-hd .cmp-cl{display:none}}
.cmp-d{display:none;padding:0 11px 9px;font-size:11px;color:#c9d1d9}
.cmp-ln{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid #21262d}
.cmp-note{font-size:11px;color:#6e7681;text-align:center;margin-top:4px}
.ico{width:1.05em;height:1.05em;flex-shrink:0;vertical-align:-.16em;margin-right:.32em}
/* El aire entre juegos vive aqui y no en el `gap` de la rejilla: el
   dashboard no usa `.grid` —cuelga los .gitem de .lab-real, que no tiene
   ni una regla— y alli los juegos salian pegados unos a otros. */
.gitem{min-width:0}
.gitem+.gitem{margin-top:12px}
/* ============ LA TARJETA (rediseño del 30-ago-2026) ============
   Dos cosas la hacian ver "pequeña y apretada", y las dos estan medidas:
   habia tipografia de 8.5 px y las tarjetas iban a 8 px de padding, mientras
   Trends no baja de 10.5 y respira a 11-13. Aqui se adopta la escala de Trends
   y las medidas de las tarjetas de PICKS (radio 16, padding 15/16, margen 12),
   que es lo que hace que las tres paginas se vean de la misma web.
   NO se meten variables CSS a proposito: este CSS se copia al dashboard
   filtrado por selector, y alli los tokens se llaman distinto (--card, --mut),
   SELECTOR SIMPLE, Y NO ES UN DETALLE (31-ago-2026): esta regla era
   `.gc.card`, que exige las DOS clases. Al incrustar el LAB en el
   dashboard, _tarjetas_del_lab quita `card` (`gc card` -> `gc`) para que no
   choque con la `.card` del shell, que es la de los picks. Asi que la regla
   viajaba pero no llegaba a aplicarse nunca: en lab.html la tarjeta tenia su
   borde y en el dashboard —donde Cesar mira a diario— salia plana, sin nada
   que separase un juego del siguiente. Con `.gc` a secas ya no depende de
   una clase que puede viajar o no.
   El margen sale de aqui y se va a `.gitem`: ver abajo. */
.gc{background:#161b22;border:1px solid #30363d;border-radius:16px;
    padding:15px 16px;overflow:visible}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
       padding-bottom:11px;border-bottom:1px solid #21262d}
.lb-hr{font-size:13px;font-weight:600;color:#c9d1d9;font-variant-numeric:tabular-nums}
/* SIN CAJA (1-sep-2026, peticion de Cesar): el estado del lineup se dice con
   el COLOR de la letra, como se hizo con el boton Detalle. La pastilla con
   fondo y borde competia con los chips de ventaja de mas abajo, que si
   necesitan caja porque alli el color significa una banda medida. */
.lb-pill{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
      white-space:nowrap}
.lb-pill.ok{color:#3fb950}
.lb-pill.pr{color:#f0c75e}
/* PF / WX / UMP: los tres multiplicadores del total, cada uno con su %.
   Caja neutra y el color SOLO en el numero, igual que en Trends: aqui el
   color dice el signo, no una banda de valor. */
.lb-ajs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lb-aj{font-size:11px;font-weight:600;color:#8b949e;background:#0d1117;
     border:1px solid #21262d;border-radius:7px;padding:3px 8px;white-space:nowrap;
     font-variant-numeric:tabular-nums}
.lb-aj i{font-style:normal;font-weight:700;font-size:10px;letter-spacing:.08em;
     text-transform:uppercase;color:#6e7681;margin-right:4px}
.lb-aj.up{color:#3fb950}
.lb-aj.dn{color:#d29922}
/* ===== EL DUELO, EN ESPEJO (2-sep-2026) =====================================
   Se espeja la ALINEACION, nunca el ORDEN de lo que hay dentro. Ver _card_full. */
.e-hd{text-align:center;font-size:11px;font-weight:400;color:#6e7681;
      padding-bottom:5px}
/* Los chips van PEGADOS a la sede: son la misma cosa --donde y en que
   condiciones se juega--. El aire que habia entre los dos pasa abajo, que es
   donde de verdad separa: entre el contexto y el duelo. */
.e-chips{display:flex;justify-content:center;margin-bottom:2px}
.e-chips .lb-ajs{justify-content:center;margin-top:0}
.e-mid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;
       margin:12px 0 11px}
.e-eq{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.e-lg{width:34px;height:34px;object-fit:contain}
.e-ab{font-weight:700;font-size:13px;color:#e6edf3;display:flex;align-items:baseline;
      gap:4px}
.e-ml,.e-win{font-size:11px;font-weight:400;color:#8b949e;
      font-variant-numeric:tabular-nums}
.e-num{text-align:center;min-width:132px}
.e-runs{display:flex;align-items:center;justify-content:center;gap:8px}
.e-runs span{font-weight:700;font-size:23px;color:#e6edf3;line-height:1;
      font-variant-numeric:tabular-nums}
.e-runs i{font-style:normal;font-weight:700;font-size:10px;line-height:1.25;
      letter-spacing:.09em;color:#6e7681}
/* La probabilidad de cada equipo va con la MISMA reja que los EXP RUNS
   --mismo gap, mismo ancho para el hueco central-- para que cada porcentaje
   caiga justo debajo de su equipo y no haya que adivinar cual es cual. */
.e-teq{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:3px}
.e-teq span{font-size:10px;font-weight:400;color:#8b949e;min-width:56px;
      text-align:center;white-space:nowrap}
.e-teq b{color:#c9d1d9;font-weight:700}
.e-teq i{display:block;width:26px}
.e-tot{font-size:12.5px;font-weight:400;color:#c9d1d9;margin-top:7px}
.e-tot b{color:#e6edf3;font-weight:700}
.e-mkt{font-size:11px;font-weight:400;color:#6e7681;margin-top:4px;
      font-variant-numeric:tabular-nums}
.e-num .lb-pill{display:inline-block;margin-top:6px}
/* EL FONDO EN REJILLA: cada fila comparte altura con la del otro equipo, asi
   que BP y OF arrancan SIEMPRE a la misma altura en los dos lados. Con dos
   columnas sueltas, una linea de mas en un lado descuadraba todo lo de abajo. */
.q-rot{text-align:center;font-size:10px;font-weight:700;letter-spacing:.1em;
      color:#6e7681;margin:13px 0 7px}
.q-g{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:start}
.q-g>*{min-width:0}
.q-g>.r{text-align:right}
.q-nom{font-weight:600;font-size:12.5px;line-height:1.35;color:#e6edf3}
.q-nom .mn{color:#6e7681;font-weight:400}
.q-val{font-size:11px;font-weight:400;line-height:1.5;color:#c9d1d9;margin-top:2px;
      font-variant-numeric:tabular-nums;white-space:nowrap}
/* La nota, DENTRO de la linea de metricas, va sin caja: solo el color. Con caja
   (padding 1px 5px + margen 5px) las tres sumaban unos 40px y forzaban el salto
   justo en la ultima. Mismo criterio que el estado del lineup y el boton. */
.q-bo{font-size:11px;font-weight:400;line-height:1.7;color:#c9d1d9;margin-top:10px;
      font-variant-numeric:tabular-nums}
.q-bo i{font-style:normal;font-weight:700;font-size:10px;letter-spacing:.08em;
      color:#6e7681;margin-right:5px}
.q-bo b{font-weight:600;color:#e6edf3}
.q-bo b.up{color:#3fb950}
.q-bo b.dn{color:#d29922}
.q-bo em{font-style:normal;font-size:11px;color:#8b949e}
.q-bo em.up{color:#3fb950}
.q-bo em.dn{color:#d29922}
.q-bo em.mut{color:#6e7681}
/* El perfil de 5 categorias, dentro del Detalle y bajo el logo de cada equipo. */
.d-pf{width:100%;border-collapse:collapse;margin:1px 0 4px;
      font-variant-numeric:tabular-nums}
.d-pf th{font-size:10px;font-weight:700;letter-spacing:.05em;color:#6e7681;
      padding:0 1px 3px;text-align:center}
.d-pf td{padding:1px;text-align:center;font-size:11px}
.lb-t4{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;
         font-size:13px;margin-top:10px}
.lb-t4 th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#6e7681;
            font-weight:700;padding:0 4px 5px;text-align:right}
.lb-t4 th.l{text-align:left}
.lb-t4 td{padding:6px 4px;text-align:right;color:#c9d1d9}
.lb-t4 tr.b td{border-bottom:1px solid #21262d}
.lb-t4 td.eq{text-align:left;font-weight:800;font-size:14px;color:#e6edf3}
.lb-t4 td.eq2{text-align:left;font-size:12.5px;color:#e6edf3;font-weight:400}
.lb-eqin{display:flex;align-items:center;gap:7px}
.lb-lgt{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.lb-t4 td.lb-win{color:#58a6ff;font-weight:600}
.mn{color:#6e7681}
/* El TOTAL cae en la columna EXP: el total ES la suma de las dos carreras
   esperadas, asi que ahi la cuenta se ve sola y no hace falta rotularlo
   "modelo" — ya esta bajo la cabecera que dice EXP. */
.lb-totr td{border-top:1px solid #30363d;padding-top:9px}
.lb-totk{text-align:left;font-size:11px;font-weight:700;letter-spacing:.07em;
        text-transform:uppercase;color:#6e7681;vertical-align:middle}
.lb-totm{text-align:left;font-size:11px;color:#8b949e;vertical-align:middle}
.lb-totm b{color:#c9d1d9;font-weight:600;font-size:13px}
.lb-totv{font-size:15px;font-weight:700;color:#e6edf3;vertical-align:middle;
        letter-spacing:-.02em}
/* El GRADO va pegado a su metrica. Antes se ponian "ERA C" y "K-BB D" como dos
   etiquetas seguidas en la misma celda y se leian juntas: la causa no era el
   espaciado sino repetir un rotulo que la cabecera de la tabla ya da. */
/* LA NOTA VA SIN CAJA (2-sep-2026, peticion de Cesar). Solo la letra en su
   color, igual que el estado del lineup y el boton Detalle. Con fondo y
   padding, tres notas seguidas en una linea sumaban ~40px, forzaban el salto
   y en movil se veian apretadas y descuadradas. La caja sobrevive en UN sitio
   --la tabla del Perfil-- porque alli cada letra va sola en su celda y sin caja
   las de color se leian mas pequenas que las grises. Ver .d-pf .gr. */
.gr{font-size:10px;font-weight:700;margin-left:4px;
    white-space:nowrap;vertical-align:middle}
.n-eds{display:flex;gap:7px;margin-top:12px}
/* Boton Detalle: solo texto azul, centrado y al final de la tarjeta, que es lo
   unico que se pulsa. Con caja y a media altura partia la tarjeta en dos. */
.detwrap{display:flex;justify-content:center;margin-top:13px;padding-top:11px;
         border-top:1px solid #21262d}
/* Es un <button> por accesibilidad (teclado y lector de pantalla), pero NO debe
   PARECER un boton: Cesar lo quiere como texto azul y punto. Un <button> trae
   borde, fondo gris y fuente propia del navegador, asi que hay que apagarlos a
   mano — si no, vuelve a salir la caja. */
.detb{display:inline-flex;align-items:center;gap:6px;padding:2px 6px;font-size:12.5px;
      font-weight:600;color:#58a6ff;cursor:pointer;
      background:none;border:0;font-family:inherit;line-height:inherit;
      -webkit-appearance:none;appearance:none}
.detb:hover{color:#79c0ff}
.detb:focus-visible{outline:2px solid #58a6ff;outline-offset:3px;border-radius:4px}
/* CONTEXTO en dos lineas, y en un solo sitio (ya no se repite en el Detalle) */
.lb-ctx{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:12px;
     padding-top:11px;border-top:1px solid #21262d}
.lb-cx{min-width:0}
.lb-cxk{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
     color:#6e7681}
.lb-cxv{font-size:12.5px;color:#c9d1d9;white-space:nowrap;overflow:hidden;
     text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.lb-cxv b{color:#e6edf3;font-weight:600}
.lb-cxv .up{color:#3fb950}
.lb-cxv .dn{color:#d29922}
/* Pie "Actualizado", debajo de todas las tarjetas */
.lab-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;
         margin-top:16px;padding:12px 14px;background:#161b22;border:1px solid #30363d;
         border-radius:14px}
.lab-pk{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
        color:#6e7681}
.lab-pn{font-size:11px;color:#8b949e;margin-top:2px}
.lab-pv{font-size:12.5px;color:#c9d1d9;text-align:right;font-variant-numeric:tabular-nums}
/* ---- Detalle en pestañas ---- */
/* DETALLE POR EQUIPO (DET 2). Dos columnas grandes: en cada una, todo lo de
   ese equipo. Sustituye a las pestañas, que obligaban a tocar cuatro veces
   para ver un juego entero. */
.d-teams{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.d-team{min-width:0}
.d-th{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;
      color:#e6edf3;padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid #30363d}
.d-lg{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.d-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.d-col{min-width:0}
.d-sub{font-size:10px;font-weight:800;color:#c9d1d9;margin-bottom:2px;white-space:nowrap;
       overflow:hidden;text-overflow:ellipsis}
.d-team>.d-bt:first-child{margin-top:0}
.d-bt{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6e7681;
      margin:6px 0 2px}
.d-ln{display:flex;justify-content:space-between;gap:5px;font-size:10px;color:#8b949e;
      padding:1.5px 0;border-bottom:1px solid #21262d;font-variant-numeric:tabular-nums}
.d-ln>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-ln>span:last-child{flex-shrink:0;color:#c9d1d9}
/* La nota que distingue los dos FIP (9-sep-2026): el de la temporada y el de
   tres anos, que es el que usa el modelo. Sin ella los dos numeros parecian el
   mismo dato mal calculado. */
.d-nt{font-style:normal;color:#6e7681;font-size:10px}
.d-pen{font-size:10px;color:#8b949e;line-height:1.4}
@media(max-width:339px){.d-cols,}
.gc-top{display:flex;justify-content:space-between;align-items:center;color:#8b949e;font-size:11px;margin-bottom:8px}
.bd{font-size:11px;font-weight:800;padding:2px 9px;border-radius:99px}
.bd-c{background:#12261a;border:1px solid #1d4428;color:#3fb950}
.bd-p{background:#2d1e05;border:1px solid #5c4a1a;color:#f0c75e}
.bd-f{background:#0d1b2a;border:1px solid #1f4068;color:#58a6ff}
.gc-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.gc-side{text-align:center;width:70px}
/* AQUI VIVIA .logo, y era CSS MUERTO que encogia logos ajenos (2-sep-2026).
   Solo la usaba _card_f5, que no se renderiza. Pero el dashboard pega este
   paquete DESPUES del suyo, y el suyo tiene .logo{42px}: los 3 logos de la
   seccion de picks salian a 34px. Los logos que el LAB si usa llevan su propia
   clase con prefijo (.e-lg, .lb-lgt, .d-lg), que no se pisa con nadie. */
.gc-ab{font-weight:800;font-size:15px;margin-top:2px}
.e-jm{font-size:11px;color:#6e7681;font-variant-numeric:tabular-nums;margin-top:1px}
.gc-ml{font-size:11px;color:#8b949e}
.gc-w{font-size:11px;color:#58a6ff;font-weight:700}
.gc-mid{text-align:center;flex:1}
.gc-pr{font-size:24px;font-weight:800;color:#e6edf3;margin:0 6px}
.gc-x{display:inline-block;font-size:10px;color:#8b949e;vertical-align:middle;line-height:1.1}
.gc-tot{font-size:12.5px;margin:4px 0 2px}
.gc-sp{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:start;font-size:11px;color:#c9d1d9;margin-top:6px}
.sp-c{min-width:0}
.sp-c.r{text-align:right}
.sp-n{font-size:12.5px;font-weight:700;color:#e6edf3;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-e{font-size:11px;color:#8b949e;font-variant-numeric:tabular-nums;margin-top:1px}
.sp-g{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.sp-c.r .sp-g{justify-content:flex-end}
.sp-vs{font-size:10px;color:#6e7681;padding-top:3px}
.mut{color:#8b949e}
.mut2{color:#6e7681;font-size:11px}
.gc-edges{display:flex;gap:8px;justify-content:center;margin-top:8px;padding-top:8px;border-top:1px solid #21262d;flex-wrap:wrap}
.bn-edges{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #21262d}
.ec{flex:1;min-width:0;text-align:center;font-size:11px;font-weight:800;padding:7px 8px;border-radius:8px;border:1px solid #30363d;background:#0d1117;color:#8b949e;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ec.on{color:#3fb950;background:rgba(63,185,80,.13);border-color:#1d4428}
.ec.peq{color:#e6edf3;background:#161b22;border-color:#30363d}
.ec.warn{color:#d29922;background:rgba(210,153,34,.10);border-color:#4a3a12}
.ec.off{color:#8b949e;background:#161b22;border-color:#30363d}
/* AQUI VIVIA .chip, y era CSS MUERTO que hacia daño (2-sep-2026). El LAB no lo
   usa --su _chip() emite class="ec"-- pero el dashboard pega este paquete y el
   de Trends uno detras de otro, y Trends SI usa .chip. Lo que sobrevivia de
   esta regla (font-weight:800, display) engordaba los chips de Trends sin que
   nada en el LAB se beneficiara. Se elimina: si algun dia el LAB necesita un
   chip, ya tiene .ec, que va con prefijo y no se pisa con nadie. */
/* Los ceros son a proposito: blindan la nota contra cualquier clase que
   comparta nombre en el futuro (fue lo que paso con .gc). */
.gr{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.02em;
    vertical-align:middle;padding:0;border:0;border-radius:0;background:none}
/* Solo el COLOR. El fondo se reserva para el Perfil (.d-pf .gr). */
/* LOS NOMBRES VIEJOS SIGUEN AQUI COMO ALIAS, y no es por pereza. Las tarjetas
   de los juegos que ya empezaron quedan CONGELADAS como HTML en
   data/lab_cards_{fecha}.json, y ese HTML se escribio con las clases viejas.
   El dia del renombrado se publicaron 78 notas congeladas que se quedaron sin
   regla de color --la caja no volvio, porque .gr ya declara sus ceros y va
   despues de .gc, pero el color si se perdio--. Los alias se pueden borrar
   cuando no queden snapshots viejos, o sea al dia siguiente. */
.gr.n-a,.gr.ga{color:#3fb950}
.gr.n-b,.gr.gb{color:#56b98a}
.gr.n-c,.gr.gc{color:#8b949e}
.gr.n-d,.gr.gd{color:#f85149}
/* EN EL PERFIL SI VA LA CAJA. Alli cada letra ocupa una celda ella sola, y sin
   fondo las de color se veian mas chicas que las grises: la caja las iguala.
   Ancho minimo para que A+ y C ocupen lo mismo y la fila quede a plomo. */
.d-pf .gr{padding:2px 0;border-radius:5px;border:1px solid transparent;
    min-width:26px;text-align:center;margin:0;font-size:10px}
.d-pf .gr.n-a,.d-pf .gr.ga{background:#12261a;border-color:#1c3b28}
.d-pf .gr.n-b,.d-pf .gr.gb{background:#16241f;border-color:#20372e}
.d-pf .gr.n-c,.d-pf .gr.gc{background:#21262d;border-color:#30363d}
.d-pf .gr.n-d,.d-pf .gr.gd{background:#2b1618;border-color:#42211f}
.lg.w2{color:#c9d1d9;background:#161b22;border-left:2px solid #d29922;padding:8px 10px;border-radius:0 7px 7px 0;margin:7px 0;line-height:1.65}
.gc-amb{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.mini{font-size:11px;color:#8b949e}
.mini.lw{color:#f0c75e;font-weight:700}
.det-btn{display:block;margin:10px auto 0;background:none;border:1px solid #30363d;border-radius:8px;color:#58a6ff;font-size:11px;font-weight:700;padding:4px 14px;cursor:pointer}
.det{margin-top:10px;border-top:1px solid #21262d;padding-top:8px}
.det-sec{margin-bottom:10px}
.det-t{font-size:11px;font-weight:800;color:#58a6ff;letter-spacing:.5px;margin-bottom:4px}
.det-sub{font-size:11px;font-weight:700;color:#e6edf3;margin:6px 0 2px}
.det-ln{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#8b949e;padding:2.5px 0;border-bottom:1px solid #1c2128}
.det-ln>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.det-ln span:last-child{text-align:right;color:#c9d1d9;flex-shrink:0}
.det-pen{font-size:11px;color:#8b949e;line-height:1.45;padding:2px 0}
.det-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* En movil TAMBIEN dos columnas, cada equipo en la suya: antes se
   colapsaban a una y habia que bajar media pantalla para comparar los
   dos lineups. Se compensa apretando la tipografia. */
@media(max-width:520px){.det-cols{gap:7px}.det-ln{font-size:11px;gap:5px;padding:2px 0}
  .det-sub{font-size:11px}.det-t{font-size:10px}.det-pen{font-size:10px}}
/* Por debajo de 340px ya no caben dos: ahi si se apilan. */
@media(max-width:339px){.det-cols{grid-template-columns:1fr}}
.det-col{min-width:0}
.leg{margin-top:12px}
.leg-acc{width:100%;text-align:left;background:#161b22;border:1px solid #30363d;border-radius:12px;padding:12px 15px;color:#e6edf3;font-weight:800;font-size:14px;cursor:pointer}
.leg-panel{border:1px solid #30363d;border-top:none;border-radius:0 0 12px 12px;margin-top:-6px;padding:6px 14px;background:#0f141a}
/* EL GLOSARIO, COMO EL DEL MERCADO (21-sep-2026, Cesar: «sin esas lineas y las letras de
   los parrafos normales no en negrita»). Sin raya bajo cada entrada ni bajo cada titulo;
   en negrita solo el termino que abre la entrada, y el resto del parrafo en letra normal. */
.glo{font-size:13px;color:#c9d1d9;line-height:1.7;margin:0 0 8px}
.glo b{font-weight:400;color:inherit}
.glo>b:first-child{font-weight:700;color:#e6edf3}
.glo-h{font-size:14px;font-weight:700;color:#e6edf3;margin:14px 0 6px}
.glo-h:first-child{margin-top:8px}
.lg:last-child{border-bottom:none}
.lg b{color:#e6edf3}

.gl{margin-top:18px;background:#161b22;border:1px solid #30363d;border-radius:12px;overflow:hidden}
.gl-s{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px;
 cursor:pointer;list-style:none;font-family:inherit;font-size:14px;font-weight:700;color:#e6edf3}
.gl-s::-webkit-details-marker{display:none}
.gl-ar{color:#8b949e;font-size:11px;transition:transform .15s}
.gl[open] .gl-ar{transform:rotate(180deg)}
.gl-p{padding:2px 15px 14px;border-top:1px solid #21262d}
.gl-h{font-size:14px;font-weight:700;line-height:1.5;color:#e6edf3;margin:14px 0 6px}
.gl-e{font-size:13px;font-weight:400;line-height:1.7;color:#c9d1d9;margin:0 0 8px}
.gl-e b{font-weight:400;color:inherit}
.gl-e>b:first-child{font-weight:700;color:#e6edf3}
.gl-e i{color:#8b949e;font-style:italic}

.pp{max-width:560px;margin:0 auto;padding-block:18px 40px;padding-left:16px;padding-right:16px}
.pp-marca{font:800 24px var(--font);letter-spacing:.5px;
  background:linear-gradient(90deg,#d4af37,#f0c75e);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;display:inline-block}
.pp-mig{font-size:11px;color:var(--faint);margin:14px 0 6px}
.pp-mig a{color:var(--mut);text-decoration:none}
.pp-h1{font:800 23px var(--font);letter-spacing:-.015em;margin:0 0 4px;line-height:1.2}
.pp-sub{font-size:13px;color:var(--mut);margin:0}
.pp-fin{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);font:700 13px var(--font)}
.pp-fin i{font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--mut)}
.pp-fin b{font-size:15px}
.pp-sec{font-size:15px;font-weight:700;letter-spacing:-.005em;margin:26px 0 8px}
.pp-p{font-size:13px;color:var(--soft);line-height:1.62;margin:0 0 12px}
.pp-mk{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.pp-mk table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.pp-mk th{font:700 10px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);text-align:right;padding:0 0 8px}
.pp-mk th:first-child{text-align:left}
.pp-mk td{padding:7px 0;border-top:1px solid var(--line2);text-align:right;
  font-variant-numeric:tabular-nums}
.pp-mk td:first-child{text-align:left;color:var(--mut);font-size:12.5px}
.pp-mov{margin-top:11px;padding-top:11px;border-top:1px solid var(--line2);
  font-size:12.5px;color:var(--soft);line-height:1.55}
.pp-mov b{color:var(--text)}
.pp-tapa{background:var(--panel);border:1px dashed var(--line);border-radius:13px;
  padding:20px 18px;text-align:center}
.pp-tapa-t{font:700 14px var(--font);margin-bottom:6px}
.pp-tapa-d{font-size:12.5px;color:var(--mut);line-height:1.6;margin:0 auto;max-width:42ch}
.pp-tapa-b{display:inline-block;margin-top:13px;background:var(--gold);color:#0d1117;
  font:800 14px var(--font);text-decoration:none;padding:11px 22px;border-radius:9px}
.pp-pie{margin-top:34px;padding-top:16px;border-top:1px solid var(--line2);
  font-size:11px;color:var(--faint);line-height:1.75}
.pp-pie a{color:var(--mut)}
.gc.card{margin:0}