/* ══ tta-menu-lateral.css — el menú de la izquierda parejo (25-sep-2026) ═══════════════
   Mathias: «desde notificaciones hasta mensajes está cool, pero todo lo de abajo está
   desalineado, feo, los iconos no son del mismo tamaño… y al expandir se queda trabado».
   Medido en Chrome (1546×767, sesión del máster):
   - contraído, el grupo Máster heredaba la sangría de 38 px del menú ancho (su regla pesa
     más que la del contraído) → iconos 19 px corridos a la derecha y de 18 px, no de 22;
   - la T, la campana y la flecha ocupaban 134 px en tres filas; la lupa era de 15 px;
   - el avatar quedaba en y=837, fuera de la pantalla (el menú contraído no se desplaza,
     para que los globos no se corten).
   Aquí, contraído: cada entrada es el mismo cuadro de 44×40 centrado, iconos de 22 px,
   una raya igual entre grupos, la flecha en el borde, la racha como insignia del avatar y
   todo cabe en la pantalla (filas de 36 o 32 px en pantallas bajas). Expandido: los de
   Máster con el mismo icono y la misma sangría que el resto, y el nombre en una línea.
   Generado por gen_css.py (misma regla para contraído en escritorio y para la tableta).
   Congelado por tests/test_menu_lateral.py. ═════════════════════════════════════════ */

