/* ===== Chess Brut — verde ajedrez · tinta sobre papel · sin sombras ===== */
  :root{
    --bg:#f7f5f0; --surface:#ffffff; --panel:#ffffff; --panel2:#f0ede6; --chip:#e8e4da;
    --ink:#12120f; --ink2:#45433c; --muted:#78756c; --faint:#b0ada2;
    --line:#e0dcd2; --line2:#d0ccc0;
    --accent:#769656; --accent2:#5c7a3d; --accent-soft:#edf3e5; --evalbar-black:#35461f;
    --cc:#4e7837; --lc:#3692e7;
    --accent-green:var(--accent); --accent-green-soft:var(--accent-soft);  /* alias backward-compat */
    --cal1:#dce8cf; --cal2:#a3c482; --cal3:var(--accent);
    --piece-w:#fcfbf7; --piece-w-edge:#b9b3a6; --piece-b:#1a1a1a; --piece-b-edge:#000;
    --radius:2px; --radius-sm:3px; --bpanel-w:440px; --bpanel-w-exp:calc(100vw - 400px);
    --ok:#2d8a4e; --ok-bg:#e3f3ea; --bad:#c73a3a; --bad-bg:#fbe7e7; --warn:#b5740b; --warn-bg:#f9eed7;
    --on-accent:#fff;
    --font-display:'Jost',sans-serif; --font-body:'Jost',sans-serif;
    --shadow:none; --shadow-card-primary:none;
    /* === Escala tipográfica === */
    --fs-hero:32px; --fs-display:25px; --fs-xl:22px; --fs-lg:17px;
    --fs-md:15px; --fs-sm:13.5px; --fs-xs:12px; --fs-2xs:11px;
  }
  /* Tema oscuro forzado manualmente (botón System/Dark/Light) */
  html[data-theme="dark"]{
      --bg:#11110e; --surface:#1a1a16; --panel:#1a1a16; --panel2:#242420; --chip:#2c2c28;
      --ink:#eeede6; --ink2:#c4c2b8; --muted:#8b8980; --faint:#5c5a52;
      --line:#2c2c28; --line2:#3c3c38;
      --cc:#6da050; --lc:#5aaaf5; --accent-soft:#212a1c;
      --accent-green:var(--accent); --accent-green-soft:var(--accent-soft);
      --cal1:#28381a; --cal2:#3d5626; --cal3:var(--accent);
      --ok:#37c46f; --ok-bg:#13301f; --bad:#f06363; --bad-bg:#321616; --warn:#e0a23c; --warn-bg:#322411;
      --on-accent:#fff;
      --shadow:none; --shadow-card-primary:none;
  }
  /* Tema automático: el media query solo manda si NO hay override manual */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]):not([data-theme="dark"]){
      --bg:#11110e; --surface:#1a1a16; --panel:#1a1a16; --panel2:#242420; --chip:#2c2c28;
      --ink:#eeede6; --ink2:#c4c2b8; --muted:#8b8980; --faint:#5c5a52;
      --line:#2c2c28; --line2:#3c3c38;
      --cc:#6da050; --lc:#5aaaf5; --accent-soft:#212a1c;
      --accent-green:var(--accent); --accent-green-soft:var(--accent-soft);
      --cal1:#28381a; --cal2:#3d5626; --cal3:var(--accent);
      --ok:#37c46f; --ok-bg:#13301f; --bad:#f06363; --bad-bg:#321616; --warn:#e0a23c; --warn-bg:#322411;
      --on-accent:#fff;
      --shadow:none; --shadow-card-primary:none;
    }
  }
  *{box-sizing:border-box} html,body{margin:0}
  body{font-family:var(--font-body);
    background:var(--bg);color:var(--ink);font-size:var(--fs-md);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px 80px}
  a{color:inherit}
  .top{border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);z-index:50}
  .top .wrap{display:flex;align-items:center;gap:14px;padding:14px 22px}
  /* ===== Side panel del tablero (embed Lichess) ===== */
  .bpanel{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:var(--bpanel-w);max-width:92vw;
    background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 28px rgba(0,0,0,.12);
    transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:110;
    display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .bpanel.open{transform:translateX(0)}
  .bpanel-head{display:flex;align-items:center;gap:10px;padding:16px 18px 8px}
  .bpanel-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);letter-spacing:-.02em;flex:1}
  .bpanel-x{background:var(--chip);border:none;color:var(--ink2);width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-md);transition:background .15s}
  .bpanel-x:hover{background:var(--line2)}
  .bpanel-sub{padding:0 18px 6px;color:var(--muted);font-size:var(--fs-xs);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .bpanel-body{flex:0 0 auto;padding:0 18px;display:flex;flex-direction:column;gap:10px}
  .bpanel-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);
    font-weight:600;font-size:var(--fs-md);padding:11px 14px;border-radius:var(--radius);text-decoration:none;transition:background .15s}
  .bpanel-cta:hover{background:var(--accent2)}
  .bpanel-cta span{font-size:var(--fs-xs);opacity:.85}
  .bpanel-foot{padding:12px 18px 18px;display:flex;gap:8px;flex-wrap:wrap}
  .bscrim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .28s;z-index:108}
  .bscrim.show{opacity:1;pointer-events:auto}
  /* En desktop el panel EMPUJA el contenido (no lo tapa) */
  @media(min-width:861px){
    body.bpanel-open .top .wrap,body.bpanel-open>.wrap{margin-right:var(--bpanel-w);transition:margin-right .28s cubic-bezier(.4,0,.2,1)}
    body.bpanel-open .bscrim{display:none}
    /* el modal de partida convive: se corre a la izquierda para no quedar tapado por el panel */
    body.bpanel-open .modal-bg{padding-right:calc(var(--bpanel-w) + 16px);transition:padding-right .28s cubic-bezier(.4,0,.2,1)}
  }
  /* En mobile es overlay full-screen, no empuja */
  @media(max-width:860px){
    .bpanel{width:100vw;max-width:100vw}
    body.bpanel-open{overflow:hidden}
    .bpanel-foot{padding-bottom:32px} /* respiro extra bajo la barra del navegador iOS */
    /* Wave 16 Fase 4: en mobile el panel es overlay full-screen (z-index 110) — un modal abierto
       DESDE ADENTRO del panel (ver boardAskCoachAboutLine, render-board.js) quedaría tapado por
       él si no subimos su z-index acá. En desktop no hace falta: el modal se corre con
       padding-right (regla de arriba) y nunca queda debajo del panel. */
    body.bpanel-open .modal-bg{z-index:111}
  }
  /* ===== Modo expandido del tablero (solo desktop) ===== */
  .bpanel-xpand{background:var(--chip);border:none;color:var(--ink2);width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-md);transition:background .15s;margin-right:2px;flex:none}
  .bpanel-xpand:hover{background:var(--line2)}
  .bpanel.expanded{width:var(--bpanel-w-exp);max-width:var(--bpanel-w-exp);overflow:hidden}
  body.bpanel-open.bpanel-expanded .top .wrap,body.bpanel-open.bpanel-expanded>.wrap{margin-right:var(--bpanel-w-exp)}
  body.bpanel-open.bpanel-expanded .modal-bg{padding-right:calc(var(--bpanel-w-exp) + 16px)}
  .bpanel.expanded .bpanel-body{flex:1;min-height:0;flex-direction:row;gap:14px;overflow:hidden}
  .bpanel.expanded .bpanel-body.explore-body{flex-direction:column}
  .bpanel.expanded .bpanel-head{padding:10px 18px 6px}
  .bpanel.expanded .bpanel-head .bpanel-title{font-size:var(--fs-md)}
  .bpanel.expanded .bpanel-sub{display:none}
  .bpanel.expanded .bpanel-body{padding:0 14px 6px}
  /* Wave 17 F1 fix (bug de Ignacio en vivo): con poco alto de ventana el tablero de 650px
     empujaba la nav fuera de .bpanel-body (overflow:hidden ahí) y quedaba inalcanzable. Scroll
     tapaba el tablero (peor UX) -- la solución correcta es que el tablero CEDA alto (mantiene
     1:1, 650px sigue siendo el TECHO, no un tamaño fijo) y dé lugar siempre a la nav debajo, con
     un poco de padding. min-height:0 en cada nivel es lo que permite que el flex-item se encoja
     por debajo de su tamaño de contenido (si no, el aspect-ratio nunca cede). */
  .bpanel.expanded .board-wrap-col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:0}
  .bpanel.expanded .board-wrap-col .board-wrap{flex:1;min-height:0}
  .bpanel.expanded .board-wrap-col .board-row{flex:1;min-height:0;padding-bottom:6px}
  /* clave del fix: width:auto (no 100%/flex-grow) + flex:0 0 auto deja que el ancho se DERIVE
     del alto disponible vía aspect-ratio:1 (ya definido en .chessboard base) -- así el 650px de
     arriba sigue siendo el TECHO, pero si falta alto el cuadrado encoge parejo en vez de
     deformarse (probado: con panel de 560px de alto pasa de 650x650 a ~365x365, sigue 1:1). */
  .bpanel.expanded .board-wrap-col .chessboard{flex:0 0 auto;width:auto}
  .bpanel.expanded .board-wrap{max-width:none;gap:4px}
  /* Antes: max-width:650px. En expandido el tablero se dimensiona por el ALTO (aspect-ratio 1/1
     sobre .board-row{flex:1}); con ventanas altas el alto pedía ~749px de ancho y este tope
     recortaba la CAJA a 649 mientras el grid ya se había resuelto contra 749 -> 8 columnas de
     93.7px dentro de 649, 100px afuera y la columna h cortada.
     Y encima estrangulaba de más: .board-wrap tiene margin:0 auto en su regla base, y un margen
     auto en un flex de COLUMNA desactiva el stretch -> la caja se encogía al contenido
     (38 de barra de eval + 4 de gap + 650 de tablero = los 692 que medía) desperdiciando los
     1077px de la columna. Con 100% el alto manda, el ancho lo sigue, y el tope real pasa a ser
     el ancho de la columna. Medido: antes 649x749 con 100px de desborde; ahora 749x749, 0. */
  .bpanel.expanded .board-wrap .chessboard{max-width:100%}
  .bpanel.expanded .board-side-col{flex:0 0 280px;min-width:0;display:flex;flex-direction:column}
  .bpanel.expanded .board-side-col .board-cta-wrap{border-bottom:1px solid var(--line);padding:0 0 6px;margin-bottom:0;flex-shrink:0}
  .bpanel.expanded .board-side-col .explore-cta{font-size:var(--fs-xs);padding:6px 8px;width:100%;margin:0;max-width:none}
  .bpanel.expanded .board-side-col .board-cta-wrap .explore-banner{margin:0 0 6px}
  .bpanel.expanded .board-side-col .movelist{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;max-width:none;border:none;border-radius:0;overflow:hidden}
  .bpanel.expanded .board-side-col .movelist .ml-scroll{flex:1;min-height:0;overflow-y:auto}
  /* Wave 17 F1 (D1): la nav se mudó del costado (motor/movelist) a la columna del tablero.
     board-wrap-col estira a sus hijos (align-items:stretch por defecto) pero el tablero real
     queda centrado y capado a 650px (línea de arriba) -- sin este max-width+align-self la nav
     ocupa TODO el ancho de la columna y los botones quedan lejos del tablero que tienen encima.
     692px = evalbar(32) + gap(10) + chessboard(650), medido en el propio .board-wrap. */
  .bpanel.expanded .board-wrap-col .board-nav{margin:8px 0 0;max-width:692px;align-self:center}
  .bpanel.expanded .bpanel-body.explore-body .board-nav{margin:4px 0 0}
  .bpanel.expanded .bpanel-body.explore-body .bnav{min-width:28px;height:28px}
  .bpanel.expanded .board-side-col .explore-line{flex:1;min-height:0;overflow-y:auto;margin:6px 0;display:flex;flex-direction:column;gap:2px;justify-content:flex-start}
  .bpanel.expanded .board-side-col .explore-line .ml-mv{padding:3px 8px;font-size:var(--fs-xs);border:none;border-radius:var(--radius);text-align:left;cursor:pointer;background:var(--bg);color:var(--ink);transition:background .12s;display:block;width:100%}
  .bpanel.expanded .board-side-col .explore-line .ml-mv:hover{background:var(--chip)}
  .bpanel.expanded .board-side-col .explore-line .ml-mv.on{background:var(--accent);color:var(--on-accent)}
  /* Links en el header (solo visibles en expandido) */
  .bpanel-head-links{display:none;gap:6px;align-items:center;flex-wrap:wrap}
  .bpanel.expanded .bpanel-head-links{display:flex}
  .bpanel-head-links .board-link{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:500;color:var(--ink);background:var(--chip);border:none;border-radius:var(--radius-sm);padding:4px 10px;text-decoration:none;transition:.12s;white-space:nowrap}
  .bpanel-head-links .board-link:hover{background:var(--line2);color:var(--ink)}
  .bpanel-head-links .board-link span{color:var(--muted)}
  @media(max-width:1023px){
    .bpanel.expanded{width:var(--bpanel-w);max-width:var(--bpanel-w-exp)}
    .bpanel.expanded .bpanel-body{flex-direction:column}
    .bpanel.expanded .board-side-col{max-height:none;flex:0 0 auto}
    .bpanel.expanded .board-side-col .movelist{max-height:280px;flex:none}
    .bpanel-xpand{display:none}
    .bpanel-head-links{display:none!important}
  }
  /* botón/afordancia: cualquier jugada referenciada es clickeable */
  .pmove{cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .15s,color .15s}
  .pmove:hover{border-bottom-color:var(--accent);color:var(--accent)}
  .logo{width:44px;height:44px;border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;flex-shrink:0;box-shadow:none}
  .logo i{display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-style:normal}
  .logo .d{background:var(--ink);color:var(--surface)} .logo .l{background:var(--accent);color:var(--on-accent)}
  .brand{display:flex;align-items:center;gap:14px;cursor:pointer;border-radius:var(--radius-sm);padding:2px;margin:-2px;transition:opacity .15s;outline:none}
  .brand:hover{opacity:.82}
  /* Foco visible: UNA regla para todos los controles nativos, en vez de los 19 selectores a mano
     que habia. MEDIDO en las 6 pestañas: de 465 controles visibles, 16 botones caian al anillo por
     defecto del navegador (cr-num, cr-deep, trend-expand y 6 sueltos). Los inputs, selects y los
     106 checkboxes NO estaban huerfanos —los cubria input:focus/select:focus más abajo— así que
     para ellos esto no cambia como se ven; los pasa de :focus a :focus-visible, que es lo correcto
     (el anillo aparece al tabular, no al clickear con el mouse).
     Lo que arregla de fondo no son los 16: es que una lista a mano garantiza que el proximo
     control nuevo se olvide. Este era el caso — .kebab y .kmenu se habian tenido que agregar a
     mano en la Wave 17 por exactamente eso. */
  button:focus-visible:not(:active),a[href]:focus-visible:not(:active),input:focus-visible:not(:active),
  select:focus-visible:not(:active),textarea:focus-visible:not(:active),[tabindex]:focus-visible:not(:active){box-shadow:0 0 0 3px var(--accent-soft);outline:none}
  /* .drow / .habit / .lchip son divs clickeables, no controles nativos: la regla general no los
     alcanza y necesitan la suya. */
  .drow:focus-visible:not(:active),.habit:focus-visible:not(:active){box-shadow:0 0 0 3px var(--accent-soft);outline:none}
  .lchip:focus-visible:not(:active){box-shadow:0 0 0 3px var(--accent-soft);outline:none}
  .title b{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);display:block;line-height:1;letter-spacing:-.03em}
  .title span{font-size:var(--fs-sm);color:var(--muted)}
  .sync{margin-left:auto;font-size:var(--fs-xs);color:var(--ink2);display:flex;align-items:center;gap:7px;white-space:nowrap;font-weight:500;background:var(--surface);border:1px solid var(--line);padding:6px 12px;border-radius:var(--radius-sm)}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
  .dot.ok{background:var(--ok)}.dot.err{background:var(--bad)}.dot.local{background:var(--accent)}
  .tabs{display:flex;gap:6px;margin:0 0 22px;overflow-x:auto;padding-bottom:0;border-bottom:1px solid var(--line)}
  .ic{display:inline-block;vertical-align:middle;flex-shrink:0}
  .next-step{animation:nextpulse 1.6s ease-in-out infinite;box-shadow:0 0 0 0 var(--accent)}
  @keyframes nextpulse{0%,100%{box-shadow:0 0 0 0 rgba(118,150,86,.45)}50%{box-shadow:0 0 0 6px rgba(118,150,86,0)}}
  @media (prefers-reduced-motion:reduce){.next-step{animation:none;outline:2px solid var(--accent);outline-offset:2px}}
  .tabic,.ic-wrap{display:inline-flex;align-items:center;vertical-align:middle}
  .tab{background:none;border:none;color:var(--muted);padding:8px 14px;font-size:var(--fs-md);cursor:pointer;white-space:nowrap;font-family:inherit;display:flex;align-items:center;gap:7px;border-bottom:2px solid transparent;border-radius:0;font-weight:500;transition:.15s;margin-bottom:-1px}
  .tab:hover{color:var(--ink);border-bottom-color:var(--line2)} .tab.active{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;box-shadow:none}
  .card h2{margin:0 0 4px;font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;letter-spacing:-.03em;line-height:1.05}
  .det-sec{padding:0;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:22px}
  .det-sec:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
  .card .sub{margin:0 0 16px;font-size:var(--fs-sm);color:var(--muted)}
  section:not(.hidden) .card{animation:rise .4s cubic-bezier(.2,.7,.3,1) backwards}
  section:not(.hidden) .card:nth-child(1){animation-delay:.02s}
  section:not(.hidden) .card:nth-child(2){animation-delay:.09s}
  section:not(.hidden) .card:nth-child(3){animation-delay:.16s}
  section:not(.hidden) .card:nth-child(4){animation-delay:.23s}
  @media(prefers-reduced-motion:reduce){section .card{animation:none!important}}
  .grid{display:grid;gap:12px} .g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .g2{grid-template-columns:1fr 1fr}
  @media(max-width:640px){.g2{grid-template-columns:1fr}}
  .metric{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
  /* fila de Progreso: alineamos los números a la misma base aunque el label tenga 1 o 2 líneas */
  .metric-strip .metric{display:grid;grid-template-rows:32px auto 1fr;align-content:start;background:none;border:none;border-radius:0;padding:0}
  .metric-strip .metric .lab{align-self:start}
  .metric-strip .metric .val{margin-top:0;align-self:start}
  .metric .lab{font-size:var(--fs-xs);color:var(--muted);display:flex;align-items:flex-start;gap:6px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;line-height:1.25}
  .metric .val{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:800;margin-top:6px;line-height:1;letter-spacing:-.03em}
  .metric .val small{font-size:var(--fs-md);font-weight:600;font-family:var(--font-body)}
  /* Cards de la fila inferior de Estadísticas: centradas y con número a la escala héroe (igual que .gcell) */
  .statcell{padding:18px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .statcell .lab{justify-content:center;min-height:16px}
  .statcell .val{font-size:var(--fs-hero)!important;margin-top:6px}
  .statcell .sub-slot{min-height:0;margin-top:3px}
  /* selector de rango de fechas (desde/hasta) en la barra de Progreso */
  .daterange{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 8px;white-space:nowrap;flex-shrink:0}
  .daterange .drlab{font-size:var(--fs-xs);color:var(--muted);font-weight:500;white-space:nowrap}
  .daterange .drsep{color:var(--faint);font-size:var(--fs-xs)}
  .daterange input[type=date]{border:none;background:none;font-family:inherit;font-size:var(--fs-sm);color:var(--ink);padding:2px;cursor:pointer}
  .daterange.active{border-color:var(--accent)}
  .drclear{border:none;background:var(--chip);color:var(--muted);border-radius:50%;width:18px;height:18px;line-height:1;cursor:pointer;font-size:var(--fs-2xs);padding:0}
  .drclear:hover{background:var(--bad);color:var(--on-accent)}
  /* preview en headers de cards colapsados: una pista de lo que hay adentro */
  .cardprev{font-size:var(--fs-xs);font-weight:500;color:var(--muted);margin-left:10px}
  .cardprev b{font-weight:700;color:var(--ink2)}
  .cardprev .up{color:var(--ok);font-weight:700} .cardprev .down{color:var(--bad);font-weight:700}
  @media(max-width:560px){.cardprev{display:none}}
  /* fila de métricas de Progreso: 6 columnas en desktop, 3x2 en mobile */
  .metric-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
  @media(max-width:900px){.metric-strip{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:620px){.metric-strip{grid-template-columns:repeat(2,1fr)}}
  /* campo de análisis vacío (falta Review/análisis): contorno verde Chess.com que invita a traerlo */
  .an-metric.an-off{opacity:1;border:1.5px solid var(--line);background:var(--panel2)}
  .an-metric.an-off .lab{color:var(--faint)}
  @media(prefers-color-scheme:dark){.an-metric.an-off{border-color:var(--line);background:var(--panel2)}.an-metric.an-off .lab{color:var(--faint)}}
  html[data-theme="dark"] .an-metric.an-off{background:var(--panel2)}
  html[data-theme="dark"] .an-metric.an-off .lab{color:var(--faint)}
  [data-theme="light"] .an-metric.an-off{background:var(--panel2)}
  [data-theme="light"] .an-metric.an-off .lab{color:var(--faint)}
  .an-metric.an-off .val{font-size:var(--fs-md);font-weight:600;font-family:var(--font-body);color:var(--muted)}
  .an-metric.an-off .an-unit{display:none}
  /* separador de sección con etiqueta centrada */
  .sec-rule{display:flex;align-items:center;gap:14px;margin:30px 2px 16px;color:var(--muted)}
  .sec-rule::before,.sec-rule::after{content:"";flex:1;height:1px;background:var(--line)}
  .sec-rule span{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);letter-spacing:.02em;text-transform:uppercase;color:var(--ink2)}
  /* banner accionable principal */
  .focus-banner{background:var(--accent-green-soft);border-radius:var(--radius);padding:18px 22px;margin-bottom:14px;display:flex;gap:15px;align-items:flex-start}
  .focus-banner .fb-ic{font-size:var(--fs-display);line-height:1;color:var(--accent-green);margin-top:1px;font-style:normal}
  .focus-banner .fb-k{font-size:var(--fs-xs);color:var(--accent-green);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
  .focus-banner .fb-t{font-size:var(--fs-lg);color:var(--accent-green);line-height:1.5;margin-top:4px}
  .focus-banner .fb-t b{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);letter-spacing:-.02em}
  /* bloque 'Tus aperturas' */
  .oi-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
  .oi-row:last-child{border-bottom:none}
  .oi-row .oi-ic{font-size:var(--fs-lg);line-height:1.2;font-style:normal;color:var(--muted);flex:none;width:20px;text-align:center}
  .oi-row .oi-k{font-size:var(--fs-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
  .oi-row .oi-t{font-size:var(--fs-md);color:var(--ink2);line-height:1.5;margin-top:2px}
  .oi-row .oi-t b{font-weight:700;color:var(--ink)}
  /* tour de coachmarks */
  .ob-modal{max-width:440px}
  .ob-badge{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent2);background:var(--accent-soft);padding:4px 9px;border-radius:var(--radius-sm);margin-bottom:12px}
  .tour-scrim{position:fixed;inset:0;background:transparent;z-index:120;animation:fade .2s}
  /* el oscurecido lo hace solo el box-shadow del highlight: afuera tenue, el recuadro queda nítido (es un "agujero") */
  .tour-hl{position:fixed;border-radius:var(--radius-sm);box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgba(20,18,12,.32);z-index:121;transition:all .2s;pointer-events:none}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tour-hl{box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgba(0,0,0,.45)}}
  html[data-theme="dark"] .tour-hl{box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgba(0,0,0,.45)}
  .tour-pop{position:absolute;z-index:122;width:300px;max-width:88vw;background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius-sm);box-shadow:0 12px 40px rgba(0,0,0,.3);padding:16px 18px;animation:rise .25s}
  .tour-pop-fixed{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:380px;max-width:calc(100vw - 24px);animation:rise .25s}
  .tour-pop .tp-tab{display:inline-block;font-size:var(--fs-2xs);font-weight:700;color:var(--on-accent);background:var(--accent);padding:2px 9px;border-radius:var(--radius-sm);margin-bottom:8px}
  .tour-pop .tp-tab::before{content:'▸︎ ';opacity:.7}
  .tour-pop .tp-k{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.6px;color:var(--accent2);font-weight:700;margin-bottom:5px}
  .tour-pop .tp-t{font-size:var(--fs-md);color:var(--ink2);line-height:1.5}
  .tour-pop .tp-t b{color:var(--ink);font-weight:700}
  .tour-pop .tp-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
  .tour-pop .tp-dots{display:flex;gap:5px}
  .tour-pop .tp-dot{width:6px;height:6px;border-radius:50%;background:var(--line2)}
  .tour-pop .tp-dot.on{background:var(--accent)}
  /* carrusel de tarjetas (tour en mobile): overlay centrado, sin depender de la página */
  .tour-card-bg{position:fixed;inset:0;z-index:120;background:rgba(15,14,11,.6);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
  .tour-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius-sm);box-shadow:0 20px 60px rgba(0,0,0,.35);padding:20px 20px 16px;animation:rise .25s}
  .tour-card .tp-tab{display:inline-block;font-size:var(--fs-2xs);font-weight:700;color:var(--on-accent);background:var(--accent);padding:3px 10px;border-radius:var(--radius-sm);margin-bottom:10px}
  .tour-card .tp-k{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.6px;color:var(--accent2);font-weight:700;margin-bottom:6px}
  .tour-card .tp-t{font-size:var(--fs-lg);color:var(--ink2);line-height:1.5}
  .tour-card .tp-t b{color:var(--ink);font-weight:700}
  .tour-card .tp-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:10px}
  .tour-card .tp-dots{display:flex;gap:5px}
  .tour-card .tp-dot{width:6px;height:6px;border-radius:50%;background:var(--line2)}
  .tour-card .tp-dot.on{background:var(--accent)}
  @media(prefers-reduced-motion:reduce){.tour-scrim,.tour-pop{animation:none}.tour-hl{transition:none}}
  /* grilla temática 2x2 */
  .thematic{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
  @media(max-width:640px){.thematic{grid-template-columns:1fr}}
  .tcell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:none}
  .heatmap-card{margin-bottom:14px}
  .heatmap-card .sub{margin-top:8px;margin-bottom:14px}
  .heatmap-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:4px}
  .heatmap-row-label{grid-column:1/-1;font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:2px;margin-top:4px}
  .heatmap-cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:none;position:relative;transition:opacity .15s}
  .heatmap-cell:hover{opacity:.85}
  .heatmap-cell .h-phase{font-size:var(--fs-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:6px}
  .heatmap-cell .h-rate{font-size:var(--fs-hero);font-weight:800;font-family:var(--font-display);letter-spacing:-.03em;line-height:1}
  .heatmap-cell .h-unit{font-size:var(--fs-2xs);color:var(--ink2);margin-top:4px}
  .heatmap-cell .h-detail{font-size:var(--fs-2xs);color:var(--muted);margin-top:6px}
  .heatmap-cell .h-bar{height:3px;border-radius:var(--radius);margin-top:8px;width:100%}
  .heatmap-cell.na .h-rate,.heatmap-cell.na .h-unit,.heatmap-cell.na .h-detail{color:var(--faint)}
  .heatmap-cell.na .h-bar{background:var(--panel2)}
  .heatmap-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--muted);margin-top:12px;justify-content:center}
  .heatmap-legend span{display:inline-flex;align-items:center;gap:4px}
  /* tarjeta que invita a analizar partidas: discreta, neutra, sin color de plataforma */
  .tcell-cc{border:1.5px solid var(--accent);background:var(--panel2);box-shadow:none}
  .tcell-cc .tk{color:var(--ink2)}
  /* barra de meta de Elo */
  .goalwrap{border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;background:var(--bg)}
  .goalhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
  .goalhead .gh-t{font-size:var(--fs-sm);font-weight:600}
  .goalhead .gh-t b{font-family:var(--font-display);font-weight:800}
  .goaltrack{position:relative;height:9px;background:var(--chip);border-radius:var(--radius-sm);overflow:hidden}
  .goalfill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:var(--radius-sm);transition:width .4s}
  .goalfill.done{background:var(--ok)}
  .goalrow{display:flex;justify-content:space-between;margin-top:7px;font-size:var(--fs-2xs);color:var(--muted)}
  .goal-empty{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .goal-empty .gl{font-size:var(--fs-sm);color:var(--muted)}
  /* conversión de finales */
  .eg-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .eg-row:last-child{border-bottom:none}
  .eg-lbl{flex:1;font-size:var(--fs-md)}
  .eg-rec{font-size:var(--fs-sm);color:var(--muted)}
  .eg-pct{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);min-width:48px;text-align:right}
  /* Coach IA */
  .coach-phase .cp-txt{font-size:var(--fs-sm);color:var(--ink2);margin-bottom:8px}
  .coach-card{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);margin-bottom:8px;animation:rise .25s}
  .coach-card b{font-weight:600}
  .coach-crit{font-size:var(--fs-sm);font-weight:600;color:var(--accent2);white-space:nowrap}
  .coach-board-row{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);margin-bottom:10px;cursor:pointer;transition:.15s}
  .coach-board-row:hover{border-color:var(--accent);background:var(--surface)}
  .coach-board-row .cbr-body{flex:1;min-width:0}
  .coach-board-row .cbr-mini{flex:none;width:118px}
  .coach-board-row .cbr-mini .chessboard{border-color:var(--line2)}
  @media(max-width:640px){ .coach-board-row .cbr-mini{width:88px} }
  .coach-board-row .cbr-head{font-family:var(--font-head);font-weight:600;font-size:var(--fs-md);color:var(--ink);margin-bottom:4px}
  .coach-board-row .cbr-moves{font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px}
  .coach-board-row .cbr-moves b{color:var(--ink)}
  .coach-board-row .cbr-text{font-size:var(--fs-sm);color:var(--ink);line-height:1.45;margin-bottom:6px}
  .coach-board-row .cbr-train{font-size:var(--fs-sm);color:var(--ink);line-height:1.45;border-left:2px solid var(--accent);padding-left:9px}
  .coach-board-row .cbr-train span{color:var(--accent);font-weight:600;text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.04em;margin-right:4px}
  .coach-board-row .cbr-arr{color:var(--accent);font-size:var(--fs-md);flex:none;white-space:nowrap;margin-top:2px}
  .prescan-chip{position:fixed;bottom:18px;right:18px;z-index:90;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:8px 14px;box-shadow:0 6px 22px rgba(0,0,0,.18);font-size:var(--fs-sm);color:var(--ink);animation:rise .25s}
  .prescan-chip[hidden]{display:none}  /* el atributo hidden debe ganar sobre display:flex */
  /* Banner de actualización (PWA iOS): sube desde abajo, respeta el notch/safe-area. */
  .update-banner{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);border-radius:var(--radius);padding:12px 14px;box-shadow:0 8px 28px rgba(0,0,0,.28);font-size:var(--fs-md);transform:translateY(140%);opacity:0;transition:transform .28s ease,opacity .28s ease;max-width:520px;margin:0 auto}
  .update-banner.show{transform:translateY(0);opacity:1}
  .update-banner[hidden]{display:none}
  .update-banner .ub-ic{font-size:17px;flex:none}
  .update-banner .ub-txt{flex:1;min-width:0;font-weight:500}
  .update-banner .ub-go{flex:none;background:#fff; /* literal: fondo blanco en ambos temas */color:var(--accent2);border:none;border-radius:var(--radius-sm);padding:7px 14px;font-weight:600;font-size:var(--fs-sm);cursor:pointer;font-family:inherit}
  .update-banner .ub-go:active{transform:scale(.96)}
  .update-banner .ub-x{flex:none;background:none;border:none;color:var(--on-accent);opacity:.8;font-size:15px;cursor:pointer;padding:4px;line-height:1}
  @media(prefers-reduced-motion:reduce){.update-banner{transition:none}}
  /* --- Tablero propio (estilo logo: blanco + azul tinta) --- */
  .chessboard{position:relative;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;max-width:420px;margin:0 auto;aspect-ratio:1/1;border:1px solid var(--line2);border-radius:var(--radius-sm);overflow:hidden}
  .chessboard .sq{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;min-height:0}
  .chessboard .sq.lt{background:#edece6}              /* casilla clara: off-white cálido */
  .chessboard .sq.dk{background:#93a284}              /* casilla oscura: verde oliva pálido */
  .chessboard .cd-rank,.chessboard .cd-file{position:absolute;font-size:9px;font-weight:700;line-height:1;font-family:var(--font-body);pointer-events:none;user-select:none;opacity:.9}
  .chessboard .cd-rank{top:2px;left:3px}             /* número del rank: arriba-izquierda */
  .chessboard .cd-file{bottom:2px;right:3px}         /* letra del file: abajo-derecha */
  .chessboard .sq.lt .cd-rank,.chessboard .sq.lt .cd-file{color:#93a284}  /* en casilla clara: verde pálido */
  .chessboard .sq.dk .cd-rank,.chessboard .sq.dk .cd-file{color:#edece6}  /* en casilla oscura: off-white */
  .chessboard .sq .pc{width:88%;height:88%;display:block;position:relative;z-index:1;will-change:transform}
  .chessboard .board-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
  .chessboard .sq.hl-user{box-shadow:inset 0 0 0 3px #e5484d}      /* tu jugada: rojo */
  .chessboard .sq.hl-best{box-shadow:inset 0 0 0 3px var(--accent)}      /* la del motor: violeta coach */
  .chessboard .sq.hl-last{box-shadow:inset 0 0 0 3px rgba(245,221,90,.9)} /* última jugada: amarillo */
  .chessboard .sq.hl-hint{box-shadow:inset 0 0 0 3px var(--warn)}        /* pista: amarillo */
.chessboard .sq.hl-crit-bad{box-shadow:inset 0 0 0 3px #e5484d} /* error: borde rojo en la pieza movida */
.chessboard .sq.hl-crit-inacc{box-shadow:inset 0 0 0 3px #e9a23b} /* imprecisión: borde naranja */
.chessboard .sq.hl-crit-good{box-shadow:inset 0 0 0 3px #24a148} /* buena jugada: borde verde */
  .chessboard .sq.hl-sel{box-shadow:inset 0 0 0 3px var(--accent)}       /* casilla seleccionada al explorar */
  .chessboard .sq.hl-dest::after{content:'';position:absolute;left:50%;top:50%;width:32%;height:32%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(80,80,90,.35);z-index:2;pointer-events:none} /* destino legal vacío: punto gris */
  .chessboard .sq.hl-cap::after{content:'';position:absolute;inset:6%;border-radius:50%;border:4px solid rgba(80,80,90,.4);z-index:2;pointer-events:none} /* captura: anillo alrededor de la pieza */
  .chessboard .sq.hl-annot::after{content:'';position:absolute;inset:0;background:var(--bad);opacity:.42;z-index:0;pointer-events:none} /* anotación (click derecho, SPEC-anotaciones-tablero.md): relleno translúcido, debajo de la pieza (.pc es z-index:1) y de la flecha (.board-arrow es z-index:3) */
  .bd-coords{position:relative;display:inline-block}
  .bd-coords .coord{position:absolute;font-size:8px;color:var(--muted);line-height:1;pointer-events:none;user-select:none}
  .bd-coords .coord-f{bottom:-10px;transform:translateX(-50%)}
  .bd-coords .coord-r{left:-10px;transform:translateY(-50%)}
  .explore-banner{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);padding:9px 13px;margin:0 0 12px;font-size:var(--fs-sm);color:var(--ink);text-align:center}
  .bpanel.expanded .explore-banner{padding:6px 10px;margin:0 0 6px;font-size:var(--fs-xs)}
  .explore-banner .linkbtn{margin-left:6px}
  .explore-line{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
  .bpanel.expanded .explore-line{margin-top:6px;gap:4px}
  .explore-line .ml-mv{border:1px solid var(--line2);border-radius:var(--radius);padding:4px 9px;background:var(--bg)}
  .bpanel.expanded .explore-line .ml-mv{padding:2px 6px;font-size:var(--fs-xs)}
  .explore-line .ml-mv.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  /* Wave 13: chip "Variante" + link "Volver a la partida" cuando el árbol se desvió de la línea real.
     justify-content:center: mismo criterio que .engine-bar (Wave 17 F2) -- todas las filas de
     este stack se centran a sí mismas (el padre .board-wrap no las achica). Bug reportado por
     Ignacio 2026-07-10: sin esto quedaba pegado a la izquierda en vez de centrado. */
  .var-state{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;position:relative}
  .var-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--accent2);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:2px 8px}
  .var-chip::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%}
  /* Wave 17 F5 (D4): el botón "Ver línea del coach" (.coach-line-btn) muere -- lo reemplaza la
     etiqueta ◆COACH en la banda de esa variante dentro de la movelist (.ml-varband .coach-tag,
     ver boardMovelistHTML). Un solo lenguaje para decir "esto es la línea del coach": antes había
     dos (el botón acá Y la nota debajo del tablero); ahora la nota (.branch-note) se conserva
     donde está y la etiqueta reemplaza al botón. La variante ya es clickeable como cualquier
     otra (.ml-vmv/boardVarGoto, sin cambios) -- la etiqueta es solo el rótulo, no agrega su
     propio onclick (mock aprobado: <span>, no <button>). */
  /* Wave 17 F3 (D3): menú "⋯" de acciones de variante (Preguntar al coach / Mandar al repertorio /
     Borrar, en ese orden). .var-state ancla el popover (position:relative arriba); .kebab usa
     margin-left:auto para quedar en el borde derecho de la fila, así el
     Segunda excepción permitida a "sin sombras" (mismo criterio que .modal): el popover flota sobre
     la movelist. Sombra: mismo valor que .menu (línea ~666, dropdown de Ajustes) — no la de .modal. */
  .kebab{margin-left:auto;flex:none;background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius-sm);width:28px;height:24px;font-family:inherit;font-size:var(--fs-sm);font-weight:700;line-height:1;color:var(--ink2);cursor:pointer}
  .kebab:hover{border-color:var(--accent);color:var(--accent2)}
  .kmenu{position:absolute;right:0;top:28px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius);padding:4px;z-index:5;min-width:210px;box-shadow:0 10px 30px rgba(20,18,12,.14)}
  .kmenu button{display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:var(--fs-sm);color:var(--ink2);padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer}
  .kmenu button:hover{background:var(--panel2)}
  .kmenu button.danger{color:var(--bad)}
  .kmenu button.danger:hover{background:var(--bad-bg)}
  /* confirmación de dos pasos de "Borrar variante" (misma _board.confirmDelVariant de siempre) DENTRO
     del menú: mismo ancho que los ítems, no cierra el .kmenu (ver renderBoardPanelBody). */
  .kmenu-confirm{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:7px 10px;font-size:var(--fs-xs);color:var(--muted)}
  @media(max-width:420px){ .kmenu{right:-4px;min-width:190px} }
  /* Wave 16 Fase 2: confirmación inline de "Borrar guardado" (dos pasos, sin confirm() nativo) —
     vive dentro de .board-links (flex row), mismo .linkbtn para Sí/No que el resto de la app. */
  .tree-confirm{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--muted)}
  /* Wave 22 F2 (SPEC-sparring.md, mock aprobado 2026-07-20): fila de estado del sparring, mismo
     patrón que .var-state (reemplaza esa fila mientras dura la sesión, ver stateRowHTML). Chip con
     tokens --warn/--warn-bg (no --accent: ya lo usa "Variante", necesita su propio color para no
     confundirse) — mismas dos paradas (warn/warn-bg) que ya usan .pill/.kmenu-confirm, sin hex nuevo. */
  .spar-state{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
  .spar-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn);border-radius:var(--radius-sm);padding:2px 8px}
  .spar-chip::before{content:'';width:6px;height:6px;background:var(--warn);border-radius:50%}
  .spar-lvl,.spar-eval{font-size:var(--fs-sm);color:var(--muted)}
  .spar-eval-num{font-weight:600;color:var(--ink2)}
  .spar-eval-num.pos{color:var(--ok)}
  .spar-eval-num.neg{color:var(--bad)}
  .spar-thinking{font-size:var(--fs-xs);color:var(--muted);font-style:italic}
  /* Wave 22 F3 (SPEC-sparring.md, "Detección de error en vivo"): banner dentro de .spar-state,
     tokens --bad/--bad-bg (rojo tinta) -- DISTINTO del --warn/--warn-bg del chip de arriba: el chip
     dice "estás en sparring" (estado neutro), el banner dice "esto salió mal" (alerta), no pueden
     compartir color o se pierde la distinción. Mismo patrón visual que .kmenu-confirm (fila con
     texto + botón, wrap en mobile). */
  .spar-mistake{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;font-size:var(--fs-xs);color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad);border-radius:var(--radius-sm);padding:6px 10px}
  .spar-mistake .linkbtn{color:var(--bad);font-weight:600}
  .spar-mistake .linkbtn:hover{color:var(--ink)}
  /* Wave 22 F3: card de cierre (reemplaza .spar-state cuando la sesión termina, ver stateRowHTML).
     Mismo radius/tokens que el resto del panel (--radius, --panel2), SIN sombra (regla del repo).
     Color del veredicto: --ok para convertida, --bad para no convertida, --warn para a_medias --
     mismos 3 tokens que ya usa el resto de la app para bueno/malo/intermedio, sin inventar ninguno. */
  .spar-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px;text-align:center}
  .spar-card-verdict{font-size:var(--fs-md);font-weight:700}
  .spar-verdict-convertida .spar-card-verdict{color:var(--ok)}
  .spar-verdict-no_convertida .spar-card-verdict{color:var(--bad)}
  .spar-verdict-a_medias .spar-card-verdict{color:var(--warn)}
  .spar-card-detail{font-size:var(--fs-xs);color:var(--muted)}
  .spar-card-actions{display:flex;gap:14px;margin-top:4px}
  .eval-depth{font-size:var(--fs-xs);color:var(--muted);font-weight:500;margin-left:8px}
  .switch{position:relative;width:40px;height:23px;border-radius:4px; /* pill: toggle 40x23, menos de 4px lo endurece */border:none;background:var(--line2);cursor:pointer;padding:0;flex:none;transition:background .15s}
  .switch.on{background:var(--accent)}
  .switch .switch-knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff; /* elemento fisico, no texto */box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
  .switch.on .switch-knob{transform:translateX(17px)}
  .board-err{padding:24px;text-align:center;color:var(--muted)}
  .board-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:var(--fs-sm)}
  .board-legend span{display:inline-flex;align-items:center;gap:6px}
  .board-legend i{width:12px;height:12px;border-radius:var(--radius-sm);display:inline-block}
  /* Wave 17 F1 (D1): nav SIEMPRE pegada al tablero, en ambos modos. El label toma todo el
     espacio entre los botones (flex:1/min-width:0) y trunca con ellipsis -- los botones quedan
     CLAVADOS en los extremos sin importar el largo del texto (fix del corrimiento reportado). */
  .board-nav{display:flex;align-items:center;gap:8px;margin-top:12px;width:100%}
  .board-nav .bnav{flex:none;min-width:38px;height:38px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:var(--fs-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.12s}
  .board-nav .bnav:hover{border-color:var(--accent);background:var(--accent-soft)}
  .board-nav .bnav-lbl{flex:1;min-width:0;text-align:center;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* barra de evaluación al costado del tablero */
  .board-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
  .board-links .board-link{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:5px 12px;text-decoration:none;transition:.12s}
  .board-links .board-link:hover{border-color:var(--accent);color:var(--accent)}
  .board-links .board-link span{color:var(--muted)}
  .board-legend .best-loading{color:var(--muted);font-style:italic}
  .board-wrap{display:flex;gap:10px;align-items:stretch;justify-content:center;max-width:460px;margin:0 auto}
  .mat-row{display:flex;align-items:center;justify-content:center;gap:3px;margin:0;height:20px;font-size:0;line-height:0}
  .mat-row .mat-pc{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
  .mat-row .mat-pc svg{width:16px;height:16px;display:block}
  .mat-row .mat-delta{font-size:var(--fs-xs);font-weight:700;font-family:var(--font-display);letter-spacing:-.02em;margin-left:4px}
  .evalbar{position:relative;width:32px;flex:none;border-radius:var(--radius-sm);overflow:hidden;background:var(--evalbar-black);border:1px solid var(--line2)}
  .evalbar .ev-white{position:absolute;left:0;right:0;bottom:0;background:var(--piece-w);transition:height .35s ease}
  .evalbar.flip .ev-white{top:0;bottom:auto}
  /* Número de eval: CHIP deliberado del color del que va ganando (patrón Lichess), NUNCA texto
     desnudo. Historia (bug 2026-07-13): el texto pelado adivinaba el color de la franja de atrás
     por porcentaje, y la adivinanza se rompía en las puntas — evalToBarPct clampea a 2-98%, y ese
     2% del color contrario queda justo detrás del número (~14px en una barra alta = la altura del
     texto), pareciendo "un recuadro" ilegible según tema/orientación. El chip es legible SIEMPRE
     por construcción, sin importar qué franja tenga detrás. Colores físicos fijos (--piece-w es
     constante entre temas; tinta y blanco fisicos, mismo criterio que --piece-b), no de tema. */
  .evalbar .eval-num{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--font-head);font-weight:700;font-size:11px;line-height:1;pointer-events:none;z-index:1;white-space:nowrap;padding:2px 3px;border-radius:var(--radius)}
  .evalbar .eval-num.top{top:2px}
  .evalbar .eval-num.bot{bottom:2px}
  .evalbar .eval-num.mid{top:50%;transform:translate(-50%,-50%)}
  .evalbar .eval-num.onblack{color:#fff;background:var(--evalbar-black) /* chip "negras ganan": texto físico blanco sobre el verde oscuro de la barra */}
  .evalbar .eval-num.onwhite{color:#1a1a1a;background:var(--piece-w) /* chip "blancas ganan": texto físico oscuro (NO var(--ink), fix 2026-07-11) sobre el crema de la barra */}
  /* Wave 17 F2 (D2, bug 6): apagado = honesto. opacity+grayscale por CSS (tokens, sin colores
     hardcodeados) en vez de vaciar la barra -- se ve claramente "no vivo" sin perder la forma. */
  .evalbar.off{opacity:.35;filter:grayscale(1)}
  .board-wrap .chessboard{margin:0;flex:1 1 auto;max-width:420px}
  /* Wave 17 F2 (D2): fusiona eval-readout-row + la fila del switch (dos bloques) en UNA línea:
     switch + label + eval + profundidad, borde fino, sin sombras. */
  .engine-bar{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 10px;margin:10px 0 0;font-size:var(--fs-sm)}
  .engine-bar .lbl{color:var(--muted);font-weight:500}
  .engine-bar .eval-depth{margin:0 0 0 auto}
  .engine-bar.off .lbl{color:var(--faint)}
  .eval-readout{font-family:var(--font-head);font-weight:700;font-size:var(--fs-lg);min-width:48px;text-align:center}
  .eval-readout.pos{color:var(--ink)}
  .eval-readout.neg{color:var(--ink)}
  .engine-bar .eval-readout{font-size:var(--fs-md);min-width:0;text-align:left}
  .engine-bar.off .eval-readout{color:var(--faint)}
  .movelist{margin:14px auto 0;max-width:420px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:var(--fs-sm)}
  .movelist .ml-scroll{}
  .movelist .ml-row{display:grid;grid-template-columns:38px 1fr 1fr;align-items:stretch}
  .movelist .ml-scroll .ml-row:nth-child(even){background:var(--bg)}
  .movelist .ml-head{display:grid;grid-template-columns:38px 1fr 1fr;background:var(--panel2);font-weight:600;position:sticky;top:0;z-index:1}
  .movelist .ml-head .ml-name{padding:7px 10px;color:var(--ink)}
  .movelist .ml-no{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-xs);background:var(--panel2)}
  .movelist .ml-mv{display:flex;align-items:center;gap:5px;border:none;background:none;color:var(--ink);font-size:var(--fs-sm);font-weight:500;padding:6px 10px;cursor:pointer;text-align:left;width:100%;transition:.1s}
  .movelist .ml-mv:hover{background:var(--accent-soft)}
  .movelist .ml-mv.on{background:var(--accent);color:var(--on-accent);font-weight:700}
  .movelist .ml-empty{display:block}
  .movelist .ml-mv.crit{font-weight:700}
  .movelist .ml-mk{font-weight:800;font-size:var(--fs-sm)}
  .movelist .ml-mk.mk-bad{color:#e5484d}
  .movelist .ml-mk.mk-inacc{color:#e9a23b}
  .movelist .ml-mk.mk-good{color:var(--accent)}
  .movelist .ml-mv.on .ml-mk{color:var(--on-accent)}
  /* Wave 13 Fase C: variantes en la movelist (mock aprobado, patrón Lichess). La variante
     interrumpe la tabla como banda de ancho completo con la línea fluyendo como texto corrido;
     sub-variantes bajan con conector de árbol e indentación por nivel (tope 2 niveles de .vline
     anidados — más profundo se aplana a paréntesis en itálica, ver boardMovelistHTML). */
  .movelist .ml-varband{background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 10px;font-size:var(--fs-sm);color:var(--ink2);line-height:1.85}
  .movelist .ml-varband+.ml-varband{border-top:none}
  /* Wave 17 F5 (D4): etiqueta ◆COACH -- marca CUÁL de las variantes de esta partida es la línea
     inyectada por el coach (reemplaza al viejo botón "Ver línea del coach", ver el comentario
     largo más arriba). ◆ es texto (U+25C6), no emoji -- mismo criterio que el resto de la app. */
  .movelist .ml-varband .coach-tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--accent2);margin-right:6px}
  .movelist .ml-varband .coach-tag::before{content:'◆';font-size:8px}
  .movelist .ml-vmv{background:none;border:none;font-family:inherit;font-size:var(--fs-sm);color:var(--ink2);padding:1px 4px;border-radius:var(--radius-sm);cursor:pointer;display:inline}
  .movelist .ml-vmv:hover{background:var(--chip)}
  .movelist .ml-vmv.on{background:var(--accent);color:var(--on-accent);font-weight:600}
  .movelist .vno{color:var(--faint);font-size:var(--fs-xs)}
  .movelist .vline{position:relative;padding-left:16px;display:block;margin-top:2px}
  .movelist .vline::before{content:'';position:absolute;left:4px;top:-4px;bottom:9px;width:8px;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .movelist .vline .vline{margin-left:12px}
  .movelist .vinline{font-style:italic;color:var(--muted)}
  .movelist .vinline .ml-vmv{font-style:italic;color:var(--muted)}
  .movelist .vinline .ml-vmv.on{color:var(--on-accent)}
  /* Wave 13 Fase D: .branch-toggle (viejo toggle "Tu partida/Línea del coach") eliminado — lo
     reemplazó .coach-line-btn (Wave 13), y a ese lo reemplazó a su vez la etiqueta ◆COACH de la
     movelist (Wave 17 F5, D4 — ver comentario junto a .ml-varband .coach-tag). */
  .explore-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;max-width:420px;margin:12px auto 0;background:var(--accent-soft);color:var(--accent);border:1.5px solid var(--accent);border-radius:var(--radius-sm);padding:13px;font-size:var(--fs-md);font-weight:700;font-family:inherit;cursor:pointer;transition:.12s}
  .explore-cta:hover{background:var(--accent);color:var(--on-accent)}
  .explore-cta .ecta-sub{font-weight:400;opacity:.75;font-size:var(--fs-sm)}
  .branch-note{margin:12px auto 0;max-width:420px;font-size:var(--fs-sm);line-height:1.5;color:var(--ink);border-left:3px solid var(--accent);padding:8px 12px;background:var(--bg);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
  .branch-note span{color:var(--accent);font-weight:700;text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.04em;margin-right:6px}
  .prescan-chip .ps-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pspulse 1.1s ease-in-out infinite}
  @keyframes pspulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  @media(max-width:760px){.prescan-chip{bottom:12px;right:12px}}
  .coach-cardlist .coach-card{animation:none}
  @media(prefers-reduced-motion:reduce){.coach-card{animation:none}}
  @media(prefers-reduced-motion:reduce){.goalfill{transition:none}}
  @media(prefers-color-scheme:dark){.tcell-cc{border-color:var(--accent);background:var(--panel2)}.tcell-cc .tk{color:var(--ink2)}}
  .tcell .tk{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
  .tcell .tt{font-size:var(--fs-md);line-height:1.6;color:var(--ink2)}
  .tcell .tt b{font-family:var(--font-display);color:var(--ink);font-weight:800;font-size:var(--fs-lg);letter-spacing:-.02em}
  .coverage-note{font-size:var(--fs-xs);color:var(--faint);margin-top:6px}
  .bar{height:6px;background:var(--chip);border-radius:var(--radius-sm);overflow:hidden;margin-top:10px}
  .bar > i{display:block;height:100%;background:var(--accent);width:0;transition:width .4s}
  .up{color:var(--ok)}.down{color:var(--bad)}
  label{cursor:pointer}
  input,select,textarea,button{font-family:inherit;font-size:var(--fs-md)}
  input,select,textarea{background:var(--bg);border:1px solid var(--line2);color:var(--ink);border-radius:var(--radius);padding:9px 11px;width:100%}
  /* Select estilizado: sacamos la flecha nativa (fea, dos triángulos) y ponemos un chevron propio. */
  select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2384817a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:34px;cursor:pointer}
  select:hover{border-color:var(--line)}
  /* Number sin spinner nativo: lo dejamos limpio y centrado. */
  input[type=number]{-moz-appearance:textfield;text-align:center}
  input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  /* Stepper propio para el number (en vez de las flechitas nativas feas). */
  .numstep{position:relative}
  .numstep input{padding-right:30px}
  .numstep-btns{position:absolute;top:4px;right:4px;bottom:4px;display:flex;flex-direction:column;gap:2px}
  .numstep-btns button{flex:1;width:22px;padding:0;border:1px solid var(--line2);background:var(--surface);color:var(--muted);border-radius:var(--radius-sm);font-size:9px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
  .numstep-btns button:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2)}
  .numstep-btns button:active{transform:scale(.92)}
  .keyfield{flex:1;display:flex;align-items:stretch;background:var(--bg);border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
  .keyfield:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .keyfield .keyprefix{display:flex;align-items:center;padding:0 2px 0 11px;color:var(--muted);font-size:var(--fs-md);white-space:nowrap;user-select:none}
  .keyfield input{border:none!important;background:none!important;box-shadow:none!important;padding:9px 11px 9px 0;flex:1;min-width:0}
  /* iOS Safari hace auto-zoom en inputs con font-size < 16px. En mobile los subimos a 16px para evitarlo. */
  @media(max-width:760px){input,select,textarea{font-size:16px}}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .chk{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:2px solid var(--line2);border-radius:var(--radius-sm);cursor:pointer;position:relative;flex-shrink:0;background:var(--surface);transition:.15s}
  .chk:hover{border-color:var(--accent)}
  /* AREA DE TOQUE de la casilla de seleccion en la tabla de partidas. El input mide 18x18 (estilo
     inline en render-games.js) y en mobile eso es la mitad de los 44px de la guia tactil.
     No se agranda el input —descuadra la columna de 30px— sino que se envuelve en un <label> que
     ocupa la celda ENTERA: el target pasa de 18x18 a 30x67 sin mover un pixel de lo que se ve.
     Es el mismo patron que ya usaba la rutina de Hoy, donde la fila es un <label> y por eso ahi
     el checkbox nunca fue un problema (target real 317x78).
     MEDIDO antes de esto: se intento agrandar el area con un ::before invisible y NO funciona —
     en un <input> el pseudo-elemento que desborda queda recortado, y en los <button> lo tapan los
     hermanos que se pintan despues. Test de impacto: 2/4 y 0/4 bordes acertaban. */
  td.c-sel{padding:0}
  td.c-sel .selwrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:44px;cursor:pointer}
  .chk:checked{background:var(--accent);border-color:var(--accent)}
  .chk:checked::after{content:"✓︎";position:absolute;color:var(--on-accent);font-size:var(--fs-md);left:4px;top:-1px;font-weight:700}
  .btn{background:var(--ink);color:var(--surface);border:1px solid var(--ink);border-radius:var(--radius);padding:10px 17px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:.15s}
  .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .btn:active{transform:scale(.98)}
  /* No había estado :disabled para .btn: un botón deshabilitado se veía IGUAL que la acción
     principal (tinta sólida), y en el modal de Maia el elemento más prominente terminaba siendo
     uno que no se puede tocar. Se apaga con tokens (nada hardcodeado) y se anula el hover. */
  .btn:disabled,.btn[disabled]{background:var(--chip);border-color:var(--line);color:var(--muted);cursor:default;opacity:.7}
  .btn:disabled:hover,.btn[disabled]:hover{background:var(--chip);border-color:var(--line);color:var(--muted);transform:none}
  .btn:disabled:active,.btn[disabled]:active{transform:none}
  .btn.accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .btn.accent:hover{background:var(--accent2);border-color:var(--accent2)}
  .btn.ghost{background:none;color:var(--ink);border-color:var(--line2)} .btn.ghost:hover{background:var(--panel2);color:var(--ink);border-color:var(--line2)}
  .btn.sm{padding:7px 12px;font-size:var(--fs-sm)} .btn.icon{padding:7px 9px}
  .btn.link{background:none;border:1px solid var(--line2);color:var(--ink);font-weight:500;font-size:var(--fs-sm);padding:6px 11px}
  /* Botones para abrir LLMs: chasis ghost + un punto con el color distintivo de la marca, en nuestro estilo */
  .btn.llm{background:var(--surface);color:var(--ink);border:1px solid var(--line2);font-weight:600}
  .btn.llm .llm-dot{width:9px;height:9px;border-radius:50%;background:var(--llm-c, var(--accent));flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--llm-c, var(--accent)) 18%,transparent)}
  .btn.llm:hover{border-color:var(--llm-c, var(--accent));background:color-mix(in srgb,var(--llm-c, var(--accent)) 9%,var(--surface));color:var(--ink)}
  .btn.llm .llm-arr{margin-left:1px;opacity:.5;font-size:.85em}
  .llm-openai{--llm-c:#10a37f} .llm-claude{--llm-c:#c96442} .llm-gemini{--llm-c:#4285f4}
  .llm-row-label{font-size:var(--fs-sm);color:var(--muted);margin:2px 0 6px;font-weight:500}
  /* Aviso de calidad de modelo: tarjeta suave, no alarmante */
  .model-tip{display:flex;gap:9px;align-items:flex-start;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:var(--radius);padding:10px 12px;margin:10px 0 0;font-size:var(--fs-sm);color:var(--ink2);line-height:1.45}
  .model-tip .mt-ic{flex:none;color:var(--accent);margin-top:1px}
  .model-tip b{color:var(--accent2);font-weight:600}
  /* Análisis de tendencia IA (Progreso) */
  .trend-head{display:flex;align-items:center;gap:8px}
  .trend-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:7px}
  .trend-title svg{color:var(--accent)}
  .trend-report{margin-top:10px;display:flex;flex-direction:column;gap:12px;transition:opacity .2s}
  .trend-report.stale{opacity:.6}
  /* Diagnóstico y pronóstico lado a lado en desktop; apilados en mobile. */
  .trend-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  @media(max-width:680px){.trend-cols{grid-template-columns:1fr;gap:16px} .trend-block{border-left-width:2px;padding-left:12px}}
  .trend-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:var(--fs-xs);font-weight:600;padding:4px 10px;border-radius:var(--radius-sm)}
  .trend-chip i{font-style:normal;font-size:.95em}
  .trend-chip.fresh{background:var(--ok-bg);color:var(--ok)}
  .trend-chip.aging{background:var(--warn-bg);color:var(--warn)}
  .trend-chip.old{background:var(--bad-bg);color:var(--bad)}
  .trend-block{border-left:3px solid var(--accent);padding:2px 0 2px 14px}
  .trend-block.tb-prono{border-left-color:var(--ok)}
  .trend-block .tb-k{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent2);margin-bottom:5px}
  .trend-block.tb-prono .tb-k{color:var(--ok)}
  .trend-block .tb-note{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
  .trend-block .tb-body{font-size:var(--fs-md);line-height:1.55;color:var(--ink)}
  .tb-body.collapsed{max-height:9em;overflow:hidden;position:relative;margin-bottom:0}
  .tb-body.collapsed::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3em;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
  .trend-expand{display:none;background:none;border:none;color:var(--accent);font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:3px 0 0;font-family:var(--font-body)}
  .trend-expand.shown{display:inline-block}
  .trend-expand:hover{color:var(--accent2)}
  .linkbtn{background:none;border:none;padding:0;color:var(--accent);font-size:var(--fs-sm);font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .linkbtn:hover{color:var(--accent2)}
  .keyhelp{background:var(--bg);border:1px solid var(--line2);border-radius:var(--radius);padding:12px 14px;margin:0 0 14px;font-size:var(--fs-sm);line-height:1.5;color:var(--ink)}
  .coach-selbox{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);padding:13px 15px;margin:0 0 16px}
  .coach-selbox .csb-main{font-size:var(--fs-md);color:var(--ink);margin-bottom:5px}
  .coach-selbox .csb-main b{color:var(--accent)}
  .coach-seltrunc{font-size:var(--fs-sm);color:var(--muted);margin-top:6px}
  .coach-controls-off{opacity:.4;pointer-events:none;filter:grayscale(.3)}
  .coach-report-card{border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 16px;margin-bottom:12px;background:var(--bg)}
  .coach-report-card .cr-head{font-family:var(--font-head);font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:8px}
  .coach-report-card .cr-body{font-size:var(--fs-md);line-height:1.6;color:var(--ink)}
  .coach-report-card .cr-steps{list-style:none;margin:0;padding:0;counter-reset:none}
  .coach-report-card .cr-steps li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-md);line-height:1.5;padding:7px 0;border-top:1px solid var(--line)}
  .coach-report-card .cr-steps li:first-child{border-top:none}
  .coach-report-card .cr-num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
  /* Prioridades tildables: el número es el toggle (borde punteado = pendiente, verde lleno = hecha) */
  .coach-report-card button.cr-num{cursor:pointer;border:1.5px dashed var(--line2);background:var(--panel2);color:var(--ink2);font-family:inherit;padding:0;transition:.15s}
  .coach-report-card button.cr-num:hover{border-color:var(--accent);color:var(--accent)}
  .coach-report-card button.cr-num.on{border:1.5px solid var(--accent);background:var(--accent);color:var(--on-accent)}
  .cr-steps li.cr-done>span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
  .cr-steps li.cr-effect{display:block;font-size:var(--fs-sm);padding:0 0 8px 32px;border-top:none;color:var(--ink2);margin-top:-4px}
  .cr-steps li.cr-effect.effect-good{color:var(--ok)}
  .cr-steps li.cr-effect.effect-bad{color:var(--warn)}
  .cr-plan .cr-progress{float:right;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
  .cr-steps li>span{flex:1;min-width:0}
  /* Fix Wave 20 C4 (SPEC-coach-confiable.md, feedback de Ignacio 2026-07-19): la regla de arriba
     también agarraba el chip de color [B]/[N] (renderPlanColorChip, otro <span> hijo directo del
     <li>) y lo estiraba a flex:1 -- quedaba una columna de color enorme. Especificidad más alta
     (0,2,2 > 0,1,2), scoped solo al chip: vuelve a su ancho natural, claro y oscuro por igual. */
  .cr-steps li>span.colchip{flex:none;width:fit-content}
  .cr-deep{flex:none;align-self:flex-start;margin-top:3px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);transition:.15s;white-space:nowrap}
  .cr-deep:hover{color:var(--accent)}
  .cr-game{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .cr-game:hover{color:var(--accent2)}
  .cr-open{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .cr-open:hover{color:var(--accent2)}
  code.cr-mv{font-family:var(--font-body);background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 5px;font-size:.92em;font-weight:600;color:var(--ink)}
  code.cr-mv-link{cursor:pointer}
  code.cr-mv-link:hover{border-color:var(--accent);color:var(--accent)}
  /* Chip ✓/⚠ de verificación mecánica de citas (Wave 20 C3, SPEC-coach-confiable.md): discreto,
     sin gritar -- solo el ícono, tooltip honesto vía title. Tokens semánticos, sin hex. */
  .cr-verify{cursor:default;font-size:.9em}
  .cr-verify.ok{color:var(--ok)}
  .cr-verify.warn{color:var(--warn)}
  .coach-report-card .cr-head .cr-verify{margin-left:6px}
  .cr-steps li .cr-verify{flex:none;align-self:flex-start;margin-top:3px}
  /* Feedback inequívoco del Deep Dive (Wave 20 C4, SPEC-coach-confiable.md): fila de chips .llm
     que aparece bajo la prioridad tras copiar el prompt -- mismo <li> block-level que .cr-effect,
     así no compite por espacio en la fila flex del ítem. */
  .cr-steps li.cr-deepdive-llm{display:block;padding:4px 0 8px 32px;border-top:none}
  /* Wave 20 C5 (SPEC-coach-confiable.md): resultado guardado del Deep Dive, expandible bajo la
     prioridad -- mismo patrón <details>/marcador que .coach-report-prev, pero liviano (vive dentro
     de la lista de prioridades, no es una tarjeta aparte). */
  .cr-steps li.cr-deepdive-result{display:block;padding:6px 0 8px 32px;border-top:none}
  .cr-deepdive-result summary{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:var(--fs-sm);color:var(--muted);font-weight:600;list-style:none}
  .cr-deepdive-result summary::-webkit-details-marker{display:none}
  .cr-deepdive-result summary::before{content:'▸︎';color:var(--muted)}
  .cr-deepdive-result details[open] summary::before{content:'▾︎'}
  .cr-deepdive-body{margin-top:8px;font-size:var(--fs-md);line-height:1.6;color:var(--ink)}
  .coach-report-prev{border:1px solid var(--line2);border-radius:var(--radius);background:var(--bg)}
  .open-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:12px}
  .open-board-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line2);border-radius:var(--radius);padding:10px;cursor:pointer;background:var(--bg);transition:border-color .12s}
  .open-board-item:hover{border-color:var(--accent)}
  .open-board-mini{flex:none;width:140px}
  .open-board-mini .chessboard{border-color:var(--line2)}
  .open-board-info{flex:1;min-width:0}
  .open-board-title{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
  .open-board-desc{font-size:var(--fs-sm);color:var(--ink2);line-height:1.4;margin-top:3px}
  .open-board-train{font-size:var(--fs-xs);color:var(--accent);margin-top:4px}
  .open-board-best{font-size:var(--fs-xs);color:var(--accent);margin-top:2px}
  .open-board-line{font-size:var(--fs-xs);color:var(--ink2);margin-top:2px}
  .open-board-line code{font-family:var(--font-mono);background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 4px}
  .open-board-empty{width:140px;height:140px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--ink2)}
  .coach-report-prev summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;cursor:pointer;font-size:var(--fs-sm);color:var(--muted);font-weight:600;list-style:none}
  .coach-report-prev summary::-webkit-details-marker{display:none}
  .coach-report-prev summary::before{content:'▸︎';margin-right:6px;color:var(--muted)}
  .coach-report-prev[open] summary::before{content:'▾︎'}
  .coach-report-prev[open] summary{border-bottom:1px solid var(--line)}
  .coach-report-prev>div{padding:0 14px 14px}
  #opening-search-results .os-fam{margin-bottom:12px}
  #opening-search-results .os-famhead{font-family:var(--font-head);font-weight:600;font-size:var(--fs-md);color:var(--ink);margin-bottom:6px}
  #opening-search-results .os-vars{display:flex;flex-wrap:wrap;gap:6px}
  #opening-search-results .os-var{border:1px solid var(--line2);background:var(--bg);color:var(--ink);border-radius:var(--radius-sm);padding:5px 12px;font-size:var(--fs-sm);cursor:pointer;transition:.12s}
  #opening-search-results .os-var:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}
  .coach-row{display:flex;gap:12px;align-items:flex-end}
  #coach-controls{margin-bottom:16px}
  @media(max-width:560px){.coach-row{flex-direction:column;align-items:stretch}.coach-row .field{flex:1 1 auto!important}}
  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .muted{color:var(--muted)} .small{font-size:var(--fs-sm)} .hidden{display:none!important}
  .toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:14px 0}
  /* menú desplegable de Ajustes (perfil, sync, export/import, limpiar) */
  .menu-wrap{position:relative}
  .menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:0 10px 30px rgba(20,18,12,.14);padding:6px;min-width:228px;display:flex;flex-direction:column;gap:2px}
  .menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:var(--fs-sm);color:var(--ink);padding:9px 11px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
  .menu-theme{padding:6px 11px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .menu-theme-lab{display:block;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:6px}
  .seg-theme{display:flex;width:100%}
  .seg-theme button{flex:1;padding:6px 8px;font-size:var(--fs-xs)}
  .seg-theme button.on{background:var(--accent);color:var(--on-accent);font-weight:600}
  .menu button:hover{background:var(--panel2)}
  .menu button span{width:18px;text-align:center;color:var(--muted)}
  .menu-wrap #settings-btn .chev{transition:transform .15s;display:inline-block}
  .menu-wrap.open #settings-btn .chev{transform:rotate(180deg)}
  .menu-sep{border-top:1px solid var(--line);margin:4px 0}
  .menu .btn-reset{color:var(--bad)}
  .menu .btn-reset:hover{background:var(--bad-bg);color:var(--bad)}
  /* habit rows actionable */
  .habit{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);margin-bottom:10px;transition:.15s}
  .habit:hover{border-color:var(--line2);box-shadow:none}
  .habit.on{border-color:var(--accent);background:var(--accent-soft)}
  .habit .info{flex:1;min-width:0} .habit .info b{font-weight:600;display:block} .habit .info span{font-size:var(--fs-sm);color:var(--muted)}
  .habit .opt{font-size:var(--fs-2xs);color:var(--faint);text-transform:uppercase;letter-spacing:.4px}
  /* editor de rutina (modal Configurar) */
  .hcfg{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
  .hcfg:last-of-type{border-bottom:none}
  .hcfg .hc-fields{flex:1;display:flex;gap:8px;min-width:0}
  .hcfg .hc-label{flex:1;min-width:0}
  .hcfg .hc-target{width:64px;flex:none;text-align:center}
  .hcfg .hc-lock{color:var(--faint);font-size:var(--fs-xs);width:30px;text-align:center;flex:none}
  .hcfg .hc-del{color:var(--bad);flex:none}
  .hcfg input[type=checkbox]{flex:none;width:auto}
  /* presets de rutina */
  .preset-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .preset-btn{flex:1 1 0;min-width:120px;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:9px 11px;height:auto;line-height:1.25}
  .preset-btn b{font-weight:700;font-size:var(--fs-sm)}
  .preset-btn span{font-size:var(--fs-2xs);color:var(--muted);font-weight:400}
  @media(max-width:480px){.preset-btn{flex:1 1 100%}}
  /* day summary strip */
  /* Chip de racha en el header de HOY (reemplaza la métrica grande: la racha es dato pasivo, no compite con la rutina) */
  .strkchip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent2);border-radius:var(--radius-sm);padding:6px 14px;font-weight:600;font-size:var(--fs-sm);white-space:nowrap;cursor:default}
  .strkchip b{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg)}
  .strkchip.zero{background:var(--chip);color:var(--muted)}
  /* Aviso de sync minimizado: una línea al pie, no un banner que empuja la rutina */
  .sync-min{color:var(--muted);font-size:var(--fs-xs);margin-top:12px}
  .sync-min button{background:none;border:none;cursor:pointer;padding:0;font:inherit;color:var(--accent2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .sync-min button.dim{color:var(--muted);font-weight:500}
  /* D1 — briefing pre-partida */
  .briefing{border-top:1px solid var(--line);padding-top:10px;font-size:var(--fs-sm)}
  .briefing-head{font-weight:700;color:var(--ink);margin-bottom:10px}
  .briefing-block{padding:10px 0}
  .briefing-block+.briefing-block{border-top:1px solid var(--line)}
  .briefing-block.empty{opacity:.45}
  .briefing-block .colchip{margin-bottom:6px}
  .briefing-block .briefing-item{display:inline-block;padding:3px 8px;border-radius:var(--radius-sm);background:var(--panel2);color:var(--ink2);line-height:1.4;margin-top:4px}
  .briefing-block .briefing-item.muted{color:var(--muted)}
  .briefing-block .briefing-item.warn{background:var(--warn-bg,var(--chip));color:var(--warn,var(--ink2));margin-top:8px}
  .briefing-block .briefing-item.warn b{color:var(--warn)}
  .briefing .btn.accent.sm{margin-top:10px;display:inline-block;margin-right:8px}
  .briefing .btn.accent.sm:last-child{margin-right:0}
  .briefing .btn.cc{background:var(--cc);border-color:var(--cc);color:var(--on-accent)}
  .briefing .btn.lc{background:var(--lc);border-color:var(--lc);color:var(--on-accent)}
  /* Repertorio compacto: fila de lectura + edición al click (muere el formulario permanente) */
  /* flex-wrap sin breakpoint: las acciones bajan de línea solas cuando no entran, en el ancho
     real que haga falta. Un @media con un número fijo se desalinea apenas cambia el nombre de
     una apertura; esto no. */
  .reprow{display:flex;align-items:center;gap:8px;padding:11px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .reprow .rep-acts{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
  .reprow .rep-nm{font-weight:700;font-size:var(--fs-md);min-width:150px}
  /* min-width para que el stat BAJE de línea en vez de estrangularse: con un nombre largo al
     lado quedaba en una columna de 60px partido en cuatro renglones ("1 de 1 / ganadas /
     (100% / WR)"). Prefiere una línea propia antes que cuatro renglones de dos palabras. */
  .reprow .rep-st{flex:1;min-width:130px}
  .reprow.editing{background:var(--panel2);border-radius:var(--radius);padding:11px 10px;flex-wrap:wrap}
  .icobtn{border:1px solid var(--line2);background:none;border-radius:var(--radius);width:30px;height:30px;cursor:pointer;color:var(--ink2);font-size:var(--fs-sm);display:inline-flex;align-items:center;justify-content:center;flex:none;text-decoration:none;font-family:inherit;transition:.15s}
  .icobtn:hover{border-color:var(--accent);color:var(--accent2)}
  /* Hueco del mismo tamaño que un .icobtn, para que la columna de acciones del repertorio
     alinee cuando una fila no tiene study. Sin borde: reserva lugar, no simula un botón. */
  .icogap{width:30px;height:30px;flex:none}
  /* "Lo que te falta dominar": area apilada. El area completa es todo lo que entro a la cola; la
     parte verde, lo dominado. La franja que queda arriba ES lo pendiente — no se dibuja, se ve. */
  .drill-pile{width:100%;height:104px;display:block;margin:10px 0 2px}
  .dp-total{fill:var(--line2);opacity:.55}
  .dp-dom{fill:var(--accent);opacity:.55}
  .dp-line{stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .dp-eje{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--muted);margin-top:2px}
  .dp-leyenda{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--ink2);margin-top:2px}
  .dp-k{width:9px;height:9px;border-radius:2px;flex:none;display:inline-block}
  .dp-k:not(:first-child){margin-left:10px}
  .dp-k-dom{background:var(--accent);opacity:.75}
  .dp-k-pend{background:var(--line2)}
  /* Jugada del rival en el briefing: se lee como <code> pero es un botón que abre el tablero. */
  .pred-san-btn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:1px 6px;background:none;color:var(--ink2);cursor:pointer;transition:.15s}
  .pred-san-btn:hover{border-color:var(--accent);color:var(--accent2)}
  /* Hueco de preparación: te la van a jugar y nunca la viste. No va en muted — es lo más
     accionable de la línea, no una nota al pie. */
  .pred-hueco{color:var(--warn);font-style:normal;font-size:var(--fs-2xs)}
  /* Wave 16 Fase 5: línea de repertorio (it.line) en la fila de lectura — mismo tratamiento que
     .icobtn (borde fino, radius token, acento en hover) pero de ancho variable con texto, no ícono. */
  .rep-line-btn{border:1px solid var(--line2);background:none;border-radius:var(--radius);padding:4px 8px;cursor:pointer;color:var(--muted);font-size:var(--fs-xs);font-family:inherit;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;transition:.15s}
  .rep-line-btn:hover{border-color:var(--accent);color:var(--accent2)}
  /* Coach IA como flujo de pasos numerados (antes eran 2 columnas que fragmentaban el flujo) */
  .coach-step{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
  .coach-step:last-child{border-bottom:none}
  .coach-step .stepn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm)}
  .coach-step.done .stepn{background:var(--accent);color:var(--on-accent)}
  .coach-step .sc{flex:1;min-width:0}
  .coach-step .sc>b{display:block;margin-bottom:2px;font-size:var(--fs-md)}
  /* calendario: 4 meses reales, cada uno una cuadrícula tipo calendario (celdas fijas, sin huecos) */
  .calmonths{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px 24px;margin-top:12px}
  .cal-month{flex:0 0 auto}
  .cal-mlabel{font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);letter-spacing:.01em;color:var(--ink2);text-transform:capitalize;margin-bottom:8px}
  .cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,19px);gap:4px}
  .cal-dow{margin-bottom:5px}
  .cal-dow span{font-size:9px;color:var(--faint);text-align:center;font-weight:600;width:19px}
  .cal-grid .c{width:19px;height:19px;border-radius:4px; /* pill: celdas 19px, mas de 4px pierde definicion */background:var(--chip);transition:transform .1s} /* base: día sin actividad */
  .cal-grid .c.out{background:var(--panel2);opacity:.4;pointer-events:none} /* días de otro mes / futuros: gris tenue */
  @media(max-width:560px){.calmonths{justify-content:space-around;gap:18px}}
  .cal-grid .c.l1{background:var(--cal1)} .cal-grid .c.l2{background:var(--cal2)} .cal-grid .c.l3{background:var(--cal3)}
  .cal-grid .c.today{outline:2px solid var(--accent);outline-offset:1px}
  .cal-grid .c.manual{box-shadow:inset 0 0 0 1.5px var(--accent2)} /* día marcado a mano */
  .cal-grid .c:not(.empty){cursor:pointer} .cal-grid .c:not(.empty):hover{transform:scale(1.12)}
  table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
  th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:middle}
  th{color:var(--muted);font-weight:600;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0;background:var(--surface);z-index:1}
  th.sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s}
  #gtable td.c-date{white-space:nowrap} /* la fecha nunca se parte en dos líneas (en mobile ya lo tenía) */
  th.sortable:hover{color:var(--ink2)}
  th.sortable.sorted{color:var(--accent)}
  th.sortable .sarrow{font-size:9px}
  tr:hover td{background:var(--panel2)}
  /* chip de ritmo: inicial en círculo, color por ritmo (B rojo · Z naranja · R verde · D azul) */
  /* chip de ritmo: fondo lleno con su color, letra blanca. Tonos PROPIOS (no los de ganó/perdió,
     para no confundir un chip verde con "ganó"). Bullet rojo · Blitz naranja · Rapid verde · Daily azul. */
  .rhchip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--chip);color:var(--on-accent);font-size:var(--fs-2xs);font-weight:700;letter-spacing:0}
  .rhchip.rh-bullet{background:#c0392b}
  .rhchip.rh-blitz{background:#d98324}
  .rhchip.rh-rapid{background:#2e8b57}
  .rhchip.rh-daily{background:#3563c4}
  #gtable td.c-rhythm,#gtable th.c-rhythm{text-align:center;width:54px}
  .mrev{display:none} .mrevcell{display:none}
  .lbl-mob{display:none} /* etiqueta corta del header, solo en mobile */
  /* ===== Historial en MOBILE/TABLET (≤760px): lista compacta tappable (color+result · fecha · review) ===== */
  @media(max-width:760px){
    /* columnas que se ocultan: Final, Apertura, Mi Elo, Elo rival, Jug, Min */
    #gtable .c-final,#gtable .c-open,#gtable .c-myelo,
    #gtable .c-oppelo,#gtable .c-moves,#gtable .c-min{display:none}
    #gtable .c-sel{width:44px!important}
    #gtable .chk.gsel,#gtable .chk#sel-all{width:26px!important;height:26px!important}
    /* el botón suelto Revisar se oculta: en mobile se toca la fila entera. El header muestra "REV" corto. */
    #gtable td.c-rev .rev-btn{display:none}
    #gtable th.c-rev{font-size:var(--fs-2xs);text-align:right;white-space:nowrap}
    .lbl-desk{display:none} .lbl-mob{display:inline}
    /* header de tabla NO sticky en mobile: evita el choque con la barra superior fija al scrollear */
    #gtable th{position:static}
    #gtable td,#gtable th{padding:14px 8px}
    #gtable tbody tr{cursor:pointer}
    /* layout intencional: Color | Result | Fecha (der) | ✓︎ review (der) */
    #gtable td.c-color,#gtable th.c-color{width:42%}
    #gtable td.c-res,#gtable th.c-res{width:30%}
    #gtable td.c-date,#gtable th.c-date{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;text-align:right}
    #gtable td.c-rev,#gtable th.c-rev{width:34px;text-align:right;padding-left:0}
    /* indicador de review visible solo en mobile */
    .mrevcell{display:inline-flex;justify-content:flex-end}
    .mrev{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:var(--fs-sm);font-weight:700;background:var(--chip);color:var(--faint)}
    .mrev.analyzed{background:var(--ok-bg);color:var(--ok)}
    .mrev.done{background:var(--accent-soft);color:var(--accent2)}
    .mrev.coach{background:rgba(124,92,255,.15);color:var(--accent)}
    /* barra de selección también visible en mobile */
    #sel-bar{flex-wrap:wrap;gap:8px}
    .mobile-hide{display:none!important}
  }
  /* colores de botones ghost en la barra de selección (anda en ambos modos) */
  #sel-bar .btn.ghost.sm{color:var(--accent2);border-color:var(--accent2)}
  #sel-bar .btn.ghost.sm:hover{color:var(--ink);border-color:var(--ink)}
  /* Tabla "Por hora del día": grid de 5 columnas que aprovecha el ancho */
  .tbgrid{margin-top:10px}
  .tbrow{display:grid;grid-template-columns:1.3fr .9fr .8fr 2.2fr 1fr 24px;align-items:center;gap:16px;padding:12px 14px;border-radius:var(--radius);font-size:var(--fs-md)}
  .tbrow:not(.tbhead):nth-child(even){background:var(--bg)}
  .tband-go{cursor:pointer;transition:background .15s}
  .tband-go:hover{background:var(--accent-soft)!important}
  .tbgo{color:var(--muted);font-weight:700;text-align:center;opacity:0;transition:opacity .15s}
  .tband-go:hover .tbgo{opacity:1;color:var(--accent)}
  .tbhead{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;padding-bottom:6px;padding-top:0}
  .tbfaint{opacity:.5}
  .tbband{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);letter-spacing:-.01em}
  .tbhint{color:var(--muted);font-size:var(--fs-sm)}
  .tbnum{text-align:right;font-variant-numeric:tabular-nums}
  .tbwr{display:flex;align-items:center;gap:12px}
  .tbwr b{min-width:42px;font-size:var(--fs-md)}
  .tbbar{flex:1;height:8px;border-radius:var(--radius-sm);background:var(--chip);overflow:hidden}
  .tbbar>span{display:block;height:100%;border-radius:var(--radius-sm)}
  @media(max-width:640px){
    /* Cada franja = bloque: nombre + horario arriba, y 3 stats con etiqueta abajo */
    .tbhead{display:none}
    .tbgo{display:none}
    .tbrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 10px;padding:10px 14px;margin-bottom:0;border:none;border-bottom:1px solid var(--line);border-radius:0}
    .tbrow:not(.tbhead):nth-child(even){background:var(--surface)}
    .tband-go:active{background:var(--accent-soft)!important}
    .tbband{grid-column:1/-1;grid-row:1}
    .tbband::after{content:" · " attr(data-hint);font-weight:400;color:var(--muted)}
    .tbhint{display:none}
    /* las 3 métricas en fila, cada una con su etiqueta arriba (ubicadas por data-lbl) */
    .tbrow>[data-lbl=""+t('progreso.timeband.partidas')+""]{grid-column:1;grid-row:2}
    .tbrow>.tbwr{grid-column:2;grid-row:2}
    .tbrow>[data-lbl=""+t('progreso.timeband.precision')+""]{grid-column:3;grid-row:2}
    .tbnum,.tbwr{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
    .tbnum{font-size:var(--fs-sm)}
    .tbwr b{font-size:var(--fs-sm)}
    .tbnum::before{content:attr(data-lbl);font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
    .tbwr::before{content:"WIN %";font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;order:-1}
    .tbwr .tbbar{display:none}
  }
  /* Card "¿Cómo venís?" (comparación temporal) */
  .cmpgrid{margin-top:8px}
  .cmprow{display:grid;grid-template-columns:1fr auto 110px 120px;align-items:baseline;gap:16px;padding:11px 4px;border-top:1px solid var(--line)}
  .cmprow:first-child{border-top:none}
  .cmphead{border-top:none;padding-bottom:4px}
  .cmphead span{font-family:var(--font-body)!important;font-weight:700!important;font-size:var(--fs-2xs)!important;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)!important;opacity:1!important}
  .cmplab{color:var(--ink2);font-size:var(--fs-md)}
  .cmpcur{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);letter-spacing:-.02em;text-align:right}
  .cmpprev{font-size:var(--fs-sm);text-align:right;white-space:nowrap}
  .cmpdelta{font-size:var(--fs-sm);font-weight:600;text-align:right;white-space:nowrap}
  .cmprow-weak .cmpcur{opacity:.7}
  .cmpweak{color:var(--faint);font-size:var(--fs-2xs);cursor:help}
  @media(max-width:560px){.cmprow{grid-template-columns:1fr auto;gap:2px 14px;padding:8px 4px;align-items:center}.cmplab{grid-column:1;grid-row:1;font-size:var(--fs-sm)}.cmpcur{grid-column:2;grid-row:1;font-size:var(--fs-lg)}.cmpprev{grid-column:1;grid-row:2;font-size:var(--fs-2xs);text-align:left;white-space:normal}.cmpdelta{grid-column:2;grid-row:2;font-size:var(--fs-2xs);text-align:right}}
  /* Card "Rendimiento vs lo esperado" */
  .hashelp{cursor:help;border-bottom:1px dotted var(--faint);position:relative}
  .hashelp .qmark{display:inline-block;width:14px;height:14px;line-height:14px;text-align:center;border-radius:50%;background:var(--chip);color:var(--muted);font-size:9px;font-weight:700;vertical-align:1px}
  /* tooltip propio: aparece instantáneo, legible, no el title lento del navegador */
  .hashelp .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
    width:280px;max-width:80vw;background:var(--ink);color:var(--surface);text-align:left;font-weight:400;
    font-size:var(--fs-sm);line-height:1.5;text-transform:none;letter-spacing:normal;padding:11px 13px;border-radius:10px; /* tooltip: suave intencional */
    box-shadow:0 8px 28px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:80}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hashelp .tip{background:var(--panel2);color:var(--ink);border:1px solid var(--line2)}}
  html[data-theme="dark"] .hashelp .tip{background:var(--panel2);color:var(--ink);border:1px solid var(--line2)}
  .hashelp .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hashelp .tip::after{border-top-color:var(--panel2)}}
  html[data-theme="dark"] .hashelp .tip::after{border-top-color:var(--panel2)}
  .hashelp:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}
  .tiergrid{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
  .tierhead{background:var(--bg);padding:9px 14px;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
  .tierrow{display:grid;grid-template-columns:1fr 190px 56px;align-items:center;gap:24px;padding:11px 14px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
  .tierlab{font-weight:600;min-width:0}
  .tierrec{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;display:inline-flex;align-items:baseline;gap:4px;justify-content:flex-end}
  .tierrec .trv{font-weight:600}
  .tierrec .trl{color:var(--muted);font-size:var(--fs-xs);margin-right:2px}
  .tierrec .trsep{color:var(--faint);margin:0 3px}
  .tierwr{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);text-align:right}
  @media(max-width:560px){.tierrow{grid-template-columns:1fr auto;gap:6px 14px;row-gap:2px}.tierlab{grid-column:1/-1}.tierrec{justify-content:flex-start;text-align:left}}
  .prow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius);font-size:var(--fs-sm);cursor:pointer;transition:background .15s}
  .prow:hover{background:var(--bg)}
  .prow .pinfo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ptag{font-size:var(--fs-2xs);font-weight:700;padding:3px 8px;border-radius:var(--radius-sm);white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
  .ptag.pbad{background:var(--bad-bg);color:var(--bad)}
  .ptag.pwarn{background:var(--warn-bg);color:var(--warn)}
  .ptag.pgood{background:var(--ok-bg);color:var(--ok)}
  .pgo{color:var(--muted);font-weight:700;opacity:0;transition:opacity .15s}
  .prow:hover .pgo{opacity:1;color:var(--accent)}
  /* Rendimiento por apertura: dos tablas lado a lado (desktop) / apiladas (mobile) */
  .perf-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
  @media(max-width:720px){.perf-cols{grid-template-columns:1fr;gap:26px}}
  .perf-col{min-width:0}
  .perf-head{margin:0 0 8px;font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
  /* ---- árbol de aperturas ---- */
  .optree .tnode{margin-bottom:6px}
  .optree .trow{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:6px 12px;padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);position:relative}
  .optree .trow.faint{opacity:.5}
  .optree .trow.clickable{cursor:pointer}
  .optree .trow.clickable:hover{border-color:var(--line2)}
  .optree .tcaret{color:var(--muted);font-size:var(--fs-2xs);transition:transform .15s;text-align:center}
  .optree .tcaret.open{transform:rotate(90deg)}
  .optree .tlabel{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .optree .tlabel.trunc{cursor:pointer}
  .optree .tlabeltip{position:absolute;bottom:calc(100% - 4px);left:24px;width:max-content;max-width:min(360px,80vw);
    background:var(--ink);color:var(--surface);text-align:left;font-weight:400;white-space:normal;
    font-size:var(--fs-sm);line-height:1.45;letter-spacing:normal;padding:9px 12px;border-radius:10px; /* tooltip: suave intencional */
    box-shadow:0 8px 28px rgba(0,0,0,.3);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s,transform .12s;z-index:80}
  .optree .tlabeltip::after{content:"";position:absolute;top:100%;left:16px;border:6px solid transparent;border-top-color:var(--ink)}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .optree .tlabeltip{background:var(--panel2);color:var(--ink);border:1px solid var(--line2)} :root:not([data-theme="light"]) .optree .tlabeltip::after{border-top-color:var(--panel2)}}
  html[data-theme="dark"] .optree .tlabeltip{background:var(--panel2);color:var(--ink);border:1px solid var(--line2)} html[data-theme="dark"] .optree .tlabeltip::after{border-top-color:var(--panel2)}
  .optree .trow:has(.tlabel.trunc:hover) .tlabeltip,.optree .trow.tipshow .tlabeltip{opacity:1;transform:translateY(0)}
  .optree .tlabel.root{font-family:var(--font-display);font-weight:800;font-size:var(--fs-md);letter-spacing:-.01em}
  .optree .tlabel.tgroup{font-weight:500;color:var(--muted);font-style:italic}
  .optree .tmeta{display:flex;align-items:center;gap:12px;font-size:var(--fs-xs);white-space:nowrap}
  .optree .tbtns{display:flex;align-items:center;gap:8px;margin-left:auto}
  .optree .tn{color:var(--muted)}
  .optree .twr{font-weight:700}
  .optree .tbar{display:inline-block;width:40px;height:6px;border-radius:var(--radius-sm);background:var(--chip);overflow:hidden;vertical-align:middle}
  .optree .tbar>span{display:block;height:100%}
  .optree .tacc{color:var(--accent2);font-weight:600}
  .optree .tacc .accn{color:var(--faint);font-size:var(--fs-2xs);font-weight:400}
  .optree .tchildren{margin:4px 0 0 14px;padding-left:10px;border-left:2px solid var(--line)}
  .optree .tuse{margin-left:2px}
  .optree .empty{padding:24px 12px}
  /* Mobile: el nombre de la apertura en su propia línea (full width) y la meta debajo,
     para que se lea completo en pantallas angostas. */
  @media(max-width:560px){
    .optree .trow{grid-template-columns:16px 1fr;row-gap:8px}
    .optree .tmeta{grid-column:1/-1;gap:14px}
    .optree .tbtns{margin-left:auto}
  }
  .pill{display:inline-block;padding:3px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:600}
  .pill.w{background:var(--ok-bg);color:var(--ok)} .pill.l{background:var(--bad-bg);color:var(--bad)} .pill.d{background:var(--chip);color:var(--ink2)}
  .colchip{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
  .colchip .sq{width:15px;height:15px;border-radius:var(--radius);flex-shrink:0}
  .colchip .sq.w{background:var(--piece-w);border:1.5px solid var(--piece-w-edge)} .colchip .sq.b{background:var(--piece-b);border:1.5px solid var(--piece-b-edge)}
  .rev-btn{font-family:inherit;font-size:var(--fs-xs);font-weight:600;border-radius:var(--radius-sm);padding:4px 11px;cursor:pointer;white-space:nowrap;border:1px dashed var(--line2);background:none;color:var(--muted);transition:.15s}
  .rev-btn:hover{border-style:solid;border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
  .rev-btn.done{border:1px solid transparent;background:var(--ok-bg);color:var(--ok)}
  .rev-btn.done:hover{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
  .rev-btn.analyzed{border:1.5px solid var(--accent);color:var(--accent)}
  .rev-btn.analyzed:hover{background:rgba(118,150,86,.08);border-color:var(--accent);color:var(--accent2)}
  .rev-btn.analyzed.done{border:1.5px solid var(--accent);background:var(--ok-bg);color:var(--accent)}
  .rev-btn.coached{border:1.5px solid var(--accent);color:var(--accent);background:rgba(118,150,86,.08)}
  /* botón "ver en tablero" en la tabla de partidas */
  .board-btn{border:none;background:none;cursor:pointer;padding:3px;margin-right:2px;vertical-align:middle;color:var(--line2);border-radius:var(--radius);line-height:0;transition:.12s}
  .board-btn:hover{color:var(--accent);background:var(--accent-soft)}
  .board-btn svg{width:15px;height:15px;display:block}
  .rev-btn.coached:hover{background:rgba(118,150,86,.14);border-color:var(--accent);color:var(--accent)}
  .rev-btn.coached.done{border:1.5px solid var(--accent);background:var(--ok-bg);color:var(--accent)}
  .rev-btn.coached.analyzed{border:1.5px solid var(--accent);color:var(--accent);background:rgba(118,150,86,.08)}
  .rev-btn.coached.analyzed:hover{background:rgba(118,150,86,.14);border-color:var(--accent);color:var(--accent)}
  .rev-btn.coached.analyzed.done{border:1.5px solid var(--accent);background:var(--ok-bg);color:var(--accent)}
  .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .field{display:flex;flex-direction:column;gap:5px} .field label{font-size:var(--fs-xs);color:var(--muted)}
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .filters select,.filters input{width:auto;min-width:120px}
  .empty{text-align:center;padding:38px 30px;color:var(--muted);font-size:var(--fs-md)} .empty i{font-size:34px;display:block;margin-bottom:10px;opacity:.4;font-style:normal}
  .insight{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;margin-bottom:10px;display:flex;gap:13px;align-items:flex-start}
  .insight i.lead{font-size:var(--fs-xl);margin-top:1px;font-style:normal} .insight b{font-weight:600}
  /* last-game insight banner */
  .lastgame{background:var(--accent-soft);border:1px solid transparent;border-radius:var(--radius);padding:15px 18px;margin-bottom:16px;display:flex;gap:12px;align-items:center;color:var(--accent2)}
  .lastgame .big{font-size:var(--fs-display);font-style:normal}
  .lastgame b{font-weight:700;color:var(--accent2)}
  /* banner dismissable: invita a hacer el Review para desbloquear insights de errores */
  .review-tip{background:var(--accent-soft);border:1px solid transparent;border-radius:var(--radius);padding:13px 16px;margin-bottom:16px;display:flex;gap:12px;align-items:flex-start;color:var(--accent2)}
  .review-tip .rt-ic{font-size:var(--fs-lg);line-height:1.3;flex:none}
  .review-tip .rt-body{flex:1;font-size:var(--fs-md);line-height:1.5}
  .review-tip .rt-body b{font-weight:700;color:var(--accent2)}
  .review-tip .rt-x{flex:none;background:none;border:none;color:var(--accent2);cursor:pointer;font-size:var(--fs-md);opacity:.65;padding:2px 4px;line-height:1;border-radius:var(--radius-sm)}
  .review-tip .rt-x:hover{opacity:1;background:rgba(0,0,0,.06)}
  .review-tip .rt-link{background:none;border:none;color:var(--accent2);font-weight:700;cursor:pointer;padding:0;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
  /* auto-sync: toast + spinner del botón manual */
  /* Wave 16 Fase 5: z-index subido de 90 a 130 (bug reportado por Ignacio 2026-07-11) — un toast
     disparado DESDE un tablero abierto dentro de un modal (ej. "Mandar línea al repertorio" desde
     el pop-up de una partida) quedaba atrás del backdrop difuminado del modal (.modal-bg, z-index
     100/111) y era invisible. Un toast es feedback transitorio/urgente: siempre va por encima de
     todo lo demás en la página, incluido el overlay de onboarding guiado (.tour-*, tope 122 hoy). */
  .sync-toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(12px);z-index:130;background:var(--ink);color:var(--surface);padding:9px 18px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
  @media(prefers-color-scheme:dark){.sync-toast{background:var(--panel2);color:var(--ink);border:1px solid var(--line2)}}
  .sync-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .manual-sync-btn.spinning{animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.manual-sync-btn.spinning{animation:none}}
  canvas{max-width:100%}
  .legend-toggle{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .lchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:var(--radius-sm);padding:6px 13px;font-size:var(--fs-sm);font-weight:500;cursor:pointer;background:var(--bg);color:var(--ink);transition:.15s;user-select:none}
  .lchip:hover{border-color:var(--ink)}
  .lchip .swatch{width:14px;height:3px;border-radius:var(--radius);flex-shrink:0}
  .lchip.off{opacity:.4;background:var(--panel2)} .lchip.off .swatch{opacity:.35}
  .seg{display:inline-flex;background:var(--panel2);border-radius:var(--radius-sm);padding:3px;gap:2px}
  .seg button{border:none;background:none;color:var(--muted);font-family:inherit;font-size:var(--fs-sm);font-weight:600;padding:6px 16px;border-radius:18px; /* pill: segmentos redondeados intencional */cursor:pointer;transition:.15s}
  .seg button.on{background:var(--surface);color:var(--ink);box-shadow:none}
  .ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  @media(max-width:540px){.ggrid{grid-template-columns:repeat(2,1fr)}}
  .gcell{padding:16px;text-align:center;border-right:1px solid var(--line);background:var(--bg)}
  .gcell:last-child{border-right:none}
  .gcell .gl{font-size:var(--fs-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
  .gcell .gv{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
  .gcell .gp{font-size:var(--fs-xs);font-weight:600;margin-top:2px}
  .acc{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--bg)}
  .acc>summary{padding:14px 16px;cursor:pointer;font-weight:600;font-size:var(--fs-md);list-style:none;display:flex;align-items:center;gap:10px}
  .acc>summary::-webkit-details-marker{display:none}
  .acc>summary .chev{margin-left:auto;color:var(--faint);transition:transform .2s}
  .acc[open]>summary .chev{transform:rotate(90deg)}
  .acc .body{padding:2px 16px 16px}
  .acc .body p{margin:0 0 9px;font-size:var(--fs-md);color:var(--ink2);line-height:1.6}
  .acc .body p:last-child{margin-bottom:0}
  .helphero{background:var(--accent-soft);border:1px solid transparent;border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}
  .helphero h3{margin:0 0 8px;font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;color:var(--accent2)}
  .helphero p{margin:0 0 8px;font-size:var(--fs-md);color:var(--accent2);line-height:1.6}
  .stepnum{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:var(--fs-xs);font-weight:700;flex-shrink:0;margin-right:9px}
  .topstat{text-align:center} .topstat .tl{font-size:var(--fs-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
  .topstat .tv{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:4px} .topstat .ts{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
  .ratecard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
  .ratecard .rt{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
  .ratecard .nums{display:flex;align-items:center;gap:7px;margin-top:8px} .ratecard input{width:70px;text-align:center}
  .sync-box{border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--radius);padding:14px 16px}
  .sync-box input[type=month]{font-family:inherit;font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 8px;background:var(--surface);color:var(--ink)}
  .adv-toggle{margin-top:12px;background:none;border:none;color:var(--accent2);font-family:inherit;font-size:var(--fs-xs);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
  .adv-panel{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2);display:none}
  .adv-panel.open{display:block}
  .plat-toggle{display:flex;gap:6px;margin-bottom:10px}
  .plat-opt{flex:1;text-align:center;padding:8px;border:1px solid var(--line2);border-radius:var(--radius-sm);font-size:var(--fs-xs);cursor:pointer;color:var(--ink2)}
  .plat-opt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent2);font-weight:600}
  .adv-hint{font-size:var(--fs-2xs);color:var(--faint);margin-top:6px}
  .adv-msg{font-size:var(--fs-xs);margin-top:8px;min-height:16px}
  .adv-msg.err{color:var(--bad)}
  .drop{border:2px dashed var(--line2);border-radius:var(--radius);padding:30px;text-align:center;color:var(--muted);transition:.15s;cursor:pointer;background:var(--bg)}
  .drop:hover{border-color:var(--accent);color:var(--ink)}
  .drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent2)}
  .drop b{color:var(--ink)} .drop .big{font-size:32px;display:block;margin-bottom:8px;font-style:normal;color:var(--accent)}
  .modal-bg{position:fixed;inset:0;background:rgba(15,14,11,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:100;backdrop-filter:blur(2px)}
  .modal{background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius);padding:24px;max-width:640px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
  /* header del modal de partida: dos mitades (Lichess / Chess.com) */
  .analyze-split{display:flex;width:calc(100% + 48px);margin:-24px -24px 18px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
  .analyze-half{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 16px;border:none;color:#fff; /* heads de plataforma: bg fijos Lichess/Chess-com */font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);letter-spacing:-.02em;cursor:pointer;transition:.15s;text-decoration:none}
  .analyze-half.lichess{background:var(--panel2);color:var(--ink)} .analyze-half.lichess:hover{background:var(--line)}
  .analyze-half.chesscom{background:#5a9e3f} .analyze-half.chesscom:hover{background:#4e8a36}
  .analyze-half+.analyze-half{border-left:1px solid var(--line)}
  .analyze-half:active{transform:scale(.99)}
  .analyze-half .horse{font-size:var(--fs-lg);line-height:1} .analyze-half .arr{font-size:var(--fs-sm);opacity:.85}
  @media(max-width:560px){.analyze-split{flex-direction:column} .analyze-half+.analyze-half{border-left:none;border-top:1px solid var(--line)}}
  .anbox{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}
  .angrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;margin-bottom:12px}
  .ancell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:9px 6px;text-align:center}
  .ancell .v{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1}
  .ancell .l{font-size:var(--fs-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:600;margin-top:3px}
  .anmove{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);padding:3px 0}
  /* .anmove pasa a permitir wrap: la línea de por qué del tag de Maia ocupa el ancho completo
     debajo de la fila (flex-basis:100%). Sin wrap se metía en la misma línea y la rompía. */
  .anmove{flex-wrap:wrap;align-items:baseline}
  /* Tag de rareza de Maia (SPEC-maia.md, ola 5). Los tres peldaños usan el MISMO verde: un color
     distinto por nivel diría que son cosas distintas, y son la misma con más intensidad. */
  .mtag{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.02em;padding:2px 8px;
    border-radius:var(--radius-sm);background:var(--ink);color:var(--bg);white-space:nowrap}
  .mtag.mtag-50{background:var(--accent2);color:var(--surface)}
  .mtag.mtag-100{background:var(--accent2);color:var(--surface);
    box-shadow:inset 0 0 0 2px var(--surface),0 0 0 2px var(--accent2)}
  .mwhy{flex-basis:100%;font-size:var(--fs-xs);color:var(--ink2);margin:3px 0 0 0;
    padding-left:10px;border-left:2px solid var(--accent)}
  .mwhy b{font-weight:700}
  .mwhy .ev{color:var(--bad);font-weight:700}
  .mfoot{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line2);
    font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
  .mfoot b{color:var(--ink2);font-weight:600}
  .mfoot-link{color:var(--accent2);text-decoration:none;border-bottom:1px solid var(--accent);white-space:nowrap}
  .mfoot-link:hover{background:var(--accent-soft)}
  .mfoot-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* Filtro de la galería de mejores jugadas: botones pill + toggle de orden */
  .gal-filter{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:8px;padding:4px 0}
  .gal-f-btn{font-size:var(--fs-2xs);font-weight:600;padding:2px 8px;border:1px solid var(--line2);
    border-radius:var(--radius-sm);background:var(--surface);color:var(--muted);cursor:pointer;
    font-family:var(--font-body);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
  .gal-f-btn:hover{background:var(--accent-soft);color:var(--accent2);border-color:var(--accent)}
  .gal-f-btn.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .gal-sort{margin-left:auto;font-size:var(--fs-2xs);color:var(--ink2);cursor:pointer;white-space:nowrap;
    padding:2px 4px;border-radius:var(--radius-sm);transition:background .15s}
  .gal-sort:hover{background:var(--chip)}
  .gal-sort-ic{font-size:var(--fs-xs);margin-right:2px}
  /* Desglose de errores: filas con barra + porcentaje */
  .eb-row{display:flex;align-items:baseline;gap:6px;padding:4px 0}
  .eb-lbl{font-size:var(--fs-xs);color:var(--ink);min-width:80px}
  .eb-bar{height:6px;border-radius:var(--radius-sm);background:var(--accent);min-width:10px;opacity:.65}
  /* El número ("1 de cada N") es el dato; la categoría sobrevive sólo como color de la barra.
     Se reusan los colores que YA tienen los chips por error (.mrow-tag): ámbar = la mayoría la
     encuentra (es tuyo), gris neutro = casi nadie (no es tu error). Nunca rojo/verde: ahí el
     verde leería como "bien hecho" sobre un error, y estos colores son dificultad, no juicio. */
  .pred-block{padding:11px 0;border-bottom:1px solid var(--line)}
  .pred-block:last-of-type{border-bottom:none}
  .pred-op{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
  .pred-line{font-size:var(--fs-2xs);font-family:var(--font-body)}
  /* Tabla de "qué te van a jugar".
     Desktop: grilla de anchos FIJOS y bloque acotado. La versión anterior daba 1fr a una columna,
     así que en pantalla ancha los botones terminaban a 800px de los datos que gobiernan — se perdía
     la relación entre la fila y su acción (proximidad).
     Mobile: no se conserva la tabla. Los encabezados se ocultan y cada etiqueta viaja adentro de su
     dato; antes se pisaban entre sí ("RESPUESTALA ENFRENTASTE") y cada fila ocupaba media pantalla. */
  .pred-table{max-width:none}
  /* La barra ocupa el ancho sobrante de la tarjeta (1fr). Antes la tabla estaba capada a 660px
     para que los botones no se alejaran de sus datos, y eso dejaba media tarjeta vacía a la
     derecha. La barra resuelve las dos cosas: llena el espacio Y hace comparable la distribución
     de un vistazo, que es exactamente lo que esta tabla quiere comunicar. */
  /* La última columna va con ANCHO FIJO, no auto. Con auto, el header (que la tiene vacía, 0px) y
     las filas (que tienen los botones, ~145px) resolvían distinto la columna flexible y el header
     entero quedaba corrido 145px a la derecha respecto de sus datos. Son dos grillas hermanas: si
     alguna columna depende del contenido, no alinean. */
  .pred-row{display:grid;grid-template-columns:56px minmax(60px,1fr) 72px 116px 132px 152px;
    align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
  .pred-row:last-of-type{border-bottom:none}
  .pred-th{border-bottom:1px solid var(--line2);padding-bottom:6px;align-items:end}
  .pred-th span{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.4px;
    color:var(--muted);font-weight:700;line-height:1.2;white-space:nowrap}
  .pred-pct{font-weight:800;font-size:var(--fs-md);color:var(--accent2);font-variant-numeric:tabular-nums}
  .pred-san{font-size:var(--fs-sm)}
  .pred-n,.pred-wr{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
  .pred-ok{color:var(--ok)} .pred-mal{color:var(--bad)}
  .pred-poca{font-size:var(--fs-2xs)}
  .pred-bar{display:block;height:8px;border-radius:var(--radius-sm);background:var(--chip);overflow:hidden}
  .pred-bar>span{display:block;height:100%;background:var(--accent);opacity:.75}
  .pred-acc{display:flex;gap:6px;justify-content:flex-end}
  .pred-lbl{display:none}   /* solo mobile */
  .pred-reco{margin-top:12px;padding:10px 12px;background:var(--accent-soft);border-left:3px solid var(--accent);
    border-radius:var(--radius);display:flex;flex-direction:column;gap:3px;font-size:var(--fs-sm);line-height:1.5;max-width:660px}
  .pred-reco b{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.4px;color:var(--accent2)}
  @media(max-width:700px){
    /* Los botones suben a la misma línea que la jugada. Con una fila propia cada opción medía
       146px y cuatro opciones eran ~580px de scroll: se perdía poder COMPARARLAS, que es para lo
       único que existe la tabla. Así cada una entra en ~100px y se ven las cuatro juntas. */
    .pred-th{display:none}
    .pred-row{grid-template-columns:auto 1fr auto;gap:1px 10px;padding:10px 0;align-items:baseline}
    .pred-th span:nth-child(2){display:none}
    .pred-pct{grid-column:1;grid-row:1;font-size:var(--fs-lg)}
    .pred-bar{grid-column:1/-1;grid-row:2;margin:3px 0 1px}
    .pred-san{grid-column:2;grid-row:1;font-size:var(--fs-md)}
    .pred-acc{grid-column:3;grid-row:1;align-self:center}
    .pred-acc .btn{padding:7px 10px;font-size:var(--fs-2xs);min-height:44px} /* objetivo táctil */
    .pred-n{grid-column:1/-1;grid-row:3}
    .pred-wr{grid-column:1/-1;grid-row:4}
    .pred-lbl{display:inline;font-style:normal;font-size:var(--fs-2xs);text-transform:uppercase;
      letter-spacing:.4px;color:var(--muted);font-weight:700;margin-right:6px}
    .pred-reco,.pred-table{max-width:none}
  }
  .u7-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line)}
  .u7-row:last-child{border-bottom:none}
  .u7-meta{font-size:var(--fs-2xs);font-weight:700;color:var(--warn);background:var(--warn-bg);padding:1px 6px;border-radius:var(--radius)}
  .u7-best{font-size:var(--fs-xs);color:var(--muted)}
  .u7-open{font-size:var(--fs-2xs);margin-left:auto}
  .eb-head{margin:0 0 12px;padding:11px 13px;background:var(--warn-bg);border-left:3px solid var(--warn);
    border-radius:var(--radius);display:flex;flex-direction:column;gap:4px}
  .eb-head b{font-size:var(--fs-md);color:var(--ink)}
  .eb-head a{color:var(--warn);font-weight:600;align-self:flex-start;margin-top:2px}
  .eb-note{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);line-height:1.45}
  .eb-note a{color:var(--accent2);font-weight:600;white-space:nowrap}
  .eb-desc .eb-bar{background:var(--warn)}
  .eb-dif .eb-bar{background:var(--ink2);opacity:.45}
  .eb-pct{font-size:var(--fs-sm);font-weight:700;color:var(--ink);min-width:32px;text-align:right}
  .eb-n{font-size:var(--fs-2xs);color:var(--muted)}
  /* U2: escalera de Maia sobre las CRÍTICAS (SPEC-maia.md §4.bis, mockups/u2-critica.html).
     flex-basis:100% porque vive dentro de .anmove (flex-wrap), igual que .mwhy arriba: ocupa
     el ancho completo debajo de la fila de la jugada en vez de meterse en la misma línea. */
  /* La escalera cuelga de SU jugada, no flota entre dos. Sin la sangría y el borde izquierdo
     quedaba como una fila hermana con el mismo peso visual que las jugadas, y se leía como si
     perteneciera a la de abajo. Mismo recurso que .mwhy usa para el tag de rareza. */
  .mrow{flex-basis:100%;margin:6px 0 10px 0;padding:8px 0 0 12px;border-left:2px solid var(--line2);
    display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .mrow-txt{flex:1 1 250px;min-width:0}
  .mrow-tag{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;
    letter-spacing:.07em;padding:2px 7px;border-radius:var(--radius-sm);margin-bottom:5px}
  .mrow-tag.desc{background:var(--warn-bg);color:var(--warn)}
  .mrow-tag.dif{background:var(--chip);color:var(--ink2)}
  .mrow-tag.tip{background:var(--accent-soft);color:var(--accent2)}
  .mrow-copy{font-size:var(--fs-sm);color:var(--ink2);line-height:1.45}
  .mrow-copy b{color:var(--ink);font-weight:700}
  /* Cuatro peldaños, SIEMPRE relativos al nivel propio (-200/tu nivel/+200/+400), nunca Elo
     absoluto (SPEC §4.bis, no negociable). */
  .lad{display:flex;gap:5px;align-items:flex-end;height:56px;flex:0 0 auto}
  .lad-c{display:flex;flex-direction:column;align-items:center;gap:4px;width:46px}
  .lad-bar{width:100%;height:40px;background:var(--panel2);border:1px solid var(--line);
    border-radius:var(--radius-sm);position:relative;overflow:hidden}
  /* min-height 2px: sin piso, un 2% mide 0.8px y no se ve. El número al lado es la afirmación real. */
  .lad-fill{position:absolute;left:0;right:0;bottom:0;background:var(--accent);opacity:.42;min-height:2px}
  .lad-c.me .lad-fill{opacity:1}
  .lad-c.me .lad-bar{border-color:var(--accent);border-width:1.5px}
  .lad-pct{font-size:var(--fs-2xs);font-weight:700;color:var(--ink2);line-height:1}
  .lad-c.me .lad-pct{color:var(--accent2)}
  .lad-lbl{font-size:9.5px;color:var(--muted);line-height:1;white-space:nowrap}
  .lad-c.me .lad-lbl{color:var(--ink2);font-weight:700}
  .antag{font-size:var(--fs-2xs);font-weight:600;padding:2px 7px;border-radius:var(--radius-sm);min-width:58px;text-align:center}
  .antag.gtag-motor{background:var(--accent-soft);color:var(--accent)}
  .badge-rev{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:600;padding:2px 8px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent2)}
  /* nuestro análisis (Stockfish): azul tinta, distinto del verde de Chess.com */
  .anbox-coach{border-color:var(--accent)}
  .badge-coach{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent)}
/* indicador "CC" chico al lado del accuracy cuando viene de Chess.com */
.badge-cc-src,.badge-lc-src{display:inline-block;font-size:8px;font-weight:800;letter-spacing:.3px;padding:1px 4px;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);vertical-align:super;margin-left:2px;line-height:1.3}
.badge-cc-src{background:var(--cc)}.badge-lc-src{background:var(--lc)}
/* chips de plataforma en la tabla de historial */
.plat-chip{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.3px;padding:1px 5px;border-radius:var(--radius-sm);color:var(--on-accent);line-height:1.4}
.plat-chip.cc{background:var(--cc)}.plat-chip.lc{background:var(--lc)}
/* Entrenar v3 (C1): chip de lado en el header del puzzle — "Tus piezas" (acento normal) vs
   "Piezas del rival" (warn, para que se note que el tablero está invertido a propósito) */
.badge-side{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-sm);margin-right:6px}
.badge-side.me{background:var(--accent-soft);color:var(--accent2)}
.badge-side.opp{background:var(--warn-bg);color:var(--warn)}
  /* filas de jugada crítica (análisis del motor) */
  .critrow{padding:9px 0;border-top:1px solid var(--line)}
  .critrow:first-of-type{border-top:none}
  .critrow-top{display:flex;align-items:center;gap:9px}
  .critrow-bot{margin-top:3px;padding-left:2px;font-size:var(--fs-sm);color:var(--muted)}
  .critrow-bot b{color:var(--ink2);font-weight:600}
  .sevchip{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:var(--radius-sm);flex:none}
  .sevchip.sev-grave{background:var(--bad-bg);color:var(--bad)}
  .sevchip.sev-error{background:var(--warn-bg);color:var(--warn)}
  .sevchip.sev-good{background:var(--accent-soft);color:var(--accent)}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .rep{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
  .rep:last-child{border-bottom:none}
  .preview-game{font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;margin-bottom:8px;display:flex;gap:10px;align-items:center}
  .badge{font-size:var(--fs-2xs);padding:3px 9px;border-radius:var(--radius-sm);background:var(--chip);color:var(--ink2);font-weight:500}
  /* --- Animaciones de transición --- */
  @keyframes fadeSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes scaleIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
  .tab-content{animation:fadeSlideIn .2s ease backwards}
  .metric .val{animation:scaleIn .25s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:.1s}
  /* card principal: jerarquía visual */
  .card.primary{border-top:3px solid var(--accent);border-radius:var(--radius);box-shadow:none;transition:transform .2s ease}
  .card.primary:hover{transform:translateY(-1px)}
  @media(prefers-reduced-motion:reduce){.tab-content,.metric .val,.card.primary{animation:none!important;transition:none!important}}
  /* Coach IA: 2 columnas en desktop */
  @media(min-width:768px){
    /* (el Coach IA pasó de 2 columnas a un solo flujo de pasos; ver .coach-steps) */
  }

  /* ============ OPTIMIZACIÓN MOBILE (≤560px) — no afecta desktop ============ */
  @media(max-width:560px){
    body{overflow-x:hidden}
    .wrap{padding:0 14px 64px}
    .top .wrap{padding:11px 14px;gap:10px}
    /* header compacto: ocultar subtítulo y texto del sync, dejar solo logo+título+dot */
    #subtitle{display:none}
    .title b{font-size:var(--fs-md)}
    .sync{padding:6px 8px;gap:0} #syncmsg{display:none}
    .logo{width:38px;height:38px}
    /* cards con menos padding para ganar ancho útil */
    .card{padding:16px 14px;margin-bottom:14px}
    .card h2{font-size:var(--fs-xl)}
    /* tabs: más compactas, siguen con scroll horizontal */
    .tabs{gap:4px;margin-bottom:16px;-webkit-overflow-scrolling:touch}
    .tab{padding:8px 12px;font-size:var(--fs-sm)}
    /* toolbar (perfil/sync/export/import): que envuelva y los botones sean tappables */
    .toolbar{flex-wrap:wrap;gap:8px}
    .toolbar .btn{flex:1 1 calc(50% - 4px);justify-content:center;min-height:44px}
    /* controles de Progreso: ritmo + plazo + PDF en la misma fila */
    #tab-progreso .card>.row:first-of-type{flex-wrap:nowrap;gap:0}
    #tab-progreso .card>.row:first-of-type>h2{display:none}
    #tab-progreso .card>.row:first-of-type .row{flex-wrap:nowrap;gap:6px;flex:1}
    #rt-pick,#period-pick{flex:1;min-height:36px;min-width:0;font-size:12px;padding:4px 6px}
    #tab-progreso .daterange{display:flex;flex:1 1 100%;margin-top:6px;justify-content:center;min-width:0}
    #tab-progreso .daterange input[type=date]{font-size:12px;min-width:0;width:auto;flex:1;max-width:120px}
    #tab-progreso .btn.ghost.sm[onclick*="exportProgressPDF"]{flex:0 0 auto;min-height:36px;padding:0 8px;font-size:12px}
    #tab-progreso .btn.ghost.sm[onclick*="exportProgressPDF"] .ic-wrap{display:none}
    /* que el daterange no rompa el row principal */
    #tab-progreso .daterange{order:10}

    /* filtros del historial: grid 2 columnas, inputs tappables */
    #more-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    #more-filters select,#more-filters input{width:100%;min-width:0;min-height:44px;font-size:var(--fs-md)}
    /* la barra de filtros básicos: selects al 50%, buscador full width */
    .filters{gap:8px}
    .filters select{flex:1 1 calc(50% - 4px);min-width:0;min-height:44px}
    #f-open{flex:1 1 100%;min-height:44px}
    .filters .btn{flex:1 1 calc(50% - 4px);justify-content:center;min-height:44px}
    /* touch targets generales */
    .btn{min-height:40px}
    .rev-btn{min-height:36px}
    /* segmento de color (Todas/Blancas/Negras) full width */
    .seg{width:100%} .seg button{flex:1}

    /* ----- Progreso: optimización fina ----- */
    /* ocultar botón editar meta (se edita tocando la meta misma) */
    .goalhead .btn.ghost.sm.icon[title="Editar meta"]{display:none}
    .goalwrap{cursor:pointer}
    /* compactar la barra de meta */
    #goal-bar{margin-top:10px!important}
    .goalwrap{padding:8px 12px;border-radius:var(--radius-sm)}
    .goalhead .gh-t{font-size:var(--fs-sm)}
    .goalrow{font-size:var(--fs-xs);gap:4px}
    .goaltrack{margin:4px 0}
    /* métricas de cabecera: todo en una línea (label + valor) */
    #metric-strip{grid-template-columns:1fr!important;gap:4px!important}
    #metric-strip .metric{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius-sm);background:none;border:none}
    #metric-strip .metric .lab{font-size:11px;flex-shrink:0}
    #metric-strip .metric .val{font-size:var(--fs-md);margin-top:0}
    #metric-strip .metric .an-unit{display:inline;font-size:10px}
    /* topstats (Máximo/Mejor victoria/Mejor racha): 3 muy angostas →︎ 1 fila de 3 más compacta */
    #topstats{gap:8px!important}
    #topstats .tv{font-size:var(--fs-display)}
    #topstats .tl{font-size:9px}
    /* perf KPIs (Performance/Puntos/Score): 3 angostas apretarían; van a 1 columna apiladas */
    #perf-body .metric-strip{grid-template-columns:1fr!important;gap:10px}
    /* header de Rendimiento: título + seg de color apilados */
    #perf-card>.row{flex-wrap:wrap;gap:10px}
    /* perf-head (Más fuertes/Parejos/Débiles) tabla ya colapsa vía .perf-cols */
    /* gráfico de Elo: Chart.js es responsive (escala al ancho); centramos los chips de leyenda */
    .legend-toggle{gap:6px;justify-content:center}
    /* compactar cards y paneles de detalle */
    .detail-panel .card{padding:14px;margin-bottom:10px}
    .detail-panel .card h2{font-size:var(--fs-xl)}
    #topstats{gap:6px!important}
    #topstats .tv{font-size:var(--fs-xl)}
    #topstats .tl{font-size:8px}
    /* compactar tabla comparativa (¿Cómo venís?) */
    .tcell{padding:8px 6px;font-size:var(--fs-xs)}
    /* compactar grid de partidas (Estadísticas) */
    .ggrid{gap:4px!important}
    .ggrid .cell{padding:6px 4px;font-size:10px}
    /* compactar statbox */
    #statbox{gap:8px!important}
    #statbox .metric{padding:10px}
    #statbox .metric .val{font-size:var(--fs-md)}
    #statbox .metric .lab{font-size:10px}
    /* compactar tabla horaria */
    #timeband-table{font-size:var(--fs-xs)}
    #timeband-table td,#timeband-table th{padding:6px 4px}
    /* compactar errores y finales */
    #perf-body .metric{padding:10px}
    /* coverage note y secciones respiran */
    .sec-rule{margin:18px 2px 10px;font-size:var(--fs-sm)}

    /* ----- Modales en mobile: menos padding arriba, usar dvh, scroll garantizado ----- */
    .modal-bg{padding:16px 10px;align-items:flex-start}
    .modal{padding:18px 16px;max-height:90vh;max-height:90dvh}
    /* el header bleed (.analyze-split) debe alinear con el padding mobile (16px), no 24px,
       o sobresale y puede tapar/robar taps de los controles de abajo */
    .analyze-split{width:calc(100% + 32px);margin:-18px -16px 16px}
  }

  /* ===================== REPORTE PDF ===================== */
  /* Tema claro fijo, autocontenido — se ve igual impreso en cualquier modo */
  #pdf-report{display:none}
  #pdf-report{
    --p-ink:#15140f; --p-ink2:#43413a; --p-muted:#84817a; --p-faint:#aaa79f;
    --p-line:#e6e3dc; --p-line2:#d4d0c6; --p-bg:#faf9f6; --p-surface:#fff; /* PDF: blanco fijo */
    --p-accent:var(--accent); --p-accent2:var(--accent2); --p-soft:#edf3e5;
    --p-ok:#1f8a4c; --p-okbg:#e3f3ea; --p-bad:#d22f2f; --p-badbg:#fbe7e7; --p-warn:#b5740b; --p-warnbg:#f9eed7;
  }
  .pdf-page{width:210mm;min-height:297mm;box-sizing:border-box;padding:18mm 16mm;margin:0 auto;background:var(--p-surface);color:var(--p-ink);font-family:var(--font-body);position:relative}
  .pdf-page+.pdf-page{margin-top:8mm}
  .pdf-hero{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--p-ink);padding-bottom:14px;margin-bottom:22px}
  .pdf-hero h1{font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0;line-height:1}
  .pdf-hero .pdf-sub{color:var(--p-muted);font-size:13px;margin-top:6px}
  .pdf-hero .pdf-brand{text-align:right;font-size:11px;color:var(--p-muted);line-height:1.5}
  .pdf-hero .pdf-brand b{color:var(--p-accent2);font-family:var(--font-display);font-size:14px;display:block}
  .pdf-sec{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--p-ink2);margin:26px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--p-line);page-break-after:avoid}
  .pdf-sec:first-of-type{margin-top:0}
  .pdf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .pdf-kpi{border:1px solid var(--p-line);border-radius:10px;padding:13px 14px;background:var(--p-bg)}
  .pdf-kpi .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--p-muted);font-weight:700}
  .pdf-kpi .v{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1;margin-top:6px}
  .pdf-kpi .s{font-size:10px;color:var(--p-muted);margin-top:3px}
  .pdf-focus{background:var(--p-soft);border-radius:10px;padding:14px 16px;display:flex;gap:11px;align-items:flex-start;margin-bottom:6px}
  .pdf-focus .fi{font-size:18px;color:var(--p-accent2)}
  .pdf-focus .ft{font-size:13.5px;color:var(--p-accent2);line-height:1.5}
  .pdf-focus .ft b{font-family:var(--font-display);font-size:15px}
  .pdf-trend{border-left:3px solid var(--p-accent);padding:2px 0 2px 13px;margin-bottom:12px;page-break-inside:avoid;break-inside:avoid}
  .pdf-trend.pt-prono{border-left-color:var(--p-ok)}
  .pdf-trend .pt-k{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--p-accent2);margin-bottom:4px}
  .pdf-trend.pt-prono .pt-k{color:var(--p-ok)}
  .pdf-trend .pt-body{font-size:12.5px;line-height:1.5;color:var(--p-ink)}
  .pdf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .pdf-table{width:100%;border-collapse:collapse;font-size:12px}
  .pdf-table th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--p-muted);font-weight:700;padding:6px 8px;border-bottom:1.5px solid var(--p-line2)}
  .pdf-table td{padding:7px 8px;border-bottom:1px solid var(--p-line)}
  .pdf-table .num{text-align:right;font-variant-numeric:tabular-nums}
  .pdf-bar{display:inline-block;width:38px;height:6px;border-radius:var(--radius-sm);background:var(--p-line);overflow:hidden;vertical-align:middle;margin-left:6px}
  .pdf-bar>span{display:block;height:100%}
  .pdf-good{color:var(--p-ok)} .pdf-bad{color:var(--p-bad)} .pdf-warn{color:var(--p-warn)} .pdf-acc{color:var(--p-accent2)}
  .pdf-list{font-size:12px}
  .pdf-list .li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--p-line)}
  .pdf-tag{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}
  .pdf-runhead{display:flex;justify-content:space-between;font-size:9.5px;color:var(--p-faint);border-bottom:1px solid var(--p-line);padding-bottom:6px;margin-bottom:16px}
  .pdf-chart{width:100%;height:auto;border:1px solid var(--p-line);border-radius:10px}
  .pdf-note{font-size:10.5px;color:var(--p-muted);margin-top:8px;font-style:italic}

  @media print{
    @page{size:A4;margin:14mm 12mm}
    html,body{background:#fff!important; /* PDF: blanco fijo */}
    body>*{display:none!important}
    #pdf-report{display:block!important;background:#fff!important; /* PDF: blanco fijo */padding:0!important}
    /* cada .pdf-page = una hoja. Sin footer flotante: el salto lo forzamos nosotros. */
    .pdf-page{width:auto!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;box-shadow:none!important;page-break-after:always;break-after:page}
    .pdf-page:last-child{page-break-after:auto;break-after:auto}
    .pdf-sec,.pdf-kpis,table,.pdf-grid2{break-inside:avoid}
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  }
  /* El reporte vive oculto en pantalla; solo aparece al imprimir (@media print arriba). */

  /* ===== Más detalle: navegación lateral ===== */
  .detail-layout{display:flex;gap:0;margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
  @media(max-width:640px){.detail-body{flex-direction:column}}
  .detail-nav{flex:0 0 180px;display:flex;flex-direction:column;gap:2px;padding:10px;border-right:1px solid var(--line)}
  @media(max-width:640px){
    .detail-nav{display:none}
    .detail-layout{flex-direction:column;gap:0}
    .detail-layout .detail-drop{display:flex}
  }
  .detail-drop{display:none;position:relative;align-items:center;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--line);user-select:none}
  .detail-drop .dd-label{flex:1;font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
  .detail-drop .dd-arrow{margin-left:8px;font-size:12px;color:var(--muted);transition:transform .2s}
  .detail-drop.open .dd-arrow{transform:rotate(180deg)}
  .detail-drop .dd-menu{display:none;position:absolute;top:100%;left:-1px;right:-1px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:hidden}
  .detail-drop.open .dd-menu{display:block}
  .detail-drop .dd-menu button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;color:var(--ink);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;padding:10px 12px;text-align:left;cursor:pointer;transition:background .1s}
  .detail-drop .dd-menu button:hover{background:var(--chip)}
  .detail-drop .dd-menu button.on{background:var(--accent);color:var(--on-accent)}
  .side-tab{display:flex;align-items:center;gap:8px;text-align:left;border:none;background:none;color:var(--ink2);
    font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;padding:7px 10px;border-radius:var(--radius);
    cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
  .side-tab .st-ic{font-size:var(--fs-sm);width:16px;text-align:center;flex-shrink:0}
  .side-tab:hover{background:var(--chip)}
  .side-tab.on{background:var(--accent);color:var(--on-accent)}
  .detail-panels{flex:1;min-width:0;padding:20px 22px}
  .detail-panel{display:none}
  .detail-panel.on{display:block;animation:fadein .2s}
  @keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
  .detail-panel .card:first-child{margin-top:0}
  /* Cuando el panel está expandido, el contenido se comprime a ~400px.
     Forzamos las reglas mobile más notorias para que no parezca desktop apretado. */
  body.bpanel-expanded .wrap{padding:0 14px 64px}
  body.bpanel-expanded .top .wrap{padding:11px 14px;gap:10px}
  body.bpanel-expanded #subtitle{display:none}
  body.bpanel-expanded .g2{grid-template-columns:1fr}
  body.bpanel-expanded .metric-strip{grid-template-columns:repeat(2,1fr)}
  body.bpanel-expanded .perf-cols{grid-template-columns:1fr;gap:26px}
  body.bpanel-expanded .trend-cols{grid-template-columns:1fr;gap:16px}
  body.bpanel-expanded .thematic{grid-template-columns:1fr}
  body.bpanel-expanded .coach-row{flex-direction:column;align-items:stretch}
  body.bpanel-expanded .ggrid{grid-template-columns:repeat(2,1fr)}
  body.bpanel-expanded .cardprev{display:none}
  body.bpanel-expanded .prescan-chip{bottom:12px;right:12px}
  /* Entrenar — drills */
  #entrenar-content .kpis{display:flex;gap:34px;margin-top:14px;flex-wrap:wrap}
  #entrenar-content .kpi .n{font-size:var(--fs-hero,28px);font-weight:800;letter-spacing:-.03em;line-height:1}
  #entrenar-content .kpi .l{font-size:var(--fs-xs,12px);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
  #entrenar-content .progress-pills{display:flex;gap:6px;margin-top:12px}
  #entrenar-content .pp{width:26px;height:6px;border-radius:var(--radius-sm);background:var(--chip)}
  #entrenar-content .pp.done{background:var(--accent)} #entrenar-content .pp.fail{background:var(--bad)} #entrenar-content .pp.half{background:var(--warn)}
  /* Score Entrenar: cabecera compacta + chart entre tablero y cola */
  #entrenar-content .drill-head-stats{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 28px;margin-top:14px}
  #entrenar-content .drill-stat-today{display:flex;flex-direction:column;gap:6px}
  #entrenar-content .drill-stat-today .progress-pills{margin-top:0}
  #entrenar-content .drill-7d-block{min-width:140px}
  #entrenar-content .drill-7d-block .drill-7d-vals{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;line-height:1.25}
  #entrenar-content .drill-7d-block .nv{font-weight:800}
  #entrenar-content .drill-7d-block .l{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
  #entrenar-content .drill-7d-block.muted .drill-7d-vals{color:var(--muted);font-weight:600}
  #entrenar-content .drill-score-chart{margin-top:12px}
  #entrenar-content .drill-chart-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:8px}
  #entrenar-content .drill-chart-title{font-size:var(--fs-md);font-weight:700}
  #entrenar-content .drill-bars{display:flex;align-items:flex-end;gap:3px;height:40px;width:100%;margin-top:4px}
  #entrenar-content .drill-bar-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
  #entrenar-content .drill-bar-track{flex:1;display:flex;align-items:flex-end;min-height:0;width:100%}
  #entrenar-content .drill-bar{width:100%;min-height:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--chip);transition:height .15s ease}
  #entrenar-content .drill-bar.on{background:var(--accent)}
  #entrenar-content .drill-score-legend{margin:8px 0 0;font-size:var(--fs-2xs)}

  #entrenar-content .origen{font-size:var(--fs-sm);color:var(--muted);margin-bottom:10px}
  #entrenar-content .origen b{color:var(--ink)}
  #entrenar-content .prompt-line{font-size:var(--fs-lg);font-weight:600;margin:2px 0 12px}
  #entrenar-content .solve{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}
  #entrenar-content .solve .side{flex:1;min-width:260px}
  #entrenar-content .fb{border-radius:var(--radius);padding:12px 14px;font-size:var(--fs-sm);margin-top:12px}
  #entrenar-content .fb.ok{background:var(--ok-bg);border-left:3px solid var(--ok)}
  #entrenar-content .fb.bad{background:var(--bad-bg);border-left:3px solid var(--bad)}
  #entrenar-content .fb.sol{background:var(--accent-soft);border-left:3px solid var(--accent2)}
  #entrenar-content .practice-note{background:var(--chip);color:var(--muted);font-size:var(--fs-sm);padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:12px;text-align:center}
  #entrenar-content .fb>b:first-child{display:block;margin-bottom:2px}
  #entrenar-content .fb .next{color:var(--muted);font-size:var(--fs-xs);margin-top:4px}
  #entrenar-content .hint-info{margin-top:12px;font-size:var(--fs-sm);color:var(--ink)}
  #entrenar-content .hint-badge{display:inline-block;background:var(--warn);color:var(--ink);font-size:var(--fs-xs);font-weight:600;padding:2px 8px;border-radius:var(--radius-sm);margin-right:6px}
  #entrenar-content .view-nav{display:flex;gap:12px;justify-content:center;margin-top:8px}
  #entrenar-content .view-dot{font-size:var(--fs-lg);color:var(--muted);cursor:pointer;transition:color .15s}
  #entrenar-content .view-dot.active{color:var(--accent)}
  #entrenar-content .view-dot:hover{color:var(--ink)}
  #entrenar-content .rival-move{text-align:center;font-size:var(--fs-xs);color:var(--muted);margin-top:6px}
  #entrenar-content .linkbtn{background:none;border:none;color:var(--accent2);font-family:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
  #entrenar-content .drow{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);margin-top:10px;cursor:pointer;transition:.15s}
  #entrenar-content .drow:hover{border-color:var(--accent);background:var(--surface)}
  #entrenar-content .drow .info{flex:1;min-width:0}
  #entrenar-content .drow .info b{display:block;font-size:var(--fs-md)}
  #entrenar-content .drow .info span{font-size:var(--fs-sm);color:var(--muted)}
  #entrenar-content .due{flex:none;font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:var(--radius-sm)}
  #entrenar-content .due.hoy{background:var(--accent-soft);color:var(--accent2)}
  #entrenar-content .due.vencido{background:var(--warn-bg);color:var(--warn)}
  #entrenar-content .due.nuevo{background:var(--chip);color:var(--ink2)}
  /* Tag de repaso de la ficha del puzzle (2026-07-26, drillRepasoTag): rojo si todavía no lo
     dominás, verde si lo venís acertando y está en camino a graduarse. */
  #entrenar-content .due.fallado{background:var(--bad-bg);color:var(--bad)}
  #entrenar-content .due.recuperando{background:var(--ok-bg);color:var(--ok)}
  #entrenar-content .empty{border:1px dashed var(--line2);border-radius:var(--radius);padding:26px;text-align:center;color:var(--muted);font-size:var(--fs-sm)}
  #entrenar-content .empty i{display:block;font-style:normal;font-size:22px;margin-bottom:6px}
  #entrenar-content #drill-bd .chessboard{max-width:min(420px,92vw)!important;cursor:default}
  #entrenar-content .sq.hl-best{box-shadow:inset 0 0 0 4px var(--ok)}
  #entrenar-content .drow .mini .chessboard{cursor:pointer}
  /* Queue grid: dos columnas (Nuevos | Repaso) */
  #entrenar-content .queue-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}
  #entrenar-content .queue-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 10px;display:flex;flex-direction:column}
  #entrenar-content .queue-col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:8px;border-bottom:2px solid var(--accent)}
  #entrenar-content .queue-col-header h3{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
  #entrenar-content .queue-col-header .count{font-size:var(--fs-2xs);font-weight:600;color:var(--ink2);background:var(--chip);padding:2px 10px;border-radius:var(--radius-sm)}
  #entrenar-content .queue-scroll{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  #entrenar-content .extra-items{display:none}
  #entrenar-content .extra-items.open{display:flex;flex-direction:column;gap:2px}
  #entrenar-content .more-row{text-align:center;margin-top:2px}
  #entrenar-content .more-btn{display:inline-block;padding:8px 16px;font-size:var(--fs-sm);font-weight:600;color:var(--accent);cursor:pointer;border-radius:var(--radius);transition:background .15s;user-select:none}
  #entrenar-content .more-btn:hover{background:var(--accent-soft)}
  /* Repaso hint line */
  #entrenar-content .repaso-line{display:flex;align-items:center;gap:5px;margin-top:4px}
  #entrenar-content .repaso-line .dot-r{width:6px;height:6px;border-radius:50%;background:var(--warn);flex-shrink:0}
  #entrenar-content .repaso-line .txt{font-size:var(--fs-xs);color:var(--bad);font-weight:600}
  /* Variante "lo venís acertando" (2026-07-26): mismo layout, color de progreso en vez de alarma. */
  #entrenar-content .repaso-line.ok .dot-r{background:var(--ok)}
  #entrenar-content .repaso-line.ok .txt{color:var(--ok)}
  /* Wave 19 F6 (SPEC-entrenar-config.md): card de Configuración — reusa .adv-toggle/.adv-panel
     (patrón del panel avanzado del sync-box, ver games-import.js/toggleAdvancedFetch) y .field/
     .switch existentes; solo agrega los subtítulos de grupo y la aclaración chica de filtros. */
  #entrenar-content .cfg-subtitle{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
  #entrenar-content .cfg-row{display:flex;flex-wrap:wrap;gap:12px 16px;margin-bottom:10px}
  #entrenar-content .cfg-row .field{min-width:150px;flex:1 1 160px}
  #entrenar-content .cfg-note{font-size:var(--fs-2xs);color:var(--faint);margin:-2px 0 10px}
  @media(max-width:640px){
    #entrenar-content .queue-grid{grid-template-columns:1fr}
  }

  /* ===== Reduced motion: red de seguridad GLOBAL =====
     Había 8 guards puntuales por componente para 89 animaciones y transiciones
     declaradas — DESIGN-SYSTEM.md ya lo marcaba como deuda. Quien activa la
     preferencia del sistema (mareo por movimiento, vestibular disorder) tenía la
     mayoría de los movimientos igual.
     Esto va AL FINAL a propósito: los guards específicos de arriba siguen
     valiendo (varios cambian la animación por un outline, que no se pierde), y
     esta regla solo garantiza que nada quede sin cubrir.
     .01ms y no 0: si algún día se escucha transitionend/animationend, el evento
     igual dispara (hoy no hay ningún listener, verificado). */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
      scroll-behavior:auto!important;
    }
  }