:root {
  --bg: #0f1419;
  --bg-2: #161d26;
  --panel: #1c2530;
  --panel-2: #232e3b;
  --felt: #1f6b4a;
  --felt-2: #134d34;
  --text: #e6edf3;
  --muted: #8b97a7;
  --accent: #2f81f7;
  --gold: #f5c451;
  --green: #3fb950;
  --yellow: #d8a533;
  --orange: #e08a2b;
  --red: #f0533b;
  --border: #2a3441;
  --radius: 12px;
  --pt-spade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 88'%3E%3Cg transform='translate(40 42)' fill='%23000'%3E%3Cpath d='M0 -36 C-20 -18 -30 -2 -30 14 C-30 30 -14 38 0 24 C14 38 30 30 30 14 C30 -2 20 -18 0 -36 Z'/%3E%3Cpath d='M-9 24 L0 40 L9 24 Z'/%3E%3C/g%3E%3C/svg%3E");
  --pt-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c0-4.2 3.6-7 8-7s8 2.8 8 7z'/%3E%3C/svg%3E");
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: linear-gradient(160deg, var(--bg), var(--bg-2));
  color: var(--text);
  min-height: 100vh;
}

/* ---- Header ---- */
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: calc(12px + var(--safe-top)) max(22px, var(--safe-right)) 12px max(22px, var(--safe-left));
  background: rgba(15, 20, 25, 0.97);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  flex: 1; min-width: 0; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.app-logo {
  width: 42px; height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  display: block;
}
.app-logo-auth {
  width: 72px; height: 72px;
  border-radius: 16px;
  margin: 0 auto 12px;
}
.chip-logo {
  font-size: 26px; color: var(--gold);
  background: var(--panel); width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--gold);
}
.topbar h1 { font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.topbar h1 small, .header-row h1 small { font-size: 12px; color: var(--muted); font-weight: 500; display: block; }
.header-row h1 { font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.tabs { display: flex; gap: 6px; }
.tab {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: .15s;
}
.tab:hover { color: var(--text); background: var(--panel); }
.tab.active { color: #fff; background: var(--accent); }

.topbar-actions, .account-menu { position: relative; flex-shrink: 0; }
.topbar-nav { display: flex; align-items: center; flex: 1; justify-content: flex-end; gap: 12px; min-width: 0; }
.drawer-head, .nav-toggle, .nav-backdrop { display: none; }
@media (min-width: 681px) {
  .topbar-nav .tabs { flex: 1; justify-content: center; order: 1; }
  .topbar-nav .account-menu { order: 2; }
}

.nav-toggle {
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bar {
  display: block; width: 20px; height: 2px; background: var(--text); border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(0,0,0,.6);
}
.account-trigger {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); padding: 6px 10px 6px 6px; border-radius: 999px;
  cursor: pointer; font-size: 13px; max-width: 220px;
}
.account-trigger:hover { border-color: var(--accent); }
.account-avatar, .account-avatar-lg {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  background: var(--panel-2); border: 1px solid var(--border);
}
.account-avatar-lg { width: 44px; height: 44px; }
.account-email-short {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 140px; color: var(--muted); font-weight: 600;
}
.account-chevron { font-size: 10px; color: var(--muted); }
.account-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 280px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.45); padding: 14px; z-index: 50;
}
.account-dropdown-head {
  display: flex; gap: 12px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.account-dropdown-identity { min-width: 0; flex: 1; }
.account-dropdown-identity strong {
  display: block; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-dropdown-actions {
  display: grid;
  gap: 8px;
}
.account-dropdown-actions .btn { margin: 0; }
.account-email-full { display: block; font-size: 12px; color: var(--muted); word-break: break-all; }
.account-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.account-row strong, .account-row code { color: var(--text); font-size: 12px; }
.account-row code { font-family: ui-monospace, monospace; font-size: 11px; }

/* ---- Login gate / Landing (G-02) ---- */
body.auth-locked { overflow: hidden; }
body.auth-locked.landing-scrollable { overflow: auto; }
body.pt-cloud-syncing #app-shell { opacity: 1; }
body.home-boot-active.pt-cloud-syncing #app-shell::before { display: none; }
body.pt-cloud-syncing #app-shell::before {
  content: 'Sincronizando…';
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #e6edf3;
  background: rgba(15, 20, 25, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
body.range-matrix-open { overflow: hidden; }
.auth-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--bg), var(--bg-2));
  padding: max(20px, var(--safe-top)) max(20px, var(--safe-right)) max(20px, var(--safe-bottom)) max(20px, var(--safe-left));
}
.auth-card {
  width: min(420px, 100%); background: var(--panel);
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  padding: 32px 28px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.auth-brand { margin-bottom: 24px; }
.auth-brand .app-logo-auth { margin: 0 auto 12px; }
.auth-brand .chip-logo { margin: 0 auto 12px; }
.auth-brand h1 { font-size: 22px; margin-bottom: 6px; }
.auth-sub { color: var(--muted); font-size: 14px; }
.google-signin-host {
  display: flex; justify-content: center; min-height: 44px; margin-bottom: 12px;
}
.auth-mobile-login {
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  width: 100%; max-width: 320px; margin: 0 auto 10px;
  padding: 14px 20px; font-size: 16px;
}
.auth-error { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 8px; }
.auth-setup {
  text-align: left; font-size: 13px; color: var(--muted);
  background: var(--panel-2); border-radius: 8px; padding: 12px; margin-top: 8px;
}
.auth-setup code { font-size: 12px; }
.auth-hint-title { margin-bottom: 8px; color: var(--text); font-size: 13px; }
.auth-checklist { margin: 8px 0 8px 18px; display: grid; gap: 10px; }
.auth-checklist code.auth-copy {
  display: block; margin-top: 4px; padding: 6px 8px;
  background: var(--bg); border-radius: 6px; font-size: 12px; color: var(--gold);
  word-break: break-all;
}
.auth-warn { color: var(--orange); font-size: 13px; }

/* Landing marketing */
.landing-page.auth-gate {
  display: block;
  place-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--safe-top) 0 0;
  -webkit-overflow-scrolling: touch;
}
.landing-layout {
  display: grid;
  grid-template-columns: 1fr min(400px, 38vw);
  gap: 0;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.landing-main {
  padding: max(16px, var(--safe-top)) 28px max(32px, var(--safe-bottom)) max(20px, var(--safe-left));
}
.landing-login-panel {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: max(20px, var(--safe-top)) max(20px, var(--safe-right)) max(20px, var(--safe-bottom)) 20px;
  background: linear-gradient(180deg, rgba(15,20,25,.55), var(--bg-2));
  border-left: 1px solid var(--border);
}
.landing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}
.landing-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: 14px;
}
.landing-nav a {
  color: var(--muted);
  text-decoration: none;
}
.landing-nav a:hover { color: var(--text); }
.landing-hero { max-width: 720px; margin-bottom: 48px; }
.landing-eyebrow {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.landing-promo-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 14px; padding: 8px 12px; border-radius: 999px;
  background: rgba(47,129,247,.12); border: 1px solid rgba(47,129,247,.28);
  font-size: 13px;
}
.landing-promo-pill a { color: var(--accent); text-decoration: underline; }
.promo-banner {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(47,129,247,.14), rgba(230,161,90,.12));
  border: 1px solid rgba(47,129,247,.28);
}
.promo-banner-kicker {
  margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
}
.promo-banner-title { margin: 0 0 6px; font-size: 16px; line-height: 1.45; }
.promo-banner-note { margin: 0; font-size: 13px; line-height: 1.45; }
.promo-code {
  display: inline-block; padding: 1px 8px; border-radius: 6px;
  background: rgba(0,0,0,.28); border: 1px dashed rgba(255,255,255,.25);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em; letter-spacing: .06em;
}
.landing-hero h1 {
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.12;
  margin: 0 0 14px;
}
.landing-lead { color: var(--muted); font-size: 17px; line-height: 1.5; margin-bottom: 20px; }
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.landing-promo-code-block {
  margin: 0 0 18px;
  max-width: 480px;
}
.landing-promo-code-block h2 {
  font-size: 18px;
  margin: 0 0 6px;
}
.landing-promo-code-block .landing-section-lead {
  margin-bottom: 12px;
  font-size: 14px;
}
.landing-hero-bullets {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  display: grid;
  gap: 6px;
}
.landing-section { margin-bottom: 48px; max-width: 900px; }
.landing-section h2 { font-size: 24px; margin: 0 0 10px; }
.landing-section-lead { color: var(--muted); margin-bottom: 18px; }
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.landing-feature {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.landing-feature h3 { margin: 0 0 8px; font-size: 16px; }
.landing-feature p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 920px;
}
.landing-price-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landing-price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(47,129,247,.22);
}
.landing-price-card h3 { margin: 0; font-size: 18px; }
.landing-price { font-size: 28px; font-weight: 800; }
.landing-price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.landing-price-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  flex: 1;
}
.landing-pricing-note { font-size: 12px; margin-top: 12px; }
.landing-install-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.landing-install-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landing-install-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(245,196,81,.12);
  border: 1px solid rgba(245,196,81,.25);
}
.landing-install-card h3 { margin: 0; font-size: 18px; }
.landing-install-card ol {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  display: grid;
  gap: 6px;
}
.landing-promo-code-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 480px;
}
.landing-promo-code-input {
  flex: 1 1 180px;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.landing-promo-code-input::placeholder {
  letter-spacing: normal;
  text-transform: none;
  font-family: inherit;
  color: var(--muted);
}
.landing-promo-code-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(47,129,247,.22);
}
.landing-promo-code-form .btn { flex: 0 0 auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.landing-cta-band {
  text-align: left;
  padding: 24px;
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(135deg, rgba(47,129,247,.12), rgba(245,196,81,.08));
  border: 1px solid var(--border);
}
.landing-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 24px 0 8px;
  font-size: 13px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.landing-footer a { color: var(--muted); text-decoration: none; }
.landing-footer a:hover { color: var(--text); }
.landing-login-panel .auth-card { width: 100%; max-width: 380px; }
.landing-login-panel .auth-brand h2 { font-size: 20px; margin-bottom: 6px; }
.landing-login-focus .auth-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(47,129,247,.22), 0 0 24px rgba(47,129,247,.15);
}
.tabs .tab-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.session-sample-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid rgba(245,196,81,.35);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

@media (max-width: 960px) {
  body.auth-locked { overflow: auto; }
  .landing-layout { grid-template-columns: 1fr; }
  .landing-login-panel {
    position: static;
    min-height: auto;
    border-left: none;
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: calc(20px + var(--safe-top)) max(16px, var(--safe-right)) calc(28px + var(--safe-bottom)) max(16px, var(--safe-left));
  }
  .landing-top {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .landing-brand { justify-content: center; }
  .landing-nav {
    justify-content: center;
    gap: 8px;
  }
  .landing-nav a:not(.btn) {
    font-size: 13px;
    padding: 6px 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .landing-nav .btn { width: 100%; max-width: 280px; margin: 4px auto 0; }
  .landing-hero { max-width: none; }
}
@media (max-width: 600px) {
  .landing-main { padding: calc(18px + var(--safe-top)) max(14px, var(--safe-right)) calc(28px + var(--safe-bottom)) max(14px, var(--safe-left)); }
  .landing-hero h1 { font-size: 26px; }
  .landing-lead { font-size: 15px; }
  .landing-hero-actions { flex-direction: column; }
  .landing-hero-actions .btn { width: 100%; justify-content: center; }
  .landing-features-grid,
  .landing-pricing-grid,
  .landing-install-grid {
    grid-template-columns: 1fr;
  }
  .landing-section { margin-bottom: 36px; }
  .landing-section h2 { font-size: 20px; }
  .landing-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
  }
  .landing-nav a:not(.btn) {
    display: block;
    text-align: center;
    font-size: 12px;
    padding: 8px 4px;
  }
  .landing-nav .btn {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
  .landing-footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
  }
  .landing-cta-band { padding: 20px 16px; }
  .landing-promo-code-form { max-width: none; }
  .landing-promo-code-form .btn { width: 100%; justify-content: center; }
  .landing-login-panel .auth-card { padding: 24px 18px; max-width: none; }
}

main { padding: 22px; max-width: 1280px; margin: 0 auto; }
.tab-panel { display: none; animation: fade .2s ease; }
.tab-panel.active { display: block; }

/* ---- Página de inicio ---- */
.brand-home-link {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; padding: 0; margin: 0;
  color: inherit; cursor: pointer; text-align: left;
  font: inherit; min-width: 0; flex: 1;
}
.brand-home-link:hover .app-logo { box-shadow: 0 0 16px rgba(245,196,81,.35); }
.brand-text { min-width: 0; }
.brand-text h1 { font-size: 19px; font-weight: 700; letter-spacing: .3px; }

.home-page { display: grid; gap: 28px; padding-bottom: 24px; }
.home-page--boot { visibility: hidden; pointer-events: none; }
.home-boot {
  display: grid; place-items: center;
  min-height: min(72vh, 560px);
  padding: 40px 20px;
  animation: fade .25s ease;
}
.home-boot.hidden { display: none; }
.home-boot-inner { text-align: center; max-width: 320px; padding: 12px; }
.home-boot-msg { font-size: clamp(17px, 3vw, 20px); font-weight: 700; margin-bottom: 8px; color: var(--text); }
.home-boot-hint { font-size: 14px; line-height: 1.45; }
.home-boot .play-boot-spinner { width: 48px; height: 48px; margin-bottom: 18px; border-width: 4px; }

.home-hero {
  position: relative; overflow: hidden; border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(63,185,80,.25);
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(47,129,247,.18), transparent 55%),
    radial-gradient(ellipse 70% 90% at 0% 100%, rgba(31,107,74,.45), transparent 50%),
    linear-gradient(145deg, #163828 0%, var(--panel) 42%, var(--bg-2) 100%);
  padding: clamp(28px, 5vw, 48px) clamp(22px, 4vw, 40px);
  box-shadow: 0 24px 48px rgba(0,0,0,.28);
}
.home-hero-glow {
  position: absolute; top: -40%; right: -10%; width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(245,196,81,.12), transparent 65%);
  pointer-events: none;
}
.home-hero-inner { position: relative; max-width: 640px; }
.home-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.home-greeting {
  font-size: clamp(1.75rem, 4.5vw, 2.35rem); font-weight: 800; line-height: 1.15;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #fff 0%, #c8e6d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-lead { font-size: clamp(15px, 2.2vw, 17px); color: rgba(230,237,243,.82); line-height: 1.55; max-width: 52ch; margin-bottom: 24px; }
.home-lead--loading { color: var(--muted); font-style: italic; }
.home-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; font-size: 16px; font-weight: 700;
  border-radius: 999px; box-shadow: 0 8px 28px rgba(47,129,247,.35);
}
.home-cta-icon { font-size: 18px; color: var(--gold); }

