/* Fonts, self-hosted (SIL Open Font License, fonts/OFL-*.txt): no request to a third party. */
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/SchibstedGrotesk-Variable.ttf") format("truetype");
  font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap; }

/* Design tokens (UI redesign, phase 1). Two modes: «Jugar / Entrenar», light and warm (default),
   and «Laboratorio», dark and dense (.lab), for the complex statistics. The older names
   (--bg, --panel, --text, --accent...) are mapped onto them, so every screen follows. */
:root {
  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ground: #F3EEE4;      /* page */
  --surface: #FFFFFF;     /* cards */
  --surface-2: #FBF8F2;   /* rows inside cards, inputs */
  --sand: #EFE8DA;        /* chips, secondary buttons, tracks */
  --line: #E4DCCD;
  --ink: #1C1A17;
  --ink-2: #5E574D;       /* secondary text: 6.4:1 on --ground */
  --gold: #E3B95A;        /* the one call to action, highlights */
  --gold-ink: #3D3320;    /* text on gold */
  --pos: #1F5E45;         /* better / done / links */
  --pos-bg: #DDEBE3;
  --pos-ink: #16452F;
  --neg: #B3412E;         /* worse / errors */
  --neg-bg: #F6DDD6;
  --neg-ink: #8C2F20;
  --hover: rgba(28, 26, 23, .05);
  --shadow: 0 1px 2px rgba(28, 26, 23, .08);
  --radius-card: 22px;
  --radius-ctl: 12px;

  /* Older names */
  --bg: var(--ground);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --border: var(--line);
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --accent: var(--pos);
  /* Move-quality colours, darker than before so they read on a light ground (4.5:1 on white). */
  --best: #2E7D4F;
  --good: #4F7F1F;
  --inaccuracy: #8F6300;
  --mistake: #B35400;
  --blunder: #B3412E;
  color-scheme: light;
}

/* «Laboratorio»: the same names, dark. */
.lab {
  --ground: #0E1116;
  --surface: #161B22;
  --surface-2: #1B222C;
  --sand: #222A35;
  --line: #222934;
  --ink: #E6E8EC;
  --ink-2: #9AA3B2;
  --pos: #6EE7A8;
  --pos-bg: #123A2A;
  --pos-ink: #6EE7A8;
  --neg: #FF9B85;
  --neg-bg: #3D1E19;
  --neg-ink: #FF9B85;
  --measured: #3FC7D9;
  --hover: rgba(255, 255, 255, .05);
  --bg: var(--ground);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --border: var(--line);
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --accent: #3FC7D9;
  --best: #6EE7A8;
  --good: #A5D66F;
  --inaccuracy: #F2C14E;
  --mistake: #FFA94D;
  --blunder: #FF9B85;
  color-scheme: dark;
  background: var(--ground);
  color: var(--ink);
}

* { box-sizing: border-box; }

/* An author `display` rule on the same element (e.g. `.field-row { display: flex }`)
   otherwise beats the UA's default `[hidden] { display: none }`, since author
   stylesheets always win over UA ones regardless of specificity — so any element
   toggled via the `hidden` attribute/property needs this to actually disappear. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

button, input, select, textarea { font-family: inherit; }
a { color: var(--pos); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.topbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.topbar-row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-switch {
  display: flex;
  gap: 4px;
}

.account {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.account-user { color: var(--text); font-weight: 600; }
.account-note { color: var(--inaccuracy); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.modal h2 { margin: 0 0 6px; font-size: 18px; }
.modal .hint { margin: 0 0 14px; }
.modal .hint:last-child { margin: 12px 0 0; }
.modal a { color: var(--accent); }

.modal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.auth-error {
  color: var(--blunder);
  font-size: 12px;
  min-height: 1em;
  margin: 2px 0 8px;
}

.lang-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.lang-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface-2);
}

.topbar h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.subtitle { display: none; }

/* Navigation: the four blocks, then the chosen block's tabs. */
.blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--sand);
  border-radius: var(--radius-ctl);
}

.blk {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.blk:hover { color: var(--ink); }

.blk.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow);
}

.tabs {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.tabs[hidden] { display: none; }

.tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-2);
  min-height: 44px;
  padding: 10px 0 8px;
  cursor: pointer;
  font-size: 14px;
}

.tab:hover { color: var(--ink); }

.tab.active {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--ink);
}

