/* Signed-in app (/practica). Builds on styles.css, login.css and practice.css. */
.trial-banner {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--yellow-50);
  color: var(--yellow-ink);
  font-weight: 800;
  text-align: center;
}
.avatar { text-decoration: none; }
#onboarding .step { padding-bottom: 20px; }
.level-pill {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 800;
}
.recheck {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--yellow-50);
}
.recheck strong { display: block; font-size: 18px; font-weight: 900; }
/* Confidence 1-5 (asked at the start and every ~4 weeks; feeds the employer report as a team average). */
.confidence { margin: 18px 0; padding: 16px 18px; border-radius: 20px; background: var(--blue-50); }
.confidence strong { display: block; font-size: 18px; font-weight: 900; }
.confidence p { margin: 4px 0 10px; }
.confidence-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.confidence-scale button { min-width: 0; width: 100%; padding: 0; min-height: 48px; border-radius: 14px; border: 2px solid var(--blue-100); background: #fff; font: inherit; font-size: 18px; font-weight: 900; color: var(--ink); cursor: pointer; }
.confidence-scale button:hover, .confidence-scale button:focus-visible { border-color: var(--blue); }
.confidence-scale button:disabled { opacity: .5; cursor: default; }
.confidence-ends { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); }
.confidence .confidence-note { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.recheck p { margin: 4px 0 12px; }
/* EXP-D26: dated retest card on Hoy, then the before/after result. */
.retest-card { margin: 18px 0; padding: 16px 18px; border-radius: 20px; background: var(--yellow-50); }
.retest-card strong { display: block; font-size: 18px; font-weight: 900; }
.retest-card p { margin: 4px 0 12px; }
.retest-card .retest-scores { display: flex; align-items: baseline; gap: 10px; font-size: 28px; font-weight: 900; margin: 6px 0 4px; }
.retest-card .retest-scores small { font-size: 13px; font-weight: 700; color: var(--muted); display: block; }
.retest-card.result { background: var(--blue-50); }
.drill-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.drill-actions button { min-height: 54px; }
.ba-card { padding: 16px 18px; border-radius: 20px; background: var(--gray-50); }
.ba-card p { margin: 0 0 12px; }
.ba-card .fine { margin: 10px 0 0; }
.ba-list { display: grid; gap: 12px; margin-top: 10px; }
.ba-row { padding: 14px 16px; border: 2px solid var(--line); border-radius: 18px; }
.ba-text { margin: 0 0 4px; font-weight: 800; }
.ba-row .before-after { margin-top: 8px; }
.listen-btn.playing { outline: 3px solid var(--yellow); }
.clear-version { padding: 16px 18px; border-radius: 18px; background: var(--blue-50); }
.clear-version p { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.tips { padding-left: 20px; }
.tips li { margin-bottom: 8px; line-height: 1.5; }
.again { margin-top: 16px; }
.history { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.history-item { padding: 14px 16px; border: 2px solid var(--line); border-radius: 18px; }
.history-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#tab-progreso > .as-button { margin-top: 14px; }
#tab-paywall .ghost { width: 100%; margin-top: 10px; }

/* ---------- Mode switch (Hablar libre / Conversación) ---------- */
.mode-switch { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 18px 0 4px; padding: 4px; border-radius: 16px; background: var(--gray-50); }
.mode-switch button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: 15px;
}
.mode-switch button[aria-selected="true"] { background: #ffffff; color: var(--ink); box-shadow: 0 1px 4px rgba(29, 36, 51, 0.12); }
.pro-badge { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 900; vertical-align: 1px; }

/* ---------- Role-play ---------- */
.rp-usage { font-weight: 800; color: var(--blue-dark); }
.rp-locked { margin: 12px 0 18px; padding: 18px; border-radius: 20px; background: var(--yellow-50); }
.rp-locked strong { display: block; font-size: 18px; font-weight: 900; }
.rp-locked p { margin: 6px 0 14px; }
.rp-locked button { width: 100%; }
.rp-list { display: grid; gap: 10px; margin-top: 12px; }
.rp-card {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: #ffffff;
  color: var(--ink);
}
.rp-card strong { font-weight: 900; font-size: 17px; }
.rp-card .pill { justify-self: start; }
.rp-card .muted { font-size: 15px; font-weight: 600; }
.rp-card:disabled { opacity: 0.55; cursor: not-allowed; }
.rp-surprise { background: linear-gradient(135deg, #fff7d6, #eef3ff); border-color: #ffe08a; }
.rp-card:not(:disabled):hover { border-color: var(--blue-100); }
/* EXP-D32: '¿Cómo nos conociste?' on setup step 4 */
.heard-title { margin: 22px 0 0; font-size: 18px; font-weight: 900; }
.heard-title .muted { font-size: 15px; font-weight: 700; }
.choices.heard-from { margin: 10px 0 22px; gap: 8px; }
.choices.heard-from .choice { min-height: 0; padding: 10px 12px; }
.choices.heard-from .choice span { font-size: 14px; }

/* Drill done: only the result screen shows (the last line, its tip and the step bar hide) */
#tab-drill.is-done .level-pill, #tab-drill.is-done #drill-adjust, #tab-drill.is-done #drill-progress,
#tab-drill.is-done .drill-say, #tab-drill.is-done #drill-tip, #tab-drill.is-done .stress-box { display: none; }
#tab-drill.is-done .drill-done { padding-top: 12px; }

/* EXP-D31: week + streak and the replay button on the drill-done screen */
.done-week { margin: 20px 0 0; padding: 14px 14px 12px; border-radius: 20px; background: var(--blue-50); }
.done-streak { margin: 0; font-size: 17px; font-weight: 900; color: var(--ink); }
.done-week .week { margin-top: 10px; }
#drill-retry { width: 100%; margin: 16px 0 12px; }
#drill-retry.retry-small:not([hidden]) { display: block; width: auto; min-height: 0; margin: 14px auto 0; padding: 4px 8px; border: 0; background: none; box-shadow: none; font-size: 15px; font-weight: 800; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* EXP-D28: Conversación invite on the drill-done screen */
.rp-invite { display: grid; gap: 10px; margin: 22px 0 0; padding: 18px; border-radius: 20px; border: 2px solid #ffe08a; background: linear-gradient(135deg, #fff7d6, #eef3ff); text-align: left; }
.rp-invite p { margin: 0; }
.rp-invite-title { font-size: 18px; font-weight: 900; }
.rp-invite-trial { font-size: 15px; font-weight: 800; color: var(--blue-dark); }
.rp-invite .primary { width: 100%; margin-top: 4px; }
.rp-invite .link { justify-self: center; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rp-head .kicker { margin-top: 18px; }
.rp-head .muted { margin: 2px 0 0; font-size: 15px; }
.rp-head .ghost { margin-top: 10px; flex: none; }
.rp-log { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.rp-bubble { position: relative; max-width: 86%; padding: 12px 16px; border-radius: 20px; }
.rp-bubble p { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 700; }
.rp-bubble.ai { align-self: flex-start; background: var(--blue-50); border-bottom-left-radius: 6px; padding-right: 48px; }
.rp-bubble.me { align-self: flex-end; background: var(--yellow); border-bottom-right-radius: 6px; }
.rp-bubble.typing p { letter-spacing: 3px; color: var(--muted); }
.rp-replay {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--blue);
  font-size: 13px;
}
.rp-hint { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--yellow-50); font-weight: 700; line-height: 1.45; }
.rp-controls { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 10px; align-items: stretch; }
/* The answer button stays in reach above the tab bar, however long the chat gets. */
.rp-dock {
  position: sticky;
  bottom: calc(var(--tabbar-h, 100px) + 6px);
  z-index: 5;
  padding: 10px 0 6px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 14px);
}
.rp-dock .meter { margin: 0 0 8px; }
.rp-bubble { scroll-margin-bottom: calc(var(--tabbar-h, 100px) + 120px); }
.rp-controls button { min-height: 58px; height: 58px; padding: 0 12px; white-space: nowrap; }
.rp-phrases { display: grid; gap: 10px; margin-top: 12px; }
.rp-phrase { padding: 14px 16px; border-radius: 18px; background: var(--blue-50); }
.rp-phrase-text { margin: 0 0 4px; font-size: 18px; font-weight: 900; }
.rp-phrase .muted { margin: 0 0 10px; }
#rp-results .primary.big { margin-top: 24px; }

/* ---------- Paywall tiers ---------- */
.interval-switch { margin-top: 16px; }
.plan-features { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.plan-option.pro[aria-checked="true"] { background: var(--yellow-50); border-color: var(--yellow-dark); box-shadow: inset 0 0 0 1px var(--yellow-dark); }

/* ---------- Milestones ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.badge {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 18px;
  border: 2px solid var(--yellow);
  background: var(--yellow-50);
  color: var(--ink);
  text-align: center;
}
.badge strong { font-size: 15px; font-weight: 900; line-height: 1.2; }
.badge .muted { font-size: 12px; font-weight: 700; }
.badge-emoji { font-size: 34px; line-height: 1; }
.badge.locked { border-color: var(--line); background: #ffffff; opacity: 0.6; }
.badge.locked .badge-emoji { filter: grayscale(1); }
.celebration {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(29, 36, 51, 0.45);
}
.cel-card { width: min(100%, 380px); padding: 28px 22px 22px; border-radius: 28px; background: #ffffff; text-align: center; }
.cel-emoji {
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  font-size: 64px;
  box-shadow: 0 0 0 10px var(--yellow-50);
}
.cel-card h2 { margin: 4px 0 6px; }
.cel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

/* ---------- Coach note ---------- */
.coach-card { margin: 14px 0 18px; padding: 18px; border-radius: 22px; background: var(--blue-50); border: 2px solid var(--blue-100); }
.coach-card .kicker { margin: 0 0 4px; }
.coach-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 900; }
.coach-card p { margin: 0 0 10px; line-height: 1.55; }
.coach-phrase { padding: 12px 14px; border-radius: 14px; background: #ffffff; }
.coach-phrase p { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.coach-card.compact { margin-top: 18px; }

/* "Muy fácil" / "Muy difícil" under the level pill on a drill */
.level-adjust { display: flex; gap: 16px; justify-content: center; margin: 6px 0 0; font-size: 14px; }
.level-adjust .link-button { background: none; border: 0; padding: 4px 2px; color: var(--muted, #5a6275); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.level-adjust .link-button:hover { color: var(--ink, #1d2433); }

/* ===== Practica tu texto (texto.js) ===== */
.texto-card { background: var(--yellow-50); color: var(--ink); box-shadow: 0 4px 0 var(--yellow); }
.texto-card::after { display: none; }
.texto-card .muted { color: var(--muted); }
.texto-card .free-icon { background: var(--yellow); color: var(--ink); }
.tx-label { display: block; font-weight: 800; margin: 16px 0 6px; }
.tx-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--line); border-radius: 16px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); }
textarea.tx-input { resize: vertical; min-height: 180px; line-height: 1.45; }
.tx-input:focus { outline: none; border-color: var(--blue); }
#tx-count { text-align: right; margin: 6px 0 14px; }
.tx-upsell { margin-top: 18px; padding: 16px 18px; border-radius: 20px; background: var(--blue-50); }
.tx-upsell p { margin: 0 0 12px; }
#tx-saved h2 { margin-top: 8px; }
.tx-saved-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tx-saved-info { grid-column: 1 / -1; display: grid; }
.tx-saved-info strong { font-weight: 900; }
.tx-saved-row button { min-height: 40px; padding: 6px 14px; }
.tx-saved-row .secondary { grid-column: 1; justify-self: start; }
.tx-saved-row .ghost { justify-self: end; }
.tx-saved-row { grid-template-columns: auto 1fr auto; }
.tx-saved-row .tx-del { color: var(--red-dark); }
.tx-changes { padding: 12px 14px; border-radius: 16px; background: var(--yellow-50); margin: 0 0 14px; }
.tx-changes p { margin: 0 0 6px; font-weight: 800; }
.tx-changes ul { margin: 0; padding-left: 18px; }
.tx-from { color: var(--muted); }
.tx-to { font-weight: 800; }
.tx-list { padding-left: 22px; margin: 0 0 18px; display: grid; gap: 8px; }
.tx-list li { line-height: 1.4; }
.tx-actions { display: grid; gap: 10px; margin-top: 8px; }
.tx-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.tx-word { min-height: 38px; min-width: 0; padding: 6px 10px; font-size: 16px; }
.tx-word.name { background: #fff; border-color: var(--line); color: var(--muted); }
.tx-word.miss { background: #fff; border: 2px dashed var(--muted); color: var(--muted); text-decoration: line-through; }
.tx-word.selected { outline: 3px solid var(--blue); outline-offset: 2px; }
#tx-closeup { margin: 10px 0; }
.tx-listen-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 14px; }
#tx-done .done-badge { margin-top: 10px; }
#tx-score, #tx-total { font-size: 54px; font-weight: 900; line-height: 1; }
#tx-done { text-align: center; }
#tx-done .tx-actions, #tx-done #tx-hard-block { text-align: left; }
#tx-done .closeup-chips { justify-content: flex-start; }
.tx-words { justify-content: center; }

/* EXP-D16: "Mira cómo funciona" welcome-video card on Hoy (first 7 days or until dismissed). Video styles: styles.css .welcome-video */
.welcome-card { margin: 16px 0 18px; padding: 16px 18px; border-radius: 20px; background: var(--blue-50); border: 2px solid var(--blue-100); }
.welcome-card strong { display: block; font-size: 18px; font-weight: 900; }
.welcome-card p { margin: 4px 0 12px; }
.welcome-card .welcome-video { margin: 0 0 12px; }
.welcome-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.welcome-actions .link-button { background: none; border: 0; padding: 4px 2px; min-height: 0; color: var(--muted); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* "¿Cómo funciona?" on each tab (Andrew, Oct 28): a visible pill under the h1; the video opens inline below it.
   Player box: styles.css .welcome-video. Markup: practica.html .howto; logic: welcome-video.js DiloWelcome.howto. */
.howto { margin: -2px 0 14px; }
.howto-link { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 40px; padding: 8px 16px; border: 2px solid var(--blue-100); border-radius: 999px; background: var(--blue-50); color: var(--blue-dark); font: inherit; font-size: 15px; font-weight: 800; line-height: 1.2; cursor: pointer; box-shadow: none; }
.howto-link:hover { border-color: var(--blue); }
.howto-link[aria-expanded="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.howto-box { margin-top: 10px; padding: 14px; border-radius: 20px; background: var(--blue-50); border: 2px solid var(--blue-100); text-align: center; }
.howto-box .welcome-video { margin: 0; }
.howto-box .welcome-video video { width: min(100%, calc(52vh * 9 / 16)); }
.howto-trial { margin: 10px 0 0; font-size: 15px; font-weight: 800; color: var(--blue-dark); }
.howto-close { display: inline-block; width: auto; margin-top: 8px; background: none; border: 0; padding: 6px 4px; min-height: 0; color: var(--muted); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }

/* WhatsApp reminder opt-in (EXP-D19) */
.wa-opt { margin: 4px 0 14px; text-align: left; }
.wa-opt label { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; cursor: pointer; }
.wa-opt input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.wa-opt .wa-fields { margin-top: 10px; }
.wa-opt input[type=tel] { width: 100%; box-sizing: border-box; font-size: 17px; padding: 12px 14px; border: 2px solid #d9dee8; border-radius: 14px; margin-bottom: 10px; }
.wa-opt .wa-consent { font-size: 14px; color: #5a6275; }
.wa-opt .error { margin: 8px 0 0; }
.hour-pick { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 12px 14px; margin: 0 0 14px; border: 2px solid #d9dee8; border-radius: 14px; background: #fff; }
.hour-pick[hidden] { display: none; }

/* EXP-D24: WhatsApp-first reminder channel in setup step 3 */
.wa-first { margin: 18px 0 6px; text-align: left; }
.wa-first h2 { font-size: 20px; margin: 0 0 10px; }
.wa-first input[type=tel] { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 12px 14px; border: 2px solid #d9dee8; border-radius: 14px; margin-bottom: 12px; }
.wa-first .wa-consent-line { margin: 8px 2px 4px; font-size: 13px; line-height: 1.45; color: #5a6275; }
.wa-first .wa-email-link { font-size: 14px; }

/* EXP-D25 "Practica y paga menos": paywall line and Hoy card */
.credit-line { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--blue-50); border: 2px solid var(--blue-100); font-size: 15px; line-height: 1.45; }
.credit-line button { font: inherit; font-weight: 800; color: var(--blue-700, #1f5fd6); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-align: left; }
.credit-card { margin: 14px 0 6px; padding: 16px 18px; border-radius: 22px; background: var(--blue-50); border: 2px solid var(--blue-100); }
.credit-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.credit-card p { margin: 0; line-height: 1.45; }
.credit-card .credit-bar { height: 10px; border-radius: 999px; background: #fff; overflow: hidden; margin: 10px 0 8px; position: relative; }
.credit-card .credit-bar span { display: block; height: 100%; background: var(--blue-600, #2f6fe0); border-radius: 999px; }
.credit-card .fine { margin-top: 6px; font-size: 13px; opacity: .8; }

/* ===== Escuchar (EXP-D27; escuchar.js) ===== */
.esc-hoy-card, .esc-card { background: var(--blue-50); color: var(--ink); box-shadow: 0 4px 0 var(--blue-100); }
.esc-hoy-card::after, .esc-card::after { display: none; }
.esc-hoy-card .muted, .esc-card .muted { color: var(--muted); }
.esc-hoy-card .free-icon, .esc-card .free-icon { background: #ffffff; color: var(--blue-dark); font-size: 24px; }
.esc-card.esc-first { background: var(--blue); color: #ffffff; box-shadow: 0 4px 0 var(--blue-dark); }
.esc-card.esc-first .muted { color: #dfe7ff; }
.esc-cards .esc-card { margin: 0 0 14px; }
.esc-score { display: flex; gap: 14px; align-items: center; margin: 14px 0 18px; padding: 14px 16px; border-radius: 20px; background: var(--yellow-50); }
.esc-score-n { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); font-size: 24px; font-weight: 900; color: var(--ink); }
.esc-score-text { display: grid; gap: 2px; }
.esc-score-text .muted { font-size: 14px; }
.esc-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 800; color: var(--muted); }
.esc-progress { height: 8px; margin: 8px 0 16px; border-radius: 999px; background: var(--line); overflow: hidden; }
.esc-progress span { display: block; height: 100%; width: 0; background: var(--blue); transition: width 0.3s; }
.esc-play { display: flex; gap: 10px; flex-wrap: wrap; }
.esc-play button { flex: 1 1 100%; min-height: 52px; }
.esc-phone { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 15px; font-weight: 700; color: var(--muted); }
.esc-phone input { width: 20px; height: 20px; }
.esc-q { margin: 18px 0 10px; font-weight: 800; font-size: 18px; }
.esc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.esc-choice { min-height: 64px; border: 2px solid var(--blue-100); border-radius: 18px; background: #ffffff; font: inherit; font-size: 22px; font-weight: 900; color: var(--ink); cursor: pointer; }
.esc-choice:focus-visible { border-color: var(--blue); }
/* Phones keep :hover on whatever sits under the last tap, so the new round's button in that spot looked chosen (Nov 2). */
@media (hover: hover) { .esc-choice:hover:not(:disabled) { border-color: var(--blue); } }
.esc-choice.right { border-color: #1f9d55; background: #e8f7ee; }
.esc-choice.wrong { border-color: var(--red); background: var(--red-50); }
.esc-unsure { grid-column: 1 / -1; justify-self: center; background: none; border: 0; padding: 8px; color: var(--muted); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.esc-line { font-size: 19px; line-height: 2; font-weight: 600; }
.esc-blank { font: inherit; font-size: 18px; padding: 2px 8px; margin: 0 2px; border: 0; border-bottom: 3px solid var(--blue); border-radius: 6px 6px 0 0; background: var(--blue-50); color: var(--ink); max-width: 100%; }
.esc-blank:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.esc-type .primary { width: 100%; margin-top: 12px; min-height: 54px; }
.esc-feedback { margin-top: 16px; padding: 14px 16px; border-radius: 18px; }
.esc-feedback.ok { background: #e8f7ee; }
.esc-feedback.miss { background: var(--yellow-50); }
.esc-feedback .primary { width: 100%; margin-top: 10px; min-height: 54px; }
.esc-fb-title { font-weight: 900; margin: 0 0 4px; }
.esc-word { display: inline-block; padding: 2px 10px; border-radius: 10px; font-weight: 900; font-size: 20px; transition: background 0.2s; }
.esc-word.on { background: var(--yellow); }
mark.esc-got { background: #c9efd8; border-radius: 4px; padding: 0 3px; }
mark.esc-missed { background: var(--yellow); border-radius: 4px; padding: 0 3px; font-weight: 900; }
.esc-typed { font-size: 15px; color: var(--muted); }
.esc-done { text-align: center; }
.esc-done button { width: 100%; margin-top: 10px; }

/* Hoy layout (Nov 2): centered title, one "today" card, one "Para ti hoy" card, compact "Más práctica". */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hoy-head { text-align: center; }
.hoy-head .hello { font-size: clamp(24px, 7.2vw, 34px); white-space: nowrap; margin: 2px 0 10px; }
.hoy-head .howto { margin: 0 0 4px; }
.hoy-head .howto-box { text-align: center; }
/* Hoy header (Nov 5): streak + week up top, clarity and days on one line */
.hoy-week { margin: 10px 0 16px; padding: 12px 12px 10px; border-radius: 20px; background: var(--blue-50); }
.hoy-streak { margin: 0; font-size: 17px; font-weight: 900; color: var(--ink); }
.hoy-week .week { margin-top: 8px; }
.hoy-stats { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
/* Trial: a slim pill while 3+ days are left */
.trial-banner.slim { width: fit-content; margin: 12px auto 0; padding: 5px 12px; border-radius: 999px; font-size: 14px; }
/* Plan rows: one short line and an "Empezar" pill */
#plan .plan-item { gap: 12px; }
.plan-item .go.go-pill { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #ffffff; font-size: 18px; line-height: 1; }
#plan .plan-item .muted.one-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plan .plan-item > span:nth-child(2) { min-width: 0; flex: 1; }
#plan { grid-template-columns: minmax(0, 1fr); }
.drill-why { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
/* "Más práctica" as two compact tiles */
.more-grid.compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.more-grid.compact .free-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
.more-grid.compact .free-card .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.more-grid.compact .free-card strong { font-size: 15px; }
.today-card { padding: 16px; border: 2px solid var(--line); border-radius: 24px; background: #fff; }
.today-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.today-progress .rings { width: 84px; height: 84px; flex: none; }
.today-progress .ring-stats { flex: 1; display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
.today-progress .ring-stat { display: flex; align-items: center; gap: 8px; padding: 0; background: none; border-radius: 0; }
.today-progress .ring-stat::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.today-progress .ring-stat.blue::before { background: var(--blue); }
.today-progress .ring-stat.yellow::before { background: var(--yellow); }
.today-progress .ring-stat.red::before { background: var(--red); }
.today-progress .ring-stat .label { font-size: 15px; color: var(--ink); }
.today-progress .ring-stat .value { margin: 0 0 0 auto; font-size: 16px; }
.today-progress .ring-stat .note { display: none; }
.today-card .celebrate { margin: 0 0 12px; }
.today-card #continue { width: 100%; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 16px 0 8px; }
.plan-head h2 { margin: 0; font-size: 18px; }
.plan-head .muted { margin: 0; font-size: 13px; font-weight: 700; text-align: right; }
.today-card .plan-item { padding-top: 12px; padding-bottom: 12px; }
.today-card .plan-item:last-child { margin-bottom: 0; }
.today-card .more h2 { font-size: 18px; margin: 16px 0 4px; }
.section-label { margin: 24px 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.foryou > *:not(.section-label) { margin-top: 0; margin-bottom: 0; }
.more-grid { display: grid; gap: 8px; }
.more-grid .free-card { margin: 0; padding: 12px 14px; border-radius: 18px; background: var(--gray-50); color: var(--ink); box-shadow: none; }
.more-grid .free-card::after { display: none; }
.more-grid .free-card .free-icon { width: 40px; height: 40px; background: #fff; color: var(--blue); }
.more-grid .free-card strong { font-size: 16px; }
.more-grid .free-card .muted { display: block; font-size: 13px; color: var(--muted); }
.retest-item { border-color: var(--yellow) !important; background: var(--yellow-50) !important; }
.retest-item .plan-icon { background: var(--ink); }
.hablar-switch { margin-top: 12px; } /* same gap under the header as Hoy and Progreso */
.hablar-switch button { font-size: 14px; padding: 0 4px; }
.ob-employer { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--blue-50); font-weight: 700; line-height: 1.45; }
/* Listening ladder (Nov 2): level line on the Escuchar cards and the level-change note after a set. */
.esc-card-level { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--blue-dark); }
.esc-level-msg { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; font-weight: 800; line-height: 1.45; }
.esc-level-msg.up { background: var(--yellow-50); color: var(--ink); }
.esc-level-msg.down { background: var(--gray-50); color: var(--ink); }
/* "Primero escucha" before a drill (Nov 2): the Spanish tip above the 6 warm-up pairs. */
.esc-warm-intro { margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--blue-50); font-weight: 700; line-height: 1.45; }
/* "¿Dónde va la fuerza?" (stress): the word, then A / B (the one playing is highlighted). */
.esc-stress-word { grid-column: 1 / -1; margin: 0 0 4px; text-align: center; font-size: 26px; font-weight: 900; }
.esc-ab.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); }
/* Rhythm drills: hear → say → compare for word stress (stress.js). */
.stress-box { margin: 12px 0; padding: 14px 16px; border-radius: 18px; background: var(--blue-50); }
.stress-q { margin: 0 0 10px; font-weight: 900; }
.stress-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.stress-three { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.stress-play { min-height: 44px; padding: 0 6px; font-size: 15px; }
.stress-pick { min-height: 44px; border: 2px solid var(--blue-100); border-radius: 14px; background: #fff; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; }
.stress-pick.right, .stress-pick.chosen { border-color: var(--blue); background: var(--blue-50); }
.stress-pick.wrong { border-color: var(--red); background: var(--red-50); }
.stress-msg { margin: 4px 0 0; font-weight: 700; line-height: 1.45; }

/* Progreso: the 'take the check' note sat flush under the three stat cards. */
#chart-empty { margin-top: 12px; }

/* Employer code on the setup goal step (team-join.mjs): a quiet link that opens a small form. */
.team-code { margin: 16px 0 0; text-align: center; }
.team-code summary { display: inline-block; cursor: pointer; color: var(--blue); font-weight: 800; font-size: 16px; padding: 8px 4px; list-style: none; }
.team-code summary::-webkit-details-marker { display: none; }
.team-code-form { margin: 8px 0 0; padding: 14px; border-radius: 16px; background: var(--blue-50); text-align: left; }
.team-code-form label { display: block; font-weight: 800; margin: 0 0 6px; }
.team-code-row { display: flex; gap: 8px; }
.team-code-row input { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 17px; padding: 12px 14px; border: 2px solid #d9dee8; border-radius: 14px; text-transform: uppercase; }
.team-code-row .secondary { flex: none; padding: 0 16px; min-height: 50px; }