@media (min-width:1181px){
.nav.ttaplg{padding:14px 0!important;gap:0!important;align-items:stretch}
.nav.ttaplg .logo{flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;padding:0 0 10px!important;margin:0!important;position:static!important}
.nav.ttaplg .logo i{width:32px;height:32px;border-radius:10px;font-size:14px}
.nav.ttaplg .logo .camp{margin:0!important;width:44px!important;height:40px!important;border-radius:12px!important}
.nav.ttaplg .logo .camp svg{width:22px;height:22px}
.nav.ttaplg .logo .camp .pt{top:8px!important;right:10px!important}
.nav.ttaplg .buscar{width:44px!important;height:40px!important;min-width:0!important;margin:0 auto 6px!important;padding:0!important;justify-content:center!important;gap:0!important;border-radius:12px!important;flex:0 0 auto!important}
.nav.ttaplg .buscar svg{width:20px!important;height:20px!important}
.nav.ttaplg .buscar:not(:hover){background:transparent!important;border-color:transparent!important}
.nav.ttaplg .nv{width:44px!important;height:40px!important;min-width:0!important;margin:0 auto!important;padding:0!important;justify-content:center!important;gap:0!important;border-radius:12px!important;flex:0 0 auto!important;font-size:inherit!important}
.nav.ttaplg .nv svg.i{width:22px!important;height:22px!important}
.nav.ttaplg .nv.on{background:rgba(217,180,74,.14)!important}
.nav.ttaplg .nv .pto{top:6px!important;right:7px!important}
.nav.ttaplg .mgrp{margin:6px 15px 0!important;padding:6px 0 0!important;border-top:1px solid var(--v16-ln1,rgba(255,255,255,.08))!important}
.nav.ttaplg .mgrp .mlist .nv{padding-left:0!important}
.nav.ttaplg .nv.ttb-perfil{margin-top:13px!important;padding-top:0!important;border-top:0!important;border-radius:12px!important;position:relative}
.nav.ttaplg .nv.ttb-perfil::before{content:"";position:absolute;left:0;right:0;top:-7px;height:1px;background:var(--v16-ln1,rgba(255,255,255,.08))}
.nav.ttaplg .v16p-racha{display:none!important}
.nav.ttaplg .me{width:44px!important;height:44px!important;min-width:0!important;margin:auto auto 0!important;padding:0!important;justify-content:center!important;gap:0!important;border-radius:12px!important;position:relative}
.nav.ttaplg .me .av{width:32px!important;height:32px!important;min-width:32px!important;font-size:12px}
.nav.ttaplg .me[data-racha]::after{content:attr(data-racha);position:absolute;right:-5px;bottom:-3px;height:17px;min-width:17px;padding:0 5px 0 15px;box-sizing:border-box;border-radius:9px;background:#20242C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D9B44A' d='M13.5 1.5s.7 2.9-1.3 5.6C10.4 9.5 7 11.1 7 15.2 7 19 9.8 22 12.9 22c3.5 0 6.1-2.8 6.1-6.6 0-4.4-3.3-6.5-3.3-9.6 0-1.9 1-3 1-3s-2.2.4-3.2 1.9z'/%3E%3C/svg%3E") no-repeat 4px 50%/10px 10px;border:1px solid rgba(217,180,74,.45);color:var(--v16-oro,#D9B44A);font-size:10px;font-weight:700;line-height:15px;text-align:center;pointer-events:none}
/* la flecha para expandir, en el borde derecho a la altura de la T */
.nav.ttaplg .plegar{position:absolute!important;top:17px!important;right:-13px!important;margin:0!important;width:26px!important;height:26px!important;border-radius:50%!important;background:var(--v16-e2,#171A20)!important;border:1px solid var(--v16-ln2,rgba(255,255,255,.14))!important;color:var(--v16-t2,#A9B0BA)!important;z-index:8}
.nav.ttaplg .plegar:hover{background:var(--v16-e4,#2A2F38)!important;color:var(--v16-t1,#F2F4F7)!important}
.nav:not(.ttaplg) .mgrp .mlist .nv{padding-left:14px!important;font-size:inherit!important;width:100%!important;box-sizing:border-box}
.nav:not(.ttaplg) .mgrp .mlist .nv svg.i{width:22px!important;height:22px!important}
.nav:not(.ttaplg) .mgrp .mhead{width:100%!important;box-sizing:border-box}
.nav:not(.ttaplg) .me>div:not(.av){min-width:0;flex:1 1 auto}
.nav:not(.ttaplg) .me b,.nav:not(.ttaplg) .me span:not(.tip){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:1181px) and (max-height:760px){
.nav.ttaplg .nv,.nav.ttaplg .buscar,.nav.ttaplg .logo .camp{height:36px!important}
.nav.ttaplg .logo{gap:4px!important;padding-bottom:8px!important}
}
@media (min-width:1181px) and (max-height:680px){
.nav.ttaplg .nv,.nav.ttaplg .buscar,.nav.ttaplg .logo .camp{height:32px!important}
.nav.ttaplg .nv svg.i{width:20px!important;height:20px!important}
.nav.ttaplg .logo i{width:28px;height:28px}
}
@media (min-width:1181px) and (max-height:900px){
.nav:not(.ttaplg){padding:12px 0!important;gap:0!important}
.nav:not(.ttaplg) .nv{height:40px!important}
.nav:not(.ttaplg) .logo{padding-bottom:10px!important}
.nav:not(.ttaplg) .buscar{margin-bottom:8px!important}
.nav:not(.ttaplg) .mgrp{margin-top:4px!important;padding-top:4px!important}
.nav:not(.ttaplg) .nv.ttb-perfil{margin-top:4px!important;padding-top:4px!important}
.nav:not(.ttaplg) .v16p-racha{margin:6px 12px 2px!important}
.nav:not(.ttaplg) .me{padding-top:8px!important;padding-bottom:8px!important}
}
@media (min-width:761px) and (max-width:1180px){
.nav{padding:14px 0!important;gap:0!important;align-items:stretch}
.nav .logo{flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;padding:0 0 10px!important;margin:0!important;position:static!important}
.nav .logo i{width:32px;height:32px;border-radius:10px;font-size:14px}
.nav .logo .camp{margin:0!important;width:44px!important;height:40px!important;border-radius:12px!important}
.nav .logo .camp svg{width:22px;height:22px}
.nav .logo .camp .pt{top:8px!important;right:10px!important}
.nav .buscar{width:44px!important;height:40px!important;min-width:0!important;margin:0 auto 6px!important;padding:0!important;justify-content:center!important;gap:0!important;border-radius:12px!important;flex:0 0 auto!important}
.nav .buscar svg{width:20px!important;height:20px!important}
.nav .buscar:not(:hover){background:transparent!important;border-color:transparent!important}
.nav .nv{width:44px!important;height:40px!important;min-width:0!important;margin:0 auto!important;padding:0!important;justify-content:center!important;gap:0!important;border-radius:12px!important;flex:0 0 auto!important;font-size:inherit!important}
.nav .nv svg.i{width:22px!important;height:22px!important}
.nav .nv.on{background:rgba(217,180,74,.14)!important}
.nav .nv .pto{top:6px!important;right:7px!important}
.nav .mgrp{margin:6px 15px 0!important;padding:6px 0 0!important;border-top:1px solid var(--v16-ln1,rgba(255,255,255,.08))!important}
.nav .mgrp .mlist .nv{padding-left:0!important}
.nav .nv.ttb-perfil{margin-top:13px!important;padding-top:0!important;border-top:0!important;border-radius:12px!important;position:relative}
.nav .nv.ttb-perfil::before{content:"";position:absolute;left:0;right:0;top:-7px;height:1px;background:var(--v16-ln1,rgba(255,255,255,.08))}
.nav .v16p-racha{display:none!important}
.nav .me{width:44px!important;height:44px!important;min-width:0!important;margin:auto auto 0!important;padding:0!important;justify-content:center!important;gap:0!important;border-radius:12px!important;position:relative}
.nav .me .av{width:32px!important;height:32px!important;min-width:32px!important;font-size:12px}
.nav .me[data-racha]::after{content:attr(data-racha);position:absolute;right:-5px;bottom:-3px;height:17px;min-width:17px;padding:0 5px 0 15px;box-sizing:border-box;border-radius:9px;background:#20242C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D9B44A' d='M13.5 1.5s.7 2.9-1.3 5.6C10.4 9.5 7 11.1 7 15.2 7 19 9.8 22 12.9 22c3.5 0 6.1-2.8 6.1-6.6 0-4.4-3.3-6.5-3.3-9.6 0-1.9 1-3 1-3s-2.2.4-3.2 1.9z'/%3E%3C/svg%3E") no-repeat 4px 50%/10px 10px;border:1px solid rgba(217,180,74,.45);color:var(--v16-oro,#D9B44A);font-size:10px;font-weight:700;line-height:15px;text-align:center;pointer-events:none}
}
@media (min-width:761px) and (max-width:1180px) and (max-height:760px){
.nav .nv,.nav .buscar,.nav .logo .camp{height:36px!important}
.nav .logo{gap:4px!important;padding-bottom:8px!important}
}
@media (min-width:761px) and (max-width:1180px) and (max-height:680px){
.nav .nv,.nav .buscar,.nav .logo .camp{height:32px!important}
.nav .nv svg.i{width:20px!important;height:20px!important}
.nav .logo i{width:28px;height:28px}
}
/* ══ Grupos plegables (29-sep-2026): Trading · Herramientas · Gente, como Máster ══════════
   Mathias: «agrupa por herramientas (gráficos, fundamentales, estacionales, COT) y como
   funciones el diario, el calendario y las señales… el desplegar y cerrar de Máster se ve
   súper bien». tta-menu-lateral.js pone un encabezado .ttg-h por grupo y marca cada botón
   con data-ttg; aquí van el orden y el mostrar/ocultar. Ningún botón cambia de padre (dos
   capas meten filas con insertBefore sobre Calendario y fallarían).
   El orden de tta-orden-menu.css (26-sep) se reescribe con más peso (.app > .nav > …):
   Comunidad · En vivo · Aula · Mensajes | Trading | Herramientas | Gente | Máster | Yo. */
.app > .nav > *{order:15}
.app > .nav > .logo{order:0}
.app > .nav > .buscar{order:1}
.app > .nav > .nv[data-s="inicio"]{order:10}
.app > .nav > .nv.nv-live{order:11}
.app > .nav > .nv[data-s="aula"]{order:12}
.app > .nav > .nv[data-s="ruta"]{order:13}
.app > .nav > .nv[data-s="mensajes"]{order:14}
.app > .nav > .ttg-h[data-g="trading"]{order:20}
.app > .nav > .nv[data-s="senales"]{order:21}
.app > .nav > .nv[data-s="diario"]{order:22}
.app > .nav > .nv[data-s="calendario"]{order:23}
/* Batallas suelta entre Trading y Herramientas (7-oct-2026, Mathias: «saca Batallas de Gente y ponla entre
   Trading y Herramientas»); pesa más que el order:41 que pone tta-batallas-nav.js */
.app > .nav > .nv[data-s="batallas"]{order:25}
.app > .nav > .ttg-h[data-g="herr"]{order:30}
.app > .nav > .nv[data-s="graficos"]{order:31}
.app > .nav > .nv[data-s="riesgo"]{order:31}
.app > .nav > .nv[data-s="maker"]{order:31}
.app > .nav > .nv[data-s="fundamentales"]{order:32}
.app > .nav > .nv[data-s="estacional"]{order:33}
.app > .nav > .nv[data-s="cot"]{order:34}
.app > .nav > .ttg-h[data-g="gente"]{order:40}
.app > .nav > .nv[data-s="ranking"]{order:24}
.app > .nav > .nv[data-s="miembros"]{order:42}
.app > .nav > .mgrp{order:50}
.app > .nav > .ttb-perfil{order:60}
.app > .nav > .ttb-ajustes{order:61}
.app > .nav > .v16p-racha{order:70}
.app > .nav > .me{order:71}
/* las rayas por grupo de tta-orden-menu.css: ahora las pone el encabezado */
.app > .nav > .nv[data-ttg]{margin-top:0!important}
.app > .nav > .nv[data-ttg]::before{display:none!important}
.app > .nav > .ttg-h{cursor:pointer;position:relative}
.app > .nav > .ttg-h[hidden]{display:none!important}
.app > .nav > .ttg-h[data-g="trading"]{margin-top:9px!important}
.app > .nav > .ttg-h[data-g="trading"]::before{content:"";position:absolute;left:10px;right:10px;top:-5px;height:1px;background:var(--v16-ln1,rgba(255,255,255,.08));pointer-events:none}
.app > .nav > .ttg-h .fl{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.app > .nav > .ttg-h[aria-expanded="true"] .fl{transform:rotate(90deg)}
/* el grupo cerrado lleva en dorado el lugar donde estás */
.app > .nav > .ttg-h.ttg-on{color:var(--ac2,#F0D26B)}
.app > .nav > .ttg-h.ttg-on svg.i{stroke:var(--ac2,#F0D26B)}
@media (min-width:1181px){
  .app > .nav:not(.ttaplg):not(.ttg-ab-trading) > .nv[data-ttg="trading"],
  .app > .nav:not(.ttaplg):not(.ttg-ab-herr) > .nv[data-ttg="herr"],
  .app > .nav:not(.ttaplg):not(.ttg-ab-gente) > .nv[data-ttg="gente"]{display:none!important}
  .app > .nav.ttaplg > .nv[data-ttg]:not(.ttg-f){display:none!important}
}
@media (min-width:761px) and (max-width:1180px){
  .app > .nav > .nv[data-ttg]:not(.ttg-f){display:none!important}
}
/* ── angosto (contraído o tableta): el encabezado es un cuadro más, con una flechita, y abre
      una lista flotante a la derecha con icono y nombre ── */
.app > .nav.ttaplg > .ttg-h[data-g="trading"]::before{left:0;right:0}
.app > .nav.ttaplg > .ttg-h::after{content:"";position:absolute;right:6px;bottom:8px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.55}
.app > .nav.ttaplg > .ttg-h.ttg-vuela{background:var(--v16-e3,#1F232A)!important;color:var(--v16-t1,#F2F4F7)}
.app > .nav.ttaplg > .ttg-h.ttg-vuela .tip{display:none!important}
.app > .nav > .nv.ttg-f{position:absolute!important;left:calc(100% + 10px)!important;right:auto!important;width:228px!important;height:44px!important;margin:0!important;padding:0 16px!important;gap:14px!important;justify-content:flex-start!important;display:flex!important;background:#171A20!important;border:1px solid var(--v16-ln2,rgba(255,255,255,.14))!important;border-top-color:transparent!important;border-radius:0!important;z-index:70;color:var(--v16-t2,#A9B0BA);box-shadow:0 18px 40px -18px rgba(0,0,0,.9);font-size:15px!important;white-space:nowrap}
.app > .nav > .nv.ttg-f.ttg-f1{border-top-color:var(--v16-ln2,rgba(255,255,255,.14))!important;border-top-left-radius:12px!important;border-top-right-radius:12px!important}
.app > .nav > .nv.ttg-f.ttg-fn{border-bottom-left-radius:12px!important;border-bottom-right-radius:12px!important}
.app > .nav > .nv.ttg-f:hover{background:var(--v16-e3,#1F232A)!important;color:var(--v16-t1,#F2F4F7)}
.app > .nav > .nv.ttg-f.on{color:var(--ac2,#F0D26B)!important;background:#1d1b14!important}
.app > .nav > .nv.ttg-f > span:not(.tip):not(.n):not(.pt):not(.pto){display:inline!important}
.app > .nav > .nv.ttg-f .tip,.app > .nav > .nv.ttg-f .pto{display:none!important}
.app > .nav > .nv.ttg-f svg.i{width:20px!important;height:20px!important}
@media (min-width:761px) and (max-width:1180px){
  .app > .nav > .ttg-h::after{content:"";position:absolute;right:6px;bottom:8px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.55}
  .app > .nav > .ttg-h.ttg-vuela{background:var(--v16-e3,#1F232A)!important}
  .app > .nav > .ttg-h[data-g="trading"]::before{left:0;right:0}
}

/* ══ Celular (1-oct-2026, §8G) ══════════════════════════════════════════════════════════
   1 · La hoja «Menú» con los mismos grupos que el menú de la computadora: títulos de ancho
       completo (tta-menu-lateral.js) y fichas ordenadas con order. */
.grid2.ttg-hoja > .ttg-cap{grid-column:1/-1;margin:10px 2px 0;padding:0}
.grid2.ttg-hoja > .ttg-cap[hidden]{display:none!important}
.grid2.ttg-hoja > .opc b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 1b · Avisos: icono de línea por tipo (tta-menu-lateral.js), con el color de lo que cuenta */
#sheet-in .nt2 .k.tta-nt-ico{display:grid;place-items:center}
#sheet-in .nt2 .k.tta-nt-ico .material-symbols-outlined{font-size:20px;line-height:1}
#sheet-in .nt2 .k.tta-nt-sube,#sheet-in .nt2 .k.tta-nt-sube .material-symbols-outlined{color:var(--up,#34C38F)!important}
#sheet-in .nt2 .k.tta-nt-baja,#sheet-in .nt2 .k.tta-nt-baja .material-symbols-outlined{color:var(--dn,#F2555A)!important}
#sheet-in .nt2 .k.tta-nt-oro,#sheet-in .nt2 .k.tta-nt-oro .material-symbols-outlined{color:var(--ac2,#F0D26B)!important}
/* 3 · De página a página, bonito y fluido (Mathias, 1-oct): transición del navegador entre
       páginas (Chrome 126+, Safari 18.2+; el resto cambia como siempre). La página vieja se queda
       hasta que la nueva pinta y entra con un fundido corto; menú, barra de arriba y barra de abajo
       quietos. Sin animación si el sistema pide menos movimiento; en equipos lentos la salta el JS. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
::view-transition-old(root){animation-duration:.16s;animation-timing-function:ease-out}
::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease-out}
.app > .nav{view-transition-name:ttm-nav}
.mtop{view-transition-name:ttm-top}
.mbar{view-transition-name:ttm-bar}
::view-transition-group(ttm-nav),::view-transition-group(ttm-top),::view-transition-group(ttm-bar),
::view-transition-old(ttm-nav),::view-transition-new(ttm-nav),::view-transition-old(ttm-top),::view-transition-new(ttm-top),
::view-transition-old(ttm-bar),::view-transition-new(ttm-bar){animation-duration:0s}
/* barra dorada de «ya va»: aparece al tocar y avanza mientras llega la página */
#ttm-progreso{position:fixed;left:0;top:0;width:100%;height:2px;z-index:2147483000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,#B5943A,#F0D26B);box-shadow:0 0 8px rgba(240,210,107,.55)}
#ttm-progreso.on{opacity:1;animation:ttmProg 9s cubic-bezier(.08,.75,.2,1) forwards}
@keyframes ttmProg{0%{transform:scaleX(0)}12%{transform:scaleX(.38)}100%{transform:scaleX(.94)}}
@media (prefers-reduced-motion:reduce){#ttm-progreso.on{animation:none;transform:scaleX(.6)}}
/* 2 · El iPhone hace zoom al tocar un campo con letra de menos de 16 px (tta-one.css los deja en
       13-14 px en el celular): en pantallas táctiles todos los campos van a 16 px. */
@media (max-width:768px) and (pointer:coarse){
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  html body select,html body textarea,html body .form-control{font-size:16px!important}
}
/* 4 · Barra de abajo del celular: Inicio · Aula · Gráficos · Ranking · Menú (Mathias, 1-oct:
       «mensajes y avisos ya están en la barra de arriba, no seas redundante»). Mensajes fuera desde
       el primer pintado; Gráficos lo pone tta-menu-lateral.js y se va si su candado la oculta. */
.mbar > [data-s="mensajes"]{display:none!important}
.mbar > .ttm-graf.ttm-oculto{display:none!important}
.mbar > .ttm-graf.ttm-on{color:var(--tx)}
.mbar > .ttm-graf.ttm-on svg{stroke-width:2.3;stroke:var(--ac2)}
/* 8-oct (Mathias): Inicio · Aula · Gráficos · Batallas · Menú. Ranking sale de la barra (sigue en el menú lateral y en
   la hoja «Menú»); si el candado oculta Batallas, Ranking vuelve solo. Batallas con el icono dorado, como en el menú. */
.mbar > .ttm-bat.ttm-oculto{display:none!important}
.mbar:has(> .ttm-bat:not(.ttm-oculto):not([style*="none"])) > [data-s="ranking"]{display:none!important}
.mbar > .ttm-bat svg{stroke:var(--ac2,#F0D26B)}
.mbar > .ttm-bat.ttm-on{color:var(--tx)}
.mbar > .ttm-bat.ttm-on svg{stroke-width:2.3}
/* 5 · Hojas de abajo (Menú, Avisos…) suaves al subir y al bajar: el fondo se oscurece con un
       fundido (antes aparecía de golpe) y la hoja frena al final; con el dedo se baja (JS). */
#scrim.scrim{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s ease,visibility 0s linear .26s}
#scrim.scrim.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .26s ease}
@media (max-width:1023px){
  #sheet.sheet{transition:transform .26s cubic-bezier(.22,1,.36,1);overscroll-behavior:contain}   /* 8-oct: .34 → .26, más ágil */
  #sheet.sheet:not(.on){transition-duration:.2s}
  html.ttm-lento #sheet.sheet{transition-duration:.14s}
}
/* 6 · Cambiar de sección dentro de la comunidad (Inicio ↔ Aula ↔ Ranking): entra con un fundido
       corto en vez de aparecer de golpe. Solo opacidad (un transform atraparía los fixed). */
main.main > .ttm-entra{animation:ttmEntra .2s ease-out}
@keyframes ttmEntra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  main.main > .ttm-entra{animation:none}
  #sheet.sheet,#scrim.scrim{transition-duration:.01s!important}
}
/* 7 · Toques al instante en pantallas táctiles: sin espera de doble toque ni destello gris, y
       los botones se apagan un poco al apretarlos. :where no suma peso: las reglas propias de
       cada pantalla (gráficos con touch-action:none, etc.) siguen mandando. */
@media (pointer:coarse){
  :where(a,button,[role="button"],summary,label,.opc,.nv,.chip){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  :where(.btn,.b,.chip,.opc):active{opacity:.78}
}
/* ══ Grupos que se leen como grupos (6-oct-2026, Mathias con capturas: «con los grupos abiertos
   ni se notan esas palabras, se esconden; creo que son los colores»). Abiertos, Trading ·
   Herramientas · Gente eran idénticos a sus botones (mismo blanco, 15 px, mismo icono a 38 px).
   Ahora, solo con el menú ancho: el encabezado en blanco y negrita; lo de adentro con sangría,
   una raya fina a la izquierda, icono de 20 px, letra de 14 px y gris hasta que lo apuntas o es
   la pantalla actual (Batallas y Fundamentales venían a 16 px: todos iguales). Se edita aquí
   directo: el generador gen_css.py ya no existe. ══ */
@media (min-width:1181px){
  .app > .nav:not(.ttaplg) > .ttg-h:not(.ttg-on){color:var(--v16-t1,#F2F4F7)!important}
  .app > .nav:not(.ttaplg) > .ttg-h > span:not(.tip):not(.n):not(.pto){font-weight:600!important}
  .app > .nav:not(.ttaplg) > .nv[data-ttg]:not(.ttg-f){margin-left:25px!important;width:calc(100% - 25px)!important;padding-left:12px!important;box-sizing:border-box!important;border-left:1px solid var(--v16-ln2,rgba(255,255,255,.14))!important;border-radius:0 10px 10px 0!important}
  .app > .nav:not(.ttaplg) > .nv[data-ttg]:not(.ttg-f) svg.i{width:20px!important;height:20px!important}
  .app > .nav:not(.ttaplg) > .nv[data-ttg]:not(.ttg-f) > span:not(.tip):not(.n):not(.pto){font-size:14px!important}
  .app > .nav:not(.ttaplg) > .nv[data-ttg]:not(.ttg-f):not(.on):not(:hover){color:var(--v16-t2,#A9B0BA)!important}
  .app > .nav:not(.ttaplg) > .nv[data-ttg]:not(.ttg-f):not(.on):not(:hover) svg.i{opacity:.85}
  /* Máster, igual que los otros tres */
  .app > .nav:not(.ttaplg) .mgrp .mhead > span:not(.tip):not(.n):not(.pto){font-weight:600!important}
  .app > .nav:not(.ttaplg) .mgrp .mhead{color:var(--v16-t1,#F2F4F7)!important}
  .app > .nav:not(.ttaplg) .mgrp .mlist .nv{margin-left:25px!important;width:calc(100% - 25px)!important;padding-left:12px!important;box-sizing:border-box!important;border-left:1px solid var(--v16-ln2,rgba(255,255,255,.14))!important;border-radius:0 10px 10px 0!important}
  .app > .nav:not(.ttaplg) .mgrp .mlist .nv svg.i{width:20px!important;height:20px!important}
  .app > .nav:not(.ttaplg) .mgrp .mlist .nv > span:not(.tip):not(.n):not(.pto){font-size:14px!important}
  .app > .nav:not(.ttaplg) .mgrp .mlist .nv:not(.on):not(:hover){color:var(--v16-t2,#A9B0BA)!important}
}
/* ══ Lista flotante del menú contraído (6-oct-2026, Mathias con captura en Gráficos FOI: «se ve
   rara la jerarquía y cómo se encima»). 1) El menú estaba en z-index 5 y la leyenda y la barra
   del gráfico en 6 y 36: la lista (z 70, pero DENTRO del menú) quedaba debajo y se colaba el
   «Interés abierto». Contraído o en tableta, el menú va encima del contenido. 2) La lista lleva
   arriba el nombre de su grupo, como una tarjeta (tta-menu-lateral.js pone .ttg-ft). ══ */
@media (min-width:1181px){ .app > .nav.ttaplg{z-index:45!important} }
@media (min-width:761px) and (max-width:1180px){ .app > .nav{z-index:45!important} }
.app > .nav > .ttg-ft{position:absolute!important;left:calc(100% + 10px)!important;width:228px!important;height:34px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;margin:0!important;padding:0 16px!important;background:#171A20!important;border:1px solid var(--v16-ln2,rgba(255,255,255,.14))!important;border-bottom:0!important;border-radius:12px 12px 0 0!important;z-index:70;font-size:12px!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;color:var(--v16-t3,#7C8491)!important;pointer-events:none;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
.app > .nav > .ttg-ft[hidden]{display:none!important}
.app > .nav > .nv.ttg-f.ttg-f1{border-top-left-radius:0!important;border-top-right-radius:0!important;border-top-color:rgba(255,255,255,.06)!important}
/* ══ Sin franjas negras al bajar (6-oct-2026, Mathias con captura en Ranking: «tiene que ser adaptativo
   y no tener esos espacios en negro, y no es la única sección»). tta-demo-shell.css deja el menú
   fijo (sticky, 100vh) pero tta-v16-barra.css lo pasa a position:relative: al bajar, el menú se iba
   con la página y debajo quedaba negro (medido: hasta 415 px en Fundamentales; también Señales,
   Ranking, Batallas…). Además el contenido guardaba 60 px abajo en la computadora (son para la
   barra del celular). Ahora el menú se queda a toda la altura y abajo quedan 24 px, como arriba.
   El botón de contraer sigue en su sitio: sticky también le sirve de referencia. ══ */
@media (min-width:761px){
  body.v16s .app > .nav{position:sticky!important;top:0!important;height:100vh!important;height:100dvh!important;align-self:start!important}
  body.v16s .app > .main{padding-bottom:24px!important}
}
/* ══ Batallas llama la atención (7-oct-2026, Mathias: «haz que llame un poquito más la atención lo de
   Batallas»). Sin palabras de más: icono dorado siempre (no solo en su página), nombre en negrita y
   un brillo dorado que cruza el botón cada 7 s (solo mueve un fondo en ::after: no cambia tamaños ni
   recorta el globo del menú contraído). Sin brillo si el sistema pide menos movimiento o el equipo es
   lento (html.ttm-lento). En la hoja del celular, la ficha con borde y fondo dorados. ══ */
.app > .nav > .nv[data-s="batallas"] svg.i{color:var(--ac2,#F0D26B)!important;stroke:var(--ac2,#F0D26B)!important;opacity:1!important}
.app > .nav > .nv[data-s="batallas"]:not(.on){color:var(--v16-t1,#F2F4F7)!important}
.app > .nav > .nv[data-s="batallas"] > span:not(.tip):not(.n):not(.pto){font-weight:600!important}
.app > .nav > .nv[data-s="batallas"]{position:relative}
.app > .nav > .nv[data-s="batallas"]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 0 40%,rgba(240,210,107,.22) 50%,transparent 60% 100%);background-size:250% 100%;background-position:120% 0;animation:ttmBrillo 7s ease-in-out 1.5s infinite}
@keyframes ttmBrillo{0%,78%{background-position:120% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.app > .nav > .nv[data-s="batallas"]::after{animation:none;display:none}}
html.ttm-lento .app > .nav > .nv[data-s="batallas"]::after{animation:none;display:none}
.sheet .opc.btnav{border-color:rgba(240,210,107,.45)!important;background:linear-gradient(180deg,rgba(240,210,107,.10),rgba(240,210,107,.03))!important}
.sheet .opc.btnav .ic{color:var(--ac2,#F0D26B)!important;background:rgba(240,210,107,.14)!important}
/* ══ Toque al instante (7-oct-2026, Mathias desde el móvil: «se siente muy trabado»): el botón tocado se
   pinta como activo en el mismo instante (tta-menu-lateral.js pone .ttm-tocado) y el activo anterior se
   apaga; antes había que esperar a que llegara la página nueva para ver que el toque sirvió. ══ */
.mbar > .ttm-tocado{color:var(--tx,#F2F4F7)!important}
.mbar > .ttm-tocado svg{stroke-width:2.3!important;stroke:var(--ac2,#F0D26B)!important}
.mbar:has(> .ttm-tocado) > .on:not(.ttm-tocado),.mbar:has(> .ttm-tocado) > .ttm-on:not(.ttm-tocado){color:var(--t2,#A9B0BA)!important}
.mbar:has(> .ttm-tocado) > .on:not(.ttm-tocado) svg,.mbar:has(> .ttm-tocado) > .ttm-on:not(.ttm-tocado) svg{stroke-width:1.5!important;stroke:currentColor!important}
.app > .nav > .nv.ttm-tocado:not(.on){background:var(--v16-e3,#1F232A)!important;color:var(--v16-t1,#F2F4F7)!important}
/* el menú nunca se desliza de lado (15-oct): nada escondido lo ensancha */
.app > .nav:not(.ttaplg){overflow-x:hidden!important;overscroll-behavior-x:none}