@media (max-width: 640px) {
  .topbar-row { padding: 10px 12px; }
  .topbar-actions { order: -1; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .blocks { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .blk { padding: 8px 4px; font-size: 13px; line-height: 1.2; }
  .tabs { padding: 0 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .tab { white-space: nowrap; }
}

.view { display: none; }
.view.active { display: block; }

.llm-output {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}

.llm-output p {
  margin: 0 0 10px 0;
}

.llm-output h3 {
  font-size: 13px;
  margin: 14px 0 6px 0;
  color: var(--accent);
}

.llm-output ul {
  margin: 4px 0 10px 0;
  padding-left: 20px;
}

.coach-card {
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.coach-card.clickable {
  cursor: pointer;
}

.coach-card.clickable:hover {
  border-color: var(--accent);
}

.coach-card-head {
  font-weight: 600;
  margin-bottom: 8px;
}

.coach-card-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.coach-card-board {
  flex-shrink: 0;
}

.coach-card-text {
  flex: 1;
  min-width: 220px;
}

.coach-card p {
  margin: 4px 0;
  white-space: normal;
}

.coach-card p b {
  color: var(--accent);
}

#llm-api-key {
  flex: 1;
  min-width: 220px;
  padding: 7px 9px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.layout {
  max-width: 1328px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  padding: 24px;
  align-items: flex-start;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
}

.panel h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0 0 10px 0;
}

.field {
  display: block;
  margin-bottom: 10px;
}

.field span {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.field select, .field input {
  width: 100%;
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.hint {
  color: var(--text-dim);
  font-size: 12px;
}

.game-list {
  max-height: 480px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.game-item {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
}

.game-item:hover {
  background: var(--panel-2);
}

.game-item.active {
  background: rgba(79, 143, 247, 0.18);
  border-left: 3px solid var(--accent);
}

.game-item .g-players {
  color: var(--text);
  font-weight: 600;
}

.game-item .g-meta {
  color: var(--text-dim);
}

.main {
  flex: 1;
  min-width: 0;
}

.board-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.board-col {
  width: 480px;
  flex-shrink: 0;
}

.board {
  width: 480px;
  height: 480px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 2px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

/* Lichess default board theme ("brown") */
.sq.light { background: #f0d9b5; }
.sq.dark { background: #b58863; }

.sq .coord {
  position: absolute;
  bottom: 2px;
  left: 3px;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.7;
}

.sq.light .coord { color: #b58863; }
.sq.dark .coord { color: #f0d9b5; }

.piece {
  width: 88%;
  height: 88%;
  pointer-events: none;
}

.board-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.board-controls button {
  flex: 1;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
}

.board-controls button:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.eval-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.eval-bar-track {
  flex: 1;
  height: 14px;
  background: #111;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.eval-bar-white {
  height: 100%;
  width: 50%;
  background: #e7e9ee;
  transition: width 0.25s ease;
}

.eval-score {
  width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text-dim);
}

.analyze-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

button.primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--ground);
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

button.primary:hover { filter: brightness(1.25); }
button.primary:disabled { opacity: 0.5; cursor: default; }

.info-col {
  flex: 1;
  min-width: 320px;
}

.game-meta .g-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.move-list {
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 32px 1fr 1fr;
  gap: 2px 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.move-list .m-num {
  color: var(--text-dim);
}

.move-list .m-san {
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.move-list .m-san:hover {
  background: var(--panel-2);
}

.move-list .m-san.active {
  background: var(--accent);
  color: white;
}

.tag-best { border-left: 3px solid var(--best); }
.tag-good { border-left: 3px solid var(--good); }
.tag-inaccuracy { border-left: 3px solid var(--inaccuracy); }
.tag-mistake { border-left: 3px solid var(--mistake); }
.tag-blunder { border-left: 3px solid var(--blunder); }

.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}

.badge-best { background: rgba(76,175,80,0.2); color: var(--best); }
.badge-good { background: rgba(139,195,74,0.2); color: var(--good); }
.badge-inaccuracy { background: rgba(255,193,7,0.2); color: var(--inaccuracy); }
.badge-mistake { background: rgba(255,152,0,0.2); color: var(--mistake); }
.badge-blunder { background: rgba(244,67,54,0.2); color: var(--blunder); }

.move-comment {
  font-size: 13px;
  line-height: 1.5;
}

#game-summary {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}

.summary-stats {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.stat {
  background: var(--panel-2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
}

.stat b {
  display: block;
  font-size: 16px;
}

.field-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.field-row input[type="text"] {
  flex: 1;
  min-width: 220px;
  padding: 7px 9px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.field.inline {
  margin-bottom: 0;
}

#report-date-custom {
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  color-scheme: dark;
}

.field.inline input, .field.inline select {
  width: auto;
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.bar-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.bar-track {
  height: 12px;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.bar-fill {
  height: 100%;
  background: var(--accent);
}

.bar-fill.warn { background: var(--mistake); }
.bar-fill.danger { background: var(--blunder); }
.bar-fill.good { background: var(--good); }

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0 16px 0;
}

.report-table th, .report-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}

.report-table th {
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.report-table tr.clickable { cursor: pointer; }
.report-table tr.clickable:hover { background: var(--panel-2); }

.eco-thumb-cell {
  width: 108px;
  padding: 6px !important;
}

.eco-thumb {
  width: 100px;
  height: 100px;
}

.board.mini-board.mini-board-tiny {
  width: 100px;
  height: 100px;
  border-radius: 3px;
}

#eco-glossary-panel summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}

#eco-glossary-panel summary::-webkit-details-marker { display: none; }

#eco-glossary-panel[open] summary {
  margin-bottom: 10px;
}

#eco-glossary-search {
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

#eco-glossary {
  max-height: 420px;
  overflow-y: auto;
}

.eco-vol-group {
  margin-bottom: 6px;
}

.eco-vol-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 4px 4px 4px;
}

.eco-vol-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.eco-vol-A .eco-vol-dot, .eco-code.eco-vol-A { background: #4f8ff7; }
.eco-vol-B .eco-vol-dot, .eco-code.eco-vol-B { background: #4caf50; }
.eco-vol-C .eco-vol-dot, .eco-code.eco-vol-C { background: #ffc107; }
.eco-vol-D .eco-vol-dot, .eco-code.eco-vol-D { background: #ff7043; }
.eco-vol-E .eco-vol-dot, .eco-code.eco-vol-E { background: #ab47bc; }

.eco-code {
  display: inline-block;
  min-width: 34px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #111;
  text-align: center;
}

.eco-row {
  display: grid;
  grid-template-columns: 50px 1fr 70px;
  align-items: center;
  gap: 10px;
  padding: 4px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.eco-row:hover {
  background: var(--panel-2);
}

.eco-row .eco-count {
  color: var(--text-dim);
  text-align: right;
}

.eco-detail {
  padding: 10px 4px 14px 4px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.eco-detail-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Compound selector (.board.mini-board) so this reliably outweighs the
   ".board { width: 100% }" mobile media-query rule below regardless of
   source order — otherwise a mini board gets stretched wide but stays
   180px tall, squashing the diagram. */
.board.mini-board {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.eco-detail-info {
  flex: 1;
  min-width: 0;
}

.eco-detail-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.eco-detail-moves {
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.eco-alt-list {
  margin-top: 10px;
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.eco-alt-chip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 11px;
  cursor: pointer;
}

.eco-alt-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.narrative {
  font-size: 13px;
  line-height: 1.6;
  background: var(--panel-2);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
}

.charts-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.chart-box {
  flex: 1;
  min-width: 320px;
  overflow-x: auto;
}

.chart-box svg {
  display: block;
  max-width: 100%;
}

.chart-axis {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-gridline {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.5;
}

.chart-label {
  fill: var(--text-dim);
  font-size: 10px;
}

.chart-value-label {
  font-size: 10px;
  font-weight: 700;
}

.chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chart-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}

.table-scroll {
  overflow-x: auto;
}

.summary-table {
  min-width: 900px;
}

.summary-table th, .summary-table td {
  white-space: nowrap;
}

.summary-table td.desc-cell {
  white-space: normal;
  min-width: 220px;
}

.summary-table tr.clickable-row {
  cursor: pointer;
}

.summary-table tr.clickable-row:hover td {
  background: var(--panel-2);
}

.desc-textarea {
  width: 100%;
  min-width: 200px;
  min-height: 44px;
  resize: vertical;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 5px 7px;
}

.result-1 { color: var(--best); font-weight: 600; }
.result-05 { color: var(--text-dim); }
.result-0 { color: var(--blunder); font-weight: 600; }

.json-view {
  margin-top: 10px;
  max-height: 320px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  /* As a column, «align-items: flex-start» sized the page to its widest table: take the screen's width. */
  .layout > .main { align-self: stretch; }
  .sidebar { width: 100%; }
  .board-col, .board { width: 100%; max-width: 480px; }
}

.import-online {
  margin: 4px 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel-2);
}
.import-online summary { cursor: pointer; font-size: 13px; color: var(--text); }
.import-online[open] summary { margin-bottom: 8px; }
.import-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.import-row select, .import-row input[type="text"] {
  padding: 6px 8px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 13px;
}
.import-row input[type="text"] { flex: 1; min-width: 0; }
.import-max { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); flex: 1; }
.import-max input { width: 70px; padding: 6px 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }
#import-status { margin-top: 2px; }
#import-status.error { color: var(--blunder); }

/* ---------- Tab 1: Mis partidas ---------- */
.lib-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.lib-scope { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.lib-scope label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lib-scope input[type="number"] { width: 80px; }
.lib-progress { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; margin: 4px 0 8px; }
.lib-progress-bar { height: 100%; background: var(--best); transition: width .4s; }
.lib-counts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 8px; }
.lib-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 12px 0; }
.lib-filters label { display: flex; align-items: center; gap: 6px; }
.lib-table td.num, .lib-table th.num { text-align: right; }
.lib-me { font-weight: 700; color: var(--accent); }
.res-win { color: var(--best); }
.res-loss { color: var(--blunder); }
.res-draw { color: var(--text-dim); }
.lib-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 10px; }
.state-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap;
  background: var(--panel-2); color: var(--text-dim); }
.state-queued, .state-running { background: rgba(79,143,247,.18); color: var(--accent); }
.state-partial { background: rgba(255,193,7,.18); color: var(--inaccuracy); }
.state-done { background: rgba(76,175,80,.18); color: var(--best); }
.state-failed { background: rgba(244,67,54,.18); color: var(--blunder); }
.hint.error { color: var(--blunder); }
.lib-scope, .lib-filters, .lib-counts, .lib-pager { font-size: 13px; }
.lib-pager { color: var(--text-dim); }
.lib-scope input[type="number"], .lib-scope input[type="date"],
.lib-filters input, .lib-filters select, .lib-pager button {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; font: inherit; color-scheme: dark;
}
.lib-scope input:disabled { opacity: .45; }
.lib-pager button { cursor: pointer; min-width: 32px; }
.lib-pager button:disabled { opacity: .4; cursor: default; }
.modal input[aria-invalid] { border-color: var(--blunder) !important; box-shadow: 0 0 0 1px var(--blunder); }

/* ---------- Tab 2: Errores por partida ---------- */
.err-card { margin-bottom: 12px; }
.err-card-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
.err-chips { display: flex; flex-direction: column; gap: 6px; }
.err-row-head, .err-chip { display: grid; grid-template-columns: minmax(170px, 1.3fr) repeat(3, minmax(130px, 1fr)); gap: 14px; align-items: center; }
.err-row-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 0 12px 0 14px; }
.err-row-head span[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.err-chip { width: 100%; text-align: left; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-left-width: 4px; border-radius: 6px; padding: 8px 12px 8px 10px; cursor: pointer; font: inherit; font-size: 13px; }
@media (max-width: 760px) {
  .err-row-head { display: none; }
  .err-chip { grid-template-columns: 1fr 1fr; }
  .err-what { grid-column: 1 / -1; }
}
.err-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.err-type { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err-meter { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.err-meter-top { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.err-meter-q { font-size: 12px; }
.err-meter-bar { height: 6px; background: var(--sand); border-radius: 3px; overflow: hidden; }
.err-meter-bar > span { display: block; height: 100%; border-radius: 3px; }
.tone-bad { color: var(--blunder); } .tone-bg-bad { background: var(--blunder); }
.tone-warn { color: var(--mistake); } .tone-bg-warn { background: var(--mistake); }
.tone-mild { color: var(--inaccuracy); } .tone-bg-mild { background: var(--inaccuracy); }
.tone-good { color: var(--best); } .tone-bg-good { background: var(--best); }
.tone-none { color: var(--text-dim); } .tone-bg-none { background: transparent; }
.err-move { font-weight: 700; }
.err-noted { color: var(--accent); }
.err-detail { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.err-detail-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
@media (max-width: 760px) { .err-detail-grid { grid-template-columns: 1fr; } }
.board.mini-board.err-board { width: 300px; height: 300px; }
.err-board-toggle { display: flex; gap: 6px; margin-top: 8px; }
.err-board-toggle button, .err-color-ask button { background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.err-board-toggle button.active { border-color: var(--accent); color: var(--accent); }
.err-legend { margin-top: 6px; }
.sq.hl-played { box-shadow: inset 0 0 0 3px rgba(244, 67, 54, .85); }
.sq.hl-best { box-shadow: inset 0 0 0 3px rgba(76, 175, 80, .9); }
.sq.hl-reply { box-shadow: inset 0 0 0 3px rgba(79, 143, 247, .9); }
.sq.hl-played.hl-best, .sq.hl-played.hl-reply { box-shadow: inset 0 0 0 3px rgba(244, 67, 54, .85), inset 0 0 0 6px rgba(76, 175, 80, .9); }
.err-info { font-size: 14px; }
.err-info h3, .err-note h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 14px 0 6px; }
.err-facts { margin: 8px 0; padding-left: 18px; color: var(--text-dim); font-size: 13px; }
.err-facts li { margin: 3px 0; }
.err-tax { background: var(--panel-2); border-radius: 6px; padding: 10px 12px; }
.err-tax p { margin: 6px 0 0; }
.err-tax-name { font-weight: 700; }
.err-note { margin-top: 14px; }
.err-note select, .err-note textarea { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; color-scheme: dark; }
.err-causes { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 10px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; font-size: 13px; }
.err-causes legend { padding: 0 4px; color: var(--text-dim); }
.err-cause { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.err-suggested { font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 0 5px; }
.err-note-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.err-color-ask { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.err-explore-btn { margin-top: 10px; width: 100%; }
.err-board-live .sq { cursor: pointer; }
.sq.hl-selected { box-shadow: inset 0 0 0 3px rgba(79, 143, 247, .95); }
.sq.hl-last { background-image: linear-gradient(rgba(255, 213, 79, .35), rgba(255, 213, 79, .35)); }
.sq.hl-target::after { content: ''; position: absolute; left: 38%; top: 38%; width: 24%; height: 24%;
  border-radius: 50%; background: rgba(20, 20, 20, .35); pointer-events: none; }
.err-board-live .sq { position: relative; }
.ex-moves { font-size: 13px; margin: 8px 0; line-height: 1.6; }
.ex-move { background: var(--panel-2); border-radius: 4px; padding: 1px 5px; }
.err-board-toggle button:disabled { opacity: .4; cursor: default; }
.err-lines { margin: 6px 0; padding-left: 22px; font-size: 13px; }
.err-lines li { margin: 5px 0; }
.err-lines li.is-played { color: var(--text-dim); }
.line-eval { display: inline-block; min-width: 52px; font-weight: 700; font-variant-numeric: tabular-nums; }
.line-move { background: var(--panel-2); color: var(--best); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 8px; font: inherit; font-weight: 700; cursor: pointer; }
.line-move:hover { border-color: var(--best); }
.line-pv { color: var(--text-dim); }
.err-chip:hover, .err-chip.open { border-color: var(--accent); }
.err-chip.tag-blunder { border-left-color: var(--blunder); }
.err-chip.tag-mistake { border-left-color: var(--mistake); }
.err-chip.tag-inaccuracy { border-left-color: var(--inaccuracy); }

/* Error measures: severity is the only red scale; ease and time are neutral. */
:root { --ease: #6B4FA0; --time: #1C7EA8; }
.err-meter-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); opacity: .8; }
.err-meter-q { color: var(--text-dim); }
.sev-blunder { color: var(--blunder); } .sev-mistake { color: var(--mistake); } .sev-inaccuracy { color: var(--inaccuracy); }
.sev-bg-blunder { background: var(--blunder); } .sev-bg-mistake { background: var(--mistake); } .sev-bg-inaccuracy { background: var(--inaccuracy); }
.ease-scale { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 6px; }
.ease-seg { background: rgba(179, 136, 255, .18); border-radius: 2px; }
.ease-seg.on { background: rgba(179, 136, 255, .45); }
.ease-marker { position: absolute; top: -3px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px;
  background: var(--ease); box-shadow: 0 0 0 2px var(--panel-2); }
.time-bg { background: var(--time); }
.err-meter-q.time-trouble { font-weight: 700; color: var(--blunder); background: rgba(244, 67, 54, .14); border-radius: 8px; padding: 0 6px; }
.err-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin-top: 12px; font-size: 13px; }
.err-filters label { display: flex; flex-direction: column; gap: 4px; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.err-filters select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; color-scheme: dark; }
.err-filter-reset { background: none; border: 1px solid var(--border); color: var(--accent); border-radius: 6px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.err-process { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px 10px; margin: 10px 0; font-size: 13px; }
.err-process legend { padding: 0 4px; color: var(--text-dim); }
.err-process > .hint { margin: 2px 0 8px; }
.err-step-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.err-step-suggest { background: var(--panel-2); color: var(--text); border: 1px dashed var(--accent); border-radius: 12px;
  padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.err-step-suggest.on { background: rgba(79,143,247,.2); border-style: solid; }
.err-process-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr); gap: 8px; }
@media (max-width: 640px) { .err-process-row { grid-template-columns: 1fr; } }
.err-process select { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; color-scheme: dark; }
.err-process select:disabled { opacity: .5; }
.err-step-help { margin-top: 8px; }
.err-step-help p { margin: 4px 0; }
.err-context { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; }
.err-context label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.err-step-tag { font-size: 11px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Tab: decision process guide ---------- */
.tut-quote { font-style: italic; color: var(--text); border-left: 3px solid var(--accent); padding-left: 12px; margin: 8px 0 10px; }
.tut-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-top: 12px; }
.tut-arrow { align-self: center; color: var(--text-dim); font-size: 18px; }
.tut-phase { flex: 1 1 120px; max-width: 170px; display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-top: 3px solid var(--border);
  border-radius: 6px; padding: 8px 10px; cursor: pointer; font: inherit; }
.tut-phase:hover { border-color: var(--accent); }
.tut-phase.on { border-color: var(--accent); border-top-color: var(--accent); background: rgba(79,143,247,.12); }
.tut-phase-id { font-weight: 700; color: var(--accent); font-size: 12px; }
.tut-phase-name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.tut-phase-q { font-size: 12px; color: var(--text-dim); line-height: 1.3; }
.tut-phase-n { font-size: 11px; color: var(--text-dim); margin-top: auto; }
.tut-loop { margin-top: 8px; }
.tut-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; }
@media (max-width: 900px) { .tut-grid { grid-template-columns: 1fr; } }
.tut-role-q { font-size: 16px; font-weight: 700; margin: 4px 0; }
.tut-detail h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 16px 0 8px; }
.tut-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tut-step { border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); }
.tut-step.open { border-color: var(--accent); }
.tut-step-head { width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.tut-step-id { color: var(--accent); font-weight: 700; }
.tut-step-q { display: block; color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.tut-step-body { padding: 0 12px 10px; font-size: 13px; }
.tut-step-body p { margin: 6px 0; }
.tut-side .panel { margin-bottom: 12px; }
.tut-side p { font-size: 13px; }
.tut-list { padding-left: 18px; margin: 6px 0; font-size: 13px; }
.tut-list li { margin: 5px 0; }
.tut-tabs { margin-bottom: 12px; }
.tut-q-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; }
.tut-q-card { border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 8px; background: var(--panel-2); padding: 10px 12px; }
.tut-q-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tut-q-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--panel); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.tut-q-icon { font-size: 16px; }
.tut-q-q { font-size: 13px; color: var(--text-dim); margin: 6px 0; }
.tut-goto-phase { font-size: 11px; padding: 1px 6px; }
.tut-q-chip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--panel); font-size: 11px; font-weight: 700; margin-right: 3px; }
.tut-q-bands td { vertical-align: top; font-size: 13px; }
/* «⚡ Con poco tiempo» (quick.js) */
.qk-clockrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.qk-clock { font-size: 28px; font-variant-numeric: tabular-nums; }
.qk-clockrow.low .qk-clock { color: var(--mistake); }
.qk-clockrow.over .qk-clock { color: var(--blunder); }
.qk-track { height: 6px; background-color: var(--panel-2); border-radius: 3px; overflow: hidden; }
.qk-bar { height: 100%; width: 100%; background-color: var(--accent); transition: width .25s linear; }
.qk-clockrow.low .qk-bar { background-color: var(--mistake); }
.qk-steps { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.qk-step { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; transition: opacity .2s; }
.qk-step > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.qk-step.skip { opacity: .35; }
.qk-check { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.qk-check li.fail { color: var(--blunder); font-weight: 600; } .qk-check li.ok { color: var(--text-dim); }
.qk-open-guide { font-size: 12px; margin-left: 6px; }
/* «Tu repertorio»: the clock */
.rep-time-lines .rep-time-line { cursor: pointer; }
.rep-time-lines .rep-time-line:hover td { background-color: var(--panel-2); }
.rep-kind-known { background-color: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
/* Review status of each error */
.err-review { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 9px; padding: 0 7px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.err-review-done { color: var(--best); background: rgba(76,175,80,.16); }
.err-review-partial { color: var(--inaccuracy); background: rgba(255,193,7,.14); }
.err-review-pending { color: var(--text-dim); border: 1px dashed var(--border); }
.err-chip.rv-done { background: rgba(76,175,80,.06); }
.err-review-count { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.err-review-count.complete { color: var(--best); }

/* ---------- Tab 3: Análisis global ---------- */
.ins-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ins-actions button:not(.primary) { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; cursor: pointer; font: inherit; }
.ins-warn { color: var(--inaccuracy) !important; }
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.ins-tile { background: var(--panel-2); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ins-tile b { font-size: 20px; }
.ins-tile span { font-size: 12px; color: var(--text-dim); }
.ins-freq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ins-freq-grid h3, .ins-report h3, #ins-report h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 14px 0 6px; }
.ins-freq { width: 100%; border-collapse: collapse; font-size: 13px; }
.ins-freq td { padding: 3px 6px; vertical-align: middle; }
.ins-freq td.num { text-align: right; white-space: nowrap; }
.ins-bar { width: 35%; }
.ins-bar span { display: block; height: 7px; background: var(--accent); border-radius: 3px; opacity: .8; }
.ins-history { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.ins-hist-item { display: flex; gap: 6px; }
.ins-hist-item button { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.ins-hist-item .ins-open { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-hist-item.on .ins-open { border-color: var(--accent); }
.ins-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-left: 18px; font-size: 13px; color: var(--text-dim); }
.ins-steps li.done { color: var(--best); }
.ins-steps li.on { color: var(--text); font-weight: 700; }
.ins-headline { font-size: 16px; font-weight: 700; margin: 6px 0 10px; }
.ins-md { font-size: 14px; line-height: 1.55; }
.ins-md h2, .ins-md h3, .ins-md h4 { text-transform: none; letter-spacing: 0; color: var(--text); margin: 18px 0 6px; }
.ins-md blockquote { border-left: 3px solid var(--accent); margin: 8px 0; padding: 2px 12px; color: var(--text); font-style: italic; }
.ins-md table { margin: 8px 0; }
.ins-pattern { border: 1px solid var(--border); border-left: 4px solid var(--mistake); border-radius: 6px; padding: 10px 12px; margin: 10px 0; font-size: 13px; }
.ins-pattern.sev-alta { border-left-color: var(--blunder); }
.ins-pattern.sev-baja { border-left-color: var(--inaccuracy); }
.ins-pattern p { margin: 6px 0; }
.ins-pattern-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ins-rank { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); align-items: center; justify-content: center; font-weight: 700; }
.ins-evidence { margin: 6px 0 0; padding-left: 18px; }
.ins-evidence q { font-style: italic; }
.ins-scores { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.ins-score { display: grid; grid-template-columns: 180px 1fr 50px; gap: 10px; align-items: center; font-size: 13px; cursor: help; }
.ins-score-bar { height: 8px; background: var(--sand); border-radius: 4px; overflow: hidden; }
.ins-score-bar span { display: block; height: 100%; background: var(--accent); }
.ins-block { background: var(--panel-2); border-radius: 6px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }
.ins-block p, .ins-block ul { margin: 6px 0; }
.ins-game { border-top: 1px solid var(--border); padding: 8px 0; font-size: 13px; }
.ins-game summary { cursor: pointer; }
.ins-moment { margin: 8px 0; }
.ins-moment td:first-child { color: var(--text-dim); width: 190px; }
#ins-report .panel p, #ins-report .panel li { font-size: 14px; }
#ins-report .ins-headline { font-size: 16px; }
.ins-lang { font-size: 10px; font-weight: 700; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin: 0 4px; color: var(--text-dim); }

/* ---------- Tab: training plan ---------- */
.trn-form { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(150px, 1fr)); gap: 10px 14px; margin: 10px 0 12px; }
.trn-form .trn-focus { grid-column: 1 / -1; }
@media (max-width: 760px) { .trn-form { grid-template-columns: 1fr; } }
.trn-form select, .trn-form input, .trn-form textarea { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; color-scheme: dark; }
.ins-make-plan { margin-top: 6px; }
#trn-plan .panel p, #trn-plan .panel li { font-size: 14px; }

/* ---------- Progressive disclosure (analysis + plan) ---------- */
.ins-section > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ins-section > summary::-webkit-details-marker { display: none; }
.ins-section > summary::before { content: '▸'; color: var(--text-dim); transition: transform .15s; display: inline-block; }
.ins-section[open] > summary::before { transform: rotate(90deg); }
.ins-section-title { font-weight: 700; font-size: 15px; }
.ins-section-body { margin-top: 10px; }
.panel .ins-section { background: transparent; border: 0; padding: 6px 0 0; margin: 10px 0 0; }
.ins-cards { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.ins-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.ins-card:hover, .ins-card:focus-visible { border-color: var(--accent); outline: none; }
.ins-card.open { border-color: var(--accent); }
.ins-card-head { display: flex; align-items: center; gap: 10px; }
.ins-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ins-card-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.ins-card-toggle { color: var(--text-dim); transition: transform .15s; }
.ins-card.open .ins-card-toggle { transform: rotate(90deg); }
.ins-card-detail { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); cursor: auto; }
.ins-card.open .ins-card-detail { display: block; }
.ins-card-detail p, .ins-card-detail ul { margin: 6px 0; }
.ins-card-detail h4 { margin: 10px 0 4px; font-size: 13px; }
.ins-imp { display: block; height: 6px; background: var(--sand); border-radius: 3px; overflow: hidden; }
.ins-imp > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.ins-imp > span.sev-high { background: var(--blunder); }
.ins-imp > span.sev-medium { background: var(--mistake); }
.ins-imp > span.sev-low { background: var(--inaccuracy); }
.sevtxt-high { color: var(--blunder); }
.sevtxt-medium { color: var(--mistake); }
.sevtxt-low { color: var(--inaccuracy); }
.ins-key { font-size: 16px; font-weight: 700; margin: 6px 0 8px; }
.ins-goal { border-left: 3px solid var(--accent); padding: 4px 12px; margin: 8px 0; }
.ins-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ins-strip { display: flex; height: 24px; border-radius: 6px; overflow: hidden; margin: 6px 0 4px; }
.ins-strip > span { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; min-width: 3px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ins-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ins-pct { font-size: 20px; font-weight: 800; min-width: 52px; text-align: right; }
.ins-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ins-day { background: var(--panel-2); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.ins-day b { margin-right: 6px; }
.ins-day ul { margin: 6px 0 0; padding-left: 16px; }
.ins-score-card .ins-card-head { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 50px 14px; }
.ins-score-val { text-align: right; }

/* ---------- Tab 2: move within the player's reach (Stockfish + Maia) ---------- */
.err-reach { border: 1px solid var(--border); border-left: 4px solid var(--ease); background: rgba(107,79,160,.07); border-radius: 6px; padding: 8px 12px; margin: 10px 0 4px; font-size: 13px; }
.err-reach.is-best { border-left-color: var(--best); background: rgba(76,175,80,.07); }
.err-reach-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.err-reach p { margin: 6px 0 0; }
.err-reach-tag { font-size: 11px; color: var(--ease); margin-left: 6px; white-space: nowrap; }

/* ---------- Tab: Aperturas (move windows vs the player's average) ---------- */
.opn-speeds { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.opn-speed { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.opn-speed.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.opn-speed.on .hint { color: rgba(255,255,255,.8); }
.opn-speed:disabled { opacity: .45; cursor: default; }
.opn-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: var(--text-dim); margin: 10px 0 8px; }
.opn-table-wrap { overflow-x: auto; width: 0; min-width: 100%; } /* no intrinsic width: scrolls instead of widening the page */
.opn-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 13px; }
.opn-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); font-weight: 600; padding: 4px 6px; text-align: left; }
.opn-table th.num, .opn-table td.num { text-align: right; }
.opn-row { cursor: pointer; }
.opn-row > th { text-align: left; font-weight: 400; padding: 6px 8px; white-space: nowrap; }
.opn-row > td.num { padding: 6px 8px; color: var(--text-dim); }
.opn-row:hover > th, .opn-row:focus-visible > th { color: var(--accent); }
.opn-row:focus-visible { outline: 1px solid var(--accent); }
.opn-row.on > th { box-shadow: inset 3px 0 0 var(--accent); }
.opn-fam > th { font-weight: 700; }
.opn-sub > th { padding-left: 30px; }
.opn-toggle { display: inline-block; width: 16px; color: var(--text-dim); }
.opn-names { margin-left: 8px; font-size: 11px; }
.opn-cell { background: var(--sand); border-radius: 4px; text-align: center; padding: 4px 6px; min-width: 76px; line-height: 1.2; }
.opn-cell b { font-size: 13px; white-space: nowrap; }
.opn-cell b .opn-strong { display: inline; font-size: 10px; color: var(--ink); }
.opn-cell span { display: block; font-size: 11px; color: var(--text-dim); }
.opn-cell.ev-none { background: transparent; border: 1px dashed var(--border); color: var(--text-dim); }
.opn-cell.ev-none b { font-weight: 400; font-size: 13px; }
.opn-empty { color: var(--text-dim); }
.opn-detail h2 { text-transform: none; letter-spacing: 0; }
.opn-dx { margin: 6px 0 12px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.opn-wcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.opn-wcard { background: var(--panel-2); border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.opn-wcard h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.opn-big { font-size: 22px; font-weight: 800; }
.opn-big .hint { font-size: 12px; font-weight: 400; }
.opn-wcard ul { margin: 6px 0 0; padding-left: 16px; }
.opn-wcard li { margin: 2px 0; }
.ev-line.ev-strong b { color: var(--accent); }
.opn-games td.res-win { color: var(--best); }
.opn-games td.res-loss { color: var(--blunder); }
#view-openings { min-width: 0; }
#view-openings .panel { min-width: 0; max-width: 100%; }
@media (max-width: 700px) {
  .opn-names { display: block; margin: 2px 0 0 16px; white-space: normal; }
  .opn-cell { min-width: 64px; }
}
.opn-cell span { color: var(--ink-2); }
.opn-cell.ev-none span { color: var(--text-dim); }
.opn-wh { text-align: center !important; }
.opn-wh small { display: block; font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-dim); }
.opn-chip { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 12px; color: #fff; white-space: nowrap; }
.opn-chip-none { border: 1px dashed var(--border); color: var(--text-dim); }
.opn-legend-note { margin-top: 0; font-size: 12px; }
.opn-big .opn-chip { font-size: 13px; vertical-align: middle; margin-right: 6px; }
.opn-colgroup { text-align: center !important; border-bottom: 1px solid var(--border); padding-bottom: 2px !important; color: var(--text) !important; }
.opn-table .opn-gs { border-left: 12px solid transparent !important; background-clip: padding-box; }

/* ---------- Tab: Pensamiento estratégico ---------- */
.stg-codes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stg-code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 2px 10px; font-size: 12px; }
.stg-cards { display: flex; flex-direction: column; gap: 6px; }
.stg-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.stg-card.open { border-color: var(--accent); }
.stg-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.stg-head:focus-visible { outline: 1px solid var(--accent); }
.stg-card.open .ins-card-toggle { transform: rotate(90deg); }
.stg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stg-loss { font-size: 18px; font-weight: 800; white-space: nowrap; }
.stg-loss small { font-size: 11px; font-weight: 400; color: var(--text-dim); margin-left: 2px; }
.stg-badge { font-size: 11px; border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; color: var(--text-dim); white-space: nowrap; }
.stg-badge.ok { border-color: var(--blunder); color: var(--blunder); }
.stg-badge.no { border-color: var(--best); color: var(--best); }
.stg-detail { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 16px; padding: 4px 12px 12px; border-top: 1px solid var(--border); }
@media (max-width: 760px) { .stg-detail { grid-template-columns: 1fr; } .stg-head { flex-wrap: wrap; } }
/* The board stays in view while reading the move's lines and explanation (2026-10-30): only side by
   side and when the window is tall enough for the whole column. */
@media (min-width: 761px) and (min-height: 600px) {
  .stg-detail > .stg-board-col { position: sticky; top: 12px; align-self: start; }
}
.stg-board .board { width: 100%; max-width: 320px; }
.stg-info { font-size: 13px; min-width: 0; }
.stg-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.stg-step { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; cursor: pointer; font: inherit; font-size: 12px; }
.stg-step.on { border-color: var(--accent); background: rgba(79,143,247,.18); }
.stg-step.turn { font-weight: 700; }
.stg-move { background: var(--panel); border-radius: 6px; padding: 6px 10px; margin: 8px 0; }
.stg-move p { margin: 4px 0; }
.stg-changes { margin: 4px 0; padding-left: 18px; }
.stg-review { display: flex; flex-direction: column; gap: 6px; }
.stg-review h4 { margin: 6px 0 0; }
.stg-verdict { display: flex; gap: 16px; flex-wrap: wrap; }
.stg-review select, .stg-review textarea { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; color-scheme: dark; }
.stg-review button { align-self: flex-start; }
.stg-games td.res-win { color: var(--best); }
.stg-games td.res-loss { color: var(--blunder); }
#view-strategy { min-width: 0; }
.stg-line { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 2px; }
.stg-mv { background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 4px; padding: 2px 6px; cursor: pointer; font: inherit; font-size: 13px; }
.stg-mv.mine { font-weight: 700; background: var(--panel); border-color: var(--border); }
.stg-mv.opp { color: var(--text-dim); }
.stg-mv:hover { border-color: var(--accent); }
.stg-mv.on { border-color: var(--accent); background: rgba(79,143,247,.22); color: var(--text); }
.stg-nav { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 2px; max-width: 300px; }
.stg-nav button { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 14px; }
.stg-nav button:hover:not(:disabled) { border-color: var(--accent); }
.stg-nav button:disabled { opacity: .35; cursor: default; }
.sq.hl-opp { box-shadow: inset 0 0 0 3px rgba(79, 143, 247, .9); }
.stg-you, .stg-them { font-size: 11px; border-radius: 10px; padding: 1px 8px; margin-left: 4px; }
.stg-you { background: rgba(244,67,54,.18); color: var(--blunder); }
.stg-them { background: rgba(79,143,247,.18); color: var(--accent); }

/* ---------- Tab: Finales ---------- */
.egm-tiles .ins-tile b .hint { font-size: 13px; font-weight: 400; }
.egm-key { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.egm-types th[scope=row] { text-align: left; font-weight: 600; padding: 6px 8px; white-space: nowrap; }
.egm-types td.num { padding: 6px 8px; }
.egm-path { font-size: 12px; }
.egm-cat { border-radius: 10px; padding: 0 7px; }
.egm-cat.cat-winning { background: rgba(66,133,244,.25); }
.egm-cat.cat-drawish { background: var(--sand); }
.egm-cat.cat-losing { background: rgba(229,57,53,.25); }
.egm-res { font-weight: 700; }
.egm-change { font-weight: 700; color: var(--mistake); }
.egm-clock { color: var(--inaccuracy); }
.stg-mv.throw { border-color: var(--blunder); color: var(--blunder); }
#view-endgames { min-width: 0; }
.ins-phases { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.xpl-sol { margin: 4px 0; }
.xpl-sol.only b { color: var(--inaccuracy); }
.ai-usage { cursor: help; }
/* «Agenda» */
.pz-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.pz-chip { font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--mistake); color: var(--mistake); }
.pz-cmd { background: var(--panel-2); padding: 8px; border-radius: 6px; font-size: 12px; overflow-x: auto; }
.pz-live .sq { cursor: pointer; }
.ag-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ag-spacer { flex: 1; }
.ag-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
/* The week board uses the whole screen width (other views keep 1328px), so the titles fit. */
.layout:has(#view-agenda.active) { max-width: 1760px; }
.ag-card-head .ag-short.ag-full { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; line-height: 1.3; overflow-wrap: anywhere; }
.ag-card-head:has(.ag-full) { align-items: flex-start; }
.ag-col { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-height: 140px; display: flex; flex-direction: column; gap: 5px; }
.ag-col.today { border-color: var(--accent); }
.ag-col.past { opacity: .8; }
.ag-col.drop { background: var(--panel-2); border-style: dashed; }
.ag-col-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ag-dayname { text-transform: capitalize; }
.ag-today { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: none; }
/* Colour by type of task (agenda.js agType); the status is shown apart: an empty ring (pending),
   a pulsing dot (in progress), ✓ and struck through (done). */
:root { --ty-train: #1F5E45; --ty-puzzles: #2F6FB0; --ty-missed: #A8560F; --ty-assistant: #6B4FA0;
  --ty-analysis: #A23E6B; --ty-game: #8F6300; --ty-custom: #6F685C; }
.ty-train { --ty: var(--ty-train); } .ty-puzzles { --ty: var(--ty-puzzles); } .ty-missed { --ty: var(--ty-missed); }
.ty-assistant { --ty: var(--ty-assistant); } .ty-analysis { --ty: var(--ty-analysis); } .ty-game { --ty: var(--ty-game); }
.ty-custom { --ty: var(--ty-custom); }
.ag-legend-types { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ag-lg { display: inline-flex; gap: 5px; align-items: center; }
.ag-sw { width: 12px; height: 12px; border-radius: 3px; background: var(--ty); display: inline-block; }
.ag-sw-st { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); display: inline-block; margin-right: 4px; animation: ag-pulse 1.4s ease-in-out infinite; }
@keyframes ag-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .ag-sw-st, .ag-status.st-doing::after { animation: none; } }
.ag-mode { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.ag-mode button { border: none; border-radius: 0; background: transparent; color: var(--text-dim); padding: 4px 12px; cursor: pointer; }
.ag-mode button.on { background: var(--accent); color: #fff; }
/* Week view: the card's head is a solid pill of its type's colour; the details open below it. */
.ag-card[class*="ty-"] { border-left: none; background: var(--panel-2); padding: 0; gap: 0; overflow: hidden; }
.ag-card[class*="ty-"] > .ag-card-head { background: var(--ty); color: #fff; padding: 4px 8px; }
.ag-card[class*="ty-"] > .ag-card-head .ag-chevron { color: rgba(255, 255, 255, .8); }
.ag-card[class*="ty-"] > .ag-card-head .ag-target { border-color: rgba(255, 255, 255, .6); color: #fff; }
.ag-card[class*="ty-"] > .ag-card-head .ag-target.ok { background: rgba(255, 255, 255, .25); }
.ag-card[class*="ty-"] > .ag-detail { padding: 6px 8px; border-top: none; }
.ag-card[class*="ty-"].st-done { opacity: .55; }
.ag-card[class*="ty-"].st-done .ag-short { text-decoration: line-through; }
.ag-card[class*="ty-"] .ag-status { --st: #fff; border-color: rgba(255, 255, 255, .9); background: transparent; color: var(--ty);
  font-size: 10px; font-weight: 700; line-height: 10px; text-align: center; position: relative; }
.ag-card[class*="ty-"] .ag-status.st-done { background: #fff; }
.ag-card[class*="ty-"] .ag-status.st-doing::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #fff; animation: ag-pulse 1.4s ease-in-out infinite; }
/* Month view */
.ag-month-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; margin-top: 12px; align-items: start; }
.ag-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.ag-mhead { padding: 6px 8px; font-size: 12px; color: var(--text-dim); text-transform: capitalize; border-bottom: 1px solid var(--border); }
.ag-mcell.ag-col { border: none; border-radius: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 104px; padding: 4px; gap: 3px; cursor: pointer; background: transparent; }
.ag-mcell:nth-child(7n) { border-right: none; }
.ag-mcell.wknd { background: color-mix(in srgb, var(--ty-missed) 5%, transparent); }
.ag-mcell.out { opacity: .45; }
.ag-mcell.today .ag-mday b { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; }
.ag-mcell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.ag-mcell.drop { background: var(--panel-2); }
.ag-mday { display: flex; gap: 4px; align-items: center; font-size: 12px; }
.ag-mday .ag-time { font-size: 10px; }
.ag-pill { flex-direction: row !important; align-items: center; gap: 4px !important; padding: 1px 6px !important; border-radius: 10px !important;
  background: var(--ty) !important; color: #fff; font-size: 11px; min-height: 18px; cursor: pointer; }
.ag-pill .ag-short { font-size: 11px; }
.ag-pill .ag-status { width: 11px; height: 11px; min-width: 11px; border-width: 1.5px; font-size: 8px; line-height: 8px; }
.ag-pill.sel { box-shadow: 0 0 0 2px var(--text); }
.ag-more { font-size: 11px; padding: 0 4px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; text-align: left; }
.ag-side { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 8px; }
.ag-side-head { display: flex; gap: 8px; align-items: center; }
.ag-side-head .ag-time { margin-left: 0; }
.ag-side-head .ag-dayname { text-transform: none; }
.ag-side-head .ag-dayname::first-letter { text-transform: uppercase; }
.ag-side-close { margin-left: auto; background: transparent; border: none; color: var(--text-dim); cursor: pointer; }
.ag-side-list { display: flex; flex-direction: column; gap: 5px; }
.ag-side .ag-pill { font-size: 12px; min-height: 24px; }
@media (max-width: 900px) {
  .ag-month-wrap { grid-template-columns: 1fr; }
  .ag-side { position: static; }
  .ag-mcell.ag-col { min-height: 70px; }
  .ag-mcell .ag-pill .ag-short, .ag-mday .ag-time { display: none; }
  .ag-mcell .ag-pill { min-height: 10px; padding: 0 !important; justify-content: center; }
}
/* Status colours: pending (blue), in progress (amber), done (green). */
.ag-card { --st: var(--accent); background: var(--panel-2); border: 1px solid var(--border); border-left: 4px solid var(--st); border-radius: 6px; padding: 5px 8px; display: flex; flex-direction: column; gap: 6px; cursor: grab; }
.ag-card.st-doing { --st: var(--inaccuracy); background: color-mix(in srgb, var(--inaccuracy) 10%, var(--panel-2)); }
.ag-card.st-done { --st: var(--best); background: color-mix(in srgb, var(--best) 10%, var(--panel-2)); }
.ag-card.st-done .ag-short { text-decoration: line-through; opacity: .75; }
.ag-card.editing { cursor: default; border-left-color: var(--border); }
.ag-card.dragging { opacity: .4; }
.ag-card.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.ag-card-head { display: flex; gap: 6px; align-items: center; cursor: pointer; min-height: 22px; }
.ag-short { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chevron { color: var(--text-dim); font-size: 11px; }
.ag-status, .ag-dot { width: 14px; height: 14px; min-width: 14px; padding: 0; border-radius: 50%; border: 2px solid var(--st); background: transparent; cursor: pointer; display: inline-block; vertical-align: middle; }
.ag-status.st-todo, .ag-dot.st-todo { --st: var(--accent); }
.ag-status.st-doing, .ag-dot.st-doing { --st: var(--inaccuracy); background: var(--inaccuracy); }
.ag-status.st-done, .ag-dot.st-done { --st: var(--best); background: var(--best); }
.ag-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.ag-help summary { cursor: pointer; }
.ag-detail { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.ag-title { font-size: 13px; line-height: 1.3; margin: 0; }
.ag-status-set { display: flex; gap: 2px; }
.ag-status-set button { flex: 1; font-size: 11px; padding: 2px 4px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
.ag-status-set button.on.st-todo { background: var(--accent); color: #fff; border-color: var(--accent); }
.ag-status-set button.on.st-doing { background: var(--inaccuracy); color: #000; border-color: var(--inaccuracy); }
.ag-status-set button.on.st-done { background: var(--best); color: #fff; border-color: var(--best); }
.ag-notes { margin: 0; font-size: 12px; }
.ag-check { width: 20px; height: 20px; min-width: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--text-dim); background: transparent; color: var(--best); font-size: 12px; line-height: 1; cursor: pointer; }
.ag-card.st-done .ag-check { border-color: var(--best); }
.ag-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.ag-meta:empty { display: none; }
.ag-target { padding: 0 6px; border-radius: 8px; border: 1px solid var(--border); font-size: 11px; white-space: nowrap; }
.ag-target.ok { color: var(--best); border-color: var(--best); }
.ag-doing { color: var(--inaccuracy); font-weight: 600; }
.ag-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ag-actions > button { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
.ag-actions > button.ag-start { white-space: normal; text-align: left; flex: 1 1 100%; }
.ag-tools { display: inline-flex; gap: 1px; }
.ag-tools button { background: transparent; border: none; color: var(--text-dim); font-size: 12px; padding: 2px 4px; cursor: pointer; border-radius: 4px; }
.ag-tools button:hover { background: var(--border); color: var(--text); }
.ag-add { font-size: 12px; align-self: flex-start; opacity: .8; }
.ag-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.ag-row input[type=number] { width: 60px; }
.ag-card input[type=text], .ag-card textarea, .ag-card select { width: 100%; box-sizing: border-box; }
.ag-time { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.ag-time.over { color: var(--inaccuracy); font-weight: 700; }
.trn-av { margin: 6px 0; }
.trn-av-use { display: flex; gap: 6px; align-items: center; }
.trn-fit { margin-bottom: 10px; }
.trn-fit table { max-width: 360px; }
/* «Mi disponibilidad» */
.av-box { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.av-box > summary { cursor: pointer; }
.av-ask { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--panel-2); }
.av-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.av-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.av-days { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.av-day { display: flex; flex-direction: column; align-items: center; font-size: 12px; gap: 2px; }
.av-day input { width: 58px; }
.av-same { display: inline-flex; gap: 4px; align-items: center; margin-left: 8px; }
.av-same input, #av-weekly { width: 70px; }
.av-form .ins-actions button { font-size: 13px; }
.av-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.av-preset { font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.av-preset.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.av-cats { display: grid; gap: 4px; max-width: 560px; }
.av-cat { display: grid; grid-template-columns: minmax(130px, 170px) 1fr 42px 64px; gap: 8px; align-items: center; font-size: 13px; }
.av-pct-val { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .av-cat { grid-template-columns: 1fr 42px 64px; } .av-cat .av-pct { grid-column: 1 / -1; grid-row: 2; } }
.ag-overdue { background: var(--panel); border: 1px solid var(--mistake); border-radius: 8px; padding: 8px; margin-top: 12px; }
.ag-overdue-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.ai-usage.ai-low { color: var(--mistake); }
.gl-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 16px; background: var(--panel-2); border-bottom: 1px solid var(--inaccuracy); }
.gl-bar { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.gl-bar b.gl-ok { color: var(--best); }
.gl-days { display: inline-flex; gap: 3px; align-items: flex-end; height: 26px; }
.gl-day { width: 8px; height: 100%; background: var(--panel-2); border-radius: 2px; display: flex; align-items: flex-end; }
.gl-day i { display: block; width: 100%; background: var(--text-dim); border-radius: 2px; min-height: 2px; }
.gl-day.met i { background: var(--best); }
.gl-settings { margin-bottom: 10px; }
.gl-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gl-form input[type=number] { width: 70px; }
.gl-dows { display: flex; gap: 10px; flex-wrap: wrap; }
.ad-st { padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid currentColor; }
.ad-st-weak { color: var(--blunder); }
.ad-st-learning { color: var(--inaccuracy); }
.ad-st-new { color: var(--text-dim); }
.ad-st-solid { color: var(--best); }
.exr-pos.done { opacity: .55; }
.ad-skills { margin-top: 10px; }
.exr-ch-badge { border-color: var(--mistake); white-space: nowrap; }
.exr-ch-row { align-items: center; }
.ins-train-motif { font-size: 12px; padding: 1px 8px; margin-left: 4px; }
.ins-strengths { list-style: none; padding-left: 0; margin: 8px 0; }
.ins-strengths li { margin: 4px 0; color: var(--best); }
.ins-str-ex li { margin: 4px 0; }
.ins-phase span { font-size: 13px !important; color: var(--text) !important; }
.ins-phase .ins-phase-title { font-weight: 700; font-size: 12px !important; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim) !important; margin-bottom: 2px; }
.ins-phase b { font-size: 13px !important; }

/* ---------- Import: time controls and PGN ---------- */
.import-speeds { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 4px 0 8px; font-size: 13px; }
.import-speeds label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
#lib-pgn-text { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: 12px/1.4 ui-monospace, monospace; resize: vertical; box-sizing: border-box; }
#lib-pgn-name { flex: 1; min-width: 180px; }
.import-file { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--text-dim); }
.stg-lines h4 { margin: 10px 0 4px; font-size: 13px; }
.stg-alt-lines li { flex-wrap: wrap; }
.line-move.on { border-color: var(--best); box-shadow: 0 0 0 1px var(--best); }

/* ---------- Tab: Entrenamiento (exercises) ---------- */
#view-exercises { min-width: 0; }
.exr-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; }
@media (max-width: 760px) { .exr-grid { grid-template-columns: 1fr; } }
.exr-live .sq { cursor: pointer; }
.exr-side { min-width: 0; font-size: 14px; }
.exr-side textarea { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; line-height: 1.5; resize: vertical; }
.exr-clockrow { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.exr-table tbody tr, .exr-hist tbody tr { cursor: pointer; }
.exr-table tbody tr:hover, .exr-hist tbody tr:hover { background: var(--panel-2); }
.exr-badge { font-size: 11px; border-radius: 10px; padding: 1px 8px; background: var(--panel-2); border: 1px solid var(--border); }
.exr-badge.k-tactics { border-color: var(--blunder); }
.exr-badge.k-strategy { border-color: var(--accent); }
.exr-badge.k-endgame { border-color: var(--best); }
.exr-last.v-ok { color: var(--best); } .exr-last.v-warn { color: var(--inaccuracy); } .exr-last.v-bad { color: var(--blunder); }
.exr-verdict { border-left: 4px solid var(--best); background: var(--panel-2); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.exr-verdict.v-warn { border-left-color: var(--inaccuracy); } .exr-verdict.v-bad { border-left-color: var(--blunder); }
.exr-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.exr-fact { font-size: 12px; border-radius: 12px; padding: 2px 10px; border: 1px solid var(--border); }
.exr-fact.ok { color: var(--best); border-color: rgba(76,175,80,.5); } .exr-fact.bad { color: var(--blunder); border-color: rgba(244,67,54,.5); }
.exr-mv { margin: 0 6px; }
.exr-thoughts-done p { white-space: pre-wrap; background: var(--panel-2); border-radius: 6px; padding: 8px 10px; margin: 4px 0; }
.exr-phase .ins-card-head { display: grid; grid-template-columns: minmax(150px, 260px) 1fr 34px 14px; gap: 10px; }
.exr-ph-bar { height: 8px; background: var(--sand); border-radius: 4px; overflow: hidden; }
.exr-ph-bar span { display: block; height: 100%; border-radius: 4px; }
.exr-ph-score { text-align: right; }
.exr-failed { padding-left: 18px; } .exr-failed li { margin: 4px 0; }
.exr-step { cursor: pointer; border: 0; font: inherit; }
.exr-wait { font-size: 14px; }

/* «Explicar»: AI explanation of a position (explain.js) */
.xpl-box { margin: 12px 0; }
.xpl-btn { font-weight: 600; }
.xpl-hint { display: block; margin-top: 4px; }
.xpl-loading { color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.xpl-spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: xpl-spin 0.8s linear infinite; }
@keyframes xpl-spin { to { transform: rotate(360deg); } }
.xpl-error { color: var(--blunder); margin: 0 0 6px; }
.xpl-result { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 10px 14px; background-color: rgba(79, 143, 247, 0.06); }
.xpl-result h4 { margin: 10px 0 4px; }
.xpl-result h4:first-child { margin-top: 0; }
.xpl-result p { margin: 4px 0; line-height: 1.45; }
.xpl-result ul { padding-left: 18px; margin: 4px 0; }
.xpl-best li { margin-bottom: 6px; }
.xpl-why { margin-top: 2px; line-height: 1.45; }
.xpl-pv { font-family: ui-monospace, monospace; font-size: 0.85em; }
.xpl-key { font-weight: 600; }
.xpl-warn { color: var(--inaccuracy); font-size: 0.9em; }
.xpl-diff { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.85em; font-weight: 600;
  border: 1px solid currentColor; margin-right: 6px; }
.xpl-diff-easy { color: var(--best); }
.xpl-diff-within-reach { color: var(--good); }
.xpl-diff-hard { color: var(--mistake); }
.xpl-diff-very-hard { color: var(--blunder); }
.xpl-src { font-size: 0.8em; margin-top: 8px; }

/* «Progreso»: training progress (progress.js) */
.prg-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.prg-last { margin: 0; }
.prg-key { margin: 12px 0 0; padding-left: 18px; line-height: 1.5; }
.prg-few { margin-top: 8px; }
.prg-steps { list-style: none; padding: 0; margin: 8px 0 0; }
.prg-step { padding: 8px 0; border-bottom: 1px solid var(--border); }
.prg-step:last-child { border-bottom: 0; }
.prg-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prg-tut { cursor: pointer; }
.prg-bar { flex: 1 1 120px; min-width: 80px; max-width: 260px; height: 8px; background-color: var(--panel-2); border-radius: 4px; overflow: hidden; }
.prg-bar span { display: block; height: 100%; background-color: var(--mistake); }
.prg-step-more { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.prg-kind-chip { background-color: var(--panel-2); border-radius: 10px; padding: 1px 8px; }
.prg-open { background-color: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; cursor: pointer; font: inherit; font-size: 12px; }
.prg-open:hover { border-color: var(--accent); }
.prg-table td.prg-cell { white-space: nowrap; }
.prg-cell.few { opacity: 0.55; }
.prg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.prg-verdicts { display: inline-flex; width: 90px; height: 8px; border-radius: 4px; overflow: hidden; background-color: var(--panel-2); vertical-align: middle; }
.prg-verdicts span { height: 100%; }
.pv-best { background-color: var(--best); } .pv-good { background-color: var(--good); }
.pv-inaccuracy { background-color: var(--inaccuracy); } .pv-mistake { background-color: var(--mistake); }
.pv-blunder { background-color: var(--blunder); }
.prg-spark { display: flex; align-items: flex-end; gap: 2px; height: 70px; padding: 4px; background-color: var(--panel-2); border-radius: 6px; overflow: hidden; }
.prg-spark-bar { flex: 1 1 0; min-width: 2px; max-width: 18px; border-radius: 2px 2px 0 0; }
.prg-diff.up { color: var(--best); font-weight: 600; }
.prg-diff.down { color: var(--blunder); font-weight: 600; }
.prg-pattern .ins-card-head { display: flex; align-items: center; gap: 10px; }
.prg-pat-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background-color: var(--mistake); color: #fff;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.prg-pat-title { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prg-evidence { padding-left: 18px; margin: 6px 0; }
.prg-evidence li { margin-bottom: 4px; }
.prg-evidence q { font-style: italic; }
.prg-plan { padding-left: 20px; }
.prg-plan li { margin-bottom: 10px; line-height: 1.45; }
.prg-strengths { padding-left: 18px; }
.prg-dx-meta { margin-top: 14px; }

/* «Tu repertorio» (repertoire.js) */
.rep-colors { margin-bottom: 8px; }
.rep-spot .ins-card-head { display: flex; align-items: center; gap: 10px; }
.rep-spot-title { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.rep-line { font-family: ui-monospace, monospace; font-size: 0.95em; }
.rep-kind { border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.rep-kind-costly { background-color: var(--neg-bg); color: var(--neg-ink); }
.rep-kind-unsure { background-color: rgba(255, 193, 7, 0.16); color: var(--inaccuracy); }
.rep-spot-grid, .rep-explorer { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
/* Compound selector to beat .board.mini-board's fixed 180px height: keep the board square. */
.rep-board .board.mini-board { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1 / 1; }
.rep-moves td, .rep-tree td { vertical-align: top; }
.rep-games { font-size: 12px; line-height: 1.5; }
.rep-loss { font-weight: 600; }
.rep-loss.ok { color: var(--best); } .rep-loss.warn { color: var(--inaccuracy); } .rep-loss.bad { color: var(--blunder); }
.rep-best-tag { background-color: rgba(76, 175, 80, 0.18); color: var(--best); border-radius: 8px; padding: 0 6px; font-size: 11px; }
.rep-crumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 12px; }
.rep-crumb { background-color: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; cursor: pointer; font: inherit; font-size: 13px; font-family: ui-monospace, monospace; }
.rep-crumb.on { border-color: var(--accent); }
.rep-child { cursor: pointer; }
.rep-child:hover, .rep-child:focus { background-color: var(--panel-2); outline: none; }
.rep-bar { display: inline-block; width: 60px; height: 6px; vertical-align: middle; margin-left: 6px; }
.rep-flag { color: var(--inaccuracy); }
.rep-warn { color: var(--inaccuracy); }
@media (max-width: 700px) {
  .rep-spot-grid, .rep-explorer { grid-template-columns: minmax(0, 1fr); }
}
/* Pawn structures in «Pensamiento estratégico» */
.stg-structs td { vertical-align: top; }
.stg-struct-row { cursor: pointer; }
.stg-struct-row:hover, .stg-struct-row:focus { background-color: var(--panel-2); outline: none; }
.stg-struct-row.on { box-shadow: inset 3px 0 0 var(--accent); background-color: var(--panel-2); }
.stg-struct-acc .opn-chip { display: inline-block; }
.stg-struct-acc small { display: block; }
.stg-struct-chip { display: inline-block; font-size: 12px; background-color: var(--panel-2); border-radius: 10px; padding: 0 8px; margin-top: 2px; }
.stg-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--accent); }

/* Phase 3: reviews in Entrenamiento, plan sheets */
.exr-due { color: var(--accent); font-weight: 600; white-space: nowrap; }
.exr-streak { color: var(--best); font-size: 12px; }
.exr-badge.k-opening { border-color: #ab47bc; }
.exr-sol-badge { border-color: var(--inaccuracy); color: var(--inaccuracy); white-space: nowrap; }
.exr-sol { margin: 6px 0; }
.exr-sol.ok { color: var(--best); }
.exr-sol.bad { color: var(--mistake); }
.exr-origin-extra { margin: -4px 0 10px; color: var(--text-dim); }
.stg-sheet { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin: 10px 0 16px; background-color: rgba(79, 143, 247, 0.05); }
.stg-sheet h3 { margin-top: 0; }
.stg-sheet h4 { margin: 10px 0 4px; }
.stg-sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.stg-sheet-list { padding-left: 18px; margin: 4px 0; line-height: 1.45; }
.stg-sheet-list li { margin-bottom: 4px; }
.stg-sheet-ep { background-color: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; cursor: pointer; font: inherit; font-size: 12px; }
.stg-checklist ul { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 700px) { .stg-sheet-grid { grid-template-columns: minmax(0, 1fr); } }

/* «Asistente de decisión» (assistant.js) */
.ast-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ast-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ast-left .board.mini-board { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1 / 1; }
.ast-phases { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; }
.ast-phases li { padding: 4px 8px; border-radius: 6px; color: var(--text-dim); display: flex; gap: 6px; align-items: center; }
.ast-phases li.current { background-color: var(--panel-2); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.ast-phases li.done { color: var(--text); }
.ast-phases li.skipped { text-decoration: line-through; }
.ast-ph-icon { width: 16px; text-align: center; }
.ast-score { margin-left: auto; font-weight: 700; }
.ast-log { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 8px; }
.ast-msg { display: flex; gap: 8px; align-items: flex-start; }
.ast-msg.student { justify-content: flex-end; }
.ast-who { font-size: 20px; line-height: 1.2; }
.ast-bubble { max-width: 85%; padding: 8px 12px; border-radius: 12px; line-height: 1.45; background-color: var(--panel-2); }
.ast-bubble p { margin: 0 0 6px; } .ast-bubble p:last-child { margin-bottom: 0; }
.ast-msg.student .ast-bubble { background-color: rgba(79, 143, 247, 0.22); border-bottom-right-radius: 4px; }
.ast-msg.tutor .ast-bubble { border-bottom-left-radius: 4px; }
.ast-typing { display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.ast-grade { align-self: flex-end; font-size: 12px; max-width: 85%; }
.ast-grade summary { cursor: pointer; }
.ast-grade.v-correct summary { color: var(--best); } .ast-grade.v-partial summary { color: var(--inaccuracy); } .ast-grade.v-incorrect summary { color: var(--blunder); }
.ast-grade ul { margin: 4px 0; padding-left: 18px; } .ast-grade li.ok { color: var(--best); } .ast-grade li.bad { color: var(--text-dim); }
.ast-sys { align-self: center; font-size: 12px; color: var(--text-dim); font-style: italic; }
#ast-input { width: 100%; box-sizing: border-box; margin-top: 8px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; line-height: 1.5; resize: vertical; }
.ast-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ast-past { margin-top: 14px; }
.ast-pos, .ast-sess { cursor: pointer; }
.ast-pos:hover, .ast-sess:hover { background-color: var(--panel-2); }
@media (max-width: 760px) { .ast-grid { grid-template-columns: minmax(0, 1fr); } }
/* The board stays in view while reading the conversation (2026-10-30): side by side and when the window is
   tall enough; what does not fit under the board (tools, tracker) scrolls inside the column. */
@media (min-width: 761px) and (min-height: 560px) {
  .ast-grid > .ast-left { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Assistant phase 2: variations on the board, checked lines, summary */
.ast-live .sq { cursor: pointer; }
.ast-linebox { margin-top: 8px; font-size: 13px; }
.ast-line-cur { font-family: ui-monospace, monospace; margin: 4px 0; min-height: 1.4em; }
.ast-line-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ast-line-chip { background-color: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 2px 4px 2px 10px; font-family: ui-monospace, monospace; font-size: 12px; }
.ast-line-del { background: none; border: 0; color: var(--text-dim); cursor: pointer; }
.ast-checked { margin-top: 6px; font-size: 12px; }
.ast-checked ul { margin: 2px 0 6px; padding-left: 16px; }
.ast-checked .ok { color: var(--best); } .ast-checked .bad { color: var(--inaccuracy); }
.ast-summary { border: 1px solid var(--border); border-left: 3px solid var(--best); border-radius: 8px; padding: 10px 14px; margin-top: 6px; background-color: rgba(76, 175, 80, 0.05); }
.ast-summary h3 { margin-top: 0; }
.ast-sum-phases { list-style: none; padding: 0; margin: 6px 0; }
.ast-sum-phases li { padding: 4px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.ast-sum-phases li > div { grid-column: 1 / -1; font-size: 13px; }
.ast-line-cur .hint { font-family: inherit; }

/* «Entrenar mi punto débil»: series in Entrenamiento, goals in the diagnosis */
.exr-series { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; background-color: rgba(79, 143, 247, 0.06); }
.exr-series-q { margin: 6px 0; }
.exr-reason { font-size: 12px; background-color: var(--panel-2); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.prg-train, .prg-goto-clock { margin-top: 6px; background-color: var(--panel-2); color: var(--text); border: 1px solid var(--accent); border-radius: 6px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.prg-train:hover, .prg-goto-clock:hover { background-color: rgba(79, 143, 247, 0.15); }
.prg-goal { margin-top: 4px; font-size: 13px; }
.prg-goal-met { color: var(--best); font-weight: 600; }
.prg-goal-no { color: var(--inaccuracy); font-weight: 600; }

/* Decision assistant, phase 3: focus on weak phases, streamed tutor messages */
.ast-focus { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background-color: var(--panel-2); font-size: 13px; box-shadow: inset 3px 0 0 var(--inaccuracy); }
.ast-focus-steps { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ast-phases li.focus .ast-focus-mark { font-size: 12px; }
.ast-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background-color: var(--text-dim); animation: ast-blink 1s steps(2, start) infinite; }
@keyframes ast-blink { to { visibility: hidden; } }
.ast-sys .xpl-spin { vertical-align: middle; margin-right: 6px; }
.exr-ast-btn { padding: 2px 8px; }

/* ⏱ Reloj: time management */
.clk-findings { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
.ins-tile.clk-warn b { color: var(--mistake); }
.clk-share { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.clk-share-row { display: grid; grid-template-columns: minmax(130px, 200px) 1fr minmax(120px, 170px); gap: 12px; align-items: center; }
.clk-share-label { display: flex; flex-direction: column; font-size: 13px; }
.clk-share-label .hint { font-size: 11px; }
.clk-share-val { font-size: 13px; }
.clk-share-val .hint { font-size: 11px; display: block; }
.clk-track { position: relative; height: 14px; background-color: var(--panel-2); border-radius: 4px; overflow: hidden; }
.clk-healthy { position: absolute; top: 0; bottom: 0; background-color: color-mix(in srgb, var(--best) 22%, transparent); }
.clk-bar { position: absolute; left: 0; top: 3px; bottom: 3px; background-color: var(--accent); border-radius: 0 4px 4px 0; }
.clk-bar.off { background-color: var(--mistake); }
.clk-bar.err { background-color: var(--blunder); }
.clk-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 8px; }
.clk-item { display: flex; gap: 12px; background-color: var(--panel-2); border-radius: 8px; padding: 10px; }
.clk-mini { width: 132px; flex: 0 0 132px; }
.clk-mini .board.mini-board { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.clk-item-info { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.clk-cost { font-weight: 600; }
.clk-cost.tag-mistake { color: var(--mistake); } .clk-cost.tag-blunder { color: var(--blunder); } .clk-cost.tag-inaccuracy { color: var(--inaccuracy); }
.clk-table .clk-game { cursor: pointer; }
.clk-table .clk-game.on td { background-color: var(--panel-2); }
.clk-red { color: var(--blunder); font-weight: 600; }
.clk-res.win { color: var(--best); } .clk-res.loss { color: var(--blunder); } .clk-res.draw { color: var(--text-dim); }
.clk-curve h4 { margin: 6px 0; }
.clk-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.clk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.clk-key { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.clk-key.you { background-color: var(--accent); } .clk-key.opp { background-color: var(--text-dim); }
.clk-key.err { width: 10px; height: 10px; border-radius: 50%; background-color: var(--blunder); }
.clk-key.long { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--time); box-sizing: border-box; }
.clk-key.zone { width: 14px; height: 10px; background-color: color-mix(in srgb, var(--mistake) 18%, transparent); }
.clk-table-toggle { margin-left: auto; font-size: 12px; }
.clk-chart { position: relative; }
.clk-svg { width: 100%; height: auto; display: block; }
.clk-zone { fill: color-mix(in srgb, var(--mistake) 14%, transparent); }
.clk-grid { stroke: var(--border); stroke-width: 1; }
.clk-axis { fill: var(--text-dim); font-size: 11px; }
.clk-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.clk-line.you { stroke: var(--accent); } .clk-line.opp { stroke: var(--text-dim); stroke-dasharray: 4 3; }
.clk-err { stroke: var(--panel); stroke-width: 2; } .clk-err.blunder { fill: var(--blunder); } .clk-err.mistake { fill: var(--mistake); }
.clk-long { fill: var(--panel); stroke: var(--time); stroke-width: 2; }
.clk-rushed { fill: none; stroke: var(--blunder); stroke-width: 2; stroke-dasharray: 3 2; }
.clk-slow { fill: var(--inaccuracy); stroke: var(--panel); stroke-width: 1.5; }
.clk-key.rushed { width: 12px; height: 12px; border-radius: 50%; border: 2px dashed var(--blunder); box-sizing: border-box; }
.clk-key.slow { width: 9px; height: 9px; background-color: var(--inaccuracy); transform: rotate(45deg); }
.clk-flag { font-size: 12px; font-weight: 600; white-space: nowrap; }
.clk-flag.bad { color: var(--blunder); } .clk-flag.warn { color: var(--mistake); }
.clk-fb-box { background-color: var(--panel-2); border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px; }
.clk-fb-list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
.clk-fb { display: flex; gap: 8px; align-items: flex-start; }
.clk-fb-icon { flex: 0 0 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--panel); margin-top: 1px; }
.clk-fb.bad .clk-fb-icon { background-color: var(--blunder); } .clk-fb.warn .clk-fb-icon { background-color: var(--mistake); }
.clk-fb.good .clk-fb-icon { background-color: var(--best); }
.clk-fb .clk-train { margin-left: 6px; font-size: 12px; }
.clk-lost { margin: 6px 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.clk-lost .clk-goto-game { margin-left: 6px; font-size: 12px; }
.clk-cross { stroke: var(--text-dim); stroke-width: 1; }
.clk-hit { fill: transparent; cursor: crosshair; }
.clk-tip { position: absolute; top: 6px; background-color: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; pointer-events: none; max-width: 260px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.clk-moves { margin-top: 8px; font-size: 12px; }
.clk-moves tr.tag-blunder td:first-child { color: var(--blunder); } .clk-moves tr.tag-mistake td:first-child { color: var(--mistake); }
@media (max-width: 640px) {
  .clk-share-row { grid-template-columns: 1fr; gap: 4px; }
  .clk-items { grid-template-columns: 1fr; }
  .clk-mini { width: 96px; flex-basis: 96px; }
}

/* ⏱ Reloj, phase 3: timed exercises */
.exr-clockrow.timed { font-weight: 600; }
.exr-clockrow.low #exr-clock { color: var(--mistake); }
.exr-clockrow.over #exr-clock, .exr-timeup { color: var(--blunder); }
.exr-in-time { color: var(--best); } .exr-over-time { color: var(--blunder); }
.clk-budget { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 4px;
  padding: 10px 12px; border-radius: 8px; background-color: var(--panel-2); font-size: 13px; }

/* «Mejores jugadas» */
.hl-chips { display: flex; flex-direction: column; gap: 6px; }
.hl-chip { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; }
.hl-chip.open, .hl-chip:hover { border-color: var(--best); }
.hl-move { font-weight: 700; min-width: 7em; }
.hl-tags { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.hl-tag { padding: 1px 8px; border-radius: 10px; font-size: 0.8em; font-weight: 600; border: 1px solid currentColor; }
.hl-tag-hard { color: var(--accent); }
.hl-tag-punish { color: var(--best); }
.hl-tag-sacrifice { color: var(--mistake); }
.hl-tag-only { color: var(--inaccuracy); }
.hl-criteria { margin-top: 8px; }
.hl-criteria summary { cursor: pointer; font-weight: 600; }
.hl-criteria p, .hl-criteria li { font-size: 0.92em; }
.err-info h3.hl-detail-title { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 15px; }

/* «Partidas comentadas» (annotated.js) */
#an-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#an-form[hidden] { display: none; }
#an-pgn { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 12px; }
.an-example { background: var(--panel-2); padding: 8px; border-radius: 6px; font-size: 12px; white-space: pre-wrap; }
.an-viewer[hidden] { display: none; }
.an-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.an-head h3 { margin: 0; }
.an-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.an-chip { font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border); }
.an-chip.ok { border-color: var(--best); color: var(--best); }
.an-chip.bad { border-color: var(--mistake); color: var(--mistake); }
.an-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.an-nav { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.an-moment-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.an-moment-nav b { font-size: 16px; }
.an-behind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--sand); color: var(--ink-2); font-size: 13px; }
.an-behind button, .an-goto-moment { min-height: 32px; }
.an-moment h4 { margin: 12px 0 4px; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.an-said { margin: 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--panel-2); font-style: italic; }
.an-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.an-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.an-ico { min-width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.an-check.ok .an-ico { background: var(--best); color: #fff; }
.an-check.bad .an-ico { background: var(--mistake); color: #fff; }
.an-check.na .an-ico { background: var(--border); }
.an-linebtn, .an-breakbtn, .an-crit { font-size: 12px; padding: 1px 6px; margin-left: 2px; }
.an-linebtn { font-family: ui-monospace, monospace; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; }
.an-critical { margin-top: 14px; }
.an-critical ul { margin: 4px 0; padding-left: 18px; }
.an-critical li { margin: 3px 0; font-size: 13px; }
.an-text { line-height: 1.9; font-size: 14px; background: var(--panel-2); padding: 10px 12px; border-radius: 8px; }
.an-mv { cursor: pointer; padding: 1px 3px; border-radius: 3px; white-space: nowrap; }
.an-mv:hover { background: var(--border); }
.an-mv.main { font-weight: 600; }
.an-mv.moment { text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }
.an-mv.on { background: var(--accent); color: #fff; }
.an-mv.broken { color: var(--mistake); font-weight: 700; }
.an-comment { color: #8fbf7f; font-style: italic; }
.an-line { color: var(--text-dim); }
.an-line.d2 { font-size: 13px; }
.an-line.d3 { font-size: 12px; }
.an-badge { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 8px; margin-left: 2px; vertical-align: super; }
.an-badge.ok { background: var(--best); color: #fff; }
.an-badge.bad { background: var(--mistake); color: #fff; }
@media (max-width: 760px) { .an-grid { grid-template-columns: 1fr; } }
.an-left .board.mini-board { width: 340px; height: 340px; max-width: 100%; }
@media (max-width: 420px) { .an-left .board.mini-board { width: calc(100vw - 64px); height: calc(100vw - 64px); } }

.an-ai { margin: 10px 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.an-ai.ask { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.an-ai.ask p { flex-basis: 100%; margin: 0; }
.an-ai.pending { display: flex; gap: 8px; align-items: center; }
.an-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: an-spin 0.9s linear infinite; }
@keyframes an-spin { to { transform: rotate(360deg); } }
.an-ai-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.an-ai-ask.small { padding: 2px 8px; }
.an-ai-headline { font-size: 15px; margin: 6px 0 8px; }
.an-ai-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.an-ai-col h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); }
.an-ai-col ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.an-ai-col.good h4 { color: var(--best); }
.an-ai-col.bad h4 { color: var(--mistake); }
.an-ai-moment { font-size: 13px; line-height: 1.5; }
.an-ai-moment p { margin: 3px 0; }
.an-lesson { padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.an-phase { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--accent); color: var(--accent); text-transform: none; letter-spacing: 0; }
.an-crit-note { font-size: 12px; color: var(--text-dim); margin: 2px 0 4px; }

.ins-tile.th-weak { border-color: var(--mistake); }
.ins-tile.th-weak b { color: var(--mistake); }
.th-facts { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.exr-an-badge { cursor: help; }
/* «Mis posiciones» */
.exr-cp { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.exr-cp textarea { width: 100%; box-sizing: border-box; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }
.exr-cp-label { font-weight: 600; }
.exr-cp .import-row { flex-wrap: wrap; }
.exr-cp .import-row input[type="text"] { flex: 1; min-width: 180px; }
.exr-cp-list td { vertical-align: middle; }
.exr-cp-actions { white-space: nowrap; text-align: right; }
.exr-cp-actions button { min-height: 32px; }

/* «Mi cuenta» and «Primeros pasos» (account.js) */
button.account-user { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 3px 8px; cursor: pointer; font: inherit; font-weight: 600; color: var(--text); }
button.account-user:hover { border-color: var(--border); }
.auth-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 4px 0 8px; }
.auth-privacy[hidden] { display: none; }
.acc-modal { max-width: 520px; max-height: 90vh; overflow-y: auto; }
.acc-modal h3 { font-size: 14px; margin: 16px 0 4px; }
.acc-danger { margin-top: 16px; border: 1px solid var(--blunder); border-radius: 8px; padding: 8px 12px; }
.acc-danger summary { cursor: pointer; color: var(--blunder); font-weight: 600; }
.acc-delete-btn { background: var(--blunder); color: #fff; border: none; border-radius: 6px; padding: 6px 12px; cursor: pointer; margin-top: 6px; }
.ob-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ob-form label { display: flex; flex-direction: column; font-size: 12px; gap: 2px; }
.ob-form input { width: 150px; }
.ob-panel { margin: 10px 16px 0; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.ob-panel[hidden] { display: none; }
.ob-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ob-head #btn-ob-hide { margin-left: auto; }
.ob-bar { flex: 0 0 160px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ob-bar i { display: block; height: 100%; background: var(--best); }
.ob-intro { margin: 8px 0 0; }
.ob-steps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ob-step { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 8px; border-radius: 8px; }
.ob-step.done { opacity: .6; }
.ob-step.next { grid-column: 1 / -1; background: var(--panel); border: 1px solid var(--border); padding: 10px 12px; }
.ob-step.next p { margin: 4px 0 8px; }
.ob-check { min-width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--border); }
.ob-step.done .ob-check { background: var(--best); border-color: var(--best); color: #fff; }
.ob-step.next .ob-check { border-color: var(--accent); color: var(--accent); }
.ob-action { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Automatic sync («Mis partidas», «Mi cuenta»; sync.js) ---------- */
.lib-sync { margin-bottom: 12px; }
.syn-new { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px;
  border-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.syn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.syn-row > span { margin-right: auto; }
.syn-states { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.9em; }
.syn-states li { padding: 2px 0; }
.syn-err { color: var(--mistake); }
.syn-form { display: grid; gap: 8px; }
.syn-form label { display: inline-flex; align-items: center; gap: 6px; }
.syn-speed { margin-right: 8px; }

/* ---------- «¿Se nota en tus partidas?» (Progreso; transfer.js) ---------- */
.trf-summary { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.trf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
.trf-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.trf-card > .hint { margin: 4px 0 8px; font-size: 0.85em; }
.trf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.trf-verdict { font-size: 0.8em; padding: 1px 8px; border-radius: 10px; white-space: nowrap; border: 1px solid var(--border); }
.trf-better { color: var(--best); border-color: var(--best); }
.trf-worse { color: var(--blunder); border-color: var(--blunder); }
.trf-same { color: var(--text); }
.trf-few_data { color: var(--text-dim); }
.trf-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.trf-compare > div { display: flex; flex-direction: column; min-width: 0; }
.trf-compare b { font-size: 1.15em; }
.trf-compare .hint { font-size: 0.78em; }
.trf-arrow { font-size: 1.3em; color: var(--text-dim); }
.trf-arrow.up { color: var(--best); }
.trf-arrow.down { color: var(--blunder); }
.trf-chart { width: 100%; height: auto; display: block; margin-top: 8px; }
.trf-band { fill: var(--accent); opacity: 0.16; }
.trf-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.trf-dot { fill: var(--accent); stroke: var(--panel-2); stroke-width: 1.5; }
.trf-bar { fill: var(--text-dim); opacity: 0.55; }
.trf-split { stroke: var(--inaccuracy); stroke-width: 1.5; stroke-dasharray: 4 3; }
.trf-axis { stroke: var(--border); }
.trf-tick { fill: var(--text-dim); font-size: 9px; }
.trf-axis-dates { display: flex; justify-content: space-between; font-size: 0.75em; padding-left: 30px; }
.trf-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0 0; }
.trf-how { margin-top: 10px; }
@media (max-width: 480px) { .trf-grid { grid-template-columns: 1fr; } }

/* ---------- «Tu semana / Tu mes» (Progreso; weekly.js) ---------- */
.wk-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.wk-title { margin: 0 4px; display: inline-block; }
.wk-title::first-letter { text-transform: uppercase; }
.wk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wk-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-tile b { font-size: 1.3em; }
.wk-tile .hint { font-size: 0.8em; }
.wk-vs { color: var(--text-dim); }
.wk-vs.up { color: var(--best); }
.wk-vs.down { color: var(--blunder); }
.wk-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border); }
.wk-next-list { padding-left: 18px; }
.wk-next-list li { margin: 4px 0; }
.wk-comment { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--panel-2);
  border-radius: 0 8px 8px 0; }
.wk-comment.old { opacity: 0.75; }
.wk-comment-ask { margin-top: 12px; }

/* «Explicar» under the boards of «Partidas» and «Partidas comentadas» (explain.js) */
.move-explain:not(:empty), .an-explain { margin-top: 10px; }
.an-explain > b { display: block; margin-bottom: 4px; font-size: 0.9em; }

/* ---------- «Hoy» (today.js, UI redesign phase 1) ---------- */
#view-today { padding: 0; }
.td-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 24px 56px; display: flex; flex-direction: column; gap: 24px; }
.td-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.td-eyebrow, .td-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.td-title { margin: 6px 0 0; font-size: clamp(32px, 5vw, 44px); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
.td-sub { margin: 8px 0 0; font-size: 17px; color: var(--ink-2); }
.td-sub b { color: var(--ink); }
.td-news { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px 8px 8px 14px; font-size: 14px; }
.td-news span { color: var(--ink-2); font-size: 13px; }

.td-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.td-row-2 { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.td-plan { flex: 999 1 560px; min-width: 0; }
.td-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.td-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.td-h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.td-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.td-dim { color: var(--ink-2); }
.td-small { font-size: 13px; margin: 0; line-height: 1.45; }
.td-skel { height: 140px; border-radius: 14px; background: linear-gradient(90deg, var(--sand), var(--surface-2), var(--sand));
  background-size: 200% 100%; animation: td-skel 1.4s ease-in-out infinite; }
@keyframes td-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.td-row { display: flex; flex-wrap: wrap; gap: 10px; }
.td-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  border-top: 1px solid var(--sand); padding-top: 12px; margin-top: auto; }

/* Buttons of the redesign: one call to action (gold), primary (ink), secondary (sand), text links. */
.td-btn { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 0; cursor: pointer; font-size: 14px; font-weight: 700; white-space: nowrap; }
.td-btn-1 { background: var(--ink); color: var(--ground); }
.td-btn-2 { background: var(--sand); color: var(--ink); }
.td-btn:hover { filter: brightness(.95); }
.td-btn-1:hover { filter: brightness(1.3); }
.td-link { background: none; border: 0; padding: 8px 4px; min-height: 36px; cursor: pointer; color: var(--pos); font-size: 14px; font-weight: 700; }
.td-link:hover { text-decoration: underline; }
.td-warn { color: var(--neg-ink); }

/* Level */
.td-level { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.td-ring { position: relative; width: 150px; height: 150px; flex: none; }
.td-ring-track { fill: none; stroke: var(--sand); stroke-width: 12; }
.td-ring-fill { fill: none; stroke: var(--pos); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.td-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.td-ring-in span { font-size: 13px; color: var(--ink-2); }
.td-ring-in b { font-size: 50px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.td-level-txt { display: flex; flex-direction: column; gap: 4px; }
.td-big { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.td-up { color: var(--pos); font-weight: 700; font-size: 14px; }
.td-down { color: var(--neg-ink); font-weight: 700; font-size: 14px; }

/* Streak */
/* «Tu progreso»: next achievement, XP, puzzle level (only with a puzzle rating). */
.td-prog { gap: 16px; }
.td-na { display: flex; flex-direction: column; gap: 8px; }
.td-na-eyebrow { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.td-na-name { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.td-na-name svg { color: var(--gold); flex: none; }
.td-na-bar { height: 12px; border-radius: 99px; background: var(--sand); overflow: hidden; }
.td-na-bar > span { display: block; height: 100%; background: var(--pos); border-radius: 99px; transition: width .6s ease; }
.td-na-num { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.td-xp { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--sand); }
.td-xp-n { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.td-pz { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--sand); }
.td-pz-lvl { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 5px solid var(--pos); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1; }
.td-pz-lvl span { font-size: 10px; color: var(--ink-2); }
.td-pz-lvl b { font-size: 22px; font-weight: 900; }
.td-pz-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.td-pz-txt .td-up, .td-pz-txt .td-down { font-size: 13px; white-space: nowrap; }
.td-track.td-track-full { width: 100%; }
.td-prog .td-foot .td-link { padding-left: 0; padding-right: 0; }

.td-streak { display: flex; align-items: baseline; gap: 10px; }
.td-hero { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.td-streak span { font-size: 20px; font-weight: 700; }
.td-map-wrap { display: flex; gap: 6px; }
.td-dow { display: grid; grid-template-rows: repeat(7, 13px); gap: 3px; font-size: 10px; line-height: 13px; color: var(--ink-2); }
.td-map { display: grid; grid-template-rows: repeat(7, 13px); grid-auto-flow: column; grid-auto-columns: 13px; gap: 3px; }
.td-cell { display: block; width: 13px; height: 13px; border-radius: 3px; background: #E9E1D2; }
.td-cell.td-pad { background: transparent; }
.td-cell.l1 { background: #CFE0D6; } .td-cell.l2 { background: #9EC3AF; } .td-cell.l3 { background: #5E9A7C; } .td-cell.l4 { background: #1F5E45; }
.td-cell.td-now { outline: 2px solid var(--ink); outline-offset: 1px; }
.td-legend { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); }
.td-legend .td-cell { width: 11px; height: 11px; }

/* Up next: the one dark card, with the gold call to action */
.td-next { background: var(--ink); border-color: var(--ink); color: var(--surface-2); }
.td-next .td-label { color: var(--gold); }
.td-next-title { font-size: 26px; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.td-next-text { margin: 0; font-size: 15px; line-height: 1.45; color: #D6CFC2; }
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.td-chip { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #2E2A24; color: #F3EEE4; }
.td-go { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 0;
  border-radius: 14px; background: var(--gold); color: var(--ink); font-size: 17px; font-weight: 800; cursor: pointer; }
.td-go:hover { filter: brightness(1.06); }
.td-go:focus-visible { outline-color: var(--gold); }

/* Today's plan */
.td-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.td-minutes { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.td-minutes b { color: var(--ink); }
.td-track { width: 120px; height: 8px; border-radius: 99px; background: var(--sand); overflow: hidden; display: inline-block; }
.td-track > span { display: block; height: 100%; background: var(--pos); border-radius: 99px; }
.td-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.td-task { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--surface-2);
  border: 1px solid var(--sand); box-shadow: inset 5px 0 0 var(--ty, var(--ink-2)); }
.td-task.st-doing { background: #FBF6EA; border-color: var(--gold); }
.td-status { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #CFC5B3; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: var(--ink); padding: 0; }
.td-task.st-doing .td-status { border-color: var(--ty-missed); color: var(--ty-missed); font-size: 10px; animation: td-pulse 1.6s ease-in-out infinite; }
.td-task.st-done .td-status { border-color: var(--pos); background: var(--pos); color: #fff; }
@keyframes td-pulse { 50% { opacity: .45; } }
.td-task-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-task-title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.td-task.st-done .td-task-title { text-decoration: line-through; color: #6F685C; }
.td-task-meta { font-size: 13px; color: var(--ink-2); }
.td-plan-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }

/* Verdict pills (coach board) */
.td-verdict { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.td-verdict.td-pos { background: var(--pos-bg); color: var(--pos-ink); }
.td-verdict.td-neg { background: var(--neg-bg); color: var(--neg-ink); }

.td-login { max-width: 640px; }

@media (max-width: 640px) {
  .td-wrap { padding: 20px 12px 40px; gap: 16px; }
  .td-card { padding: 18px; border-radius: 18px; }
  .td-task { flex-wrap: wrap; }
  .td-task .td-btn { margin-left: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .td-skel, .td-task.st-doing .td-status { animation: none; }
  .td-ring-fill, .td-na-bar > span { transition: none; }
}

/* Account in the header: the name as a pill, the AI credits as a quiet chip. */
button.account-user { background: var(--sand); border: 0; border-radius: 999px; min-height: 32px; padding: 4px 12px; font-weight: 700; color: var(--ink); }
button.account-user:hover { background: var(--line); }
.ai-usage { background: var(--sand); color: var(--ink-2); border-radius: 999px; padding: 5px 10px; font-size: 12px; }

/* ---------- «Tu ajedrez» (scan.js, UI redesign phase 2) ---------- */
.sc-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 24px 56px; display: flex; flex-direction: column; gap: 22px; }
.sc-wrap.sc-busy { opacity: .6; transition: opacity .2s; }
.sc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sc-eyebrow, .sc-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sc-label-neg { color: var(--neg-ink); }
.sc-label-pos { color: var(--pos); }
.sc-title { margin: 6px 0 0; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; text-wrap: balance; }
.sc-h2 { margin: 0; font-size: 22px; font-weight: 800; }
.sc-select { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.sc-select select { font: inherit; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; min-height: 40px; }
/* «En resumen»: two columns, one line per point, the evidence in small print. */
.sc-sum { gap: 18px; }
.sc-sum-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px 36px; }
.sc-sum-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sc-sum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sc-sum-item { display: flex; align-items: flex-start; gap: 12px; }
.sc-sum-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sc-sum-ic-pos { background: var(--pos-bg); color: var(--pos-ink); }
.sc-sum-ic-neg { background: var(--neg-bg); color: var(--neg-ink); }
.sc-sum-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-sum-txt b { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.sc-sum-txt span { font-size: 13px; color: var(--ink-2); }
.sc-sum-go { flex: none; margin-top: -4px; }
.sc-sum-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  border-top: 1px solid var(--sand); padding-top: 16px; font-size: 15px; }
.sc-sum-foot b { color: var(--ink); }
.sc-more > summary { cursor: pointer; font-size: 15px; font-weight: 700; padding: 8px 0; color: var(--ink-2); }
.sc-more > summary:hover { color: var(--ink); }
.sc-more-body { display: flex; flex-direction: column; gap: 22px; margin-top: 12px; }
.sc-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.sc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px; display: flex; flex-direction: column;
  gap: 14px; min-width: 0; }
.sc-narrow { max-width: 640px; }
.sc-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sc-gold .sc-label, .sc-gold .sc-text, .sc-gold .sc-how { color: var(--gold-ink); }
.sc-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.sc-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.sc-dim { color: var(--ink-2); font-size: 13px; }
.sc-mono { font-family: var(--font-mono); font-weight: 600; }
.sc-skel { height: 300px; border-radius: 24px; background: linear-gradient(90deg, var(--sand), var(--surface-2), var(--sand));
  background-size: 200% 100%; animation: td-skel 1.4s ease-in-out infinite; }
.sc-how { font-size: 13px; line-height: 1.55; color: var(--ink-2); border-top: 1px solid var(--sand); padding-top: 10px; }
.sc-gold .sc-how { border-top-color: rgba(61, 51, 32, .2); }
.sc-how summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 28px; }
.sc-how p { margin: 6px 0 0; max-width: 70ch; }

/* Accuracy */
.sc-hero { display: flex; align-items: flex-start; line-height: .9; }
.sc-hero-n { font-size: clamp(88px, 12vw, 128px); font-weight: 900; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.sc-hero-u { font-size: 44px; font-weight: 800; margin-top: 10px; }
.sc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-tile { background: #F5E6C1; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0;
  font: inherit; color: var(--ink); }
.sc-tile b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-tile span { font-size: 12px; color: var(--gold-ink); }
.sc-tile-btn { cursor: pointer; }
.sc-tile-btn:hover { background: #F9EDCF; }

/* Opening identity */
.sc-eyebrow-s { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.sc-op-title { font-size: clamp(28px, 4vw, 36px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin-top: -8px; }
.sc-ops { display: flex; flex-direction: column; gap: 10px; }
.sc-op { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.sc-op-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sc-op-name { font-size: 17px; font-weight: 700; }
.sc-op-color, .sc-op-games { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.sc-op-pct { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-op-good { background: var(--pos); border-color: var(--pos); color: #fff; }
.sc-op-good .sc-op-label, .sc-op-good .sc-op-color, .sc-op-good .sc-op-games { color: #CFE6DA; }
.sc-op-bad { background: var(--neg-bg); border-color: var(--neg-bg); }
.sc-op-bad .sc-op-label, .sc-op-bad .sc-op-pct { color: var(--neg-ink); }

/* Leaks and strengths */
.sc-list { display: flex; flex-direction: column; gap: 18px; }
.sc-leak, .sc-str { display: flex; flex-direction: column; gap: 6px; }
.sc-leak-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sc-leak-name { font-size: 17px; font-weight: 700; }
.sc-leak-val { font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-leak-detail { font-size: 13px; color: var(--ink-2); }
.sc-leak-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sc-bar { height: 10px; border-radius: 99px; overflow: hidden; }
.sc-bar > span { display: block; height: 100%; border-radius: 99px; }
.sc-bar-neg { background: #F3E3DE; } .sc-bar-neg > span { background: var(--neg); }
.sc-bar-pos { background: #E3EEE7; } .sc-bar-pos > span { background: var(--pos); }
.sc-str-n { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sc-str-text { margin: 0; font-size: 15px; line-height: 1.45; }
.sc-chip { display: inline-block; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.sc-chip-pos { background: var(--pos-bg); color: var(--pos-ink); }
.sc-chip-neg { background: var(--neg-bg); color: var(--neg-ink); }
.sc-chip-neu { background: var(--sand); color: #4A443B; font-weight: 700; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-link { background: none; border: 0; padding: 6px 2px; min-height: 32px; cursor: pointer; color: var(--pos); font: inherit; font-size: 14px; font-weight: 700; }
.sc-link:hover { text-decoration: underline; }
.sc-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-btn { min-height: 46px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; }
.sc-btn-1 { background: var(--ink); color: var(--ground); }
.sc-btn-1:hover { filter: brightness(1.3); }
.sc-btn-2 { background: var(--sand); color: var(--ink); }
.sc-btn-2:hover { background: var(--line); }

/* Where a game broke */
.sc-broke { flex-direction: row; flex-wrap: wrap; gap: 28px; }
.sc-broke-board { flex: 0 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sc-broke-text { flex: 999 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sc-broke-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.sc-board { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; }
.sc-board .board.mini-board.sc-mini { width: 100%; height: 100%; border: 0; border-radius: 3px; box-shadow: 0 2px 10px rgba(28, 26, 23, .25); }
.sc-board .piece { width: 100%; height: 100%; }
.sc-board .sq.sc-last.light { background: #cdd16a; }
.sc-board .sq.sc-last.dark { background: #aaa23a; }
.sc-coord { position: absolute; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none; }
.sc-rank { top: 3px; left: 3px; } .sc-file { bottom: 2px; right: 3px; }
.sq.light .sc-coord { color: #b58863; } .sq.dark .sc-coord { color: #f0d9b5; }
.sc-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink-2); text-align: center; }
.sc-navbtn { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 20px;
  cursor: pointer; color: var(--ink); }
.sc-navbtn:disabled { opacity: .4; cursor: default; }
.sc-move { font-family: var(--font-mono); font-size: clamp(32px, 4vw, 42px); font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.sc-win { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 16px; }
.sc-pos { color: var(--pos); } .sc-neg { color: var(--neg); }
.sc-lead { margin: 0; font-size: 18px; line-height: 1.5; }

/* Openings list */
.sc-ol-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.sc-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.sc-legend span { display: flex; align-items: center; gap: 6px; }
.sc-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sc-ol { display: flex; flex-direction: column; }
.sc-ol-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 40px minmax(0, 3fr) 56px; align-items: center; gap: 14px; padding: 8px 0;
  border-top: 1px solid var(--surface-2); }
.sc-ol-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.sc-dot { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); }
.sc-dot-white { background: #fff; } .sc-dot-black { background: var(--ink); }
.sc-ol-n, .sc-ol-pct { font-size: 14px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.sc-wdl { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; }
.sc-wdl .w, .sc-legend .w { background: var(--pos); }
.sc-wdl .d, .sc-legend .d { background: #C9C0B0; }
.sc-wdl .l, .sc-legend .l { background: var(--neg); }

.sc-card .xpl-box { margin: 0; }

@media (max-width: 640px) {
  .sc-wrap { padding: 20px 12px 40px; gap: 16px; }
  .sc-card { padding: 18px; border-radius: 18px; }
  .sc-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .sc-ol-row { grid-template-columns: minmax(0, 1fr) 32px 52px; }
  .sc-ol-row .sc-wdl { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .sc-skel { animation: none; } }

/* ---------- XP and achievements (rewards.js, UI redesign phase 3) ---------- */
.gm-xp { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.gm-xp-main { background: var(--ink); border-color: var(--ink); color: var(--surface-2); }
.gm-xp-main .td-label { color: var(--gold); }
.gm-xp-total { font-size: clamp(48px, 7vw, 72px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.gm-xp-total span { font-size: 24px; font-weight: 800; color: var(--gold); }
.gm-xp-row { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: #D6CFC2; }
.gm-xp-row b { color: var(--surface-2); }
.gm-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gm-src li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--surface-2); font-size: 15px; }
.gm-src b { font-variant-numeric: tabular-nums; }
.gm-src li { align-items: center; }
.gm-src-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gm-src-what small { font-size: 13px; color: var(--ink-2); }
.gm-src b { white-space: nowrap; }
.gm-group { display: flex; flex-direction: column; gap: 12px; }
.gm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gm-card { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.gm-badge { flex: none; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sand); color: #6F685C; }
.gm-card.earned .gm-badge { background: var(--gold); color: var(--ink); }
.gm-card.earned.g-games .gm-badge { background: var(--pos); color: #fff; }
.gm-card.new { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 185, 90, .35); }
.gm-card-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gm-name { font-size: 16px; font-weight: 800; }
.gm-card:not(.earned) .gm-name { color: var(--ink-2); }
.gm-new { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px;
  border-radius: 999px; background: var(--gold); color: var(--ink); vertical-align: 2px; }
.gm-how { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.gm-when { font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gm-card.earned .gm-when { color: var(--pos); }
.gm-track { display: block; height: 6px; border-radius: 99px; background: var(--sand); overflow: hidden; margin-top: 4px; }
.gm-track > span { display: block; height: 100%; background: var(--gold); border-radius: 99px; }

/* The notice after training */
.gm-toast { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px; min-width: 200px; max-width: min(340px, calc(100vw - 32px)); padding: 14px 16px;
  border-radius: 16px; background: var(--ink); color: var(--surface-2); box-shadow: 0 10px 30px rgba(28, 26, 23, .3);
  transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
.gm-toast.on { transform: none; opacity: 1; pointer-events: auto; }
.gm-toast-xp { font-size: 26px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.gm-toast-ach { display: flex; gap: 10px; align-items: center; color: var(--gold); }
.gm-toast-ach div { display: flex; flex-direction: column; color: var(--surface-2); }
.gm-toast-ach b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.gm-toast-go { align-self: flex-start; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--gold); color: var(--ink);
  font: inherit; font-weight: 800; cursor: pointer; }

/* «Hoy»: the latest achievement */
.td-ach { background: var(--gold); border-color: var(--gold); gap: 10px; }
.td-ach .td-label { color: var(--gold-ink); }
.td-ach-name { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.td-ach-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--gold-ink); }
.td-ach .td-ach-link { align-self: flex-start; color: var(--ink); padding-left: 0; }
@media (prefers-reduced-motion: reduce) { .gm-toast { transition: none; } }

/* ---------- Laboratorio (UI redesign phase 4): the dark, dense views for statistics ---------- */
.view.lab.active { display: block; border-radius: 28px; padding: 28px; margin: 0 0 24px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.lab .panel, .lab-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin-bottom: 18px; min-width: 0; }
.lab .panel h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--ink); margin: 0 0 6px; }
.lab .hint { color: var(--ink-2); }
.lab a { color: var(--measured); }
.lab button.primary { background: var(--measured); border-color: var(--measured); color: #0B1A1E; font-weight: 800; }
.lab button:not(.primary):not(.lab-skill):not(.td-link):not(.lab-nav-out) { background: transparent; border: 1px solid #2B3340; color: var(--ink); border-radius: 10px; min-height: 36px; padding: 6px 14px; font: inherit; cursor: pointer; }
.lab button:not(.primary):not(.lab-skill):not(.lab-nav-out):hover { border-color: var(--ink-2); }
.lab input, .lab select { background: var(--ground); color: var(--ink); border: 1px solid #2B3340; border-radius: 8px; }
.lab .opn-speed.active, .lab .opn-speed.on { background: var(--sand); border-color: var(--ink-2); color: var(--ink); }

.lab-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.lab-badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px;
  border-radius: 6px; background: #17303A; color: var(--measured); }
.lab-title { margin: 10px 0 4px; font-size: clamp(28px, 4vw, 36px); font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.lab-head .hint { margin: 0; max-width: 64ch; font-size: 15px; }
.lab-nav { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--line); padding: 4px; border-radius: 12px; }
.lab-nav a, .lab .lab-nav button { text-decoration: none; padding: 8px 14px; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: 14px;
  border: 0; background: none; min-height: 36px; }
.lab-nav a:hover, .lab .lab-nav button:hover { color: var(--ink); background: var(--sand); }
.lab-anchor { scroll-margin-top: 16px; }
.lab-section-head { margin: 26px 0 10px; }
.lab-h2 { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 16px; }
.lab-h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
#lab-exercises { scroll-margin-top: 16px; margin-top: 26px; }

.lab-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 14px 0 18px; }
.lab-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.lab-kpi-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lab-kpi b { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.lab-kpi.pos b { color: var(--pos); }
.lab-kpi.neg b { color: var(--neg); }

.lab-split { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.lab-focus { flex: 999 1 560px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.lab-skills { flex: 1 1 340px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lab-focus-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lab-focus-head .hint { margin: 4px 0 0; max-width: 60ch; }
.lab-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.lab-compare > div:not(.lab-arrow) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lab-compare b { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lab-arrow { font-size: 28px; color: var(--ink-2); }
.lab-arrow.up { color: var(--pos); } .lab-arrow.down { color: var(--neg); }
.lab-figure { margin: 0; }
.lab-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.lab-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lab-legend i { display: inline-block; }
.lg-line { width: 16px; height: 3px; background: var(--measured); }
.lg-band { width: 16px; height: 10px; background: rgba(63, 199, 217, .25); }
.lg-bar { width: 10px; height: 10px; border-radius: 2px; background: var(--gold); opacity: .8; }
.lg-split { width: 0; height: 12px; border-left: 2px dashed var(--gold); }
.lab-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.lab-how { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 14px 0 0; }
.lab-how summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 28px; }
.lab-how p { max-width: 80ch; }

.trf-chip { display: inline-block; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.trf-c-better { background: var(--pos-bg); color: var(--pos-ink); }
.trf-c-worse { background: var(--neg-bg); color: var(--neg-ink); }
.trf-c-same, .trf-c-few_data { background: var(--sand); color: var(--ink-2); }
.lab .trf-c-same, .lab .trf-c-few_data { color: #C5CCD8; }

.lab-skill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lab-skill { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 0; border-top: 1px solid #1E242E; background: none;
  border-radius: 10px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.lab-skill:hover { background: var(--hover); }
.lab-skill.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--measured); }
.lab-skill-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lab-skill-text b { font-size: 15px; }
.lab-skill-text .hint { font-size: 13px; font-variant-numeric: tabular-nums; }
.lab-skill .trf-chip { min-width: 84px; text-align: center; }
.trf-spark { flex: none; width: 72px; height: 26px; }
.trf-spark polyline { fill: none; stroke: #8D97A6; stroke-width: 2; stroke-linejoin: round; }
.trf-spark.v-better polyline { stroke: var(--pos); }
.trf-spark.v-worse polyline { stroke: var(--neg); }
.trf-spark.v-few_data polyline { stroke: #5C6573; }

/* Charts in the Laboratorio: measured = cyan, training = gold */
.lab .trf-band { fill: var(--measured); opacity: .16; }
.lab .trf-line { stroke: var(--measured); stroke-width: 2.5; stroke-linejoin: round; }
.lab .trf-dot { fill: var(--ground); stroke: var(--measured); stroke-width: 2; }
.lab .trf-dot.last { fill: var(--measured); }
.lab .trf-bar { fill: var(--gold); opacity: .78; }
.lab .trf-split { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 5; }
.lab .trf-split-label { fill: var(--gold); font-size: 12px; font-weight: 700; }
.lab .trf-gridline { stroke: var(--line); stroke-width: 1; }
.lab .trf-axis { stroke: #2B3340; }
.lab .trf-tick { fill: var(--ink-2); }
.trf-chart.big .trf-tick { font-size: 12px; }
.trf-chart.big + .trf-axis-dates { padding-left: 52px; font-size: 12px; }

/* «Tu semana» in the Laboratorio */
.lab .wk-tile { background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.lab .wk-tile b { font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.lab .wk-vs.up { color: var(--pos); } .lab .wk-vs.down { color: var(--neg); }
.lab .wk-chip { background: var(--sand); border-color: var(--line); color: var(--ink); }
.lab .wk-comment { background: var(--ground); border-left-color: var(--measured); border-radius: 10px; }
.lab .wk-title { font-size: 18px; color: var(--ink); }
.lab .wk-nav { margin-bottom: 14px; }

/* Análisis global in the Laboratorio */
.lab .ins-tile, .lab .ins-block, .lab .ins-day, .lab .ins-card { background: var(--ground); border-color: var(--line); }
.lab .ins-pattern { background: var(--ground); }
.lab .ins-bar span, .lab .ins-score-bar span, .lab .ins-imp > span { background: var(--measured); }

@media (max-width: 640px) {
  .view.lab.active { padding: 16px; border-radius: 20px; margin: 0 -8px 16px; }
  .lab .panel, .lab-card { padding: 16px; }
  .lab-skill .trf-chip { min-width: 0; }
  .trf-spark { display: none; }
}

/* ---------- UI redesign phase 5: the remaining screens on the same system ----------
   Element-level defaults (lowest specificity): any control a screen styles itself keeps
   its own look; the ones that relied on the browser's defaults now match the redesign. */
button { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; min-height: 34px; padding: 6px 14px; cursor: pointer; }
button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-2); }
button:disabled { opacity: .5; cursor: default; }
input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input:not([type]),
select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  min-height: 36px; padding: 6px 10px; box-sizing: border-box; }
textarea { min-height: 0; line-height: 1.5; }
input[type="number"] { width: 6.5em; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pos); width: 16px; height: 16px; vertical-align: -3px; }
label { color: var(--ink); }
table { font-variant-numeric: tabular-nums; }
th { color: var(--ink-2); }
code, kbd { font-family: var(--font-mono); }

/* Panels: a readable title instead of the small grey capitals, and room around the text. */
.panel > h2, .panel > header h2, .panel h2:first-child { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; text-transform: none;
  color: var(--ink); margin: 0 0 8px; }
.panel h3 { font-size: 15px; font-weight: 800; color: var(--ink); }
.panel > .hint:first-of-type { font-size: 14px; line-height: 1.5; max-width: 80ch; }
.panel .hint { line-height: 1.5; }
.panel details > summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 28px; }
.main .view { min-width: 0; }

/* Chips and filters used across screens (opening speeds, exercise kinds...) */
.opn-speed { min-height: 34px; padding: 4px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; }
.opn-speed.on, .opn-speed.active { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.opn-speed.on .hint, .opn-speed.active .hint { color: #D6CFC2; }
/* The generic button:hover would paint a selected pill light, with its light text unreadable. */
.opn-speed.on:hover:not(:disabled), .opn-speed.active:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); filter: brightness(1.25); }
.lab .opn-speed.on:hover:not(:disabled), .lab .opn-speed.active:hover:not(:disabled) { background: var(--sand); border-color: var(--ink-2); filter: none; }

/* «Primeros pasos» and the goals banner sit inside the page width like the screens below them. */
.ob-panel { max-width: 1280px; margin: 16px auto 0; box-sizing: border-box; border-radius: 18px; }
@media (min-width: 1329px) { .ob-panel { width: calc(100% - 48px); } }
@media (max-width: 1328px) { .ob-panel { margin: 16px 24px 0; } }
@media (max-width: 640px) { .ob-panel { margin: 12px 12px 0; padding: 12px; } }
.gl-banner { justify-content: center; }

/* Agenda: the status ring is a 24 px target (the ring itself stays small inside it). */
.ag-card .ag-status { min-width: 24px; min-height: 24px; width: 24px; height: 24px; box-sizing: border-box; border-width: 2px; }
.ag-add, #btn-ag-prev, #btn-ag-next, #btn-ag-today, #btn-ag-resuggest { min-height: 32px; }
#btn-ag-prev, #btn-ag-next { min-width: 32px; padding: 0 8px; }

/* Small text buttons in lists keep a comfortable target */
.xpl-btn, .rep-more, .rep-crumb, #btn-trn-av { min-height: 32px; }

/* Tables and long rows scroll inside their own box on phones, never the page. */
.table-scroll, .lib-table-wrap { overflow-x: auto; max-width: 100%; }
@media (max-width: 640px) {
  .layout { padding: 12px; }
  .panel { padding: 14px; border-radius: 14px; }
  .panel > h2, .panel h2:first-child { font-size: 18px; }
  .report-table, .ins-freq, .egm-table, .opn-table { display: block; overflow-x: auto; max-width: 100%; }
  button { min-height: 36px; }
}
.ag-pill .ag-status { min-height: 11px; min-width: 11px; padding: 0; }
.ag-status { padding: 0; }

/* Level colours (openings.js OPN_COLORS): white text on the dark ends, ink on the pale middle. */
.opn-chip { color: var(--ink); font-weight: 700; }
.lvl-vgood, .lvl-good, .lvl-bad, .lvl-vbad { color: #fff; }
.opn-cell.lvl-vgood span, .opn-cell.lvl-good span, .opn-cell.lvl-bad span, .opn-cell.lvl-vbad span,
.opn-cell.lvl-vgood .hint, .opn-cell.lvl-good .hint, .opn-cell.lvl-bad .hint, .opn-cell.lvl-vbad .hint { color: rgba(255, 255, 255, .9); }
.opn-cell.lvl-vgood b .opn-strong, .opn-cell.lvl-good b .opn-strong, .opn-cell.lvl-bad b .opn-strong, .opn-cell.lvl-vbad b .opn-strong { color: #fff; }
.state-done { background: #E3EFE6; color: var(--pos); }
.ag-card[class*="ty-"] > .ag-card-head .ag-target.ok { background: rgba(0, 0, 0, .22); }
.lab .opn-chip { color: var(--ink); }

/* ---------- Result screen after a position or a puzzle (rewards.js gmResultCard) ---------- */
.rs-card { border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line);
  background: var(--surface); animation: rs-in .28s ease-out; }
.rs-good { background: #E8F2EC; border-color: #BFD9C9; }
.rs-warn { background: #FBF1DD; border-color: #EBD3A0; }
.rs-bad { background: #F8E4DF; border-color: #EBC3B9; }
.rs-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rs-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.rs-good .rs-icon { background: var(--pos); }
.rs-warn .rs-icon { background: #8F6300; }
.rs-bad .rs-icon { background: var(--neg); }
.rs-head { flex: 1; min-width: 180px; }
.rs-title { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.rs-sub { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.rs-mv { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.rs-xp { flex: none; font-size: 18px; font-weight: 900; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--gold);
  font-variant-numeric: tabular-nums; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-chip { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink); border: 1px solid rgba(28, 26, 23, .1); }
.rs-chip.gold { background: var(--gold); border-color: var(--gold); }
.rs-chip.pos { color: var(--pos-ink); }
.rs-chip.neg { color: var(--neg-ink); }
.rs-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-actions .rs-go { min-height: 46px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.rs-actions .rs-alt { min-height: 46px; border-radius: 12px; }
.rs-more { border-top: 1px solid var(--line); padding: 10px 0 2px; }
.rs-more > summary { cursor: pointer; font-weight: 800; color: var(--ink); min-height: 32px; display: flex; align-items: center; gap: 6px; }
.rs-more[open] > summary { margin-bottom: 8px; }
.rs-thoughts { white-space: pre-wrap; margin: 0; line-height: 1.5; }
@keyframes rs-in { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rs-card { animation: none; } }

/* ---------- Coach-student mode, phase 1: the link (coach.js) ---------- */
.co-av { --av: var(--pos); flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--av); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; }
.co-av-sm { width: 28px; height: 28px; font-size: 13px; }
.co-mono { font-family: var(--font-mono); font-weight: 600; }
.co-go-sm { min-height: 46px; padding: 0 20px; font-size: 15px; margin-top: 0; }
.co-go-sm:disabled { opacity: .6; cursor: default; }

/* in «Mi cuenta» */
.co-acc-h { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.co-acc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.co-acc-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--sand); }
.co-acc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.co-acc-share { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.co-acc-share legend { padding: 0; margin-bottom: 2px; }
.co-acc-share label { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: 14px; }
.co-acc-share input, .co-check input { accent-color: var(--pos); width: 18px; height: 18px; }
.modal .hint.co-acc-sees { margin: 0; }
.co-acc-inv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 12px; border-radius: 12px; background: var(--surface-2); }
.co-acc-actions { margin: 12px 0; }
.co-acc-code { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; font-size: 14px; }
.co-acc-code > span { display: flex; gap: 8px; }
.co-acc-code input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; }

/* the dialogs: making an invitation, answering one */
.modal.co-modal { max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: var(--radius-card); padding: 26px;
  display: flex; flex-direction: column; gap: 14px; background: var(--surface); }
.co-modal .td-foot { margin-top: 4px; }
.co-st-head { display: flex; align-items: center; gap: 12px; }
.co-st-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.co-st-name > span { font-size: 13px; color: var(--ink-2); }
.co-m-h { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; }
.co-code { font-family: var(--font-mono); font-weight: 600; font-size: 40px; letter-spacing: .08em; text-align: center; padding: 18px;
  border-radius: 16px; background: var(--ground); border: 2px dashed var(--line); }
.co-linkrow { display: flex; align-items: center; gap: 10px; }
.co-url { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-facts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.co-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.co-field textarea { font: inherit; font-weight: 400; font-size: 14px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-ctl); padding: 10px 12px; resize: vertical; }
.co-quote { margin: 0; padding: 12px 16px; border-left: 4px solid var(--gold); background: var(--surface-2); border-radius: 0 12px 12px 0;
  font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.co-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--sand); border-radius: 14px; cursor: pointer; }
.co-check input { flex: none; margin: 2px 0 0; }
.co-check > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.co-check b { font-size: 16px; }
.co-never { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: var(--pos-bg); font-size: 14px; }
.co-never b { color: var(--pos-ink); }
@media (max-width: 640px) {
  .co-code { font-size: 28px; }
  .modal.co-modal { padding: 18px; }
}
.co-shares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.co-shares li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sand); font-size: 15px; }
.co-shares li > span:first-child { flex: none; width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 900; font-size: 13px; background: var(--pos); color: #fff; }
.co-shares li.off > span:first-child { background: var(--sand); color: var(--ink-2); }
.co-acc-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Coach-student mode, phase 2: viewing a student (coach.js) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.co-acc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.co-strip { background: var(--gold); color: var(--gold-ink); position: sticky; top: 0; z-index: 30; }
.co-strip-in { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.co-strip .co-av { --av: var(--gold-ink); }
.co-strip-dim { opacity: .9; }
.co-strip-sp { flex: 1; }
.co-strip-btn { min-height: 34px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--ink); color: var(--ground); font-weight: 700; font-size: 13px; cursor: pointer; }
.co-strip-sel select { min-height: 34px; border-radius: 10px; border: 0; padding: 0 10px; background: rgba(61, 51, 32, .14); color: var(--gold-ink);
  font-weight: 700; font-size: 13px; cursor: pointer; }
.co-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: min(520px, calc(100vw - 32px)); background: var(--ink);
  color: var(--ground); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; }
.co-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .co-strip-in { padding: 8px 12px; } }
@media (prefers-reduced-motion: reduce) { .co-toast { transition: none; } }
/* What only the player does with their own data stays out of the coach's way while viewing. */
.co-viewing .lib-top, .co-viewing #lib-sync, .co-viewing #onboarding { display: none !important; }

/* ---------- Coach-student mode, phase 3: «Alumnos» (coach.js) ---------- */
#view-students { padding: 0; }
.blk .co-count { margin-left: 6px; background: var(--gold); color: var(--gold-ink); border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.blk .co-count:empty { display: none; }
.co-alerts { gap: 10px; }
.co-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.co-alert-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 6px 8px; border-radius: 12px; background: var(--surface-2); }
.co-alert-list li > span:nth-child(3) { flex: 1; min-width: 0; }
.co-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.co-dot-neg { background: var(--neg); }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.co-st-name b { font-size: 18px; }
.co-today { white-space: nowrap; }
.co-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.co-kpis > div { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 10px; }
.co-k { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.co-k small { font-size: 15px; }
.co-k-lock { font-size: 20px; }
.co-kl { font-size: 12px; color: var(--ink-2); line-height: 1.25; }
.co-kl b { font-size: 12px; }
.co-spark { width: 100%; height: 46px; }
.co-spark polyline { fill: none; stroke: var(--pos); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.co-spark-neg polyline { stroke: var(--neg); }
.co-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.co-same { background: var(--sand); color: var(--ink-2); }
.co-assigned { margin: 0; font-size: 14px; color: var(--ink-2); }
.co-private { padding: 10px; border-radius: 12px; background: var(--surface-2); }
@media (max-width: 640px) {
  .co-k { font-size: 21px; }
  .co-alert-list li { flex-wrap: wrap; }
}

/* ---------- Coach-student mode, phase 4a: assigning (coach.js), what the student sees ---------- */
.co-dot-pos { background: var(--pos); }
.co-note-mine { margin: 0; color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }
.co-strip-btn-2 { background: rgba(61, 51, 32, .14); color: var(--gold-ink); }
.co-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); }
.co-task-note { display: block; font-size: 13px; color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }
.co-task-from { margin: 4px 0; font-size: 13px; }
.td-task.co-from { box-shadow: inset 5px 0 0 var(--ty, var(--ink-2)), 0 0 0 2px var(--gold); }
.ag-card.co-from { box-shadow: 0 0 0 2px var(--gold); }
.co-coach-note { background: #FBF6EA; border-color: var(--gold); }
.co-note-txt { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.co-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--surface); box-shadow: -12px 0 40px rgba(28, 26, 23, .18);
  padding: 20px 22px 28px; overflow-y: auto; z-index: 90; display: flex; flex-direction: column; gap: 14px; }
.co-panel[hidden] { display: none; }
.co-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.co-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-kind { text-align: left; background: var(--surface-2); border: 1px solid var(--sand); border-radius: 14px; padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-2); }
.co-kind b { font-size: 14px; color: var(--ink); }
.co-kind.on { border: 2px solid var(--ink); background: var(--surface); }
.co-picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.co-pick { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--sand); background: var(--surface-2); cursor: pointer; font-size: 13px; color: var(--ink); }
.co-pick b { font-size: 14px; }
.co-pick.on { border: 2px solid var(--ink); background: var(--surface); }
.co-field select, .co-field input[type="number"] { font: inherit; font-weight: 400; min-height: 38px; border-radius: var(--radius-ctl); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); padding: 0 10px; }
.co-days { border: 0; margin: 0; padding: 0; }
.co-days legend { padding: 0; margin-bottom: 6px; }
.co-seg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.co-seg button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--sand); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.co-seg button.on { background: var(--ink); color: var(--ground); }
.co-seg input[type="date"] { min-height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 0 10px; font: inherit; font-size: 13px; }
.co-as-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.co-as-task { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.co-as-task > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.co-as-st { flex: none; width: 22px; text-align: center; font-weight: 900; color: var(--ink-2); }
.co-as-task.st-done .co-as-st { color: var(--pos); }

/* ---------- Coach-student mode, phase 4b: the plan (coach.js, training.js) ---------- */
.co-viewing #trn-content > .panel:first-child, .co-viewing .trn-del { display: none !important; }
.co-plan-edited { border: 2px solid var(--gold); background: #FBF6EA; display: flex; flex-direction: column; gap: 8px; }
.co-plan-edited p { margin: 0; }
.co-plan-before > summary { cursor: pointer; font-weight: 700; color: var(--pos); }
.co-plan-new { margin: 0 0 12px; }
.modal.co-plan-modal { max-width: 720px; }
.co-pl-week { display: flex; flex-direction: column; gap: 8px; }
.co-pl-day { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--sand); }
.co-pl-day.rest { opacity: .85; }
.co-pl-dayname { width: 110px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; text-transform: capitalize; }
.co-pl-dayname span { font-size: 12px; text-transform: none; }
.co-pl-day ul, .co-pl-dnt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; min-width: 0; }
.co-pl-day li, .co-pl-dnt li { display: flex; align-items: center; gap: 6px; }
.co-pl-day input[type="text"], .co-pl-dnt input[type="text"] { flex: 1; min-width: 0; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.co-pl-day input[type="number"] { width: 64px; min-height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.co-pl-day > .td-link { align-self: center; }
.co-field input[type="text"] { font: inherit; font-weight: 400; font-size: 15px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-ctl); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }

/* ---------- Coach-student mode, phase 5: the weekly report (coach.js) ---------- */
.co-tabs { margin-top: -8px; }
.co-r-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.co-r-nav b { font-size: 18px; }
.co-r-nav .td-btn:disabled { opacity: .45; cursor: default; }
.co-r-lines { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.co-r-line { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--sand); }
.co-r-line:last-child { border-bottom: 0; }
.co-r-line dt { color: var(--ink-2); }
.co-r-line dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.co-r-pos { color: var(--pos); }
.co-r-neg { color: var(--neg-ink); }
.co-r-next { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.co-pl-day li > .td-link, .co-pl-dnt li > .td-link { min-width: 32px; min-height: 36px; padding: 0 8px; }
.acc-modal a[href="privacy.html"] { display: inline-block; padding: 4px 2px; min-height: 24px; }

/* «♟ Secuencias» (sequences.js) */
.sq-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.sq-head .sq-to-list { margin-left: auto; font-size: 12px; }
.sq-kind { border-radius: 10px; padding: 1px 8px; font-size: 12px; white-space: nowrap; }
.sq-kind-decline { background-color: var(--neg-bg); color: var(--neg-ink); }
.sq-kind-convert { background-color: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.sq-table .sq-row { cursor: pointer; }
.sq-table .sq-row:hover td { background-color: var(--panel-2); }
.sq-v { font-weight: 600; font-size: 12px; }
.sq-v-held { color: var(--best); } .sq-v-slipped { color: var(--mistake); } .sq-v-declined { color: var(--blunder); }
.sq-plans { margin: 6px 0; }
#sq-plan-text { width: 100%; box-sizing: border-box; margin: 6px 0; font: inherit; }
.sq-progress { display: flex; gap: 6px; margin: 6px 0; }
.sq-progress span { flex: 1; height: 8px; border-radius: 4px; background-color: var(--panel-2); border: 1px solid var(--border); }
.sq-progress span.done { background-color: var(--accent); border-color: var(--accent); }
.sq-progress span.now { border-color: var(--accent); }
.sq-curve { width: 100%; max-width: 420px; height: auto; display: block; }
.sq-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.sq-line.you { stroke: var(--accent); } .sq-line.game { stroke: var(--text-dim); stroke-dasharray: 4 3; }
.sq-dot { fill: var(--accent); }
.sq-start { stroke: var(--best); stroke-width: 1; stroke-dasharray: 2 3; }
.clk-key.sq-key-start { background-color: var(--best); height: 2px; }
.sq-lines td:first-child { white-space: nowrap; color: var(--text-dim); }
.sq-steps tr.sq-worst td { background-color: var(--neg-bg); }
.sq-changes, .sq-plan-check { padding-left: 18px; margin: 6px 0; font-size: 13px; line-height: 1.6; }
.sq-changes .neg, .sq-plan-check .neg { color: var(--blunder); } .sq-changes .pos, .sq-plan-check .pos { color: var(--best); }
.sq-chip { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 12px; background-color: var(--panel-2); border: 1px solid var(--border); margin: 2px 2px 2px 0; }
.sq-coach { background-color: var(--panel-2); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.sq-lesson { font-weight: 600; }

/* ---------- «Aperturas» (lines.js): my lines and «Jugar la línea» ---------- */
.ln-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 24px 56px; display: flex; flex-direction: column; gap: 22px; }
.ln-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.ln-title { margin: 0; font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.ln-intro { margin: 6px 0 0; max-width: 720px; }
.ln-modes { display: flex; gap: 6px; background: var(--sand); padding: 4px; border-radius: 999px; }
.ln-modes button { border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; background: transparent; color: var(--ink-2); font: inherit; }
.ln-modes button.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); }
.ln-modes button:disabled { cursor: not-allowed; }
.ln-cols, .ln-game { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ln-list { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ln-new { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ln-line { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.ln-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.ln-dot.b { background: var(--ink); } .ln-dot.w { background: #fff; }
.ln-line-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ln-moves, .ln-mono { font-family: var(--font-mono); font-size: 13px; }
.ln-line-main .ln-moves { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-line-actions { display: flex; gap: 8px; }
.ln-line-actions button { min-height: 44px; min-width: 44px; }
.ln-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.ln-new textarea, .ln-new input[type="text"] { font-family: var(--font-mono); font-size: 13px; width: 100%; box-sizing: border-box; }
.ln-new #ln-name { font-family: var(--font); font-size: 15px; }
.ln-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ln-rep { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; min-height: 44px; }
.ln-cta { min-height: 48px; border: 0; border-radius: var(--radius-ctl); background: var(--gold); color: var(--gold-ink); font: inherit; font-weight: 800; font-size: 16px; padding: 0 20px; cursor: pointer; }
.ln-cta:disabled { opacity: .6; cursor: default; }
.ln-ghost { min-height: 48px; border: 1px solid #5E574D; border-radius: var(--radius-ctl); background: transparent; color: #fff; font: inherit; padding: 0 18px; }
.ln-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ln-bar b { font-size: 18px; }
.ln-back { background: transparent; border: 0; color: var(--ink-2); font: inherit; min-height: 44px; padding: 0; cursor: pointer; }
.ln-board-col { flex: 0 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ln-board-col .board { width: 100%; max-width: 540px; height: auto; aspect-ratio: 1; }
.ln-board-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ln-live-board .sq { cursor: pointer; }
.ln-side { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ln-side .panel { margin: 0; }
.ln-chips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 14px; }
.ln-chip { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.ln-chip.before { background: var(--sand); color: var(--ink-2); border-color: var(--sand); }
.ln-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.ln-settings { display: flex; flex-direction: column; gap: 14px; }
.ln-settings input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 32px; }
.ln-settings select { min-height: 44px; max-width: 360px; }
.ln-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ln-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ln-radio { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; min-height: 44px; cursor: pointer; }
.ln-radio.on { border: 2px solid var(--ink); background: var(--surface-2); }
.ln-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.ln-check input { width: 20px; height: 20px; margin-top: 2px; }
.ln-dark { background: var(--ink); color: #fff; border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.ln-dark h2 { margin: 0; font-size: 24px; font-weight: 900; color: #fff; }
.ln-dark p { margin: 0; color: #E4DCCD; line-height: 1.5; }
.ln-dim { color: #E4DCCD; font-size: 14px; }
.ln-tag { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--gold); color: var(--gold-ink); padding: 4px 10px; border-radius: 999px; }
.ln-card { background: var(--surface); border-radius: var(--radius-card); padding: 18px 20px; box-shadow: var(--shadow); }
.ln-turn { margin: 0; font-weight: 700; }
.ln-small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ln-feedback p { margin: 6px 0; line-height: 1.5; }
.ln-pos { color: var(--pos-ink); } .ln-neg { color: var(--neg-ink); }
.ln-movelist { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; font-family: var(--font-mono); font-size: 14px; margin: 8px 0; }
.ln-legend { font-size: 12px; border-top: 1px solid var(--line); padding-top: 8px; margin: 0; }
.ln-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ln-actions button { min-height: 44px; }
.ln-summary { display: flex; flex-direction: column; gap: 20px; max-width: 1100px; }
.ln-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ln-tile { background: var(--surface); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.ln-tile b { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ln-moment { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; margin-top: 10px; }
.ln-moment p { margin: 4px 0 0; }
.ln-mtag { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--sand); color: var(--gold-ink); }
.ln-mtag.pos { background: var(--pos-bg); color: var(--pos-ink); } .ln-mtag.neg { background: var(--neg-bg); color: var(--neg-ink); }
.ln-next { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
@media (max-width: 700px) { .ln-wrap { padding: 20px 16px 40px; } .ln-title { font-size: 28px; } }
/* «Pregunta a la apertura» */
.ln-explore-board .sq { cursor: pointer; }
.ln-pgn { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ln-pgn p { margin: 0; }
.ln-bookmove { min-height: 36px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 8px; background: var(--surface); font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
.ln-askpanel { display: flex; flex-direction: column; gap: 14px; }
.ln-askpanel h2 { margin: 0; }
.ln-quicks { display: flex; gap: 8px; flex-wrap: wrap; }
.ln-quick { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font: inherit; font-size: 14px; cursor: pointer; }
.ln-thread { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.ln-msg { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; }
.ln-msg p { margin: 0; line-height: 1.6; }
.ln-msg.you { align-self: flex-end; max-width: 85%; background: var(--ink); color: #fff; border-radius: 16px 16px 4px 16px; }
.ln-msg.you .ln-who { color: #E4DCCD; }
.ln-msg.coach { align-self: flex-start; max-width: 95%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; }
.ln-who { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ln-shows { display: flex; gap: 6px; flex-wrap: wrap; }
.ln-show { min-height: 36px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 8px; background: var(--surface); font-family: var(--font-mono); font-size: 13px; cursor: pointer; text-align: left; }
.ln-key { font-weight: 600; }
.ln-facts { font-size: 12px; }
.ln-askform { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.ln-askform textarea { width: 100%; box-sizing: border-box; font: inherit; }
.ln-askrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ln-others summary { cursor: pointer; min-height: 32px; }
.ln-goq { display: block; width: 100%; text-align: left; min-height: 40px; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; font-size: 14px; cursor: pointer; }
/* «Al medio juego» */
.ln-struct { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ln-struct h2 { margin: 0; font-size: 20px; }
.ln-struct ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.ln-tag.pos { background: var(--pos-bg); color: var(--pos-ink); }
.ln-plans { display: flex; gap: 8px; flex-wrap: wrap; }
.ln-plan { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; cursor: pointer; }
.ln-plan.on { border: 2px solid var(--ink); background: var(--surface-2); font-weight: 700; }
.ln-settings textarea { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; }
.ln-grow { flex: 999 1 480px; min-width: 0; margin: 0; }
.ln-narrow { flex: 1 1 300px; min-width: 0; margin: 0; }
.ln-plancheck { margin: 6px 0; line-height: 1.5; }
.ln-curve { width: 100%; height: auto; }
.ln-curve-mid { stroke: var(--line); stroke-dasharray: 4 4; }
.ln-curve-txt { font-size: 12px; fill: var(--ink-2); }
.ln-curve-line { fill: none; stroke: var(--ink); stroke-width: 3; }
.ln-curve-turn { fill: var(--neg); }
.ln-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 8px 0 12px; }
.ln-seq { font-family: var(--font-mono); font-size: 14px; line-height: 2; margin: 6px 0 0; }
.ln-mark { border-radius: 6px; padding: 2px 6px; }
.ln-mark.neg { background: var(--neg-bg); color: var(--neg-ink); } .ln-mark.pos { background: var(--pos-bg); color: var(--pos-ink); }
.ln-mgexpl { display: flex; flex-direction: column; gap: 10px; }
.ln-mgexpl p { margin: 0; line-height: 1.6; }
.ln-mgexpl .ln-cta { align-self: flex-start; }
.ln-mgshow { min-height: 36px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 8px; background: var(--surface); font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
.ln-linkbtn { align-self: flex-start; background: none; border: 0; padding: 0; min-height: 40px; color: var(--pos); text-decoration: underline; font: inherit; cursor: pointer; }
/* «Así lo jugaron los maestros» */
.ln-masters { display: flex; flex-direction: column; gap: 10px; }
.ln-masters p { margin: 0; }
.ln-mhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.ln-mhead h2 { margin: 0; }
.ln-mmoves { display: flex; gap: 8px; flex-wrap: wrap; }
.ln-mmove { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.ln-mgames { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ln-mgame { padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ln-mgame.open { grid-column: 1 / -1; }
.ln-mgame button { align-self: flex-start; min-height: 40px; }

/* ---------- «Finales» (endings.js) ---------- */
.eg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.eg-card { text-align: left; background: var(--surface); border: 1px solid transparent; border-radius: 18px; padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; font: inherit; color: var(--ink); cursor: pointer; min-height: 44px; }
.eg-card:hover { border-color: var(--line); }
.eg-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eg-card b { font-size: 17px; }
.eg-goal { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--sand); color: var(--gold-ink); }
.eg-goal.win { background: var(--pos-bg); color: var(--pos-ink); }
.eg-goal.lost { background: var(--neg-bg); color: var(--neg-ink); }
.eg-state { font-size: 13px; color: var(--ink-2); }
.eg-state.done { color: var(--pos-ink); font-weight: 700; }
.eg-state.due { color: var(--neg-ink); font-weight: 700; }
.eg-rows { display: flex; flex-direction: column; gap: 8px; }
.eg-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding: 12px 14px; min-height: 44px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.eg-chips { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; }
.eg-chip { padding: 4px 10px; border-radius: 999px; background: var(--sand); color: var(--gold-ink); }
.eg-chip.win { background: var(--pos-bg); color: var(--pos-ink); }
.eg-live .sq { cursor: pointer; }
.ln-struct details summary { cursor: pointer; min-height: 32px; font-weight: 600; }
/* «Finales → ¿Por qué?» */
.eg-ask { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.eg-askrow { display: flex; gap: 8px; flex-wrap: wrap; }
.eg-askrow input { flex: 1 1 220px; min-height: 44px; }
.eg-askrow button { min-height: 44px; }
.eg-askcur summary { cursor: pointer; min-height: 32px; font-weight: 700; }
.eg-askply { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
.eg-askply.on { border: 2px solid var(--ink); }

/* ---------- «Errores por partida»: pictograms and the review step by step (2026-10-27) ---------- */
:root { --todo-bg: #FFFBF2; --todo-line: #D9A53A; --todo-pill: #FBEFD3; --todo-ink: #7A5300;
  --sev-1: #C99A1E; --sev-2: #D9701A; --sev-3: #B3412E; --maia-on: #6C4BB4; --maia-off: #DCD3C2; }
.err-chip { display: grid; grid-template-columns: minmax(120px, .8fr) repeat(3, minmax(150px, 1fr)) auto; gap: 10px 16px; align-items: center;
  border-radius: 16px; border-width: 1px; border-left-width: 1px; padding: 14px 16px; background: var(--surface-2); font-size: 14px; }
.err-chip.rv-pending, .err-chip.rv-partial { border: 2px dashed var(--todo-line); background: var(--todo-bg); }
.err-chip:hover { border-color: var(--pos); }
.err-chip .err-what { gap: 6px; }
.err-chip .err-move { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; }
.err-chip .err-review { margin: 0; align-self: flex-start; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; }
.err-chip .err-review-pending, .err-chip .err-review-partial { color: var(--todo-ink); background: var(--todo-pill); border: 1px solid var(--todo-line); }
.err-chip .err-review-done { color: var(--pos-ink); background: var(--pos-bg); border: 0; }
.rv-tile { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rv-tile-txt { display: flex; flex-direction: column; min-width: 0; }
.rv-tile-q { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.rv-tile-txt b { font-size: 14.5px; line-height: 1.2; }
.rv-tile-txt small { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; margin-top: 2px; }
.rv-sev { display: flex; align-items: flex-end; gap: 3px; height: 30px; flex: none; }
.rv-sev i { width: 9px; border-radius: 3px; background: var(--sand); }
.rv-sev i:nth-child(1) { height: 12px; } .rv-sev i:nth-child(2) { height: 21px; } .rv-sev i:nth-child(3) { height: 30px; }
.rv-sev-1 i:nth-child(-n+1) { background: var(--sev-1); }
.rv-sev-2 i:nth-child(-n+2) { background: var(--sev-2); }
.rv-sev-3 i:nth-child(-n+3) { background: var(--sev-3); }
.rv-ppl { display: grid; grid-template-columns: repeat(5, 9px); gap: 3px; flex: none; width: 57px; }
.rv-ppl svg { width: 9px; height: 13px; } .rv-ppl svg path { fill: var(--maia-off); } .rv-ppl svg.on path { fill: var(--maia-on); }
.rv-ppl-none { height: 29px; }
.rv-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sand); color: var(--ink); }
.rv-ic-tr { background: var(--neg-bg); color: var(--neg-ink); }
.rv-cta { justify-self: end; background: var(--gold); color: var(--gold-ink); border-radius: 12px; font-weight: 800; padding: 11px 16px; font-size: 15px; white-space: nowrap; }
.rv-cta-done { background: var(--sand); color: var(--ink); }
.rv-done-line { grid-column: 1 / -1; font-size: 13.5px; color: var(--pos-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .err-chip { grid-template-columns: 1fr 1fr; }
  .err-chip .err-what { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .rv-cta { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
@media (max-width: 520px) { .err-chip { grid-template-columns: 1fr; } }
.rv-count { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.rv-pill { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.rv-pill-todo { background: var(--todo-pill); color: var(--todo-ink); border: 1px solid var(--todo-line); }
.rv-pill-done { background: var(--pos-bg); color: var(--pos-ink); }
.rv-track { width: 90px; height: 8px; border-radius: 9px; background: var(--sand); overflow: hidden; display: inline-block; }
.rv-track > span { display: block; height: 100%; background: var(--pos); }
.rv-banner { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; background: var(--ink); color: var(--ground);
  border-radius: 20px; padding: 18px 22px; margin-bottom: 16px; }
.rv-banner > div { flex: 1 1 420px; }
.rv-banner b { font-size: 20px; }
.rv-banner p { margin: 4px 0 0; color: #D6CFC2; font-size: 14px; line-height: 1.45; }
.rv-banner-ok { background: var(--pos-bg); color: var(--pos-ink); }
.rv-banner-ok b { font-size: 16px; }
.rv-btn1 { background: var(--gold); color: var(--gold-ink); border: 0; border-radius: 12px; font-weight: 800; padding: 12px 18px; font-size: 15px; cursor: pointer; white-space: nowrap; font: inherit; font-weight: 800; }
.rv-btn1:hover { filter: brightness(1.05); }
.rv-btn2 { background: var(--sand); color: var(--ink); border: 0; border-radius: 12px; font-weight: 700; padding: 11px 16px; font-size: 14px; cursor: pointer; font: inherit; font-weight: 700; }
.rv-btn2:disabled { opacity: .45; cursor: default; }
/* the window */
.rv-scrim { position: fixed; inset: 0; z-index: 900; background: rgba(28, 26, 23, .45); display: flex; justify-content: center; align-items: flex-start;
  padding: 4vh 16px; overflow-y: auto; }
.rv-modal { background: var(--surface); color: var(--ink); border-radius: 24px; width: min(980px, 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; max-height: 92vh; }
.rv-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px 22px; border-bottom: 1px solid var(--line); }
.rv-steps { flex: 1; display: flex; gap: 6px; min-width: 0; }
.rv-stepbtn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-stepbtn i { display: block; height: 5px; border-radius: 9px; background: var(--sand); }
.rv-stepbtn.on { color: var(--ink); } .rv-stepbtn.on i { background: var(--gold); } .rv-stepbtn.ok i { background: var(--pos); }
.rv-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sand); cursor: pointer; font-size: 15px; color: var(--ink); }
.rv-body { padding: 20px 22px; overflow-y: auto; min-height: 0; }
.rv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rv-foot-r { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-q { margin: 0 0 4px; font-size: 22px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.2; }
.rv-subq { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.rv-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.rv-opts-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rv-opt { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 3px;
  text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.rv-opt:hover { border-color: var(--pos); }
.rv-opt b { font-size: 15px; } .rv-opt small { color: var(--ink-2); font-size: 12.5px; line-height: 1.35; }
.rv-opt.sel { border-color: var(--pos); background: var(--pos-bg); }
.rv-sug { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--todo-ink); background: var(--todo-pill); border-radius: 99px; padding: 1px 8px; }
.rv-sub { margin-top: 16px; }
.rv-grp { margin: 14px 0 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rv-list { display: flex; flex-direction: column; gap: 6px; }
.rv-row { display: flex; gap: 12px; align-items: flex-start; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px;
  background: var(--surface-2); cursor: pointer; font: inherit; color: var(--ink); }
.rv-row b { font-size: 14.5px; } .rv-row small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.rv-row.sel { border-color: var(--pos); background: var(--pos-bg); }
.rv-radio { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--ink-2); }
.rv-row.sel .rv-radio { border: 5px solid var(--pos); }
.rv-sugcard { border: 1.5px solid var(--gold); background: var(--todo-bg); border-radius: 16px; padding: 14px 16px; margin: 8px 0 6px; }
.rv-sugcard.sel { border-color: var(--pos); background: var(--pos-bg); }
.rv-sugcard h4 { margin: 0 0 4px; font-size: 18px; }
.rv-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rv-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-pick { border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); }
.rv-pick.on { border-color: var(--pos); background: var(--pos); color: #fff; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chip { font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--ink); }
.rv-chip:hover { border-color: var(--pos); }
.rv-chip.on { border-color: var(--pos); background: var(--pos-bg); color: var(--pos-ink); font-weight: 700; }
.rv-chip .rv-sug { margin-left: 4px; }
.rv-facts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rv-fact { font-size: 13px; padding: 6px 11px; border-radius: 99px; background: var(--sand); }
.rv-linkbtn { background: none; border: 0; padding: 4px; font: inherit; font-size: 13px; color: var(--pos); text-decoration: underline; cursor: pointer; }
.rv-fix { margin-top: 8px; }
.rv-need { margin: 14px 0 0; font-size: 13.5px; color: var(--todo-ink); background: var(--todo-pill); border-radius: 10px; padding: 8px 12px; }
.rv-lab { display: block; font-weight: 800; font-size: 15px; margin: 14px 0 6px; }
.rv-body textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px;
  background: var(--surface-2); color: var(--ink); resize: vertical; }
.rv-summary { margin-top: 16px; border-radius: 14px; padding: 12px 14px; }
.rv-summary.ok { background: var(--pos-bg); color: var(--pos-ink); }
.rv-summary.todo { background: var(--todo-pill); color: var(--todo-ink); }
.rv-summary p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; }
.rv-xp { font-weight: 800; color: var(--gold-ink); background: var(--gold); border-radius: 99px; padding: 2px 9px; font-size: 12.5px; margin-left: 6px; }
/* The board stays put on the left while the text on the right scrolls (2026-10-29). Only side by side,
   and only when the window is tall enough to show the whole column. */
@media (min-width: 761px) and (min-height: 560px) {
  .rv-what .err-board-col { position: sticky; top: 12px; align-self: start; }
}
.rv-what .err-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rv-what-move { font-size: 26px; font-weight: 900; letter-spacing: -0.01em; }
.rv-lead { margin: -6px 0 0; color: var(--ink-2); font-size: 15px; }
.rv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.rv-why-matters { margin: 0; font-size: 14px; line-height: 1.45; background: var(--todo-pill); color: var(--todo-ink); border-radius: 12px; padding: 10px 12px; }
@media (max-width: 640px) {
  .rv-scrim { padding: 0; }
  .rv-modal { border-radius: 0; height: 100vh; height: 100dvh; max-height: none; }
  .rv-stepbtn { font-size: 0; } .rv-stepbtn.on { font-size: 12px; flex: 3; }
  .rv-foot { padding: 10px 14px; } .rv-foot > .hint { display: none; }
}
.err-lines li.err-line-own { list-style: none; margin: 8px 0 0 -22px; padding-top: 7px; border-top: 1px dashed var(--line); color: var(--ink); }
.err-lines li.err-line-own .line-eval { color: var(--neg-ink); font-weight: 700; }

/* Ejercicios: the board stays in view while the feedback is read (desktop). */
@media (min-width: 761px) {
  .exr-grid { align-items: start; }
  .exr-board-col { position: sticky; top: 12px; }
}
.exr-view { margin-top: 8px; }
#exr-board { position: relative; width: fit-content; }
.exr-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* «Al medio juego» correction: the board on the left, fixed while the text is read. */
.ln-mgv-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.ln-mgv-aside { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; }
#ln-mgv-board { position: relative; width: fit-content; }
.ln-mgv-panel { display: flex; flex-direction: column; gap: 8px; }
.ln-mgv-tabs { margin: 0; }
.ln-mgv-note { margin: 0; font-size: 14px; line-height: 1.4; }
.ln-mgv-moves { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: baseline; font-size: 14px; max-height: 160px; overflow-y: auto; }
.ln-mgv-num { font-size: 12px; margin-left: 4px; }
.ln-mgv-move { border: 0; background: none; padding: 3px 6px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); }
.ln-mgv-move:hover { background: var(--sand); }
.ln-mgv-move.warn { box-shadow: inset 0 -2px 0 var(--sev-2, #D9701A); }
.ln-mgv-move.bad { box-shadow: inset 0 -2px 0 var(--sev-3, #B3412E); }
.ln-mgv-move.on { background: var(--gold); color: var(--gold-ink); }
.ln-mgv-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ln-mgv-nav button { min-width: 36px; min-height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; }
.ln-mgv-nav button:disabled { opacity: .4; cursor: default; }
.ln-mgv-pick { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.ln-mgv-pick:hover { background: var(--sand); }
@media (max-width: 900px) {
  .ln-mgv-grid { grid-template-columns: 1fr; }
  .ln-mgv-aside { position: static; }
}
/* Secuencias: compare the lines on the board (after the correction). */
#sq-board { position: relative; width: fit-content; }
.sq-vpanel { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.sq-vtabs { margin: 0; }
.sq-vtabs .opn-speed { display: inline-flex; align-items: center; gap: 6px; }
.sq-vkey { display: inline-block; width: 12px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.sq-vkey-yours { background: var(--pos); } .sq-vkey-game { background: #7A7368; } .sq-vkey-engine { background: #15781B; outline: 1px dashed #15781B; outline-offset: 1px; }
.sq-vmoves { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: baseline; font-size: 14px; }
.sq-vnum { font-size: 12px; margin-left: 4px; }
.sq-vmove { border: 0; background: none; padding: 3px 6px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); }
.sq-vmove:hover { background: var(--sand); }
.sq-vmove.on { background: var(--gold); color: var(--gold-ink); }
.sq-vnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sq-vnav button { min-width: 36px; min-height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; }
.sq-vnav button:disabled { opacity: .4; cursor: default; }
.sq-vnote { margin: 0; font-size: 14px; line-height: 1.4; }
.sq-lrow, .sq-srow { cursor: pointer; }
.sq-lrow:hover td, .sq-srow:hover td { background: var(--hover); }
.sq-lrow.on td, .sq-srow.on td { background: var(--todo-pill, #FBEFD3); }

/* Aperturas (Jugar la línea, Pregunta a la apertura, Al medio juego): the board keeps its size
   and place. In a wrapping flex row it shrank whenever the text beside it grew (the moves
   list, a long verdict), so it moved and changed size after every move. */
.ln-game { display: grid; grid-template-columns: minmax(300px, 480px) minmax(0, 1fr); gap: 24px; align-items: start; }
.ln-game > .ln-board-col { position: sticky; top: 12px; width: 100%; }
.ln-game > .ln-side { min-width: 0; }
/* «Pregunta a la apertura» (2026-10-29): a long PGN under the board made the column taller than the
   window and pushed the board out of view. The column fits the window and the PGN scrolls inside. */
@media (min-width: 901px) {
  .ln-game > .ln-board-col:has(> .ln-pgn) { max-height: calc(100vh - 24px); }
  .ln-game > .ln-board-col > * { flex-shrink: 0; }
  .ln-game > .ln-board-col > .ln-pgn { flex: 0 1 auto; min-height: 170px; overflow: hidden; }
  .ln-game > .ln-board-col > .ln-pgn > * { flex-shrink: 0; }
  .ln-game > .ln-board-col > .ln-pgn > .ln-chips { flex: 0 1 auto; min-height: 50px; overflow-y: auto; position: relative; align-content: flex-start; padding: 2px; }
}
@media (max-width: 900px) {
  .ln-game { grid-template-columns: minmax(0, 1fr); }
  .ln-game > .ln-board-col { position: static; max-width: 480px; }
}
button.ln-moment.ln-mgv-pick { width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; background: var(--surface-2); padding: 12px 14px; border-radius: 14px; }
button.ln-moment.ln-mgv-pick:hover:not(:disabled) { border-color: var(--pos); background: var(--surface-2); }
.ln-moment-txt { display: block; margin-top: 4px; }

/* «Pregunta a la apertura»: the variation picker; «Mis preguntas»: the library. */
.ln-varpick { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.ln-varpick select { max-width: 100%; }
.ln-chip.ln-chip-var { border-color: var(--gold); }
.ln-qtools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin-bottom: 14px; }
.ln-qtools .ln-label { display: flex; flex-direction: column; gap: 4px; }
.ln-qgroup { margin-bottom: 16px; }
.ln-qgroup h2 { margin: 0 0 8px; }
.ln-qitem { border-top: 1px solid var(--line); padding: 8px 0; }
.ln-qitem > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; list-style-position: outside; }
.ln-qpos { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.ln-qbody { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; margin-top: 10px; align-items: start; }
.ln-qboard .board.mini-board.err-board { width: 240px; height: 240px; }
.ln-qopen { margin-top: 8px; }
@media (max-width: 700px) { .ln-qbody { grid-template-columns: 1fr; } }
.ln-chip.on:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); filter: brightness(1.25); }
/* Four modes do not fit a phone in one pill row: let them wrap. */
.ln-modes { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 640px) { .ln-modes { border-radius: 18px; } .ln-modes button { padding: 8px 12px; } }

/* «Entrenamiento» picker (2026-10-28): one recommended start, then labelled groups.
   «Entrenar con» is a segmented control, filters are chips, yes/no options are checkboxes,
   and the only filled buttons are actions. */
#view-exercises .exr-lbl { font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 92px; padding-top: 8px; }
.exr-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sand); }
.exr-seg-btn { min-height: 36px; padding: 4px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.exr-seg-btn:hover:not(.on) { color: var(--ink); background: rgba(0,0,0,.04); }
.exr-seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28,26,23,.18); }
.exr-seg-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.exr-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin: 14px 0 6px;
  padding: 18px 20px; border-radius: 16px; background: var(--ink); color: var(--ground); }
.exr-hero-txt { display: flex; flex-direction: column; gap: 4px; max-width: 62ch; }
.exr-hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.exr-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.exr-hero-txt p { margin: 0; font-size: 14px; line-height: 1.45; color: #D6CFC2; }
.exr-hero-go { min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--gold); color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.exr-hero-go:hover { filter: brightness(1.06); }
.exr-hero-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.exr-pick-title { margin: 18px 0 6px; }
.exr-filters { display: flex; flex-direction: column; gap: 4px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.exr-grp { display: flex; align-items: flex-start; gap: 8px 12px; padding: 8px 0; }
.exr-grp + .exr-grp { border-top: 1px solid var(--sand); }
.exr-grp-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.exr-subrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; margin-top: 2px; }
.exr-sublbl { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-right: 2px; }
.opn-speed.exr-sub { min-height: 30px; font-size: 12.5px; padding: 2px 12px; }
.exr-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 10px;
  border: 1px solid var(--line); cursor: pointer; font-size: 14px; font-weight: 600; }
.exr-opt:has(input:checked) { border-color: var(--ink); background: var(--sand); }
.exr-opt.off { opacity: .5; cursor: default; }
.exr-go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 4px; }
.exr-count { font-size: 14px; color: var(--ink-2); font-weight: 600; }
@media (max-width: 640px) {
  .exr-grp { flex-direction: column; gap: 4px; }
  #view-exercises .exr-lbl { padding-top: 0; min-width: 0; }
  .exr-hero-go { width: 100%; }
}
.opn-speeds > .exr-lbl { align-self: center; padding-top: 0 !important; }

/* «Aperturas» (2026-10-28): the three ways to train a line explained once, numbered, with the same
   numbers on each line's buttons; the side as words instead of a circle that looked like a radio button. */
.ln-steps { margin: 18px 0 20px; }
.ln-steps-h { font-size: 15px; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.ln-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ln-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.ln-step b { font-size: 15px; }
.ln-step p { margin: 4px 0 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ln-step-why { font-size: 12.5px; font-weight: 700; color: var(--pos); }
.ln-step-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 800; }
.ln-act { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ln-act:hover { border-color: var(--ink); }
.ln-act .ln-step-n { width: 20px; height: 20px; font-size: 11.5px; }
.ln-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.ln-colour { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); }
.ln-colour .ln-dot { width: 12px; height: 12px; border-width: 1.5px; }
.ln-empty { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ln-line-actions { flex-wrap: wrap; }

/* «Nueva línea» in a window (2026-10-28): the list of lines keeps the whole width. */
.ln-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ln-list-head h2 { margin: 0; }
.ln-new-btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--gold); color: var(--gold-ink);
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.ln-new-btn:hover { filter: brightness(1.06); }
.ln-saved { margin: 0; font-size: 14px; font-weight: 700; color: var(--pos); }
.ln-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ln-empty p { margin: 0; max-width: 60ch; }
.modal.ln-new { max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-color: var(--line);
  border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.ln-new-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ln-new-top h2 { margin: 0; }
.ln-new-close:not(.td-btn) { min-width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: var(--sand); color: var(--ink); font-size: 16px; cursor: pointer; }
.ln-new-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ln-new .modal .hint, .ln-new .hint { margin: 0; }

/* «Aperturas» with colour (2026-10-28): each way to train has its own colour and symbol, repeated
   on the line buttons; each line shows its side as a king on a board square. */
.st-ask { --st: #2F6FB0; --st-bg: #E3EDF8; }
.st-play { --st: #A8560F; --st-bg: #F8E9DA; }
.st-mg { --st: #6B4FA0; --st-bg: #ECE6F6; }
.ln-title { display: flex; align-items: center; gap: 12px; }
.ln-title-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px;
  background: #b58863; color: #f0d9b5; font-size: 30px; line-height: 1; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.ln-qlib-open { background: var(--st-bg, #E3EDF8); color: #2F6FB0; }
.ln-qlib-open span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: #2F6FB0; color: #fff; font-size: 12px; font-weight: 900; margin-right: 4px; }
.ln-step { position: relative; overflow: hidden; border-top: 4px solid var(--st); }
.ln-step-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--st-bg); color: var(--st); font-size: 26px; font-weight: 900; line-height: 1; }
.ln-step b { display: inline-flex; align-items: center; gap: 6px; }
.ln-step .ln-step-n, .ln-act .ln-step-n { background: var(--st); color: #fff; }
.ln-step-why { color: var(--st); }
.ln-step-why::before { content: '→ '; }
.ln-act { border-color: color-mix(in srgb, var(--st) 35%, var(--line)); }
.ln-act:hover { border-color: var(--st); background: var(--st-bg); }
.ln-act-ic { color: var(--st); font-size: 17px; line-height: 1; font-weight: 900; }
.ln-act:focus-visible { outline: 2px solid var(--st); outline-offset: 2px; }
.ln-line { gap: 10px 14px; }
.ln-line.side-w { border-left: 5px solid #f0d9b5; }
.ln-line.side-b { border-left: 5px solid #b58863; }
.ln-king { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 10px;
  font-size: 30px; line-height: 1; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.side-w .ln-king { background: #f0d9b5; color: #3a2e1f; }
.side-b .ln-king { background: #b58863; color: #1C1A17; }
.ln-line-main { flex-basis: 220px; }
.ln-new-btn { box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }

/* «Finales» with the look of «Aperturas» (2026-10-28): where the endgames come from as three cards
   with colour and symbol (also the tabs), themes with their piece and colour, material as pieces,
   difficulty as gold stars and the state as a chip. */
.src-theory { --st: #1D6B73; --st-bg: #DDEFF0; }
.src-mine { --st: #A8560F; --st-bg: #F8E9DA; }
.src-fen { --st: #6B4FA0; --st-bg: #ECE6F6; }
.th-pawn { --th: #A8560F; --th-bg: #F8E9DA; }
.th-rook { --th: #2F6FB0; --th-bg: #E3EDF8; }
.th-minor { --th: #6B4FA0; --th-bg: #ECE6F6; }
.th-queen { --th: #A23E6B; --th-bg: #F6E1EA; }
.th-mate { --th: #1D6B73; --th-bg: #DDEFF0; }
.eg-title-ic { background: #f0d9b5; color: #3a2e1f; }
.eg-srcs-h { margin: 18px 0 8px; }
.eg-srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.eg-src { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--st); font: inherit; color: var(--ink); }
.eg-src:hover { border-color: var(--st); }
.eg-src.on { background: var(--st-bg); border-color: var(--st); box-shadow: 0 0 0 1px var(--st) inset; }
.eg-src:focus-visible { outline: 2px solid var(--st); outline-offset: 2px; }
.eg-src-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--st-bg); color: var(--st); font-size: 26px; line-height: 1; font-weight: 900; }
.eg-src.on .eg-src-ic { background: var(--st); color: #fff; }
.eg-src-txt { display: flex; flex-direction: column; gap: 4px; }
.eg-src-txt b { font-size: 15px; }
.eg-src-txt > span { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.eg-src-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--st); color: #fff; font-size: 12px; text-align: center; margin-left: 2px; }
.eg-theme { display: inline-flex; align-items: center; gap: 6px; }
.eg-theme-ic { color: var(--th); font-size: 17px; line-height: 1; }
.eg-theme.on .eg-theme-ic { color: inherit; }
.eg-card { border-top: 4px solid var(--th, var(--line)); }
.eg-card:hover { border-color: var(--th, var(--line)); }
.eg-card-top { justify-content: flex-start; }
.eg-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--th-bg, var(--sand)); color: var(--th, var(--ink)); font-size: 22px; line-height: 1; flex: none; }
.eg-stars { margin-left: auto; color: #C9962C; font-size: 15px; letter-spacing: 1px; }
.eg-stars-off { color: var(--line); }
.eg-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: auto; }
.eg-mat { display: inline-flex; align-items: center; gap: 4px; font-size: 20px; line-height: 1; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.eg-mat-w { color: #5A4A33; } .eg-mat-b { color: var(--ink); }
.eg-mat-vs { font-size: 11px; font-weight: 700; color: var(--ink-2); margin: 0 2px; }
.eg-state { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--sand); font-size: 12.5px; font-weight: 700; }
.eg-state.done { background: var(--pos-bg); }
.eg-state.due { background: var(--neg-bg); }
.eg-row { justify-content: flex-start; gap: 10px 14px; border-left: 4px solid var(--st, var(--line)); }
.eg-row:hover { border-color: var(--st, var(--ink)); background: var(--st-bg, var(--surface-2)); }
.eg-row-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--st-bg); color: var(--st); font-size: 22px; line-height: 1; }
.eg-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.eg-h-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; margin-right: 8px;
  background: #ECE6F6; color: #6B4FA0; font-size: 18px; vertical-align: middle; }

/* «Ejercicios» and «Asistente de decisión» with the look of «Aperturas» / «Finales» (2026-10-28).
   Shared tones (--st / --st-bg) for cards, chips and badges. */
.tone-teal { --st: #1D6B73; --st-bg: #DDEFF0; }
.tone-blue { --st: #2F6FB0; --st-bg: #E3EDF8; }
.tone-orange { --st: #A8560F; --st-bg: #F8E9DA; }
.tone-purple { --st: #6B4FA0; --st-bg: #ECE6F6; }
.tone-magenta { --st: #A23E6B; --st-bg: #F6E1EA; }
.exr-title-ic { background: #f0d9b5; color: #3a2e1f; }
.ast-title-ic { background: #b58863; color: #f0d9b5; }
.exr-h1 { margin: 0 0 6px; font-size: 32px; }
.opn-speeds > .exr-modes { flex: 1 1 100%; }
.exr-modes .ln-steps-h { margin: 6px 0 8px; }
.exr-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.exr-mode-card { padding: 12px 14px; }
.exr-mode-card .eg-src-ic { width: 38px; height: 38px; font-size: 22px; }
.exr-mode-card .eg-src-txt > span { font-size: 13px; }
.kind-chip { display: inline-flex; align-items: center; gap: 6px; }
.kind-ic { color: var(--st); font-size: 16px; line-height: 1; }
.kind-chip.on .kind-ic { color: inherit; }
.exr-opt-ic { color: var(--ink-2); font-size: 15px; line-height: 1; }
.exr-opt:has(input:checked) .exr-opt-ic { color: var(--ink); }
/* Position-type badges in the lists: their tone. */
.exr-badge.k-tactics { border-color: #A8560F; background: #F8E9DA; color: #7A3E0A; }
.exr-badge.k-strategy { border-color: #2F6FB0; background: #E3EDF8; color: #22507F; }
.exr-badge.k-endgame { border-color: #1D6B73; background: #DDEFF0; color: #144C52; }
.exr-badge.k-opening { border-color: #6B4FA0; background: #ECE6F6; color: #4E3A75; }
.exr-badge.k-tactics::before { content: '⚔ '; } .exr-badge.k-strategy::before { content: '♜ '; }
.exr-badge.k-endgame::before { content: '♔ '; } .exr-badge.k-opening::before { content: '♘ '; }
.ast-pick-h { margin-bottom: 10px; }
.ast-srcs { margin-bottom: 8px; }
.ast-srcs .eg-src-ic { width: 38px; height: 38px; font-size: 22px; }
#view-assistant .ln-step { border-top: 4px solid var(--st); }

/* Block «Análisis» with the look of «Aperturas» / «Finales» (2026-10-28): every page title with a
   tile of its colour and symbol; the same tones as the training screens. */
.tone-green { --st: #1F5E45; --st-bg: #DDEBE3; }
.tone-red { --st: #B3412E; --st-bg: #F6DDD6; }
.ln-title-ic.tone { background: var(--st-bg); color: var(--st); font-weight: 900; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--st) 22%, transparent); }
.page-h1 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 34px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.lib-h1 { margin: 4px 0 14px; }
.sc-title.ln-title { gap: 14px; }
.lab-title { display: flex; align-items: center; gap: 12px; }
.lab-title-ic { background: #12323A; color: var(--measured, #3FC7D9); box-shadow: inset 0 0 0 1px #24505A; }

/* Numbers in tiles: a coloured stripe on top (decoration only: the colour does not mean better
   or worse, so no green or red; warnings keep their own colour). */
.view:not(.lab) .ins-tile { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tile, #1D6B73); border-radius: 12px; padding: 12px 14px; }
.view:not(.lab) .ins-tile:nth-child(5n+1) { --tile: #1D6B73; }
.view:not(.lab) .ins-tile:nth-child(5n+2) { --tile: #2F6FB0; }
.view:not(.lab) .ins-tile:nth-child(5n+3) { --tile: #6B4FA0; }
.view:not(.lab) .ins-tile:nth-child(5n+4) { --tile: #A8560F; }
.view:not(.lab) .ins-tile:nth-child(5n+5) { --tile: #A23E6B; }
.view:not(.lab) .ins-tile b { font-size: 24px; font-weight: 900; letter-spacing: -0.01em; }
.view:not(.lab) .ins-tile.clk-warn, .view:not(.lab) .ins-tile.th-weak { --tile: var(--mistake); }
/* Group cards (openings, strategy episodes, endgames): a stripe of the analysis' colour. */
.view:not(.lab) .ins-card, .view:not(.lab) .stg-card { border-left: 4px solid var(--card, #6B4FA0); border-radius: 10px; background: var(--surface); }
#view-openings .ins-card { --card: #6B4FA0; }
#view-strategy .stg-card { --card: #2F6FB0; }
#view-endgames .stg-card { --card: #1D6B73; }

/* «Mejores jugadas»: each kind of merit with its colour and symbol; the moves in a green frame. */
.hl-card { border-left: 4px solid #1F5E45; }
.hl-chip { border-radius: 10px; border-color: #CFE2D7; background: #F5FAF7; min-height: 44px; }
.hl-chip.open, .hl-chip:hover { border-color: #1F5E45; background: #E9F3EE; }
.hl-move { font-family: var(--font-mono); font-size: 15px; color: #16452F; }
.hl-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 0; font-size: 12.5px; font-weight: 700; }
.hl-tag::before { font-size: 13px; line-height: 1; }
.hl-tag-hard { background: #FBF0D6; color: #6E4D05; } .hl-tag-hard::before { content: '★'; color: #C9962C; }
.hl-tag-punish { background: #DDEBE3; color: #16452F; } .hl-tag-punish::before { content: '⚡'; }
.hl-tag-sacrifice { background: #F8E9DA; color: #7A3E0A; } .hl-tag-sacrifice::before { content: '\265F\FE0E'; }
.hl-tag-only { background: #E3EDF8; color: #22507F; } .hl-tag-only::before { content: '◎'; }

/* «Mis partidas»: the two steps numbered like the steps of the training screens. */
.lib-step-h { display: flex; align-items: center; gap: 10px; }
.lib-step-h .ln-step-n { width: 28px; height: 28px; font-size: 15px; background: var(--st); color: #fff; }

/* Black pawn ♟ is drawn as an emoji by Windows unless asked for its text form (U+FE0E, added in the markup). */
/* «Laboratorio» (dark): the tiles get a cyan stripe, the colour of what is measured in the games. */
.lab .ins-tile { border-top: 3px solid var(--measured); border-radius: 10px; }

/* Rest of the app with the same look (2026-10-28): Agenda, Plan, Logros, Tutorial, Progreso. */
/* Tutorial: each phase of the method with its own colour (P1-P8), on its card and its detail. */
.ph-P1 { --ph: #1D6B73; --ph-bg: #DDEFF0; } .ph-P2 { --ph: #2F6FB0; --ph-bg: #E3EDF8; }
.ph-P3 { --ph: #3F4FA0; --ph-bg: #E4E6F6; } .ph-P4 { --ph: #6B4FA0; --ph-bg: #ECE6F6; }
.ph-P5 { --ph: #A23E6B; --ph-bg: #F6E1EA; } .ph-P6 { --ph: #A8560F; --ph-bg: #F8E9DA; }
.ph-P7 { --ph: #8F6300; --ph-bg: #F6EDD3; } .ph-P8 { --ph: #4A5A6A; --ph-bg: #E5E9ED; }
.tut-phase[class*="ph-"] { border-top: 4px solid var(--ph); background: var(--surface); border-radius: 12px; }
.tut-phase[class*="ph-"]:hover { border-color: var(--ph); }
.tut-phase[class*="ph-"].on { background: var(--ph-bg); border-color: var(--ph); box-shadow: 0 0 0 1px var(--ph) inset; }
.tut-phase[class*="ph-"] .tut-phase-id { display: inline-flex; align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: var(--ph); color: #fff; font-size: 12px; }
/* Logros: each group with its colour, on its heading and on the badges not yet earned. */
.g-train { --g: #1D6B73; --g-bg: #DDEFF0; } .g-puzzles { --g: #2F6FB0; --g-bg: #E3EDF8; }
.g-habit { --g: #A8560F; --g-bg: #F8E9DA; } .g-games { --g: #6B4FA0; --g-bg: #ECE6F6; }
.gm-group-h { display: inline-flex; align-items: center; gap: 8px; color: var(--g); }
.gm-group-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--g); }
.gm-card[class*="g-"] { border-top: 4px solid var(--g-bg); }
.gm-card[class*="g-"]:not(.earned) .gm-badge { background: var(--g-bg); color: var(--g); }
.gm-card.earned[class*="g-"] { border-top-color: var(--gold); }
.gm-title-ic { --st: #8F6300; --st-bg: #FBF0D6; color: #C9962C; }
.td-title.ln-title { gap: 14px; }
/* Progreso (Laboratorio, dark): the number tiles with a cyan stripe, like Análisis global. */
.lab .wk-tile, .lab .lab-kpi { border-top: 3px solid var(--measured); }

/* «Análisis global»: the essentials first, the rest behind doors (2026-10-28). Laboratorio, dark. */
.ins-new-h { margin: 0 0 6px; }
.ins-period { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); }
.ins-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px 18px; margin-bottom: 26px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.ins-line b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-line-warn { margin-left: auto; color: var(--gold); font-weight: 700; }
#view-insights .ins-kicker { margin: 0 0 14px; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ins-esencial, .ins-profundizar { margin-bottom: 30px; }
.ins-ess-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ins-idea { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; margin-bottom: 16px; border-radius: 20px;
  background: linear-gradient(180deg, #16262B 0%, var(--surface) 100%); border: 1px solid #24505A; }
.ins-idea .ins-ess-k { color: var(--measured); }
.ins-idea p { margin: 0; font-size: clamp(21px, 2.6vw, 29px); line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; max-width: 38ch; color: var(--ink); }
.ins-ess-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ins-ess { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); border-top: 4px solid var(--ess); }
.ins-ess .ins-ess-k { color: var(--ess); }
#view-insights .ins-ess h3 { margin: 0; font-size: 20px; line-height: 1.25; color: var(--ink); text-transform: none; letter-spacing: -0.01em; font-weight: 800; }
.ins-ess p { margin: 0; font-size: 15px; line-height: 1.5; color: #C3CAD5; }
.ins-ess p.ins-ess-big { font-size: 17px; font-weight: 700; color: var(--ink); }
.ins-ess-ex { font-size: 14px !important; color: var(--ink-2) !important; }
.ins-ess-ex b { font-family: var(--font-mono); }
.ess-cost { --ess: var(--neg); } .ess-good { --ess: var(--pos); } .ess-not { --ess: #C3CAD5; }
#view-insights .ins-ess-btn { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--ess);
  background: transparent; color: var(--ess); font: inherit; font-weight: 800; cursor: pointer; }
#view-insights .ins-ess-btn:hover { background: var(--neg-bg); }
.ins-rule { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 26px; border-radius: 18px;
  background: var(--gold); color: #1C1A17; }
.ins-rule > div:first-child { display: flex; flex-direction: column; gap: 6px; flex: 1 1 420px; }
.ins-rule .ins-ess-k { color: #3D3320; }
.ins-rule p { margin: 0; font-size: 19px; line-height: 1.38; font-weight: 800; }
.ins-rule-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#view-insights .ins-rule-1, #view-insights .ins-rule-2 { min-height: 48px; padding: 0 20px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
#view-insights .ins-rule-1 { border: 0; background: #1C1A17; color: #F3EEE4; }
#view-insights .ins-rule-2 { border: 2px solid #1C1A17; background: transparent; color: #1C1A17; }
#view-insights .ins-rule-1:hover, #view-insights .ins-rule-2:hover { filter: brightness(1.15); border-color: #1C1A17; }
.ins-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
#view-insights .ins-door { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 16px; min-height: 92px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit; cursor: pointer; }
#view-insights .ins-door:hover { border-color: #24505A; }
#view-insights .ins-door.on { border-color: var(--measured); background: #12262B; }
.ins-door-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 40px; height: 40px; padding: 0 4px; box-sizing: border-box;
  border-radius: 10px; background: #1B222C; color: var(--measured); font-size: 18px; font-weight: 900; }
.ins-door.on .ins-door-ic { background: var(--measured); color: #0B1A1E; }
.ins-door-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ins-door-txt b { font-size: 16px; }
.ins-door-txt span { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.ins-door-chev { color: #5A6472; font-size: 18px; }
.ins-door-body { margin-top: 14px; border-top: 3px solid var(--measured); }
.ins-door-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ins-door-head h2 { margin: 0; }
#view-insights .ins-door-close { min-width: 40px; min-height: 40px; padding: 0; font-size: 16px; }
@media (max-width: 640px) {
  .ins-line-warn { margin-left: 0; }
  .ins-idea, .ins-rule { padding: 18px; }
  .ins-rule-actions, .ins-rule-actions button { width: 100%; }
}

/* «Resumir en 3 + 3»: the AI's 3 weaknesses and 3 strengths, numbered, each with its number and action. */
.ins-sum .ins-ess { gap: 14px; }
.ins-sum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ins-sum-list li { display: flex; gap: 12px; align-items: flex-start; }
.ins-sum-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ess); color: #0B1A1E; font-size: 13px; font-weight: 900; }
.ins-sum-list li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#view-insights .ins-sum-text { flex-basis: 100%; margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.ins-sum-fig { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: #1B222C; color: var(--measured); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-sum-act { font-size: 13.5px; color: var(--ink-2); }
#view-insights .ins-sum-btn { min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ess); background: transparent; color: var(--ess);
  font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
#view-insights .ins-sum-btn:hover { background: var(--neg-bg); }
.ins-sum-foot { margin: -4px 0 16px; font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#view-insights .ins-sum-foot .td-link { color: var(--measured); padding: 4px; min-height: 32px; font-size: 13px; }
.ins-sum-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; margin: -2px 0 16px;
  border-radius: 14px; border: 1px dashed #24505A; background: #101A1E; }
.ins-sum-ask > div { display: flex; flex-direction: column; gap: 4px; flex: 1 1 360px; }
.ins-sum-ask span { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
#view-insights .ins-sum-go { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--measured); color: #0B1A1E; font: inherit; font-weight: 800; cursor: pointer; }
#view-insights .ins-sum-go:disabled { opacity: .6; cursor: default; }
.ins-sum-err { flex-basis: 100%; color: var(--neg); font-size: 13.5px; font-weight: 700; }

/* «Tu ajedrez»: the summary card has two tabs, measured in the games and the coach's 3 + 3. */
.sc-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sand); align-self: flex-start; }
.sc-tab { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sc-tab span { color: var(--ink-2); }
.sc-tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28,26,23,.18); }
.sc-tab.on span { color: #1D6B73; }
.sc-tab:hover:not(.on) { color: var(--ink); }
#sc-sum-panel { display: flex; flex-direction: column; gap: 18px; }
.sc-coach-empty { display: flex; flex-direction: column; gap: 12px; max-width: 70ch; }
.sc-coach-err { margin: 0; color: var(--neg-ink); font-weight: 700; font-size: 14px; }
.sc-coach-from { margin: -8px 0 0; font-size: 13px; }

/* «Agenda» (2026-10-29): the calendar stays fixed and a panel on the right shows the open task, the
   new-task form or the suggestions to choose (like Linear); right click menu; dashed suggestions. */
.ag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 12px; }
.ag-main { min-width: 0; }
#ag-main .ag-board { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 0; }
#ag-main .ag-col { padding: 6px; }
#ag-main .ag-col.adding { outline: 2px dashed var(--ink); outline-offset: -2px; }
#ag-main .ag-overdue { margin-bottom: 10px; }
.ag-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1099px) {
  .ag-layout { grid-template-columns: minmax(0, 1fr); }
  .ag-panel { display: none; }
  .ag-panel.open { display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); max-height: none; z-index: 60;
    border-radius: 0; box-shadow: -12px 0 40px rgba(28, 26, 23, .25); }
}
/* A flex column with a capped height shrinks its children: keep them whole and let the panel scroll. */
.ag-panel > * { flex-shrink: 0; }
.ag-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cards: the open one is outlined; «⋯» shows on hover / focus (always on touch screens). */
.ag-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ag-card.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.ag-more-btn { flex: none; background: transparent; border: 0; padding: 0 3px; min-width: 22px; min-height: 22px; border-radius: 6px; font-size: 16px; line-height: 1;
  color: inherit; cursor: pointer; opacity: 0; }
.ag-card:hover .ag-more-btn, .ag-card:focus-within .ag-more-btn, .ag-card.sel .ag-more-btn { opacity: .9; }
.ag-more-btn:hover { background: rgba(255, 255, 255, .22); }
@media (hover: none) { .ag-more-btn { opacity: .8; } }
.ag-ext { font-size: 11px; opacity: .85; }
.ag-card[class*="ty-"] > .ag-card-head { align-items: flex-start; }

/* Suggestions while reviewing «Rellenar»: dashed, kept (✓) or left out (+, faded). */
.ag-ghost { display: flex; align-items: flex-start; gap: 6px; width: 100%; text-align: left; padding: 4px 7px; border-radius: 6px; cursor: pointer;
  border: 2px dashed var(--ty); background: color-mix(in srgb, var(--ty) 9%, var(--surface)); color: var(--ink); font: inherit; font-size: 12.5px; line-height: 1.3; }
.ag-ghost .ag-short { white-space: normal; overflow-wrap: anywhere; }
.ag-ghost-mark { flex: none; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ty); color: #fff; font-size: 10px; font-weight: 900; margin-top: 1px; }
.ag-ghost:not(.on) { opacity: .5; border-color: var(--line); background: transparent; }
.ag-ghost:not(.on) .ag-ghost-mark { background: var(--sand); color: var(--ink-2); }
.ag-ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.ag-ghost-pill { padding: 1px 5px; font-size: 11px; border-width: 1.5px; }
.ag-ghost-pill .ag-short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ghost-pill .ag-ghost-mark { width: 12px; height: 12px; font-size: 8px; }

/* The panel */
.ag-pn-head { display: flex; align-items: center; gap: 8px; }
.ag-pn-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.ag-pn-head .ag-pn-title::first-letter { text-transform: uppercase; }
.ag-pn-close { flex: none; min-width: 36px; min-height: 36px; border: 0; border-radius: 10px; background: var(--sand); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.ag-pn-close:hover { filter: brightness(.95); }
.ag-pn-type { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ty); }
.ag-pn-type .ag-sw { width: 12px; height: 12px; }
.ag-pn-src { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.ag-pn-type .ag-more-btn { opacity: 1; color: var(--ink); font-size: 18px; min-width: 36px; min-height: 36px; }
.ag-pn-type .ag-more-btn:hover { background: var(--sand); }
.ag-pn-titlein { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; border: 1px solid transparent; border-radius: 10px; background: transparent;
  padding: 6px 8px; margin: -6px -8px 0; width: calc(100% + 16px); font: inherit; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.ag-pn-titlein:hover { border-color: var(--line); }
.ag-pn-titlein:focus { border-color: var(--ink); outline: none; background: var(--surface-2); }
.ag-panel .ag-status-set { gap: 4px; }
.ag-panel .ag-status-set button { min-height: 36px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.ag-pn-gos { display: flex; flex-direction: column; gap: 8px; }
.ag-pn-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0;
  background: var(--ink); color: var(--ground); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; text-align: center; }
.ag-pn-go:hover { filter: brightness(1.25); }
.ag-pn-url { background: #E3EDF8; color: #22507F; }
.ag-pn-url:hover { filter: brightness(.96); }
.ag-pn-prog { margin: 0; font-size: 13px; color: var(--ink-2); }
.ag-props { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.ag-prop { display: contents; }
.ag-prop-k { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ag-prop-v input, .ag-prop-v select { width: 100%; box-sizing: border-box; min-height: 36px; }
.ag-prop-v input[type="number"] { max-width: 110px; }
.ag-prop-help { grid-column: 2; margin-top: -4px; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.ag-pn-notes { width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px; }
.ag-pn-copy summary { cursor: pointer; font-weight: 700; font-size: 14px; min-height: 32px; display: flex; align-items: center; }
.ag-pn-copy[open] { display: flex; flex-direction: column; gap: 8px; }
.ag-pn-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--sand); padding-top: 10px; margin-top: auto; }
.ag-pn-del { background: transparent; border: 0; color: var(--neg-ink); font: inherit; font-weight: 700; padding: 6px 4px; min-height: 36px; cursor: pointer; }
.ag-pn-del:hover { text-decoration: underline; }
.ag-pn-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ag-pn-primary { flex: 1 1 160px; min-height: 44px; border: 0; border-radius: 12px; background: var(--ink); color: var(--ground); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.ag-pn-primary:disabled { opacity: .45; cursor: default; }
.ag-pn-actions .ag-pn-cancel { min-height: 44px; padding: 0 16px; min-width: 0; }
.ag-pn-add { align-self: flex-start; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px dashed var(--line); background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.ag-pn-tips { border-top: 1px solid var(--sand); padding-top: 10px; font-size: 13px; color: var(--ink-2); }
.ag-pn-tips p { margin: 0 0 4px; color: var(--ink); }
.ag-pn-tips ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.ag-panel .ag-side-list { display: flex; flex-direction: column; gap: 5px; }
.ag-panel .ag-pill { font-size: 12.5px; min-height: 28px; }

/* Day chips (copy to / on these days): Monday to Sunday, this week and the next. */
.ag-chips-row { display: flex; flex-direction: column; gap: 4px; }
.ag-chips-label { font-size: 12px; color: var(--ink-2); }
.ag-chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 44px; padding: 2px 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.ag-chip span { font-size: 11px; color: var(--ink-2); text-transform: uppercase; }
.ag-chip b { font-size: 14px; }
.ag-chip.today { border-color: var(--ink-2); }
.ag-chip.own { border-style: dashed; }
.ag-chip.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.ag-chip.on span { color: #D6CFC2; }
.ag-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Reviewing the suggestions */
.ag-rv-warn { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--neg-ink); }
.ag-rv-bulk { display: flex; gap: 12px; margin: -4px 0 -6px; }
.ag-rv-list { display: flex; flex-direction: column; gap: 12px; }
.ag-rv-day { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.ag-rv-day legend { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; margin-bottom: 4px; }
.ag-rv-day legend label { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.ag-rv-day legend b::first-letter { text-transform: uppercase; }
.ag-rv-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--ty); font-size: 13.5px; line-height: 1.35; cursor: pointer; }
.ag-rv-item input { margin-top: 2px; }
.ag-rv-item .ag-sw { display: none; }
.ag-rv-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ag-rv-item.off { opacity: .5; }

/* The right-click menu and the undo toast */
#ag-menu .ag-menu { position: fixed; z-index: 1000; min-width: 250px; max-width: 320px; box-sizing: border-box; padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(28, 26, 23, .22); display: flex; flex-direction: column; gap: 1px; }
.ag-menu-title { padding: 4px 10px 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ag-mi > span:first-child { width: 18px; text-align: center; color: var(--ink-2); }
.ag-mi:hover, .ag-mi:focus-visible { background: var(--sand); outline: none; }
.ag-mi.danger, .ag-mi.danger > span:first-child { color: var(--neg-ink); }
.ag-mi-key, .ag-mi-chev { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.ag-menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.ag-menu-copy { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 8px; }
.ag-menu-copy .ag-chip { min-height: 38px; }
.ag-mi-copygo { min-height: 36px; }
#ag-toast .ag-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1001; display: flex; align-items: center; gap: 16px;
  max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--ink); color: var(--ground);
  box-shadow: 0 10px 30px rgba(28, 26, 23, .3); font-size: 14px; }
.ag-toast-undo { background: transparent; border: 0; color: var(--gold); font: inherit; font-weight: 800; min-height: 32px; padding: 0 6px; cursor: pointer; }

/* Week cards: the title uses the whole width (no word split); count and outside link below; «⋯» floats. */
#ag-main .ag-card { position: relative; }
#ag-main .ag-card-head .ag-short.ag-full { overflow-wrap: break-word; hyphens: auto; }
#ag-main .ag-card-head { padding-right: 6px; }
.ag-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0 8px 5px 28px; font-size: 11px; }
.ag-card[class*="ty-"] > .ag-card-meta { background: var(--ty); color: #fff; }
.ag-card[class*="ty-"] > .ag-card-meta .ag-target { border-color: rgba(255, 255, 255, .6); color: #fff; }
.ag-card[class*="ty-"] > .ag-card-meta .ag-target.ok { background: rgba(255, 255, 255, .25); }
.ag-card-meta .ag-ext { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ag-main .ag-card > .ag-more-btn { position: absolute; top: 3px; right: 3px; background: var(--ty, var(--ink)); color: #fff;
  box-shadow: -6px 0 6px var(--ty, var(--ink)); }
#ag-main .ag-card > .ag-more-btn:hover { filter: brightness(1.15); }
.ag-scrim { display: none; }
@media (max-width: 1099px) {
  .ag-has-panel .ag-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(28, 26, 23, .35); }
}

#ag-menu .ag-menu { max-height: calc(100vh - 16px); overflow-y: auto; }
span.ag-status { cursor: inherit; }

/* The generic button:hover paints buttons light: keep chosen chips and the chosen view dark. */
.ag-chip.on:hover { background: var(--ink); border-color: var(--ink); color: var(--ground); filter: brightness(1.3); }
.ag-mode button.on:hover { background: var(--accent); color: #fff; filter: brightness(1.1); }
.ag-chip:not(.on):hover { background: var(--sand); }

/* The element default «button:hover» (above) is as specific as the coloured buttons' own hover and
   comes later, so it painted them light (white text on a light background). Keep their colour. */
button.primary:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--ground); filter: brightness(1.25); }
.lab button.primary:hover:not(:disabled) { background: var(--measured); border-color: var(--measured); color: #0B1A1E; filter: brightness(1.08); }
#view-agenda .ag-pn-primary:hover:not(:disabled), #view-agenda .ag-pn-go:not(.ag-pn-url):hover { background: var(--ink); color: var(--ground); filter: brightness(1.25); }
#view-agenda .ag-pn-url:hover { background: #E3EDF8; color: #22507F; filter: brightness(.96); }
#view-agenda .ag-pn-close:hover:not(:disabled) { background: var(--sand); filter: brightness(.95); }
#view-agenda .ag-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--ty) 16%, var(--surface)); border-color: var(--ty); }
#view-agenda .ag-ghost:not(.on):hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-2); }
#view-agenda #ag-main .ag-card > .ag-more-btn:hover:not(:disabled) { background: var(--ty, var(--ink)); filter: brightness(1.15); }
#view-agenda .ag-pn-type .ag-more-btn:hover:not(:disabled) { background: var(--sand); }
#view-agenda .ag-pn-del:hover:not(:disabled) { background: transparent; }
#ag-menu .ag-mi:hover:not(:disabled) { background: var(--sand); }
#ag-toast .ag-toast-undo:hover:not(:disabled) { background: transparent; text-decoration: underline; }

/* «Jugar la línea» (2026-10-29): the games played in the line, to review them later, and Stockfish's
   best moves in the review. */
.ln-game > .ln-board-col.ln-setup-col { position: static; }  /* the board and, under it, the games played */
.ln-setup-col .ln-hist { margin: 6px 0 0; }
.ln-hist h2 { margin: 0 0 4px; font-size: 18px; }
.ln-hist > .hint { margin: 0 0 10px; }
.ln-hist-list { display: flex; flex-direction: column; gap: 8px; }
button.ln-hist-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; cursor: pointer; }
button.ln-hist-row:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
button.ln-hist-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ln-hist-when { font-weight: 800; font-size: 14px; white-space: nowrap; }
.ln-hist-tag { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--sand); color: var(--ink-2); }
.ln-hist-tag.pos { background: var(--pos-bg); color: var(--pos-ink); }
.ln-hist-tag.neg { background: var(--neg-bg); color: var(--neg-ink); }
.ln-hist-tag.active { background: var(--todo-pill); color: var(--todo-ink); }
.ln-hist-go { font-weight: 700; font-size: 13px; white-space: nowrap; }
.ln-hist-facts { grid-column: 1 / -1; font-size: 13px; }
button.ln-hist-all, button.ln-sf-open { margin-top: 10px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; }
button.ln-hist-all:hover:not(:disabled), button.ln-sf-open:hover:not(:disabled) { background: var(--sand); color: var(--ink); border-color: var(--line); }
.ln-sf { margin: 4px 0 8px; }
.ln-sf button.ln-sf-open { margin-top: 0; width: 100%; }
.ln-sf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
button.ln-sf-close { min-width: 32px; min-height: 32px; border: 0; border-radius: 8px; background: var(--sand); color: var(--ink); font: inherit; cursor: pointer; }
.ln-sf-lines { margin: 6px 0; font-size: 13.5px; }
.ln-sf .hint { margin: 4px 0 0; font-size: 12.5px; }
@media (max-width: 520px) { button.ln-hist-row { grid-template-columns: 1fr auto; } .ln-hist-tag { grid-column: 1 / -1; grid-row: 2; } }
/* While playing, the cards beside the board change after every move: the browser's scroll anchoring
   then scrolled the page to keep them in place and the board jumped. The board is what stays put. */
html:has(#view-lines.active) { overflow-anchor: none; }  /* off for the whole page (else it anchors to what is below) */
.ln-thinking .ln-turn { display: flex; align-items: center; gap: 8px; }

/* «Pensamiento estratégico → Dónde jugaste esta estructura» (2026-10-30): the games and stretches of a
   structure, and a viewer of each stretch. */
.stg-sv { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.stg-sv h3 { margin: 0 0 4px; font-size: 17px; }
.stg-sv > .hint { margin: 0 0 10px; }
.stg-sv-games { display: flex; flex-direction: column; gap: 8px; }
.stg-sv-game { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.stg-sv-game.open { border-color: var(--ink); }
.stg-sv-ghead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.stg-sv-acc { font-weight: 800; white-space: nowrap; }
.stg-sv-acc small { font-weight: 400; color: var(--ink-2); }
.stg-sv-acc.neg, .stg-sv-stretch.neg b { color: var(--neg-ink); }
.stg-sv-acc.pos, .stg-sv-stretch.pos b { color: var(--pos-ink); }
.stg-sv-stretches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
button.stg-sv-stretch { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
button.stg-sv-stretch.neg { border-color: var(--neg-bg); background: var(--neg-bg); }
button.stg-sv-stretch:hover:not(:disabled) { border-color: var(--ink); background: var(--surface-2); color: var(--ink); }
button.stg-sv-stretch.neg:hover:not(:disabled) { background: var(--neg-bg); }
button.stg-sv-stretch.on, button.stg-sv-stretch.on:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
button.stg-sv-stretch.on b { color: #fff; }
button.stg-sv-more { margin-top: 10px; min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.stg-sv-view { margin-top: 10px; border-top: 1px solid var(--line); padding: 10px 0 0; }
.stg-sv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
button.stg-sv-close { min-width: 32px; min-height: 32px; border: 0; border-radius: 8px; background: var(--sand); color: var(--ink); font: inherit; cursor: pointer; }
.stg-sv-mv.bad { border-color: var(--neg-ink); color: var(--neg-ink); }
.stg-sv-mv.warn { border-color: #C77D1A; color: #9A5B0C; }
.stg-sv-mv.nocount { opacity: .55; }
.stg-sv-mv.on { opacity: 1; }

/* Few games (2026-10-30): the rating is shown, faded, with ⚠ and a tooltip saying it may not be significant. */
.opn-cell.ev-few, .opn-chip.ev-few { opacity: .72; outline: 1px dashed currentColor; outline-offset: -3px; }
.opn-cell.ev-few:hover, .opn-chip.ev-few:hover { opacity: 1; }
.opn-few { display: inline-block; margin-left: 2px; font-size: .9em; cursor: help; }
.opn-few-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); }

/* «💬 Pídeselo al entrenador» (2026-10-30): the Agenda's planner in the panel on the right. */
button.ag-plan-btn { background: var(--ink); border-color: var(--ink); color: #fff; }
button.ag-plan-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; filter: brightness(1.3); }
.ag-pl-intro p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.ag-pl-examples { display: flex; flex-direction: column; gap: 6px; }
button.ag-pl-example { text-align: left; font: inherit; font-size: 13px; line-height: 1.35; color: var(--ink); background: var(--surface-2);
  border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
button.ag-pl-example:hover:not(:disabled) { border-color: var(--ink); background: var(--surface-2); color: var(--ink); }
.ag-pl-thread { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.ag-pl-msg { font-size: 14px; line-height: 1.45; padding: 8px 10px; border-radius: 12px; max-width: 92%; white-space: pre-wrap; }
.ag-pl-msg.me { align-self: flex-end; background: var(--sand); }
.ag-pl-msg.coach { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); }
.ag-pl-who { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.ag-pl-proposal { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.ag-pl-ph { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ag-pl-item { border-radius: 10px; }
.ag-pl-item.off { opacity: .55; }
.ag-pl-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 6px 4px 30px; font-size: 12.5px; }
.ag-pl-what { font-weight: 700; }
.ag-pl-ex { padding: 0 6px 6px 30px; font-size: 12.5px; }
.ag-pl-ex summary { cursor: pointer; color: var(--ink-2); }
.ag-pl-ex ul { margin: 4px 0 0; padding-left: 16px; }
.ag-pl-form { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.ag-pl-form textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 14px;
  resize: vertical; background: var(--surface); color: var(--ink); }
.ag-pl-form textarea:focus { border-color: var(--ink); outline: none; }
.ag-pl-send-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.exr-series.exr-set { border-color: var(--ink); }

/* ---------- Coach-student mode, phase 6: what is new, the student's file (coach.js) ---------- */
.co-st-new { box-shadow: 0 0 0 2px var(--gold); }
.co-news { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 10px; border-radius: 12px; background: #FBF6EA; }
.co-news-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-news-seen { margin-left: auto; }
.co-news-badge { flex: none; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); }
.co-news-txt { font-size: 14px; line-height: 1.45; color: var(--ink); }
.co-news .td-link { padding: 4px; min-height: 28px; }
.co-news-none { margin: 0; }
.co-st-foot { flex-wrap: wrap; gap: 8px; }
.co-filter { margin: 4px 0 -4px; }
.co-back { align-self: flex-start; padding-left: 0; }
.co-file-head { flex-wrap: wrap; gap: 14px; align-items: center; }
.co-file-head .td-eyebrow, .co-file-head .td-title { margin: 0; }
.co-av-lg { width: 60px; height: 60px; font-size: 24px; }
.co-file-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.co-file-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.co-file-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.co-file-g { display: flex; flex-direction: column; gap: 6px; }
.co-file-g + .co-file-g { padding-top: 12px; border-top: 1px solid var(--sand); }
.co-file-item span { color: var(--ink-2); }
.co-file-sub { margin-top: 6px; }
.co-label-neg { color: var(--neg-ink); }
.co-label-pos { color: var(--pos-ink); }
.co-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.co-file-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-file-list li > span:nth-child(2) { flex: 1; min-width: 0; }
@media (max-width: 900px) { .co-file-grid { grid-template-columns: minmax(0, 1fr); } }
.co-left { align-self: flex-start; padding-left: 0; }

/* ---------- «Pregunta a la apertura»: Stockfish always in view, comparing lines (lines.js, 2026-10-31) ---------- */
.ln-board-wrap { display: flex; gap: 8px; align-items: stretch; width: 100%; max-width: 540px; }
.ln-board-wrap > #ln-board { flex: 1; min-width: 0; position: relative; }
.ln-board-wrap > #ln-board .board { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.ln-evalbar { flex: none; width: 18px; border-radius: 6px; overflow: hidden; background: #3B3833; border: 1px solid #3B3833; position: relative; display: flex; flex-direction: column-reverse; }
.ln-evalbar.flip { flex-direction: column; }
.ln-evalbar-w { display: block; width: 100%; background: #F4F1EA; transition: height .35s ease; }
@media (prefers-reduced-motion: reduce) { .ln-evalbar-w { transition: none; } }
.ln-sfa { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ln-sfa-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ln-sfa-ev { font-family: var(--font-mono); font-size: 16px; }
.ln-sfa-head .td-link { margin-left: auto; padding: 4px; min-height: 28px; }
.ln-sfa .hint { margin: 0; }
.ln-sfa-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ln-sfa-move { width: 100%; display: flex; align-items: baseline; gap: 8px; min-height: 30px; padding: 3px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-family: var(--font-mono); font-size: 13px; overflow: hidden; white-space: nowrap; }
.ln-sfa-move:hover, .ln-sfa-move:focus-visible { background: var(--surface-2); }
.ln-sfa-n { flex: none; min-width: 48px; color: var(--ink-2); }
.ln-sfa-move .line-pv { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
/* the lines of an answer as a table */
.ln-cmp { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
.ln-thread > .ln-msg.coach { min-width: 0; max-width: 100%; }
.ln-cmp-scroll { overflow-x: auto; max-width: 100%; position: relative; }
@media (max-width: 640px) { .ln-cmp-t tbody th { min-width: 150px; } .ln-cmp-t th, .ln-cmp-t td { padding: 6px 5px; } }
.ln-cmp-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.ln-cmp-t th, .ln-cmp-t td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ln-cmp-t thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.ln-cmp-t tbody th { font-weight: 400; min-width: 180px; }
.ln-cmp-t tbody th b { display: block; font-size: 13px; }
.ln-cmp-moves { display: block; font-size: 12px; color: var(--ink-2); }
.ln-cmp-t td.ln-mono { white-space: nowrap; }
.ln-cmp-t tr.is-best { background: var(--pos-bg); }
.ln-cmp-t .ln-show { white-space: nowrap; min-width: 36px; min-height: 32px; padding: 0 8px; }
.ln-cmp-t td:last-child { width: 1%; padding-right: 0; }
.ln-cmp-pick { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; cursor: pointer; }
.ln-cmp-pick input { width: 18px; height: 18px; accent-color: var(--ink); }
.ln-cmp-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 800;
  background: var(--ink); color: var(--ground); }
.ln-cmp-tag:empty { display: none; }
.ln-cmp-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ln-cmp-foot .hint { margin: 0; flex: 1; min-width: 200px; }
.ln-cmp-go { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--ink); color: var(--ground); font-weight: 700; cursor: pointer; }
.ln-cmp-go:disabled { opacity: .45; cursor: default; }
/* two lines side by side */
.ln-cmp-panel { display: flex; flex-direction: column; gap: 10px; }
.ln-cmp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ln-cmp-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ln-cmp-b { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ln-cmp-b figcaption { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.ln-cmp-b figcaption b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-cmp-ev { font-size: 13px; font-weight: 700; }
.ln-cmp-board .board.mini-board.err-board { width: 100%; height: auto; aspect-ratio: 1; }
.ln-cmp-line { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.ln-cmp-line span.on { background: var(--ink); color: var(--ground); border-radius: 4px; padding: 0 3px; }
.ln-cmp-line span.ln-cmp-split { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.ln-cmp-steps { align-items: center; }
.ln-cmp-ply { font-size: 13px; color: var(--ink-2); padding: 0 6px; }
.ln-cmp-panel .hint { margin: 0; }
.ln-cmp-go:hover:not(:disabled), .ln-cmp-go:focus-visible { background: var(--ink); color: var(--ground); filter: brightness(1.25); }

/* ---------- «Pregunta a la apertura», phase 2: the coach's moves on the board, stepping a line (lines.js) ---------- */
.ln-mv { display: inline; min-height: 0; min-width: 0; line-height: 1.35; font: inherit; font-family: var(--font-mono); font-size: .92em; font-weight: 700; color: var(--pos-ink); background: var(--pos-bg);
  border: 0; border-radius: 5px; padding: 0 4px; margin: 0 1px; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ln-mv:hover, .ln-mv:focus-visible { background: var(--pos); color: #fff; text-decoration: none; }
.ln-mv-threat { color: var(--neg-ink); background: var(--neg-bg); }
.ln-mv-threat:hover, .ln-mv-threat:focus-visible { background: var(--neg); color: #fff; }
.ln-preview { outline: 3px solid var(--gold); outline-offset: 2px; }
.ln-linestrip { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 2px solid #2F6FB0; }
.ln-linestrip-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ln-linestrip-head .hint { margin: 0; }
.ln-linestrip-head .td-link { margin-left: auto; padding: 4px; min-height: 28px; }
.ln-linestrip .ln-chips { max-height: 92px; overflow-y: auto; }
.ln-pinned { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 14px; border: 2px dashed #2F6FB0; }
.ln-pinned-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: #2F6FB0; }
.ln-pinned-head > span { flex: 1; min-width: 0; }
.ln-pinned-head .td-link { padding: 4px; min-height: 28px; }
/* The board square (2026-10-31: it was stretched sideways) and, on a short laptop screen, small enough
   to leave room under it for Stockfish's moves and the PGN in the column that fits the window. */
@media (min-width: 901px) { .ln-board-wrap { max-width: min(540px, max(300px, calc(100vh - 340px))); } }

/* ---------- Aperturas → Construir un repertorio (builder.js, 2026-10-31) ---------- */
.rb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #FBF1D9; border: 1px solid var(--gold);
  color: var(--gold-ink); font-size: 12px; font-weight: 800; white-space: nowrap; vertical-align: middle; }
.ln-built { box-shadow: inset 0 0 0 2px var(--gold); }
.ln-built-meta { display: block; margin: 2px 0 0; }
.ln-list-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ln-list-btns .ln-cta { display: inline-flex; align-items: center; gap: 6px; }
.ln-filter { margin: 4px 0 8px; }
.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-chip { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--sand); background: var(--sand); color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rb-chip.on { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.rb-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sand); align-self: flex-start; }
.rb-seg button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rb-seg button.on { background: var(--ink); color: var(--ground); }
.rb-seg-sm button { min-height: 34px; padding: 0 12px; font-size: 13px; }
.rb-mono { font-family: var(--font-mono); }
.rb-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rb-warn { color: var(--neg-ink); }
/* the form */
.rb-new { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; }
.rb-h1 { margin: 4px 0 0; font-size: 32px; font-weight: 900; letter-spacing: -.02em; }
.rb-intro { max-width: 640px; font-size: 15px; }
.rb-new-card { display: flex; flex-wrap: wrap; gap: 28px; padding: 26px; }
.rb-new-form { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.rb-new-board { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.rb-new-board .board.mini-board.err-board { width: 100%; max-width: 340px; height: auto; aspect-ratio: 1 / 1; }
.rb-new-sq .sq { cursor: pointer; }
.rb-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 800; }
.rb-field input, .rb-field select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 400; box-sizing: border-box; width: 100%; }
.rb-field input.rb-mono { font-family: var(--font-mono); }
.rb-fs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rb-fs legend { font-size: 13px; font-weight: 800; padding: 0; margin-bottom: 6px; }
.rb-fs .hint { margin: 0; }
.rb-ok { margin: 0; font-size: 13px; font-weight: 700; color: var(--pos); }
.rb-src { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.rb-src.on { border: 2px solid var(--ink); }
.rb-src > input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.rb-src > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rb-src b { font-size: 15px; }
.rb-src-opts { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; font-weight: 700; margin-top: 4px; }
.rb-src-opts select { min-height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; padding: 0 8px; }
/* the builder */
.rb-bar { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.rb-name { font-size: 20px; font-weight: 900; }
.rb-side { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rb-side-black { background: #3B3833; color: #F4F1EA; }
.rb-side-white { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.rb-sp { flex: 1; }
.rb-status { margin: 0; }
.rb-status .error { color: var(--neg-ink); }
.rb-practise:disabled { opacity: .5; cursor: default; }
.rb-play .sq { cursor: pointer; }
#rb-board { flex: 1; min-width: 0; position: relative; }
#rb-board .board.mini-board.err-board { width: 100%; height: auto; aspect-ratio: 1 / 1; }
@media (min-width: 901px) { .rb-board-col .ln-board-wrap { max-width: min(540px, max(300px, calc(100vh - 300px))); } .ln-game > .rb-board-col { position: static; } }
.rb-side-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rb-pos, .rb-tree, .rb-todo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rb-pos-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rb-pos-head > div:first-child { flex: 1; min-width: 220px; }
.rb-h2 { margin: 0; font-size: 20px; font-weight: 900; }
.rb-pos-head .hint { margin: 2px 0 0; }
.rb-opts summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); min-height: 28px; }
.rb-confirm { padding: 12px 14px; border-radius: 14px; background: #FBF1D9; border: 1px solid var(--gold); display: flex; flex-direction: column; gap: 8px; }
.rb-confirm p { margin: 0; font-size: 14px; }
.rb-scroll { overflow-x: auto; max-width: 100%; position: relative; }
.rb-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.rb-t th, .rb-t td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.rb-t thead th { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.rb-t tbody th { font-weight: 400; }
.rb-t tr.is-mine { background: var(--pos-bg); }
.rb-t tr[data-uci]:hover { background: var(--hover); }
.rb-t tr.is-mine:hover { background: var(--pos-bg); }
.rb-mv { font-family: var(--font-mono); font-size: 15px; font-weight: 600; margin-right: 4px; }
.rb-sub { display: block; font-size: 11px; color: var(--ink-2); font-family: var(--font); }
.rb-tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--sand); color: var(--gold-ink); margin: 2px 2px 0 0; }
.rb-tag-mine { background: var(--ink); color: var(--ground); }
.rb-tag-best { background: var(--pos-bg); color: var(--pos-ink); }
.rb-res-cell { min-width: 140px; }
.rb-res { display: flex; height: 14px; border-radius: 5px; overflow: hidden; border: 1px solid #B9B1A3; }
.rb-res-w { background: #F4F1EA; } .rb-res-d { background: #B9B1A3; } .rb-res-b { background: #3B3833; }
.rb-res-t { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-2); }
.rb-share { display: block; width: 80px; height: 6px; border-radius: 999px; background: var(--sand); overflow: hidden; margin-top: 4px; }
.rb-share span { display: block; height: 100%; background: var(--ink); }
.rb-act { text-align: right; white-space: nowrap; }
.rb-pick { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rb-pick-dark { background: var(--ink); color: var(--ground); }
.rb-chosen { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--pos); color: #fff; font-size: 13px; font-weight: 700; }
.rb-done { min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--pos-bg); color: var(--pos-ink); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.rb-missing { font-size: 13px; font-weight: 800; color: var(--neg-ink); white-space: normal; }
.rb-count { margin: 0; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--pos-bg); color: var(--pos-ink); font-size: 13px; font-weight: 800; }
.rb-chipmv { min-height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
.rb-pos .hint, .rb-tree .hint, .rb-todo .hint { margin: 0; }
/* the tree */
.rb-tree-head, .rb-todo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rb-tree-head .td-label, .rb-todo-head .td-label { margin: 0; }
.rb-pgn { font-family: var(--font-mono); font-size: 14px; line-height: 2; max-height: 420px; overflow-y: auto; padding: 4px 2px; }
.rb-tm { display: inline; min-height: 0; min-width: 0; padding: 1px 4px; margin: 0 1px; border: 0; border-radius: 6px; background: transparent; color: var(--ink);
  font: inherit; cursor: pointer; }
.rb-tm:hover, .rb-tm:focus-visible { background: var(--sand); }
.rb-tm.on { background: var(--ink); color: var(--ground); }
.rb-tm.rb-trunk { color: var(--ink-2); }
.rb-tc { font-family: var(--font); font-size: 13px; color: var(--pos-ink); margin: 0 4px; }
.rb-tc::before { content: "{ "; } .rb-tc::after { content: " }"; }
.rb-var { display: block; margin: 2px 0 2px 14px; padding-left: 10px; border-left: 2px solid var(--line); }
.rb-open { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--neg-bg); color: var(--neg-ink);
  font-family: var(--font); font-size: 12px; font-weight: 900; margin-left: 2px; vertical-align: middle; }
.rb-comment { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.rb-comment label { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.rb-comment textarea { font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--ink); resize: vertical; }
.rb-del { align-self: flex-start; color: var(--neg-ink); padding-left: 0; }
/* to prepare, coverage */
.rb-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rb-todo-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); flex-wrap: wrap; }
.rb-todo-mv { font-weight: 600; font-size: 15px; }
.rb-todo-where { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); }
.rb-cov { display: flex; flex-direction: column; gap: 6px; }
.rb-cov-head { display: flex; justify-content: space-between; font-size: 13px; }
.rb-cov-bar { height: 10px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.rb-cov-bar span { display: block; height: 100%; background: var(--pos); transition: width .3s; }
@media (prefers-reduced-motion: reduce) { .rb-cov-bar span { transition: none; } }
@media (max-width: 640px) { .rb-t th, .rb-t td { padding: 6px 5px; } .rb-res-cell { min-width: 110px; } }

/* «Construir un repertorio», phase 2: the explanation (builder.js) */
.rb-xp { display: flex; flex-direction: column; gap: 12px; min-width: 0; border: 2px solid var(--gold); }
.rb-xp.rb-xp-closed { border: 1px dashed var(--gold); }
.rb-xp[hidden] { display: none; }
.rb-xp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rb-xp-head > div { flex: 1; min-width: 220px; }
.rb-xp-head .hint { margin: 2px 0 0; }
.rb-xp-sec { display: flex; flex-direction: column; gap: 4px; }
.rb-xp-sec .td-label { margin: 0; }
.rb-xp-sec p:last-child { margin: 0; font-size: 15px; line-height: 1.55; }
.rb-xp-line { margin: 0; font-family: var(--font-mono); font-size: 13px; }
.rb-xp-line .hint { font-family: var(--font); margin-right: 4px; }
.rb-xp-key { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FBF1D9; font-size: 15px; font-weight: 700; }
.rb-xp-qa { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.rb-xp-ask { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.rb-xp-ask .td-label { margin: 0; }
.rb-xp-ask textarea { font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); color: var(--ink); resize: vertical; }
.rb-xp .hint { margin: 0; }
.rb-xp .ln-mv:hover, .rb-xp .ln-mv:focus-visible { background: var(--pos); color: #fff; }
.rb-xp .ln-mv.ln-mv-threat:hover, .rb-xp .ln-mv.ln-mv-threat:focus-visible { background: var(--neg); color: #fff; }
.rb-pgn .rb-tm.on { background: var(--ink); color: var(--ground); }