.home-stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.home-contact-notice {
  margin: 12px 0 0;
}
.home-contact-notice.hidden { display: none; }
.home-contact-notice-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(88, 166, 255, 0.4);
  background: rgba(88, 166, 255, 0.1);
  color: inherit;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.home-contact-notice-btn:hover,
.home-contact-notice-btn:focus-visible {
  border-color: rgba(88, 166, 255, 0.7);
  background: rgba(88, 166, 255, 0.16);
  outline: none;
}
.home-contact-notice-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: #7eb6ff;
}
.home-contact-notice-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-contact-notice-copy strong {
  font-size: 14px;
  font-weight: 650;
}
.home-contact-notice-meta {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-contact-notice-cta {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 650;
  color: #9ecbff;
  white-space: nowrap;
}
.home-stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; text-align: center;
}
.home-stat .val { display: block; font-size: 1.35rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.home-stat .lbl { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.home-stat.accent .val { color: var(--green); }
.home-stat.warn .val { color: var(--orange); }

.home-section-head h3 { font-size: 1.1rem; margin-bottom: 4px; }
.home-section-head { margin-bottom: -8px; }

.home-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.home-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; padding: 20px 18px; min-height: 130px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s;
  touch-action: manipulation;
}
.home-card:hover {
  transform: translateY(-3px); border-color: rgba(47,129,247,.45);
  box-shadow: 0 12px 32px rgba(0,0,0,.22); background: var(--panel-2);
}
.home-card:active { transform: translateY(-1px); }
.home-card-featured {
  grid-column: span 1;
  border-color: rgba(63,185,80,.35);
  background: linear-gradient(160deg, rgba(31,107,74,.22), var(--panel));
}
.home-card-featured:hover { border-color: rgba(63,185,80,.55); }
.home-card-coach { border-color: rgba(47,129,247,.28); }
.home-card-coach:hover { border-color: rgba(47,129,247,.5); }
.home-card-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.18);
}
.home-card-icon-svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.home-card-icon-train { color: #6ee7a3; background: linear-gradient(180deg, rgba(63,185,80,.22), rgba(63,185,80,.08)); }
.home-card-icon-learn { color: #fcd34d; background: linear-gradient(180deg, rgba(234,179,8,.2), rgba(234,179,8,.07)); }
.home-card-icon-ranges { color: #9ecbff; background: linear-gradient(180deg, rgba(47,129,247,.2), rgba(47,129,247,.07)); }
.home-card-icon-analysis { color: #6ee7b7; background: linear-gradient(180deg, rgba(16,185,129,.2), rgba(16,185,129,.07)); }
.home-card-icon-sessions { color: #7dd3fc; background: linear-gradient(180deg, rgba(34,211,238,.18), rgba(34,211,238,.06)); }
.home-card-icon-history { color: #d8b4fe; background: linear-gradient(180deg, rgba(168,85,247,.18), rgba(168,85,247,.06)); }
.home-card-icon-errors { color: #ffb86b; background: linear-gradient(180deg, rgba(255,166,87,.22), rgba(255,166,87,.08)); }
.home-card-icon-stats { color: #c4b5fd; background: linear-gradient(180deg, rgba(129,140,248,.2), rgba(129,140,248,.07)); }
.home-card-icon-coach { color: #f9a8d4; background: linear-gradient(180deg, rgba(236,72,153,.18), rgba(236,72,153,.06)); }
.home-card-title { font-size: 16px; font-weight: 700; }
.home-card-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.home-card-badge {
  position: absolute; top: 12px; right: 12px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.home-foot { text-align: center; font-size: 13px; margin-top: -8px; }

/* ---- IA Coach en inicio ---- */
.home-coach { margin-top: 4px; }
.home-install {
  margin-top: 8px;
  padding: 18px 16px 16px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(180deg, rgba(47,129,247,.06), rgba(0,0,0,.12));
}
.home-install-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
}
.home-install-grid { margin-top: 4px; }
.pwa-standalone .home-install { display: none; }
.home-coach-panel {
  position: relative; overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(47,129,247,.28);
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(47,129,247,.14), transparent 55%),
    linear-gradient(155deg, rgba(28,37,48,.95), var(--panel));
  padding: clamp(22px, 4vw, 32px);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.home-coach-top { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.home-coach-avatar {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; font-size: 28px;
  background: linear-gradient(145deg, rgba(47,129,247,.35), rgba(31,107,74,.35));
  border: 1px solid rgba(47,129,247,.4);
  box-shadow: 0 8px 20px rgba(47,129,247,.2);
}
.home-coach-intro { flex: 1; min-width: 0; }
.home-coach-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #9ec5ff; margin-bottom: 6px;
}
.home-coach-title { font-size: clamp(1.2rem, 3vw, 1.45rem); font-weight: 800; margin-bottom: 8px; line-height: 1.25; }
.home-coach-lead { font-size: 14px; color: rgba(230,237,243,.85); line-height: 1.55; max-width: 62ch; }
.home-coach-status {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.home-coach-status.on { background: rgba(63,185,80,.15); color: var(--green); border: 1px solid rgba(63,185,80,.35); }
.home-coach-status.off { background: rgba(224,138,43,.12); color: var(--orange); border: 1px solid rgba(224,138,43,.3); }
.home-coach-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.home-coach-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px;
}
.home-coach-step {
  background: rgba(15,20,25,.45); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 14px 16px;
}
.home-coach-step-num {
  display: inline-flex; width: 24px; height: 24px; border-radius: 8px;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  background: rgba(47,129,247,.2); color: #9ec5ff; margin-bottom: 8px;
}
.home-coach-step h4 { font-size: 14px; margin-bottom: 6px; }
.home-coach-step p { font-size: 12px; color: var(--muted); line-height: 1.45; }
.home-coach-where {
  display: grid; gap: 8px; margin-bottom: 18px;
  padding: 14px 16px; border-radius: var(--radius);
  background: rgba(15,20,25,.35); border: 1px dashed rgba(47,129,247,.25);
}
.home-coach-where h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.home-coach-where ul { margin: 0; padding-left: 18px; font-size: 13px; color: rgba(230,237,243,.88); line-height: 1.5; }
.home-coach-where li { margin: 4px 0; }
.home-coach-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.home-coach-foot .muted-text { font-size: 12px; max-width: 42ch; margin: 0; text-align: left; }
.home-coach-cta { padding: 10px 18px; font-size: 14px; }

@media (max-width: 800px) {
  .home-coach-steps { grid-template-columns: 1fr; }
  .home-coach-top { flex-direction: column; align-items: center; text-align: center; }
  .home-coach-lead { max-width: none; }
  .home-coach-foot { flex-direction: column; align-items: stretch; }
  .home-coach-foot .muted-text { text-align: center; max-width: none; }
}

@media (max-width: 900px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  .home-stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-card-featured { grid-column: span 1; }
  .home-hero { padding: 24px 18px; }
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Guía básica (principiantes) ---- */
.learn-content { max-width: 920px; margin: 0 auto; }
.learn-page { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }
.learn-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 280px at 10% -20%, rgba(234,179,8,.16), transparent 55%),
    radial-gradient(700px 240px at 90% 0%, rgba(47,129,247,.12), transparent 50%),
    var(--panel);
}
.learn-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold, #e3b341);
}
.learn-title {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  line-height: 1.25;
}
.learn-lead {
  margin: 0 0 16px;
  max-width: 62ch;
  color: rgba(230,237,243,.88);
  line-height: 1.55;
}
.learn-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.learn-toc a {
  font-size: 12px;
  color: rgba(230,237,243,.9);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}
.learn-toc a:hover { border-color: rgba(47,129,247,.45); color: #fff; }
.learn-section { margin: 0; }
.learn-section-title { margin: 0 0 8px; font-size: 1.05rem; color: var(--text); text-transform: none; letter-spacing: 0; }
.learn-section-lead { margin: 0 0 14px; color: rgba(230,237,243,.88); line-height: 1.55; max-width: 68ch; }
.learn-list { margin: 0 0 14px; padding-left: 18px; color: rgba(230,237,243,.9); line-height: 1.55; }
.learn-list li { margin: 6px 0; }
.learn-steps { margin: 0; padding-left: 18px; line-height: 1.55; color: rgba(230,237,243,.9); }
.learn-steps li { margin: 8px 0; }
.learn-hand-ranks {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.learn-hand-rank {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  color: rgba(230,237,243,.9);
  line-height: 1.45;
}
.learn-hand-rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.28);
  color: var(--gold, #e3b341);
}
.learn-hand-rank-body strong { color: #fff; }
.learn-example {
  border-left: 3px solid rgba(234,179,8,.55);
  background: rgba(234,179,8,.06);
  padding: 10px 12px;
  border-radius: 0 10px 10px 0;
}
.learn-example-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold, #e3b341);
  margin-bottom: 4px;
}
.learn-example-body { font-size: 13px; color: rgba(230,237,243,.92); line-height: 1.5; }
.learn-positions { display: grid; gap: 8px; margin-bottom: 14px; }
.learn-pos {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  color: rgba(230,237,243,.9);
  line-height: 1.45;
}
.learn-pos-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  background: rgba(47,129,247,.14);
  border: 1px solid rgba(47,129,247,.28);
  color: #9ecbff;
}
.learn-gto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.learn-gto-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.learn-gto-card h4 { margin: 0 0 6px; font-size: 14px; }
.learn-gto-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.learn-drills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.learn-drill {
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  color: inherit;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s ease, transform .15s ease;
}
.learn-drill:hover {
  border-color: rgba(63,185,80,.45);
  transform: translateY(-1px);
}
.learn-drill-title { font-weight: 700; font-size: 14px; }
.learn-drill-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.learn-drill-cta { font-size: 12px; color: var(--green); font-weight: 600; margin-top: 4px; }
.learn-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.learn-ask-chip {
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: rgba(230,237,243,.92);
  cursor: pointer;
}
.learn-ask-chip:hover { border-color: rgba(236,72,153,.4); }
.learn-coach-mount { margin-top: 4px; }
@media (max-width: 800px) {
  .learn-gto-grid { grid-template-columns: 1fr; }
  .learn-drills { grid-template-columns: 1fr; }
  .learn-pos { grid-template-columns: 72px 1fr; }
}

/* ---- Play layout ---- */
.play-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
@media (max-width: 980px) { .play-grid { grid-template-columns: 1fr; } }
.table-wrap { position: relative; }
/* Deja hueco bajo el header sticky al hacer scrollIntoView */
#tab-play, #play-active, #play-setup { scroll-margin-top: 72px; }
.spot-context { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pot { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.play-table-loading {
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 16, 0.28);
  border-radius: 170px;
  pointer-events: all;
  transition: opacity .15s ease;
}
.play-table-loading.hidden { display: none; }
.play-table-spinner {
  width: 30px; height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: pt-spin .75s linear infinite;
  box-shadow: 0 0 12px rgba(245, 196, 81, 0.25);
}
.table-wrap.is-loading-hand .actions .btn,
.table-wrap.is-loading-hand #new-hand,
.table-wrap.is-loading-hand #replay-hand,
.table-wrap.is-loading-hand #new-session,
.table-wrap.is-loading-hand #play-start {
  pointer-events: none; opacity: 0.55;
}
.play-boot {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center;
  background: rgba(15, 20, 25, 0.94);
  border-radius: var(--radius);
}
.play-boot.hidden { display: none; }
.play-boot-inner { text-align: center; padding: 28px 20px; max-width: 280px; }
.play-boot-spinner {
  width: 40px; height: 40px; margin: 0 auto 14px;
  border: 3px solid var(--border); border-top-color: var(--gold);
  border-radius: 50%; animation: pt-spin .85s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }
.play-boot-msg { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.play-boot-hint { font-size: 13px; }

.poker-table { padding: 18px; }
.table-felt {
  --felt-a: #23795a;
  --felt-b: #12583c;
  --felt-c: #0c3d29;
  --rail-a: #4a2e1c;
  --rail-b: #2c1a0f;
  --table-accent: #f5c451;
  --card-accent: #f5c451;
  --seat-bet-bg: rgba(244,213,141,.95);
  --seat-bet-fg: #3a2a06;
  position: relative;
  background:
    radial-gradient(ellipse 62% 70% at 50% 42%, var(--felt-a), var(--felt-b) 62%, var(--felt-c) 100%);
  border: 13px solid var(--rail-b);
  border-radius: 180px;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.5),
    inset 0 6px 26px rgba(255,255,255,.04),
    0 0 0 1px rgba(0,0,0,.55),
    0 14px 40px rgba(0,0,0,.5);
  min-height: 420px; padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
/* Anillo interior de acento (rail) con brillo sutil */
.table-felt::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--table-accent, #f5c451) 22%, transparent),
    inset 0 0 0 5px rgba(0,0,0,.35),
    inset 0 2px 12px rgba(255,255,255,.06);
}

/* Temas de mesa */
.table-felt[data-theme="emerald"] {
  --felt-a: #23795a; --felt-b: #12583c; --felt-c: #0c3d29;
  --rail-a: #4a2e1c; --rail-b: #2c1a0f;
  --table-accent: #f5c451; --card-accent: #f5c451;
}
.table-felt[data-theme="midnight"] {
  --felt-a: #234a72; --felt-b: #143253; --felt-c: #0c2138;
  --rail-a: #2f4258; --rail-b: #182533;
  --table-accent: #6bb4ee; --card-accent: #6bb4ee;
  --seat-bet-bg: rgba(107,180,238,.95); --seat-bet-fg: #06233c;
}
.table-felt[data-theme="crimson"] {
  --felt-a: #6e2434; --felt-b: #4a1723; --felt-c: #300e17;
  --rail-a: #3c2018; --rail-b: #21100c;
  --table-accent: #e6a15a; --card-accent: #e6a15a;
  --seat-bet-bg: rgba(230,161,90,.95); --seat-bet-fg: #341a06;
}

/* Marca de agua central */
.table-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: .07;
}
.table-watermark-mark {
  width: 96px; height: 104px; background: #fff;
  -webkit-mask: var(--pt-spade) center / contain no-repeat;
          mask: var(--pt-spade) center / contain no-repeat;
}
.table-watermark-text {
  font-size: 30px; font-weight: 800; letter-spacing: 2px; color: #fff;
  text-transform: uppercase;
}

.table-9max .seat { min-width: 52px; padding: 3px 6px; }
.table-9max .seat .seat-pos { font-size: 10px; }
.table-9max .seat-cards .card { width: 18px; height: 26px; }
.table-9max .seat.seat-mini { max-width: 44px; padding: 2px 4px; }
.table-9max .seat.seat-mini .seat-pos { font-size: 8px; }

.seats { position: absolute; inset: 0; z-index: 3; }
.seat {
  position: absolute; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(12,18,24,.72), rgba(0,0,0,.55));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 6px 10px 7px; text-align: center; min-width: 74px;
  font-size: 12px; color: var(--muted);
  box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(2px);
}
.seat-body { display: flex; flex-direction: column; align-items: center; }
.seat-avatar {
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-bottom: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
}
.seat-avatar-svg { width: 16px; height: 16px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.7; }
.seat .seat-pos { font-weight: 700; color: var(--text); font-size: 13px; }
.seat .seat-role { font-size: 10px; }
.seat.hero { display: none; }
.seat.villain { border-color: var(--red); box-shadow: 0 4px 14px rgba(240,83,59,.3), inset 0 1px 0 rgba(255,255,255,.06); }
.seat.villain .seat-pos { color: var(--red); }
.seat.villain .seat-avatar { border-color: rgba(240,83,59,.55); }
.seat.dealer::after {
  content: "D"; position: absolute; top: -8px; right: -8px;
  background: radial-gradient(circle at 40% 35%, #fff, #d8d8d8);
  color: #111; border-radius: 50%; width: 20px; height: 20px;
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.5); border: 1px solid rgba(0,0,0,.2);
  z-index: 4;
}

/* Fichas "delante" del jugador, hacia el centro de la mesa.
   La colocación (bet-below/above/left/right) es única por asiento para
   evitar conflictos de top/bottom/left/right en asientos de esquina. */
.seat-bet {
  position: absolute;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--seat-bet-bg); color: var(--seat-bet-fg);
  padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
  z-index: 6;
}
.seat-bet .chip-ico { width: 13px; height: 13px; }
.seat-bet.bet-below { left: 50%; right: auto; top: calc(100% + 6px); bottom: auto; transform: translateX(-50%); }
.seat-bet.bet-above { left: 50%; right: auto; top: auto; bottom: calc(100% + 6px); transform: translateX(-50%); }
.seat-bet.bet-right { left: calc(100% + 5px); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.seat-bet.bet-left { left: auto; right: calc(100% + 5px); top: 50%; bottom: auto; transform: translateY(-50%); }

/* ---- Burbujas de acción (Check / Fold / fichas + bb) ---- */
.seat-act-wrap { margin-top: 5px; display: flex; justify-content: center; }
.action-badge-wrap { min-height: 26px; display: flex; justify-content: center; margin-bottom: 4px; }
.seat-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 14px; font-size: 12px; font-weight: 700;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  animation: pop .18s ease;
}
.seat-act.check { background: #36506b; color: #cfe3ff; }
.seat-act.fold { background: #4a3030; color: #f0b3b3; }
.seat-act.bet { background: #f4d58d; color: #3a2a06; }
.seat-act .chip-ico {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at center, #e7483a 0 38%, #fff 39% 46%, #e7483a 47%);
  border: 2px dashed #fff;
  box-shadow: 0 0 0 1px #b5392e, inset 0 0 2px rgba(0,0,0,.4);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.board-area { text-align: center; z-index: 2; position: relative; }
.board .card { box-shadow: 0 4px 10px rgba(0,0,0,.5); }
/* En escritorio/tablet separa el board de los asientos de arriba para evitar solapes */
@media (min-width: 681px) {
  .table-felt > .board-area { margin-top: 22px; }
  .session-replay-table .table-felt > .board-area { margin-top: 14px; }
}
.villain-action-bar { display: none; min-height: 0; margin-bottom: 6px; justify-content: center; }
.villain-action-bar.is-visible { display: flex; }
.pot {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.45); color: var(--gold);
  padding: 4px 14px; border-radius: 20px; font-weight: 700; font-size: 14px; margin-bottom: 12px;
  position: relative; z-index: 2;
}
.pot-chips { display: inline-flex; align-items: center; }
.pot-chips .chip-ico { width: 18px; height: 18px; }
.board { display: flex; gap: 6px; justify-content: center; min-height: 56px; }
.spot-context { margin-top: 10px; font-size: 13px; color: #dfe7ef; max-width: 460px; }
.session-replay-table .table-felt { min-height: 340px; }
.session-replay-theme-wrap {
  display: flex; justify-content: center; margin: 0 0 10px;
}
.session-replay-theme { justify-content: center; }
.session-street-log { font-size: 13px; color: #dfe7ef; margin: 10px 0 6px; line-height: 1.5; }
.session-street-act { white-space: nowrap; }
.session-spot-head { margin: 8px 0 10px; }
.session-spot-head strong { font-size: 15px; color: var(--gold); }
.session-spot-head .spot-context { margin-top: 6px; }


.hero-area { text-align: center; z-index: 3; position: relative; flex-shrink: 0; }
.hero-label {
  font-size: 12px; color: var(--muted); margin-bottom: 6px; letter-spacing: .5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.hero-label span#hero-pos { color: var(--table-accent, var(--gold)); font-weight: 700; }
.hero-avatar {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(245,196,81,.32), rgba(245,196,81,.06));
  border: 1px solid color-mix(in srgb, var(--table-accent, #f5c451) 55%, transparent);
  position: relative; flex: none;
}
.hero-avatar::after {
  content: ''; position: absolute; inset: 0;
  background-color: var(--table-accent, #f5c451);
  -webkit-mask: var(--pt-user) center / 68% no-repeat;
          mask: var(--pt-user) center / 68% no-repeat;
  opacity: .9;
}
.hero-dealer {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #d8d8d8);
  color: #111; font-size: 10px; font-weight: 800;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.hero-dealer.hidden { display: none; }
.hero-cards { display: flex; gap: 8px; justify-content: center; }
.hero-handname { margin-top: 6px; font-size: 12px; color: var(--green); min-height: 16px; }

/* Swatches del selector de tema */
.theme-chip { display: inline-flex; align-items: center; gap: 7px; }
.theme-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); flex: none;
}
.theme-swatch-emerald { background: radial-gradient(circle at 40% 35%, #2a8a66, #114430); }
.theme-swatch-midnight { background: radial-gradient(circle at 40% 35%, #2c5a8a, #0e2136); }
.theme-swatch-crimson { background: radial-gradient(circle at 40% 35%, #7e2a3c, #300e17); }

/* ---- Cards ---- */
.card {
  display: inline-grid; place-items: center;
  background: #fff; color: #111; border-radius: 7px;
  width: 40px; height: 56px; font-weight: 800; font-size: 17px;
  box-shadow: 0 3px 6px rgba(0,0,0,.4); border: 1px solid #d4d4d4;
}
.card.red { color: #d2261c; }
.card.black { color: #14181d; }
.card-back {
  background: linear-gradient(150deg, #121820 0%, #05080b 55%, #0d141c 100%);
  color: transparent;
  border: 1px solid var(--card-accent, #f5c451);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 3px 6px rgba(0,0,0,.5);
  position: relative; overflow: hidden;
}
.card-back::before {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid color-mix(in srgb, var(--card-accent, #f5c451) 45%, transparent);
  border-radius: 4px;
}
.card-back::after {
  content: ''; position: absolute; inset: 0;
  background-color: var(--card-accent, #f5c451);
  -webkit-mask: var(--pt-spade) center / 50% no-repeat;
          mask: var(--pt-spade) center / 50% no-repeat;
  opacity: .9;
}
.seat-cards {
  display: flex; gap: 3px; justify-content: center; margin-bottom: 4px;
}
.seat-cards .card { width: 22px; height: 30px; font-size: 0; }
.seat-cards.showdown .card { width: 26px; height: 36px; font-size: 12px; }
.seat-chips {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 3px 0; font-size: 10px; font-weight: 700;
}
.seat-chips-street {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(244,213,141,.92); color: #3a2a06;
  padding: 2px 7px; border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.seat-chips-total { color: var(--gold); font-size: 9px; }
.seat-stack {
  font-size: 9px; font-weight: 800; color: rgba(255,255,255,.85);
  margin-bottom: 2px; letter-spacing: 0.02em;
}
.hero-chips .seat-stack { font-size: 11px; margin-bottom: 3px; }
.hero-chips { min-height: 22px; display: flex; justify-content: center; margin-bottom: 4px; }
.hero-chips .seat-chips { margin: 0; }
.seat.folded { opacity: 0.35; }
.seat.folded .seat-cards { display: none; }
.seat.caller { border-color: rgba(47,129,247,.5); }
.seat.caller .seat-pos { color: #7eb8ff; }
.seat.seat-mini { min-width: 0; padding: 2px 7px; }
.seat.seat-mini .seat-cards,
.seat.seat-mini .seat-chips,
.seat.seat-mini .seat-act-wrap,
.seat.seat-mini .seat-role { display: none; }
.card.back {
  background: linear-gradient(150deg, #121820 0%, #05080b 55%, #0d141c 100%);
  color: transparent;
}
.hero-cards .card { width: 54px; height: 76px; font-size: 22px; }

/* ---- Actions ---- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.actions.actions-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-width: 420px; margin-left: auto; margin-right: auto;
}
.btn {
  border: none; border-radius: 9px; padding: 12px 20px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: .15s; color: #fff; background: var(--panel-2);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); }
.btn-fold { background: #444f5c; }
.btn-check, .btn-call { background: #2b7d52; }
.btn-raise, .btn-bet { background: #b5532a; }
.btn-danger { background: var(--red); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---- Feedback ---- */
.feedback {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--panel); border-left: 5px solid var(--accent);
}
.feedback.hidden { display: none; }
.feedback h3 { font-size: 16px; margin-bottom: 8px; }
.feedback .verdict { font-weight: 800; }
.verdict.optima { color: var(--green); }
.verdict.aceptable { color: var(--yellow); }
.verdict.imprecisa { color: var(--orange); }
.verdict.error { color: var(--red); }
.feedback .gto-bars { margin-top: 10px; }

/* ---- Verdict toast ---- */
.verdict-toast {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85);
  z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s;
  background: rgba(28, 37, 48, 0.96); border: 2px solid var(--border);
  border-radius: 16px; padding: 28px 36px; text-align: center; min-width: 200px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.verdict-toast.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.verdict-toast.optima { border-color: var(--green); }
.verdict-toast.aceptable { border-color: var(--yellow); }
.verdict-toast.imprecisa { border-color: var(--orange); }
.verdict-toast.error { border-color: var(--red); }
.vt-verdict { font-size: 28px; font-weight: 800; }
.verdict-toast.optima .vt-verdict { color: var(--green); }
.verdict-toast.aceptable .vt-verdict { color: var(--yellow); }
.verdict-toast.imprecisa .vt-verdict { color: var(--orange); }
.verdict-toast.error .vt-verdict { color: var(--red); }
.vt-freq { font-size: 18px; color: var(--muted); margin-top: 6px; }
.vt-ev { font-size: 15px; color: var(--red); margin-top: 4px; }

.opt-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.opt-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 10px; font-size: 12px;
}
.opt-pill.best { border-color: var(--green); background: rgba(63,185,80,.12); }
.opt-pill.chosen { background: rgba(47,129,247,.15); border-color: var(--accent); }
/* Si coinciden, la UI solo aplica .best (verde); sin doble borde azul+verde */
.opt-pill.chosen.best { border-color: var(--green); background: rgba(63,185,80,.12); box-shadow: none; }
.opt-pill .opt-pct { font-weight: 700; color: var(--gold); }
.dec-review { border-top: 1px solid var(--border); padding: 12px 0; }
.dec-head { font-size: 14px; margin-bottom: 6px; }
.dec-expl { font-size: 12px; color: var(--muted); margin-bottom: 6px; line-height: 1.45; }
.range-log { list-style: none; font-size: 13px; line-height: 1.6; }
.range-log li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.mini-hand { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.mini-hand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mini-hand-actions { display: flex; gap: 6px; margin-top: 6px; }
.mini-link { padding: 3px 8px !important; font-size: 11px !important; }
.tl-expl-block { margin: 4px 0 10px 12px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border-left: 3px solid var(--orange); }
.tl-expl-block.error { border-left-color: var(--red); }
.tl-expl { font-size: 13px; line-height: 1.45; color: var(--text); margin-bottom: 6px; }
.gto-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; }
.gto-bar .lbl { width: 70px; color: var(--muted); }
.gto-bar .track { flex: 1; display: block; background: rgba(255,255,255,.08); border-radius: 6px; height: 14px; overflow: hidden; }
.gto-bar .fill { display: block; height: 100%; min-width: 0; background: var(--accent); }
.gto-bar .pct { width: 44px; text-align: right; color: var(--text); }

.result-line { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; }
.net-pos { color: var(--green); font-weight: 800; }
.net-neg { color: var(--red); font-weight: 800; }

/* ---- Sidebar ---- */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.card-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card-box h3 { font-size: 14px; margin-bottom: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.mini-stats { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; gap: 8px 4px; }
.mini-stats div { flex: 1 1 28%; min-width: 72px; }
.mini-stats div span { font-size: 22px; font-weight: 800; display: block; color: var(--gold); }
.mini-stats div label { font-size: 11px; color: var(--muted); }
.hand-log { list-style: none; font-size: 13px; max-height: 220px; overflow-y: auto; }
.hand-log li { padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.hand-log li:last-child { border: none; }
.toggle-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); cursor: pointer; }

/* ---- Records (history/errors) ---- */
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.panel-head > div { display: flex; gap: 8px; }
.panel-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.panel-icon.home-card-icon {
  width: 36px;
  height: 36px;
}
.panel-icon .home-card-icon-svg {
  width: 20px;
  height: 20px;
}
.record-list { display: flex; flex-direction: column; gap: 10px; }
.record {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
}
.record .rec-cards { display: flex; gap: 4px; }
.record .rec-cards .card { width: 30px; height: 42px; font-size: 13px; }
.record .rec-main { font-size: 14px; }
.record .rec-main .rec-scenario { font-weight: 700; }
.record .rec-main .rec-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.record .rec-right { text-align: right; font-size: 13px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.badge.optima { background: rgba(63,185,80,.2); color: var(--green); }
.badge.aceptable { background: rgba(216,165,51,.2); color: var(--yellow); }
.badge.imprecisa { background: rgba(224,138,43,.2); color: var(--orange); }
.badge.error { background: rgba(240,83,59,.2); color: var(--red); }
.conf-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-left: 4px; vertical-align: middle; }
.conf-badge.conf-alta { background: rgba(63,185,80,.18); color: var(--green); }
.conf-badge.conf-media { background: rgba(216,165,51,.18); color: var(--yellow); }
.conf-badge.conf-baja { background: rgba(240,83,59,.15); color: var(--orange); }
.empty { color: var(--muted); text-align: center; padding: 40px; font-style: italic; }

/* ---- Stats ---- */
.stats-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px; text-align: center; }
.stat-card .big { font-size: 30px; font-weight: 800; color: var(--gold); }
.stat-card .lbl { color: var(--muted); font-size: 13px; margin-top: 4px; }
.dist-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin-top: 10px; }
.dist-bar span { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #0d0d0d; }

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal.hidden { display: none; }
.modal-content { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; }

/* ---- Matriz GTO 13×13 ---- */
.range-matrix-modal { z-index: 60; padding: 12px; align-items: flex-end; }
@media (min-width: 520px) { .range-matrix-modal { align-items: center; } }
.range-matrix-content { max-width: min(96vw, 540px); padding: 16px; max-height: 92vh; }
.range-matrix-head h3 { margin: 0 0 4px; font-size: 17px; }
.range-matrix-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.range-matrix-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin: 8px 0 12px; color: var(--muted); }
.range-matrix-legend span { display: inline-flex; align-items: center; gap: 6px; }
.range-matrix-legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.range-matrix-legend i.raise { background: #e5534b; }
.range-matrix-legend i.call { background: #3fb950; }
.range-matrix-legend i.fold { background: #6e7681; }
.range-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 14px; }
.range-matrix-grid {
  display: grid;
  grid-template-columns: 20px repeat(13, minmax(26px, 1fr));
  gap: 2px;
  min-width: 300px;
}
.rm-label { font-size: 9px; color: var(--muted); display: grid; place-items: center; font-weight: 700; }
.rm-corner { border: none; background: transparent; }
.rm-cell {
  font-size: 8px; font-weight: 700; border-radius: 3px; padding: 3px 0;
  text-align: center; line-height: 1.15; border: 1px solid rgba(0,0,0,.12);
}
.rm-cell.raise { background: #e5534b; color: #fff; }
.rm-cell.call { background: #3fb950; color: #101810; }
.rm-cell.fold { background: #6e7681; color: #f0f0f0; }
.rm-cell-mix.raise, .rm-cell-mix.call, .rm-cell-mix.fold { background: transparent; }
.rm-cell.inrange { background: #3fb950; color: #101810; }
.rm-cell.value { background: #1a7f37; color: #fff; }
.rm-cell.semibluff { background: #d4a012; color: #1a1400; }
.rm-cell.borderline { background: #58a6ff; color: #0d1117; }
.rm-cell.bluff { background: #da3633; color: #fff; opacity: 0.88; }
.rm-cell.capped { background: #388bfd; color: #fff; }
.rm-cell.out { background: #6e7681; color: #c8cdd2; opacity: 0.55; }
.range-matrix-legend i.capped { background: #388bfd; }
.range-matrix-legend i.value { background: #1a7f37; }
.range-matrix-legend i.semibluff { background: #d4a012; }
.range-matrix-legend i.borderline { background: #58a6ff; }
.range-matrix-legend i.bluff { background: #da3633; }
.range-matrix-legend i.hero-mark { background: transparent; box-shadow: 0 0 0 2px var(--gold); }
.range-matrix-legend i.villain-mark { background: transparent; box-shadow: 0 0 0 2px #c97800; }
.rm-cell.hero { box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px rgba(216,165,51,.4); z-index: 1; position: relative; }
.rm-cell.villain { box-shadow: 0 0 0 2px #c97800, 0 0 0 3px rgba(201,120,0,.35); z-index: 1; position: relative; }
.rm-cell.hero.villain { box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #c97800; }
.range-matrix-progress { font-size: 13px; color: var(--muted); margin: 16px 0; text-align: center; }
.btn-matrix {
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-left: 0;
  vertical-align: middle;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  background: rgba(47,129,247,.28) !important;
  box-shadow: 0 0 0 1px rgba(47,129,247,.35);
}
.btn-matrix:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  filter: brightness(1.08);
}
.tl-street { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dec-matrix-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Explorador Rangos (tab) ---- */
.ranges-panel { max-width: 560px; margin: 0 auto; }
.ranges-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.ranges-panel-head h2 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; }
.ranges-filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ranges-filter-row .setup-chips { flex-wrap: wrap; }
.ranges-spot-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ranges-spot-btn {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ranges-spot-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ranges-pos-block { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ranges-pos-label { font-size: 13px; color: var(--muted); min-width: 52px; font-weight: 600; }
.ranges-pos-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ranges-pos-btn {
  min-width: 40px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer;
}
.ranges-pos-btn.hero-active { background: rgba(47,129,247,.25); border-color: var(--accent); color: #fff; }
.ranges-pos-btn.villain-active { background: rgba(229,83,75,.2); border-color: #e5534b; color: #fff; }
.ranges-pos-btn.caller-active { background: rgba(63,185,80,.2); border-color: #3fb950; color: #fff; }
.ranges-spot-title { font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.ranges-explorer-legend { margin-bottom: 8px; }
.ranges-explorer-legend i.raise { background: #e5534b; }
#ranges-matrix-host .range-matrix-wrap { margin-bottom: 0; }

/* ---- Planes / billing ---- */
.pricing-panel { max-width: 920px; margin: 0 auto; }
.pricing-head h2 { margin: 0 0 6px; }
.pricing-current { margin-bottom: 16px; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; font-size: 14px; }
.pricing-change-note {
  margin: 0 0 16px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  border: 1px dashed rgba(47,129,247,.35); border-radius: 10px;
  background: rgba(47,129,247,.06);
}
.annual-upsell-host { margin: 0 0 16px; }
.annual-upsell-host.hidden { display: none; }
.annual-upsell-banner {
  padding: 12px 14px; font-size: 14px; line-height: 1.5;
  border: 1px solid rgba(63,185,80,.35); border-radius: 10px;
  background: rgba(63,185,80,.08);
}
.annual-upsell-text { margin: 0 0 6px; }
.annual-upsell-hint { margin: 0 0 10px; font-size: 12px; }
.pricing-card .btn.btn-sm { margin-top: 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pricing-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: var(--panel-2);
  display: flex; flex-direction: column; gap: 10px;
}
.pricing-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(47,129,247,.25); }
.pricing-card h3 { margin: 0; font-size: 20px; }
.pricing-price { font-size: 28px; font-weight: 800; line-height: 1.1; }
.pricing-price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.pricing-features { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); flex: 1; }
.pricing-features li { margin-bottom: 4px; }
.pricing-card .btn { margin-top: 4px; }
.pricing-bonus-panel { margin-top: 20px; }
.pricing-bonus-panel h3 { margin: 0 0 8px; font-size: 18px; }
.bonus-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.bonus-pack-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bonus-pack-main { display: flex; flex-direction: column; gap: 2px; }
.bonus-pack-price { font-size: 22px; font-weight: 700; color: var(--gold); }
.pricing-foot { margin-top: 16px; font-size: 12px; }
.paywall-modal .paywall-content { max-width: 420px; }
.paywall-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body.paywall-open { overflow: hidden; }

.hidden { display: none !important; }

/* ---- Sesiones ---- */
.muted-text { color: var(--muted); font-size: 13px; }
.muted-text code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; color: var(--gold); }
.import-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.import-box h3 { margin-bottom: 8px; }
.import-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.import-row input[type=file] {
  flex: 1; min-width: 200px; color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px;
}
.import-status { margin-top: 10px; font-size: 13px; color: var(--muted); min-height: 18px; }
.session-card { grid-template-columns: 1fr auto; }
.back-btn { margin-bottom: 14px; }

.badge.grade-A { background: rgba(63,185,80,.2); color: var(--green); }
.badge.grade-B { background: rgba(63,185,80,.15); color: #8fd99a; }
.badge.grade-C { background: rgba(216,165,51,.2); color: var(--yellow); }
.badge.grade-D { background: rgba(224,138,43,.2); color: var(--orange); }
.badge.grade-E { background: rgba(240,83,59,.2); color: var(--red); }

.street-acc { display: flex; flex-direction: column; gap: 8px; }
.compact-street-acc { margin-top: 12px; gap: 5px; }
.compact-street-acc .street-acc-row { font-size: 11px; }
.compact-street-acc .street-acc-row .lbl { width: 58px; }
.compact-street-acc .street-acc-row .track { height: 12px; }
.compact-street-acc .street-acc-row .pct { width: 38px; font-size: 11px; }
.street-acc-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.street-acc-row .lbl { width: 70px; color: var(--muted); }
.street-acc-row .track { flex: 1; display: block; background: rgba(255,255,255,.08); border-radius: 6px; height: 16px; overflow: hidden; }
.street-acc-row .fill { display: block; height: 100%; min-width: 0; border-radius: 6px 0 0 6px; }
.street-acc-row .pct { width: 44px; text-align: right; }

.top-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.mini-hand { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.mini-hand:last-child { border: none; }
.mini-hand .rec-cards .card { width: 24px; height: 34px; font-size: 11px; }
.mini-hand > span:nth-child(2) { flex: 1; }

.review-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.big-cards .card { width: 50px; height: 70px; font-size: 20px; }

.timeline { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.tl-street { font-weight: 800; color: var(--gold); margin: 12px 0 6px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; }
.tl-street:first-child { margin-top: 0; }
.tl-board .card { width: 26px; height: 36px; font-size: 12px; }
.tl-action { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; flex-wrap: wrap; }
.tl-action.hero { background: rgba(245,196,81,.08); border-radius: 6px; padding: 6px 8px; }
.tl-player { min-width: 150px; color: var(--muted); }
.tl-action.hero .tl-player { color: var(--gold); font-weight: 700; }
.tl-move { font-weight: 600; }
.tl-eval { color: var(--orange); font-size: 12px; }
.tl-action .rec-cards .card { width: 24px; height: 34px; font-size: 11px; }

#hand-sort { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }

/* =====================================================================
   RESPONSIVE: tablet y móvil
   ===================================================================== */

/* Tablet */
@media (max-width: 980px) {
  main { padding: 16px; }
  .play-grid { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; flex-wrap: wrap; }
  .sidebar .card-box { flex: 1 1 220px; }
  .table-felt { min-height: 380px; border-radius: 120px; }
}

/* Móvil grande / tablet pequeña */
/* ===== Configuración sesión de entrenamiento ===== */
.play-setup {
  max-width: 520px; margin: 0 auto 20px; padding: 20px 22px;
}
.play-setup-title { margin: 0 0 6px; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.play-setup-sub { margin: 0 0 18px; font-size: 14px; }
.setup-group { margin-bottom: 18px; }
.setup-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.setup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-chips-wrap { gap: 6px; }
.setup-chip {
  border: 1px solid var(--border); background: rgba(255,255,255,.04);
  color: var(--text); border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s;
}
.setup-chip:hover { border-color: rgba(245,196,81,.45); }
.setup-chip.active {
  background: var(--gold); border-color: var(--gold); color: #1a1200;
}
.setup-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
.play-start-btn { margin-top: 8px; padding: 14px; font-size: 16px; }
.play-active.hidden { display: none; }
.play-session-label { margin: -4px 0 10px; font-size: 12px; line-height: 1.35; }

@media (max-width: 680px) {
  .header-bar {
    padding: calc(8px + var(--safe-top)) max(12px, var(--safe-right)) 8px max(12px, var(--safe-left));
    min-height: calc(56px + var(--safe-top));
  }
  .header-row { flex: 1; gap: 10px; }
  .header-row h1 { font-size: 15px; line-height: 1.2; }
  .header-row h1 small { font-size: 11px; }
  .app-logo { width: 34px; height: 34px; border-radius: 8px; }
  .chip-logo { width: 34px; height: 34px; font-size: 20px; flex-shrink: 0; }

  .nav-toggle, .drawer-head { display: flex; }
  .nav-toggle { flex-shrink: 0; }
  .nav-backdrop:not(.hidden) { display: block; }
  body.nav-open { overflow: hidden; }
  body.nav-portal .nav-backdrop { z-index: 9998; }
  body.nav-portal .topbar-nav { z-index: 9999; }

  .topbar-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(320px, 92vw);
    flex: none; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0;
    padding: var(--safe-top) 0 max(32px, var(--safe-bottom));
    margin: 0;
    background: var(--panel);
    border-left: 1px solid var(--border);
    box-shadow: -16px 0 48px rgba(0,0,0,.55);
    z-index: 310;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100%);
    transition: transform .28s ease, opacity .2s ease;
  }
  body.nav-open .topbar-nav {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
  }

  .drawer-head {
    align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,.2); flex-shrink: 0;
  }
  .drawer-title { font-weight: 700; font-size: 15px; letter-spacing: .3px; }
  .nav-close {
    width: 40px; height: 40px; border: none; border-radius: 8px;
    background: transparent; color: var(--muted); font-size: 28px; line-height: 1;
    cursor: pointer; display: grid; place-items: center;
  }

  .account-menu { width: 100%; order: -1; }
  .account-trigger { display: none; }
  .account-dropdown {
    display: block !important;
    position: static; min-width: 0; width: 100%;
    box-shadow: none; border: none; border-radius: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
  }
  .account-dropdown.hidden { display: block !important; }

  .tabs {
    width: 100%; flex-direction: column; gap: 4px;
    padding: 12px 12px 0;
  }
  .tab {
    flex: none; width: 100%; text-align: left;
    padding: 12px 14px; font-size: 15px; border-radius: 10px;
  }

  main { padding: 10px 10px 16px; }

  .poker-table { padding: 4px; }
  .table-felt {
    min-height: 360px; border-radius: 50% / 42%; padding: 12px 10px 10px;
    border-width: 5px; gap: 4px;
  }
  .seats { pointer-events: none; }
  .seat.hero { display: none; }
  .seat.villain .seat-act-wrap,
  .seat.caller .seat-act-wrap { display: flex; }
  .seat-top .seat-act-wrap,
  .seat-edge-top .seat-act-wrap { display: none !important; }
  .villain-action-bar.is-visible {
    display: flex !important;
    margin-bottom: 4px;
    min-height: 24px;
    flex-shrink: 0;
  }
  .board-area {
    margin-top: 0; padding-top: 0; flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    align-items: center;
    max-width: 78%; margin-left: auto; margin-right: auto;
    position: relative; z-index: 5;
  }
  .board-area.has-villain-bar { padding-top: 2px; }
  .board { position: relative; z-index: 6; }
  .seat {
    min-width: 0; max-width: 70px; padding: 2px 4px; font-size: 9px;
    z-index: 3;
  }
  .seat.seat-mini { max-width: 52px; padding: 2px 5px; border-radius: 8px; }
  .seat.seat-mini .seat-pos { font-size: 9px; font-weight: 800; }
  .seat-edge-left { transform: translate(-8%, -50%); }
  .seat-edge-right { transform: translate(-92%, -50%); }
  .seat-edge-top { transform: translate(-50%, 2%); }
  .seat .seat-role { display: none; }
  .seat-top .seat-act-wrap {
    position: absolute; top: calc(100% + 2px); left: 50%;
    transform: translateX(-50%); z-index: 4;
  }
  .seat-edge-right .seat-act-wrap,
  .seat-edge-left .seat-act-wrap {
    position: absolute; top: calc(100% + 2px); left: 50%;
    transform: translateX(-50%); z-index: 4;
  }
  .seat .seat-pos { font-size: 10px; }
  .seat-act { font-size: 9px; padding: 2px 6px; max-width: 76px; white-space: normal; text-align: center; line-height: 1.25; }
  .seat-act .chip-ico { width: 11px; height: 11px; }
  .seat-cards { margin-bottom: 2px; }
  .seat-cards .card { width: 17px; height: 24px; }
  .seat-chips { margin: 1px 0; font-size: 8px; }
  .seat-chips-street { padding: 1px 5px; font-size: 8px; }
  .seat-avatar { width: 18px; height: 18px; margin-bottom: 1px; }
  .seat-avatar-svg { width: 11px; height: 11px; }
  .seat.seat-mini .seat-avatar { display: none; }
  .seat-bet { font-size: 8px; padding: 1px 5px; gap: 3px; }
  .seat-bet .chip-ico { width: 9px; height: 9px; }
  .seat-bet.bet-below { top: calc(100% + 3px); }
  .seat-bet.bet-above { bottom: calc(100% + 3px); }
  .seat-bet.bet-right { left: calc(100% + 3px); }
  .seat-bet.bet-left { right: calc(100% + 3px); }
  .seat.seat-mini .seat-bet { display: none; }
  .table-watermark-mark { width: 54px; height: 60px; }
  .table-watermark-text { font-size: 17px; letter-spacing: 1px; }
  .table-watermark { opacity: .06; gap: 4px; }
  .hero-avatar { width: 18px; height: 18px; }
  .hero-dealer { width: 15px; height: 15px; font-size: 9px; }

  .pot { font-size: 11px; padding: 3px 9px; margin-bottom: 6px; }
  .hero-area { margin-top: 4px; padding-top: 0; flex-shrink: 0; }
  .hero-label { margin-bottom: 2px; font-size: 10px; }
  .action-badge-wrap { min-height: 18px; margin-bottom: 2px; }
  .board { gap: 4px; min-height: 40px; flex-wrap: wrap; }
  .card { width: 30px; height: 42px; font-size: 12px; border-radius: 5px; }
  .hero-cards .card { width: 40px; height: 54px; font-size: 15px; }
  .spot-context { font-size: 10px; max-width: 100%; line-height: 1.3; margin-top: 4px; }
  .hero-handname { font-size: 9px; margin-top: 2px; }

  .actions { margin-top: 10px; gap: 6px; }
  .actions.actions-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    max-width: none; width: 100%;
  }
  .actions .btn {
    width: 100%; padding: 10px 8px; font-size: 13px;
    min-height: 42px; border-radius: 10px;
  }
  .actions:not(.actions-grid) .btn { padding: 12px; font-size: 14px; }

  .sidebar { flex-direction: column; }
  .sidebar .card-box { flex: 1 1 auto; }

  .feedback { padding: 14px; }
  .gto-bar .lbl { width: 60px; font-size: 12px; }

  .panel-head { flex-direction: column; align-items: flex-start; }
  .panel-head > div { width: 100%; }
  .panel-head > div .btn { flex: 1; }
  .panel-head > .btn { width: 100%; }

  .record { grid-template-columns: auto 1fr; gap: 10px; }
  .record .rec-right { grid-column: 1 / -1; text-align: left; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

  .stats-content { grid-template-columns: 1fr 1fr; }
  .top-hands { grid-template-columns: 1fr; }
  .tl-player { min-width: 110px; }
  .review-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .import-row input[type=file] { width: 100%; }

  /* Estadísticas — gráficas legibles en móvil (excepto carrusel rediseñado) */
  .stats-reset-hint { font-size: 12px; line-height: 1.45; }
  .progress-charts,
  .progress-charts-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .prog-chart {
    min-width: 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  #tab-stats .stats-carousel-bars.prog-bars {
    overflow-x: visible;
    justify-content: space-between;
    gap: 4px;
    height: auto;
    min-height: 132px;
    padding-bottom: 0;
  }
  .prog-bars {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 8px;
    height: 108px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  #tab-stats .stats-carousel-bars .prog-bar-col {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  .prog-bar-col {
    flex: 0 0 46px;
    min-width: 46px;
  }
  #tab-stats .stats-carousel-bars .prog-bar-val {
    font-size: clamp(10px, 2.8vw, 13px);
    font-weight: 700;
    max-width: none;
    word-break: normal;
    line-height: 1.2;
  }
  .prog-bar-val {
    font-size: 9px;
    word-break: break-word;
    max-width: 44px;
  }
  #tab-stats .stats-carousel-bars .prog-bar-lbl {
    font-size: clamp(9px, 2.4vw, 11px);
    max-width: none;
    white-space: normal;
    line-height: 1.15;
  }
  .prog-bar-lbl {
    font-size: 9px;
    max-width: 44px;
  }
  #tab-stats .stats-carousel-bars .prog-bar-track {
    height: clamp(72px, 20vw, 100px);
    max-width: min(40px, 13vw);
    width: 100%;
  }
  .prog-bar-track {
    height: 64px;
    max-width: 28px;
  }
  .prog-bar-track-signed .prog-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .prog-bar-track-signed .prog-bar-pos {
    bottom: 50%;
    transform: translate(-50%, -1px);
  }
  .prog-bar-track-signed .prog-bar-neg {
    top: 50%;
    transform: translate(-50%, 1px);
  }
  .leak-bars {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .leak-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .leak-row .btn-sm {
    width: 100%;
    margin-left: 34px;
  }
  .stat-card { padding: 14px 10px; }
  .stat-card .big { font-size: 24px; }

  /* Admin — cabecera y tabla en móvil */
  .admin-head {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-head-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .admin-head-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  .admin-stat-card { padding: 12px 10px; }
  .admin-stat-value { font-size: 22px; }
  .admin-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-section-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .admin-section-actions .btn { width: 100%; }
  .admin-sync-status,
  .admin-users-status {
    max-width: none;
    width: 100%;
  }
  .admin-table-wrap {
    -webkit-overflow-scrolling: touch;
    margin: 0;
  }
  .admin-table-scroll-hint { display: block; }
  .admin-table {
    width: 980px;
    min-width: 980px;
    font-size: 12px;
  }
  .admin-table th,
  .admin-table td {
    padding: 10px 8px;
  }
  .admin-user-email {
    font-size: 11px;
  }
  .admin-plan-select {
    max-width: 100%;
    font-size: 12px;
    padding: 5px 6px;
  }
  .admin-period-input { max-width: 100%; width: 100%; }
  .admin-foot-note { font-size: 11px; }
  .admin-users-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-filter-user { min-width: 0; flex: 1 1 auto; }
  .admin-filter-date-row input[type="date"] {
    width: 100%;
    flex: 1;
  }
}

/* Móvil pequeño */
@media (max-width: 400px) {
  .table-felt { min-height: 320px; padding: 10px 6px 12px; }
  .card { width: 26px; height: 37px; font-size: 11px; }
  .hero-cards .card { width: 40px; height: 56px; font-size: 16px; }
  .seat { min-width: 44px; }
  .mini-stats div span { font-size: 18px; }
  .stats-content { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: 1fr; }
  .prog-bar-col { flex: 0 0 40px; min-width: 40px; }
}

/* Pantallas táctiles: sin efecto hover de desplazamiento */
@media (hover: none) {
  .btn:hover { transform: none; filter: none; }
}

.app-foot {
  text-align: center;
  padding: 6px 12px 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.16);
  letter-spacing: 0.35px;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.app-foot-disclaimer {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0.2px;
}
.app-legal-foot .legal-links,
.auth-legal-foot .legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 11px;
}
.app-legal-foot .legal-links a,
.auth-legal-foot .legal-links a {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
}
.app-legal-foot .legal-links a:hover,
.auth-legal-foot .legal-links a:hover { color: var(--gold); }
.auth-legal-note {
  font-size: 12px;
  margin: 8px 0 12px;
  line-height: 1.45;
}
.auth-legal-note a { color: var(--link, #58a6ff); }
.auth-legal-foot { margin-top: 4px; }
.btn-sm-account { font-size: 12px !important; padding: 8px 12px !important; }

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  padding: 12px 16px calc(16px + var(--safe-bottom));
  background: rgba(13, 17, 23, 0.96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}
body.cookie-banner-open { padding-bottom: 0; }
.cookie-banner-inner { max-width: 900px; margin: 0 auto; }
.cookie-banner-text {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.45;
}
.cookie-banner-text a { color: var(--link, #58a6ff); }
.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cookie-config-panel {
  margin-top: 12px;
  padding: 12px;
  background: var(--panel-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.cookie-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text);
}

.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---- IA Coach ---- */
.ai-report-panel { margin-top: 14px; }
.ai-coach-embed.home-coach-panel {
  margin-top: 0; padding: clamp(16px, 3vw, 22px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.ai-coach-embed .home-coach-top { margin-bottom: 16px; }
.ai-coach-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 4px; padding-top: 2px;
}
.ai-coach-hint { color: var(--orange); font-size: 13px; }
.ai-report-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.ai-report-head h3 { margin: 0; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ai-report-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-question-form {
  margin: 10px 0 12px; padding: 12px; border-radius: 8px;
  background: rgba(0,0,0,.2); border: 1px solid var(--border);
}
.ai-question-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.ai-question-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; max-height: 140px;
  padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.4;
}
.ai-question-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; flex-wrap: wrap; }
.ai-question-count { font-size: 12px; }
.ai-question-btns { display: flex; gap: 8px; }
.ai-report-meta { font-size: 12px; margin-bottom: 8px; }
.ai-report-status { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.ai-report-content { margin-top: 8px; max-height: min(70vh, 640px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ai-report-loading {
  text-align: center; padding: 24px 12px; color: var(--muted);
}
.ai-report-loading .play-boot-spinner { margin-bottom: 12px; }
.session-loading {
  text-align: center; padding: 48px 16px; color: var(--muted);
}
.session-loading .play-boot-spinner { margin: 0 auto 14px; }
.ai-report-loading .play-boot-msg { margin-bottom: 4px; }
.ai-report-notice {
  color: var(--gold); padding: 14px 0; font-size: 14px; line-height: 1.5;
}
.ai-report-error { color: var(--red); padding: 14px 0; font-size: 14px; line-height: 1.5; }
.ai-report-body { font-size: 14px; line-height: 1.55; }
.ai-report-body h2 { font-size: 18px; margin: 16px 0 8px; color: var(--gold); }
.ai-report-body h3 { font-size: 15px; margin: 14px 0 6px; }
.ai-report-body h4 { font-size: 14px; margin: 10px 0 4px; }
.ai-report-body ul { margin: 8px 0 8px 20px; }
.ai-report-body p { margin: 8px 0; }
.ai-coach-quota {
  font-size: 12px; color: var(--gold); margin: 8px 0 4px;
  padding: 6px 10px; border-radius: 8px; background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.ai-coach-thread { display: flex; flex-direction: column; gap: 14px; }
.ai-coach-turn {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-coach-turn-meta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); margin-bottom: 8px;
}
.ai-coach-turn-q {
  font-size: 13px; font-style: italic; color: var(--text);
  margin-bottom: 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(212, 175, 55, 0.06); border-left: 3px solid var(--gold);
}
.ai-coach-turn .ai-report-body { max-height: none; overflow: visible; }

/* —— Panel administración —— */
.tab-admin { color: var(--gold) !important; }
.tab-admin.active { border-bottom-color: var(--gold) !important; }
.btn-admin {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.08));
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--gold);
}
.btn-admin:hover { border-color: var(--gold); }
.account-row-admin strong { color: var(--gold); }

.account-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.account-settings-content { width: 100%; }
.account-settings-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 0;
}
.account-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.account-settings-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
}
.account-settings-card-wide {
  grid-column: 1 / -1;
}
.account-settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.account-settings-card-head h3 { margin: 0; }
.account-settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.account-settings-row:last-child { border-bottom: 0; }
.account-settings-row span { color: var(--muted); }
.account-settings-row strong,
.account-settings-row code {
  color: var(--text);
  text-align: right;
  font-size: 12px;
}
.account-settings-row code {
  font-family: ui-monospace, monospace;
}
.account-settings-admin { color: var(--gold); }
.account-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.account-settings-actions-stack {
  flex-direction: column;
}
.account-settings-actions-stack .btn { width: 100%; }
.account-settings-table-wrap { overflow-x: auto; }
.account-settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.account-settings-table th,
.account-settings-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.account-settings-table th {
  color: var(--muted);
  font-weight: 600;
}

.admin-head { align-items: flex-start; gap: 12px; }
.admin-sub { margin: 4px 0 0; font-size: 13px; }
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.admin-stat-card {
  background: var(--card, #161b22);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.admin-stat-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.admin-stat-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.admin-stat-online .admin-stat-value { color: #3fb950; }
.admin-section { margin-top: 8px; }
.admin-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-section-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-sync-status { font-size: 12px; max-width: 280px; }
.admin-section-head h3 { margin: 0; font-size: 16px; }
.admin-users-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
}
.admin-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-filter-user { min-width: 200px; flex: 1 1 180px; }
.admin-filter-field input,
.admin-filter-field select {
  background: var(--bg, #0d1117);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}
.admin-filter-date-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-filter-date-row input[type="date"] {
  min-width: 0;
  width: 8.6rem;
  padding: 6px 6px;
  font-size: 12px;
}
.admin-filter-sep { color: var(--muted); font-size: 12px; }
#admin-filter-clear { align-self: flex-end; }
.admin-th-sort {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.admin-th-sort:hover,
.admin-th-sort.is-active { color: var(--text, #e6edf3); }
.admin-users-empty { text-align: center; padding: 18px 12px !important; }
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-head .btn { margin-left: 0; }
.admin-row-demo { background: rgba(212, 175, 55, 0.06); }
.admin-demo-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: var(--gold); border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
.admin-payment { font-size: 12px; white-space: nowrap; color: var(--muted); }
.admin-period { font-size: 12px; white-space: nowrap; color: var(--muted); }
.admin-renewal { font-size: 12px; white-space: nowrap; color: var(--muted); }
.admin-period-input {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg, #0d1117);
  color: var(--text);
  max-width: 130px;
}
.admin-period-muted { color: var(--muted); }
.admin-user-row { cursor: pointer; }
.admin-user-row:hover td { background: rgba(255, 255, 255, 0.03); }
.admin-row-active td { background: rgba(47, 129, 247, 0.08); }
.admin-user-detail {
  margin-top: 16px;
  padding: 16px 18px;
}
.admin-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.admin-detail-head h3 { margin: 0 0 4px; }
.admin-detail-promo-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text);
}
.admin-detail-promo-note strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .3px;
}
.admin-detail-section { margin-top: 16px; }
.admin-detail-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.admin-gift-bonus-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.admin-gift-label { font-size: 13px; color: var(--muted); }
.admin-gift-input {
  width: 88px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}
.admin-gift-note { margin: 8px 0 0; font-size: 12px; }
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 14px;
}
.admin-detail-grid strong { display: block; font-size: 18px; margin-top: 2px; }
.admin-activity-status {
  margin: 0 0 8px;
  font-size: 14px;
}
.admin-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-detail-table th,
.admin-detail-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.admin-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-detail-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.admin-thread-link {
  background: none;
  border: none;
  color: var(--link, #58a6ff);
  cursor: pointer;
  padding: 0;
  text-align: left;
  font: inherit;
}
.demo-mode-banner {
  position: sticky; top: 0; z-index: 1200;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.2), rgba(47, 129, 247, 0.15));
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--text); text-align: center; font-size: 13px; padding: 8px 12px;
}
body.demo-mode-active .tab-admin { display: none !important; }
.admin-usage-note { font-size: 11px; color: var(--gold); margin-left: 2px; }
.admin-invite-content { max-width: 560px; width: min(96vw, 560px); }
.admin-invite-label { display: block; font-size: 13px; margin: 12px 0 6px; color: var(--muted); }
.admin-invite-input, .admin-invite-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg, #0d1117);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
.admin-invite-textarea { min-height: 180px; resize: vertical; line-height: 1.45; }
.admin-invite-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
body.admin-invite-open { overflow: hidden; }
.admin-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card, #161b22);
  max-width: 100%;
}
.admin-table-scroll-hint {
  display: none;
  font-size: 12px;
  margin: 0 0 8px;
}
.admin-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 17, 23, 0.82);
  border-radius: 10px;
}
.admin-loading.hidden { display: none; }
.admin-loading-inner { text-align: center; padding: 28px 16px; }
.admin-loading-msg { margin-top: 12px; font-size: 13px; }
.admin-table-wrap.admin-table-loading .admin-table { visibility: hidden; }
.admin-table {
  width: 980px;
  min-width: 980px;
  max-width: none;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.admin-col-user { width: 200px; }
.admin-col-plan { width: 110px; }
.admin-col-period { width: 120px; }
.admin-col-renewal { width: 130px; }
.admin-col-ai { width: 140px; }
.admin-col-payment { width: 110px; }
.admin-col-seen { width: 120px; }
.admin-col-admin { width: 50px; }
.admin-table th[data-col="period"],
.admin-table td[data-col="period"],
.admin-table th[data-col="renewal"],
.admin-table td[data-col="renewal"],
.admin-table th[data-col="payment"],
.admin-table td[data-col="payment"],
.admin-table th[data-col="seen"],
.admin-table td[data-col="seen"] {
  white-space: nowrap;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
  box-sizing: border-box;
}
.admin-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-user-cell { min-width: 0; }
.admin-user-name {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-email {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-plan-select {
  background: var(--bg, #0d1117);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.admin-period-input {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.admin-usage {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.admin-usage-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent, #238636);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.admin-usage-bar.admin-usage-mid { background: #d29922; }
.admin-usage-bar.admin-usage-high { background: var(--red, #f85149); }
.admin-usage-text {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 11px;
  line-height: 22px;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.admin-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.admin-status-online { color: #3fb950; }
.admin-center { text-align: center; }
.admin-toggle { cursor: pointer; }
.admin-toggle input { width: 16px; height: 16px; accent-color: var(--gold); }
.admin-error { color: var(--red); font-size: 13px; margin: 0 0 10px; }
.admin-foot-note { font-size: 12px; margin-top: 12px; line-height: 1.45; }

/* ---- Epic 5: retención (P-01–P-07) ---- */
.usage-quota-host { margin: 0 0 16px; }
.usage-quota-host.hidden { display: none; }
.usage-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.usage-widget.usage-unlimited { text-align: center; padding: 10px; }
.usage-row { margin-bottom: 10px; }
.usage-row:last-child { margin-bottom: 0; }
.usage-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 4px;
}
.usage-row-head span { min-width: 0; }
.usage-row-head strong { white-space: nowrap; flex-shrink: 0; }
.usage-bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}
.usage-bar-fill {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 4px;
  transition: width .2s;
}
.usage-bar-fill.high { background: var(--yellow); }
.usage-bar-fill.full { background: var(--red); }
.usage-row-static {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.usage-row-static span { min-width: 0; }
.usage-row-static strong { white-space: nowrap; flex-shrink: 0; }
.usage-foot { font-size: 12px; margin: 10px 0 0; }
.usage-foot a { color: var(--gold); }

.study-disclaimer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  background: rgba(245,196,81,.06);
  border: 1px solid rgba(245,196,81,.2);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
}
.study-disclaimer-inline { margin-top: 10px; margin-bottom: 0; }
.study-disclaimer-icon { color: var(--gold); flex-shrink: 0; }

.progress-panel, .leaks-panel { margin-bottom: 16px; }
.progress-panel h3, .leaks-panel h3 { margin: 0 0 6px; font-size: 16px; }
.progress-block-sessions .prog-bar { /* colores por métrica en inline style */ }
.stat-session-count .big { color: var(--accent); }
.stat-session-hands .big { color: var(--gold); }
.stat-session-acc .big { color: var(--green); }
.stats-session-grid .stat-card { border-color: rgba(47,129,247,.15); }
.stats-session-grid .stat-session-hands { border-color: rgba(245,196,81,.25); }
.stats-session-grid .stat-session-acc { border-color: rgba(63,185,80,.25); }

.tab-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
  border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 1.4;
  background: var(--red); color: #fff; vertical-align: middle;
}
.tab.active .tab-badge { background: #fff; color: var(--accent); }
.admin-messages-btn .tab-badge { margin-left: 8px; }

.contact-layout { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-sidebar h3 { margin: 0 0 10px; font-size: 15px; }
.contact-thread-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.contact-thread-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel); color: inherit; cursor: pointer;
}
.contact-thread-item:hover { border-color: var(--accent); }
.contact-thread-active { border-color: var(--accent); background: rgba(47,129,247,.12); }
.contact-thread-unread { border-color: rgba(240,83,59,.5); }
.contact-thread-subject { font-weight: 600; font-size: 13px; }
.contact-thread-meta { font-size: 11px; }
.contact-messages { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow: auto; margin: 12px 0; }
.contact-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.contact-detail-head h3 { margin: 0; flex: 1; min-width: 0; }
.contact-delete-thread { flex-shrink: 0; }
.contact-msg { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); }
.contact-msg.user { background: rgba(47,129,247,.08); }
.contact-msg.admin { background: rgba(63,185,80,.08); border-color: rgba(63,185,80,.25); }
.contact-msg-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.contact-msg-body { font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.contact-msg-foot { margin-top: 8px; }
.admin-msg-thread-read { margin: 0 0 10px; font-size: 12px; }
.admin-msg-read-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.admin-msg-read-status.is-read {
  color: #3fb950;
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.35);
}
.admin-msg-read-status.is-pending {
  color: #d29922;
  background: rgba(210, 153, 34, 0.12);
  border-color: rgba(210, 153, 34, 0.4);
}
.admin-msg-pending-read { color: #d29922; }
.contact-new { margin-top: 14px; }
.contact-new label, .contact-reply-form label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; }
.contact-new input, .contact-new textarea, .contact-reply-form textarea {
  width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit;
}
.contact-char-hint { font-size: 12px; margin: 4px 0 10px; }
.contact-loading { display: flex; align-items: center; gap: 10px; padding: 20px; }
.admin-messages-panel { margin-bottom: 16px; }
.admin-messages-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-messages-layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(220px, 280px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 8px;
  min-height: 480px;
}
@media (max-width: 1100px) {
  .admin-messages-layout { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
  .admin-msg-detail-col { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .admin-messages-layout { grid-template-columns: 1fr; min-height: 0; }
  .admin-msg-detail-col { grid-column: auto; }
}
.admin-msg-col-head { margin-bottom: 10px; }
.admin-msg-col-head h4 { margin: 0 0 6px; font-size: 14px; }
.admin-msg-search {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.admin-msg-user-list,
.admin-msg-thread-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow: auto;
}
.admin-msg-user-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: inherit;
  cursor: pointer;
}
.admin-msg-user-item:hover { border-color: var(--accent); }
.admin-msg-user-active { border-color: var(--accent); background: rgba(47,129,247,.12); }
.admin-msg-user-unread { border-color: rgba(240,83,59,.45); }
.admin-msg-user-name { font-weight: 600; font-size: 13px; }
.admin-msg-user-email { font-size: 11px; color: var(--muted); word-break: break-word; }
.admin-msg-user-meta { font-size: 11px; line-height: 1.35; }
.admin-msg-empty { font-size: 12px; padding: 8px 4px; margin: 0; }
.admin-msg-threads-hint { font-size: 12px; margin: 0; }
.admin-msg-detail-col { min-width: 0; display: flex; flex-direction: column; }
.admin-msg-detail-col .contact-detail { flex: 1; min-height: 420px; display: flex; flex-direction: column; }
.admin-msg-messages { flex: 1; max-height: none; min-height: 200px; }
.admin-compose-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.admin-compose-modal.hidden { display: none; }
.admin-compose-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.admin-compose-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  margin: 0;
}
.admin-compose-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-compose-dialog-head h3 { margin: 0; font-size: 16px; }
body.admin-compose-open { overflow: hidden; }
.admin-contact-layout { margin-top: 8px; }
.admin-message-compose {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.admin-message-compose h4 {
  margin: 0 0 10px;
  font-size: 14px;
}
.admin-message-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.admin-message-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.admin-message-compose label {
  display: block;
  margin: 10px 0 4px;
  font-size: 13px;
  font-weight: 600;
}
.admin-message-compose input,
.admin-message-compose textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.admin-recipient-picker {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 10px;
}
.admin-recipient-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  margin-top: 8px;
}
.admin-recipient-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel);
}
.admin-recipient-item input { width: auto; margin-top: 2px; }
.admin-recipient-name { display: block; font-size: 13px; font-weight: 600; }
.admin-recipient-email { display: block; font-size: 12px; color: var(--muted); word-break: break-word; }
.admin-recipient-summary {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.admin-message-compose-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.admin-message-compose-status {
  font-size: 12px;
  color: var(--muted);
}
.admin-recipient-list-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0 2px;
}

#tab-stats #stats-content {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.stats-redesign {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#tab-stats .stats-content,
#tab-stats .stats-redesign,
#tab-stats .stats-section,
#tab-stats .stats-carousel,
#tab-stats .stats-slide,
#tab-stats .stats-slide-body,
#tab-stats .stats-overview-grid,
#tab-stats .stats-carousel-chart,
#tab-stats .stats-carousel-bars,
#tab-stats .prog-bars {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#tab-stats .stats-section {
  overflow: hidden;
  width: 100%;
}
#tab-stats .stats-carousel-bars.prog-bars,
#tab-stats .prog-bars.stats-carousel-bars {
  width: 100%;
}
.stats-bar-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.stats-bar-row {
  display: grid;
  grid-template-columns: minmax(44px, 58px) minmax(0, 1fr) minmax(52px, auto);
  align-items: center;
  gap: 10px;
  width: 100%;
}
.stats-bar-row-lbl {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}
.stats-bar-row-track {
  height: 16px;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.stats-bar-row-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  min-width: 4px;
}
.stats-bar-row-val {
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.stats-bar-row-track-signed .stats-bar-row-fill-pos {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(0);
  border-radius: 0 6px 6px 0;
}
.stats-bar-row-track-signed .stats-bar-row-fill-neg {
  position: absolute;
  right: 50%;
  bottom: 0;
  transform: translateX(0);
  border-radius: 6px 0 0 6px;
}
.stats-bar-row-zero {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(139, 151, 167, 0.45);
  transform: translateX(-50%);
}
.stats-carousel-chart--rows h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.stats-section {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.stats-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.stats-section-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.stats-section-head p {
  margin: 0;
  max-width: 72ch;
}
.stats-carousel-controls {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}
.stats-carousel-wrap,
.stats-carousel-stage {
  position: relative;
  width: 100%;
}
.stats-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
}
.stats-carousel-side {
  position: static;
  transform: none;
  z-index: 1;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 17, 22, 0.72);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.stats-carousel-side:hover,
.stats-carousel-side:active,
.stats-carousel-side:focus-visible {
  transform: none;
  background: rgba(12, 17, 22, 0.88);
  filter: brightness(1.08);
}
.stats-carousel {
  position: relative;
  min-width: 0;
  width: 100%;
}
.stats-slide {
  display: none;
}
.stats-slide-active {
  display: block;
}
.stats-slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.stats-slide-head h4 {
  margin: 0;
  font-size: 15px;
}
.stats-slide-body {
  min-height: 280px;
}
.stats-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 0;
  flex: 1;
  min-width: 0;
}
.stats-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(139,151,167,.45);
  cursor: pointer;
}
.stats-carousel-dot.active {
  background: var(--accent);
}
.stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 12px;
}
.stats-section-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.session-hud-note h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.session-hud-note.hud-ok {
  border-color: rgba(63, 185, 80, 0.28);
}
.session-hud-note.hud-warn {
  border-color: rgba(224, 138, 43, 0.35);
}
.stats-hud-legend {
  margin: -4px 0 10px;
  font-size: 12px;
}
.stats-hud-leg-vpip { color: var(--accent); font-weight: 600; }
.stats-hud-leg-pfr { color: var(--gold); font-weight: 600; }
.stats-street-grid {
  gap: 12px;
}
.stats-carousel-chart {
  height: 100%;
}
.stats-carousel-chart h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.stats-carousel-bars {
  height: 180px;
}
.stats-carousel-bars .prog-bar-track {
  max-width: 44px;
  height: 132px;
}
.stats-carousel-bars .prog-bar,
.stats-carousel-bars .prog-bar-col .prog-bar {
  max-width: 44px;
}
.stats-carousel-bars .prog-bar-val {
  font-size: 11px;
}
.stats-carousel-bars .prog-bar-lbl {
  font-size: 11px;
}
.hand-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  margin: 0 0 14px;
  padding: 12px;
  background: var(--surface-2, rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: 8px;
}
.hand-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  min-width: 88px;
}
.hand-filters select,
.hand-filters input[type="date"],
.hand-filters input[type="number"] {
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.hand-filters input[type="number"] {
  width: 72px;
}
.stats-grade-chart .stats-grade-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.stats-distribution {
  margin-top: 10px;
}
.stats-distribution-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.stats-leak-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats-leak-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.stats-leak-rank {
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--gold);
  background: rgba(245,196,81,.12);
  border: 1px solid rgba(245,196,81,.25);
}
.stats-leak-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.stats-leak-sub {
  font-size: 13px;
}
.stats-carousel-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed rgba(139,151,167,.35);
  border-radius: 10px;
  padding: 18px;
}
.progress-block-title, .leaks-section-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.progress-intro, .leaks-intro { margin: 0 0 12px; font-size: 13px; }
.progress-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.prog-chart h4 { font-size: 13px; margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.prog-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
}
.prog-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}
.prog-bar-val {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.1;
  text-align: center;
}
.prog-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
}
.prog-bar-lbl {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.progress-charts-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.prog-bar-track {
  flex: 1;
  width: 100%;
  max-width: 32px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.prog-bar-col .prog-bar {
  width: 100%;
  max-width: 32px;
}
.prog-bar-track-signed {
  align-items: stretch;
}
.prog-bar-zero {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(139, 151, 167, 0.45);
}
.prog-bar-track-signed .prog-bar {
  position: absolute;
  left: 50%;
  right: auto;
  max-width: 32px;
}
.prog-bar-track-signed .prog-bar-pos {
  bottom: 50%;
  transform: translate(-50%, -1px);
  border-radius: 4px 4px 0 0;
}
.prog-bar-track-signed .prog-bar-neg {
  top: 50%;
  transform: translate(-50%, 1px);
  border-radius: 0 0 4px 4px;
}
.prog-bar-empty .prog-bar { opacity: 0.25; }
.prog-combo-track { position: relative; }
.prog-combo-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  opacity: 0.7;
  pointer-events: none;
}

.live-advisor-panel {
  margin-top: 12px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(63,185,80,.35);
  background: rgba(63,185,80,.08);
}
.live-advisor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.live-advisor-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green);
  background: rgba(63,185,80,.15);
  padding: 3px 8px;
  border-radius: 6px;
}
.live-advisor-street { font-size: 12px; color: var(--muted); }
.live-advisor-context { font-size: 14px; line-height: 1.45; margin: 0 0 10px; }
.live-advisor-narrative { font-size: 12px; margin: 0 0 8px; }
.live-advisor-rec {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.2);
  margin-bottom: 8px;
}
.live-advisor-rec-label { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.live-advisor-rec-action { font-size: 18px; font-weight: 800; color: var(--green); margin: 4px 0; }
.live-advisor-expl { font-size: 13px; line-height: 1.5; margin: 10px 0 0; color: var(--text); }
.live-advisor-evs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.live-advisor-opt {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.15);
}
.live-advisor-opt-best { border: 1px solid rgba(63,185,80,.4); background: rgba(63,185,80,.12); }
.live-advisor-matrices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 720px) {
  .live-advisor-matrices { grid-template-columns: 1fr; }
}
.live-advisor-matrix-block h5 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.live-advisor-matrix-note { font-size: 11px; margin: 0 0 6px; }
.live-advisor-matrix-host { overflow-x: auto; }
.live-advisor-matrices .range-matrix-wrap-compact .range-matrix-grid {
  font-size: 9px;
  gap: 1px;
}
.live-advisor-matrices .range-matrix-wrap-compact .rm-cell {
  min-width: 22px;
  min-height: 18px;
  font-size: 8px;
  padding: 1px;
}
.live-advisor-matrices .range-matrix-wrap-compact .rm-label {
  font-size: 8px;
  min-width: 14px;
}
.live-advisor-matrices .range-matrix-legend-compact {
  gap: 4px 8px;
  font-size: 9px;
  margin: 0 0 6px;
}
.live-advisor-matrices .range-matrix-legend-compact i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.setup-toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; line-height: 1.45; }
.setup-toggle input { margin-top: 3px; flex-shrink: 0; }

.import-progress { margin-top: 10px; }
.import-progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 6px;
}
.import-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: width 0.15s ease;
}

.leaks-error-rate { margin: 0 0 8px; font-size: 14px; }
.leak-breakdown { margin: 12px 0; }
.leak-breakdown h5 { margin: 0 0 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.leak-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
  overflow-x: auto;
}
.leak-bar-col {
  flex: 1;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.leak-bar-val { font-size: 10px; font-weight: 600; text-align: center; margin-bottom: 4px; }
.leak-bar {
  width: 100%;
  max-width: 36px;
  border-radius: 4px 4px 0 0;
  min-height: 6px;
}
.leak-bar-meta { font-size: 9px; margin-top: 4px; text-align: center; }

#stats-coach { margin-top: 18px; }

/* Estadísticas — adaptación móvil vertical y horizontal */
@media (max-width: 720px) {
  #tab-stats {
    overflow-x: clip;
    max-width: 100%;
  }
  #tab-stats .stats-section.card-box {
    padding: 12px 0 10px;
  }
  #tab-stats .stats-section-head,
  #tab-stats .stats-carousel-nav {
    padding-left: 10px;
    padding-right: 10px;
  }
  #tab-stats .stats-carousel-stage {
    width: 100%;
  }
  #tab-stats .stats-slide-head {
    padding: 0 10px;
  }
  #tab-stats .stats-slide-body {
    padding: 0 4px;
  }
  #tab-stats .stats-carousel-side {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 24px;
    border-radius: 10px;
  }
  #tab-stats .stats-section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #tab-stats .stats-section-head p {
    max-width: none;
    font-size: 12px;
    line-height: 1.4;
  }
  #tab-stats .stats-slide-body {
    min-height: 0;
  }
  #tab-stats .stats-slide-body,
  #tab-stats .stats-carousel-chart {
    overflow-x: clip;
  }
  #tab-stats .stats-overview-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #tab-stats .stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    min-width: 0;
    text-align: left;
  }
  #tab-stats .stat-card .big {
    font-size: 22px;
    line-height: 1.1;
    flex-shrink: 0;
    order: 2;
  }
  #tab-stats .stat-card .lbl {
    font-size: 13px;
    line-height: 1.3;
    hyphens: auto;
    margin-top: 0;
    order: 1;
    flex: 1;
    min-width: 0;
  }
  #tab-stats .street-acc-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
    font-size: 14px;
  }
  #tab-stats .street-acc-row .lbl {
    width: auto;
    flex-shrink: 0;
  }
  #tab-stats .street-acc-row .track {
    min-width: 0;
    height: 18px;
  }
  #tab-stats .street-acc-row .pct {
    width: auto;
    min-width: 44px;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 14px;
    text-align: right;
  }
  #tab-stats .stats-distribution-legend {
    font-size: 11px;
    gap: 8px 10px;
  }
  #tab-stats .dist-bar {
    height: 22px;
  }
  #tab-stats .dist-bar span {
    font-size: 10px;
    min-width: 0;
    padding: 0 2px;
  }
  #tab-stats .stats-bar-row {
    grid-template-columns: 52px minmax(0, 1fr) minmax(56px, auto);
    gap: 8px;
  }
  #tab-stats .stats-bar-row-lbl {
    font-size: 13px;
  }
  #tab-stats .stats-bar-row-val {
    font-size: 15px;
  }
  #tab-stats .stats-bar-row-track {
    height: 18px;
  }
  #tab-stats .stats-leak-row {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  #tab-stats .stats-leak-row .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Móvil en horizontal: mesa compacta que aprovecha el ancho */
@media (orientation: landscape) and (max-height: 560px) {
  .play-grid { grid-template-columns: 1fr; }
  .poker-table { padding: 2px; }
  .table-felt {
    min-height: 0; height: min(72vh, 320px);
    border-radius: 48% / 50%; border-width: 5px; padding: 6px 16px;
  }
  .table-felt > .board-area { margin-top: 2px; }
  .table-watermark-mark { width: 40px; height: 44px; }
  .table-watermark-text { font-size: 13px; }
  .board { min-height: 0; gap: 4px; }
  .card { width: 26px; height: 36px; font-size: 11px; }
  .hero-cards .card { width: 34px; height: 46px; font-size: 13px; }
  .seat { min-width: 0; max-width: 86px; padding: 3px 6px; }
  .seat-cards .card { width: 15px; height: 21px; }
  .seat-avatar { width: 18px; height: 18px; }
  .seat-avatar-svg { width: 11px; height: 11px; }
  .seat-bet { font-size: 9px; padding: 1px 6px; }
  .pot { font-size: 10px; padding: 2px 8px; margin-bottom: 3px; }
  .hero-label { font-size: 9px; margin-bottom: 1px; }
  .hero-handname { font-size: 9px; margin-top: 1px; }
  .spot-context { font-size: 9px; margin-top: 2px; max-width: 72%; }
  .actions { margin-top: 6px; gap: 5px; }
  .actions .btn { min-height: 34px; padding: 6px; font-size: 12px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  #tab-stats .stats-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #tab-stats .stat-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 10px;
    text-align: center;
  }
  #tab-stats .stat-card .big,
  #tab-stats .stat-card .lbl {
    order: unset;
  }
  #tab-stats .stat-card .big {
    font-size: 18px;
  }
  #tab-stats .stat-card .lbl {
    font-size: 10px;
  }
  #tab-stats .street-acc-row {
    font-size: 13px;
    grid-template-columns: 48px minmax(0, 1fr) 40px;
  }
  #tab-stats .street-acc-row .pct {
    font-size: 13px;
    min-width: 38px;
  }
}

@media (max-width: 900px) {
  .stats-slide-body {
    min-height: 0;
  }
}
@media (max-width: 720px) {
  .stats-slide-head {
    grid-template-columns: 1fr;
    display: grid;
  }
  .stats-carousel-controls {
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  #tab-stats .panel-head h2 {
    font-size: 18px;
  }
  #tab-stats .stats-section-head h3 {
    font-size: 16px;
  }
}

.leak-list { display: flex; flex-direction: column; gap: 8px; }

.leak-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.leak-rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  min-width: 24px;
}
.leak-main { flex: 1; min-width: 0; }
.leak-title { font-size: 14px; font-weight: 600; }
.leak-sub { font-size: 12px; margin-top: 2px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.re-engage-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(63,185,80,.1);
  border: 1px solid rgba(63,185,80,.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.re-engage-banner.hidden { display: none; }
.re-engage-banner p { margin: 0; font-size: 14px; }
.re-engage-actions { display: flex; gap: 8px; }

/* —— PWA instalable —— */
body.pwa-banner-open {
  padding-bottom: calc(72px + var(--safe-bottom));
}
.pwa-install-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 190;
  padding: 10px max(12px, var(--safe-left)) calc(10px + var(--safe-bottom)) max(12px, var(--safe-right));
  background: rgba(15, 20, 25, 0.96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}
.pwa-install-banner.hidden { display: none; }
.pwa-install-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.pwa-install-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pwa-install-text strong { font-size: 14px; }
.pwa-install-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.pwa-install-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pwa-ios-modal { z-index: 220; }
.pwa-ios-content { max-width: min(96vw, 420px); }
.pwa-ios-steps {
  margin: 12px 0 14px 20px;
  line-height: 1.55;
  font-size: 14px;
}
.pwa-ios-steps li { margin-bottom: 8px; }
html.pwa-standalone body {
  /* ya cubierto por safe-area en header; refuerzo visual */
  overscroll-behavior-y: contain;
}

@media (max-width: 680px) {
  .pwa-install-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .pwa-install-actions {
    width: 100%;
  }
  .pwa-install-actions .btn {
    flex: 1;
  }
}

.account-marketing {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
  line-height: 1.4;
  cursor: pointer;
}
.account-marketing input { margin-top: 2px; accent-color: var(--gold); }

.history-cutoff-note { margin-bottom: 10px; font-size: 13px; }

#home-usage { max-width: 520px; margin: 0 auto 20px; }
#play-usage { margin-bottom: 10px; }

/* ===== Análisis de manos ===== */
.analysis-content { max-width: 860px; margin: 0 auto; }
.ha-title { margin: 0 0 6px; font-size: 1.15rem; }
.ha-intro { margin-bottom: 18px; }
.ha-actions-top { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.ha-limit { font-size: 13px; }
.ha-empty { padding: 24px; text-align: center; border: 1px dashed rgba(255,255,255,.14); border-radius: 12px; }

.ha-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.ha-card { background: var(--panel, rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ha-card-head { display: flex; align-items: center; gap: 10px; }
.ha-card-cards { display: flex; gap: 3px; }
.ha-card-title { font-weight: 700; }
.ha-card-sub { font-size: 12px; }
.ha-card-board { display: flex; gap: 3px; flex-wrap: wrap; min-height: 22px; align-items: center; }
.ha-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.btn-small { padding: 6px 10px; font-size: 13px; }

.ha-play-panel { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.ha-play-opts { display: flex; flex-direction: column; gap: 10px; }
.ha-opt-group { display: flex; flex-direction: column; gap: 5px; }
.ha-opt-label { font-size: 12px; color: rgba(230,237,243,.75); }
.ha-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ha-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; font-size: 13px; }
.ha-chip.active { background: var(--accent, #2f81f7); border-color: transparent; color: #fff; }

.ha-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.ha-field { display: flex; flex-direction: column; gap: 6px; }
.ha-bb-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ha-bb-euro { width: 110px; max-width: 100%; }
.ha-bb-hint { flex: 1; min-width: 180px; font-size: 12px; line-height: 1.35; }
.ha-swap-panel { margin: 12px 0 16px; }
.ha-swap-panel h3 { margin: 0 0 6px; font-size: 15px; }
.ha-swap-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ha-swap-btn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  justify-content: flex-start; text-align: left; width: 100%;
}
.ha-swap-pos {
  min-width: 42px; font-weight: 700; color: var(--gold, #f5c451);
}
.ha-field > label { font-weight: 600; font-size: 14px; }
.ha-form input[type="text"], .ha-form input[type="number"], .ha-form select, .ha-text-input {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  color: var(--text); padding: 8px 10px; font-size: 14px; font-family: inherit;
}
.ha-form input:focus, .ha-form select:focus, .ha-text-input:focus { outline: none; border-color: var(--accent, #2f81f7); }
.ha-villains { display: flex; flex-direction: column; gap: 8px; }
.ha-villain-row, .ha-action-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ha-villain-row .ha-vpos { width: 110px; }
.ha-action-row .ha-apos-label {
  min-width: 52px; font-weight: 700; font-size: 13px; color: rgba(230,237,243,.9);
}
.ha-action-row .ha-aact { width: 120px; }
.ha-action-row .ha-aamt { width: 80px; }
.ha-board-pickers { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.ha-board-group { display: flex; flex-direction: column; gap: 6px; }
.ha-board-label { font-size: 12px; color: rgba(230,237,243,.7); }
.ha-actions-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ha-street-empty { margin: 0; font-size: 13px; }
.ha-action-row .ha-aamt:disabled { opacity: .9; color: var(--text); background: rgba(255,255,255,.05); }
.ha-street-hint { margin: 4px 0 8px; font-size: 12px; }
.ha-row-del { background: transparent; border: none; color: rgba(255,120,120,.9); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 6px; }
.ha-form-errors { color: #ffb4b4; font-size: 13px; }
.ha-form-errors ul { margin: 0; padding-left: 18px; }
.ha-form-buttons { display: flex; gap: 10px; }
.ha-text-input { width: 100%; box-sizing: border-box; resize: vertical; }
.ha-text-status { margin-top: 8px; }
.ha-loading { color: rgba(230,237,243,.85); font-size: 14px; }

/* Selector visual de cartas */
.ha-card-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ha-card-slot {
  width: 44px; height: 62px; padding: 0; border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.04);
  color: rgba(230,237,243,.55); font-size: 22px; cursor: pointer;
  display: inline-grid; place-items: center;
}
.ha-card-slot.filled {
  border-style: solid; border-color: rgba(255,255,255,.18); background: transparent; padding: 0;
}
.ha-card-slot.filled .card { width: 40px; height: 56px; font-size: 15px; box-shadow: none; }
.ha-card-slot.empty:hover { border-color: var(--accent, #2f81f7); color: #fff; }
.ha-card-clear {
  background: transparent; border: none; color: rgba(230,237,243,.65);
  font-size: 12px; cursor: pointer; text-decoration: underline; padding: 4px;
}
.ha-picker {
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  background: rgba(0,0,0,.28); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.ha-picker-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ha-picker-title { font-weight: 700; flex: 1; }
.ha-picker-selected { display: flex; gap: 6px; align-items: center; min-height: 40px; }
.ha-picker-selected .card { width: 36px; height: 50px; font-size: 14px; }
.ha-picker-deck {
  display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px;
}
.ha-pick-card {
  padding: 2px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; cursor: pointer; display: inline-grid; place-items: center;
}
.ha-pick-card .card { width: 28px; height: 40px; font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.ha-pick-card:hover:not(:disabled) { border-color: var(--accent, #2f81f7); background: rgba(47,129,247,.12); }
.ha-pick-card.selected { border-color: var(--accent, #2f81f7); background: rgba(47,129,247,.22); }
.ha-pick-card.busy, .ha-pick-card:disabled { opacity: .28; cursor: not-allowed; }

@media (max-width: 680px) {
  .ha-list { grid-template-columns: 1fr; }
  .ha-board-pickers { grid-template-columns: 1fr; }
  .ha-action-row .ha-aact, .ha-action-row .ha-aamt { flex: 1; width: auto; min-width: 80px; }
  .ha-actions-top .btn { flex: 1; }
  .ha-picker-deck { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ha-pick-card .card { width: 32px; height: 44px; font-size: 12px; }
}

/* ---- Compartir análisis (diálogo) ---- */
.share-hand-dialog {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.55);
}
.share-hand-dialog.hidden { display: none; }
.share-hand-dialog-card {
  position: relative; width: min(480px, 100%);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 18px 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.share-hand-dialog-card h3 { margin: 0 0 8px; font-size: 18px; }
.share-hand-dialog-close {
  position: absolute; top: 8px; right: 10px;
  background: transparent; border: none; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.share-hand-url-row {
  display: flex; gap: 8px; margin: 12px 0 8px;
}
.share-hand-url-row input {
  flex: 1; min-width: 0;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 13px;
}
.btn-share { margin-top: 10px; }
.review-share-row { margin: 0 0 12px; display: flex; justify-content: flex-end; }
@media (max-width: 680px) {
  .share-hand-url-row { flex-direction: column; }
}

/* ---- Admin promociones ---- */
.admin-promos-panel { margin-top: 4px; }
.admin-promos-intro { margin: 0 0 14px; max-width: 720px; }
.admin-promo-create { padding: 16px; margin-bottom: 8px; }
.admin-promo-create h4 { margin: 0 0 12px; font-size: 15px; }
.admin-promo-form { display: flex; flex-direction: column; gap: 4px; }
.admin-promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 8px 0 4px;
}
.admin-promo-input,
.admin-promo-textarea,
.admin-promo-html {
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
.admin-promo-textarea { resize: vertical; min-height: 72px; }
.admin-promo-html {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  min-height: 140px;
  resize: vertical;
}
.admin-promo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.admin-promo-generated {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.admin-promo-generated h4 { margin: 0 0 8px; }
.admin-promo-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admin-promo-link-row .admin-promo-input { flex: 1; min-width: 200px; }
.admin-promos-table .admin-promo-count-input {
  width: 72px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
.admin-promo-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-promo-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.admin-promo-badge-on {
  background: rgba(63, 185, 80, 0.15);
  color: var(--green);
  border: 1px solid rgba(63, 185, 80, 0.35);
}
.admin-promo-badge-off {
  background: rgba(240, 83, 59, 0.12);
  color: var(--red);
  border: 1px solid rgba(240, 83, 59, 0.3);
}
@media (max-width: 720px) {
  .admin-promo-link-row { flex-direction: column; align-items: stretch; }
  .admin-promo-row-actions .btn { width: 100%; }
}