/* Layout: app de una columna; tablero a la izquierda y panel a la derecha en los ejercicios; glifos de anotación (?? ? !) como marcas de severidad */
:root {
  --bg: #f2f4ef;
  --surface: #ffffff;
  --ink: #17201a;
  --muted: #5d6a61;
  --line: #d5dcd3;
  --accent: #3f6e47;
  --accent-soft: #dfe9dc;
  --blunder: #c23d2e;
  --mistake: #b47b14;
  --good: #2f8a4c;
  --sq-l: #e9ecd9;
  --sq-d: #86a77c;
  --hl: rgba(214, 197, 107, 0.75);
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111612; --surface: #182019; --ink: #e5ebe3; --muted: #93a096; --line: #2a352c;
    --accent: #86b98c; --accent-soft: #223325; --blunder: #ef6b5a; --mistake: #e3a83c; --good: #63c482;
    --sq-l: #c9d3bd; --sq-d: #6f9068; --hl: rgba(214, 197, 107, 0.65); color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font-body); padding-top: env(safe-area-inset-top, 0px); }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 980px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.wrap { padding-block: 28px 56px; display: grid; gap: 32px; }
.eyebrow { font: 600 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.loading { color: var(--muted); }

/* encabezado */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { max-width: 980px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { font: 800 1.15rem var(--font-display); color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand .user { font: 400 0.85rem var(--font-mono); color: var(--muted); }
.mark { width: 18px; height: 18px; border-radius: 2px; background: conic-gradient(var(--sq-d) 90deg, var(--sq-l) 90deg 180deg, var(--sq-d) 180deg 270deg, var(--sq-l) 270deg); background-size: 50% 50%; }
.tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.tabs a { white-space: nowrap; }
.tabs a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.92rem; padding: 6px 12px; border-radius: 4px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: var(--ink); color: var(--bg); }
.foot { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--line); padding-block: 16px 32px; }

/* bloques */
.head { display: grid; gap: 8px; }
.lede { color: var(--muted); max-width: 62ch; font-size: 1.05rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.sheet > div { padding: 12px 14px; border-left: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.sheet > div:first-child { border-left: 0; }
.sheet .v { font: 600 1.3rem var(--font-mono); font-variant-numeric: tabular-nums; }
.sheet .l { font-size: 0.78rem; color: var(--muted); }
.v.up { color: var(--good); } .v.down { color: var(--blunder); }
@media (max-width: 600px) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet > div:nth-child(3) { border-left: 0; } .sheet > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

.btn { border: 0; border-radius: 4px; padding: 9px 16px; font-weight: 600; font-size: 0.92rem; cursor: pointer; background: var(--ink); color: var(--bg); }
.btn:hover { background: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--ink); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; cursor: pointer; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tag { font-size: 0.75rem; font-weight: 600; background: var(--accent-soft); color: var(--ink); padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.tag.warn { background: color-mix(in srgb, var(--blunder) 16%, transparent); color: var(--blunder); }
.nag { font: 600 1.1rem var(--font-mono); }
.nag.blunder { color: var(--blunder); } .nag.mistake { color: var(--mistake); } .nag.good { color: var(--good); }

/* puzzle */
.puzzle { padding: 18px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 720px) { .puzzle { grid-template-columns: minmax(0, 1fr); } }
.board { width: 100%; max-width: 420px; aspect-ratio: 1; position: relative; }
.board .cg-wrap { width: 100%; height: 100%; }
.pz-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.pz-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.8rem; color: var(--muted); }
.pz-q { font: 600 1.3rem var(--font-display); }
.pz-hint { color: var(--muted); font-size: 0.92rem; }
.result { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.result .verdict { font: 600 1.05rem var(--font-display); }
.result .verdict.ok { color: var(--good); } .result .verdict.bad { color: var(--blunder); }
.line { font-family: var(--font-mono); font-size: 0.86rem; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.progress { height: 6px; background: var(--accent-soft); border-radius: 3px; overflow: hidden; }
.progress div { height: 100%; background: var(--accent); }
.empty { padding: 28px; display: grid; gap: 10px; justify-items: start; }

/* tablero: colores propios */
cg-board { background-color: var(--sq-l); background-image: conic-gradient(var(--sq-d) 90deg, transparent 90deg 180deg, var(--sq-d) 180deg 270deg, transparent 270deg); background-size: 25% 25%; border-radius: 3px; }
cg-board square.last-move { background-color: var(--hl); }
cg-board square.selected { background-color: rgba(63, 110, 71, 0.5); }
cg-board square.move-dest { background: radial-gradient(rgba(23, 32, 26, 0.35) 19%, transparent 20%); }
cg-board square.move-dest:hover { background: rgba(63, 110, 71, 0.35); }
cg-board square.oc.move-dest { background: radial-gradient(transparent 0%, transparent 79%, rgba(23, 32, 26, 0.35) 80%); }
cg-board square.check { background: radial-gradient(ellipse at center, rgba(194, 61, 46, 0.9) 0%, rgba(194, 61, 46, 0.4) 40%, transparent 70%); }
.cg-wrap coords { position: absolute; display: flex; pointer-events: none; font: 600 9px var(--font-mono); user-select: none; }
.cg-wrap coords.ranks { left: 2px; top: 0; height: 100%; width: 10px; flex-flow: column-reverse; }
.cg-wrap coords.ranks.black { flex-flow: column; }
.cg-wrap coords.files { bottom: 0; left: 0; width: 100%; height: 12px; flex-flow: row; text-transform: lowercase; }
.cg-wrap coords.files.black { flex-flow: row-reverse; }
.cg-wrap coords coord { flex: 1 1 auto; color: #4e6649; }
.cg-wrap coords.files coord { text-align: right; padding-right: 3px; }

/* partidas */
.list { display: grid; gap: 10px; }
.game { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.game:hover { border-color: var(--ink); }
.res { width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; font: 600 1rem var(--font-mono); color: #fff; }
.res.W { background: var(--good); } .res.L { background: var(--blunder); } .res.D { background: var(--muted); }
.g-main { display: grid; gap: 3px; min-width: 0; }
.g-title { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-sub { font-size: 0.82rem; color: var(--muted); }
.g-adv { font-size: 0.88rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-right { text-align: right; display: grid; gap: 2px; font-size: 0.8rem; color: var(--muted); }
.g-right .n { font: 600 1rem var(--font-mono); color: var(--ink); }
@media (max-width: 560px) { .game { grid-template-columns: 40px minmax(0, 1fr); } .g-right { display: none; } .res { width: 40px; height: 40px; } }

/* detalle */
.advice { padding: 16px 18px; display: grid; gap: 8px; }
.advice p { font-size: 1.05rem; max-width: 66ch; }
.curve { width: 100%; height: auto; display: block; }
.curve-wrap { padding: 14px 16px; display: grid; gap: 8px; }
.errs { display: grid; gap: 0; }
.err { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.err:first-child { border-top: 0; }
.err .t { font-weight: 600; }
.err p { color: var(--muted); font-size: 0.92rem; }

/* diagnóstico */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
.charts .wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .charts { grid-template-columns: minmax(0, 1fr); } }
.chart { display: grid; gap: 10px; align-content: start; min-width: 0; }
.chart .note { color: var(--muted); font-size: 0.88rem; }
.bars { display: grid; gap: 7px; }
.brow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 84px; gap: 10px; align-items: center; font-size: 0.88rem; }
.btrack { height: 11px; background: var(--accent-soft); border-radius: 2px; overflow: hidden; }
.bar { height: 100%; background: var(--sq-d); }
.bar.hot { background: var(--blunder); }
.bval { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; display: grid; font-size: 0.85rem; }
.bsub { color: var(--muted); font-size: 0.68rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.tbl { overflow-x: auto; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
td.num, th.num { text-align: right; }
.spark { width: 100%; height: 80px; display: block; }

/* mejores partidas */
.best { padding: 18px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 640px) { .best { grid-template-columns: minmax(0, 1fr); } .best .mini-board { max-width: 260px; } }
.rank { font: 600 0.8rem var(--font-mono); color: var(--muted); }
.mini-board { width: 100%; aspect-ratio: 1; position: relative; }
.mini-board .cg-wrap { width: 100%; height: 100%; }
.best-side { display: grid; gap: 8px; min-width: 0; }
.best-title { font: 600 1.15rem var(--font-display); }
.best-why { font-size: 0.98rem; max-width: 66ch; }
.hl-list { display: grid; gap: 4px; font-size: 0.86rem; color: var(--muted); }
.hl-list b { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
.tag.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }

/* plan */
.rec { padding: 18px 20px; display: grid; gap: 12px; }
.rec-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.rec h2 { font-size: 1.25rem; }
.rec .why { max-width: 66ch; }
.rule { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; font-weight: 600; max-width: 66ch; }
.reslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.reslist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.reslist li:first-child { border-top: 0; }
.reslist .dose { color: var(--muted); font-size: 0.82rem; text-align: right; }
@media (max-width: 560px) { .reslist li { grid-template-columns: minmax(0, 1fr); } .reslist .dose { text-align: left; } }
.meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 4px; }
.meter > div { padding: 8px 12px; border-left: 1px solid var(--line); display: grid; gap: 2px; }
.meter > div:first-child { border-left: 0; }
.meter .v { font: 600 1.05rem var(--font-mono); font-variant-numeric: tabular-nums; }
.meter .l { font-size: 0.72rem; color: var(--muted); }
.later { display: grid; gap: 8px; }
.later-row { padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) { .result:not([hidden]) { animation: in .2s ease-out; } @keyframes in { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } } }