/* Fuentes servidas desde ChessVan (antes venían de Google: una conexión externa que bloqueaba el pintado y enviaba la IP del visitante a un tercero). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./fonts/space-grotesk-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('./fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #293133;
  --bg-glow: radial-gradient(ellipse 1100px 700px at 10% -10%, rgba(45, 212, 191, 0.07), transparent 55%),
    radial-gradient(ellipse 900px 650px at 100% 100%, rgba(255, 90, 60, 0.05), transparent 55%),
    linear-gradient(160deg, #2c3537 0%, #242b2d 55%, #293133 100%);
  --bg-glow-size: auto;
  --panel: #505e61;
  --panel-raised: #5c6d72;
  --panel-solid: #505e61;
  --panel-tint-teal: rgba(45, 212, 191, 0.12);
  --panel-tint-coral: rgba(255, 90, 60, 0.12);
  --panel-tint-violet: rgba(124, 58, 237, 0.12);
  --panel-tint-yellow: rgba(242, 184, 75, 0.12);
  --line: #6a7b80;
  --ink: #f2f5f4;
  --ink-dim: #d0d8da;
  --glass-blur: none;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.25), 0 10px 26px rgba(0, 0, 0, 0.3);
  --teal: #2dd4bf;
  --teal-dim: #1a8f81;
  --teal-glow: rgba(45, 212, 191, 0.3);
  --pink: #ff5a3c;
  --pink-dim: #d6472c;
  --pink-glow: rgba(255, 90, 60, 0.28);
  --violet: #7c3aed;
  --violet-dim: #6d28d9;
  --yellow: #f2b84b;
  --yellow-dim: #d49a2e;
  --coral: #ff5a3c;
  --coral-dim: #d6472c;
  --amber: #f2b84b;
  --red: #e05a4e;
  --green: #4caf7d;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html, body, #app { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  background-image: var(--bg-glow);
  background-size: var(--bg-glow-size);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  top: -6vw;
  left: -10vw;
  width: 60vw;
  height: 60vw;
  max-width: 820px;
  max-height: 820px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M20%2020%20L100%20160%20L180%2020%20L140%2020%20L100%2095%20L60%2020%20Z%22%20fill%3D%22rgb%2845%2C212%2C191%29%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

#app { display: flex; flex-direction: column; min-height: 100%; position: relative; z-index: 1; }

button { font-family: var(--font-body); cursor: pointer; }

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.6rem;
  border-bottom: 1px solid var(--line);
  background: rgba(41, 49, 51, 0.82);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: 100vw;
  box-sizing: border-box;
  gap: 0.6rem;
}
.hamburger-btn {
  display: block;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .topnav {
    padding: 0.7rem 0.9rem;
  }
  .hamburger-btn {
    display: block;
  }
  .topnav-train-btn {
    display: none; /* en móvil el CTA grande vive debajo del nav */
  }
  .topnav-user-rating,
  .topnav-user span:last-child {
    display: none;
  }
}

.hamburger-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}
.hamburger-panel.open {
  display: block;
}
.hamburger-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 7, 0.6);
}
@keyframes hamburger-slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@media (max-width: 640px) {
  .topnav-pro-btn {
    display: none;
  }
}
.opening-new-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.6rem;
}
.opening-new-card h3 {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
}
.opening-import-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.opening-import-form input[type="text"],
.opening-import-form select {
  flex: 1 1 200px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  color: var(--ink);
  font-size: 0.85rem;
}
.opening-import-form input[type="file"] {
  flex: 1 1 200px;
  color: var(--ink-dim);
  font-size: 0.82rem;
}
.opening-import-error {
  color: var(--red);
  font-size: 0.82rem;
  margin: 0.6rem 0 0;
}
.opening-train-screen {
  max-width: 640px;
  margin: 2rem auto;
  text-align: center;
  padding: 0 1rem;
}
.opening-train-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  margin-bottom: 0.8rem;
}
.opening-train-feedback {
  min-height: 1.4rem;
  font-weight: 600;
  margin: 0.9rem 0;
}
.opening-train-feedback-ok {
  color: var(--green);
}
.opening-train-feedback-wrong {
  color: var(--red);
}
.opening-train-done h2 {
  font-family: var(--font-display);
}
.opening-train-score {
  font-size: 2rem;
  font-family: var(--font-display);
  color: var(--teal);
  margin: 0.6rem 0 1.4rem;
}

.quota-blocked {
  max-width: 420px;
  margin: 3rem auto;
  text-align: center;
}
.quota-blocked-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 0.8rem;
}
.quota-blocked h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.8rem;
}
.quota-blocked p {
  font-size: 0.9rem;
  color: var(--ink-dim);
  margin: 0 0 1.4rem;
}
.quota-blocked .btn {
  width: 100%;
  margin-bottom: 0.6rem;
  display: block;
  text-align: center;
}

.pro-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--amber), #c99530);
  color: #1a1200;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 14px;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(242, 184, 75, 0.5);
}
.pro-badge-small {
  font-size: 0.78rem;
  filter: drop-shadow(0 0 4px rgba(242, 184, 75, 0.7));
}
.streak-badge-small {
  font-size: 0.78rem;
  filter: drop-shadow(0 0 4px rgba(255, 90, 60, 0.6));
}
.share-card-pro {
  border-color: var(--amber) !important;
  box-shadow: var(--shadow-card), 0 0 24px rgba(242, 184, 75, 0.18) !important;
}

.dash-stat-clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.dash-stat-clickable:hover {
  border-color: var(--teal-dim);
  transform: translateY(-1px);
}

@keyframes streak-freeze-pop {
  0% { transform: scale(1); background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur); }
  35% { transform: scale(1.25); background: rgba(122, 200, 255, 0.35); box-shadow: 0 0 20px rgba(122, 200, 255, 0.7); }
  100% { transform: scale(1); background: rgba(122, 200, 255, 0.1); }
}

#freeze-btn.btn-primary {
  width: 100%;
}
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.account-row-label {
  color: var(--ink-dim);
}
.account-note {
  font-size: 0.78rem;
  color: var(--ink-dim);
  text-align: center;
  margin-top: 0.6rem;
}
.account-error {
  color: var(--red);
  font-size: 0.82rem;
  text-align: center;
  min-height: 1.2rem;
}
.pro-view {
  max-width: 560px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.pro-hero {
  text-align: center;
  margin-bottom: 1.8rem;
}
.pro-hero h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin: 0 0 0.6rem;
}
.pro-hero p {
  color: var(--ink-dim);
  font-size: 0.95rem;
}
.pro-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.pro-plan-btn {
  position: relative;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  padding: 1.3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  color: var(--ink);
}
.pro-plan-btn:hover {
  border-color: var(--teal-dim);
}
.pro-plan-cta {
  margin-top: 0.6rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--teal-dim);
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 600;
}
.pro-plan-cta-featured {
  background: var(--teal);
  color: #14201e;
  border-color: var(--teal);
}
.pro-plan-featured {
  border-color: var(--amber);
  background: rgba(242, 184, 75, 0.08);
}
.pro-plan-badge {
  position: absolute;
  top: -0.6rem;
  background: var(--amber);
  color: #1a1200;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 14px;
}
.pro-plan-name {
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.pro-plan-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.4rem;
}
.pro-plan-price span {
  font-size: 0.75rem;
  color: var(--ink-dim);
  font-weight: 500;
}
.pro-plan-sub {
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.pro-error {
  color: var(--red);
  font-size: 0.82rem;
  text-align: center;
  min-height: 1.2rem;
}
.pro-compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}
.pro-compare th, .pro-compare td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.pro-compare td:first-child {
  text-align: left;
  color: var(--ink-dim);
}
.pro-compare th:nth-child(3) {
  color: var(--amber);
}

.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--teal-dim);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
}
.install-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.install-banner-never {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.install-banner-dismiss {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
@media (max-width: 640px) {
  .install-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}
.mobile-train-cta {
  display: none;
}
.stats-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  max-width: 1360px;
  margin: 1.6rem auto;
  padding: 0 1.5rem;
  align-items: start;
}
.stats-ranking-fixed {
  position: sticky !important;
  top: 90px !important;
  right: auto !important;
  width: auto !important;
}
.stats-main-col h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0 0 1rem;
}
@media (max-width: 900px) {
  .stats-page-layout {
    grid-template-columns: 1fr;
  }
  .stats-ranking-fixed {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin-top: 1.5rem;
  }
}
.standalone-view {
  max-width: 480px;
  margin: 1.6rem auto;
  padding: 0 1rem;
}
.standalone-view h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0 0 1rem;
}

.stats-preview-wrap {
  position: relative;
}
.stats-locked-icon {
  font-size: 1.6rem;
  display: block;
}
.stats-preview-blur {
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.stats-preview-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.5rem;
}
.stats-preview-cta p {
  font-size: 0.85rem;
  color: var(--ink);
  max-width: 320px;
  background: var(--panel-tint-teal);
  padding: 0.3rem 0.6rem;
  border-radius: 10px;
}
.stats-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 1.6rem 0 0.8rem;
}
.stats-table {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stats-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
}
.stats-row-label {
  font-size: 0.82rem;
}
.stats-row-acc {
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-family: var(--font-mono);
}
@media (max-width: 640px) {
  .mobile-train-cta {
    display: block;
    width: calc(100% - 1.8rem);
    margin: 0.9rem auto 0;
    padding: 1rem;
    font-size: 1rem;
  }
}
.topnav-brand {
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0;
}
.topnav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topnav-back {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem 0;
}
.topnav-back:hover { color: var(--teal); }

.topnav-right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.topnav-train-btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
}
.topnav-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 14px;
  padding: 0.3rem 0.9rem 0.3rem 0.3rem;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.topnav-user:hover { border-color: var(--teal-dim); }
.topnav-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: #14201e;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topnav-user-rating {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
}

.topnav-logout {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  cursor: pointer;
}
.topnav-logout:hover { border-color: var(--red); color: var(--red); }

.auth-screen {
  max-width: 420px;
  margin: 4.5rem auto;
  text-align: center;
  padding: 0 1.2rem;
}
.auth-screen h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.auth-logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 1.8rem;
  display: block;
}
.topnav-logo {
  height: 34px;
  width: auto;
  display: block;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-dim);
  text-align: left;
  cursor: pointer;
}
.auth-checkbox-row input {
  margin-top: 0.15rem;
  width: auto !important;
  flex-shrink: 0;
}
.auth-checkbox-row a {
  color: var(--teal);
}
.auth-form input {
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  font-size: 0.92rem;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--teal-dim);
}
.auth-error {
  color: var(--red);
  font-size: 0.85rem;
  min-height: 1.2rem;
  margin: 0.8rem 0 0;
}
.auth-switch {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 0.4rem;
}

.topnav-link {
  font-size: 0.85rem;
  color: var(--ink-dim);
  font-weight: 500;
}
.topnav-link.active {
  color: var(--teal);
}

.btn {
  border: 1px solid var(--line);
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink);
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.btn:hover { border-color: var(--teal-dim); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #14201e;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(45, 212, 191, 0.3);
}
.btn-primary:hover {
  background: var(--teal-dim);
  box-shadow: 0 4px 16px rgba(45, 212, 191, 0.4);
}

.back-btn { margin: 1.4rem; }

.menu {
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
}

.menu h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

.accent { color: var(--teal); }

.menu-sub {
  color: var(--ink-dim);
  font-size: 1.05rem;
  margin: 0 0 3rem;
}

.drill-hint { color: var(--ink-dim); font-size: 0.95rem; line-height: 1.6; }

.timer {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--teal);
  min-width: 2.4ch;
  display: inline-block;
  text-align: center;
  text-shadow: 0 0 20px var(--teal-glow);
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.2rem 0.7rem;
}

@keyframes board-fade-in {
  /* Sin scale: chessground mide el tablero al crearlo y guarda esa medida;
     con scale(0.99) lo medía ~5px más pequeño de lo real. */
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.board-mount {
  width: min(560px, 66vh, 84vw);
  height: min(560px, 66vh, 84vw);
  aspect-ratio: 1;
  margin: 1.6rem auto;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  animation: board-fade-in 0.35s ease-out;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(45, 212, 191, 0.28),
    0 0 46px rgba(45, 212, 191, 0.13);
}

.feedback {
  max-width: 520px;
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
  text-align: center;
  font-size: 0.96rem;
  color: var(--ink-dim);
  line-height: 1.6;
}
.feedback strong { color: var(--ink); }

.summary {
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  text-align: center;
}
.summary h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 2rem;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.summary-value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--teal);
  text-shadow: 0 0 20px var(--teal-glow);
}
.summary-label {
  font-size: 0.76rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}

.intro-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid var(--teal-dim);
  border-radius: 14px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 1.2rem;
}

.intro-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}

.intro-subtitle {
  color: var(--ink-dim);
  font-size: 1rem;
  max-width: 480px;
  margin: 0 auto 2.4rem;
  line-height: 1.6;
}

.intro-steps {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
  text-align: left;
}

.intro-step {
  display: grid;
  grid-template-columns: 1.8rem 2.2rem 1fr;
  align-items: center;
  gap: 0.9rem;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
}

.intro-step-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--teal);
  border: 1px solid var(--teal-dim);
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-step-icon { font-size: 1.4rem; text-align: center; }

.intro-step-text {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.45;
}
.intro-step-text strong { color: var(--teal); }

.btn-lg {
  padding: 0.9rem 2.2rem;
  font-size: 1rem;
}

.turn-badge {
  display: block;
  width: fit-content;
  margin: 1.4rem auto 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.turn-badge.white {
  background: #ffffff;
  color: #1a2224;
  border-color: #ffffff;
}
.turn-badge.black {
  background: #1a2224;
  color: #ffffff;
  border-color: #1a2224;
}

.exercise-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem 0 0;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.exercise-time-chip {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.3rem 0.8rem;
}
.exercise-time-chip {
  color: var(--teal);
  border-color: var(--teal-dim);
}

.bm-hint-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: none;
  color: var(--teal);
  padding: 0.4rem 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.bm-hint-btn:hover:not(:disabled) {
  opacity: 0.8;
}
.bm-hint-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.bm-hint-btn:disabled {
  opacity: 0.4;
  cursor: default;
  color: var(--ink-dim);
}
.bm-hint-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.6));
}
.bm-hint-btn:disabled .bm-hint-icon {
  filter: none;
}

.exercise-header .turn-badge {
  margin: 0 !important;
}

.board-mount.hide-pieces piece {
  opacity: 0 !important;
}

.board-mount.board-mount-tight {
  margin: 0.2rem auto 1.4rem;
  position: relative;
  width: min(560px, 66vh, 84vw);
  height: min(560px, 66vh, 84vw);
}
.board-mount cg-container,
.board-mount cg-board {
  width: 100% !important;
  height: 100% !important;
}

.board-instruction {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}
.board-instruction.solution-callout {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.98rem;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid var(--teal-dim);
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  margin-top: 0.8rem;
}

.exercise-content {
  margin: 0 auto;
  max-width: 560px;
  text-align: center;
  position: relative;
}

.blind-banner {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  background: rgba(4, 5, 7, 0.72);
  border-radius: 10px;
  animation: board-fade-in 0.3s ease-out;
}
.result-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 5, 7, 0.72);
  border-radius: 10px;
  animation: overlay-fade 1.3s ease-out forwards;
}
.result-ring {
  width: 52%;
  max-width: 220px;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.6));
}
.result-ring-track {
  fill: rgba(4, 5, 7, 0.85);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 5;
}
.result-ring-progress {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  animation: ring-fill 0.45s ease-out forwards;
}
.result-mark {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: mark-draw 0.35s ease-out 0.35s forwards;
}
.result-overlay.ok .result-ring-progress { stroke: var(--green); }
.result-overlay.ok .result-mark { stroke: var(--green); }
.result-overlay.wrong .result-ring-progress { stroke: var(--red); }
.result-overlay.wrong .result-mark { stroke: var(--red); }
.result-overlay.timeout .result-ring-progress { stroke: var(--amber); }
.result-overlay.timeout .result-mark { stroke: var(--amber); }
.result-mark-clockface { fill: none; stroke: var(--amber); stroke-width: 3; opacity: 0.5; }

@keyframes ring-fill { to { stroke-dashoffset: 0; } }
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
@keyframes overlay-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.admin-view {
  max-width: 1100px;
  margin: 1.6rem auto;
  padding: 0 1.5rem;
}
.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 1.6rem;
}
.admin-summary-card {
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.admin-summary-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.4rem;
}
.admin-summary-label {
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.admin-search-input {
  width: 100%;
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  color: var(--ink);
  margin: 0.6rem 0 1rem;
}
.admin-main-tabs {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0 1.6rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.8rem;
}
.admin-user-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 1.2rem;
}
.admin-filter-btn {
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.admin-filter-btn.active {
  background: var(--teal);
  color: #14201e;
  border-color: var(--teal);
}
.admin-main-tab {
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  color: var(--ink-dim);
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-main-tab.active {
  background: var(--teal);
  color: #14201e;
  border-color: var(--teal);
}
.offer-active-card {
  background: linear-gradient(160deg, rgba(242, 184, 75, 0.14) 0%, rgba(45, 212, 191, 0.06) 100%);
  border: 1px solid var(--amber);
  border-radius: 12px;
  padding: 1.4rem;
  margin-bottom: 1.6rem;
}
.offer-active-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 0.5rem;
}
.offer-active-card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
}
.offer-active-card p {
  margin: 0.3rem 0;
  color: var(--ink-dim);
}
.offer-ends {
  font-size: 0.8rem;
}
.offer-active-tag {
  color: var(--teal);
  font-size: 0.7rem;
  margin-left: 0.4rem;
}
.offer-help {
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}
.offer-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 560px;
}
.offer-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}
.offer-form input {
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  color: var(--ink);
  font-size: 0.9rem;
}
.offer-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.offer-error {
  color: var(--coral);
  font-size: 0.82rem;
}
.offer-banner {
  text-align: center;
  background: linear-gradient(135deg, rgba(242, 184, 75, 0.16), rgba(45, 212, 191, 0.06));
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.2rem;
  font-size: 0.88rem;
  color: var(--ink);
}
.admin-chart-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.admin-chart-tab {
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.admin-chart-tab.active {
  background: var(--teal);
  color: #14201e;
  border-color: var(--teal);
  font-weight: 600;
}
.admin-users-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-user-row {
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 1rem;
  align-items: center;
  font-size: 0.82rem;
}
.admin-user-main {
  display: flex;
  flex-direction: column;
}
.admin-user-email {
  color: var(--ink-dim);
  font-size: 0.75rem;
}
.admin-user-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--ink-dim);
  font-size: 0.72rem;
}
.admin-user-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
}
.admin-delete-btn {
  margin-top: 0.4rem;
  background: none;
  border: 1px solid rgba(255, 90, 60, 0.4);
  color: var(--red);
  border-radius: 10px;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  cursor: pointer;
}
.admin-delete-btn:hover:not(:disabled) {
  background: rgba(255, 90, 60, 0.1);
}
.admin-delete-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 700px) {
  .admin-user-row {
    grid-template-columns: 1fr;
  }
}
.pro-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 5, 7, 0.75);
  animation: board-fade-in 0.25s ease-out;
  padding: 1rem;
}
.pro-success-card {
  background: linear-gradient(160deg, var(--panel-raised), var(--panel));
  border: 1px solid rgba(242, 184, 75, 0.4);
  border-radius: 14px;
  padding: 2.4rem 1.8rem;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 0 60px rgba(242, 184, 75, 0.15);
  animation: pro-success-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pro-success-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pro-success-badge {
  font-size: 3.4rem;
  filter: drop-shadow(0 0 16px rgba(242, 184, 75, 0.7));
  margin-bottom: 0.6rem;
  animation: pro-success-badge-spin 0.7s ease-out;
}
@keyframes pro-success-badge-spin {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.pro-success-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0 0 0.8rem;
  background: linear-gradient(90deg, var(--amber), #f7d27a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pro-success-text {
  font-size: 0.88rem;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 0 0 1.6rem;
}
.pro-success-btn {
  width: 100%;
}
#piece-slider {
  width: 100%;
  accent-color: var(--teal);
  height: 6px;
  cursor: pointer;
}

.eval-simple {
  text-align: center;
  max-width: 940px;
  margin: 1.6rem auto;
}
.eval-layout {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.eval-board-col {
  position: relative; /* los botones de «Siguiente / Ver solución» se centran sobre el tablero, no sobre toda la pantalla */
  flex: 0 0 auto;
  text-align: center;
}
.eval-board-col .board-mount {
  width: min(580px, 56vh, 84vw);
  height: min(580px, 56vh, 84vw);
  margin: 0.7rem 0 0;
}
.eval-side-col {
  flex: 0 0 340px;
  min-width: 220px;
}
.eval-side-col .board-instruction {
  text-align: left;
  margin: 0 0 1rem;
}
#eval-result-text {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}
.eval-verdict {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0.5rem 0 0.2rem;
}
.eval-verdict-ok {
  color: var(--green);
}
.eval-verdict-wrong {
  color: var(--red);
}
/* Tablero y opciones lado a lado necesitan ~820px: por debajo de 880px se apilan (iPad en vertical, ventanas estrechas). */
@media (max-width: 880px) {
  .eval-layout {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .eval-board-col .board-mount {
    width: min(420px, 84vw);
    height: min(420px, 84vw);
    margin: 0.7rem auto 0;
  }
  .eval-side-col .board-instruction {
    text-align: center;
  }
}
.eval-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.eval-btn {
  border: 1px solid var(--line);
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.eval-btn:hover:not(:disabled) { border-color: var(--teal-dim); }
.eval-btn:disabled { opacity: 0.75; }
.eval-btn-correct {
  background: rgba(22, 163, 74, 0.22) !important;
  border-color: var(--green) !important;
  opacity: 1 !important;
}
.eval-btn-wrong {
  background: rgba(255, 90, 60, 0.22) !important;
  border-color: var(--red) !important;
  opacity: 1 !important;
}

.dash-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 860px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .dash-side {
    order: -1;
  }
}

.dash-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  .dash-top { grid-template-columns: 1fr; }
}
.dash-stat-card {
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  padding: 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.dash-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
}
.dash-stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ink);
}
.dash-stat-value-max {
  font-size: 1rem;
  color: var(--ink-dim);
  font-weight: 500;
}
.dash-stat-sub {
  font-size: 0.76rem;
  color: var(--ink-dim);
}
.dash-stat-sub.good { color: var(--green); }

.dash-section {
  margin-bottom: 2rem;
}
.dash-section h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.8rem;
}

.dash-pr-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.9rem;
}
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.pr-card {
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
  box-shadow: 0 0 0 rgba(255, 90, 60, 0);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.pr-card:hover {
  border-color: var(--coral);
  box-shadow: 0 0 18px rgba(255, 90, 60, 0.18);
}
.pr-card-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.pr-card-value {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--pink);
  line-height: 1.1;
}
.pr-card-sub {
  font-size: 0.68rem;
  color: var(--ink-dim);
}
@media (max-width: 640px) {
  .pr-grid { grid-template-columns: 1fr; }
}
.dash-stats-link {
  width: 100%;
  margin-top: 0.9rem;
}

/* Columna lateral: tarjeta + clasificación, siempre visibles */
.dash-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 861px) {
  .dash-side {
    position: sticky;
    top: 90px;
  }
}

.share-card {
  background:
    radial-gradient(ellipse 200px 140px at 20% 0%, rgba(45, 212, 191, 0.1), transparent 60%),
    radial-gradient(ellipse 180px 140px at 100% 100%, rgba(255, 90, 60, 0.07), transparent 60%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: var(--shadow-card);
}
.share-card-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.share-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: #14201e;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.share-card-rating-block {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.share-card-rating {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--teal);
  line-height: 1;
}
.info-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(242, 245, 244, 0.35);
  background: none;
  color: rgba(242, 245, 244, 0.7);
  font-size: 0.7rem;
  cursor: pointer;
  margin-left: 0.4rem;
  vertical-align: super;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0.8;
}
.info-btn:hover {
  border-color: var(--teal-dim);
  color: var(--teal);
  opacity: 1;
}
.info-popover {
  font-size: 0.76rem;
  color: var(--ink-dim);
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0 0;
  text-align: left;
}
.share-card-rating-label {
  font-size: 0.78rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.share-card-weekly {
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin: -0.6rem 0 0.9rem;
}
.share-card-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.share-card-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  color: var(--ink);
}
.share-card-identity {
  display: flex;
  flex-direction: column;
}
.share-card-username {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.share-card-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.dash-share-btn {
  width: 100%;
}

.dash-ranking-card {
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 0.6rem;
}
.dash-ranking-card h2 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
}
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ranking-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  font-size: 0.85rem;
}
.ranking-pos {
  color: var(--ink-dim);
  font-family: var(--font-mono);
}
.ranking-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-points {
  font-family: var(--font-mono);
  font-weight: 600;
}
.ranking-provisional-mark {
  width: 15px;
  height: 15px;
  font-size: 0.6rem;
  margin-left: 0.25rem;
  vertical-align: middle;
}
.ranking-row.ranking-you {
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid var(--teal-dim);
}

.mode-reminder {
  max-width: 420px;
  margin: 2rem auto;
  text-align: center;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--teal-dim);
  border-radius: 12px;
  padding: 1.6rem 1.4rem;
  animation: board-fade-in 0.3s ease-out;
}
.mode-reminder-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}
.mode-reminder h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
}
.mode-reminder p {
  font-size: 0.9rem;
  color: var(--ink-dim);
  margin: 0 0 1.2rem;
}
.mode-reminder-hide-note {
  font-size: 0.72rem !important;
  color: var(--ink-dim);
  margin: 0.8rem 0 0 !important;
}
.mode-reminder-hide-note a {
  color: var(--teal);
}
.daily-header {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.2rem 0;
}
.daily-mode-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.daily-mode-icon {
  font-size: 1.5rem;
}
.daily-mode-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--teal);
}
.daily-meta {
  display: flex;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-dim);
}
.daily-time-urgent {
  color: var(--red);
  font-weight: 700;
  animation: daily-time-blink 1s ease-in-out infinite;
}
@keyframes daily-time-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.wod-screen {
  max-width: 480px;
  margin: 2.5rem auto;
  text-align: center;
}
.wod-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.8rem 0 0.6rem;
}
.duration-picker {
  max-width: 420px;
  margin: 2.5rem auto;
  text-align: center;
  padding: 0 1rem;
}
.duration-picker-eyebrow {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--pink);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.duration-picker-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  margin: 0 0 1.8rem;
}
.duration-options {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.duration-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.duration-btn:hover:not(:disabled) {
  border-color: var(--teal);
  transform: translateY(-1px);
}
.duration-btn-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-bottom: 0.1rem;
}
.duration-btn-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
}
.duration-btn-sub {
  font-size: 0.72rem;
  color: var(--ink-dim);
}
.duration-btn-powerup {
  background: linear-gradient(135deg, rgba(255, 90, 60, 0.18) 0%, rgba(45, 212, 191, 0.1) 100%);
  border: 2px solid var(--coral);
  position: relative;
  overflow: hidden;
}
.duration-btn-powerup .duration-btn-label {
  color: var(--coral);
  font-weight: 700;
}
.duration-btn-powerup:hover:not(.duration-btn-locked) {
  border-color: var(--coral);
  box-shadow: 0 0 20px rgba(255, 90, 60, 0.3);
}
.duration-btn-powerup.duration-btn-locked {
  opacity: 0.85;
}
.duration-btn-powerup.duration-btn-locked .duration-btn-sub {
  color: var(--coral);
  font-weight: 600;
}
.duration-btn-locked {
  opacity: 0.6;
  cursor: pointer;
}
.duration-btn-locked .duration-btn-label,
.duration-btn-locked .duration-btn-sub {
  color: var(--ink-dim);
}
.duration-lock {
  position: absolute;
  left: 1.2rem;
  font-size: 1rem;
}
.duration-btn-locked .duration-btn-label {
  margin-left: 1.6rem;
}
.mode-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
.mode-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.mode-choice-btn:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
}
.mode-choice-icon {
  font-size: 1.6rem;
}
.mode-choice-label {
  font-size: 0.82rem;
  color: var(--ink);
  text-align: center;
}
.focus-back-btn {
  display: block;
  margin: 1.2rem auto 0;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}
.wod-personalized-note {
  font-size: 0.8rem;
  color: var(--teal);
  text-align: center;
  max-width: 420px;
  margin: 0 auto 1.2rem;
  line-height: 1.4;
}
.wod-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
  text-align: left;
}
.wod-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  position: relative;
}
.wod-item-label {
  flex: 1;
  font-size: 0.92rem;
}
.wod-info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim);
  font-size: 0.78rem;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}
.wod-info-btn:hover { border-color: var(--teal-dim); color: var(--teal); }
.wod-item-info {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-dim);
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  z-index: 5;
}
.wod-start-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
}

.countdown-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  background: var(--bg);
}
.countdown-ring-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.25) 0%, rgba(45, 212, 191, 0) 70%);
  border-radius: 50%;
  animation: countdown-glow-kf 0.55s ease-out infinite;
}
@keyframes countdown-glow-kf {
  0% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.05); }
  100% { opacity: 0.4; transform: scale(0.85); }
}
.countdown-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.countdown-ring-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 5;
}
.countdown-ring-progress {
  fill: none;
  stroke: var(--teal);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.7));
}
.countdown-ring-progress.countdown-ring-animate {
  animation: countdown-ring-drain 0.55s linear forwards;
}
@keyframes countdown-ring-drain {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 327; }
}
.countdown-num {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4rem;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(45, 212, 191, 0.5);
}
@keyframes countdown-pulse-kf {
  0% { transform: scale(0.6); opacity: 0; }
  40% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.countdown-pulse {
  animation: countdown-pulse-kf 0.4s ease-out;
}
@media (max-width: 640px) {
  .countdown-ring-wrap {
    width: 140px;
    height: 140px;
  }
  .countdown-num {
    font-size: 3.2rem;
  }
}
.promo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 45;
  background: rgba(4, 5, 7, 0.7);
  animation: board-fade-in 0.2s ease-out;
}
.promo-picker {
  background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--teal-dim);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
}
.promo-picker-title {
  font-size: 0.9rem;
  margin: 0 0 0.8rem;
  color: var(--ink-dim);
}
.promo-picker-options {
  display: flex;
  gap: 0.6rem;
}
.promo-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: var(--panel-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  color: var(--ink);
}
.promo-picker-btn:hover {
  border-color: var(--teal-dim);
  transform: translateY(-1px);
}
.promo-picker-icon {
  font-size: 1.8rem;
}
.promo-picker-label {
  font-size: 0.68rem;
  color: var(--ink-dim);
}

.board-dimmed {
  filter: brightness(0.35) blur(1px);
  transition: filter 0.25s ease;
  pointer-events: none;
}
.continue-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  z-index: 40;
  animation: board-fade-in 0.25s ease-out;
  transition: all 0.25s ease;
}
.continue-overlay-below {
  position: static;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  animation: board-fade-in 0.25s ease-out;
}
.continue-btn-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.continue-solution-btn {
  padding: 0.9rem 1.4rem;
}
.continue-btn {
  padding: 0.9rem 1.8rem;
  font-size: 1rem;
}
.continue-countdown {
  font-size: 0.75rem;
  color: var(--ink-dim);
  font-family: var(--font-mono);
}
@keyframes pr-banner-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pr-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 90, 60, 0); }
  50% { box-shadow: 0 0 24px rgba(255, 90, 60, 0.35); }
}
@keyframes reveal-title-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-fire-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 90, 60, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 90, 60, 0.6)); }
}

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 80;
}
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  border-radius: 10px;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(540deg); opacity: 0; }
}
.mini-ranking-panel {
  display: none;
}
.mini-ranking-panel h2 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
}
@media (min-width: 1150px) {
  .mini-ranking-panel {
    display: block;
    position: fixed;
    right: 2rem;
    top: 130px;
    width: 220px;
    background: var(--panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.1rem 1.1rem 0.6rem;
  }
}

/* =====================================================================
   Panel con vida: WOD de hoy, semana, insignias, clasificación, método
   ===================================================================== */
.dash-reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: dash-reveal-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes dash-reveal-in {
  to { opacity: 1; transform: none; }
}
.flame-on {
  display: inline-block;
  transform-origin: 50% 90%;
  animation: flame-flicker 1.6s ease-in-out infinite;
}
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.12) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-reveal { opacity: 1; transform: none; animation: none; }
  .flame-on, .wod-hero-cta-pulse, .week-bar { animation: none; }
}

/* --- Tarjeta del WOD de hoy --- */
.wod-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 1.5rem 1.6rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.16) 0%, rgba(255, 90, 60, 0.09) 100%), var(--panel);
  box-shadow: var(--shadow-card);
}
.wod-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.28), transparent 70%);
  pointer-events: none;
}
.wod-hero-text { position: relative; z-index: 1; flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 0.3rem; }
.wod-hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.14em; font-weight: 700; color: var(--teal); }
.wod-hero-name { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; margin: 0; }
.wod-hero-tagline { margin: 0; color: var(--ink-dim); font-size: 0.9rem; max-width: 46ch; }
.wod-hero-status { margin-top: 0.3rem; font-size: 0.78rem; color: var(--ink-dim); }
.wod-hero-status-done { color: var(--teal); }
.wod-hero-cta { position: relative; z-index: 1; padding: 0.85rem 1.5rem; font-size: 1rem; }
.wod-hero-cta-pulse { animation: cta-pulse 2.2s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(45, 212, 191, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.14), 0 4px 22px rgba(45, 212, 191, 0.45); }
}

/* --- Cabecera del WOD en el selector de tiempo --- */
.wod-today {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-tint-teal);
}
.wod-today-eyebrow { font-size: 0.68rem; letter-spacing: 0.14em; font-weight: 700; color: var(--teal); }
.wod-today-name { font-family: var(--font-display); font-size: 1.5rem; }
.wod-today-tagline { font-size: 0.82rem; color: var(--ink-dim); text-align: center; }
.wod-today-focus { margin-top: 0.2rem; font-size: 0.72rem; font-weight: 600; color: var(--coral); }

/* --- Tu semana --- */
.week-bars { display: flex; gap: 0.5rem; align-items: flex-end; height: 100px; margin: 0.4rem 0 0.6rem; }
.week-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.week-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.week-bar {
  width: 70%;
  max-width: 34px;
  height: var(--h);
  min-height: 5px;
  border-radius: 6px 6px 3px 3px;
  background: var(--line);
  transform-origin: bottom;
  animation: bar-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.week-bar-on { background: linear-gradient(180deg, var(--teal), var(--teal-dim)); }
.week-col-today .week-bar-on { background: linear-gradient(180deg, var(--coral), var(--coral-dim)); }
.week-letter { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-dim); }
.week-col-today .week-letter { color: var(--ink); font-weight: 700; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.week-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 0.8rem; }
.week-stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.6rem 0.3rem; border-radius: 10px; background: var(--panel-tint-teal); }
.week-stat-value { font-family: var(--font-display); font-size: 1.35rem; }
.week-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); }
.week-up { color: var(--green); }
.week-down { color: var(--red); }
.week-compare { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--ink-dim); text-align: center; }
@media (max-width: 520px) { .week-stats { grid-template-columns: repeat(2, 1fr); } }

/* --- Insignias --- */
.badge-count { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 0.6rem; }
.badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.8rem 0.4rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  opacity: 0.6;
  filter: grayscale(0.5);
  transition: transform 0.15s ease;
}
.badge-tile-on {
  opacity: 1;
  filter: none;
  border-color: var(--teal);
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.18), var(--panel));
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.12);
}
.badge-tile-on:hover { transform: translateY(-2px) scale(1.03); }
.badge-tile-icon { font-size: 1.7rem; line-height: 1; }
.badge-tile-name { font-size: 0.7rem; font-weight: 600; line-height: 1.2; }
.badge-tile-progress { width: 80%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.badge-tile-progress span { display: block; height: 100%; background: var(--teal); }

/* --- Clasificación / ranking en el panel --- */
.rk-card-head { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.5rem; }
.rk-card-head h2 { margin: 0; }
.rk-card-sub { font-size: 0.72rem; color: var(--ink-dim); }
.ranking-gap { text-align: center; line-height: 1; letter-spacing: 0.2em; color: var(--ink-dim); padding: 0.1rem 0; }
.rk-link-btn {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.5rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: none;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rk-link-btn:hover { background: var(--panel-tint-teal); border-color: var(--teal); }
.daily-card { border-color: rgba(255, 90, 60, 0.45); }

/* --- Página de ranking --- */
.rk-page { max-width: 880px; margin: 2rem auto; padding: 0 1rem; }
.rk-page h1 { font-family: var(--font-display); }
.rk-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.4rem; }
.rk-tab { padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-dim); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.rk-tab.active { background: var(--teal); border-color: var(--teal); color: #14201e; }
.rk-tab-sub { margin: 0.2rem 0 1rem; font-size: 0.8rem; color: var(--ink-dim); }
.rk-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-card); }
.rk-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.88rem; }
.rk-table th { padding: 0.7rem 0.8rem; text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.rk-table td { padding: 0.65rem 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rk-table tr:last-child td { border-bottom: none; }
.rk-you td { background: rgba(45, 212, 191, 0.13); }
.rk-pos { width: 2.4rem; font-family: var(--font-mono); }
.rk-strong { font-family: var(--font-mono); font-weight: 700; }
.rk-foot { margin: 0.8rem 0.2rem; font-size: 0.76rem; color: var(--ink-dim); }
.rk-wod-banner { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.9rem; padding: 0.9rem 1.1rem; border: 1px solid var(--coral); border-radius: 12px; background: rgba(255, 90, 60, 0.1); }
.rk-wod-banner span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; color: var(--coral); }
.rk-wod-banner strong { font-family: var(--font-display); font-size: 1.3rem; }
.rk-wod-banner em { font-style: normal; font-size: 0.8rem; color: var(--ink-dim); }

/* --- El método ChessVan --- */
.method-teaser {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  text-align: left;
  color: var(--ink);
  border: 1px dashed var(--teal);
  border-radius: 12px;
  background: var(--panel-tint-teal);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.method-teaser:hover { transform: translateY(-2px); background: rgba(45, 212, 191, 0.18); }
.method-teaser-icon { font-size: 1.8rem; }
.method-teaser-text { display: flex; flex-direction: column; gap: 0.15rem; }
.method-teaser-text span { font-size: 0.8rem; color: var(--ink-dim); }
.method-page { max-width: 940px; margin: 2rem auto; padding: 0 1rem 3rem; }
.method-hero { text-align: center; padding: 2.2rem 1rem 1.6rem; }
.method-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; color: var(--teal); }
.method-hero h1 { margin: 0.3rem 0 0.8rem; font-family: var(--font-display); font-size: 2.6rem; }
.method-hero p { max-width: 60ch; margin: 0 auto; line-height: 1.6; color: var(--ink-dim); }
.method-section { margin-top: 2.6rem; }
.method-section h2 { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.5rem; }
.method-lead { margin: -0.4rem 0 1.2rem; color: var(--ink-dim); }
.method-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.method-principle { padding: 1.4rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); }
.method-principle-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 0.6rem; border-radius: 50%; background: var(--teal); color: #14201e; font-weight: 800; }
.method-principle h3 { margin: 0 0 0.4rem; font-family: var(--font-display); }
.method-principle p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-dim); }
.pillar-card { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); transition: transform 0.15s ease, border-color 0.15s ease; }
.pillar-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.pillar-card-soon { border-style: dashed; opacity: 0.8; }
.pillar-head { display: flex; align-items: center; gap: 0.8rem; }
.pillar-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--panel-tint-teal); font-size: 1.8rem; }
.pillar-title { flex: 1; display: flex; flex-direction: column; }
.pillar-title h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; }
.pillar-skill { font-size: 0.74rem; font-weight: 600; color: var(--teal); }
.pillar-tag { padding: 0.2rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-dim); }
.pillar-tag-pro { background: var(--amber); border-color: var(--amber); color: #1c1611; }
.pillar-label { display: block; margin-bottom: 0.15rem; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
.pillar-block p { margin: 0; font-size: 0.84rem; line-height: 1.5; }
.day-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0.6rem; }
.flow-step { flex: 1 1 170px; max-width: 210px; display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.flow-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: #14201e; font-size: 0.8rem; font-weight: 800; }
.flow-step strong { font-family: var(--font-display); }
.flow-step span:last-child { font-size: 0.78rem; line-height: 1.4; color: var(--ink-dim); }
.flow-arrow { align-self: center; font-size: 1.3rem; color: var(--teal); }
@media (max-width: 760px) { .flow-arrow { display: none; } .flow-step { max-width: none; } }
.fair-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.fair-box { padding: 1.2rem; border-left: 4px solid var(--teal); border-radius: 0 12px 12px 0; background: var(--panel); box-shadow: var(--shadow-card); }
.fair-box h3 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1rem; }
.fair-box p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink-dim); }
.powerup-box { padding: 2rem 1.2rem; text-align: center; border: 2px solid var(--coral); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 90, 60, 0.16), rgba(45, 212, 191, 0.08)); }
.powerup-box .method-eyebrow { color: var(--coral); }
.powerup-box h2 { margin: 0.2rem 0 0.6rem; }
.powerup-box p { max-width: 56ch; margin: 0 auto; line-height: 1.55; color: var(--ink-dim); }
.powerup-stages { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.2rem; }
.powerup-stage { flex: 1 1 170px; max-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1rem; border: 1px solid var(--coral); border-radius: 12px; background: var(--panel); }
.powerup-stage span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: #14201e; font-size: 0.8rem; font-weight: 800; }
.powerup-stage strong { font-family: var(--font-display); }
.powerup-stage em { font-style: normal; font-size: 0.76rem; color: var(--ink-dim); }
.method-cta { margin-top: 3rem; text-align: center; }
.method-cta h2 { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.6rem; }

/* Retoques: POWER UP! legible aunque esté bloqueado, y candado dentro del botón de enfoque */
.duration-btn-powerup { gap: 0.6rem; }
.duration-btn-powerup .duration-btn-label,
.duration-btn-powerup.duration-btn-locked .duration-btn-label { color: var(--coral); white-space: nowrap; font-size: 1.25rem; }
.duration-btn-powerup .duration-btn-sub { max-width: 55%; text-align: right; line-height: 1.25; }

/* =====================================================================
   Resultado del WOD: panel ancho en escritorio, vertical en móvil
   ===================================================================== */
.res-screen { max-width: 1040px; margin: 1.6rem auto; padding: 0 1.2rem 2rem; }
.res-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.1rem; }
.res-head-text { display: flex; flex-direction: column; gap: 0.15rem; }
.res-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--teal); }
.res-title { margin: 0; font-family: var(--font-display); font-size: 2.1rem; line-height: 1.1; }
.res-sub { font-size: 0.85rem; color: var(--ink-dim); }
.res-cta-bottom { display: none; width: 100%; margin-top: 1.4rem; padding: 0.9rem; font-size: 1rem; }
.res-stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 0.8rem; }
.res-stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); }
.res-stat-main { border-color: rgba(45, 212, 191, 0.55); background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(255, 90, 60, 0.08)), var(--panel); }
.res-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
.res-value { font-family: var(--font-display); font-size: 2.3rem; line-height: 1.05; }
.res-stat-main .res-value { font-size: 3.5rem; color: var(--teal); }
.res-gold { color: var(--amber); }
.res-sub-line { font-size: 0.76rem; color: var(--ink-dim); line-height: 1.35; }
.res-delta { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; }
.res-good { color: var(--green); }
.res-bad { color: var(--red); }
.res-chip { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.res-chip-record { background: rgba(255, 90, 60, 0.18); border: 1px solid var(--coral); color: var(--coral); }
.res-modes-title { margin: 1.5rem 0 0.7rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); }
.res-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.res-mode { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.res-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.res-mode-name { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.9rem; }
.res-mode-icon { font-size: 1.15rem; }
.res-dots { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.res-dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font-size: 0.72rem; font-weight: 800; cursor: default; }
.res-dot-ok { background: rgba(45, 212, 191, 0.22); color: var(--teal); }
.res-dot-wrong { background: rgba(255, 90, 60, 0.22); color: var(--coral); }
.res-mode-sub { font-size: 0.72rem; color: var(--ink-dim); }
@media (max-width: 860px) {
  .res-stats { grid-template-columns: 1fr 1fr; }
  .res-stat-main, .res-stats .res-stat:last-child { grid-column: 1 / -1; }
  .res-modes { grid-template-columns: 1fr 1fr; }
  .res-cta-top { display: none; }
  .res-cta-bottom { display: block; }
  .res-title { font-size: 1.7rem; }
}
@media (max-width: 520px) {
  .res-modes { grid-template-columns: 1fr; }
  .res-value { font-size: 2rem; }
  .res-stat-main .res-value { font-size: 3rem; }
}

/* =====================================================================
   Pop-ups de logros (insignias y récords): saltan uno a uno
   ===================================================================== */
.toast-stack { position: fixed; top: 82px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: min(92vw, 430px); pointer-events: none; }
.toast {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.95rem 1.2rem;
  border: 2px solid var(--teal);
  border-radius: 16px;
  background: linear-gradient(135deg, #1d3a37 0%, #2a393b 100%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 30px rgba(45, 212, 191, 0.35);
  cursor: pointer;
  pointer-events: auto;
  animation: toast-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
}
.toast::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-18deg); animation: toast-shine 1.3s ease-out 0.5s both; pointer-events: none; }
.toast-icon { font-size: 2.6rem; line-height: 1; animation: toast-pop 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.6) 0.2s both; }
.toast-text { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; }
.toast-eyebrow { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; color: var(--teal); }
.toast-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.toast-desc { font-size: 0.78rem; color: var(--ink-dim); }
.toast-count { align-self: flex-start; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-dim); }
.toast-out { animation: toast-out 0.38s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-36px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-24px) scale(0.92); } }
@keyframes toast-pop { 0% { transform: scale(0) rotate(-25deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes toast-shine { from { left: -60%; } to { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast-icon, .toast::after { animation: none; } }

/* --- Foco de hoy (personal) --- */
.wod-hero-focus { margin: 0.45rem 0 0; font-size: 0.84rem; font-weight: 600; color: var(--teal); max-width: 52ch; }
.wod-today-focus { margin-top: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--teal); text-align: center; }

/* --- Enlace "Método" en la barra superior --- */
.topnav-link { padding: 0.45rem 0.7rem; border: none; border-radius: 8px; background: none; color: var(--ink-dim); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.topnav-link:hover { color: var(--ink); background: var(--panel-tint-teal); }
@media (max-width: 860px) { .topnav-link { display: none; } }

/* --- Guía de inicio superpuesta (primera visita) --- */
@keyframes guide-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes guide-out { to { opacity: 0; } }
@keyframes guide-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Aperturas: introducción, progreso, comentarios --- */
.opening-import-hint { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--ink-dim); }
.op-intro { text-align: left; }
.op-intro .res-title { margin: 0.1rem 0 0.4rem; }
.op-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 1rem 0; }
@media (max-width: 600px) { .op-stats { grid-template-columns: 1fr; } }
.op-intro-text { margin: 1rem 0 0.6rem; color: var(--ink-dim); text-align: center; }
.op-count-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.8rem; }
.op-progress { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin: 0.2rem 0 0.8rem; }
.op-dot { width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.op-dot-ok { background: var(--teal); }
.op-dot-wrong { background: var(--coral); }
.op-dot-now { background: var(--ink-dim); }
.op-progress-final { margin-bottom: 1rem; }
.op-comment { min-height: 1.2rem; max-width: 56ch; margin: 0.2rem auto 0.8rem; font-size: 0.86rem; font-style: italic; color: var(--ink-dim); }
.opening-train-done .res-eyebrow { display: block; }

/* Entrenamiento de aperturas: tablero a la izquierda, controles a la derecha */
.opening-train-screen.op-train-layout { max-width: 1000px; display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: 1.8rem; align-items: start; margin: 1.4rem auto; text-align: left; }
.op-train-layout .board-mount { width: min(560px, 74vh, 56vw); height: min(560px, 74vh, 56vw); margin: 0; }
.op-train-side { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.3rem; }
.op-train-layout .opening-train-meta { margin-bottom: 0; }
.op-train-layout .op-progress { justify-content: flex-start; margin: 0; }
.op-train-layout .opening-train-feedback { min-height: 1.4rem; margin: 0.4rem 0 0; font-size: 1.05rem; color: var(--ink); }
.op-train-layout .opening-train-feedback-ok { color: var(--green); }
.op-train-layout .opening-train-feedback-wrong { color: var(--red); }
.op-train-layout .op-comment { margin: 0; text-align: left; max-width: none; }
.op-train-layout #opening-train-next { align-self: flex-start; }
@media (max-width: 860px) {
  .opening-train-screen.op-train-layout { grid-template-columns: 1fr; gap: 1rem; }
  .op-train-layout .board-mount { margin: 0 auto; width: min(560px, 84vw); height: min(560px, 84vw); }
}

/* =====================================================================
   Aperturas: panel, detalle de repertorio, página para free y tarjeta
   ===================================================================== */
.topnav-pro-tag { margin-left: 0.25rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--amber); color: #1c1611; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; vertical-align: middle; }
.oh-page { max-width: 1100px; margin: 1.6rem auto; padding: 0 1.2rem 3rem; }
.oh-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.1rem; }
.oh-title { margin: 0.1rem 0 0; font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.oh-train-all { padding: 0.8rem 1.4rem; font-size: 1rem; }
.oh-list { display: flex; flex-direction: column; gap: 0.8rem; }
.oh-card { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); }
.oh-card-meta { font-size: 0.78rem; color: var(--ink-dim); }
.oh-chip { padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.68rem; font-weight: 700; }
.oh-chip-white { background: #ffffff; border-color: #ffffff; color: #1a2224; }
.oh-chip-black { background: #1a2224; border-color: #1a2224; color: #ffffff; }
.oh-chip-general { background: var(--panel-tint-teal); border-color: var(--teal); color: var(--teal); }
.oh-new { margin-top: 1.2rem; }
.oh-new summary { cursor: pointer; font-weight: 700; color: var(--teal); }
.oh-new[open] summary { margin-bottom: 0.8rem; }
.oh-inline-input { padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 0.9rem; }
.oh-inline-input { width: min(100%, 360px); font-family: inherit; font-weight: 600; }
.oh-icon-btn { border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--ink-dim); font-size: 0.9rem; padding: 0.25rem 0.5rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.oh-icon-btn:hover { color: var(--ink); border-color: var(--teal); }
.oh-icon-btn.oh-danger:hover { border-color: var(--red); color: var(--red); }
.oh-chapter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.oh-chapter-name { font-weight: 600; overflow-wrap: anywhere; }
.oh-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.oh-danger-btn { color: #ff8a73; border: 1px solid #ff6b57; background: rgba(255, 90, 60, 0.14); font-weight: 700; }
.oh-danger-btn:hover { background: #ff5a3c; border-color: #ff5a3c; color: #1d0e0a; }
.oh-empty { text-align: center; padding: 2rem 0 1rem; }
.oh-empty-icon { font-size: 3rem; }
.oh-empty h1 { margin: 0.4rem 0 0.8rem; font-family: var(--font-display); }
.oh-empty > p { max-width: 58ch; margin: 0 auto 1.4rem; line-height: 1.6; color: var(--ink-dim); }
.oh-empty-form { text-align: left; }
.op-card { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.op-card-icon { font-size: 2.2rem; }
.op-card-body { flex: 1; min-width: 220px; }
.op-card-body .dash-pr-title { margin: 0 0 0.3rem; }
.op-card-body p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink-dim); }
.op-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 640px) {
  .oh-chapter { flex-direction: column; align-items: stretch; }
  .oh-title { font-size: 1.6rem; }
}

.oh-warn { display: block; margin: 0.35rem 0 0; font-size: 0.74rem; line-height: 1.4; color: var(--amber); }

/* =====================================================================
   Tablero de apertura (constructor) y variantes
   ===================================================================== */
.ab-page { max-width: 1100px; margin: 1.4rem auto; padding: 0 1.2rem 3rem; }
.ab-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.ab-save { font-family: var(--font-mono); font-size: 0.78rem; color: var(--green); }
.ab-save-wait { color: var(--ink-dim); }
.ab-save-error { color: var(--red); font-weight: 700; }
.ab-layout { display: grid; grid-template-columns: minmax(0, 580px) 1fr; gap: 1.6rem; align-items: start; }
.ab-board-col { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.ab-board-col .board-mount { margin: 0; }
.ab-board-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.ab-side { display: flex; flex-direction: column; gap: 1rem; }
.ab-hint { padding: 0.9rem 1.1rem; border: 1px solid var(--teal); border-radius: 12px; background: var(--panel-tint-teal); font-size: 0.9rem; line-height: 1.5; }
.ab-section h4 { margin: 0 0 0.45rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
.ab-mv { padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-family: var(--font-mono); font-size: 0.82rem; cursor: pointer; }
.ab-mv:hover { border-color: var(--teal); }
.ab-mv-user { border-color: var(--teal); color: var(--teal); font-weight: 700; }
.ab-mv-now { background: var(--teal); border-color: var(--teal); color: #14201e; }
.ab-empty { font-size: 0.8rem; color: var(--ink-dim); }
.ab-rule { padding: 0.8rem 1rem; border-left: 4px solid var(--amber); border-radius: 0 10px 10px 0; background: var(--panel); font-size: 0.82rem; line-height: 1.5; color: var(--ink-dim); }
@media (max-width: 900px) { .ab-layout { grid-template-columns: 1fr; } }

/* Selector de coronación: botón de cancelar y ajuste a pantallas pequeñas */
.promo-cancel { margin-top: 0.8rem; border: none; background: none; color: var(--ink-dim); font-size: 0.8rem; text-decoration: underline; cursor: pointer; }
.promo-cancel:hover { color: var(--ink); }
@media (max-width: 420px) {
  .promo-picker { padding: 0.8rem; }
  .promo-picker-options { gap: 0.35rem; }
  .promo-picker-btn { padding: 0.5rem 0.5rem; }
  .promo-picker-icon { font-size: 1.5rem; }
}

/* --- Pantalla PRO: precio mensual en grande y tabla agrupada --- */
.pro-plan-price-big { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; }
.pro-plan-price-big small { margin-left: 0.15rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--ink-dim); }
.pro-plan-price-was { font-size: 0.85rem; color: var(--ink-dim); text-decoration: line-through; }
.pro-compare-section th { padding: 1.3rem 0 0.4rem; text-align: left; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); border-bottom: 1px solid var(--line); }
.pro-compare td small { display: block; margin-top: 0.1rem; font-size: 0.72rem; font-weight: 400; color: var(--ink-dim); }
.pro-yes { color: var(--teal); font-weight: 800; }
.pro-no { color: var(--ink-dim); }

/* =====================================================================
   POWER UP!: aviso "FASE COMPLETADA" y botón de siguiente fase
   ===================================================================== */
.phase-banner { position: fixed; inset: 0; z-index: 98; display: flex; align-items: center; justify-content: center; cursor: pointer; background: radial-gradient(ellipse at center, rgba(255, 50, 50, 0.5) 0%, rgba(150, 10, 10, 0.68) 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: phase-flash 0.45s ease-out both; }
.phase-banner-out { animation: phase-out 0.6s ease-in forwards; }
.phase-banner-inner { text-align: center; padding: 0 1rem; animation: phase-slam 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) both; }
.phase-banner-sub { display: block; margin-bottom: 0.4rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.5em; color: #fff; opacity: 0.92; }
.phase-banner-title { display: block; font-family: var(--font-display); font-size: clamp(2.3rem, 9vw, 6rem); font-weight: 800; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 28px rgba(255, 255, 255, 0.6), 0 0 80px rgba(255, 70, 70, 0.95); animation: phase-glow 0.9s ease-in-out 0.7s infinite alternate; }
@keyframes phase-flash { from { opacity: 0; } to { opacity: 1; } }
@keyframes phase-out { to { opacity: 0; transform: scale(1.04); } }
@keyframes phase-slam { 0% { transform: scale(2.6); opacity: 0; letter-spacing: 0.4em; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes phase-glow { from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 50px rgba(255, 70, 70, 0.7); } to { text-shadow: 0 0 34px rgba(255, 255, 255, 0.9), 0 0 110px rgba(255, 70, 70, 1); } }
.res-delayed .dash-reveal { animation-delay: calc(2.2s + var(--i, 0) * 70ms); }
.phase-track { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.phase-chip { padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-dim); }
.phase-chip-done { background: var(--teal); border-color: var(--teal); color: #14201e; }
.phase-chip-next { border-color: var(--coral); color: var(--coral); animation: chip-pulse 1.6s ease-in-out infinite; }
.phase-chip-soon { border-style: dashed; opacity: 0.55; }
@keyframes chip-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(255, 90, 60, 0); } }
.phase-next { margin: 1.3rem 0 0.2rem; }
.phase-cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; width: 100%; padding: 1.2rem 1rem; border: none; border-radius: 16px; overflow: hidden; cursor: pointer; color: #14201e; background: linear-gradient(135deg, var(--teal) 0%, #7af0de 55%, var(--amber) 130%); box-shadow: 0 10px 34px rgba(45, 212, 191, 0.35); animation: phase-cta-pulse 1.8s ease-in-out infinite; transition: transform 0.12s ease; }
.phase-cta::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg); animation: toast-shine 2.4s ease-in-out 1s infinite; pointer-events: none; }
.phase-cta:hover { transform: translateY(-2px) scale(1.01); }
.phase-cta-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3em; opacity: 0.75; }
.phase-cta-main { font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: 0.04em; }
.phase-cta-sub { font-size: 0.82rem; font-weight: 700; opacity: 0.8; }
@keyframes phase-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.55), 0 10px 34px rgba(45, 212, 191, 0.3); } 50% { box-shadow: 0 0 0 12px rgba(45, 212, 191, 0), 0 12px 46px rgba(45, 212, 191, 0.55); } }
@media (prefers-reduced-motion: reduce) { .phase-banner, .phase-banner-inner, .phase-banner-title, .phase-cta, .phase-cta::after, .phase-chip-next { animation: none; } }

/* --- POWER UP! a medias: aviso y botón para continuar la fase 2 --- */
.powerup-resume { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; max-width: 1040px; margin: 0.9rem auto 0; padding: 0.9rem 1.2rem; border: 2px solid var(--coral); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 90, 60, 0.22), rgba(255, 90, 60, 0.06)); }
.powerup-resume-icon { font-size: 1.8rem; }
.powerup-resume-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 0.1rem; }
.powerup-resume-text span { font-size: 0.82rem; color: var(--ink-dim); }
.powerup-resume-big { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; width: 100%; margin-bottom: 1.2rem; padding: 1rem; border: 2px solid var(--coral); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 90, 60, 0.25), rgba(255, 90, 60, 0.08)); color: var(--ink); cursor: pointer; animation: chip-pulse 1.8s ease-in-out infinite; }
.powerup-resume-big-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; color: var(--coral); }
.powerup-resume-big-main { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.powerup-resume-big-sub { font-size: 0.78rem; color: var(--ink-dim); }

/* --- Capítulos de una apertura (solo organización) --- */
.oh-hint { margin: -0.3rem 0 1rem; font-size: 0.82rem; color: var(--ink-dim); }
.oh-chapter-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }

/* --- Peón decorativo: un resplandor turquesa para que no se pierda en el fondo oscuro --- */
.oh-empty-icon, .op-card-icon, .pawn-glow {
  display: inline-block;
  filter: drop-shadow(0 0 3px rgba(45, 212, 191, 0.95)) drop-shadow(0 0 10px rgba(45, 212, 191, 0.6)) drop-shadow(0 0 22px rgba(45, 212, 191, 0.35));
  animation: pawn-breathe 3.4s ease-in-out infinite;
}
@keyframes pawn-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(45, 212, 191, 0.95)) drop-shadow(0 0 10px rgba(45, 212, 191, 0.55)) drop-shadow(0 0 22px rgba(45, 212, 191, 0.3)); }
  50% { filter: drop-shadow(0 0 4px rgba(45, 212, 191, 1)) drop-shadow(0 0 14px rgba(45, 212, 191, 0.8)) drop-shadow(0 0 30px rgba(45, 212, 191, 0.5)); }
}
@media (prefers-reduced-motion: reduce) { .oh-empty-icon, .op-card-icon, .pawn-glow { animation: none; } }

/* =====================================================================
   Ejercicios en escritorio: tres columnas (sesión · tablero · modo).
   En móvil y tablet los laterales no existen y todo queda como antes.
   ===================================================================== */
.daily-side, .daily-strip { display: none; }
/* side (paneles a los lados), strip (franja encima) o none (móvil/tablet): lo decide fitStage midiendo el ejercicio real. */
.daily-stage[data-layout="side"] { display: grid; grid-template-columns: minmax(0, 1fr) var(--center-w, max-content) minmax(0, 1fr); gap: 1.8rem; align-items: start; max-width: 1700px; margin: 0 auto; padding: 0 1.4rem; }
.daily-stage[data-layout="side"] .daily-center { min-width: 0; }
.daily-stage[data-layout="side"] .daily-side { display: flex; flex-direction: column; gap: 0.9rem; width: 100%; max-width: 300px; position: sticky; top: 5.2rem; }
.daily-stage[data-layout="side"] .daily-side-left { justify-self: end; }
.daily-stage[data-layout="side"] .daily-side-right { justify-self: start; }
.daily-stage[data-layout="strip"] { padding: 0 1.4rem; }
.daily-stage[data-layout="strip"] .daily-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.4rem; max-width: 880px; margin: 0 auto 0.8rem; padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-card); }
.strip-group { display: flex; align-items: center; gap: 0.6rem; }
.strip-title { font-family: var(--font-display); font-size: 1rem; }
.strip-text { font-size: 0.78rem; color: var(--ink-dim); white-space: nowrap; }
.strip-chip { padding: 0.25rem 0.6rem; border-radius: 8px; background: var(--panel-tint-teal); font-size: 0.74rem; color: var(--ink-dim); white-space: nowrap; }
.strip-chip b { margin-left: 0.2rem; color: var(--ink); font-family: var(--font-display); font-size: 0.9rem; }
.stage-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); }
.stage-card-wod { border-color: rgba(45, 212, 191, 0.5); background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(255, 90, 60, 0.06)), var(--panel); }
.stage-eyebrow { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; color: var(--teal); }
.stage-title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; }
.stage-sub { font-size: 0.8rem; line-height: 1.45; color: var(--ink-dim); }
.stage-sub strong { color: var(--ink); }
.stage-dots { display: flex; flex-wrap: wrap; gap: 0.22rem; margin: 0.2rem 0; }
.stage-dot { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; font-size: 0.68rem; font-weight: 800; border: 1px solid var(--line); color: var(--ink-dim); }
.stage-dot-ok { background: rgba(45, 212, 191, 0.22); border-color: transparent; color: var(--teal); }
.stage-dot-bad { background: rgba(255, 90, 60, 0.22); border-color: transparent; color: var(--coral); }
.stage-dot-neutral { background: rgba(255, 255, 255, 0.08); border-color: transparent; }
.stage-dot-now { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 12px rgba(45, 212, 191, 0.6); animation: chip-pulse 1.6s ease-in-out infinite; }
.stage-dot-todo { opacity: 0.45; }
.stage-card-mode { align-items: flex-start; }
.stage-mode-icon { font-size: 2.2rem; line-height: 1; }
.stage-skill { font-size: 0.78rem; font-weight: 700; color: var(--teal); }
.stage-text { margin: 0.3rem 0; font-size: 0.84rem; line-height: 1.55; }
.stage-text-dim { margin: 0; color: var(--ink-dim); font-size: 0.8rem; }
.stage-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; margin-top: 0.4rem; }
.stage-mini { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--panel-tint-teal); }
.stage-mini span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); }
.stage-mini strong { font-family: var(--font-display); font-size: 1.3rem; }

/* La barra superior en pantallas medianas: que los botones no se partan en dos líneas */
.topnav-link, .topnav-pro-btn, .topnav-train-btn { white-space: nowrap; }
@media (max-width: 1250px) and (min-width: 861px) {
  .topnav-link { padding: 0.4rem 0.45rem; font-size: 0.78rem; }
  .topnav-pro-btn { padding: 0.5rem 0.7rem; font-size: 0.76rem; }
}

/* =====================================================================
   Estadísticas avanzadas (PRO)
   ===================================================================== */
.sp-insights { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.1rem; padding: 1rem 1.2rem; border-left: 4px solid var(--teal); border-radius: 0 12px 12px 0; background: var(--panel-tint-teal); }
.sp-insights p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.7rem; margin-bottom: 1.2rem; }
.sp-kpi { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.95rem 1.05rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-card); }
.sp-kpi-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
.sp-kpi-value { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.sp-kpi-sub { font-size: 0.74rem; line-height: 1.35; color: var(--ink-dim); }
.sp-panel { margin-bottom: 1.2rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); }
.sp-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.sp-panel-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.sp-panel-sub { font-size: 0.76rem; color: var(--ink-dim); }
.sp-sub-title { margin: 1rem 0 0.5rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
.sp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.sp-two .sp-panel { margin-bottom: 1.2rem; }
.sp-tabs { display: flex; gap: 0.3rem; }
.sp-tab { padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-dim); font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.sp-tab.active { background: var(--teal); border-color: var(--teal); color: #14201e; }
.sp-chart-wrap { position: relative; }
.sp-chart { display: block; width: 100%; height: auto; touch-action: none; }
.sp-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.sp-axis { fill: var(--ink-dim); font-size: 11px; font-family: var(--font-mono); }
.sp-line { fill: none; stroke: var(--teal); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.sp-dot { fill: var(--teal); stroke: #14201e; stroke-width: 2; }
.sp-guide { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-tooltip { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; padding: 0.3rem 0.6rem; border: 1px solid var(--teal); border-radius: 8px; background: #14201e; pointer-events: none; font-size: 0.72rem; color: var(--ink-dim); white-space: nowrap; }
.sp-tooltip strong { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.sp-chart-empty { padding: 2.2rem 1rem; text-align: center; font-size: 0.85rem; color: var(--ink-dim); }
.sp-caption { margin: 0.6rem 0 0; text-align: center; font-size: 0.82rem; color: var(--ink-dim); }
.sp-up { color: var(--green); }
.sp-down { color: var(--red); }
.sp-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.8rem; }
.sp-mode { position: relative; display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem 1.05rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.sp-mode-badge { position: absolute; top: -0.55rem; right: 0.8rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; }
.sp-mode-badge-best { background: var(--teal); color: #14201e; }
.sp-mode-badge-worst { background: var(--coral); color: #14201e; }
.sp-mode-head { display: flex; align-items: center; gap: 0.8rem; }
.sp-ring { width: 54px; height: 54px; flex-shrink: 0; }
.sp-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 6; }
.sp-ring-fg { fill: none; stroke: var(--teal); stroke-width: 6; stroke-linecap: round; }
.sp-ring-text { fill: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.sp-mode-title { display: flex; flex-direction: column; gap: 0.1rem; }
.sp-mode-title span { font-size: 0.74rem; color: var(--ink-dim); }
.sp-trend { font-size: 0.76rem; font-weight: 700; }
.sp-trend-up { color: var(--green); }
.sp-trend-down { color: var(--red); }
.sp-trend-flat { color: var(--ink-dim); font-weight: 500; }
.sp-mode-facts { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.76rem; color: var(--ink-dim); }
.sp-mode-facts b { color: var(--ink); }
.sp-heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 3px; overflow-x: auto; padding-bottom: 0.3rem; }
.sp-hm-cell { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); }
.sp-hm-blank { background: transparent; }
.sp-hm-1 { background: rgba(45, 212, 191, 0.28); }
.sp-hm-2 { background: rgba(45, 212, 191, 0.5); }
.sp-hm-3 { background: rgba(45, 212, 191, 0.75); }
.sp-hm-4 { background: var(--teal); }
.sp-hm-legend { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font-size: 0.68rem; color: var(--ink-dim); }
.sp-weeks { display: flex; align-items: flex-end; gap: 0.3rem; height: 96px; }
.sp-week { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.sp-week-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sp-week-bar { width: 70%; height: var(--h); min-height: 4px; border-radius: 4px 4px 2px 2px; background: var(--line); }
.sp-week-on { background: linear-gradient(180deg, var(--teal), var(--teal-dim)); }
.sp-week-now .sp-week-on { background: linear-gradient(180deg, var(--coral), var(--coral-dim)); }
.sp-week-label { font-family: var(--font-mono); font-size: 0.58rem; color: var(--ink-dim); }
.sp-spark { display: block; width: 100%; height: auto; margin-bottom: 0.4rem; }
.sp-spark-dot { fill: var(--teal); }
.sp-spark-facts { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--ink-dim); }
.sp-spark-facts b { color: var(--ink); }
.sp-spark-facts em { font-style: normal; font-weight: 700; }
@media (max-width: 860px) { .sp-two { grid-template-columns: 1fr; } }
.stats-preview-blur { max-height: 640px; overflow: hidden; }

/* --- Línea de solución: las jugadas hasta que la posición se aclara --- */
.sol-line { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.9rem auto 0; padding: 0.9rem 1rem; max-width: 560px; border: 1px solid var(--teal); border-radius: 12px; background: var(--panel-tint-teal); }
.sol-line-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; }
.sol-line-head span { font-size: 0.72rem; color: var(--ink-dim); }
.sol-line-wait { font-size: 0.85rem; color: var(--ink-dim); }
.sol-line-moves { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sol-mv { padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-family: var(--font-mono); font-size: 0.85rem; cursor: pointer; }
.sol-mv:hover { border-color: var(--teal); }
.sol-mv-now { background: var(--teal); border-color: var(--teal); color: #14201e; font-weight: 700; }

/* --- Pestañas de variantes en el tablero --- */
.ab-tabs-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin: -0.3rem 0 0.4rem; border-bottom: 1px solid var(--line); }
.ab-tabs { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.25rem; }
.ab-tab { padding: 0.55rem 1rem; border: 1px solid var(--line); border-bottom: none; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, 0.04); color: var(--ink-dim); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.ab-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.09); }
.ab-tab-active { position: relative; top: 1px; background: var(--bg); border-color: var(--teal); color: var(--teal); box-shadow: inset 0 3px 0 var(--teal); }
.ab-tab-add { border-style: dashed; color: var(--teal); }
.ab-tab-input { padding: 0.5rem 0.8rem; min-width: 220px; border: 1px solid var(--teal); border-radius: 10px 10px 0 0; background: var(--bg); color: var(--ink); font-size: 0.88rem; font-weight: 600; }
.ab-tab-tools { display: flex; gap: 0.4rem; padding-bottom: 0.35rem; }
.ab-tabs-hint { margin: 0.5rem 0 1rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-dim); }
/* --- Variantes en el detalle de la apertura --- */
.oh-variants { display: flex; flex-direction: column; gap: 0.6rem; }
.oh-variant { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; padding: 0.95rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.oh-variant-title { display: flex; align-items: center; gap: 0.5rem; }

/* --- Panel de jugadas del tablero de aperturas --- */
.ab-notation { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.3rem; max-height: 340px; overflow-y: auto; padding: 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.ab-nt-var { flex-basis: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.3rem; margin: 0.15rem 0 0.15rem 0.9rem; padding: 0.3rem 0 0.3rem 0.7rem; border-left: 2px solid var(--line); }
.ab-nav { min-width: 3rem; font-size: 1rem; }

/* =====================================================================
   Finales: teoría gratis (visor paso a paso) y entrenamiento PRO
   ===================================================================== */
.fl-page { max-width: 1060px; margin: 1.6rem auto; padding: 0 1.2rem 3rem; }
.fl-hero { text-align: center; padding: 1.4rem 0 1.2rem; }
.fl-hero h1 { margin: 0.3rem 0 0.7rem; font-family: var(--font-display); font-size: 2.3rem; line-height: 1.1; }
.fl-hero p { max-width: 54ch; margin: 0 auto; line-height: 1.6; color: var(--ink-dim); }
.fl-lesson { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); }
.fl-lesson-level { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.fl-train { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem; padding: 1.2rem 1.4rem; border: 1px solid var(--amber); border-radius: 14px; background: linear-gradient(135deg, rgba(242, 184, 75, 0.14), rgba(255, 255, 255, 0.03)); }
.fl-layout { display: grid; grid-template-columns: minmax(0, 580px) 1fr; gap: 1.6rem; align-items: start; }
.fl-counter { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-dim); }
.fl-comment { padding: 1.1rem 1.25rem; border: 1px solid var(--teal); border-radius: 14px; background: var(--panel-tint-teal); min-height: 150px; }
.fl-comment-move { display: inline-block; margin-bottom: 0.5rem; padding: 0.2rem 0.65rem; border-radius: 8px; background: var(--teal); color: #14201e; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; }
.fl-comment p { margin: 0; font-size: 0.98rem; line-height: 1.65; }
.fl-moves { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fl-cta { padding: 1rem 1.2rem; border: 1px solid var(--amber); border-radius: 14px; background: linear-gradient(135deg, rgba(242, 184, 75, 0.16), rgba(255, 255, 255, 0.03)); display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.fl-cta p { flex-basis: 100%; margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink-dim); }
/* entrenamiento */
.fp-intro { text-align: center; padding: 1.6rem 0; }
.fp-intro h1 { margin: 0.3rem 0 1.4rem; font-family: var(--font-display); font-size: 2.1rem; line-height: 1.15; }
.fp-intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; text-align: left; }
.fp-start { padding: 0.9rem 2rem; font-size: 1.05rem; }
.fp-run-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; }
.fp-run-dots { display: flex; gap: 0.35rem; justify-content: center; }
.fp-run-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); font-size: 0.75rem; font-weight: 800; }
.fp-run-dot.ok { background: rgba(45, 212, 191, 0.25); border-color: transparent; color: var(--teal); }
.fp-run-dot.bad { background: rgba(255, 90, 60, 0.25); border-color: transparent; color: var(--coral); }
.fp-run-dot.now { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 12px rgba(45, 212, 191, 0.6); }
.fp-summary-text { max-width: 46ch; margin: 1rem auto 1.4rem; line-height: 1.6; color: var(--ink-dim); }
.fp-summary-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.fp-content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.fp-goal { padding: 0.5rem 1rem; border: 1px solid var(--teal); border-radius: 10px; background: var(--panel-tint-teal); font-size: 0.9rem; text-align: center; }
.fp-dots { display: flex; gap: 0.35rem; }
.fp-dot { width: 22px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); transition: background 0.3s ease; }
.fp-dot-on { background: var(--teal); box-shadow: 0 0 8px rgba(45, 212, 191, 0.6); }
.fp-loading { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 4rem 0; }
.fp-spinner { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--teal); border-radius: 50%; animation: fp-spin 0.8s linear infinite; }
@keyframes fp-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .fl-layout { grid-template-columns: 1fr; } .fl-hero h1, .fp-intro h1 { font-size: 1.7rem; } }

/* El tablero del entrenamiento de finales se ajusta a la altura para que quepan los botones de debajo */
.fp-content .board-mount { width: min(520px, 54vh, 84vw); height: min(520px, 54vh, 84vw); }

/* =====================================================================
   Racha que sube (efecto de llama) y combo del puesto 1
   ===================================================================== */
.res-stat-streak-up { position: relative; overflow: hidden; border-color: var(--coral); animation: dash-reveal-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards, streak-box 1.8s ease-out 0.5s both; animation-delay: calc(var(--i, 0) * 70ms), 0.5s; } /* las DOS animaciones: antes solo estaba la de la sombra y la tarjeta se quedaba invisible (opacity 0) */
.streak-flame { display: inline-block; transform-origin: 50% 90%; }
.res-stat-streak-up .streak-flame { animation: flame-flicker 0.9s ease-in-out 0.5s infinite alternate; filter: drop-shadow(0 0 8px rgba(255, 120, 40, 0.9)); }
.streak-pop { display: inline-block; animation: streak-pop 0.7s cubic-bezier(0.2, 1.8, 0.3, 1) both; color: var(--coral); }
.streak-embers { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; }
.ember { position: absolute; bottom: -6px; left: var(--x); width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #ffd27a, #ff6a2a); opacity: 0; animation: ember-rise 1.8s ease-out var(--d) 2; }
@keyframes streak-box { 0% { box-shadow: 0 0 0 0 rgba(255, 106, 42, 0.7); } 40% { box-shadow: 0 0 28px 6px rgba(255, 106, 42, 0.55); } 100% { box-shadow: var(--shadow-card); } }
@keyframes flame-flicker { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.22) rotate(5deg); } }
@keyframes streak-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ember-rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-90px) translateX(8px) scale(0.2); opacity: 0; } }
.no1-overlay { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: radial-gradient(circle at center, rgba(242, 184, 75, 0.38), rgba(12, 14, 10, 0.9) 70%); animation: phase-flash 0.5s ease-out both; }
.no1-out { animation: phase-out 0.6s ease-in forwards; }
.no1-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg, rgba(255, 215, 0, 0.17) 0deg 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 65%); mask-image: radial-gradient(circle, #000 15%, transparent 65%); animation: no1-spin 16s linear infinite; }
.no1-card { position: relative; text-align: center; padding: 0 1.2rem; }
.no1-crown { font-size: clamp(4.5rem, 14vw, 8rem); line-height: 1; filter: drop-shadow(0 0 24px rgba(255, 200, 60, 0.95)); animation: no1-drop 0.9s cubic-bezier(0.2, 1.6, 0.3, 1) both, no1-float 2.4s ease-in-out 0.9s infinite; }
.no1-eyebrow { margin-top: 1.1rem; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.45em; color: var(--amber); animation: phase-slam 0.7s 0.3s both; }
.no1-title { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 3.6rem); font-weight: 800; color: #fff; text-shadow: 0 0 28px rgba(255, 200, 60, 0.8); animation: phase-slam 0.7s 0.45s both; }
.no1-sub { max-width: 34ch; margin: 0.7rem auto 0; font-size: 0.95rem; line-height: 1.5; color: #f6e7c2; animation: phase-flash 0.8s 0.9s both; }
@keyframes no1-spin { to { transform: rotate(360deg); } }
@keyframes no1-drop { 0% { transform: translateY(-160px) scale(0.5); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes no1-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .no1-rays, .no1-crown, .res-stat-streak-up, .res-stat-streak-up .streak-flame, .ember { animation: none; } }

/* --- Se acabó el tiempo del WOD --- */
.timeup-banner { position: fixed; inset: 0; z-index: 97; display: flex; align-items: center; justify-content: center; pointer-events: none; background: rgba(255, 90, 60, 0.2); animation: phase-flash 0.25s ease-out both, phase-out 0.4s ease-in 1.1s forwards; }
.timeup-banner span { font-family: var(--font-display); font-size: clamp(2.2rem, 8vw, 5rem); font-weight: 800; letter-spacing: 0.08em; color: #fff; text-shadow: 0 0 30px rgba(255, 90, 60, 0.95); animation: phase-slam 0.5s cubic-bezier(0.2, 1.4, 0.3, 1) both; }
.daily-timeup-note { margin: 0.6rem auto; max-width: 620px; padding: 0.6rem 1rem; border: 1px solid var(--coral); border-radius: 10px; background: rgba(255, 90, 60, 0.12); font-size: 0.85rem; text-align: center; color: var(--ink); }

/* --- Ranking general: el principal; el del día, secundario --- */
.rk-main { border: 1px solid rgba(242, 184, 75, 0.55); background: linear-gradient(160deg, rgba(242, 184, 75, 0.14), rgba(45, 212, 191, 0.05) 60%), var(--panel); box-shadow: 0 0 0 1px rgba(242, 184, 75, 0.12), var(--shadow-card); }
.rk-main-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.rk-main-eyebrow { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; color: var(--amber); }
.rk-main-head h2 { font-size: 1.3rem; margin: 0.1rem 0; }
.rk-yourpos { display: flex; flex-direction: column; align-items: center; padding: 0.4rem 0.8rem; border: 1px solid var(--amber); border-radius: 12px; background: rgba(242, 184, 75, 0.12); flex-shrink: 0; }
.rk-yourpos span { font-size: 0.52rem; font-weight: 800; letter-spacing: 0.12em; color: var(--amber); }
.rk-yourpos strong { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.ranking-pos-first { font-size: 1.05rem; }
.rk-link-main { color: var(--amber); font-weight: 700; }
.rk-secondary { opacity: 0.92; padding: 0.8rem 1rem; border-color: var(--line); }
.rk-secondary h2 { font-size: 0.95rem; }
.rk-secondary .ranking-row { font-size: 0.82rem; }

/* --- Mis aperturas: miniatura, etiquetas de variantes, filtro y dinamismo --- */
.oh-card { display: flex; gap: 1rem; align-items: stretch; position: relative; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.oh-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line); }
.oh-card:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); }
.oh-thumb { width: 118px; height: 118px; flex-shrink: 0; border-radius: 10px; overflow: hidden; align-self: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.oh-thumb .cg-wrap { width: 100%; height: 100%; }
.oh-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; }
.oh-vchips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.oh-vchip { padding: 0.15rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 0.7rem; color: var(--ink-dim); }
.oh-vchip-more { border-style: dashed; }
.oh-filter { display: flex; gap: 0.4rem; margin: 0 0 1rem; }
.oh-pill { padding: 0.35rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-dim); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; }
.oh-pill:hover { color: var(--ink); border-color: var(--teal); }
.oh-pill.active { background: var(--teal); border-color: var(--teal); color: #14201e; }
.oh-train-all { animation: chip-pulse 2.4s ease-in-out infinite; }
@media (max-width: 640px) { .oh-thumb { width: 84px; height: 84px; } .oh-card { gap: 0.7rem; } }

/* =====================================================================
   Pie de página, guía de instalación y tarjeta de instalar (móvil)
   ===================================================================== */
#app { display: flex; flex-direction: column; min-height: 100%; }
#content { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; margin-top: 3rem; padding: 2.2rem 1.5rem 1.2rem; border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); }
.site-footer:empty { display: none; }
#app:has(#daily-container) .site-footer, #app:has(#opening-train-container) .site-footer, #app:has(#powerup-container) .site-footer { display: none; }
.sf-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.sf-col h4 { margin: 0 0 0.2rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.sf-col button, .sf-col a { border: none; background: none; padding: 0; font-size: 0.85rem; color: var(--ink-dim); text-decoration: none; text-align: left; cursor: pointer; }
.sf-col button:hover, .sf-col a:hover { color: var(--ink); text-decoration: underline; }
.ig-page { max-width: 900px; margin: 1.4rem auto; padding: 0 1.2rem; }
.ig-install { margin-top: 1rem; padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.ig-done { margin-top: 1rem; display: inline-block; padding: 0.6rem 1.2rem; border: 1px solid var(--teal); border-radius: 999px; color: var(--teal); font-weight: 700; }
.ig-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.ig-steps { padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ig-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.ig-note { margin: 0 0 0.8rem; font-size: 0.85rem; color: var(--ink-dim); }
.ig-list { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.95rem; line-height: 1.55; }
.ig-icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; color: var(--teal); }
.install-card { display: flex; align-items: center; gap: 0.8rem; margin: 0.8rem 1rem 0; padding: 0.8rem 1rem; border: 1px solid var(--teal); border-radius: 14px; background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0.04)); }
.install-card-icon { font-size: 1.7rem; }
.install-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.82rem; }
.install-card-text span { color: var(--ink-dim); font-size: 0.74rem; line-height: 1.35; }
.install-card-x { border: none; background: none; color: var(--ink-dim); font-size: 1rem; cursor: pointer; padding: 0.3rem; }

.sy-later { margin-top: 0.7rem; width: 100%; }

/* --- Finales: tablero a la izquierda, objetivo/mensaje/línea de solución a la derecha --- */
.fp-layout { display: flex; align-items: flex-start; justify-content: center; gap: 2rem; width: 100%; }
.fp-board-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.fp-side { flex: 0 1 380px; min-width: 260px; display: flex; flex-direction: column; gap: 0.8rem; padding-top: 2.8rem; }
.fp-side .fp-goal { text-align: left; }
.fp-side .fp-dots { justify-content: flex-start; }
.fp-side .board-instruction { margin: 0; text-align: left; }
.fp-side .sol-line { max-width: none; margin: 0.3rem 0 0; }
@media (max-width: 900px) { .fp-layout { flex-direction: column; align-items: center; } .fp-side { flex: none; width: 100%; padding-top: 0; } }

/* --- Pie de página: logo y columnas en horizontal en pantallas grandes --- */
.site-footer { margin-top: 3.5rem; padding: 2.4rem 1.5rem 1.1rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(45, 212, 191, 0.05), rgba(0, 0, 0, 0.22)); }
.sf-inner { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(var(--sf-cols, 3), minmax(130px, 1fr)); gap: 2rem 2.5rem; max-width: 1180px; margin: 0 auto; align-items: start; }
.sf-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.sf-logo { height: 30px; width: auto; }
.sf-brand span { max-width: 26ch; font-size: 0.85rem; line-height: 1.5; color: var(--ink-dim); }
.sf-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; max-width: 1180px; margin: 1.8rem auto 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.74rem; color: var(--ink-dim); }
.sf-bottom button, .sf-bottom a { border: none; background: none; padding: 0; font-size: 0.74rem; color: var(--ink-dim); text-decoration: none; cursor: pointer; }
.sf-bottom button:hover, .sf-bottom a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 860px) {
  .sf-inner { grid-template-columns: 1fr 1fr; }
  .sf-brand { grid-column: 1 / -1; }
}

/* Panel pintado desde lo último que viste: sin animaciones de entrada */
.dash-instant .dash-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }

.fp-counter { display: inline-block; padding: 0.25rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-dim); align-self: flex-start; }

/* =====================================================================
   Finales: galería, pestañas de capítulos y variantes del visor
   ===================================================================== */
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.fg-card { position: relative; display: flex; gap: 1rem; padding: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.fg-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--teal); }
.fg-card:hover, .fg-card:focus-visible { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); outline: none; }
.fg-thumb { width: 124px; height: 124px; flex-shrink: 0; align-self: flex-start; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.fg-thumb .cg-wrap { width: 100%; height: 100%; }
.fg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fg-body h3 { margin: 0; font-size: 1.08rem; }
.fg-body p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-dim); }
.fl-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.fl-tab { padding: 0.4rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-dim); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; }
.fl-tab:hover { color: var(--ink); border-color: var(--teal); }
.fl-tab.active { background: var(--teal); border-color: var(--teal); color: #14201e; }
.fl-back { display: block; margin-bottom: 0.35rem; padding: 0; border: none; background: none; color: var(--ink-dim); font-size: 0.8rem; cursor: pointer; }
.fl-back:hover { color: var(--ink); text-decoration: underline; }
.fl-moves { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.fl-var { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.35rem 0 0.35rem 0.9rem; padding-left: 0.7rem; border-left: 2px solid var(--amber); }
.fl-var .fl-var { margin-left: 0.7rem; }
.fl-var-tag { margin-right: 0.2rem; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.fl-varnote { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--amber); border-radius: 10px; background: rgba(242, 184, 75, 0.1); font-size: 0.82rem; }
.fl-hint { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.7rem; color: var(--ink-dim); }
@media (max-width: 640px) { .fg-grid { grid-template-columns: 1fr; } .fg-thumb { width: 88px; height: 88px; } .fl-varnote { flex-direction: column; align-items: flex-start; } }

.fg-grid-all { margin-top: 1.2rem; }

.fl-moves { max-height: 340px; overflow-y: auto; padding-right: 0.3rem; }

/* =====================================================================
   WOD de escritorio: «Siguiente» y la línea de solución viven en los paneles laterales
   ===================================================================== */
.stage-dock { display: flex; flex-direction: column; gap: 0.9rem; }
.stage-dock:empty { display: none; }
.continue-overlay.continue-docked, .continue-overlay-below.continue-docked { position: static; inset: auto; z-index: auto; margin: 0; padding: 1rem 1.1rem; align-items: stretch; animation: none; border: 1px solid var(--teal); border-radius: 14px; background: var(--panel-tint-teal); box-shadow: var(--shadow-card); }
.continue-docked .continue-btn-row { flex-direction: column; align-items: stretch; width: 100%; }
.continue-docked .continue-btn-row .btn { width: 100%; }
.continue-docked .continue-countdown { text-align: center; }
.sol-line.sol-line-docked { max-width: none; margin: 0; padding: 0.75rem 0.8rem; gap: 0.45rem; }
.sol-line-docked .sol-line-head strong { font-size: 0.82rem; }
.sol-line-docked .sol-line-head span { display: none; }
.sol-line-docked .sol-line-moves { gap: 0.25rem; }
.sol-line-docked .sol-mv { padding: 0.18rem 0.42rem; font-size: 0.72rem; }
.sol-line-docked .sol-line-wait { font-size: 0.75rem; }

/* --- Gimnasio de finales (PRO): protagonista de la galería --- */
.fgym { position: relative; display: flex; align-items: center; gap: 1.4rem; margin: 1.4rem 0 0.4rem; padding: 1.5rem 1.7rem; overflow: hidden; border: 1px solid rgba(242, 184, 75, 0.7); border-radius: 18px; background: radial-gradient(circle at 12% 20%, rgba(242, 184, 75, 0.22), transparent 55%), linear-gradient(135deg, rgba(45, 212, 191, 0.14), rgba(0, 0, 0, 0.1)), var(--panel); box-shadow: 0 0 0 1px rgba(242, 184, 75, 0.15), 0 14px 38px rgba(0, 0, 0, 0.38); }
.fgym::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%); transform: translateX(-120%); animation: fgym-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes fgym-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.fgym-icon { font-size: 3.6rem; line-height: 1; filter: drop-shadow(0 0 18px rgba(242, 184, 75, 0.55)); flex-shrink: 0; }
.fgym-body { flex: 1; min-width: 0; }
.fgym-tag { display: inline-block; margin-bottom: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: linear-gradient(135deg, #f2b84b, #d9962c); color: #1d1608; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; }
.fgym h2 { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.55rem; }
.fgym p { margin: 0 0 0.6rem; max-width: 62ch; font-size: 0.9rem; line-height: 1.55; color: var(--ink-dim); }
.fgym p strong { color: var(--ink); }
.fgym-points { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--ink); }
.fgym-points li::before { content: '✓ '; color: var(--teal); font-weight: 800; }
.fgym-cta { position: relative; z-index: 1; flex-shrink: 0; padding: 0.85rem 1.5rem; font-size: 1rem; background: linear-gradient(135deg, #f2b84b, #d9962c); border-color: #f2b84b; color: #1d1608; }
.fgym-locked { border-style: solid; }
.fg-entrena { color: var(--teal); font-weight: 700; }
.fl-head-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; justify-content: flex-end; }
.fp-intro-gym { border-color: rgba(242, 184, 75, 0.6); }
@media (max-width: 760px) { .fgym { flex-direction: column; align-items: flex-start; padding: 1.2rem; } .fgym-icon { font-size: 2.6rem; } .fgym-cta { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .fgym::after { animation: none; } }

/* --- Navegador de jugadas de los finales: tabla compacta, variantes plegables, barra y saltos --- */
.fl-grid { display: grid; grid-template-columns: 2.3rem 1fr 1fr; gap: 0.18rem 0.3rem; align-items: center; }
.fl-num { text-align: right; padding-right: 0.15rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); }
.fl-dots { color: var(--ink-dim); text-align: center; font-size: 0.8rem; }
.fl-cell { width: 100%; padding: 0.2rem 0.4rem; font-size: 0.78rem; text-align: left; }
.has-note::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.fl-var-row { grid-column: 1 / -1; }
.fl-vardet { margin: 0.15rem 0 0.15rem 0.9rem; border-left: 2px solid var(--amber); padding-left: 0.6rem; }
.fl-vardet > summary { cursor: pointer; list-style: none; font-size: 0.74rem; color: var(--ink-dim); padding: 0.1rem 0; }
.fl-vardet > summary::-webkit-details-marker { display: none; }
.fl-vardet > summary::before { content: '▸ '; color: var(--amber); }
.fl-vardet[open] > summary::before { content: '▾ '; }
.fl-vardet > summary:hover { color: var(--ink); }
.fl-var-body { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; padding: 0.25rem 0; }
.fl-var-body .ab-mv { padding: 0.18rem 0.4rem; font-size: 0.74rem; }
.fl-scrub-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 420px; margin-top: 0.4rem; }
.fl-scrub-row input[type=range] { flex: 1; accent-color: var(--teal); cursor: pointer; }
.fl-scrub-row .ab-nav { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.fg-cat-sub { margin: 0.3rem 0 0; max-width: 60ch; font-size: 0.88rem; color: var(--ink-dim); }
.fg-cat .fl-lesson-level { color: var(--teal); }

/* --- Licencias y avisos --- */
.lic-list { display: grid; gap: 0.9rem; margin: 1.2rem 0; }
.lic-card { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.lic-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.lic-head h3 { margin: 0; font-size: 1.05rem; }
.lic-tag { padding: 0.15rem 0.65rem; border: 1px solid var(--teal); border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--teal); }
.lic-card p { margin: 0.45rem 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-dim); }
.lic-aviso { font-size: 0.78rem; font-style: italic; }
.lic-links a { color: var(--teal); text-decoration: none; }
.lic-links a:hover { text-decoration: underline; }
.auth-info { margin: 0.6rem 0 0; padding: 0.7rem 0.9rem; border: 1px solid var(--teal); border-radius: 10px; background: rgba(45, 212, 191, 0.1); font-size: 0.85rem; line-height: 1.45; text-align: left; }

/* --- Esqueleto de carga (Mis aperturas): la pantalla ya existe y se rellena, en vez de un texto suelto --- */
.skel { display: block; border-radius: 8px; background: linear-gradient(100deg, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.05) 60%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; }
.skel-line { height: 0.8rem; margin: 0.55rem 0; }
.skel-title { height: 1.9rem; width: min(260px, 60%); margin-top: 0.5rem; }
.skel-thumb { width: 120px; height: 120px; border-radius: 10px; flex-shrink: 0; }
.oh-skel-card { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.oh-skel-card .oh-card-body { flex: 1; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

.method-claim { font-size: 1.25rem; line-height: 1.4; }

/* --- Textos legales (dentro de la app y en /legal/*.html) --- */
.legal-doc { max-width: 820px; margin: 0 auto; text-align: left; line-height: 1.65; font-size: 0.95rem; }
.legal-intro { margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--teal); background: rgba(45, 212, 191, 0.07); border-radius: 0 10px 10px 0; color: var(--ink-dim); }
.legal-sec { margin: 1.8rem 0; }
.legal-sec h2 { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.legal-sec p, .legal-sec li { color: var(--ink-dim); }
.legal-sec strong { color: var(--ink); }
.legal-sec ul { margin: 0.5rem 0 0.8rem; padding-left: 1.3rem; }
.legal-sec li { margin: 0.35rem 0; }
.legal-sec a, .legal-static a { color: var(--teal); }
.legal-table-wrap { overflow-x: auto; margin: 0.8rem 0; border: 1px solid var(--line); border-radius: 12px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.legal-table th { padding: 0.65rem 0.8rem; text-align: left; background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.legal-table td { padding: 0.65rem 0.8rem; vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-dim); }
.legal-table td:first-child { min-width: 9rem; font-weight: 600; color: var(--ink); }
.legal-pending { padding: 0.05rem 0.35rem; border-radius: 4px; background: rgba(242, 184, 75, 0.25); color: #f2b84b; font-weight: 600; }
body.legal-static { margin: 0; background: var(--bg, #293133); color: var(--ink); font-family: var(--font-body); }
.legal-static-head { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 0 auto; padding: 1.1rem 1.2rem; }
.legal-back { font-size: 0.85rem; text-decoration: none; }
.legal-static-main { max-width: 900px; margin: 0 auto; padding: 0.5rem 1.2rem 3rem; }
.legal-static-main h1 { font-family: var(--font-display); font-size: 2rem; margin: 0.4rem 0 1.2rem; }
.legal-static-foot { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.2rem 2.5rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-dim); text-align: center; }
@media (max-width: 640px) { .legal-table th, .legal-table td { padding: 0.55rem 0.6rem; } }

/* --- WOD en móvil: «Siguiente» y la solución, siempre justo bajo el tablero y en este orden --- */
.board-followups { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 560px; margin: 0.7rem auto 0; }
.board-followups:empty { display: none; }
.board-followups > .continue-overlay, .board-followups > .continue-overlay-below { position: static; inset: auto; z-index: auto; margin: 0; animation: none; align-items: stretch; }
.board-followups .continue-btn-row { flex-direction: row; flex-wrap: nowrap; width: 100%; gap: 0.5rem; }
.board-followups .continue-btn-row .btn { flex: 1; padding: 0.8rem 0.6rem; white-space: normal; line-height: 1.2; }
.board-followups .continue-btn-row .continue-btn { flex: 1.6; }
.board-followups .continue-countdown { text-align: center; }
.board-followups .sol-line { max-width: none; margin: 0; }

/* --- Visor de finales: iconos y versión móvil (tablero fijo, jugadas plegables) --- */
.ab-nav svg { display: block; margin: 0 auto; }
.ab-board-tools .ab-nav { min-width: 46px; min-height: 44px; padding: 0.4rem 0.7rem; }
.fl-scrub-row .ab-nav { min-width: 44px; min-height: 40px; padding: 0.3rem 0.5rem; }
#fl-moves { position: relative; }
.fl-moves-toggle { display: none; margin-left: auto; padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--teal); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
#fl-moves-sec h4 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .fl-page .oh-head { margin-bottom: 0.4rem; gap: 0.4rem; }
  .fl-page .oh-head .res-eyebrow { display: none; }
  .fl-page .oh-title { font-size: 1.3rem; margin-top: 0; }
  .fl-page .fl-head-actions { width: 100%; justify-content: space-between; gap: 0.5rem; }
  .fl-page #fl-entrena { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
  .fl-layout { gap: 0.6rem; }
  /* Tablero y controles fijos bajo el menú superior: al avanzar jugadas nunca se pierde de vista */
  .fl-layout .ab-board-col { position: sticky; top: 61px; z-index: 6; gap: 0.45rem; padding: 0.4rem 0 0.5rem; background: #293133; box-shadow: 0 10px 14px -10px rgba(0, 0, 0, 0.6); }
  .fl-layout .ab-board-col { width: 100%; box-sizing: border-box; }
  .fl-layout .ab-board-col .board-mount { width: min(100%, 50vh); height: auto; aspect-ratio: 1 / 1; max-width: 100%; margin: 0 auto; }
  .fl-layout .ab-board-tools { flex-wrap: nowrap; width: 100%; gap: 0.35rem; }
  .fl-layout .ab-board-tools .ab-nav { flex: 1; min-width: 0; }
  .fl-layout .ab-board-tools #fl-next { flex: 1.6; }
  .fl-layout .fl-scrub-row { max-width: none; width: 100%; margin-top: 0; }
  .fl-moves-toggle { display: inline-block; }
  .fl-moves-collapsed #fl-moves, .fl-moves-collapsed .fl-hint { display: none; }
  #fl-moves { max-height: 34vh; }
}

/* ====================================================================================================
   ESCRITORIO: el visor de finales cabe en la pantalla (sin scroll para llegar a ningún botón)
   El tablero se dimensiona por JavaScript (--fl-board) con la altura libre; explicación y jugadas se desplazan dentro de su caja.
   ==================================================================================================== */
@media (min-width: 761px) {
  .fl-page.fl-viewer { max-width: 1280px; margin: 0.5rem auto 0; padding: 0 1.2rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; box-sizing: border-box; }
  .fl-viewer .oh-head { margin: 0; flex: 0 0 auto; align-items: center; }
  .fl-viewer .oh-head .res-eyebrow { display: none; }
  .fl-viewer .fl-back { display: inline-block; margin: 0 0.8rem 0 0; vertical-align: middle; }
  .fl-viewer .oh-head > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; }
  .fl-viewer .oh-title { margin: 0; font-size: 1.45rem; }
  .fl-viewer .fl-tabs { margin: 0; flex: 0 0 auto; }
  .fl-viewer .fl-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--fl-board, 520px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 1.4rem; align-items: stretch; }
  .fl-viewer .ab-board-col { align-self: start; gap: 0.5rem; padding: 0; position: static; background: none; box-shadow: none; width: var(--fl-board, 520px); }
  .fl-viewer .ab-board-col .board-mount { width: var(--fl-board, 520px); height: var(--fl-board, 520px); margin: 0; }
  .fl-viewer .ab-board-tools { width: 100%; flex-wrap: nowrap; gap: 0.4rem; }
  .fl-viewer .ab-board-tools .ab-nav { flex: 1; min-width: 0; min-height: 40px; padding: 0.3rem 0.5rem; }
  .fl-viewer .ab-board-tools #fl-next { flex: 1.6; }
  .fl-viewer .fl-scrub-row { max-width: none; width: 100%; margin: 0; }
  .fl-viewer .fl-scrub-row .ab-nav { min-height: 36px; }
  .fl-viewer .ab-side { min-height: 0; overflow: hidden; gap: 0.7rem; }
  .fl-viewer .fl-comment { min-height: 0; flex: 0 1 auto; max-height: 46%; overflow-y: auto; padding: 0.9rem 1.1rem; }
  .fl-viewer .fl-varnote { flex: 0 0 auto; }
  .fl-viewer #fl-moves-sec { flex: 1 1 0; min-height: 96px; display: flex; flex-direction: column; overflow: hidden; }
  .fl-viewer #fl-moves-sec h4 { flex: 0 0 auto; margin: 0 0 0.4rem; }
  .fl-viewer #fl-moves { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; }
  .fl-viewer .fl-cta { flex: 0 0 auto; padding: 0.7rem 1rem; }
  .fl-viewer .fl-cta p { margin: 0.2rem 0 0.4rem; font-size: 0.85rem; }
}

/* --- Pantalla de un tema: entrenar un final o todo el tema --- */
.fg-cat-actions { flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.fg-cat-hint { font-size: 0.76rem; color: var(--ink-dim); }
.fg-train { align-self: flex-start; margin-top: 0.35rem; padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.fg-notrain { align-self: flex-start; margin-top: 0.35rem; font-size: 0.76rem; color: var(--ink-dim); font-style: italic; }
@media (max-width: 760px) { .fg-cat-actions { align-items: stretch; width: 100%; } .fg-cat-actions .btn { width: 100%; } }

/* --- Documentos legales a ancho de escritorio, con índice lateral --- */
.standalone-view.legal-view { max-width: 1180px; padding: 0 1.4rem; }
.legal-view h1 { margin-bottom: 1.4rem; }
.legal-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 3rem; align-items: start; max-width: 1180px; margin: 0 auto; }
.legal-wrap.legal-wrap-simple { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.legal-toc { position: sticky; top: 92px; align-self: start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: 0.85rem; max-height: calc(100vh - 130px); overflow-y: auto; }
.legal-toc strong { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.legal-toc ol { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.legal-toc a { display: block; padding: 0.35rem 0.5rem; border-radius: 8px; color: var(--ink-dim); text-decoration: none; line-height: 1.3; }
.legal-toc a:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.legal-doc { max-width: none; font-size: 1rem; line-height: 1.72; }
.legal-doc .legal-intro { max-width: 78ch; }
.legal-sec { scroll-margin-top: 92px; }
.legal-sec p, .legal-sec li { max-width: 82ch; }
.legal-static-head, .legal-static-main { max-width: 1180px; }
.legal-static-main h1 { font-size: 2.2rem; }
@media (max-width: 900px) { .legal-wrap { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .legal-toc { display: none; } .standalone-view.legal-view { max-width: 640px; } }

/* Lista de jugadas: varias filas por línea para aprovechar el ancho (en móvil queda una columna) */
.fl-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.25rem 1.2rem; }
.fl-row { display: grid; grid-template-columns: 2.3rem 1fr 1fr; gap: 0.18rem 0.3rem; align-items: center; }

/* El pie de la web no aparece durante un ejercicio de finales (como en el WOD y en aperturas), ni en el visor de escritorio, que ocupa justo la altura de la pantalla. */
#app:has(.fp-run) .site-footer { display: none; }
@media (min-width: 761px) { #app:has(.fl-viewer) .site-footer { display: none; } }

/* Ejercicio de finales: sin los márgenes de página larga, para que todo (con la solución desplegada) quepa en la pantalla */
.fl-page.fp-run { margin: 0.8rem auto 0.3rem; padding-bottom: 0.3rem; }

.fg-trains { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.fg-trains-lbl { font-size: 0.74rem; color: var(--ink-dim); margin: 0 0.1rem 0 0.3rem; }
.fg-train-sub { padding: 0.32rem 0.7rem; font-size: 0.78rem; background: transparent; border: 1px solid var(--line); }
.fg-train-sub:hover { border-color: var(--teal); color: var(--teal); }
.fg-trains .fg-train { margin-top: 0; }

.fg-trains .fg-notrain { margin: 0 0 0 0.3rem; }

/* Sesión continua de finales: cabecera con «Terminar sesión» y aviso de repaso */
.fp-run-head { flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.fp-run-head .fp-run-dots { flex-wrap: wrap; max-width: 60%; }
.fp-run-note { margin: 0.2rem 0 0.4rem; padding: 0.5rem 0.8rem; font-size: 0.82rem; border: 1px solid var(--amber); border-radius: 10px; background: rgba(242, 184, 75, 0.1); }

/* ====================================================================================================
   Rondas diarias de finales: el contador gratis (con barra) y el de PRO (dorado, «∞», sin barra)
   ==================================================================================================== */
.fp-rounds-slot { min-height: 1.9rem; display: flex; justify-content: center; margin: 0.2rem 0 0.4rem; }
.rounds-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; color: var(--ink-dim); background: rgba(0, 0, 0, 0.12); white-space: nowrap; }
.rounds-chip strong { color: var(--ink); font-family: 'JetBrains Mono', monospace; }
.rounds-bar { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.rounds-bar i { display: block; height: 100%; background: var(--teal, #2dd4bf); border-radius: 3px; transition: width 0.4s ease; }
.rounds-chip-full { border-color: var(--amber); }
.rounds-chip-full .rounds-bar i { background: var(--amber); }
.rounds-chip-pro { border-color: var(--amber); color: #f5d98c; background: linear-gradient(135deg, rgba(242, 184, 75, 0.2), rgba(201, 149, 48, 0.1)); box-shadow: 0 0 14px rgba(242, 184, 75, 0.2); }
.rounds-chip-pro strong { color: #ffe9b0; }
.rounds-pro-tag { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 5px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: #1a1200; background: linear-gradient(135deg, var(--amber), #c99530); }
.rounds-inf { font-size: 1.15rem; line-height: 1; font-weight: 700; color: var(--amber); }
.fp-run-head .rounds-chip { margin-left: auto; margin-right: 0.6rem; }
.fp-day-line { margin: 0.2rem 0 0.6rem; font-size: 0.88rem; color: var(--ink-dim); text-align: center; }
.fp-day-line strong { color: var(--ink); }
.fp-limit h1 { text-align: center; }
.fp-limit .fp-summary-text { text-align: center; }
.rounds-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem auto 1.4rem; max-width: 640px; }
.rounds-col { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: left; }
.rounds-col h3 { margin: 0 0 0.6rem; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; }
.rounds-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.86rem; color: var(--ink-dim); }
.rounds-col li::before { content: '✓'; margin-right: 0.45rem; color: var(--teal, #2dd4bf); font-weight: 700; }
.rounds-col-pro { border-color: var(--amber); background: linear-gradient(160deg, rgba(242, 184, 75, 0.16), rgba(80, 94, 97, 0.9)); box-shadow: 0 0 22px rgba(242, 184, 75, 0.18); }
.rounds-col-pro li { color: var(--ink); }
.rounds-col-pro li::before { color: var(--amber); }
.pro-success-list { list-style: none; margin: 0.4rem auto 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; text-align: left; max-width: 360px; font-size: 0.92rem; }
.pro-success-list li::before { content: '✓'; margin-right: 0.5rem; color: var(--amber); font-weight: 800; }
@media (max-width: 640px) {
  .rounds-compare { grid-template-columns: 1fr; }
  .fp-run-head { flex-wrap: wrap; row-gap: 0.4rem; }
  .fp-run-head .rounds-chip { margin-left: 0; order: 5; }
}

/* Resumen de sesión de finales: métricas y acierto por tipo */
.fp-metrics { display: flex; justify-content: center; gap: 1rem; margin: 1rem 0 0.8rem; flex-wrap: wrap; }
.fp-metric { min-width: 110px; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: center; }
.fp-metric span { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.fp-metric b { font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; }
.fp-bytype { max-width: 460px; margin: 0.4rem auto; display: flex; flex-direction: column; gap: 0.4rem; }
.fp-bytype-row { display: grid; grid-template-columns: 1fr 90px 64px; align-items: center; gap: 0.7rem; font-size: 0.86rem; text-align: left; }
.fp-bytype-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.fp-bytype-bar u { display: block; height: 100%; background: var(--teal, #2dd4bf); }
.fp-bytype-row b { font-family: 'JetBrains Mono', monospace; text-align: right; white-space: nowrap; }
.fp-weak { margin: 0.6rem 0 0.2rem; font-size: 0.88rem; color: var(--ink-dim); text-align: center; }
.fp-finish-nudge { animation: fp-nudge 1.4s ease-in-out 4; }
@keyframes fp-nudge { 50% { box-shadow: 0 0 0 8px rgba(45, 212, 191, 0.3), 0 4px 16px rgba(45, 212, 191, 0.35); } }

/* Pistas, rating de finales y repaso de fallos */
.fp-hint-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.5rem; min-height: 2.4rem; }
.fp-hint-row-off { display: none; }
.fp-hint { padding: 0.4rem 0.9rem; font-size: 0.84rem; }
.fp-hint:disabled { opacity: 0.45; cursor: default; }
.fp-hint-note { font-size: 0.82rem; color: var(--amber); }
.fp-start-row { display: flex; justify-content: center; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.fp-review { border-color: var(--amber); color: var(--amber); }
.fp-rating-line { margin: 0.4rem 0; text-align: center; font-size: 0.92rem; color: var(--ink-dim); }
.fp-rating-line strong { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; color: var(--ink); }
.fp-rating-line a { color: var(--amber); }

/* Estadísticas PRO: finales y aperturas */
.sp-empty { margin: 0.4rem 0 0.2rem; font-size: 0.92rem; color: var(--ink-dim); }
.sp-bytype { max-width: none; margin: 0.4rem 0 1rem; }
.sp-bytype .fp-bytype-row { grid-template-columns: minmax(0, 1fr) minmax(140px, 45%) 78px; }

/* Panel de administración · pestaña Uso */
.au-intro, .au-note { color: var(--ink-dim); font-size: 0.9rem; margin: 0.3rem 0 0.8rem; }
.au-empty { color: var(--ink-dim); font-size: 0.9rem; }
.au-warn { margin-left: 0.6rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(245, 158, 11, 0.16); color: var(--amber); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.au-n { margin-left: 0.6rem; font-size: 0.72rem; color: var(--ink-dim); font-weight: 400; text-transform: none; }
.au-alert { padding: 0.6rem 0.9rem; border: 1px solid var(--amber); border-radius: 10px; background: rgba(245, 158, 11, 0.08); font-size: 0.9rem; }
.au-fun-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0; }
.au-fun { display: grid; grid-template-columns: 230px 1fr 40px 170px; align-items: center; gap: 0.8rem; font-size: 0.88rem; }
.au-fun-bar { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.au-fun-bar u { display: block; height: 100%; background: var(--teal, #2dd4bf); }
.au-fun b { font-family: 'JetBrains Mono', monospace; text-align: right; }
.au-fun-conv { color: var(--ink-dim); font-size: 0.78rem; }
@media (max-width: 720px) { .au-fun { grid-template-columns: 1fr 1fr 36px; } .au-fun-conv { grid-column: 1 / -1; } }
@media (max-width: 560px) { .au-row { grid-template-columns: minmax(0, 1fr) repeat(3, 54px); gap: 0.4rem; font-size: 0.8rem; } }

/* El método: 8 pilares en rejilla simétrica (4 × 2 · 2 × 4 · 1 columna) */
.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1180px) { .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pillar-grid { grid-template-columns: 1fr; } }

/* Menú de hamburguesa */
.hamburger-sheet { position: absolute; top: 0; left: 0; bottom: 0; width: min(330px, 88vw); padding: 1rem 1rem 1.4rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.9rem; background: var(--panel); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-right: 1px solid var(--line); box-shadow: 18px 0 40px rgba(0, 0, 0, 0.35); animation: ham-in 0.22s ease-out; }
@keyframes ham-in { from { transform: translateX(-22px); opacity: 0; } to { transform: none; opacity: 1; } }
.ham-top { display: flex; align-items: center; justify-content: space-between; }
.ham-top h2 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; }
.ham-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--ink-dim); cursor: pointer; }
.ham-close:hover { color: var(--ink); border-color: var(--teal); }
.ham-user { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.ham-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 700; color: #0d1a18; background: linear-gradient(135deg, #f0a37f, #5eead4); }
.ham-user-text { display: flex; flex-direction: column; min-width: 0; }
.ham-user-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ham-user-text small, .ham-pro small, .ham-text small { font-size: 0.74rem; color: var(--ink-dim); }
.ham-pro { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.8rem 0.9rem; border: 1px solid rgba(245, 158, 11, 0.55); border-radius: 14px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.06)); color: var(--ink); text-align: left; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; }
.ham-pro:hover { transform: translateY(-1px); border-color: var(--amber); }
.ham-pro-active { cursor: default; }
.ham-pro-active:hover { transform: none; }
.ham-pro > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.ham-pro strong { color: var(--amber); }
.ham-pro-icon { font-size: 1.5rem; }
.ham-group { display: flex; flex-direction: column; gap: 0.25rem; }
.ham-label { padding: 0 0.4rem 0.2rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.ham-item { position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.55rem 0.6rem; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; animation: ham-item-in 0.3s ease-out backwards; }
.ham-group:nth-of-type(1) .ham-item { animation-delay: 0.06s; }
.ham-group:nth-of-type(2) .ham-item { animation-delay: 0.12s; }
.ham-group:nth-of-type(3) .ham-item { animation-delay: 0.18s; }
@keyframes ham-item-in { from { opacity: 0; transform: translateX(-10px); } }
.ham-item:hover { background: var(--panel-raised); border-color: var(--line); transform: translateX(2px); }
.ham-item:hover .ham-chev { color: var(--teal); transform: translateX(2px); }
.ham-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--panel-tint-teal); font-size: 1.15rem; }
.ham-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ham-text strong { font-size: 0.95rem; }
.ham-chev { color: var(--ink-dim); font-size: 1.2rem; transition: transform 0.15s ease, color 0.15s ease; }
.ham-tag { padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--amber); color: #1c1611; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; }

/* «Terminar y ver resumen»: el botón con el que se acaba la sesión, bien visible */
.fp-finish { margin-left: auto; padding: 0.6rem 1.2rem; border: 0; border-radius: 999px; font-size: 0.92rem; font-weight: 700; color: #0d1a18; background: linear-gradient(135deg, var(--teal, #2dd4bf), #7ef0dc); box-shadow: 0 4px 16px rgba(45, 212, 191, 0.35); }
.fp-finish:hover { filter: brightness(1.08); transform: translateY(-1px); color: #0d1a18; }

/* ====== POWER UP!: intro de fase y resumen final ====== */
.sy-stage { position: relative; overflow: hidden; max-width: 980px; margin: 1.2rem auto; padding: 1.6rem 1.4rem 1.8rem; text-align: center; border: 1px solid rgba(255, 110, 70, 0.4); border-radius: 22px; background: radial-gradient(ellipse at 50% 118%, rgba(255, 77, 46, 0.42), transparent 62%), radial-gradient(ellipse at 50% -12%, rgba(255, 170, 70, 0.16), transparent 55%), linear-gradient(180deg, rgba(46, 24, 19, 0.88), rgba(24, 26, 28, 0.94)); box-shadow: 0 0 70px rgba(255, 80, 40, 0.14) inset, 0 18px 50px rgba(0, 0, 0, 0.35); }
.sy-stage > * { position: relative; z-index: 1; }
.sy-stage-compact { max-width: 720px; }
.sy-aura { position: absolute !important; z-index: 0 !important; top: -140px; left: 50%; width: 560px; height: 560px; margin-left: -280px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 80, 40, 0), rgba(255, 90, 40, 0.5), rgba(255, 180, 70, 0), rgba(255, 70, 40, 0.45), rgba(255, 80, 40, 0)); filter: blur(46px); opacity: 0.55; animation: sy-spin 16s linear infinite; }
.sy-aura-oro { background: conic-gradient(from 0deg, rgba(255, 190, 60, 0), rgba(255, 210, 90, 0.55), rgba(255, 120, 40, 0), rgba(255, 200, 80, 0.5), rgba(255, 190, 60, 0)); }
@keyframes sy-spin { to { transform: rotate(360deg); } }
.sy-sparks { position: absolute !important; z-index: 0 !important; inset: 0; pointer-events: none; }
.sy-sparks i { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #ffb347; box-shadow: 0 0 10px 2px rgba(255, 140, 60, 0.9); opacity: 0; animation: sy-rise var(--t) ease-in infinite; animation-delay: var(--d); }
@keyframes sy-rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: 0.9; } 100% { transform: translateY(-420px) scale(0.3); opacity: 0; } }
.sy-eyebrow { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.28em; color: #ff8a5c; }
.sy-path { display: flex; align-items: center; justify-content: center; gap: 0; margin: 1rem 0 0.4rem; }
.sy-node { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.sy-node b { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 0.95rem; border: 2px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.3); }
.sy-node span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); }
.sy-node-done b { border-color: #ffb347; color: #1c1008; background: linear-gradient(135deg, #ffd166, #ff8a3d); box-shadow: 0 0 18px rgba(255, 150, 60, 0.7); }
.sy-node-done span { color: #ffd9a8; }
.sy-node-now b { border-color: #ff5a2e; color: #fff; background: rgba(255, 70, 40, 0.28); animation: sy-late 1.4s ease-in-out infinite; }
.sy-node-now span { color: #fff; }
@keyframes sy-late { 50% { box-shadow: 0 0 0 9px rgba(255, 80, 40, 0.22), 0 0 22px rgba(255, 80, 40, 0.8); } }
.sy-link { width: 64px; height: 3px; margin: 0 0.35rem 1.1rem; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.sy-link-on { background: linear-gradient(90deg, #ffd166, #ff5a2e); box-shadow: 0 0 10px rgba(255, 110, 50, 0.8); }
.sy-num { margin: 0.2rem 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(4.4rem, 12vw, 8rem); line-height: 0.95; color: transparent; -webkit-text-stroke: 2px #ff6a3d; text-shadow: 0 0 44px rgba(255, 90, 40, 0.6); animation: sy-pulso 2.6s ease-in-out infinite; }
@keyframes sy-pulso { 50% { text-shadow: 0 0 70px rgba(255, 110, 50, 0.95); transform: scale(1.02); } }
.sy-title { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 6.4vw, 3.6rem); font-weight: 800; letter-spacing: 0.08em; background: linear-gradient(180deg, #fff3cf, #ffb347 48%, #ff5a2e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sy-title-md { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-top: 0.4rem; }
.sy-title-oro { background: linear-gradient(180deg, #fffbe6, #ffd54a 50%, #ff9a2e); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(255, 200, 70, 0.55)); }
.sy-tagline { max-width: 640px; margin: 0.5rem auto 0; font-size: 0.98rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.sy-icono { margin-top: 0.8rem; font-size: 3.4rem; filter: drop-shadow(0 0 16px rgba(255, 130, 60, 0.7)); }
.sy-missions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; max-width: 860px; margin: 1.2rem auto 0; }
.sy-mission { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.85rem 0.8rem; border: 1px solid rgba(255, 120, 80, 0.32); border-radius: 14px; background: rgba(0, 0, 0, 0.26); backdrop-filter: blur(4px); }
.sy-mission span { font-size: 1.5rem; }
.sy-mission strong { font-size: 0.95rem; color: #ffe2bd; }
.sy-mission small { font-size: 0.78rem; line-height: 1.35; color: rgba(255, 255, 255, 0.68); }
.sy-power { display: flex; width: fit-content; align-items: baseline; gap: 0.7rem; margin: 1rem auto 0; padding: 0.4rem 1.1rem; border: 1px solid rgba(255, 190, 80, 0.5); border-radius: 999px; background: rgba(255, 170, 60, 0.1); }
.sy-power small { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.2em; color: #ffcf8a; }
.sy-power b { font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; color: #ffe08a; }
.sy-cta { position: relative; display: flex; width: fit-content; margin-left: auto; margin-right: auto; align-items: center; justify-content: center; gap: 0.7rem; min-width: 280px; margin-top: 1.2rem; padding: 1rem 2.4rem; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: linear-gradient(135deg, #ff3d2e, #ff8a2e); box-shadow: 0 8px 30px rgba(255, 70, 40, 0.5); transition: transform 0.15s ease; }
.sy-cta i { font-style: normal; transition: transform 0.15s ease; }
.sy-cta:hover { transform: translateY(-2px) scale(1.02); }
.sy-cta:hover i { transform: translateX(5px); }
.sy-cta::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); animation: sy-brillo 3.2s ease-in-out infinite; }
@keyframes sy-brillo { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.sy-actions { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 0.4rem; }
.sy-nivel { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; margin: 0.6rem auto 0; padding: 0.7rem 1.8rem; border: 1px solid rgba(255, 205, 90, 0.7); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 190, 60, 0.18), rgba(255, 120, 40, 0.06)); box-shadow: 0 0 34px rgba(255, 180, 60, 0.28); }
.sy-nivel small { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3em; color: #ffcf8a; }
.sy-nivel strong { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: 0.1em; color: #ffe38a; }
.sy-nivel em { font-style: normal; color: #ff8a3d; }
.sy-nivel span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); }
.sy-orbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 720px; margin: 1.3rem auto 0; }
.sy-orb { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.sy-orb strong { margin-top: 0.4rem; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ffe2bd; }
.sy-orb small { font-size: 0.74rem; color: rgba(255, 255, 255, 0.62); }
.sy-ring { position: relative; width: 118px; height: 118px; display: grid; place-items: center; }
.sy-ring svg { position: absolute; inset: 0; overflow: visible; transform: rotate(-90deg); }
.sy-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 7; }
.sy-ring-fg { fill: none; stroke: url(#none); stroke: #ffb347; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 276.46; stroke-dashoffset: var(--off); filter: drop-shadow(0 0 7px rgba(255, 150, 60, 0.9)); animation: sy-anillo 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.25s; }
@keyframes sy-anillo { from { stroke-dashoffset: 276.46; } }
.sy-ring b { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; color: #fff; }
.sy-ring b em { font-style: normal; font-size: 0.95rem; color: rgba(255, 255, 255, 0.55); }
.sy-ring-wod { border-radius: 50%; border: 7px solid rgba(255, 190, 80, 0.85); box-shadow: 0 0 26px rgba(255, 160, 60, 0.55), inset 0 0 22px rgba(255, 140, 50, 0.25); box-sizing: border-box; }
.sy-ring-wod b { font-size: 1.7rem; color: #ffe08a; }
.sy-fuerte { margin: 1rem 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); }
.sy-fuerte strong { color: #ffd166; }
@media (max-width: 640px) {
  .sy-missions, .sy-orbs { grid-template-columns: 1fr; }
  .sy-link { width: 34px; }
  .sy-cta { min-width: 0; width: 100%; }
  .sy-power { flex-wrap: wrap; justify-content: center; }
  .sy-orb { flex-direction: row; justify-content: center; gap: 0.9rem; text-align: left; }
  .sy-orb strong { margin: 0; }
  .sy-ring { width: 88px; height: 88px; }
}
@media (max-height: 760px) and (min-width: 641px) { .sy-num { font-size: clamp(3.4rem, 9vw, 5.4rem); } .sy-stage { padding-top: 1.1rem; padding-bottom: 1.3rem; } .sy-missions { margin-top: 0.8rem; } .sy-cta { margin-top: 0.9rem; padding: 0.8rem 2rem; } }
@media (prefers-reduced-motion: reduce) { .sy-aura, .sy-sparks i, .sy-num, .sy-node-now b, .sy-cta::after, .sy-ring-fg { animation: none; } .sy-sparks i { opacity: 0; } }

/* ====== Aperturas: panel general e interior de cada apertura ====== */
.oh-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.6rem; padding: 1.6rem 1.9rem; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(ellipse at 100% 0%, rgba(45, 212, 191, 0.2), transparent 55%), linear-gradient(135deg, rgba(62, 78, 80, 0.88), rgba(32, 38, 40, 0.94)); box-shadow: var(--shadow-card); }
.oh-hero-detail { grid-template-columns: 190px 1fr auto; }
.oh-hero-detail.oh-g-white { border-top: 4px solid #ffffff; }
.oh-hero-detail.oh-g-black { border-top: 4px solid #3d5256; }
.oh-hero-board .oh-thumb { width: 190px; height: 190px; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
.oh-hero-text .oh-title { margin: 0.1rem 0 0.3rem; }
.oh-hero-sub { margin: 0 0 1rem; font-size: 0.92rem; color: var(--ink-dim); }
.oh-hero-mastery { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.oh-hero-label { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.18em; color: var(--ink-dim); }
.oh-hero-mastery small { max-width: 150px; font-size: 0.78rem; color: var(--ink-dim); }
.oh-ring { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.oh-ring-xl { width: 132px; height: 132px; }
.oh-ring-sm { width: 58px; height: 58px; }
.oh-ring svg { position: absolute; inset: 0; overflow: visible; transform: rotate(-90deg); }
.oh-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 8; }
.oh-ring-fg { fill: none; stroke: var(--teal, #2dd4bf); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 276.46; stroke-dashoffset: var(--off); animation: oh-anillo 1.1s ease-out both; }
.oh-ring-fg.oh-ring-medio { stroke: #f5b042; }
.oh-ring-fg.oh-ring-bajo { stroke: #ef6a5b; }
@keyframes oh-anillo { from { stroke-dashoffset: 276.46; } }
.oh-ring b { font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; }
.oh-ring-xl b { font-size: 2rem; }
.oh-ring-sm b { font-size: 0.85rem; }
.oh-ring b small { font-size: 0.6em; color: var(--ink-dim); }
.oh-ring-vacio { border: 2px dashed rgba(255, 255, 255, 0.22); border-radius: 50%; }
.oh-ring-vacio b { color: var(--ink-dim); }
.oh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.oh-kpi { display: flex; flex-direction: column; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.oh-kpi b { font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; }
.oh-kpi > span { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.oh-kpi-alerta b { color: #ef8a7b; }
.oh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 1rem 0 1.4rem; }
.oh-g-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-card); transition: transform 0.15s ease, border-color 0.15s ease; }
.oh-g-card:hover { transform: translateY(-4px); border-color: var(--teal); }
.oh-g-board { position: relative; padding: 2.1rem 0.9rem 0.9rem; background: #0f1516; border-bottom: 3px solid #ffffff; }
.oh-g-black .oh-g-board { border-bottom-color: #3d5256; }
.oh-g-board .oh-thumb { width: 76%; height: auto; margin: 0 auto; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
.oh-g-side { position: absolute; top: 0.7rem; left: 0.8rem; z-index: 3; }
.oh-g-ring { position: absolute; right: 0.8rem; bottom: -28px; z-index: 2; padding: 4px; border-radius: 50%; background: var(--panel); }
.oh-g-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.7rem 1rem 1rem; }
.oh-g-body h3 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; }
.oh-g-status { font-size: 0.8rem; color: var(--ink-dim); }
.oh-g-weak { color: #ef8a7b; font-weight: 700; }
.oh-g-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.oh-g-actions .btn { flex: 1; }
.oh-variants-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.oh-g-var { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.oh-g-var-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.oh-g-bar { height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.oh-g-bar i { display: block; height: 100%; background: var(--teal, #2dd4bf); }
.oh-g-bar i.oh-ring-medio { background: #f5b042; }
.oh-g-bar i.oh-ring-bajo { background: #ef6a5b; }
@media (max-width: 980px) { .oh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oh-hero-detail { grid-template-columns: 150px 1fr auto; } .oh-hero-board .oh-thumb { width: 150px; height: 150px; } }
@media (max-width: 640px) {
  .oh-grid, .oh-variants-grid { grid-template-columns: 1fr; }
  .oh-hero, .oh-hero-detail { grid-template-columns: 1fr; text-align: center; padding: 1.3rem 1.1rem; }
  .oh-hero-board { display: flex; justify-content: center; }
  .oh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====== Panel de administración · Resumen ====== */
.ai-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.ai-kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ai-kpi-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.ai-kpi-value { font-family: 'JetBrains Mono', monospace; font-size: 1.9rem; line-height: 1.1; }
.ai-kpi-sub { font-size: 0.76rem; color: var(--ink-dim); }
.ai-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ai-panel { margin: 0 0 1rem; padding: 1rem 1.1rem 0.9rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); min-width: 0; }
.ai-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-bottom: 0.5rem; }
.ai-panel-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.02rem; }
.ai-total, .ai-sub { font-size: 0.8rem; color: var(--ink-dim); }
.ai-total b { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; color: var(--ink); }
.ai-leyenda { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0; font-size: 0.72rem; color: var(--ink-dim); }
.ai-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.ai-leyenda .ai-leyenda-linea { width: 16px; height: 3px; margin-left: 0.7rem; border-radius: 2px; background: #ffffff; }
.ai-pro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.ai-pro > div { display: flex; flex-direction: column; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.ai-pro b { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; }
.ai-pro span { font-size: 0.74rem; color: var(--ink-dim); }
.ai-pro-alerta b { color: #ef8a7b; }
.ac-svg { width: 100%; height: auto; display: block; }
.ac-grid { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.ac-tick { font-size: 10px; fill: var(--ink-dim); font-family: 'JetBrains Mono', monospace; }
.ac-media { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }
.ac-delta { margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: var(--ink-dim); }
.ac-delta-up { background: rgba(74, 222, 128, 0.16); color: #6ee7a0; }
.ac-delta-down { background: rgba(239, 106, 91, 0.16); color: #ef8a7b; }
.ac-delta-nuevo { background: rgba(45, 212, 191, 0.16); color: var(--teal); }
.ac-calor { display: flex; flex-direction: column; gap: 3px; }
.ac-calor-fila { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.ac-calor-fila b { font-size: 0.7rem; font-weight: 600; color: var(--ink-dim); }
.ac-calor-fila i { aspect-ratio: 1; border-radius: 3px; background: rgba(45, 212, 191, calc(0.06 + var(--a) * 0.94)); }
.ac-calor-horas span { font-size: 9px; text-align: center; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; }
.ac-coh { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.ac-coh-fila { display: grid; grid-template-columns: 150px repeat(8, minmax(44px, 1fr)); gap: 3px; align-items: center; min-width: 560px; }
.ac-coh-cab span { text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-dim); }
.ac-coh-sem { font-size: 0.8rem; }
.ac-coh-sem small { color: var(--ink-dim); }
.ac-coh-cel { padding: 0.35rem 0; border-radius: 6px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; background: rgba(45, 212, 191, calc(0.08 + var(--a) * 0.8)); }
.ac-coh-futuro { background: transparent; }
.ac-hb { display: flex; flex-direction: column; gap: 0.5rem; }
.ac-hb-fila { display: grid; grid-template-columns: 110px 1fr 46px 92px; align-items: center; gap: 0.6rem; font-size: 0.84rem; }
.ac-hb-fila i { display: block; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.ac-hb-fila u { display: block; height: 100%; background: linear-gradient(90deg, #2dd4bf, #7aa2ff); }
.ac-hb-fila b { text-align: right; font-family: 'JetBrains Mono', monospace; }
.ac-hb-fila em { font-style: normal; font-size: 0.72rem; color: var(--ink-dim); }
@media (max-width: 900px) { .ai-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-dos { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ac-hb-fila { grid-template-columns: 90px 1fr 40px; } .ac-hb-fila em { display: none; } }
.ai-fun .au-fun { grid-template-columns: 150px minmax(0, 1fr) 36px 48px; }

/* Aperturas: «Nueva apertura» en un panel lateral abierto desde arriba */
.oh-toolbar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
.oh-drawer { position: fixed; inset: 0; z-index: 60; }
.oh-drawer[hidden] { display: none; }
.oh-drawer-back { position: absolute; inset: 0; background: rgba(4, 5, 7, 0.6); }
.oh-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); padding: 1.2rem; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35); animation: oh-drawer-in 0.22s ease-out; }
@keyframes oh-drawer-in { from { transform: translateX(24px); opacity: 0; } }
.oh-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.oh-drawer-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.2rem; }

/* Gimnasio de finales: el rating (dorado) se separa del botón de entrenar */
.fp-intro .fp-rounds-slot { margin: 1.2rem 0 1.8rem; }

/* ====== Guía de inicio (4 pantallas) ====== */
.wg-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgba(5, 7, 9, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: wg-in 0.25s ease-out; }
.wg-out { opacity: 0; transition: opacity 0.25s ease; }
@keyframes wg-in { from { opacity: 0; } }
.wg-card { width: min(560px, 100%); max-height: 94vh; overflow: hidden auto; padding: 1rem 1.3rem 1.2rem; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(ellipse at 50% -20%, rgba(45, 212, 191, 0.22), transparent 60%), var(--panel); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
.wg-top { display: flex; align-items: center; justify-content: space-between; }
.wg-count { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ink-dim); }
.wg-skip { padding: 0.3rem 0.7rem; border: 0; border-radius: 8px; background: none; color: var(--ink-dim); font-size: 0.85rem; cursor: pointer; }
.wg-skip:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.wg-view { overflow: hidden; touch-action: pan-y; transition: height 0.3s ease; }
.wg-track { display: flex; align-items: flex-start; transition: transform 0.32s cubic-bezier(0.3, 0.8, 0.3, 1); }
.wg-slide { flex: 0 0 100%; min-width: 0; padding: 0.6rem 0.2rem 0.4rem; text-align: center; }
.wg-icono { width: 84px; height: 84px; margin: 0.4rem auto 0.8rem; display: grid; place-items: center; border-radius: 50%; font-size: 2.5rem; background: linear-gradient(135deg, rgba(45, 212, 191, 0.3), rgba(122, 162, 255, 0.22)); box-shadow: 0 0 34px rgba(45, 212, 191, 0.3); }
.wg-slide h2 { margin: 0 0 0.7rem; font-family: var(--font-display); font-size: 1.55rem; }
.wg-lead { margin: 0 0 0.9rem; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.wg-nota { margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--ink-dim); }
.wg-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.wg-modo { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.55rem 0.3rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 0.76rem; }
.wg-modo b { font-size: 1.35rem; }
.wg-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.wg-point { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.wg-point > span { font-size: 1.5rem; line-height: 1.2; }
.wg-point p { margin: 0; font-size: 0.93rem; line-height: 1.45; }
.wg-foot { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-top: 0.8rem; }
.wg-dots { display: flex; gap: 0.45rem; }
.wg-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: all 0.2s ease; }
.wg-dots i.on { width: 24px; border-radius: 4px; background: var(--teal, #2dd4bf); }
.wg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; width: 100%; }
.wg-main { min-width: 200px; padding: 0.8rem 1.4rem; font-size: 1rem; }
.wg-second, .wg-back { padding: 0.7rem 1.1rem; }
@media (max-width: 520px) { .wg-card { padding: 0.9rem 1rem 1rem; } .wg-actions { flex-direction: column-reverse; } .wg-main, .wg-second, .wg-back { width: 100%; } .wg-actions:has(.wg-back) { flex-direction: row; } .wg-actions:has(.wg-back) .wg-back { width: auto; } .wg-actions:has(.wg-back) .wg-main { flex: 1; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .wg-track, .wg-overlay { animation: none; transition: none; } }

/* e-Value: la valoración con la notación de siempre (0,0 / + blancas / − negras) y su barra */
.eval-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.eval-btn small { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--ink-dim); white-space: nowrap; }
.eval-legend { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--ink-dim); }
.eval-legend b { color: var(--ink); font-family: 'JetBrains Mono', monospace; }

/* Aperturas · más visual: nivel de cada apertura, mapa de variantes y «Repasar lo débil» */
.oh-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.oh-weak-all { border-color: #ef8a7b; color: #ef8a7b; }
.oh-kpi-txt { font-size: 1.15rem !important; padding-top: 0.45rem; }
.oh-kpi b small { font-size: 0.55em; color: var(--ink-dim); margin-left: 0.1rem; }
.oh-tier { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.35); }
.oh-tier-none { color: var(--ink-dim); }
.oh-tier-aprendiz { color: #9fe8b0; border-color: rgba(159, 232, 176, 0.5); }
.oh-tier-solido { color: #7aa2ff; border-color: rgba(122, 162, 255, 0.6); }
.oh-tier-experto { color: #c4a8ff; border-color: rgba(196, 168, 255, 0.6); }
.oh-tier-maestro { color: #ffe08a; border-color: rgba(255, 210, 90, 0.8); background: linear-gradient(110deg, rgba(255, 190, 60, 0.18) 30%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 190, 60, 0.18) 70%); background-size: 220% 100%; animation: oh-brillo 3.2s ease-in-out infinite; }
@keyframes oh-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.oh-g-tier { position: absolute; top: 0.7rem; right: 0.8rem; z-index: 3; }
.oh-vmap { display: flex; flex-wrap: wrap; gap: 4px; margin: 0.2rem 0 0.1rem; align-items: center; }
.oh-vmap em { font-style: normal; font-size: 0.72rem; color: var(--ink-dim); }
.oh-vm { width: 13px; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.oh-vm-low { background: #ef6a5b; }
.oh-vm-mid { background: #f5b042; }
.oh-vm-good { background: #2dd4bf; }
.oh-vm-top { background: #ffd54a; box-shadow: 0 0 8px rgba(255, 210, 74, 0.8); }
.oh-weakbtn { margin-top: 0.4rem; padding: 0.45rem 0.7rem; border: 1px dashed #ef8a7b; border-radius: 10px; background: rgba(239, 106, 91, 0.08); color: #ef8a7b; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.oh-weakbtn:hover { background: rgba(239, 106, 91, 0.18); }
@media (prefers-reduced-motion: reduce) { .oh-tier-maestro { animation: none; } }

/* ====== Analizar luego: botón en cada ejercicio, lista de posiciones y tablero de análisis ====== */
.exercise-header { position: relative; }
.save-pos { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.save-pos-btn { padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.save-pos-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.save-pos-btn:disabled { opacity: 0.8; cursor: default; }
.save-pos-ok { border-color: var(--teal); color: var(--teal); }
.save-pos-info { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink-dim); font-family: Georgia, serif; font-style: italic; font-size: 0.8rem; cursor: pointer; }
.save-pos-info:hover { color: var(--ink); border-color: var(--teal); }
.save-pos-tip { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(300px, 86vw); padding: 0.7rem 0.85rem; border: 1px solid var(--teal); border-radius: 12px; background: var(--panel-raised, #2a3436); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); font-size: 0.82rem; line-height: 1.45; text-align: left; font-style: normal; font-weight: 400; color: var(--ink); }
.save-pos-tip[hidden] { display: none; }
.save-pos-msg { margin: 0.4rem 0 0; padding: 0.5rem 0.8rem; border: 1px solid var(--amber); border-radius: 10px; background: rgba(242, 184, 75, 0.1); font-size: 0.82rem; }
.save-pos-msg a { color: var(--amber); font-weight: 700; }
.oh-g-actions .oh-lupa { flex: 0 0 auto; padding: 0.5rem 0.8rem; }

.al-page, .an-page { max-width: 1100px; margin: 0 auto; padding: 2.2rem 1rem 1.2rem; }
.al-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.al-sub { margin: 0.3rem 0 0; max-width: 620px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-dim); }
.al-count { margin-bottom: 0.3rem; padding: 0.35rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; }
.al-count-lleno { border-color: var(--amber); color: var(--amber); }
.al-pro { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border: 1px solid var(--amber); border-radius: 12px; background: rgba(242, 184, 75, 0.08); font-size: 0.9rem; }
.al-pro a { color: var(--amber); font-weight: 700; }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.al-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); transition: transform 0.15s ease, border-color 0.15s ease; }
.al-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.al-thumb { width: 100%; aspect-ratio: 1; }
.al-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.9rem 0.9rem; }
.al-body small { color: var(--ink-dim); }
.al-body .al-poco { color: #ef8a7b; font-weight: 700; }
.al-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.al-actions .btn-primary { flex: 1; }
.al-vacio { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; text-align: center; color: var(--ink-dim); }
.al-vacio span { font-size: 2.6rem; }
.al-vacio p { max-width: 460px; line-height: 1.5; }

.an-top { margin-bottom: 1.4rem; }
.an-top h1 { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.15; }
.an-top p { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--ink-dim); }
.an-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.an-board-col { position: relative; display: flex; gap: 0.6rem; }
.an-board { width: min(600px, 72vh, 62vw); height: min(600px, 72vh, 62vw); }
.an-bar { position: relative; width: 26px; height: min(600px, 72vh, 62vw); display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px; overflow: hidden; background: #1c2022; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.an-bar-giro { justify-content: flex-start; }
.an-bar-blanco { width: 100%; height: 50%; background: #f3f4f6; transition: height 0.2s ease; }
.an-bar-giro .an-bar-blanco { margin-top: 0; }
.an-bar-num { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; color: #1c2022; mix-blend-mode: normal; }
.an-bar-giro .an-bar-num { bottom: auto; top: 4px; }
.an-eval { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.7rem; }
.an-eval strong { font-family: 'JetBrains Mono', monospace; font-size: 2.2rem; line-height: 1; min-width: 4.5ch; }
.an-eval span { font-size: 0.9rem; color: var(--ink-dim); }
.an-eval small { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--ink-dim); }
.an-pensando strong, .an-pensando span { opacity: 0.45; }
.an-lines.an-pensando { opacity: 0.45; pointer-events: none; }
.an-blancas { color: #f3f4f6; }
.an-negras { color: #aab4be; }
.an-igual { color: var(--teal, #2dd4bf); }
.an-lines { display: flex; flex-direction: column; gap: 0.35rem; min-height: 7.2rem; margin-bottom: 0.8rem; }
.an-line { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; }
.an-line:hover { border-color: var(--teal); }
.an-line b { flex: 0 0 4.2ch; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.an-line span { font-size: 0.85rem; line-height: 1.35; overflow-wrap: anywhere; }
.an-nav { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.an-nav .btn { flex: 1; padding: 0.5rem 0; }
.an-nav .btn:disabled { opacity: 0.4; }
.an-moves { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.3rem; max-height: 220px; overflow-y: auto; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 0.88rem; }
.an-moves b { color: var(--ink-dim); font-weight: 600; margin-left: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
.an-mv { padding: 0.1rem 0.4rem; border: 0; border-radius: 6px; background: none; color: var(--ink); font-size: 0.88rem; cursor: pointer; }
.an-mv:hover { background: rgba(255, 255, 255, 0.1); }
.an-mv.on { background: var(--teal); color: #14201e; font-weight: 700; }
.an-vacio { color: var(--ink-dim); }
.an-hint { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--ink-dim); }
@media (max-width: 860px) { .an-grid { grid-template-columns: 1fr; } .an-board, .an-bar { height: min(calc(100vw - 96px), 62vh); } .an-board { width: min(calc(100vw - 96px), 62vh); } .an-board-col { justify-content: center; } }

/* La línea correcta, al aparecer en el panel de la izquierda, brilla un momento */
.sol-line-pulse { animation: sol-pulse 0.9s ease-in-out 3; }
@keyframes sol-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); } 50% { box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.55), 0 0 26px rgba(45, 212, 191, 0.5); } }
@media (prefers-reduced-motion: reduce) { .sol-line-pulse { animation: none; box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.55); } }

/* Aviso antes de analizar una posición guardada */
.al-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; background: rgba(5, 7, 9, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.al-modal-card { width: min(440px, 100%); padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-raised, #2a3436); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.al-modal-card h3 { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.2rem; }
.al-modal-card p { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.al-modal-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.88rem; color: var(--ink-dim); cursor: pointer; }
.al-modal-check input { width: 18px; height: 18px; accent-color: var(--teal, #2dd4bf); }
.al-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* POWER UP! · arranque a pantalla completa, con la misma estética de fuego que las pantallas entre fases */
.sy-start { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 55%, #4a160a 0%, #1d0a05 52%, #070302 100%); animation: sy-start-in 0.3s ease-out, sy-start-tiembla 0.55s 0.3s linear; }
.sy-start-out { opacity: 0; transition: opacity 0.22s ease; }
.sy-start .sy-aura { top: 50%; width: 880px; height: 880px; margin: -440px 0 0 -440px; opacity: 0.9; }
.sy-start-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 1rem; text-align: center; }
.sy-start-eyebrow { opacity: 0; animation: sy-start-sube 0.5s 0.1s ease-out forwards; }
.sy-start-logo { display: flex; justify-content: center; margin: 0; filter: drop-shadow(0 0 26px rgba(255, 100, 40, 0.85)); }
.sy-start-logo span { display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 10.5vw, 6.4rem); line-height: 1; letter-spacing: 0.03em; background: linear-gradient(180deg, #fff3cf, #ffb347 48%, #ff5a2e); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; animation: sy-start-letra 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards; animation-delay: calc(0.25s + var(--i) * 0.07s); }
.sy-start-camino, .sy-start-tag { opacity: 0; animation: sy-start-sube 0.5s ease-out forwards; }
.sy-start-camino { animation-delay: 0.95s; }
.sy-start-tag { margin: 0; max-width: 520px; font-size: 1rem; color: rgba(255, 255, 255, 0.85); animation-delay: 1.15s; }
.sy-start-count { display: grid; place-items: center; min-height: clamp(5rem, 24vh, 12rem); margin-top: 0.9rem; }
.sy-start-count b { font-family: var(--font-display); font-weight: 900; font-size: clamp(4.5rem, min(22vw, 24vh), 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 3px #ff6a3d; text-shadow: 0 0 50px rgba(255, 90, 40, 0.8); animation: sy-start-golpe 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.sy-start-count b.sy-ya { background: linear-gradient(180deg, #fff, #ffd08a 50%, #ff7a3d); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(0 0 30px rgba(255, 150, 60, 0.95)); }
.sy-start-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.95), rgba(255, 170, 80, 0.7) 40%, transparent 70%); }
.sy-start-flash.sy-boom { animation: sy-start-flash 0.6s ease-out; }
.sy-start-skip { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.2rem; text-align: center; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.sy-shock { position: absolute; z-index: 1; left: 50%; top: 52%; pointer-events: none; }
.sy-shock i { position: absolute; box-sizing: border-box; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border: 100px solid rgba(255, 175, 90, 0.9); border-radius: 50%; opacity: 0; animation: sy-start-onda 1.7s ease-out forwards; animation-delay: calc(0.2s + var(--k) * 0.38s); }
@keyframes sy-start-in { from { opacity: 0; } }
@keyframes sy-start-tiembla { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(3px, 4px); } }
@keyframes sy-start-letra { from { opacity: 0; transform: translateY(46px) scale(1.7); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sy-start-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sy-start-golpe { from { opacity: 0; transform: scale(2.8); } 60% { opacity: 1; } to { transform: scale(1); } }
/* La onda se dibuja UNA vez a su tamaño final (1400 px) y solo se reduce y se amplía hasta 1: nunca se agranda por encima de lo dibujado, así no se pixela (antes era un círculo de 24 px escalado ×70, que obliga al navegador a limitar la resolución de la capa) y se anima en la GPU. */
@keyframes sy-start-onda { from { opacity: 0.9; transform: scale(0.0171); } to { opacity: 0; transform: scale(1); } }
@keyframes sy-start-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sy-start, .sy-start * { animation-duration: 0.01s !important; animation-delay: 0s !important; } }

/* ====== Códigos de regalo, referidos y su panel de administración ====== */
.redeem-box { margin: 1.1rem 0 0.4rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.redeem-box h3 { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: 1.05rem; }
.redeem-sub { margin: 0 0 0.7rem; font-size: 0.85rem; color: var(--ink-dim); }
.redeem-row { display: flex; gap: 0.5rem; }
.redeem-row input { flex: 1; min-width: 0; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.redeem-row input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.redeem-msg { min-height: 1.2rem; margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--ink-dim); }
.redeem-ok { color: var(--teal); font-weight: 700; }
.redeem-err { color: #ef8a7b; }
.redeem-gift { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--amber); }
.gift-banner { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; max-width: 980px; margin: 0.8rem auto 0; padding: 0.6rem 0.9rem; border: 1px solid var(--amber); border-radius: 12px; background: rgba(242, 184, 75, 0.1); }
.gift-banner span { flex: 1; min-width: 12rem; font-size: 0.92rem; }
.gift-banner-x { border: 0; background: none; color: var(--ink-dim); font-size: 1rem; cursor: pointer; }
.auth-ref { margin: 0.2rem 0 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--teal); border-radius: 12px; background: rgba(45, 212, 191, 0.1); font-size: 0.9rem; line-height: 1.4; }
.auth-ref[hidden] { display: none; }

.cp-wrap { display: grid; gap: 1.2rem; }
.cp-card { padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.cp-card h2 { margin: 0 0 0.3rem; font-family: var(--font-display); font-size: 1.25rem; }
.cp-help { margin: 0 0 1rem; max-width: 760px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-dim); }
.cp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; align-items: end; }
.cp-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-dim); }
.cp-form label[hidden] { display: none; }
.cp-form .cp-wide { grid-column: 1 / -1; }
.cp-form input, .cp-form select { padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-size: 0.92rem; }
.cp-msg { min-height: 1.1rem; margin: 0.7rem 0 0; font-size: 0.88rem; color: var(--ink-dim); }
.cp-ok { color: var(--teal); }
.cp-err { color: #ef8a7b; }
.cp-empty { margin: 1rem 0 0; color: var(--ink-dim); }
.cp-table-wrap { margin-top: 1rem; overflow-x: auto; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cp-table th { padding: 0.4rem 0.6rem; text-align: left; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.cp-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: top; }
.cp-table td small { display: block; font-size: 0.72rem; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; }
.cp-acc { display: flex; gap: 0.4rem; flex-wrap: wrap; white-space: nowrap; }
.cp-acc .btn, .cp-link .btn { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.cp-chip { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.cp-chip-on { background: rgba(45, 212, 191, 0.18); color: var(--teal); }
.cp-chip-off { background: rgba(255, 255, 255, 0.1); color: var(--ink-dim); }
.cp-camp { margin-top: 0.9rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.cp-camp header { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cp-link { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.cp-link input { flex: 1; min-width: 0; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }
.cp-notes { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--ink-dim); }
.cp-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; background: rgba(5, 7, 9, 0.72); }
.cp-modal-card { width: min(680px, 100%); max-height: 90vh; overflow: auto; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-raised, #2a3436); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.cp-modal-card h3 { margin: 0 0 0.6rem; font-family: var(--font-display); }
.cp-aviso { margin: 0 0 0.8rem; padding: 0.55rem 0.75rem; border: 1px solid var(--amber); border-radius: 10px; background: rgba(242, 184, 75, 0.1); font-size: 0.88rem; }
.cp-modal-card textarea { width: 100%; box-sizing: border-box; padding: 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 0.92rem; letter-spacing: 0.06em; resize: vertical; }
.cp-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
@media (max-width: 560px) { .redeem-row { flex-direction: column; } .cp-card { padding: 1rem; } }

/* Panel de administración · lista de espera */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; }
.kpi-grid div { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.kpi-grid b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; line-height: 1.1; }
.kpi-grid span { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-dim); }
.export-row a { text-decoration: none; }

/* Panel de administración · códigos de 3 tipos, referidos con contratos y marketing */
.cp-check { display: flex; align-items: center; gap: 0.5rem; grid-column: 1 / -1; font-size: 0.9rem; cursor: pointer; }
.cp-check input { width: 18px; height: 18px; accent-color: var(--teal, #2dd4bf); }
.cp-small { font-size: 0.8rem; }
.cp-contracts { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); }
.cp-contracts-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.cp-upload { cursor: pointer; }
.cp-contract-list { margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.cp-contract-list li { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.cp-contract-list a { color: var(--teal, #2dd4bf); font-weight: 600; word-break: break-all; }
.cp-contract-list small { color: var(--ink-dim); margin-left: auto; }
.cp-del { padding: 0.25rem 0.6rem; }
.mk-estado { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid var(--line); font-size: 0.95rem; }
.mk-ok { border-color: rgba(45, 212, 191, 0.5); background: rgba(45, 212, 191, 0.08); }
.mk-cambio { border-color: rgba(255, 170, 80, 0.6); background: rgba(255, 170, 80, 0.1); }
.mk-aviso { background: rgba(255, 255, 255, 0.04); }
.mk-filtros { grid-template-columns: minmax(150px, 220px) minmax(200px, 320px); }
.marketing-box { margin-top: 0.8rem; }
.marketing-row { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; font-size: 0.92rem; }
.marketing-row input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--teal, #2dd4bf); }

/* Visor de referidos: listado visual con filtros */
.rf-toolbar { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.rf-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rf-group > span { min-width: 5.5rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.rf-chip { padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--ink); font: inherit; font-size: 0.85rem; cursor: pointer; }
.rf-chip b { margin-left: 0.3rem; color: var(--ink-dim); font-weight: 600; }
.rf-chip-on { border-color: var(--teal, #2dd4bf); background: rgba(45, 212, 191, 0.16); }
.rf-chip-on b { color: var(--teal, #2dd4bf); }
.rf-sort { margin-left: auto; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep, #1f2527); color: var(--ink); font: inherit; font-size: 0.85rem; }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; }
.rf-card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.035); }
.rf-card-off { opacity: 0.72; }
.rf-head { display: flex; align-items: center; gap: 0.7rem; }
.rf-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #fff; }
.rf-name { flex: 1; min-width: 0; }
.rf-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-name small { color: var(--ink-dim); }
.rf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.rf-kpis div { padding: 0.5rem 0.3rem; text-align: center; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.rf-kpis b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; line-height: 1.1; }
.rf-kpis span { font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-dim); }
.rf-contrato-ok { color: #6ee7b7; }
.rf-contrato-falta { color: #fbbf24; }

/* Eliminar mi cuenta */
.danger-zone { margin-top: 1.6rem; padding: 1rem; border: 1px solid rgba(239, 68, 68, 0.45); border-radius: 14px; background: rgba(239, 68, 68, 0.06); }
.danger-zone h3 { margin: 0 0 0.3rem; font-size: 1rem; color: #fca5a5; }
.danger-zone p { margin: 0 0 0.8rem; font-size: 0.85rem; color: var(--ink-dim); }
.btn-danger { border-color: rgba(239, 68, 68, 0.7); background: rgba(239, 68, 68, 0.14); color: #fecaca; }
.btn-danger:hover:not(:disabled) { background: #dc2626; color: #fff; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.del-field { display: grid; gap: 0.3rem; margin: 0.7rem 0; font-size: 0.85rem; }
.del-field input { padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep, #1f2527); color: var(--ink); font: inherit; }

/* Repertorio de ChessVan para quien no tiene repertorio */
.oh-starter { max-width: 560px; margin: 1.4rem auto 0; padding: 1.2rem 1.3rem; text-align: left; border: 1px solid rgba(45, 212, 191, 0.5); border-radius: 18px; background: radial-gradient(ellipse at 50% -20%, rgba(45, 212, 191, 0.16), transparent 70%), rgba(45, 212, 191, 0.05); }
.oh-starter h2 { margin: 0 0 0.4rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; }
.oh-starter p { margin: 0.4rem 0; font-size: 0.92rem; color: var(--ink-dim); }
.oh-starter-list { margin: 0.8rem 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.oh-starter-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.oh-starter-list small { color: var(--ink-dim); }
.oh-starter .btn { width: 100%; }
.oh-starter-note { font-size: 0.8rem !important; }
.oh-or { display: flex; align-items: center; gap: 0.8rem; max-width: 560px; margin: 1.4rem auto 0.2rem; color: var(--ink-dim); font-size: 0.85rem; }
.oh-or::before, .oh-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* Valoración del motor bajo el tablero de los ejercicios (el hueco está reservado: aparecer no mueve nada) */
.eval-strip-white .eval-strip-num { color: #f2f5f4; }
.eval-strip-black .eval-strip-num { color: #9fb0b3; }
.stage-help-link { display: block; margin-bottom: 0.7rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: var(--ink); font-size: 0.85rem; font-weight: 600; text-align: center; text-decoration: none; }
.stage-help-link:hover { border-color: var(--teal, #2dd4bf); color: var(--teal, #2dd4bf); }

/* En los tableros donde se juega, un gesto del dedo es del tablero: no desplaza la página ni hace zoom (en el móvil movía todo al mover una pieza). */

/* Tablero de análisis: variantes (como en Lichess, entre paréntesis y más discretas) */
.an-var { color: var(--ink-dim); font-size: 0.9em; }
.an-var .an-mv { opacity: 0.9; }
#an-del { margin-left: 0.4rem; padding: 0.35rem 0.7rem; font-size: 0.8rem; }

/* Panel de aperturas: camino de maestría, misión del día y constancia */
.oh-hero { background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(45, 212, 191, 0.22), transparent 60%), radial-gradient(ellipse 60% 100% at 0% 100%, rgba(122, 162, 255, 0.12), transparent 60%), var(--panel, #323c3e); }
.oh-path { display: flex; justify-content: center; gap: 0.35rem; margin: 0.7rem 0 0.3rem; padding: 0; list-style: none; }
.oh-path li { display: grid; justify-items: center; gap: 0.1rem; min-width: 3.9rem; padding: 0.4rem 0.3rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); opacity: 0.55; }
.oh-path li span { font-size: 1.15rem; }
.oh-path li small { font-size: 0.65rem; letter-spacing: 0.04em; color: var(--ink-dim); }
.oh-path li.past { opacity: 0.9; border-color: rgba(45, 212, 191, 0.4); }
.oh-path li.on { opacity: 1; border-color: var(--teal, #2dd4bf); background: rgba(45, 212, 191, 0.16); box-shadow: 0 0 18px rgba(45, 212, 191, 0.25); transform: translateY(-2px); }
.oh-next { display: block; text-align: center; font-size: 0.8rem; color: var(--ink-dim); }
.oh-next b { color: var(--teal, #2dd4bf); }
.oh-duo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; margin: 1rem 0; }
.oh-mision { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(45, 212, 191, 0.5); border-radius: 18px; background: linear-gradient(120deg, rgba(45, 212, 191, 0.14), rgba(45, 212, 191, 0.03)); }
.oh-mision-ico { flex: 0 0 auto; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(45, 212, 191, 0.18); font-size: 1.6rem; animation: oh-pulso 2.6s ease-in-out infinite; }
.oh-mision-txt { flex: 1; min-width: 0; }
.oh-mision h2 { margin: 0.1rem 0 0.2rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; }
.oh-mision p { margin: 0; font-size: 0.88rem; color: var(--ink-dim); }
.oh-mision .btn { flex: 0 0 auto; }
@keyframes oh-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.35); } 50% { box-shadow: 0 0 0 10px rgba(45, 212, 191, 0); } }
.oh-actividad { padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.035); }
.oh-act-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-size: 0.85rem; }
.oh-racha { font-size: 0.8rem; color: var(--ink-dim); }
.oh-racha b { color: #ffb347; }
.oh-act-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 0.4rem; height: 4.6rem; margin-top: 0.6rem; }
.oh-bar { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 0.2rem; height: 100%; }
.oh-bar i { align-self: end; width: 100%; max-width: 2rem; height: 0; min-height: 4px; border-radius: 6px 6px 3px 3px; background: rgba(255, 255, 255, 0.12); transition: height 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.oh-actividad.lista .oh-bar i { height: max(4px, var(--h)); }
.oh-bar.con i { background: linear-gradient(180deg, var(--teal, #2dd4bf), #1a9c8c); }
.oh-bar.hoy span { color: var(--teal, #2dd4bf); font-weight: 800; }
.oh-bar span { font-size: 0.68rem; color: var(--ink-dim); }
.oh-g-punto { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: #fbbf24; }
.oh-g-punto b { font-weight: 700; }
@media (max-width: 760px) { .oh-duo { grid-template-columns: 1fr; } .oh-mision { flex-wrap: wrap; } .oh-mision .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .oh-mision-ico { animation: none; } .oh-bar i { transition: none; } }

/* Elegir qué añadir del repertorio de ChessVan */
.oh-starter .oh-starter-pick { width: 100%; margin-top: 0.5rem; }
.sp-card { max-width: 620px; width: calc(100vw - 2rem); }
.sp-list { display: grid; gap: 0.9rem; max-height: 52vh; overflow-y: auto; margin: 0.8rem 0; padding-right: 0.3rem; }
.sp-rep { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.95rem; }
.sp-head small { color: var(--ink-dim); }
.sp-vars { margin: 0.6rem 0 0 1.6rem; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.sp-vars label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; cursor: pointer; font-size: 0.9rem; }
.sp-vars small { color: var(--ink-dim); }
.sp-vars input:disabled + span, .sp-vars input:disabled ~ small { opacity: 0.6; }
.sp-ya { font-style: normal; font-size: 0.78rem; color: var(--teal, #2dd4bf); }
.sp-rep input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--teal, #2dd4bf); }
.sp-count { margin: 0.2rem 0; font-size: 0.85rem; color: var(--ink-dim); }

/* Mientras se juega con el dedo no hay rebote ni «tirar para recargar» que arrastre la página (y con ella el tablero). */
body:has(.cg-wrap.manipulable) { overscroll-behavior: none; }

/* Pantalla intermedia de POWER UP! para cuentas gratuitas */
.pu-intro { max-width: 980px; margin: 0 auto; padding: 0 0.4rem 2.4rem; }
.pu-back { margin: 0.4rem 0; padding: 0.4rem 0.2rem; border: 0; background: none; color: var(--ink-dim); font: inherit; font-size: 0.9rem; cursor: pointer; }
.pu-back:hover { color: var(--ink); }
.pu-hero { padding-top: 2.2rem; padding-bottom: 2.2rem; }
.pu-hero > *:not(.sy-aura) { position: relative; z-index: 1; }
.pu-lead { max-width: 34rem; margin: 0.9rem auto 1.4rem; font-size: 1.08rem; line-height: 1.5; color: var(--ink); }
.pu-lead strong { color: #ffb347; }
.pu-note { display: block; margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-dim); }
.pu-bloque { margin: 2.2rem 0 0; }
.pu-h2 { margin: 0 0 1rem; text-align: center; font-family: var(--font-display); font-size: clamp(1.3rem, 3.6vw, 1.8rem); }
.pu-fases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pu-fase { position: relative; padding: 1.3rem 1.1rem; border: 1px solid rgba(255, 138, 92, 0.35); border-radius: 18px; background: linear-gradient(160deg, rgba(255, 138, 92, 0.12), rgba(255, 255, 255, 0.02)); }
.pu-fase-ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: 0.6rem; border-radius: 50%; background: rgba(255, 138, 92, 0.18); font-size: 1.4rem; }
.pu-fase-tag { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; color: #ff8a5c; }
.pu-fase h3 { margin: 0.3rem 0 0.4rem; font-family: var(--font-display); font-size: 1.1rem; }
.pu-fase p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-dim); }
.pu-premios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.pu-premios li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.95rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.pu-premios li > span { font-size: 1.5rem; line-height: 1; }
.pu-premios strong { display: block; font-size: 0.95rem; }
.pu-premios small { display: block; margin-top: 0.15rem; font-size: 0.82rem; line-height: 1.45; color: var(--ink-dim); }
.pu-preview { pointer-events: none; user-select: none; }
.pu-preview .sy-stage { margin: 0 auto; }
.pu-preview .sy-done, .pu-preview .sy-aura { display: none; }
.pu-ejemplo { margin: 0.6rem 0 0; text-align: center; font-size: 0.8rem; color: var(--ink-dim); }
.pu-cierre { margin-top: 2.4rem; padding: 2rem 1.2rem; text-align: center; border: 1px solid rgba(255, 138, 92, 0.4); border-radius: 22px; background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(255, 138, 92, 0.2), transparent 70%); }
.pu-cierre h2 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: clamp(1.3rem, 3.6vw, 1.8rem); }
.pu-cierre p { margin: 0 0 1.2rem; color: var(--ink-dim); }
.pu-ahora-no { display: block; margin: 1rem auto 0; border: 0; background: none; color: var(--ink-dim); font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; }
@media (max-width: 760px) { .pu-fases, .pu-premios { grid-template-columns: 1fr; } .pu-hero { padding-top: 1.6rem; } }
@media (max-width: 420px) { .pu-intro .sy-cta { font-size: 0.92rem; letter-spacing: 0.04em; padding-left: 1.1rem; padding-right: 1.1rem; } }

/* Estadísticas de cuenta gratuita: historial e hitos */
.sf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 0.6rem 0 1.4rem; }
.sf-tile { display: grid; gap: 0.1rem; padding: 0.95rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.sf-tile b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--teal, #2dd4bf); text-transform: capitalize; }
.sf-tile span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sf-tile small { font-size: 0.78rem; color: var(--ink-dim); line-height: 1.35; }
.sf-hitos { display: grid; gap: 0.7rem; margin: 0.6rem 0 1.4rem; }
.sf-hito { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.sf-hito-ico { font-size: 1.5rem; }
.sf-hito-txt { flex: 1; min-width: 0; display: grid; gap: 0.25rem; }
.sf-hito-txt small { font-size: 0.82rem; color: var(--ink-dim); }
.sf-hito-txt small b { color: var(--ink); }
.sf-bar { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.sf-bar u { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal, #2dd4bf), #7ee8d8); text-decoration: none; }
@media (max-width: 760px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La vista previa borrosa de PRO medía más que un móvil y ensanchaba toda la página de estadísticas */
.stats-main-col { min-width: 0; }
.stats-preview-wrap { overflow: hidden; }

/* Cabecera de «Tu repertorio» más baja: el anillo con su nivel y el camino de maestría van lado a lado, no apilados */
.oh-hero:not(.oh-hero-detail) { padding: 1.05rem 1.6rem; gap: 1.4rem; }
.oh-hero-side { display: flex; align-items: center; gap: 1.5rem; }
.oh-hero:not(.oh-hero-detail) .oh-ring-xl { width: 100px; height: 100px; }
.oh-hero:not(.oh-hero-detail) .oh-ring-xl b { font-size: 1.55rem; }
.oh-hero-path { display: grid; justify-items: center; gap: 0.4rem; }
.oh-hero-path .oh-path { display: grid; grid-template-columns: repeat(2, 5.2rem); gap: 0.35rem; margin: 0; }
.oh-hero-path .oh-path li { min-width: 0; padding: 0.3rem 0.25rem; }
.oh-hero-path .oh-next { max-width: 11.5rem; }
@media (max-width: 760px) { .oh-hero:not(.oh-hero-detail) { grid-template-columns: 1fr; gap: 0.9rem; } .oh-hero-side { justify-content: center; gap: 1rem; } .oh-hero-path .oh-path { grid-template-columns: repeat(2, 4.7rem); } }

/* «Tu perfil por modo»: radar y una tarjeta por modo */
.sm-wrap { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.6rem 0 1.6rem; align-items: stretch; }
.sm-radar-card { flex: 0 1 300px; display: grid; justify-items: center; align-content: center; gap: 0.3rem; padding: 0.8rem 0.6rem; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 50% 45%, rgba(45, 212, 191, 0.1), transparent 70%), rgba(255, 255, 255, 0.03); }
.sm-radar-card small { max-width: 17rem; text-align: center; font-size: 0.78rem; color: var(--ink-dim); }
.sm-radar { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.sm-radar .rej { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; }
.sm-radar .eje { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.sm-radar .forma { fill: rgba(45, 212, 191, 0.28); stroke: var(--teal, #2dd4bf); stroke-width: 2.2; stroke-linejoin: round; transform-box: view-box; transform-origin: 150px 138px; animation: sm-radar-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.sm-radar .punto { fill: var(--teal, #2dd4bf); stroke: #0f1a1b; stroke-width: 2; }
.sm-radar .punto.sin { fill: rgba(255, 255, 255, 0.35); }
.sm-radar .etq { font-size: 19px; }
@keyframes sm-radar-in { from { transform: scale(0.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sm-grid { flex: 1 1 380px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.sm-tile { display: grid; justify-items: center; gap: 0.55rem; padding: 0.95rem 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); transition: transform 0.2s ease, border-color 0.2s ease; animation: sm-tile-in 0.5s ease both; animation-delay: calc(var(--i) * 70ms); }
.sm-tile:hover { transform: translateY(-3px); border-color: rgba(45, 212, 191, 0.45); }
.sm-tile header { display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; }
.sm-ico { font-size: 1.15rem; }
.sm-ring { position: relative; display: grid; place-items: center; width: 76px; height: 76px; }
.sm-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sm-ring .bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 7; }
.sm-ring .fg { fill: none; stroke: var(--teal, #2dd4bf); stroke-width: 7; stroke-linecap: round; stroke-dasharray: var(--len) var(--tot); animation: sm-anillo 1s ease-out both; }
.sm-medio .fg { stroke: #f5b042; }
.sm-bajo .fg { stroke: #ef6a5b; }
.sm-vacio .bg { stroke-dasharray: 4 5; stroke: rgba(255, 255, 255, 0.22); }
.sm-ring b { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; }
.sm-ring b small { font-size: 0.6em; color: var(--ink-dim); }
.sm-vacio .sm-ring b { color: var(--ink-dim); }
.sm-stars { display: inline-flex; gap: 2px; }
.sm-stars svg { width: 17px; height: 17px; fill: rgba(255, 255, 255, 0.14); }
.sm-stars svg.on { fill: #f5b042; filter: drop-shadow(0 0 4px rgba(245, 176, 66, 0.55)); animation: sm-estrella 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(0.35s + var(--d) * 90ms); }
.sm-tile footer { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.72rem; color: var(--ink-dim); }
.sm-tile footer b { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--ink); }
.sm-tile footer span:first-child { font-weight: 800; letter-spacing: 0.12em; }
@keyframes sm-anillo { from { stroke-dasharray: 0 var(--tot); } }
@keyframes sm-estrella { from { transform: scale(0); opacity: 0; } }
@keyframes sm-tile-in { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 760px) { .sm-radar-card { flex-basis: 100%; } .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sm-tile, .sm-radar .forma, .sm-ring .fg, .sm-stars svg.on { animation: none; } }

/* Panel de uso del administrador: cuadro de mando */
.au-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 0.4rem; }
.au-csv { position: relative; }
.au-csv-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 19rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 14px; background: #263234; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); }
.au-csv-menu[hidden] { display: none; } /* el display: grid de arriba anulaba el atributo hidden y el menú se veía siempre */
.au-csv-menu a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0.7rem; border-radius: 9px; color: var(--ink); font-size: 0.88rem; text-decoration: none; }
.au-csv-menu a small { color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.7rem; }
.au-csv-menu a:hover { background: rgba(45, 212, 191, 0.14); }
.au-tabs { display: flex; gap: 0.3rem; overflow-x: auto; margin: 0.5rem 0 1rem; border-bottom: 1px solid var(--line); }
.au-tab { padding: 0.6rem 0.95rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-dim); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.au-tab:hover { color: var(--ink); }
.au-tab.on { color: var(--teal, #2dd4bf); border-bottom-color: var(--teal, #2dd4bf); }
.us-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin: 0.8rem 0 1.2rem; }
.us-kpi { display: grid; gap: 0.2rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 14px; background: rgba(255, 255, 255, 0.03); color: var(--ink); font: inherit; text-align: left; opacity: 0.5; cursor: pointer; transition: opacity 0.2s, background 0.2s, transform 0.2s; }
.us-kpi:hover { transform: translateY(-2px); opacity: 0.85; }
.us-kpi.on { opacity: 1; background: color-mix(in srgb, var(--c) 10%, transparent); }
.us-kpi span { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ink-dim); }
.us-kpi b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.ul-spark { width: 100%; height: 28px; }
.ul-spark polyline { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ul-caja { position: relative; margin-bottom: 1rem; padding: 0.8rem 0.6rem 0.4rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.ul-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ul-grid { stroke: rgba(255, 255, 255, 0.08); }
.ul-tick { fill: var(--ink-dim); font-size: 11px; }
.ul-area { fill: color-mix(in srgb, var(--c) 13%, transparent); stroke: none; }
.ul-linea { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ul-fin { fill: var(--c); }
.ul-cursor { stroke: rgba(255, 255, 255, 0.35); stroke-dasharray: 3 3; }
.ul-fijado { stroke: var(--teal, #2dd4bf); stroke-width: 1.5; }
.ul-punto { fill: var(--c); stroke: #0f1a1b; stroke-width: 2; }
.ul-hit { cursor: crosshair; }
.ul-tip { position: absolute; top: 0.5rem; z-index: 5; display: grid; gap: 0.2rem; min-width: 11rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(15, 26, 27, 0.96); font-size: 0.8rem; pointer-events: none; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.ul-tip[hidden] { display: none; }
.ul-tip b { font-weight: 700; }
.ul-tip span { display: flex; align-items: center; gap: 0.4rem; }
.ul-tip span i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ul-tip strong { margin-left: auto; }
.ul-tip small { margin-top: 0.2rem; color: var(--ink-dim); }
.us-dia { margin-bottom: 1.2rem; padding: 1rem 1.1rem; border: 1px solid rgba(45, 212, 191, 0.4); border-radius: 16px; background: rgba(45, 212, 191, 0.05); }
.us-dia-cab { display: flex; justify-content: space-between; align-items: center; }
.us-dia h3 { margin: 0; font-size: 1rem; }
.us-cerrar { border: 0; background: none; color: var(--ink-dim); font-size: 1rem; cursor: pointer; }
.us-dia-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0; }
.us-dia-chips span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 99px; font-size: 0.78rem; }
.us-dia-chips i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.us-dia-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.us-dia-listas h3 { margin: 0 0 0.3rem; font-size: 0.82rem; color: var(--ink-dim); text-transform: none; }
.us-dia-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 0.6rem; margin: 0.2rem 0; font-size: 0.85rem; }
.us-dia-fila small { color: var(--ink-dim); }
.us-serie { margin-top: 0.8rem; }
.us-serie-tit { margin: 0 0 0.3rem 0.4rem; font-size: 0.9rem; }
.us-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; align-items: start; }
.us-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.us-busca { flex: 1; min-width: 160px; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.04); color: var(--ink); font: inherit; }
.us-medidores { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 0.6rem 0 1.2rem; }
.ue-embudo { display: grid; gap: 0.15rem; margin: 0.5rem 0 1rem; }
.ue-paso { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr 3.4rem 3rem; align-items: center; gap: 0.25rem 0.8rem; padding: 0.3rem 0; }
.ue-nombre { font-size: 0.86rem; }
.ue-barra { display: block; height: 14px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.ue-barra u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2dd4bf, #7ee8d8); text-decoration: none; transform-origin: left; animation: ue-crece 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 90ms); }
.ue-paso b { font-family: var(--font-mono); text-align: right; }
.ue-pct { font-size: 0.78rem; color: var(--ink-dim); }
.ue-caida { grid-column: 2 / -1; margin-top: -0.1rem; font-size: 0.72rem; color: var(--ink-dim); }
.ue-caida.baja { color: #ef9a8f; }
@keyframes ue-crece { from { transform: scaleX(0); } }
.ud { position: relative; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.ud-svg { width: 120px; height: 120px; }
.ud-fondo { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 16; }
.ud-arco { fill: none; stroke: var(--c); stroke-width: 16; transform: rotate(-90deg); transform-origin: 60px 60px; }
.ud-centro { position: absolute; top: 0; left: 0; display: grid; place-content: center; width: 120px; height: 120px; text-align: center; }
.ud-centro b { font-family: var(--font-display); font-size: 1.4rem; }
.ud-centro small { font-size: 0.66rem; color: var(--ink-dim); }
.ud-leyenda { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.ud-leyenda li { display: flex; align-items: center; gap: 0.5rem; }
.ud-leyenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ud-leyenda b { margin-left: auto; font-family: var(--font-mono); }
.ub { display: grid; gap: 0.15rem; margin: 0.4rem 0 0.8rem; }
.ub-fila { display: grid; grid-template-columns: minmax(8rem, 16rem) 1fr 3.5rem; align-items: center; gap: 0.8rem; width: 100%; padding: 0.45rem 0.6rem; border: 1px solid transparent; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer; }
.ub-fila:hover { background: rgba(255, 255, 255, 0.05); }
.ub-fila.on { border-color: rgba(45, 212, 191, 0.55); background: rgba(45, 212, 191, 0.08); }
.ub-barra { display: flex; height: 12px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.07); }
.ub-barra u { display: block; height: 100%; text-decoration: none; }
.ub-barra .libre { background: rgba(255, 255, 255, 0.45); }
.ub-barra .pro { background: var(--teal, #2dd4bf); }
.ub-fila b { font-family: var(--font-mono); text-align: right; }
.ua { display: grid; gap: 0.1rem; margin: 0.4rem 0; }
.ua-fila { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr 3rem 3rem; align-items: center; gap: 0.6rem; margin: 0.3rem 0; font-size: 0.84rem; }
.ua-barra { display: block; height: 12px; overflow: hidden; border-radius: 99px; background: rgba(183, 140, 255, 0.3); }
.ua-barra u { display: block; height: 100%; background: #2dd4bf; text-decoration: none; }
.ua-fila b { font-family: var(--font-mono); text-align: right; }
.ua-fila small { color: var(--ink-dim); }
.um { position: relative; display: grid; justify-items: center; gap: 0.1rem; width: 150px; }
.um svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.um .bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 7; }
.um .fg { fill: none; stroke: var(--teal, #2dd4bf); stroke-width: 7; stroke-linecap: round; }
.um > b { position: absolute; top: 28px; font-family: var(--font-mono); font-size: 1.25rem; }
.um strong { margin-top: 0.2rem; font-size: 0.86rem; }
.um small { font-size: 0.74rem; color: var(--ink-dim); }
@media (max-width: 640px) { .ue-paso { grid-template-columns: 1fr 3rem; } .ue-barra { grid-column: 1 / -1; order: 3; } .ue-caida { grid-column: 1 / -1; } .ub-fila { grid-template-columns: 1fr 3rem; } .ub-barra { grid-column: 1 / -1; order: 3; } .ua-fila { grid-template-columns: 1fr 2.6rem 2.6rem; } .ua-barra { grid-column: 1 / -1; order: 3; } .au-csv-menu { right: auto; left: 0; min-width: 16rem; } }
@media (prefers-reduced-motion: reduce) { .ue-barra u { animation: none; } .us-kpi { transition: none; } }

/* La barra de pestañas del administrador mide más que un móvil: se desplaza en vez de ensanchar toda la página */
.admin-main-tabs { max-width: 100%; overflow-x: auto; }
.admin-main-tab { flex-shrink: 0; white-space: nowrap; }

/* La racha y sus protectores automáticos */
.racha-aviso { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; margin: 0 0 1rem; padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.04); }
.racha-aviso > div { flex: 1; min-width: 14rem; display: grid; gap: 0.15rem; }
.racha-aviso strong { font-size: 0.98rem; }
.racha-aviso small { font-size: 0.84rem; line-height: 1.4; color: var(--ink-dim); }
.racha-aviso small a { color: var(--teal, #2dd4bf); }
.racha-aviso-ico { font-size: 1.6rem; }
.racha-aviso-hielo { border-color: rgba(122, 200, 255, 0.45); background: linear-gradient(110deg, rgba(122, 200, 255, 0.14), rgba(122, 200, 255, 0.03)); }
.racha-aviso-repara { border-color: rgba(245, 176, 66, 0.55); background: linear-gradient(110deg, rgba(245, 176, 66, 0.16), rgba(245, 176, 66, 0.03)); }
.racha-aviso .pro-error { flex-basis: 100%; margin: 0; }
.racha-cerrar { align-self: flex-start; border: 0; background: none; color: var(--ink-dim); font-size: 1rem; cursor: pointer; }
.streak-protectores { margin: 1.4rem 0 0; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.streak-protectores h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.streak-protectores p { margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-dim); }
.streak-protectores p strong { color: var(--ink); }
.sp-hielos { display: flex; align-items: center; gap: 0.5rem; }
.hielo { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 50%; font-size: 1.3rem; filter: grayscale(1); opacity: 0.35; }
.hielo.on { border: 1px solid rgba(122, 200, 255, 0.6); background: rgba(122, 200, 255, 0.14); box-shadow: 0 0 16px rgba(122, 200, 255, 0.3); filter: none; opacity: 1; }
.sp-cuenta { margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-dim); }

.streak-protectores a { color: var(--teal, #2dd4bf); }

/* Controles de la línea de solución: cinco botones del mismo alto repartidos a todo el ancho */
.sol-line-controls { display: grid; grid-template-columns: 1fr 1fr 2.6fr 1fr 1fr; gap: 0.45rem; }
.sol-line-controls button { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.sol-line-controls button svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.sol-line-controls button:hover:not(:disabled) { border-color: var(--teal); background: rgba(45, 212, 191, 0.14); }
.sol-line-controls button:active:not(:disabled) { transform: scale(0.96); }
.sol-line-controls button:disabled { opacity: 0.32; cursor: default; }
.sol-line-controls .sol-play { border-color: var(--teal); background: var(--teal); color: #14201e; }
.sol-line-controls .sol-play:hover:not(:disabled) { background: #5eead4; }
.sol-line-docked .sol-line-controls { gap: 0.3rem; }
.sol-line-docked .sol-line-controls button { min-height: 38px; font-size: 0.78rem; }
.sol-line-docked .sol-line-controls button svg { width: 16px; height: 16px; }
.sol-line-controls button { min-width: 0; }
.sol-line-docked .sol-play span { display: none; } /* en el panel lateral estrecho, solo el icono */

/* «Entrena tus aperturas» para cuentas gratuitas: mismo lenguaje visual que el resto del panel (nada de líneas discontinuas) */
.op-card-locked { position: relative; overflow: hidden; border: 1px solid rgba(45, 212, 191, 0.34); background: radial-gradient(120% 150% at 100% 0%, rgba(245, 176, 66, 0.14), transparent 55%), linear-gradient(135deg, rgba(45, 212, 191, 0.11), rgba(255, 255, 255, 0.03)); }
.op-card-locked .op-card-icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border: 1px solid rgba(45, 212, 191, 0.4); border-radius: 16px; background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(245, 176, 66, 0.18)); font-size: 1.9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.op-card-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.75rem; }
.op-card-path span { padding: 0.18rem 0.55rem; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.04); font-size: 0.72rem; color: var(--ink-dim); }
.op-card-path i { width: 10px; height: 1px; background: rgba(255, 255, 255, 0.25); }

/* El botón de PRO de la barra: píldora oscura con borde dorado en degradado, corona y un brillo que la cruza de vez en cuando */
.topnav-pro-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.46rem 1rem 0.46rem 0.8rem; border: 1.5px solid transparent !important; border-radius: 999px; color: #f9dd8f !important; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; background: linear-gradient(#151a1b, #151a1b) padding-box, linear-gradient(135deg, #f9d36b, #b9801a 55%, #f9d36b) border-box !important; box-shadow: 0 4px 18px rgba(232, 160, 44, 0.22); transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease; }
.topnav-pro-btn svg { width: 16px; height: 16px; flex: none; fill: #f5b942; transition: fill 0.2s ease; }
.topnav-pro-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 38%, rgba(255, 233, 160, 0.45) 50%, transparent 62%); transform: translateX(-130%); animation: pro-brillo 6s ease-in-out infinite; pointer-events: none; }
.topnav-pro-btn:hover { transform: translateY(-1px); color: #1a1200 !important; background: linear-gradient(135deg, #f9d36b, #e8a02c) border-box !important; box-shadow: 0 6px 26px rgba(232, 160, 44, 0.5); }
.topnav-pro-btn:hover svg { fill: #1a1200; }
@keyframes pro-brillo { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* Botón dorado de las pantallas que venden PRO */
.btn-pro-solid { position: relative; overflow: hidden; padding: 0.95rem 1.9rem; border: 0; border-radius: 14px; background: linear-gradient(135deg, #f9d36b, #e8a02c); color: #2a1d05; font-size: 1rem; font-weight: 800; box-shadow: 0 10px 30px rgba(232, 160, 44, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.btn-pro-solid::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%); transform: translateX(-130%); animation: pro-brillo 6s ease-in-out infinite; pointer-events: none; }
.btn-pro-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(232, 160, 44, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); }

/* «Tu repertorio, entrenado» para cuentas gratuitas */
.oht-hero { padding: 2.2rem 0 0.8rem; text-align: center; }
.oht-chip { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 99px; background: linear-gradient(135deg, #f9d36b, #e8a02c); color: #2a1d05; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.oht-hero h1 { margin: 0.7rem 0 0.8rem; font-family: var(--font-display); font-size: 2.6rem; }
.oht-lead { max-width: 56ch; margin: 0 auto 1.5rem; line-height: 1.6; color: var(--ink-dim); }
.oht-demo { position: relative; max-width: 780px; margin: 1.6rem auto 1.2rem; }
.oht-demo-tag { position: absolute; top: -0.65rem; right: 1.4rem; z-index: 2; padding: 0.15rem 0.6rem; border-radius: 99px; background: #151a1b; border: 1px solid rgba(245, 176, 66, 0.6); color: #f5b942; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; }
.oht-demo-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.4rem 2rem; padding: 1.4rem 1.7rem; border: 1px solid rgba(245, 176, 66, 0.4); border-radius: 22px; background: radial-gradient(110% 140% at 0% 0%, rgba(45, 212, 191, 0.12), transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35); }
.oht-demo-card .oh-hero-mastery { display: grid; justify-items: center; gap: 0.35rem; }
.oht-demo-side { display: grid; gap: 0.9rem; min-width: 0; }
.oht-demo-side .oh-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0; }
.oht-demo-mision { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid rgba(45, 212, 191, 0.4); border-radius: 14px; background: rgba(45, 212, 191, 0.07); }
.oht-demo-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: rgba(45, 212, 191, 0.18); font-size: 1.2rem; }
.oht-demo-mision > div { display: grid; gap: 0.1rem; text-align: left; }
.oht-demo-mision small { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--teal, #2dd4bf); }
.oht-demo-mision span:last-child { font-size: 0.8rem; color: var(--ink-dim); }
.oht-demo-semana { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--ink-dim); }
.oht-demo-semana b { margin-right: 0.3rem; color: var(--ink); font-size: 0.82rem; }
.oht-demo-semana i { display: grid; justify-items: center; gap: 0.15rem; font-style: normal; }
.oht-demo-semana u { width: 1.5rem; height: 0.4rem; border-radius: 99px; background: rgba(255, 255, 255, 0.14); text-decoration: none; }
.oht-demo-semana i.on u { background: var(--teal, #2dd4bf); }
.oht-demo-semana span { margin-left: auto; color: #f5b942; font-weight: 700; }
.oht-demo-pie { margin: 0.7rem 0 0; text-align: center; font-size: 0.8rem; color: var(--ink-dim); }
.oht-starter { max-width: 640px; margin: 1.4rem auto 1.6rem; padding: 0.8rem 1.2rem; border: 1px solid rgba(45, 212, 191, 0.35); border-radius: 14px; background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(45, 212, 191, 0.03)); text-align: center; font-size: 0.9rem; line-height: 1.55; }
.oht-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.8rem; }
.oht-card { display: grid; align-content: start; gap: 0.5rem; padding: 1.35rem 1.25rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); transition: transform 0.2s ease, border-color 0.2s ease; }
.oht-card:hover { transform: translateY(-3px); border-color: rgba(245, 176, 66, 0.5); }
.oht-card-ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: 0.2rem; border-radius: 14px; background: linear-gradient(135deg, rgba(249, 211, 107, 0.22), rgba(232, 160, 44, 0.1)); border: 1px solid rgba(245, 176, 66, 0.3); font-size: 1.4rem; }
.oht-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.oht-card p { margin: 0; font-size: 0.87rem; line-height: 1.55; color: var(--ink-dim); }
.oht-final { margin: 0.4rem 0 1.2rem; padding: 2.1rem 1.4rem; border: 1px solid rgba(245, 176, 66, 0.4); border-radius: 24px; background: radial-gradient(100% 160% at 50% 0%, rgba(245, 176, 66, 0.16), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); text-align: center; }
.oht-final h2 { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.7rem; }
.oht-final p { max-width: 52ch; margin: 0 auto 1.3rem; line-height: 1.6; color: var(--ink-dim); }
@media (max-width: 900px) { .oht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .oht-hero h1 { font-size: 2rem; } .oht-grid { grid-template-columns: 1fr; } .oht-demo-card { grid-template-columns: 1fr; justify-items: center; padding: 1.2rem 1rem; } .oht-demo-side { width: 100%; } .oht-demo-side .oh-path { grid-template-columns: repeat(2, 1fr); } .oht-final h2 { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .topnav-pro-btn::after, .btn-pro-solid::after { animation: none; } }
@media (max-width: 900px) { .topnav-pro-btn { padding: 0.4rem 0.75rem 0.4rem 0.6rem; font-size: 0.74rem; gap: 0.35rem; } .topnav-pro-btn svg { width: 14px; height: 14px; } }
@media (max-width: 640px) { .topnav-pro-btn { display: none; } }
/* La barra va justa: con poco sitio el botón de PRO pasa de la frase completa a corona + «PRO» y, si aún no cabe, solo la corona */
@media (max-width: 1200px) { .pro-btn-largo { display: none; } }
@media (min-width: 861px) and (max-width: 980px) { .pro-btn-pro { display: none; } .topnav-pro-btn { padding: 0.42rem 0.55rem; } .topnav-link { padding: 0.35rem 0.4rem; font-size: 0.78rem; } }
@media (max-width: 700px) { .pro-btn-pro { display: none; } .topnav-pro-btn { padding: 0.42rem 0.55rem; } }
@media (max-width: 960px) { .topnav-user-rating { display: none; } }
@media (min-width: 861px) and (max-width: 1180px) { #nav-progreso { display: none; } } /* con «Amigos» la barra no cabe en pantallas estrechas: «Progreso» sigue en el menú */
@media (min-width: 861px) and (max-width: 1060px) { #nav-finales { display: none; } }

/* ================= Temas de temporada (se activan solos; ver src/season.js) ================= */
html[data-tema="halloween"] { --bg: #1d1824; --bg-glow: radial-gradient(ellipse 1100px 700px at 10% -10%, rgba(255, 138, 31, 0.16), transparent 55%), radial-gradient(ellipse 900px 650px at 100% 100%, rgba(139, 92, 246, 0.18), transparent 55%), linear-gradient(160deg, #251d2d 0%, #18121f 55%, #1d1824 100%); --panel: #3a3144; --panel-raised: #463b52; --panel-solid: #3a3144; --line: #5f5070; --teal: #ff8a1f; --teal-dim: #c9660a; --teal-glow: rgba(255, 138, 31, 0.3); --panel-tint-teal: rgba(255, 138, 31, 0.13); --violet: #a78bfa; }
html[data-tema="navidad"] { --bg: #12231d; --bg-glow: radial-gradient(ellipse 1100px 700px at 10% -10%, rgba(245, 192, 78, 0.12), transparent 55%), radial-gradient(ellipse 900px 650px at 100% 100%, rgba(229, 72, 77, 0.14), transparent 55%), linear-gradient(160deg, #17302a 0%, #0f1c17 55%, #12231d 100%); --panel: #2d4a3f; --panel-raised: #375a4d; --panel-solid: #2d4a3f; --line: #4f7364; --teal: #f5c04e; --teal-dim: #c79320; --teal-glow: rgba(245, 192, 78, 0.3); --panel-tint-teal: rgba(245, 192, 78, 0.13); --pink: #e5484d; }
html[data-tema="verano"] { --bg: #16323d; --bg-glow: radial-gradient(ellipse 1000px 700px at 95% -10%, rgba(255, 176, 46, 0.2), transparent 55%), radial-gradient(ellipse 900px 650px at 0% 100%, rgba(25, 198, 217, 0.16), transparent 55%), linear-gradient(160deg, #1b3f4c 0%, #12292f 55%, #16323d 100%); --panel: #2f5a6a; --panel-raised: #386a7c; --panel-solid: #2f5a6a; --line: #55808f; --teal: #ffb02e; --teal-dim: #d08a10; --teal-glow: rgba(255, 176, 46, 0.3); --panel-tint-teal: rgba(255, 176, 46, 0.13); }
html[data-tema] #app { position: relative; z-index: 1; }
.topnav-brand { position: relative; }
html[data-tema="halloween"] .topnav-brand::after { content: '🎃'; }
html[data-tema="navidad"] .topnav-brand::after { content: ''; top: -0.95rem; right: -1.1rem; width: 2.5rem; height: 2.2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cpath d='M6 44 C10 14 30 4 50 12 C44 20 40 32 44 44 Z' fill='%23d62839'/%3E%3Cpath d='M6 44 C22 38 36 38 58 46 L60 54 C36 46 22 46 4 54 Z' fill='%23f7f7f7'/%3E%3Ccircle cx='52' cy='12' r='8' fill='%23f7f7f7'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(14deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); } /* el gorro de Papá Noel, sobre el logo */
html[data-tema="verano"] .topnav-brand::after { content: ''; top: -0.9rem; right: -1.6rem; width: 2.6rem; height: 2.6rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 40 L66 112' stroke='%238a5a2b' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 54 C12 20 44 6 60 6 C76 6 108 20 112 54 C98 44 86 44 74 54 C66 44 54 44 46 54 C34 44 22 44 8 54 Z' fill='%23ff5a5f'/%3E%3Cpath d='M60 6 C44 14 40 38 46 54 C52 44 56 44 60 54 Z' fill='%23fff6e5'/%3E%3Cpath d='M60 6 C76 14 80 38 74 54 C68 44 64 44 60 54 Z' fill='%23fff6e5'/%3E%3Ccircle cx='60' cy='5' r='4' fill='%23ffc857'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(14deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); } /* una sombrilla de playa junto al logo */
html[data-tema] .topnav-brand::after { position: absolute; top: -0.35rem; right: -0.7rem; font-size: 1.05rem; pointer-events: none; }

/* Adornos: detrás del contenido y fuera mientras hay un tablero (no distraen al entrenar) */
#tema-deco { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#tema-deco span { position: absolute; left: var(--x); top: -8%; font-size: var(--s); line-height: 1; opacity: 0; animation: tema-cae var(--t) linear var(--d) infinite; will-change: transform, opacity; }
html[data-tema="halloween"] #tema-deco span { top: auto; bottom: -8%; animation-name: tema-sube; }
html[data-tema="navidad"] #tema-deco span { color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, 0.6); }
html[data-tema="verano"] #tema-deco span { top: auto; bottom: -8%; width: var(--s); height: var(--s); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%; animation-name: tema-sube; }
@keyframes tema-cae { 0% { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: 0.7; } 92% { opacity: 0.7; } 100% { transform: translate3d(30px, 108vh, 0) rotate(300deg); opacity: 0; } }
@keyframes tema-sube { 0% { transform: translate3d(0, 6vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: 0.55; } 92% { opacity: 0.55; } 100% { transform: translate3d(-40px, -108vh, 0) rotate(-30deg); opacity: 0; } }
@keyframes tema-brilla { 0%, 100% { transform: scale(0.6); opacity: 0; } 50% { transform: scale(1.3); opacity: 0.85; } }
body:has(cg-board) #tema-deco, body:has(.daily-stage) #tema-deco { display: none; }
#tema-preview { position: fixed; left: 50%; bottom: 1rem; z-index: 90; display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.7rem 0.55rem 1.1rem; border: 1px solid var(--teal); border-radius: 999px; background: rgba(15, 20, 21, 0.95); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-size: 0.86rem; transform: translateX(-50%); }
#tema-preview .btn { padding: 0.3rem 0.8rem; font-size: 0.8rem; }

/* El cartel de la oferta en el panel principal */
.oferta-cartel { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem 2rem; margin: 0 0 1.1rem; padding: 1.3rem 1.8rem; border: 1.5px solid var(--teal); border-radius: 22px; background: radial-gradient(90% 160% at 0% 50%, var(--teal-glow), transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3), 0 0 36px var(--teal-glow); animation: oc-pulso 3.2s ease-in-out infinite; }
.oferta-cartel::before { content: ''; position: absolute; top: -1.4rem; right: 6rem; font-size: 7rem; opacity: 0.1; pointer-events: none; transform: rotate(12deg); }
.oferta-cartel[data-tema="halloween"]::before { content: '🎃'; } .oferta-cartel[data-tema="blackfriday"]::before { content: '🏷️'; } .oferta-cartel[data-tema="navidad"]::before { content: '🎄'; } .oferta-cartel[data-tema="verano"]::before { content: '☀️'; }
.oc-pct { display: flex; align-items: flex-start; font-family: var(--font-display); line-height: 0.9; color: var(--teal); text-shadow: 0 0 24px var(--teal-glow); }
.oc-pct b { font-size: 5rem; letter-spacing: -0.04em; }
.oc-pct span { margin-top: 0.4rem; font-size: 2.2rem; font-weight: 700; }
.oc-texto { display: grid; gap: 0.25rem; min-width: 0; }
.oc-texto small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; color: var(--teal); }
.oc-texto h2 { margin: 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.oc-texto p { margin: 0; font-size: 0.9rem; color: var(--ink-dim); }
.oc-cuenta { margin-top: 0.35rem; font-size: 0.82rem; color: var(--ink-dim); }
.oc-cuenta strong { font-family: var(--font-mono); font-size: 0.95rem; color: var(--ink); }
.oferta-cartel .btn-pro-solid { position: relative; z-index: 1; white-space: nowrap; }
@keyframes oc-pulso { 0%, 100% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3), 0 0 28px var(--teal-glow); } 50% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3), 0 0 48px var(--teal-glow); } }
@media (max-width: 760px) { .oferta-cartel { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.2rem 1rem; } .oc-pct b { font-size: 4.2rem; } .oc-texto h2 { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .oferta-cartel, #tema-deco span { animation: none; } }

/* Administrador · Temas */
.at-ahora { margin: 0.4rem 0 1rem; padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: 12px; font-size: 0.9rem; color: var(--ink-dim); }
.at-ahora.on { border-color: rgba(45, 212, 191, 0.5); background: rgba(45, 212, 191, 0.08); color: var(--ink); }
.at-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.at-card { display: grid; gap: 0.7rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border-top: 4px solid var(--c, var(--teal)); }
.at-card.activo { box-shadow: 0 0 0 1px var(--c, var(--teal)), 0 8px 26px rgba(0, 0, 0, 0.3); }
.at-halloween { --c: #ff8a1f; } .at-blackfriday { --c: #ffd60a; } .at-navidad { --c: #e5484d; } .at-verano { --c: #19c6d9; }
.at-card header { display: flex; align-items: center; gap: 0.6rem; }
.at-card h3 { margin: 0; font-size: 1.05rem; }
.at-emoji { font-size: 1.5rem; }
.at-estado { margin-left: auto; padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 99px; font-size: 0.7rem; color: var(--ink-dim); }
.at-estado.on { border-color: var(--c, var(--teal)); background: var(--c, var(--teal)); color: #14201e; font-weight: 800; }
.at-fila { display: flex; align-items: center; gap: 0.8rem; }
.at-fila label { width: 4.6rem; font-size: 0.82rem; color: var(--ink-dim); }
.at-sel { display: flex; gap: 0.4rem; }
.at-sel select { padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.25); color: var(--ink); font: inherit; font-size: 0.86rem; }
.at-nota { margin: 0; font-size: 0.8rem; color: var(--ink-dim); }
.at-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.at-acciones .btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.at-pie { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.at-msg { font-size: 0.88rem; color: var(--green); }
@media (max-width: 760px) { .at-grid { grid-template-columns: 1fr; } }
/* Blind Spot: el texto de encima pasa de «Observa cada pieza…» a «Hay mate en N. Haz clic en la casilla de origen y luego…», que según el tamaño ocupa 1 o 2 líneas. Se reservan 2 desde el principio: el tablero no baja. */
#bm-instructions { min-height: 2lh; }

/* Barra de valoración: de un degradado negro→blanco a una barra de equilibrio. Negras a la izquierda, blancas a la derecha; el trozo blanco crece según lo que ganan las blancas y la línea de reparto se desliza hasta su sitio. */
/* Antes de la valoración la barra no dice nada: ni mitad y mitad (parecería «igualdad») ni nada pintado, solo un fondo en rayas */
/* La tarjeta «Entrena tus aperturas» del panel: tenía borde pero no relleno, y el texto y el botón quedaban pegados al borde */
.op-card-locked { padding: 1.4rem 1.7rem; border-radius: 20px; gap: 1.2rem 1.8rem; }
.op-card-locked .op-card-body { min-width: 240px; }
.op-card-locked .btn { padding: 0.8rem 1.4rem; white-space: nowrap; }
.oht-grid { grid-auto-rows: 1fr; } /* las seis tarjetas miden lo mismo aunque el texto de una sea más largo */

.op-card-locked .op-card-path { gap: 0.25rem; flex-wrap: nowrap; }
.op-card-locked .op-card-path span { padding: 0.16rem 0.45rem; font-size: 0.68rem; white-space: nowrap; }
.op-card-locked .op-card-path i { width: 6px; }
@media (max-width: 520px) { .op-card-locked .op-card-path { flex-wrap: wrap; } }

/* Edad mínima: aviso para las cuentas antiguas y lista de espera de padres */
#edad-capa { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; background: rgba(8, 12, 13, 0.82); backdrop-filter: blur(4px); }
.edad-caja { display: grid; gap: 0.9rem; width: min(30rem, 100%); padding: 1.6rem 1.5rem; border: 1px solid var(--line); border-radius: 22px; background: var(--panel-solid, #263234); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.edad-caja h2 { margin: 0; font-family: var(--font-display); font-size: 1.35rem; }
.edad-caja p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-dim); }
.edad-caja a { color: var(--teal, #2dd4bf); }
.edad-menor { border: 0; background: none; color: var(--ink-dim); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
.auth-menores { margin-top: 0.8rem; font-size: 0.85rem; color: var(--ink-dim); }
.auth-menores summary { cursor: pointer; text-align: center; }
.pw-form { display: grid; gap: 0.7rem; margin-top: 0.7rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.pw-form p { margin: 0; line-height: 1.5; }
.pw-form input[type="email"] { padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.25); color: var(--ink); font: inherit; }
.pw-msg { min-height: 1.2em; color: var(--green); }

/* La racha como un camino: el peón avanza una casilla por día entrenado y al séptimo corona */
.rp { display: grid; gap: 1.2rem; margin: 0.6rem 0 0; }
.rp-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.8rem; }
.rp-racha { display: grid; }
.rp-racha b { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; }
.rp-racha span, .rp-record { font-size: 0.88rem; color: var(--ink-dim); }
.rp-record strong { color: var(--ink); font-family: var(--font-mono); }
.rp-camino { display: grid; grid-template-columns: repeat(8, 1fr); overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38); }
.rp-c { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #f0d9b5; font-style: normal; font-size: clamp(1.4rem, 5.4vw, 2.5rem); }
.rp-c:nth-child(even) { background: #b58863; }
.rp-c.hecho::after { content: ''; position: absolute; inset: 0; background: rgba(45, 212, 191, 0.34); }
.rp-c.meta { box-shadow: inset 0 0 0 3px rgba(245, 185, 66, 0.9); }
.rp-c em { position: absolute; right: 4px; bottom: 2px; font-size: 0.62rem; font-style: normal; font-weight: 700; color: rgba(0, 0, 0, 0.45); z-index: 1; }
.rp-peon { position: relative; z-index: 2; color: #15191b; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); line-height: 1; }
.rp-peon.anima { animation: rp-paso 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.rp-peon.corona { color: #f5b942; filter: drop-shadow(0 0 10px rgba(245, 185, 66, 0.95)); animation: rp-corona 1.6s ease-in-out infinite; }
.rp-fantasma { position: relative; z-index: 2; color: rgba(245, 185, 66, 0.55); line-height: 1; }
@keyframes rp-paso { from { transform: translateX(-115%); } to { transform: none; } }
@keyframes rp-corona { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2) rotate(-5deg); } }
.rp-texto { margin: -0.4rem 0 0; font-size: 0.95rem; color: var(--ink); }
.rp-bloque { display: grid; gap: 0.5rem; }
.rp-bloque h3 { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
.rp-nivel h3 span { text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--ink); }
.rp-damas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; font-size: 1.6rem; color: #f5b942; filter: drop-shadow(0 0 6px rgba(245, 185, 66, 0.5)); }
.rp-damas small, .rp-nota { font-size: 0.82rem; color: var(--ink-dim); filter: none; }
.rp-nota { margin: 0; }
.rp-hitos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rp-hito { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: 99px; font-size: 0.8rem; color: var(--ink-dim); opacity: 0.6; }
.rp-hito b { font-family: var(--font-mono); font-size: 0.95rem; color: var(--ink); }
.rp-hito.logrado { opacity: 1; border-color: rgba(245, 185, 66, 0.7); background: rgba(245, 185, 66, 0.12); color: #f5d38a; }
.rp-hito.siguiente { opacity: 1; border-style: dashed; border-color: var(--teal, #2dd4bf); }
.rp-escalera { display: flex; align-items: center; gap: 0.3rem; font-size: 1.7rem; }
.rp-escalera i { flex: 1; height: 2px; background: var(--line); }
.rp-piezas { opacity: 0.3; }
.rp-piezas.logrado { opacity: 0.85; color: var(--teal, #2dd4bf); }
.rp-piezas.actual { opacity: 1; filter: drop-shadow(0 0 8px var(--teal-glow, rgba(45, 212, 191, 0.6))); }
.rp-barra { height: 10px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.1); }
.rp-barra u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal-dim, #17a89a), var(--teal, #2dd4bf)); text-decoration: none; transition: width 0.8s ease; }
.rp-mini { display: grid; grid-template-columns: repeat(8, 1fr); margin-top: 0.5rem; overflow: hidden; border-radius: 6px; }
.rp-mini i { display: grid; place-items: center; aspect-ratio: 1; background: #f0d9b5; font-style: normal; font-size: 0.78rem; line-height: 1; color: #15191b; }
.rp-mini i:nth-child(even) { background: #b58863; }
.rp-mini i.hecho { box-shadow: inset 0 0 0 20px rgba(45, 212, 191, 0.34); }
.rp-mini i.actual { color: #15191b; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .rp-peon.anima, .rp-peon.corona { animation: none; } }

/* Barra inferior del móvil: tres pestañas y una hoja para «Practicar». Fuera del móvil no existe; se esconde mientras hay un tablero en pantalla. */
.tabbar, .practicar-panel { display: none; }
@media (max-width: 640px) {
  .tabbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 80; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; padding: 0.35rem 0.6rem calc(0.35rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(21, 26, 27, 0.96); backdrop-filter: blur(10px); }
  .tabbar button { display: grid; justify-items: center; gap: 0.1rem; padding: 0.4rem 0.2rem; border: 0; border-radius: 12px; background: none; color: var(--ink-dim); font: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
  .tabbar button b { font-size: 1.35rem; line-height: 1; }
  .tabbar button.on { background: var(--panel-tint-teal); color: var(--teal, #2dd4bf); }
  #app:has(.tabbar) footer { padding-bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); } /* el pie queda por encima de la barra, no debajo */
  body:has(.tabbar) .install-banner { bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)); } /* el aviso de instalar sube por encima de la barra */
  .hamburger-btn { display: none; }
  body:has(.daily-stage) .tabbar, body:has(.exercise-content) .tabbar, body:has(.opening-train-meta) .tabbar { display: none; } /* solo con un ejercicio en curso; en los menús con mini-tableros se queda */
  body:has(.daily-stage) .install-banner, body:has(.exercise-content) .install-banner, body:has(.opening-train-meta) .install-banner { bottom: 0.8rem; }
  .practicar-panel { position: fixed; inset: 0; z-index: 120; display: none; }
  .practicar-panel.open { display: block; }
  .practicar-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 13, 0.6); }
  .practicar-sheet { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 0.6rem; padding: 1.1rem 1rem calc(1.3rem + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--panel-solid, #263234); box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5); animation: practicar-sube 0.25s ease both; }
  .practicar-sheet h2 { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: 1.1rem; }
  .practicar-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.05); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .practicar-item b { font-size: 1.6rem; }
  .practicar-item span { display: grid; gap: 0.1rem; }
  .practicar-item small { color: var(--ink-dim); }
}
@keyframes practicar-sube { from { transform: translateY(40%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .practicar-sheet { animation: none; } }
.solo-movil { display: none; }
@media (max-width: 640px) { .solo-movil { display: inline; } }

/* Escritorio: más ancho útil. En pantallas anchas las pantallas principales dejaban mucho margen vacío a los lados. (No se toca la pantalla de entrenar finales: su tablero crece con el ancho y está calculada para caber en la altura.) */
@media (min-width: 1360px) {
  .dash-wrap { max-width: 1320px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.4rem; }
  .oh-page, .ab-page { max-width: 1240px; }
  .rk-page { max-width: 980px; }
  .method-page { max-width: 1020px; }
}
@media (min-width: 1700px) {
  .dash-wrap { max-width: 1520px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .oh-page, .ab-page { max-width: 1400px; }
}
/* El aviso de instalar se esconde mientras hay un menú abierto (hamburguesa o «Practicar»): antes quedaba por encima y tapaba sus entradas de abajo. No vale subir el z-index del menú: vive dentro de #app y el aviso está fuera, en otro contexto de apilamiento. */
body:has(.hamburger-panel.open) .install-banner, body:has(.practicar-panel.open) .install-banner { display: none; }
.hamburger-panel { z-index: 200; } /* por encima de la barra inferior del móvil (80): antes la barra tapaba las últimas entradas del menú «Yo» */

/* Calendario sutil de la racha: unas pocas semanas, celdas pequeñas */
.rp-calendario { display: grid; gap: 0.4rem; width: min(100%, 15.5rem); }
.rp-cal-sem, .rp-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.22rem; }
.rp-cal-sem span { text-align: center; font-size: 0.6rem; font-weight: 700; color: var(--ink-dim); }
.rp-cal { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-style: normal; }
.rp-cal em { font-size: 0.58rem; font-style: normal; font-weight: 700; color: rgba(255, 255, 255, 0.4); }
.rp-cal.vacio { background: none; }
.rp-cal.completed { background: linear-gradient(145deg, var(--teal, #2dd4bf), var(--teal-dim, #17a89a)); box-shadow: 0 0 10px rgba(45, 212, 191, 0.28); } .rp-cal.completed em { color: rgba(3, 24, 22, 0.85); }
.rp-cal.frozen { background: rgba(45, 212, 191, 0.16); box-shadow: inset 0 0 0 1.5px rgba(45, 212, 191, 0.55); } .rp-cal.frozen em { color: var(--teal, #2dd4bf); }
.rp-cal.future { background: rgba(255, 255, 255, 0.03); } .rp-cal.future em { color: rgba(255, 255, 255, 0.22); }
.rp-cal.hoy { background: none; box-shadow: inset 0 0 0 1.5px var(--teal, #2dd4bf); } .rp-cal.hoy em { color: var(--teal, #2dd4bf); }
.rp-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0.2rem 0 0; font-size: 0.66rem; color: var(--ink-dim); }
.rp-leyenda span { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.rp-leyenda .completed { background: var(--teal, #2dd4bf); } .rp-leyenda .frozen { background: rgba(45, 212, 191, 0.16); box-shadow: inset 0 0 0 1.5px rgba(45, 212, 191, 0.55); }

/* Escenas de los temas: una sombrilla grande (verano) y un gorro de Papá Noel (Navidad) en una esquina, detrás del contenido y fuera de los ejercicios */
.tema-escena { position: absolute; pointer-events: none; opacity: 0.3; }
html[data-tema="verano"] .tema-escena { left: 1.2rem; bottom: 0.4rem; width: 11rem; height: 11rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 40 L66 112' stroke='%238a5a2b' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 54 C12 20 44 6 60 6 C76 6 108 20 112 54 C98 44 86 44 74 54 C66 44 54 44 46 54 C34 44 22 44 8 54 Z' fill='%23ff5a5f'/%3E%3Cpath d='M60 6 C44 14 40 38 46 54 C52 44 56 44 60 54 Z' fill='%23fff6e5'/%3E%3Cpath d='M60 6 C76 14 80 38 74 54 C68 44 64 44 60 54 Z' fill='%23fff6e5'/%3E%3Ccircle cx='60' cy='5' r='4' fill='%23ffc857'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-8deg); }
html[data-tema="navidad"] .tema-escena { right: 1.4rem; bottom: 0.6rem; width: 9rem; height: 8rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cpath d='M6 44 C10 14 30 4 50 12 C44 20 40 32 44 44 Z' fill='%23d62839'/%3E%3Cpath d='M6 44 C22 38 36 38 58 46 L60 54 C36 46 22 46 4 54 Z' fill='%23f7f7f7'/%3E%3Ccircle cx='52' cy='12' r='8' fill='%23f7f7f7'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-12deg); }
@media (max-width: 640px) { .tema-escena { opacity: 0.22; width: 6rem !important; height: 6rem !important; } }

/* Amigos */
.nav-con-aviso { position: relative; }
.nav-dot { display: inline-grid; place-items: center; min-width: 1.05rem; height: 1.05rem; margin-left: 0.3rem; padding: 0 0.25rem; border-radius: 99px; background: #ef5a4c; color: #fff; font-size: 0.65rem; font-weight: 800; font-style: normal; line-height: 1; }
.nav-dot[hidden] { display: none; }
.tabbar button { position: relative; }
.tabbar .nav-dot { position: absolute; top: 0.15rem; left: calc(50% + 0.6rem); margin: 0; }
.am-card { display: grid; gap: 0.7rem; margin-top: 1rem; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.04); }
.am-card h3, .am-pantalla h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; }
.am-pantalla h3 { margin-top: 1.4rem; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); }
.am-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.am-ver { border: 0; background: none; color: var(--teal, #2dd4bf); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.am-badge { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; border-radius: 99px; background: #ef5a4c; color: #fff; font-size: 0.68rem; font-weight: 800; }
.am-aviso { margin: 0; padding: 0.55rem 0.8rem; border-radius: 12px; background: rgba(245, 185, 66, 0.12); font-size: 0.85rem; }
.am-lista, .am-rank { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.am-linea { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.2rem; }
.am-av { display: grid; flex: none; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: linear-gradient(135deg, #f0a35e, #cf6b4c); color: #1a0f08; font-size: 0.78rem; font-weight: 800; }
.am-com .am-av { background: rgba(255, 255, 255, 0.1); font-size: 1rem; }
.am-txt { display: grid; flex: 1; gap: 0.1rem; min-width: 0; font-size: 0.88rem; line-height: 1.35; overflow-wrap: anywhere; }
.am-txt small, .am-nota, .am-vacio { color: var(--ink-dim); font-size: 0.78rem; }
.am-nota, .am-vacio { margin: 0.2rem 0; line-height: 1.5; }
.am-ico { font-size: 1.15rem; }
.am-invitar { justify-self: start; }
.am-tabs { display: flex; gap: 0.3rem; margin: 0.8rem 0 1rem; overflow-x: auto; border-bottom: 1px solid var(--line); }
.am-tab { padding: 0.6rem 0.9rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink-dim); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.am-tab.on { border-bottom-color: var(--teal, #2dd4bf); color: var(--ink); }
.am-buscar { display: grid; gap: 0.5rem; }
.am-buscar label, .am-form label { font-size: 0.85rem; color: var(--ink-dim); }
.am-pantalla input[type="search"], .am-pantalla select, .am-invite input { padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.25); color: var(--ink); font: inherit; }
.am-acc { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.am-sec { padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--ink-dim); font: inherit; font-size: 0.8rem; cursor: pointer; }
.am-estado { font-size: 0.8rem; color: var(--ink-dim); }
.am-invite { display: flex; gap: 0.5rem; } .am-invite input { flex: 1; min-width: 0; }
.am-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; line-height: 1.45; }
.am-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.am-rank li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.am-rank li.yo { background: rgba(45, 212, 191, 0.12); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.4); }
.am-rank b { width: 1.4rem; text-align: center; font-family: var(--font-mono); }
.am-rank em { font-style: normal; font-weight: 800; color: var(--teal, #2dd4bf); white-space: nowrap; }
.am-reto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; }
.am-reto small { display: block; color: var(--ink-dim); font-size: 0.78rem; }
.am-marcador { font-size: 1.3rem; font-family: var(--font-mono); }
.am-msg { min-height: 1.3em; margin: 0.8rem 0 0; color: var(--teal, #2dd4bf); font-size: 0.85rem; }
@media (min-width: 961px) { .topnav-user-rating { display: inline-block; vertical-align: middle; max-width: 6.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* un nombre de usuario largo (hasta 32 caracteres) no ensancha la barra */
.share-card-identity { min-width: 0; }
.share-card-username { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* un nombre de usuario largo no ensancha la tarjeta de perfil */
.sol-compact .sol-play span { display: none; } /* panel estrecho: solo el icono, para que el texto no se corte */
.sol-compact .sol-line-controls { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; } /* y los cinco botones, iguales */
.sol-compact .sol-line-controls button { padding: 0; }
.sol-line-controls .sol-play span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Valoración: barra vertical pegada al tablero + una línea de texto debajo */
.eval-strip { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: 0.6rem; width: min(560px, 66vh, 84vw); height: 2rem; margin: 0.5rem auto 0; overflow: hidden; } /* una sola línea de altura fija: al llenarse no mueve nada */
.eval-strip-num { min-width: 3.4rem; font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; text-align: right; color: var(--ink-dim); }
.eval-strip-label { min-width: 0; overflow: hidden; font-size: 0.78rem; color: var(--ink-dim); text-overflow: ellipsis; white-space: nowrap; }
.eval-strip-white .eval-strip-num { color: #f2f5f4; }
.eval-strip-black .eval-strip-num { color: #9fb0b3; }
.eval-vbar { --blancas: 50%; position: absolute; z-index: 2; width: 12px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, #12161a, #1d2328); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.16); pointer-events: none; }
.eval-vbar::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #20272c 0 7px, #1a2025 7px 14px); opacity: calc(1 - var(--lista, 0)); } /* rayas neutras hasta que hay valoración */
.eval-vbar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 55%); pointer-events: none; }
.eval-vbar-w { position: absolute; right: 0; bottom: 0; left: 0; height: var(--blancas); background: linear-gradient(90deg, #ffffff, #dde4e2); opacity: var(--lista, 0); transition: height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.eval-vbar[data-orient="black"] .eval-vbar-w { top: 0; bottom: auto; }
.eval-vbar s { position: absolute; right: 2px; left: 2px; bottom: var(--p); height: 1px; background: rgba(140, 150, 156, 0.7); z-index: 1; opacity: var(--lista, 0); }
.eval-vbar[data-orient="black"] s { top: var(--p); bottom: auto; }
.eval-vbar i { position: absolute; right: 0; left: 0; bottom: var(--blancas); z-index: 2; height: 3px; margin-bottom: -1.5px; background: var(--teal, #2dd4bf); box-shadow: 0 0 10px var(--teal-glow, rgba(45, 212, 191, 0.6)); transition: bottom 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.eval-vbar[data-orient="black"] i { top: var(--blancas); bottom: auto; margin-top: -1.5px; margin-bottom: 0; transition-property: top; }
@media (prefers-reduced-motion: reduce) { .eval-vbar-w, .eval-vbar i { transition: none; } }
/* El móvil: los ejercicios llegaban hasta el borde de la pantalla (botones y el botón «i» tocando los bordes). */
@media (max-width: 640px) { .exercise-content { padding-inline: 1rem; } }

/* Racha y Amigos en el navegador: aprovechan el ancho (antes se limitaban a 480 px, como cualquier pantalla de un solo bloque) */
.standalone-view.racha-view, .standalone-view.am-pantalla { max-width: 1180px; padding: 0 1.4rem; }
@media (min-width: 1000px) {
  .rp { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 1.4rem 3rem; }
  .rp-izq, .rp-der { display: grid; gap: 1.4rem; align-content: start; }
  .rp-racha b { font-size: 4.2rem; }
  .rp-calendario { width: min(100%, 22rem); }
  .rp-cal em { font-size: 0.68rem; }
  .rp-damas { font-size: 2rem; }
}
.rp-izq, .rp-der { display: grid; gap: 1.2rem; }
.am-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.am-main, .am-lateral { min-width: 0; } /* la fila de pestañas se desplaza por dentro: no puede ensanchar la columna */
@media (min-width: 1000px) { .am-grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.4rem; align-items: start; } .am-lateral { position: sticky; top: 5.5rem; } }
.am-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (max-width: 999px) { .am-pantalla:not([data-tab="amigos"]) .am-lateral { display: none; } }
.am-caja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.04); }
.am-caja h3, .am-pantalla .am-caja h3 { margin: 0; font-size: 0.82rem; }
.am-caja .am-nota { margin: 0; }
.am-resumen { grid-template-columns: repeat(3, 1fr); text-align: center; }
.am-resumen div { display: grid; gap: 0.1rem; }
.am-resumen b { font-family: var(--font-display); font-size: 1.7rem; color: var(--teal, #2dd4bf); line-height: 1; }
.am-resumen span { font-size: 0.74rem; color: var(--ink-dim); }
.am-tab { padding: 0.8rem 1.15rem; font-size: 0.98rem; }
.am-lista:not(#am-amigos) .am-linea:not(.am-com) { padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
#am-amigos { grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 0.7rem; }
#am-amigos .am-linea { flex-wrap: wrap; min-width: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.am-linea .am-av { width: 2.5rem; height: 2.5rem; }
.am-rank li { padding: 0.75rem 0.9rem; }
.am-rank li.top1 b, .am-rank li.top2 b, .am-rank li.top3 b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #1c1405; }
.am-rank li.top1 b { background: #f5c04e; } .am-rank li.top2 b { background: #cfd6da; } .am-rank li.top3 b { background: #d99a63; }
#am-amigos .am-acc { margin-left: auto; }
.am-invite input { width: 0; } /* sin ancho intrínseco: crece con flex y nunca ensancha la caja */
.wod-item-count { min-width: 2.2rem; font-family: var(--font-mono, monospace); font-size: 1rem; font-weight: 800; text-align: right; color: var(--teal, #2dd4bf); } /* el «xN» de cada modo (personalizado por usuario) */

/* Resumen del WOD: más impresionante. Anillo de aciertos con la performance en el centro, título de la sesión, camino del peón, nivel de pieza y botón a las estadísticas. */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.res-screen .res-stats { grid-template-columns: minmax(15rem, 1.25fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }
.res-stat-main { display: grid; justify-items: center; align-content: center; gap: 0.4rem; text-align: center; background: radial-gradient(120% 100% at 50% 0%, rgba(45, 212, 191, 0.22), transparent 70%), var(--panel); border-color: rgba(45, 212, 191, 0.45); box-shadow: 0 0 40px rgba(45, 212, 191, 0.18), var(--shadow-card); }
.res-gauge { --p: 0; position: relative; display: grid; place-items: center; width: 10.5rem; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--teal, #2dd4bf) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); transition: --p 1.3s cubic-bezier(0.2, 0.8, 0.2, 1); filter: drop-shadow(0 0 14px rgba(45, 212, 191, 0.4)); }
.res-gauge::before { content: ''; position: absolute; inset: 0.7rem; border-radius: 50%; background: var(--bg-solid, #1b2224); }
.res-gauge .res-value { position: relative; font-size: 3rem; line-height: 1; margin-top: -0.6rem; }
.res-gauge-pct { position: absolute; bottom: 2.1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-dim); }
.res-grade { font-family: var(--font-display); font-size: 1.15rem; color: var(--teal, #2dd4bf); }
.res-chip-corona { background: rgba(245, 185, 66, 0.16); border-color: rgba(245, 185, 66, 0.7); color: #f7cf7c; }
.res-nivel { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; padding: 0.9rem 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.res-nivel-sube { border-color: rgba(245, 185, 66, 0.7); box-shadow: 0 0 36px rgba(245, 185, 66, 0.22); }
.res-nivel-pieza { font-size: 2.6rem; line-height: 1; color: var(--teal, #2dd4bf); }
.res-nivel-sube .res-nivel-pieza { color: #f5b942; animation: rp-corona 1.6s ease-in-out infinite; }
.res-nivel-cuerpo { display: grid; flex: 1; gap: 0.4rem; min-width: 0; text-align: left; }
.res-nivel-cuerpo small { color: var(--ink-dim); font-size: 0.78rem; }
.res-mode-bar { height: 6px; margin-top: 0.5rem; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.1); }
.res-mode-bar u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal-dim, #17a89a), var(--teal, #2dd4bf)); text-decoration: none; }
.res-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.4rem; }
.res-stats-btn { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--ink); }
@media (max-width: 800px) { .res-screen .res-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .res-stat-main { grid-column: 1 / -1; } .res-gauge { width: 9rem; } .res-gauge .res-value { font-size: 2.6rem; } .res-actions .btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .res-gauge { transition: none; } .res-nivel-sube .res-nivel-pieza { animation: none; } }
@media (prefers-reduced-motion: reduce) { .res-stat-streak-up { opacity: 1; transform: none; } } /* sin animaciones, la tarjeta de racha tiene que verse igual */

/* Landing: presentación junto al formulario y, debajo, modos, virtudes, pasos y llamada final */
.landing { padding-bottom: 3rem; }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.2rem 1rem; }
.landing .auth-screen { margin: 0 auto; width: 100%; padding: 1.5rem 1.3rem; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3); }
.landing .auth-logo { max-width: 210px; margin-bottom: 1.1rem; }
.landing-pitch { display: grid; gap: 1.1rem; align-content: center; text-align: left; }
.landing-eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; color: var(--teal, #2dd4bf); }
.landing-titulo { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 6.4vw, 3.6rem); line-height: 1.05; }
.landing-titulo em { font-style: normal; background: linear-gradient(90deg, var(--teal, #2dd4bf), #f5b942); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-sub { margin: 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink-dim); }
.landing-puntos { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.landing-puntos li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.98rem; }
.landing-puntos b { display: grid; flex: none; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(45, 212, 191, 0.18); color: var(--teal, #2dd4bf); font-size: 0.85rem; }
.landing-cta-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.landing-cta-fila small { color: var(--ink-dim); font-size: 0.8rem; }
.landing-cta { padding: 0.85rem 1.6rem; font-size: 1.02rem; }
.landing-seccion { max-width: 1180px; margin: 0 auto; padding: 2.4rem 1.2rem 0; }
.landing-seccion h2 { margin: 0 0 1.2rem; font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2rem); }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 0.9rem; }
.landing-card { display: grid; gap: 0.4rem; align-content: start; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.landing-card h3 { margin: 0; font-size: 1.02rem; }
.landing-card p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-dim); }
.landing-icono { font-size: 1.9rem; line-height: 1; }
.landing-card-virtud { background: radial-gradient(120% 100% at 0% 0%, rgba(45, 212, 191, 0.1), transparent 60%), var(--panel); }
.landing-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.landing-pasos li { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.15rem; border: 1px dashed var(--line); border-radius: 18px; }
.landing-pasos b { display: grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--teal, #2dd4bf); color: #07201c; font-family: var(--font-display); font-size: 1.15rem; }
.landing-pasos div { display: grid; gap: 0.15rem; }
.landing-pasos span { font-size: 0.84rem; color: var(--ink-dim); }
.landing-final { display: grid; justify-items: center; gap: 0.8rem; max-width: 1180px; margin: 2.6rem auto 0; padding: 2.2rem 1.2rem; border: 1px solid rgba(45, 212, 191, 0.4); border-radius: 26px; background: radial-gradient(100% 140% at 50% 0%, rgba(45, 212, 191, 0.2), transparent 70%), var(--panel); text-align: center; }
.landing-final h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 4.4vw, 2.2rem); }
.landing-final p { margin: 0; color: var(--ink-dim); }
@media (min-width: 960px) {
  .landing-hero { grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 26rem); gap: 3.4rem; align-items: center; padding-top: 3rem; }
  .landing .auth-screen { margin: 0; }
    .landing-sub { font-size: 1.12rem; }
}


/* Selector de entrenamiento: en el móvil, lo de siempre (una columna); en PC/Mac, un panel ancho con tu punto de partida y las tres opciones como tarjetas. */
.picker-estado, .duration-btn-detail { display: none; }
@media (min-width: 1000px) {
  .duration-picker { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem 1.8rem; align-items: stretch; max-width: 1120px; margin: 2.4rem auto 3rem; padding: 0 1.4rem; text-align: left; }
  .duration-picker > * { grid-column: 1 / -1; }
  .duration-picker > .wod-today, .duration-picker > .duration-picker-eyebrow { grid-column: 1; }
  .duration-picker > .picker-estado { grid-column: 2; display: grid; }
  .duration-picker .wod-today { align-items: flex-start; justify-content: center; gap: 0.5rem; padding: 2rem 2.2rem; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, rgba(45, 212, 191, 0.2), transparent 62%), var(--panel); border: 1px solid rgba(45, 212, 191, 0.35); }
  .duration-picker .wod-today-name { font-size: 2.8rem; line-height: 1.05; }
  .duration-picker .wod-today-tagline { font-size: 1.02rem; text-align: left; }
  .duration-picker .wod-today-focus { font-size: 0.9rem; }
  .picker-estado { gap: 0.9rem; align-content: center; padding: 1.5rem 1.7rem; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
  .picker-estado-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; color: var(--ink-dim); }
  .picker-estado-cifras { display: flex; gap: 2.4rem; }
  .picker-estado-cifras div { display: grid; }
  .picker-estado-cifras b { font-family: var(--font-display); font-size: 2.3rem; line-height: 1; color: var(--teal, #2dd4bf); }
  .picker-estado-cifras small { font-size: 0.78rem; color: var(--ink-dim); }
  .picker-modos { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.74rem; color: var(--ink-dim); }
  .picker-modos span { display: inline-flex; align-items: center; gap: 0.35rem; }
  .picker-modos i { font-style: normal; font-size: 1rem; }
  .duration-picker-title { margin: 0.6rem 0 0; text-align: center; font-size: 2rem; }
  .duration-picker .duration-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
  .duration-picker .duration-btn { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.3rem; min-height: 12.5rem; padding: 1.7rem 1.6rem; border-radius: 22px; text-align: left; transition: border-color 0.15s ease, transform 0.18s ease, box-shadow 0.18s ease; }
  .duration-picker .duration-btn:hover:not(.duration-btn-locked) { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--teal); }
  .duration-picker .duration-btn-tag { font-size: 0.7rem; }
  .duration-picker .duration-btn-label { font-size: 2.5rem; line-height: 1.05; }
  .duration-picker .duration-btn-sub { font-size: 0.9rem; }
  .duration-picker .duration-btn-detail { display: block; margin-top: auto; padding-top: 0.8rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink-dim); }
  .duration-picker .duration-lock { left: auto; right: 1.3rem; top: 1.2rem; }
  .duration-picker .duration-btn-powerup:hover:not(.duration-btn-locked) { box-shadow: 0 18px 44px rgba(255, 90, 60, 0.28), 0 0 0 1px var(--coral); }
}

@media (min-width: 1000px) { .duration-picker .duration-btn-powerup .duration-btn-sub { text-align: left; } }

/* Tu cuenta: perfil a la izquierda y secciones en tarjetas (PC/Mac); una sola columna en el móvil */
.standalone-view.cuenta-view { max-width: 1180px; padding: 0 1.2rem; }
.cuenta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.cuenta-perfil, .cuenta-caja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; align-content: start; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.cuenta-perfil { justify-items: center; text-align: center; }
.cuenta-avatar { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h) 70% 55%), hsl(calc(var(--h) + 50) 70% 42%)); font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); }
.cuenta-nombre { margin: 0; font-family: var(--font-display); font-size: 1.5rem; overflow-wrap: anywhere; }
.cuenta-plan { padding: 0.25rem 0.8rem; border: 1px solid var(--line); border-radius: 99px; font-size: 0.78rem; font-weight: 700; color: var(--ink-dim); }
.cuenta-plan-pro { border-color: rgba(245, 185, 66, 0.7); background: rgba(245, 185, 66, 0.12); color: #f7cf7c; }
.cuenta-email, .cuenta-miembro { margin: 0; font-size: 0.84rem; color: var(--ink-dim); overflow-wrap: anywhere; }
.cuenta-cifras { display: flex; justify-content: center; gap: 1.6rem; margin-top: 0.4rem; }
.cuenta-cifras div { display: grid; justify-items: center; gap: 0.1rem; }
.cuenta-cifras b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--teal, #2dd4bf); }
.cuenta-cifras small { font-size: 0.72rem; color: var(--ink-dim); }
.cuenta-acciones { display: grid; width: 100%; gap: 0.5rem; margin-top: 0.4rem; }
.cuenta-secciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.cuenta-caja h3 { margin: 0; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.cuenta-caja > .btn { width: 100%; }
.cuenta-ventajas { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.cuenta-ventajas b { margin-right: 0.4rem; color: var(--teal, #2dd4bf); }
.cuenta-enlaces { display: grid; gap: 0.2rem; }
.cuenta-enlaces button { padding: 0.45rem 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.cuenta-enlaces button:hover { color: var(--teal, #2dd4bf); text-decoration: underline; }
@media (min-width: 1000px) {
  .cuenta-grid { grid-template-columns: 21rem minmax(0, 1fr); gap: 1.8rem; align-items: start; }
  .cuenta-perfil { position: sticky; top: 5.5rem; padding: 1.8rem 1.5rem; }
  .cuenta-secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cuenta-ancho { grid-column: 1 / -1; }
}

/* Black Friday: la web se ve como siempre; solo hay carteles rojos con la oferta (marquesina bajo la barra, etiqueta en el botón PRO, banner en la pantalla PRO y el cartel del panel) */
.promo-marquesina { overflow: hidden; background: linear-gradient(90deg, #a3031f, #d90429 50%, #a3031f); color: #fff; font-size: 0.86rem; box-shadow: 0 6px 22px rgba(217, 4, 41, 0.35); }
.pm-pista { display: flex; width: max-content; padding: 0.45rem 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; animation: pm-corre 38s linear infinite; }
.pm-pista:hover { animation-play-state: paused; }
.pm-item { padding: 0 2.4rem; }
.pm-item strong { font-weight: 800; }
.pm-item em { font-style: normal; opacity: 0.92; }
.pm-item u { text-underline-offset: 3px; }
@keyframes pm-corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pm-pista { width: 100%; justify-content: center; animation: none; } .pm-item:nth-child(n + 2) { display: none; } }
.bf-etiqueta { margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 99px; background: #d90429; color: #fff; font-size: 0.72rem; font-weight: 800; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); }
.bf-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.9rem; margin: 0 0 1.2rem; padding: 0.7rem 1rem; border-radius: 14px; background: linear-gradient(90deg, #a3031f, #d90429); color: #fff; font-size: 0.95rem; text-align: center; box-shadow: 0 8px 26px rgba(217, 4, 41, 0.3); }
.oferta-cartel[data-tema="blackfriday"] { border-color: rgba(229, 72, 77, 0.75); background: radial-gradient(120% 140% at 0% 0%, rgba(217, 4, 41, 0.3), transparent 62%), var(--panel); box-shadow: 0 0 40px rgba(217, 4, 41, 0.22); }
.oferta-cartel[data-tema="blackfriday"] .oc-pct, .oferta-cartel[data-tema="blackfriday"] .oc-texto small { color: #ff5d6c; text-shadow: 0 0 22px rgba(217, 4, 41, 0.5); }

/* Landing: el valor añadido con un gráfico a un lado (en escritorio) */
/* Barra de racha: menos clásica, más tecnológica (pista oscura de cristal, tramo recorrido en neón y el peón como un nodo que brilla) */
.rp-camino { gap: 4px; padding: 6px; overflow: hidden; border: 1px solid rgba(45, 212, 191, 0.3); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: 0 0 36px rgba(45, 212, 191, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.rp-c, .rp-c:nth-child(even) { overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.55); }
.rp-c.hecho, .rp-c:nth-child(even).hecho { background: linear-gradient(135deg, rgba(45, 212, 191, 0.55), rgba(23, 168, 154, 0.3)); box-shadow: 0 0 14px rgba(45, 212, 191, 0.35); }
.rp-c.hecho::after { content: none; }
.rp-c.meta, .rp-c:nth-child(even).meta { background: radial-gradient(circle at 50% 50%, rgba(245, 185, 66, 0.28), rgba(245, 185, 66, 0.06)); box-shadow: inset 0 0 0 2px rgba(245, 185, 66, 0.85), 0 0 18px rgba(245, 185, 66, 0.3); }
.rp-c em { font-family: var(--font-mono); color: rgba(255, 255, 255, 0.4); }
.rp-peon { color: #fff; filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.95)); }
.rp-peon.corona { color: #f5b942; filter: drop-shadow(0 0 12px rgba(245, 185, 66, 1)); }
.rp-fantasma { color: rgba(245, 185, 66, 0.6); }
.rp-mini { gap: 2px; padding: 3px; border: 1px solid rgba(45, 212, 191, 0.25); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.rp-mini i, .rp-mini i:nth-child(even) { border-radius: 4px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.65); }
.rp-mini i.hecho, .rp-mini i:nth-child(even).hecho { background: linear-gradient(135deg, rgba(45, 212, 191, 0.6), rgba(23, 168, 154, 0.35)); box-shadow: 0 0 8px rgba(45, 212, 191, 0.4); }
.rp-mini i.actual { color: #fff; text-shadow: 0 0 6px rgba(45, 212, 191, 0.9); }

/* Selector de entrenar: el anillo del tiempo y las tres tarjetas con la misma estructura (etiqueta, tiempo, frase y detalle alineados a la izquierda) */
.duration-ring, .duration-tag-powerup { display: none; }
@media (min-width: 1000px) {
  .duration-picker .duration-btn { overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--panel); }
  .duration-picker .duration-btn::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--teal, #2dd4bf), transparent); opacity: 0.8; }
  .duration-picker .duration-btn-powerup::before { background: linear-gradient(90deg, var(--coral, #ff5a3c), #f5b942); }
  .duration-picker .duration-tag-powerup { display: block; }
  .duration-picker .duration-btn-tag { min-height: 1rem; color: var(--teal, #2dd4bf); }
  .duration-picker .duration-btn-powerup .duration-btn-tag { color: var(--coral, #ff5a3c); }
  .duration-picker .duration-btn-label, .duration-picker .duration-btn-powerup .duration-btn-label { font-size: 2.5rem; font-weight: 700; text-align: left; }
  .duration-picker .duration-btn-sub, .duration-picker .duration-btn-powerup .duration-btn-sub { text-align: left; font-size: 0.92rem; color: var(--ink); opacity: 0.85; }
  .duration-picker .duration-btn-powerup .duration-btn-label { color: var(--coral, #ff5a3c); }
  .duration-ring { --c: var(--teal, #2dd4bf); position: absolute; top: 1.4rem; right: 1.4rem; display: grid; place-items: center; width: 4.4rem; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 55%, transparent)); }
  .duration-ring::before { content: ''; position: absolute; inset: 0.4rem; border-radius: 50%; background: #1f2729; }
  .duration-ring b { position: relative; font-family: var(--font-display); font-size: 1.55rem; line-height: 1; color: #fff; margin-top: -0.35rem; }
  .duration-ring small { position: absolute; bottom: 0.95rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
  .duration-ring-powerup { --c: var(--coral, #ff5a3c); }
  .duration-ring-powerup b { margin-top: 0; font-size: 1.7rem; }
  .duration-picker .duration-lock { right: 6.4rem; }
}
.duration-fuego { font-style: normal; }
@media (min-width: 1000px) { .duration-fuego { display: none; } /* en escritorio el 🔥 ya está en el anillo */ }

/* Retos de posición entre amigos */
.mini-tablero { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.mini-tablero .mt-c { fill: #f0d9b5; } .mini-tablero .mt-o { fill: #b58863; }
.mini-tablero .mt-p { font-size: 9px; text-anchor: middle; }
.mini-tablero .mt-b { fill: #fff; stroke: #222; stroke-width: 0.35; paint-order: stroke; }
.mini-tablero .mt-n { fill: #1b1b1b; }
.retar { margin: 1rem 0; border: 1px solid rgba(45, 212, 191, 0.35); border-radius: 16px; background: rgba(45, 212, 191, 0.06); }
.retar summary { padding: 0.85rem 1.1rem; cursor: pointer; font-weight: 700; list-style: none; }
.retar summary::-webkit-details-marker { display: none; }
.retar[open] summary { border-bottom: 1px solid var(--line); }
.retar-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.8rem; padding: 1rem; }
.retar-ej { display: grid; gap: 0.4rem; padding: 0.6rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; }
.retar-ej:hover { transform: translateY(-3px); border-color: var(--teal, #2dd4bf); }
.retar-ej span { font-size: 0.82rem; font-weight: 700; }
.retar-ej small.ok { color: #6ee7a8; } .retar-ej small.mal { color: #ff8a8a; }
.retar-hoja { position: fixed; inset: 0; z-index: 400; display: grid; place-items: end center; }
.retar-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
.retar-panel { position: relative; display: grid; gap: 0.9rem; width: min(100%, 30rem); max-height: 92dvh; overflow-y: auto; padding: 1.4rem 1.3rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--line); border-radius: 22px 22px 0 0; background: #232b2d; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5); }
@media (min-width: 640px) { .retar-hoja { place-items: center; } .retar-panel { border-radius: 22px; } }
.retar-panel h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.retar-cerrar { position: absolute; top: 0.8rem; right: 0.9rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--ink); cursor: pointer; }
.retar-previa { display: flex; align-items: center; gap: 1rem; } .retar-previa .mini-tablero { width: 7.5rem; flex: none; } .retar-previa p { display: grid; gap: 0.2rem; margin: 0; } .retar-previa small { color: var(--ink-dim); }
.retar-amigos { display: grid; gap: 0.5rem; max-height: 14rem; overflow-y: auto; }
.retar-amigo { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.retar-amigo:disabled { opacity: 0.7; cursor: default; }
.retar-comparte { display: grid; gap: 0.5rem; } .retar-comparte .btn { width: 100%; }
.retar-msg { min-height: 1.2rem; margin: 0; font-size: 0.85rem; color: #ff8a8a; text-align: center; } .retar-pie { color: var(--ink-dim); font-size: 0.75rem; text-align: center; }
.rt-lista { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.rt-reto { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.04); }
.rt-enviado { grid-template-columns: 3.4rem minmax(0, 1fr); } .rt-txt { display: grid; gap: 0.2rem; min-width: 0; } .rt-txt small { color: var(--ink-dim); }
@media (max-width: 520px) { .rt-reto { grid-template-columns: 4rem minmax(0, 1fr); } .rt-reto .btn { grid-column: 1 / -1; } }
.rt-marca { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border: 1px solid rgba(45, 212, 191, 0.3); border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, rgba(45, 212, 191, 0.1), transparent 60%), var(--panel); }
.rt-frase { margin: 0; font-size: 1.02rem; } .rt-frase b { font-family: var(--font-display); font-size: 1.25rem; color: var(--teal, #2dd4bf); }
.rt-barra { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--ink-dim); }
.rt-barra i { position: relative; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.1); }
.rt-barra i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--teal-dim, #17a89a), var(--teal, #2dd4bf)); }
.rt-otro i::after { background: linear-gradient(90deg, #d99a63, #f5b942); }
.rt-ok { color: #6ee7a8; font-weight: 800; } .rt-mal { color: #ff8a8a; font-weight: 800; }
.rt-resultado { display: grid; gap: 0.3rem; margin: 1rem 0; padding: 1.2rem; border-radius: 16px; text-align: center; border: 1px solid var(--line); }
.rt-resultado b { font-family: var(--font-display); font-size: 1.6rem; } .rt-resultado.ok { border-color: #6ee7a8; background: rgba(110, 231, 168, 0.1); } .rt-resultado.mal { border-color: #ff8a8a; background: rgba(255, 138, 138, 0.1); }
.auth-reto { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid rgba(45, 212, 191, 0.5); border-radius: 14px; background: rgba(45, 212, 191, 0.1); font-size: 0.9rem; line-height: 1.5; text-align: left; }
.cv-aviso { position: fixed; left: 50%; bottom: 5.5rem; z-index: 500; transform: translateX(-50%); max-width: min(92vw, 28rem); padding: 0.8rem 1.1rem; border: 1px solid rgba(45, 212, 191, 0.6); border-radius: 14px; background: #1e2628; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); font-size: 0.9rem; text-align: center; }

/* Casillas de verificación y botones de opción en el verde de ChessVan (antes salían en el azul del navegador) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--teal, #2dd4bf); }
.am-check input, .auth-checkbox-row input { width: 1.1rem; height: 1.1rem; flex: none; }

/* Resumen del WOD de un vistazo: en escritorio cabe sin scroll (el pie de página se oculta mientras se ve el resumen) */
body:has(.res-screen) #site-footer { display: none; }
@media (min-width: 1000px) {
  .res-screen { max-width: 1180px; margin: 0.7rem auto 0; padding: 0 1.2rem 0.5rem; }
  .res-head { margin-bottom: 0.6rem; } .res-title { font-size: 1.65rem; }
  .res-screen .res-stats { gap: 0.7rem; }
  .res-stat { padding: 0.75rem 1rem; gap: 0.2rem; }
  .res-stat-main { gap: 0.15rem; }
  .res-gauge { width: 7rem; } .res-gauge::before { inset: 0.5rem; }
  .res-gauge .res-value { font-size: 2rem; margin-top: -0.35rem; } .res-gauge-pct { bottom: 1.35rem; font-size: 0.66rem; }
  .res-grade { font-size: 1rem; }
  .res-value { font-size: 1.9rem; }
  .res-nivel { margin: 0.6rem 0; padding: 0.5rem 1rem; gap: 0.8rem; } .res-nivel-pieza { font-size: 1.8rem; }
  .res-modes-title { margin: 0.5rem 0 0.4rem; }
  .res-modes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.55rem; }
  .res-mode { padding: 0.55rem 0.65rem; gap: 0.3rem; }
  .res-mode-head { flex-wrap: wrap; gap: 0.1rem 0.4rem; } .res-mode-name { font-size: 0.76rem; gap: 0.3rem; } .res-mode-icon { font-size: 1rem; }
  .res-dot { width: 17px; height: 17px; font-size: 0.62rem; } .res-mode-bar { margin-top: 0.1rem; height: 5px; }
  .retar { margin: 0.5rem 0; } .retar summary { padding: 0.5rem 1rem; font-size: 0.9rem; }
  .res-actions { margin-top: 0.6rem; }
}
@media (max-width: 700px) {
  .res-screen { margin: 0.5rem auto 0; padding: 0 0.9rem 0.6rem; }
  .res-head { margin-bottom: 0.5rem; } .res-title { font-size: 1.4rem; }
  .res-screen .res-stats { gap: 0.5rem; }
  .res-stat { padding: 0.6rem 0.75rem; }
  .res-stat-main { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; column-gap: 0.9rem; }
  .res-stat-main .res-gauge { grid-row: 1 / span 4; width: 5.6rem; } .res-gauge::before { inset: 0.4rem; } .res-gauge .res-value { font-size: 1.6rem; } .res-gauge-pct { bottom: 1rem; font-size: 0.58rem; }
  .res-value { font-size: 1.6rem; }
  .res-nivel { margin: 0.5rem 0; padding: 0.45rem 0.8rem; } .res-nivel-pieza { font-size: 1.6rem; } .res-nivel-cuerpo small { font-size: 0.7rem; }
  .res-modes-title { margin: 0.4rem 0 0.3rem; }
  .res-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .res-mode { padding: 0.45rem 0.5rem; gap: 0.2rem; } .res-dots { display: none; } .res-mode-name { font-size: 0.68rem; } .res-mode-sub { font-size: 0.64rem; }
  .retar { margin: 0.4rem 0; } .retar summary { padding: 0.45rem 0.8rem; font-size: 0.82rem; }
  .res-actions { margin-top: 0.5rem; gap: 0.5rem; } .res-actions .btn { padding: 0.55rem; font-size: 0.85rem; }
}
@media (max-width: 700px) {
  .res-screen .res-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res-stat { min-width: 0; overflow: hidden; }
  .res-stat-main { grid-column: 1 / -1; }
  .res-stat .res-sub-line, .res-stat .rp-mini, .res-stat .res-chip-corona { display: none; } /* en el móvil, lo justo: el camino del peón está en la pantalla de racha */
  .res-stat-main .res-sub-line { display: block; }
  .res-stat .res-label { font-size: 0.6rem; }
  .res-stat .res-value { font-size: 1.35rem; }
  .res-delta { font-size: 0.72rem; }
  .res-nivel-cuerpo small { display: none; }
  .res-mode-bar { display: none; }
  .res-actions { flex-wrap: nowrap; } .res-actions .btn { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.4rem; font-size: 0.8rem; }
}

/* Mi progreso (gratis): cifras de un vistazo para motivar */
.standalone-view.prg-view { max-width: 1100px; padding: 0 1.2rem 2rem; }
.prg-cab { display: grid; gap: 0.4rem; margin: 0.4rem 0 1.2rem; }
.prg-eyebrow { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; color: var(--teal, #2dd4bf); }
.prg-cab h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height: 1.1; }
.prg-cab p { margin: 0; font-size: 1.05rem; color: var(--ink-dim); }
.prg-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.7rem; margin-bottom: 1.1rem; }
.prg-cifra { display: grid; gap: 0.15rem; align-content: center; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, rgba(45, 212, 191, 0.1), transparent 62%), var(--panel); }
.prg-cifra b { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--teal, #2dd4bf); }
.prg-cifra span { font-size: 0.8rem; color: var(--ink-dim); }
.prg-cifra small.sube { color: #6ee7a8; font-weight: 700; } .prg-cifra small.baja { color: #ff8a8a; font-weight: 700; }
.prg-columnas { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.prg-caja { display: grid; gap: 0.7rem; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.prg-caja h3 { margin: 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.prg-frase { margin: 0; font-size: 0.92rem; } .prg-frase b { color: var(--teal, #2dd4bf); }
.prg-barra { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--ink-dim); }
.prg-barra i { position: relative; height: 9px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.1); }
.prg-barra i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--teal-dim, #17a89a), var(--teal, #2dd4bf)); }
.prg-ant i::after { background: rgba(255, 255, 255, 0.35); }
.prg-barras { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; align-items: end; height: 8.5rem; }
.prg-col { display: grid; grid-template-rows: 1fr auto; gap: 0.3rem; height: 100%; justify-items: center; } .prg-col small { font-size: 0.62rem; color: var(--ink-dim); }
.prg-col b { align-self: end; width: 100%; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, rgba(45, 212, 191, 0.85), rgba(23, 168, 154, 0.35)); }
.prg-col b.mejor { background: linear-gradient(180deg, #f5b942, rgba(245, 185, 66, 0.35)); box-shadow: 0 0 14px rgba(245, 185, 66, 0.4); }
.prg-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1.3rem; }

/* Calendario por meses: se puede ir hacia atrás en el tiempo */
.rp-cal-mount { transition: opacity 0.15s ease; } .rp-cal-mount.cargando { opacity: 0.55; pointer-events: none; }
.rp-cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rp-cal-cab strong { font-family: var(--font-display); font-size: 0.95rem; }
.rp-cal-nav { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.rp-cal-nav:hover:not(:disabled) { border-color: var(--teal, #2dd4bf); color: var(--teal, #2dd4bf); } .rp-cal-nav:disabled { opacity: 0.3; cursor: default; }
.rp-cal-resumen { margin: 0; font-size: 0.8rem; color: var(--ink-dim); text-align: center; }
.rp-cal-hoy { justify-self: center; padding: 0.3rem 0.8rem; border: 1px solid var(--teal-dim, #17a89a); border-radius: 99px; background: none; color: var(--teal, #2dd4bf); font-size: 0.75rem; font-weight: 700; cursor: pointer; }

/* Landing: lo que duele (tarjetas) y el acceso en el móvil */
.landing-seccion-sub { margin: -0.8rem 0 1.1rem; color: var(--ink-dim); }
.landing-pro { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border: 1px solid rgba(245, 185, 66, 0.7); border-radius: 99px; background: rgba(245, 185, 66, 0.12); color: #f7cf7c; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; vertical-align: middle; }
.landing-grid { grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.landing-card-virtud h3 { font-size: 1.08rem; line-height: 1.25; }
.auth-tabs { display: none; }
@media (max-width: 700px) {
  .landing-hero { gap: 0.8rem; padding: 0.8rem 0.9rem 0.3rem; }
  .landing-eyebrow, .landing-puntos, .landing-cta-fila { display: none; }
  .landing-pitch { gap: 0.5rem; }
  .landing-titulo { font-size: 1.85rem; }
  .landing-sub { font-size: 0.95rem; line-height: 1.45; }
  .landing .auth-screen { padding: 0.9rem 1rem 1rem; }
  .landing .auth-logo { max-width: 120px; margin-bottom: 0.6rem; }
  .landing .menu-sub { display: none; }
  .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin-bottom: 0.8rem; padding: 0.25rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
  .auth-tabs button { padding: 0.55rem; border: 0; border-radius: 9px; background: none; color: var(--ink-dim); font: inherit; font-weight: 700; cursor: pointer; }
  .auth-tabs button[aria-selected="true"] { background: var(--teal, #2dd4bf); color: #07201c; }
  .landing .auth-form { gap: 0.55rem; } .landing .auth-form input[type="text"], .landing .auth-form input[type="email"], .landing .auth-form input[type="password"] { padding: 0.7rem 0.85rem; }
  .landing .auth-checkbox-row { font-size: 0.78rem; }
  #auth-switch { display: none; }
}
@media (min-width: 700px) { .landing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .landing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.landing-final { width: calc(100% - 2.4rem); }

/* Importar el repertorio de ChessVan: lo normal es copiarlo entero; elegir líneas concretas queda escondido */
.oh-starter-avanzado { margin-top: 0.7rem; font-size: 0.82rem; color: var(--ink-dim); }
.oh-starter-avanzado summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.oh-starter-avanzado .oh-starter-pick { margin-top: 0.4rem; }
.oh-aviso { max-width: 560px; margin: 0.8rem auto; padding: 0.7rem 0.9rem; border: 1px solid rgba(45, 212, 191, 0.5); border-radius: 12px; background: rgba(45, 212, 191, 0.08); font-size: 0.88rem; }

/* Racha: los protectores, alargados bajo los hitos; en pantalla ancha toda la página se ve de un vistazo, sin scroll */
.streak-protectores { display: grid; gap: 0.8rem; margin: 0; }
.streak-protectores p { margin: 0 0 0.4rem; }
.streak-protectores .sp-texto p:last-child { margin-bottom: 0; }
.sp-cabeza h2 { margin: 0 0 0.5rem; }
@media (min-width: 1000px) {
  .streak-protectores { grid-template-columns: minmax(11rem, auto) minmax(0, 1fr); align-items: center; gap: 1.6rem; padding: 0.9rem 1.3rem; }
  .streak-protectores .sp-texto { padding-left: 1.6rem; border-left: 1px solid var(--line); }
  .streak-protectores .sp-texto p { font-size: 0.84rem; line-height: 1.45; }
  .rp-izq, .rp-der { gap: 1rem; }
  .rp { gap: 1rem 2.6rem; margin-top: 0.2rem; }
  .racha-view h1 { margin: 0 0 0.4rem; font-size: 2rem; }
  .rp-calendario { width: min(100%, 19rem); gap: 0.3rem; } .rp-cal em { font-size: 0.62rem; }
  .rp-damas { font-size: 1.7rem; }
  body:has(.racha-view) #site-footer { display: none; }
}