/* =========================================================
   Capa de orden visual: se carga al final.
   Jerarquía clara (haz · mira · pregunta), menos ruido y
   comodidad táctil en celular.
   ========================================================= */

:root {
  --experience-accent: var(--color-violet);
  --experience-accent-soft: rgba(104, 13, 191, 0.1);
  --tone-do: #5729ff;
  --tone-see: #0c41c4;
  --tone-ask: #ce0071;
  --radius-card: 22px;
  --tap: 46px;
}

body { background: linear-gradient(180deg, var(--surface-tint, #f7f5fc) 0, var(--color-bg) 420px); }

/* ---------- Botones y campos coherentes ---------- */
.button, .button-secondary, .button-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--tap); padding: 0.75rem 1.25rem; font-size: 0.93rem; line-height: 1.2; text-align: center;
}
.button-secondary:hover { background: rgba(87, 41, 255, 0.14); }
.button-ghost { background: var(--color-surface); }
.button-ghost:hover:not(:disabled) { border-color: rgba(87, 41, 255, 0.35); color: var(--color-primary); }
.button--block { width: 100%; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.11em; }
.card { border-radius: var(--radius-card); }
input[type="search"], input[type="text"], select, textarea { min-height: var(--tap); }
select {
  appearance: none; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23220a63' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding: 0.7rem 2.4rem 0.7rem 0.95rem; color: var(--color-text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(87, 41, 255, 0.25); outline-offset: 1px; border-color: var(--color-secondary); }
.toast { border-radius: 14px; background: var(--fill-primary, var(--color-primary)); }

/* ---------- Navegación ---------- */
.sidebar__nav .nav-link { min-height: var(--tap); }

/* =========================================================
   INICIO · Mi ruta
   ========================================================= */
.piano-dashboard { gap: clamp(1.5rem, 3vw, 2.25rem); }
.route-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(1.5rem, 4vw, 3rem); min-height: 0; padding: var(--space-4) 0 0; align-items: center; }
.route-hero::after { display: none; }
.library-resource, .library-resource a, .resource-links a { overflow-wrap: anywhere; }
.route-hero .hero-title { color: var(--color-primary); font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.04; letter-spacing: -0.04em; }
.route-hero .hero-title span { display: inline-block; margin-top: 0.35rem; font-size: 0.55em; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--fill-violet, var(--color-violet)), var(--fill-accent, var(--color-accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.route-hero .muted { max-width: 560px; }
.route-hero__link { display: inline-flex; gap: 0.4rem; margin-top: var(--space-5); color: var(--color-primary-strong); font-weight: 700; font-size: 0.92rem; }
.route-hero__link:hover { text-decoration: underline; }

.continue-card {
  display: grid; gap: 0.9rem; grid-template-columns: 1fr; padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 0; border-radius: 26px; color: #fff;
  background: radial-gradient(circle at 100% 0, rgba(206, 0, 113, 0.45), transparent 55%), linear-gradient(145deg, var(--fill-primary, var(--color-primary)), #3b17b8);
  box-shadow: 0 22px 48px rgba(34, 10, 99, 0.25);
}
.continue-card .eyebrow { margin: 0; color: rgba(255, 255, 255, 0.78); }
.continue-card h2 { margin: 0; color: #fff; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.continue-card__next { display: grid; gap: 0.15rem; margin: 0; padding: 0.8rem 0.95rem; border-radius: 14px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); }
.continue-card__next span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.continue-card__next strong { color: #fff; }
.continue-card__progress { display: grid; gap: 0.5rem; padding: 0; background: none; }
.continue-card__progress > div:first-child { display: flex; align-items: baseline; gap: 0.5rem; }
.continue-card__progress strong { color: #fff; font-size: 1.8rem; }
.continue-card__progress span { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; }
.continue-card .progress-bar { background: rgba(255, 255, 255, 0.2); }
.continue-card .progress-bar > span { background: linear-gradient(90deg, #fff, #ffc1e3); }
.continue-card .button { background: var(--color-surface); color: var(--color-primary); }
.continue-card .button:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); }
.continue-card .button-secondary { background: rgba(255, 255, 255, 0.14); color: #fff; }

.sync-notice { margin: 0; }

/* Guía haz · mira · pregunta */
.guide__heading h2 { margin: 0; color: var(--color-primary); font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.guide__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.guide-card { --tone: var(--tone-do); position: relative; display: grid; align-content: start; gap: 0.55rem; padding: 1.35rem 1.35rem 1.25rem; border: 1px solid rgba(34, 10, 99, 0.08); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); overflow: hidden; }
.guide-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tone); }
.guide-card--see { --tone: var(--tone-see); }
.guide-card--ask { --tone: var(--tone-ask); }
.guide-card__tag { justify-self: start; padding: 0.3rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--tone) 10%, var(--surface-tint, #fff)); color: var(--tone); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; }
.guide-card h3 { margin: 0.2rem 0 0; color: var(--color-primary); font-size: 1.15rem; }
.guide-card p { margin: 0 0 0.4rem; color: var(--color-text-soft); font-size: 0.92rem; }
.guide-card .button-secondary { justify-self: start; margin-top: auto; color: var(--tone); background: color-mix(in srgb, var(--tone) 9%, var(--surface-tint, #fff)); }

/* Así empezamos como línea de tiempo */
.route-start { background: var(--color-surface); }
.route-start__steps li { background: var(--color-surface-soft); border-color: transparent; }

/* Avance y acceso en una franja */
.route-overview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-3); }
.route-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route-stat { flex-direction: column; gap: 0.35rem; border-radius: 18px; }
.account-status { display: grid; gap: 0.35rem; margin: 0; padding: 1rem 1.2rem; border: 1px solid rgba(87, 41, 255, 0.14); border-radius: 18px; background: linear-gradient(110deg, var(--surface-tint, #fbf9ff), var(--surface-tint, #fff)); }
.account-status > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.account-status .eyebrow { width: 100%; margin: 0; }
.account-status__sync { margin: 0 !important; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(183, 106, 0, 0.1); color: var(--color-warning) !important; font-size: 0.74rem !important; font-weight: 700; }
.account-status__sync.is-synced { background: rgba(21, 115, 71, 0.1); color: var(--color-success) !important; }
.account-status p { margin: 0; color: var(--color-text-soft); font-size: 0.85rem; }

.route-map-disclosure > summary { min-height: 64px; }
.route-storage-note { margin: 0; font-size: 0.85rem; text-align: center; }

/* Biblioteca */
.resource-library { margin-top: 0; }
.library-resource { background: var(--color-surface); border-color: var(--color-border); }
.resource-library__more { justify-self: center; }

/* =========================================================
   MI EXPERIENCIA
   ========================================================= */
.experience-picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: var(--space-4); }
.experience-picker label { display: flex; align-items: center; gap: 0.6rem; min-width: 0; color: var(--color-text-soft); font-size: 0.85rem; font-weight: 500; }
.experience-picker select { max-width: min(420px, 60vw); font-weight: 500; }

.experience-header { margin-bottom: var(--space-4); }
.experience-header::after { display: none; }
.experience-header--compact { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: center; }
.experience-header .hero-title { color: var(--color-primary); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.experience-header .muted { margin-bottom: 0; }
.experience-progress { display: grid; gap: 0.45rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--experience-border); }
.experience-progress .eyebrow { margin: 0; color: var(--color-violet); }
.experience-progress strong { color: var(--color-primary); font-size: 2rem; line-height: 1; }
.experience-progress span { color: var(--color-text-soft); font-size: 0.85rem; }

/* Pestañas de información */
.experience-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-5); }
.experience-info__label { flex: 0 0 auto; margin: 0; color: var(--color-text-soft); font-size: 0.82rem; font-weight: 700; }
.experience-info__tabs { display: flex; gap: 0.5rem; min-width: 0; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.info-tab { flex: 0 0 auto; min-height: 40px; padding: 0.5rem 0.95rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-primary); font-size: 0.84rem; font-weight: 700; white-space: nowrap; scroll-snap-align: start; transition: 0.15s ease; }
.info-tab:hover { border-color: rgba(104, 13, 191, 0.35); }
.info-tab.is-active { background: var(--fill-primary, var(--color-primary)); border-color: var(--color-primary); color: #fff; }
.welcome-section-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.welcome-section p { white-space: pre-line; }

/* Riel de pasos: línea de tiempo */
.experience-flow { grid-template-columns: minmax(260px, 310px) minmax(0, 1fr); gap: var(--space-5); }
.experience-flow__rail { top: 1rem; }
.step-rail { gap: 0.85rem; padding: 1.1rem 1rem; }
.step-rail__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.step-rail__header .eyebrow { margin: 0 0 0.15rem; color: var(--color-violet); }
.step-rail__count { color: var(--color-primary); font-size: 0.95rem; }
.step-rail__toggle { display: none; }
/* Vista simple: solo el bloque actual desplegado; los demás, una línea con su avance. */
.step-rail__phase small { margin-left: 0.3rem; font-weight: 700; letter-spacing: 0; opacity: 0.8; }
.step-rail__all { display: none; margin: 0.6rem 0.35rem 0; padding: 0; border: 0; background: none; color: #680dbf; font: inherit; font-size: 0.85rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
:root[data-view="simple"] .step-rail__all { display: block; }
:root[data-view="simple"] .step-rail:not(.is-open) .step-rail__item.is-other-phase { display: none; }
:root[data-view="simple"] .step-rail:not(.is-open) .step-rail__phase.is-other-phase { margin: 0.45rem 0 0; }
.phase-trail { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0 0.4rem; padding: 0; list-style: none; }
.phase-trail li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem 0.25rem 0.3rem; border-radius: 999px; background: #f1ecf8; color: var(--color-text-soft); font-size: 0.82rem; font-weight: 700; }
.phase-trail li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; font-size: 0.72rem; }
.phase-trail li.is-done { background: #e3f6eb; color: #0b7a43; }
.phase-trail li.is-current { background: #680dbf; color: #fff; }
.phase-trail li.is-current span { color: #680dbf; }
.experience-more { margin: 0.75rem 0; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.experience-more > summary { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6rem; padding: 0.8rem 1rem; cursor: pointer; list-style: none; }
.experience-more > summary span:first-child { font-weight: 800; color: var(--color-primary); }
.experience-more > summary small { grid-row: 2; color: var(--color-text-soft); }
.experience-more__chevron { grid-row: 1 / 3; grid-column: 2; align-self: center; transition: transform .2s ease; }
.experience-more[open] .experience-more__chevron { transform: rotate(180deg); }
.experience-more[open] { padding-bottom: 0.5rem; }
.experience-more > :not(summary) { margin-inline: 0.75rem; }
.step-rail__list { display: flex; flex-direction: column; gap: 0; }
.step-rail__list > * { flex-shrink: 0; }
.step-rail__phase { margin: 1rem 0 0.35rem; padding: 0 0.35rem; color: var(--color-text-soft); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
.step-rail__phase:first-child { margin-top: 0; }
.step-rail__item {
  position: relative; display: flex; align-items: flex-start; gap: 0.75rem;
  width: 100%; min-height: 56px; height: auto; margin: 0; padding: 0.55rem 0.6rem;
  border: 1px solid transparent; border-radius: 14px; background: transparent; box-shadow: none; text-align: left;
}
/* Línea que une los pasos */
.step-rail__item::before {
  content: ""; display: block; position: absolute; left: calc(0.6rem + 14px); top: 0; bottom: 0; width: 2px;
  border-radius: 0; background: var(--color-border); transform: translateX(-1px);
}
.step-rail__phase + .step-rail__item::before, .step-rail__list > .step-rail__item:first-child::before { top: calc(0.55rem + 15px); }
.step-rail__item:has(+ .step-rail__phase)::before, .step-rail__item:last-child::before { bottom: calc(100% - 0.55rem - 15px); }
.step-rail__item.is-completed::before { background: rgba(21, 115, 71, 0.35); }
.step-rail__item:hover { transform: none; box-shadow: none; background: var(--color-surface-soft); }
.step-rail__index {
  position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; margin-top: 1px;
  border: 2px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text-soft);
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0; text-transform: none;
}
.step-rail__item.is-completed .step-rail__index { border-color: var(--color-success); background: var(--color-success); color: #fff; }
.step-rail__item.is-completed .step-rail__index::after { content: none; }
.step-rail__text { display: grid; gap: 0.15rem; min-width: 0; padding-top: 2px; }
.step-rail__text strong { color: var(--color-text); font-size: 0.9rem; font-weight: 500; line-height: 1.3; }
.step-rail__text small { color: var(--color-text-soft); font-size: 0.74rem; line-height: 1.3; }
.step-rail__item.is-active { border-color: rgba(104, 13, 191, 0.22); background: var(--surface-tint, #f3edff); }
.step-rail__item.is-active .step-rail__index { border-color: var(--color-violet); background: var(--fill-violet, var(--color-violet)); color: #fff; box-shadow: 0 0 0 4px rgba(104, 13, 191, 0.15); }
.step-rail__item.is-active strong { color: var(--color-primary); font-weight: 700; }
.step-rail__item.is-active small { color: var(--color-violet); font-weight: 700; }

/* Escenario del paso */
.experience-stage { gap: var(--space-5); padding: clamp(1.1rem, 3vw, 2rem); scroll-margin-top: 1rem; }
.experience-stage:focus { outline: none; }
.experience-stage__topbar { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: var(--space-5); margin: 0; }
.experience-stage__position .eyebrow { margin: 0 0 0.2rem; color: var(--color-violet); }
.experience-stage__position h2 { margin: 0; color: var(--color-primary); font-size: 1.35rem; }
.experience-stage__position h2 span { color: var(--color-text-soft); font-weight: 500; font-size: 0.8em; }
.experience-stage__meter { height: 6px; margin-top: 0.55rem; border-radius: 99px; background: var(--color-surface-soft); overflow: hidden; }
.experience-stage__meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fill-violet, var(--color-violet)), var(--fill-accent, var(--color-accent))); }
.experience-stage__hint { display: grid; gap: 0.1rem; margin: 0; padding: 0.8rem 1rem; border-left: 4px solid var(--color-violet); border-radius: 4px 14px 14px 4px; background: var(--color-surface-soft); color: var(--color-text-soft); font-size: 0.9rem; }
.experience-stage__hint strong { color: var(--color-primary); font-size: 0.98rem; }

.experience-stage .step-card { gap: var(--space-4); }
.experience-stage .step-card__title { color: var(--color-primary); font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.experience-stage .step-card > p { margin: 0; max-width: 72ch; }

.experience-stage__actions {
  position: sticky; bottom: 0; z-index: 5; justify-content: space-between;
  margin: 0 calc(clamp(1.1rem, 3vw, 2rem) * -1); padding: 0.85rem clamp(1.1rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border); background: var(--surface-glass, rgba(255, 255, 255, 0.96)); backdrop-filter: blur(10px);
}
.experience-stage__actions .button { min-width: 200px; }

.experience-stage__ask { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.85rem 1rem; border: 1px dashed rgba(206, 0, 113, 0.35); border-radius: 16px; background: rgba(206, 0, 113, 0.04); color: var(--color-text-soft); font-size: 0.9rem; text-align: left; }
.experience-stage__ask strong { color: var(--tone-ask); }
.experience-stage__ask:hover { background: rgba(206, 0, 113, 0.08); }
.experience-stage__ask-icon { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--tone-ask); color: #fff; font-weight: 800; }

/* Cuestionario: opciones en rejilla táctil */
.survey-hero { padding: 0; border: 0; background: none; }
.survey-hero__title { color: var(--color-primary); font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.survey-section { padding: clamp(1rem, 2.5vw, 1.5rem); }
.survey-section__heading h4 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--color-primary); }
.survey-choice-group { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem; }
.survey-choice { align-items: center; min-height: var(--tap); padding: 0.6rem 0.8rem; border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 0.93rem; }
.survey-choice:has(input:checked) { border-color: var(--color-violet); background: var(--surface-tint, #f3edff); color: var(--color-primary); font-weight: 700; }
.survey-choice input { margin-top: 0; }
.quiz-options .option-card { display: flex; align-items: center; gap: 0.7rem; min-height: var(--tap); cursor: pointer; }
.quiz-options .option-card:has(input:checked) { border-color: var(--color-violet); background: var(--surface-tint, #f3edff); }

/* Paneles informativos */
.welcome-panel, .objectives-panel { margin-bottom: var(--space-5); background: var(--color-surface); }

/* MusiProfe */
.assistant-fab__toggle { min-height: 50px; }

/* El acceso flotante no invade los enlaces del pie de página. */
@media (min-width: 641px) {
  .app-footer { padding-right: 230px; }
}
@media (max-width: 640px) {
  .app-footer { align-items: flex-start; padding-right: 96px; text-align: left; }
  .app-footer .legal-links { max-width: 100%; }
}

/* =========================================================
   MI RUTINA
   ========================================================= */
.routine-hero h1 { color: var(--color-primary); }
.routine-days button { min-width: 54px; min-height: var(--tap); }
.routine-settings input[type="range"] { accent-color: var(--color-violet); width: 100%; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .route-hero { grid-template-columns: 1fr; }
  .route-overview { grid-template-columns: 1fr; }
  .experience-flow { grid-template-columns: 1fr; }
  .experience-flow__rail { position: static; max-height: none; overflow: visible; }
  .step-rail__toggle { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.45rem 0.85rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-primary); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
  :root[data-view="simple"] .step-rail__all { display: none; }
  .step-rail.is-open .step-rail__toggle span { transform: rotate(180deg); }
  .step-rail:not(.is-open) .step-rail__list { display: none; }
  .step-rail__list { max-height: none; overflow: visible; }
}

@media (max-width: 860px) {
  .guide__cards { grid-template-columns: 1fr; }
  .guide-card { grid-template-columns: 1fr; }
  .experience-header--compact { grid-template-columns: 1fr; }
  .experience-stage__topbar { grid-template-columns: 1fr; gap: var(--space-3); }
  .welcome-section-grid--two { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .route-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .route-stat { padding: 0.85rem 0.7rem; }
  .route-stat span { font-size: 0.74rem; }
  .route-hero .hero-title { font-size: clamp(2.2rem, 11vw, 2.8rem); }
  .experience-picker { flex-direction: column; align-items: stretch; }
  .experience-picker label { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .experience-picker select { max-width: none; width: 100%; }
  .experience-picker__back { align-self: flex-start; }
  .experience-header { padding: 1.1rem; }
  .experience-header .muted { font-size: 0.95rem; }
  .experience-progress { padding: 0.9rem 1rem; }
  .experience-info { flex-direction: column; align-items: stretch; gap: 0.4rem; margin-inline: -17px; }
  .experience-info__label { padding-inline: 17px; }
  .experience-info__tabs { padding-inline: 17px; }
  .experience-stage__actions {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    flex-direction: row; padding-block: 0.7rem; gap: 0.5rem;
  }
  .experience-stage__actions > * { width: auto; }
  .experience-stage__actions .button { flex: 1; min-width: 0; }
  .experience-stage__actions .button-ghost { flex: 0 0 auto; padding-inline: 0.9rem; }
  .survey-choice-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-fab__toggle span { display: none; }
  .assistant-fab__toggle { padding: 0.35rem; }
  .assistant-fab__toggle img { width: 42px; height: 42px; }
}

@media (max-width: 420px) {
  .experience-info { margin-inline: -12px; }
  .experience-info__label, .experience-info__tabs { padding-inline: 12px; }
  .experience-stage__actions .button-ghost span + * { display: none; }
  .survey-choice-group { grid-template-columns: 1fr; }
}

@media (min-width: 641px) {
  .experience-info__tabs { flex-wrap: wrap; overflow: visible; }
}

@media (max-width: 1024px) {
  .app-shell { grid-template-rows: auto 1fr; }
}

/* MusiProfe siempre acompaña el recorrido sin tapar la barra de acciones. */
@media (max-width: 640px) {
  body:has(#step-stage) .assistant-fab__toggle { display: inline-flex; }
  body:has(#step-stage) .assistant-fab { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
.experience-header__note { margin: 0.6rem 0.2rem 0; color: var(--color-text-soft); font-size: 0.8rem; }

/* =========================================================
   Sección Recursos
   ========================================================= */
.resources-page { display: grid; gap: var(--space-5); }
.resources-hero h1 { margin: 0 0 0.4rem; color: var(--color-primary); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.resources-hero .muted { max-width: 640px; margin: 0 0 var(--space-4); }
.resources-hero .resource-library__search { max-width: 560px; }
.resources-hero .resource-library__search input { width: 100%; background: var(--color-surface); }
.resource-links--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}


/* =========================================================
   Mis obras
   ========================================================= */
.pieces-page { display: grid; gap: var(--space-5); }
.pieces-hero h1 { margin: 0 0 0.4rem; color: var(--color-primary); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.pieces-hero .muted { max-width: 640px; margin: 0; }
.pieces-hero__note { display: inline-flex; align-items: center; gap: 0.5rem; margin: var(--space-3) 0 0; padding: 0.45rem 0.8rem; border-radius: 999px; background: var(--color-surface-soft); color: var(--color-primary); font-size: 0.85rem; }
.pieces-hero__note span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fill-violet, var(--color-violet)); color: #fff; font-size: 0.72rem; font-weight: 800; }
.piece-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.piece-stage { display: grid; gap: var(--space-3); }
.piece-stage h2, .piece-suggest h2 { display: flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--color-primary); font-size: 1.3rem; }
.piece-stage__count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 0.4rem; border-radius: 999px; background: rgba(12, 65, 196, 0.08); color: var(--tone-see); font-size: 0.85rem; font-weight: 800; }
.piece-stage--working { border-top: 4px solid var(--tone-do); }
.piece-stage--achieved { border-top: 4px solid var(--color-success); }
.piece-stage--achieved .piece-item__icon { background: rgba(21, 115, 71, 0.1); color: var(--color-success); }
.piece-stage__guide { min-height: 3.6em; margin: calc(var(--space-2) * -1) 0 0; color: var(--color-text-soft); font-size: .9rem; line-height: 1.45; }
.piece-stage__empty { margin: 0; }
.piece-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.piece-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.piece-item strong { color: var(--color-text); line-height: 1.3; overflow-wrap: anywhere; }
.piece-item p { margin: 0.2rem 0 0; color: var(--color-text-soft); font-size: 0.88rem; }
.piece-item__artist { color: var(--color-primary) !important; font-weight: 650; }
.piece-item > div { min-width: 0; flex: 1; }
.piece-item__icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 14px; background: rgba(12, 65, 196, 0.08); color: var(--tone-see); font-size: 1.2rem; }
.piece-item__material--link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .45rem; margin-top: .5rem; padding: .5rem .6rem; border: 1px solid rgba(12,65,196,.18); border-radius: 10px; background: rgba(12,65,196,.045); color: var(--tone-see); }.piece-item__material--link:hover, .piece-item__material--link:focus-visible { border-color: var(--tone-see); background: rgba(12,65,196,.09); text-decoration: none; }.piece-item__material--link > span:nth-child(2) { display: grid; min-width: 0; }.piece-item__material--link small { color: var(--color-text-soft); font-size: .72rem; }.piece-item__material--link strong { color: var(--tone-see); font-size: .87rem; }
.piece-item--suggestion { align-items: flex-start; }
.piece-item--suggestion .pill { display: inline-block; margin-top: 0.5rem; font-size: 0.76rem; }
.piece-suggest { display: grid; gap: var(--space-3); max-width: 760px; }
.piece-suggest > .muted { margin: 0; }
.piece-empty { display: flex; align-items: center; gap: 0.85rem; padding: 1rem; border: 1px dashed rgba(87, 41, 255, 0.3); border-radius: 18px; background: linear-gradient(110deg, var(--surface-tint, #f7f5ff), var(--surface-tint, #fdf5fa)); }
.piece-empty div { display: grid; gap: 0.1rem; }
.piece-empty strong { color: var(--color-text); }
.piece-empty span:not(.piece-item__icon) { color: var(--color-text-soft); font-size: 0.9rem; }
.piece-empty .piece-item__icon { background: var(--color-surface); }
.piece-form { display: grid; gap: 0.85rem; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.piece-suggest__composer { margin-top: var(--space-3); border: 1px solid rgba(87,41,255,.22); border-radius: 16px; background: var(--surface-tint, #faf8ff); }.piece-suggest__composer summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem .95rem; cursor: pointer; list-style: none; }.piece-suggest__composer summary::-webkit-details-marker { display: none; }.piece-suggest__composer summary > span:first-child { display: grid; gap: .15rem; }.piece-suggest__composer summary strong { color: var(--color-primary); }.piece-suggest__composer summary small { color: var(--color-text-soft); }.piece-suggest__composer[open] summary { border-bottom: 1px solid var(--color-border); }.piece-suggest__composer .piece-form { margin: 0; padding: .9rem; border: 0; }
.piece-form .eyebrow, .piece-form > .muted { margin: 0; }
.piece-form label { display: grid; gap: 0.45rem; font-weight: 700; color: var(--color-text); }
.piece-form label small { color: var(--color-text-soft); font-weight: 500; }
.piece-form input, .piece-form textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 16px; padding: 0.85rem 1rem; background: var(--color-surface); font-weight: 400; resize: vertical; }
.piece-form__hint { margin: 0; font-size: 0.85rem; }
.piece-form .button { background: linear-gradient(90deg, var(--tone-see), var(--fill-secondary, var(--color-secondary)), var(--fill-accent, var(--color-accent))); }

/* Panel del docente */
.admin-pieces { display: grid; gap: var(--space-4); }
.admin-pieces__student { display: grid; gap: 0.4rem; max-width: 520px; font-weight: 700; }
.admin-pieces__group { display: grid; gap: 0.6rem; }
.admin-pieces__group h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--color-primary); }
.admin-pieces__group summary { cursor: pointer; color: var(--color-primary); font-weight: 700; }
.piece-item--admin { flex-wrap: wrap; justify-content: space-between; }
.piece-item--admin select { min-width: 200px; }
.admin-pieces__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-pieces__form { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 0.75rem; align-items: end; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.admin-pieces__form label { display: grid; gap: 0.4rem; font-weight: 700; }
.admin-pieces__form input { width: 100%; border: 1px solid var(--color-border); border-radius: 14px; padding: 0.7rem 0.95rem; }

@media (max-width: 960px) { .piece-stages { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .admin-pieces__form { grid-template-columns: 1fr; }
  /* Cinco secciones en la barra inferior: etiquetas compactas. */
  .sidebar__nav .nav-link { font-size: 0.6rem; padding-inline: 2px; }
}

/* =========================================================
   Escríbenos
   ========================================================= */
.nav-link__icon { position: relative; display: inline-grid; place-items: center; }
.nav-link__badge { position: absolute; top: -3px; right: -5px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--fill-accent, var(--color-accent)); }
.messages-page { display: grid; gap: var(--space-5); max-width: 820px; }
.messages-hero .eyebrow { color: var(--color-accent); }
.messages-hero h1 { margin: 0 0 0.4rem; color: var(--color-primary); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.messages-hero .muted { margin: 0; max-width: 600px; }
.chat-card { display: grid; gap: var(--space-4); }
.chat-card__header { display: flex; align-items: center; gap: 0.8rem; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.chat-card__header img { width: 48px; height: 48px; padding: 5px; border: 1px solid var(--color-border); border-radius: 14px; object-fit: contain; background: var(--color-surface); }
.chat-card__header div { display: grid; }
.chat-card__header strong { color: var(--color-primary); font-size: 1.05rem; }
.chat-card__header span { display: flex; align-items: center; gap: 0.4rem; color: var(--color-text-soft); font-size: 0.85rem; }
.chat-card__header span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.chat-thread { display: grid; align-content: start; gap: 0.7rem; min-height: 220px; max-height: min(55vh, 520px); overflow-y: auto; padding: 0.25rem; overscroll-behavior: contain; }
.chat-thread__empty { margin: auto; text-align: center; }
.chat-bubble { display: grid; gap: 0.25rem; justify-self: start; max-width: min(85%, 560px); }
.chat-bubble p { margin: 0; padding: 0.75rem 0.95rem; border-radius: 6px 18px 18px 18px; background: var(--color-surface-soft); color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.chat-bubble span { padding-inline: 0.3rem; color: var(--color-text-soft); font-size: 0.72rem; }
.chat-bubble.is-own { justify-self: end; }
.chat-bubble.is-own p { border-radius: 18px 6px 18px 18px; background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), var(--fill-secondary, var(--color-secondary))); color: #fff; }
.chat-bubble.is-own span { text-align: right; }
.chat-composer { display: flex; align-items: flex-end; gap: 0.6rem; }
.chat-composer textarea { flex: 1; min-width: 0; min-height: 52px; max-height: 160px; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); resize: vertical; line-height: 1.45; }
.chat-composer__send { flex: 0 0 52px; height: 52px; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--tone-see), var(--fill-accent, var(--color-accent))); color: #fff; font-size: 1.3rem; font-weight: 800; }
.chat-card__hint { margin: -0.4rem 0 0; color: var(--color-text-soft); font-size: 0.75rem; }
.chat-rules h2 { margin: 0 0 0.5rem; color: var(--color-primary); font-size: 1.15rem; }
.chat-rules p { margin: 0; color: var(--color-text-soft); }

/* Bandeja del equipo */
.team-inbox { display: grid; gap: var(--space-4); }
.team-inbox__layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--space-4); }
.team-inbox__list { display: grid; align-content: start; gap: 0.4rem; max-height: 560px; overflow-y: auto; }
.team-inbox__item { display: grid; gap: 0.15rem; padding: 0.7rem 0.85rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); text-align: left; }
.team-inbox__item.is-active { border-color: var(--color-violet); background: var(--surface-tint, #f3edff); }
.team-inbox__item strong { color: var(--color-primary); font-size: 0.92rem; }
.team-inbox__item span { overflow: hidden; color: var(--color-text-soft); font-size: 0.82rem; white-space: nowrap; text-overflow: ellipsis; }
.team-inbox__item small { color: var(--color-text-soft); font-size: 0.7rem; }
.team-inbox__new { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--fill-accent, var(--color-accent)); color: #fff !important; font-size: 0.66rem !important; }
.team-inbox__start { display: grid; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 700; }
.team-inbox__thread { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 18px; background: var(--surface-tint, #fcfbff); }
.team-inbox__thread-head strong { color: var(--color-primary); }

@media (max-width: 860px) { .team-inbox__layout { grid-template-columns: 1fr; } .team-inbox__list { max-height: 260px; } }
@media (max-width: 640px) {
  .chat-thread { max-height: 50vh; }
  .chat-card__hint { display: none; }
  /* Seis secciones en la barra inferior. */
  .sidebar__nav { gap: 0; padding-inline: 4px; }
  .sidebar__nav .nav-link { font-size: 0.56rem; letter-spacing: -0.01em; }
  .sidebar__nav .nav-link svg { width: 19px; height: 19px; }
}

/* =========================================================
   Diario de práctica (Mi rutina)
   ========================================================= */
.routine-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.practice-diary { display: grid; gap: var(--space-5); }
.practice-diary .eyebrow { color: var(--color-accent); }
.practice-diary h2 { margin: 0 0 0.3rem; color: var(--color-primary); }
.practice-diary h3 { margin: 0; color: var(--color-primary); font-size: 1.1rem; }
.practice-diary > div > .muted, .diary-week > .muted, .diary-history > .muted { margin: 0.2rem 0 0; }
.diary-form { display: grid; gap: 0.9rem; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 20px; background: var(--surface-tint, #fcfbff); }
.diary-form__row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-4); align-items: end; }
.diary-form label, .diary-moods legend { display: grid; gap: 0.45rem; color: var(--color-text-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.diary-form label small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.diary-form output { color: var(--color-primary); }
.diary-form input[type="date"], .diary-form textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 14px; padding: 0.7rem 0.95rem; background: var(--color-surface); color: var(--color-text); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; text-transform: none; resize: vertical; }
.diary-form input[type="range"] { width: 100%; accent-color: var(--color-violet); }
.diary-moods { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.diary-moods legend { margin-bottom: 0.45rem; }
.diary-moods label { position: relative; cursor: pointer; }
.diary-moods input { position: absolute; opacity: 0; }
.diary-moods label > span[aria-hidden] { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); font-size: 1.5rem; transition: 0.15s ease; }
.diary-moods input:checked + span { border-color: var(--color-violet); background: var(--surface-tint, #f3edff); box-shadow: 0 0 0 3px rgba(104, 13, 191, 0.15); transform: translateY(-2px); }
.diary-moods input:focus-visible + span { outline: 3px solid rgba(87, 41, 255, 0.35); }
.diary-form .button { background: linear-gradient(90deg, var(--tone-see), var(--fill-secondary, var(--color-secondary)), var(--fill-accent, var(--color-accent))); }
.diary-week__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin-top: var(--space-3); }
.diary-week__day { display: grid; justify-items: center; gap: 0.3rem; }
.diary-week__value { min-height: 1.1em; color: var(--color-primary); font-size: 0.74rem; font-weight: 800; }
.diary-week__bar { position: relative; display: block; width: 100%; height: 110px; border-radius: 12px; background: var(--color-surface-soft); overflow: hidden; }
.diary-week__bar > span { position: absolute; inset: auto 0 0; min-height: 0; border-radius: 12px; background: linear-gradient(180deg, var(--fill-secondary, var(--color-secondary)), var(--fill-accent, var(--color-accent))); }
.diary-week__day small { color: var(--color-text-soft); font-size: 0.74rem; font-weight: 700; text-transform: capitalize; }
.diary-week__day.is-today small { color: var(--color-primary); }
.diary-history ul { display: grid; gap: 0.55rem; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.diary-history li { display: flex; gap: 0.8rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.diary-history__mood { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--color-surface-soft); font-size: 1.3rem; }
.diary-history li strong { display: block; color: var(--color-primary); }
.diary-history li strong::first-letter { text-transform: uppercase; }
.diary-history small { color: var(--color-text-soft); }
.diary-history p { margin: 0.3rem 0 0; color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.diary-history .piece-empty { margin-top: var(--space-3); }

@media (max-width: 720px) {
  .routine-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diary-form__row { grid-template-columns: 1fr; }
  .diary-moods { justify-content: space-between; }
  .diary-moods label > span[aria-hidden] { width: 48px; height: 48px; }
}

/* =========================================================
   Encabezado en celular, botón de Ayuda y Guía Musicala
   ========================================================= */
.topbar__help { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 38px; margin-left: auto; padding: 0.35rem 0.8rem 0.35rem 0.4rem; border: 1px solid rgba(87, 41, 255, 0.2); border-radius: 999px; background: var(--surface-tint, #faf8ff); color: var(--color-primary); font-size: 0.8rem; font-weight: 700; }
.topbar__help > span:first-child { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--fill-violet, var(--color-violet)), var(--fill-accent, var(--color-accent))); color: #fff; font-weight: 800; }
.topbar__help.is-active, .topbar__help:hover { border-color: var(--color-violet); background: var(--surface-tint, #f3edff); }
.topbar__account .topbar__help + .topbar__logout { margin-left: 0; }

.help-page { display: grid; gap: var(--space-5); max-width: 880px; }
.help-hero .eyebrow { color: var(--color-accent); }
.help-hero h1 { margin: 0 0 0.4rem; color: var(--color-primary); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.help-hero .muted { max-width: 640px; margin: 0 0 var(--space-4); }
.help-search input { width: 100%; max-width: 620px; border: 1px solid var(--color-border); border-radius: 16px; padding: 0.85rem 1rem; background: var(--color-surface); }
.help-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-4); }
.help-topics a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-primary); font-size: 0.84rem; font-weight: 700; }
.help-topics a:hover { border-color: var(--color-violet); background: var(--surface-tint, #f3edff); }
.help-topics a span { color: var(--color-violet); }
.help-topic { display: grid; gap: var(--space-3); scroll-margin-top: 1rem; }
.help-topic h2 { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--color-primary); font-size: 1.3rem; }
.help-topic__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--color-surface-soft); color: var(--color-violet); font-size: 1.1rem; }
.help-items { display: grid; gap: 0.5rem; }
.help-item { border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.help-item summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 52px; padding: 0.75rem 1rem; color: var(--color-text); font-weight: 700; cursor: pointer; list-style: none; }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary span { flex: 0 0 auto; color: var(--color-violet); transition: transform 0.15s ease; }
.help-item[open] { border-color: rgba(104, 13, 191, 0.25); background: var(--surface-tint, #fcfbff); }
.help-item[open] summary span { transform: rotate(180deg); }
.help-item__answer { display: grid; gap: 0.6rem; padding: 0 1rem 1rem; }
.help-item__answer p { margin: 0; color: var(--color-text-soft); line-height: 1.6; }
.help-item__answer .button-secondary { justify-self: start; }
.help-contact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: linear-gradient(110deg, var(--surface-tint, #f7f5ff), var(--surface-tint, #fdf5fa)); }
.help-contact h2 { margin: 0 0 0.25rem; color: var(--color-primary); font-size: 1.2rem; }
.help-contact .muted { margin: 0; }

@media (max-width: 640px) {
  /* Logo centrado y textos del pie centrados en celular. */
  .sidebar { justify-content: center; }
  .sidebar__brand { justify-content: center; }
  .sidebar__logo-link { margin: 0 auto; }
  .app-footer { align-items: center; text-align: center; }
  .route-storage-note { padding-inline: 0.5rem; }
  .topbar__help { padding-right: 0.4rem; }
  .topbar__help-label { display: none; }
  .help-contact { flex-direction: column; align-items: stretch; }
}

/* Experiencias bloqueadas en el mapa */
.route-card.is-locked { background: var(--surface-tint, #fafafc); }
.route-card.is-locked .route-card__number { background: var(--surface-tint, #eeecf3); color: var(--color-text-soft); }
.route-card.is-locked h3 { color: var(--color-text-soft); }
.route-card__lock { display: flex; align-items: center; gap: 0.4rem; margin: 0.85rem 0 0; padding: 0.5rem 0.75rem; border-radius: 12px; background: var(--surface-tint, #f1eff6); color: var(--color-text-soft); font-size: 0.78rem; font-weight: 700; }
.continue-card__wait { margin: 0; padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; }
.experience-picker__current { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--surface-tint, #f3edff); color: var(--color-primary); font-size: 0.82rem; font-weight: 700; }
.experience-picker__current span { color: var(--color-success); font-size: 0.7rem; }
@media (max-width: 640px) { .experience-picker { flex-direction: row; align-items: center; justify-content: space-between; } }

/* =========================================================
   Mi experiencia: encabezado enfocado en "qué hago ahora"
   ========================================================= */
.experience-header--focus { display: grid; gap: 0.85rem; grid-template-columns: 1fr; padding: clamp(1.1rem, 3vw, 1.75rem); }
.experience-header--focus .eyebrow { margin: 0; color: var(--color-violet); }
.experience-header--focus .hero-title { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.experience-header--focus .experience-progress { gap: 0.5rem; padding: 0; border: 0; background: none; }
.experience-progress__row { display: flex; align-items: baseline; gap: 0.6rem; }
.experience-progress__row strong { font-size: 1.5rem; }
.experience-header__go { justify-content: space-between; min-height: 64px; padding: 0.7rem 1.2rem; border-radius: 18px; text-align: left; }
.experience-header__go > span:first-child { display: grid; gap: 0.1rem; min-width: 0; font-size: 1rem; }
.experience-header__go small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.experience-header__go > span:last-child { font-size: 1.3rem; }
.experience-header--focus .experience-header__note { margin: 0; }
@media (min-width: 861px) { .experience-header__go { max-width: 460px; } }

.experience-about { margin-bottom: var(--space-5); padding: 0; overflow: hidden; }
.experience-about > summary { display: flex; align-items: center; gap: 0.8rem; min-height: 64px; padding: 0.8rem 1.1rem; cursor: pointer; list-style: none; }
.experience-about > summary::-webkit-details-marker { display: none; }
.experience-about > summary > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.experience-about > summary strong { color: var(--color-primary); }
.experience-about > summary small { color: var(--color-text-soft); font-size: 0.82rem; }
.experience-about__icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--color-surface-soft); color: var(--color-violet); font-weight: 800; }
.experience-about__chevron { color: var(--color-violet); transition: transform 0.15s ease; }
.experience-about[open] > summary { border-bottom: 1px solid var(--color-border); }
.experience-about[open] .experience-about__chevron { transform: rotate(180deg); }
.experience-about__list { display: grid; gap: 0.5rem; padding: 0.9rem; }
.about-item { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.about-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 50px; padding: 0.7rem 0.95rem; color: var(--color-text); font-weight: 700; cursor: pointer; list-style: none; }
.about-item > summary::-webkit-details-marker { display: none; }
.about-item > summary span { color: var(--color-violet); transition: transform 0.15s ease; }
.about-item[open] { background: var(--surface-tint, #fcfbff); }
.about-item[open] > summary span { transform: rotate(180deg); }
.about-item__body { display: grid; gap: 0.8rem; padding: 0 0.95rem 0.95rem; }
.about-item__body .objectives-list { margin: 0; }
.about-item__body .button-ghost { justify-self: start; }

.program-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.program-team__person { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.program-team__person img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; object-fit: cover; background: var(--color-surface-soft); }
.program-team__person div { display: grid; }
.program-team__person strong { color: var(--color-primary); }
.program-team__person span { color: var(--color-text-soft); font-size: 0.85rem; }

@media (max-width: 640px) {
  .experience-about { margin-inline: 0; }
  .objectives-list { grid-template-columns: 1fr; }
}

/* =========================================================
   Recorrido guiado
   ========================================================= */
.tour { position: fixed; inset: 0; z-index: 120; }
.tour__spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(20, 12, 50, 0.62); outline: 3px solid #fff; transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease; pointer-events: none; }
.tour.is-centered .tour__spot { top: 50%; left: 50%; width: 0; height: 0; outline: 0; }
.tour__card { position: fixed; display: grid; gap: 0.6rem; width: min(360px, calc(100vw - 24px)); padding: 1.1rem 1.2rem; border-radius: 20px; background: var(--color-surface); box-shadow: 0 24px 60px rgba(20, 12, 50, 0.35); }
.tour.is-centered .tour__card { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour__count { margin: 0; color: var(--color-violet); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tour__card h2 { margin: 0; color: var(--color-primary); font-size: 1.2rem; }
.tour__card > p:not(.tour__count) { margin: 0; color: var(--color-text-soft); line-height: 1.55; }
.tour__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; }
.tour__actions > div { display: flex; gap: 0.4rem; }
.tour__skip { border: 0 !important; padding-inline: 0.4rem !important; font-size: 0.82rem !important; }
.help-tour { display: flex; align-items: center; gap: 0.8rem; width: 100%; max-width: 620px; margin-bottom: var(--space-3); padding: 0.85rem 1rem; border: 1px solid rgba(87, 41, 255, 0.25); border-radius: 18px; background: linear-gradient(110deg, var(--surface-tint, #f3edff), var(--surface-tint, #fdf1f8)); text-align: left; }
.help-tour > span:first-child { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--fill-violet, var(--color-violet)), var(--fill-accent, var(--color-accent))); color: #fff; }
.help-tour > span:last-child { display: grid; }
.help-tour strong { color: var(--color-primary); }
.help-tour small { color: var(--color-text-soft); }

/* Canciones conectadas a Mis obras */
.song-link-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid rgba(12, 65, 196, 0.18); border-radius: 16px; background: rgba(12, 65, 196, 0.05); }
.song-link-note > span { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: var(--color-surface); color: var(--tone-see); }
.song-link-note p { flex: 1 1 220px; margin: 0; color: var(--color-text-soft); font-size: 0.9rem; }
.song-link-note strong { color: var(--color-primary); }

/* =========================================================
   Mi rutina (orden: hoy → diario → semana → logros)
   ========================================================= */
.routine-page { display: grid; gap: var(--space-5); max-width: 980px; }
.routine-head .eyebrow { color: var(--color-accent); }
.routine-head h1 { margin: 0 0 0.35rem; color: var(--color-primary); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.routine-head .muted { max-width: 620px; margin: 0; }
.routine-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-top: var(--space-4); }
.routine-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; align-items: center; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); box-shadow: var(--shadow-card); }
.routine-stat > span { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--color-surface-soft); color: var(--color-violet); font-size: 1.1rem; }
.routine-stat strong { color: var(--color-primary); font-size: 1.2rem; line-height: 1.1; }
.routine-stat small { color: var(--color-text-soft); font-size: 0.74rem; line-height: 1.25; }

.routine-today { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border: 0; color: #fff; background: radial-gradient(circle at 100% 0, rgba(206, 0, 113, 0.4), transparent 55%), linear-gradient(145deg, var(--fill-primary, var(--color-primary)), #3b17b8); }
.routine-today .eyebrow { margin: 0 0 0.3rem; color: rgba(255, 255, 255, 0.78); }
.routine-today h2 { margin: 0 0 0.35rem; color: #fff; font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.routine-today .muted { margin: 0; color: rgba(255, 255, 255, 0.82); }
.routine-today__actions { display: grid; gap: 0.5rem; flex: 0 0 auto; }
.routine-today .button { background: var(--color-surface); color: var(--color-primary); }
.routine-today .button-ghost { border-color: rgba(255, 255, 255, 0.35); background: transparent; color: #fff; }

.routine-week { display: grid; gap: var(--space-4); }
.routine-week h2 { margin: 0 0 0.25rem; color: var(--color-primary); }
.routine-week__head .muted { margin: 0; }
.routine-week__field { display: grid; gap: 0.55rem; }
.routine-week__label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; color: var(--color-text-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.routine-week__label output { color: var(--color-primary); font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.routine-week input[type="range"] { width: 100%; accent-color: var(--color-violet); }
.routine-page .routine-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; flex-direction: row; }
.routine-page .routine-days button { min-width: 0; min-height: 48px; padding: 0; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-text); font-size: 0.85rem; font-weight: 700; }
.routine-page .routine-days button.is-selected { border-color: var(--color-primary); background: var(--fill-primary, var(--color-primary)); color: #fff; }
.routine-page .routine-days button.is-today { box-shadow: 0 0 0 3px rgba(206, 0, 113, 0.25); }
.routine-week__save { justify-self: start; }
.routine-practice-guidance { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; padding: 0.9rem; border: 1px solid rgba(87, 41, 255, 0.2); border-radius: 16px; background: var(--surface-tint, #f7f2ff); }
.routine-practice-guidance > span { font-size: 1.35rem; }
.routine-practice-guidance strong { color: var(--color-primary); }
.routine-practice-guidance p, .routine-practice-guidance small { display: block; margin: 0.25rem 0 0; color: var(--color-text-soft); line-height: 1.45; }
.admin-activity { display: grid; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 1px solid rgba(87,41,255,.2); border-radius: 16px; background: var(--surface-tint, #faf8ff); }
.admin-activity h3, .admin-activity p { margin: .15rem 0; }.admin-activity__stats { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .35rem .6rem; align-items: baseline; }.admin-activity__stats strong { color: var(--color-primary); font-size: 1.2rem; }.admin-activity__stats span, .admin-activity small { color: var(--color-text-soft); }.admin-activity details { padding-top: .65rem; border-top: 1px solid var(--color-border); }.admin-activity summary { cursor: pointer; font-weight: 750; }.admin-activity__list { display: grid; gap: .45rem; margin: .7rem 0 0; padding-left: 1.25rem; }.admin-activity__list li { display: grid; gap: .08rem; }.admin-activity__list p { margin: .15rem 0 0; color: var(--color-text-soft); }
.piece-item--material { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); align-items: start; gap: 1rem; }
.admin-piece-card__main, .admin-piece-card__stage { display: grid; gap: .55rem; min-width: 0; }.admin-piece-card__stage { color: var(--color-text-soft); font-size: .82rem; font-weight: 750; }.admin-piece-card__stage select { width: 100%; }
.admin-piece-material { display: grid; gap: .55rem; margin-top: .55rem; padding: .8rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--surface-tint, #faf8ff); }.admin-piece-material__head { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }.admin-piece-material__head > div { display: grid; gap: .15rem; }.admin-piece-material small, .admin-piece-material__hint { color: var(--color-text-soft); line-height: 1.35; font-size: .83rem; }.admin-piece-material__status { flex: 0 0 auto; padding: .25rem .45rem; border-radius: 999px; background: #f1eff8; color: var(--color-text-soft); font-size: .75rem; font-weight: 700; }.admin-piece-material__status.is-linked { background: #e8f8ed; color: #146c36; }.admin-piece-material__status.is-pending { background: #fff3d6; color: #8a5600; }
.admin-piece-material__search { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: 0 .7rem; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--color-primary); }.admin-piece-material__search:focus-within { outline: 2px solid rgba(87,41,255,.25); border-color: var(--color-primary); }.admin-piece-material__search input { min-width: 0; width: 100%; padding: .62rem 0; border: 0; outline: 0; background: transparent; color: var(--color-text); }
.admin-piece-material__preview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .65rem .7rem; border: 1px solid rgba(21,115,71,.25); border-radius: 11px; background: #f4fcf6; color: #146c36; text-decoration: none; }.admin-piece-material__preview:hover, .admin-piece-material__preview:focus-visible { border-color: #146c36; background: #eaf8ee; }.admin-piece-material__preview > span:nth-child(2) { display: grid; gap: .1rem; min-width: 0; }.admin-piece-material__preview strong, .admin-piece-material__preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-piece-material__preview small { color: var(--color-text-soft); }
.admin-piece-material__choices { display: grid; gap: .35rem; }.admin-piece-material__hint { margin: 0; padding: .2rem 0; }.admin-piece-material__choice { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .55rem .65rem; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--color-text); text-align: left; cursor: pointer; }.admin-piece-material__choice:hover, .admin-piece-material__choice:focus-visible { border-color: var(--color-primary); background: #f7f4ff; }.admin-piece-material__choice > span:first-child { display: grid; gap: .1rem; min-width: 0; }.admin-piece-material__choice strong, .admin-piece-material__choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-piece-material__choice.is-current { color: var(--color-text-soft); }.admin-piece-material__pending { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--color-primary); font: inherit; font-size: .82rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.piece-item__material { display: block; margin-top: .28rem; color: var(--color-primary); font-size: .86rem; text-decoration: none; }.piece-item__material:hover { text-decoration: underline; }
.routine-week__goals { display: grid; gap: 0.6rem; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.routine-week__goals h3 { margin: 0; color: var(--color-primary); font-size: 1.1rem; }
.routine-week__goals > .muted { margin: 0; }
.routine-page .routine-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.6rem; }
.routine-page .routine-goals article { display: grid; align-content: start; gap: 0.4rem; padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--surface-tint, #fcfbff); }
.routine-goals__tag { justify-self: start; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(87, 41, 255, 0.1); color: var(--color-secondary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.routine-page .routine-goals h4 { margin: 0; color: var(--color-text); font-size: 1rem; }
.routine-page .routine-goals p { min-height: 0; margin: 0; color: var(--color-text-soft); font-size: 0.88rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.routine-page .routine-goals .button-ghost { justify-self: start; margin-top: 0.2rem; min-height: 40px; padding: 0.5rem 0.9rem; font-size: 0.84rem; }

.routine-achievements { display: grid; gap: var(--space-4); }
.routine-achievements h2 { margin: 0; color: var(--color-primary); }
.routine-page .routine-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; }
.routine-page .routine-badge { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border: 1px dashed var(--color-border); border-radius: 16px; background: var(--surface-tint, #fafafc); opacity: 1; }
.routine-page .routine-badge > span { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--surface-tint, #eeecf3); color: #9a95a8; font-size: 1.2rem; filter: grayscale(1); }
.routine-page .routine-badge strong { color: var(--color-text-soft); font-size: 0.92rem; }
.routine-page .routine-badge small { display: block; margin-top: 0.1rem; color: var(--color-text-soft); font-size: 0.76rem; }
.routine-page .routine-badge.is-unlocked { border-style: solid; border-color: rgba(104, 13, 191, 0.2); background: var(--surface-tint, #f7f3ff); }
.routine-page .routine-badge.is-unlocked > span { background: linear-gradient(135deg, var(--fill-violet, var(--color-violet)), var(--fill-accent, var(--color-accent))); color: #fff; filter: none; }
.routine-page .routine-badge.is-unlocked strong { color: var(--color-primary); }

@media (max-width: 760px) {
  .routine-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routine-today { flex-direction: column; align-items: stretch; }
  .routine-today__actions .button, .routine-today__actions .button-ghost { width: 100%; }
  .routine-week__save { justify-self: stretch; }
}
@media (max-width: 380px) {
  .routine-page .routine-days button { font-size: 0.74rem; }
  .routine-page .routine-badges { grid-template-columns: 1fr; }
}
.diary-moods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.diary-moods legend { grid-column: 1 / -1; }
.diary-moods label > span[aria-hidden] { width: 100%; max-width: 64px; margin: 0 auto; aspect-ratio: 1; height: auto; }

/* =========================================================
   Recursos: categorías, guías destacadas y tarjetas compactas
   ========================================================= */
.resources-page { max-width: 1040px; }
.resources-hero .eyebrow { color: var(--tone-see); }
.resources-hero .resource-library__search input { max-width: 620px; }
.res-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: var(--space-4); }
.res-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.4rem 0.85rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-primary); font-size: 0.84rem; font-weight: 700; }
.res-chip small { color: var(--color-text-soft); font-weight: 600; }
.res-chip:hover { border-color: rgba(12, 65, 196, 0.35); }
.res-chip.is-active { border-color: var(--color-primary); background: var(--fill-primary, var(--color-primary)); color: #fff; }
.res-chip.is-active small { color: rgba(255, 255, 255, 0.75); }

.res-featured, .res-library { display: grid; gap: var(--space-4); }
.res-group__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.res-group__head h2, .res-group__head h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0; color: var(--color-primary); }
.res-group__head h2 { font-size: 1.25rem; }
.res-group__head h3 { font-size: 1.05rem; }
.res-group__head small { color: var(--color-text-soft); font-size: 0.8rem; font-weight: 600; }
.res-group__head .button-ghost { flex: 0 0 auto; min-height: 38px; padding: 0.4rem 0.8rem; font-size: 0.82rem; }
.res-featured { background: linear-gradient(120deg, var(--surface-tint, #f6f9ff), var(--surface-tint, #fbf7ff)); border-color: rgba(12, 65, 196, 0.14); }
.res-featured__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.6rem; }
.res-featured__list a { display: grid; gap: 0.25rem; padding: 0.85rem 1rem; border: 1px solid rgba(12, 65, 196, 0.14); border-radius: 16px; background: var(--color-surface); }
.res-featured__list a:hover { border-color: var(--tone-see); }
.res-featured__list strong { color: var(--color-primary); font-size: 0.95rem; }
.res-featured__list a > span { color: var(--color-text-soft); font-size: 0.84rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.res-library__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.res-library__head .eyebrow { margin: 0 0 0.2rem; }
.res-library__head h2 { margin: 0; color: var(--color-primary); }
.res-count { margin: 0; }
.res-group { display: grid; gap: 0.7rem; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.res-group:first-of-type { padding-top: 0; border-top: 0; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.res-card { display: flex; gap: 0.8rem; padding: 0.9rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.res-card:hover { border-color: rgba(12, 65, 196, 0.3); box-shadow: 0 8px 20px rgba(12, 65, 196, 0.06); }
.res-card__icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: rgba(12, 65, 196, 0.08); font-size: 1.1rem; }
.res-card__body { display: grid; align-content: start; gap: 0.3rem; min-width: 0; }
.res-card__meta { margin: 0; color: var(--color-text-soft); font-size: 0.74rem; font-weight: 700; }
.res-card__task { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(206, 0, 113, 0.1); color: var(--color-accent); }
.res-card h3 { margin: 0; color: var(--color-text); font-size: 0.98rem; line-height: 1.3; overflow-wrap: anywhere; }
.res-card__detail { margin: 0; color: var(--color-text-soft); font-size: 0.85rem; }
.res-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.res-card__tags span { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--color-surface-soft); color: var(--color-violet); font-size: 0.72rem; font-weight: 700; }
.res-card__open { justify-self: start; margin-top: 0.2rem; color: var(--tone-see); font-size: 0.88rem; font-weight: 800; }
.res-card__open:hover { text-decoration: underline; }
.res-card__more summary { color: var(--color-text-soft); font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.res-card__more ul { display: grid; gap: 0.3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.res-card__more a { color: var(--color-primary); font-size: 0.84rem; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .res-grid, .res-featured__list { grid-template-columns: 1fr; }
  .res-chip { min-height: 38px; padding: 0.35rem 0.75rem; font-size: 0.8rem; }
}
@media (max-width: 640px) {
  .res-featured__list a { padding: 0.7rem 0.9rem; }
  .res-featured__list a > span { -webkit-line-clamp: 1; }
}

/* Recursos de la experiencia actual */
.res-featured__intro { margin: -0.6rem 0 0; font-size: 0.85rem; }
.res-featured__sub { margin: 0.3rem 0 0; color: var(--color-text-soft); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.res-featured__list a strong { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.res-featured__list a strong > span:first-child { min-width: 0; }
.res-featured__list .res-featured__arrow { flex: 0 0 auto; color: var(--tone-see); }

/* =========================================================
   Panel del equipo (admin)
   ========================================================= */
.admin-page { display: grid; gap: var(--space-5); max-width: 1040px; }
.admin-head .eyebrow { color: var(--color-accent); }
.admin-head h1 { margin: 0 0 0.35rem; color: var(--color-primary); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.admin-head .muted { margin: 0; max-width: 640px; }
.admin-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.admin-tile { display: grid; gap: 0.2rem; padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); text-align: left; box-shadow: var(--shadow-card); }
.admin-tile strong { color: var(--color-primary); font-size: 1.9rem; line-height: 1; }
.admin-tile span { color: var(--color-text-soft); font-size: 0.85rem; }
.admin-tile.is-alert { border-color: rgba(206, 0, 113, 0.35); background: var(--surface-tint, #fff6fb); }
.admin-tile.is-alert strong { color: var(--color-accent); }
.admin-how { display: grid; gap: var(--space-3); }
.admin-how h2 { margin: 0; color: var(--color-primary); font-size: 1.2rem; }
.admin-how ol { display: grid; gap: 0.5rem; margin: 0; padding-left: 1.2rem; color: var(--color-text-soft); }
.admin-how strong { color: var(--color-primary); }
.admin-how .button { justify-self: start; }

.admin-access, .admin-roster, .admin-student { display: grid; gap: var(--space-4); }
.admin-access h2, .admin-roster h2, .admin-student h2 { margin: 0; color: var(--color-primary); }
.admin-access .muted, .admin-student .muted { margin: 0.25rem 0 0; }
.admin-roster h2 small, .admin-student h3 small { color: var(--color-text-soft); font-size: 0.8rem; font-weight: 600; }
.admin-access__form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 0.6rem; align-items: end; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 18px; background: var(--surface-tint, #fcfbff); }
.admin-access__form label, .admin-student__settings label { display: grid; gap: 0.35rem; color: var(--color-text-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.admin-access__form label small { font-weight: 500; text-transform: none; }
.admin-access__form input, .admin-student__settings select { width: 100%; min-height: 46px; border: 1px solid var(--color-border); border-radius: 14px; padding: 0.6rem 0.9rem; background: var(--color-surface); color: var(--color-text); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.birthday-fields { display: grid; grid-template-columns: minmax(72px, 0.7fr) minmax(118px, 1.1fr) minmax(88px, 0.8fr) auto; gap: 0.45rem; align-items: center; }
.birthday-fields select { min-width: 0; }
.birthday-fields__clear { min-height: 42px; padding-inline: 0.7rem; white-space: nowrap; }
.birthday-fields__hint { color: var(--color-text-soft); font-size: 0.72rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.admin-access__group { display: grid; gap: 0.5rem; }
.admin-access__group h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--color-primary); }
.admin-access__group summary { color: var(--color-primary); font-weight: 700; cursor: pointer; }
.admin-access__group .muted { margin: 0; }

.admin-roster__list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.admin-roster__item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); text-align: left; }
.admin-roster__item:hover { border-color: rgba(104, 13, 191, 0.3); }
.admin-roster__item.is-active { border-color: var(--color-violet); background: var(--surface-tint, #f3edff); }
.admin-roster__avatar { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--color-surface-soft); color: var(--color-violet); font-size: 0.8rem; font-weight: 800; }
.admin-roster__text { display: grid; flex: 1; min-width: 0; }
.admin-roster__text strong { color: var(--color-primary); }
.admin-roster__text small { overflow: hidden; color: var(--color-text-soft); text-overflow: ellipsis; white-space: nowrap; }

.admin-student { border-top: 4px solid var(--color-violet); }
.admin-student__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.admin-student__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; }
.admin-reset { border-color: rgba(176, 39, 73, 0.32); color: #a32746; }
.admin-reset:hover:not(:disabled) { border-color: #a32746; color: #8a1736; background: var(--surface-tint, #fff6f7); }
.admin-student__head .eyebrow { margin: 0 0 0.2rem; }
.admin-last-access { margin: 0.5rem 0 0; color: var(--color-text-soft); font-size: 0.84rem; }
.admin-last-access strong { color: var(--color-primary); }
.admin-student h3 { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.3rem 0 0; color: var(--color-primary); font-size: 1.05rem; }
.admin-intake { display: grid; gap: 0.7rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--surface-tint, #fcfbff); }
.admin-intake summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; cursor: pointer; color: var(--color-primary); list-style: none; }
.admin-intake summary::-webkit-details-marker { display: none; }
.admin-intake summary > span:first-child { display: grid; gap: 0.15rem; }
.admin-intake summary small { color: var(--color-text-soft); font-weight: 500; }
.admin-intake summary > span:last-child { transition: transform 160ms ease; }
.admin-intake[open] summary > span:last-child { transform: rotate(180deg); }
.admin-intake__body { display: grid; gap: 0.7rem; }
.admin-intake__head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.admin-intake h3, .admin-intake h4 { margin: 0; color: var(--color-primary); }
.admin-intake h4 { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.admin-intake section { display: grid; gap: 0.4rem; }
.admin-intake dl { display: grid; gap: 0.35rem; margin: 0; }
.admin-intake dl div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--color-border); }
.admin-intake dt { color: var(--color-text-soft); font-size: 0.82rem; font-weight: 700; }
.admin-intake dd { margin: 0; color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-student__settings { display: grid; grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.2fr); gap: 0.7rem; }
.admin-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.admin-overview div { display: grid; gap: 0.15rem; padding: 0.75rem 0.85rem; border-radius: 14px; background: var(--color-surface-soft); }
.admin-overview strong { color: var(--color-primary); font-size: 1.2rem; }
.admin-overview span { color: var(--color-text-soft); font-size: 0.78rem; }
.admin-learning-trace { display: grid; gap: 0.8rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--surface-tint, #fcfbff); }
.admin-learning-trace__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.admin-learning-trace__head .eyebrow, .admin-learning-trace__head h3 { margin: 0; }
.admin-learning-trace__head h3 { margin-top: 0.2rem; color: var(--color-primary); font-size: 1rem; }
.admin-learning-trace__current { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem; border-radius: 14px; background: var(--color-surface-soft); }
.admin-learning-trace__current > span { font-size: 1.2rem; }
.admin-learning-trace__current div { display: grid; gap: 0.16rem; }
.admin-learning-trace__current small { color: var(--color-text-soft); font-size: 0.78rem; }
.admin-learning-trace__current strong { color: var(--color-primary); }
.admin-learning-trace__details { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
.admin-learning-trace__details summary { display: grid; gap: 0.2rem; color: var(--color-primary); cursor: pointer; font-weight: 700; }
.admin-learning-trace__details summary small { color: var(--color-text-soft); font-size: 0.76rem; font-weight: 500; }
.admin-learning-trace__details ol { display: grid; gap: 0.35rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.admin-learning-trace__details li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem; align-items: start; padding: 0.6rem 0.7rem; border: 1px solid transparent; border-radius: 12px; color: var(--color-text-soft); }
.admin-learning-trace__details li > span { width: 1.1rem; text-align: center; }
.admin-learning-trace__details li div { display: grid; gap: 0.1rem; }
.admin-learning-trace__details li strong { color: var(--color-text); font-size: 0.9rem; }
.admin-learning-trace__details li small { font-size: 0.76rem; }
.admin-learning-trace__details li.is-viewed { background: rgba(104, 13, 191, 0.05); }
.admin-learning-trace__details li.is-completed { color: var(--text-fixed, #14764f); }
.admin-learning-trace__details li.is-current { border-color: rgba(104, 13, 191, 0.35); background: var(--surface-tint, #f1ebff); }

.preview-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; max-width: var(--max-width); margin: 0 auto var(--space-4); padding: 0.6rem 0.8rem 0.6rem 1rem; border-radius: 14px; background: var(--surface-tint, #fff4d6); color: #7d4d00; font-size: 0.88rem; font-weight: 600; }
.preview-banner .button-ghost { min-height: 38px; padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.preview-banner--trial { border: 1px solid rgba(104, 13, 191, 0.18); background: linear-gradient(90deg, #fff0fa, #f1eaff); color: var(--color-primary); }
.preview-banner__time { margin-left: auto; padding: 0.22rem 0.55rem; border-radius: 999px; background: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.auth-preview { display: grid; grid-template-columns: 1fr; gap: .75rem; width: 100%; padding: .9rem; border: 1px solid rgba(87,41,255,.2); border-radius: 18px; background: linear-gradient(145deg, #fbf9ff, #f0edff); }
.auth-preview label { display: grid; gap: .28rem; min-width: 0; color: var(--color-primary); }
.auth-preview label span { color: var(--color-text-soft); font-size: .82rem; font-weight: 500; }
.auth-preview input { width: 100%; min-height: 46px; border: 1px solid rgba(87,41,255,.28); border-radius: 12px; background: #fff; color: var(--color-text); font: 700 1rem/1 var(--font-body); letter-spacing: .025em; padding: .7rem .8rem; text-transform: uppercase; }
.auth-preview input:focus { outline: 3px solid rgba(87,41,255,.18); border-color: var(--color-violet); }
.auth-preview .button-secondary { width: 100%; min-height: 46px; white-space: nowrap; }
.auth-preview__error { grid-column: 1 / -1; margin: 0; padding: .65rem .75rem; border-radius: 12px; background: #fff0f3; color: #a32442; font-size: .88rem; font-weight: 650; }
.auth-preview__note { margin-top: -0.45rem; }

@media (max-width: 860px) {
  .admin-tiles, .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-access__form, .admin-student__settings { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .admin-student__head { flex-direction: column; }
  .admin-student__actions { justify-content: flex-start; }
  .birthday-fields { grid-template-columns: 1fr 1.35fr 1fr; }
  .birthday-fields__clear { grid-column: 1 / -1; justify-self: start; }
  .admin-intake dl div { grid-template-columns: 1fr; gap: 0.2rem; }
  .admin-roster__item .pill { font-size: 0.7rem; }
  .admin-learning-trace__head { align-items: stretch; flex-direction: column; }
}
/* Los selectores con nombres largos de experiencias no deben ensanchar la página. */
.admin-page { grid-template-columns: minmax(0, 1fr); }
.admin-page > *, .admin-access__form > *, .admin-student__settings > * { min-width: 0; }
.admin-page select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.admin-page .piece-item--admin select { width: auto; flex: 1 1 180px; }
.admin-pieces__actions { min-width: 0; flex: 1 1 100%; }
.admin-page .card { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (max-width: 860px) { .admin-access__form, .admin-student__settings { grid-template-columns: minmax(0, 1fr); } }
.admin-page .admin-access__group, .admin-page .admin-pieces__group, .admin-page .piece-list { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.admin-page .piece-item > * { min-width: 0; }
@media (max-width: 640px) {
  .admin-page .piece-item--admin { flex-direction: column; align-items: stretch; }
  .admin-page .piece-item--material { grid-template-columns: minmax(0, 1fr); }
  .admin-page .admin-pieces__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .admin-page .admin-pieces__actions select { grid-column: 1 / -1; }
}

/* Página de ingreso en celular: logo y texto centrados */
@media (max-width: 740px) {
  .auth-header { justify-content: center; }
  .auth-header img { margin-left: 0; }
  .auth-story { text-align: center; }
  .auth-story .eyebrow { justify-content: center; }
  .auth-story__intro { margin-inline: auto; }
  .auth-keyboard { margin-inline: auto; }
  .auth-method { margin-inline: auto; text-align: center; }
  .auth-method > span { justify-items: center; }
  .auth-footer { align-items: center; text-align: center; }
}

.assistant-fab__privacy { margin: 0; padding: 0.4rem 1rem; border-top: 1px solid rgba(33, 18, 75, 0.08); background: var(--surface-tint, #fcfbff); color: var(--color-text-soft); font-size: 0.72rem; text-align: center; }

/* Panel · MusiProfe */
.mp-repeated h2, .mp-log h2 { margin: 0; color: var(--color-primary); font-size: 1.15rem; }
.mp-log h2 small { color: var(--color-text-soft); font-size: 0.8rem; font-weight: 600; }
.mp-repeated ul { display: grid; gap: 0.4rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.mp-repeated li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.8rem; border-radius: 12px; background: var(--color-surface-soft); }
.mp-repeated li strong { flex: 0 0 auto; color: var(--color-violet); font-size: 0.85rem; }
.mp-log { display: grid; gap: var(--space-3); }
.mp-list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.mp-item { display: grid; gap: 0.35rem; padding: 0.8rem 0.95rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.mp-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; color: var(--color-text-soft); font-size: 0.78rem; }
.mp-item__meta strong { color: var(--color-primary); font-size: 0.88rem; }
.mp-item__question { margin: 0; color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; }
.mp-review { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.mp-review__team { flex-basis: 100%; margin: 0; padding: 0.55rem 0.8rem; border-radius: 12px; background: #e9f8ef; color: #0b5a33; font-size: 0.88rem; white-space: pre-wrap; }
.mp-fix { display: grid; gap: 0.55rem; padding: 0.8rem; border-radius: 14px; background: var(--color-surface-soft); }
.mp-fix label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.88rem; }
.mp-fix textarea { resize: vertical; font: inherit; }
.mp-fix__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mp-team summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
.mp-team summary h2 { margin: 0; }
.mp-team > p { margin: 0.4rem 0 0.7rem; }
.mp-item__answer summary { color: var(--color-text-soft); font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.mp-item__answer p { margin: 0.4rem 0 0; padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--color-surface-soft); color: var(--color-text-soft); font-size: 0.88rem; white-space: pre-wrap; }
.mp-tag { margin-left: auto; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; }
.mp-tag--ai { background: rgba(87, 41, 255, 0.1); color: var(--color-secondary); }
.mp-tag--base { background: rgba(21, 115, 71, 0.1); color: var(--color-success); }
.mp-tag--gap { background: rgba(206, 0, 113, 0.1); color: var(--color-accent); }
.mp-tag--chip { background: var(--surface-tint, #f1eff6); color: var(--color-text-soft); }

/* Avisos (toasts): siempre visibles, por encima de la barra, MusiProfe y el recorrido */
.toast-stack { z-index: 200; right: 1.25rem; bottom: 1.25rem; left: auto; width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
.toast { min-width: 0; padding: 0.85rem 1rem; border-radius: 14px; background: var(--fill-primary, var(--color-primary)); color: #fff; font-size: 0.92rem; line-height: 1.45; box-shadow: 0 16px 40px rgba(20, 12, 50, 0.3); pointer-events: auto; }
@media (max-width: 640px) {
  .toast-stack { top: calc(0.75rem + env(safe-area-inset-top, 0px)); right: 0.75rem; bottom: auto; left: 0.75rem; width: auto; }
}

/* Recursos: descripciones largas recortadas con "Ver más" */
.res-card__desc summary { display: grid; gap: 0.2rem; cursor: pointer; list-style: none; }
.res-card__desc summary::-webkit-details-marker { display: none; }
.res-card__detail--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-card__desc[open] .res-card__detail--clamp { display: block; -webkit-line-clamp: unset; }
.res-card__toggle { color: var(--tone-see); font-size: 0.8rem; font-weight: 800; }
.res-card__toggle::after { content: "Ver más ⌄"; }
.res-card__desc[open] .res-card__toggle::after { content: "Ver menos ⌃"; }

/* Mapa de experiencias: estado claro y letra más contenida */
.route-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 var(--space-4); padding: 0.75rem 0.9rem; border-radius: 14px; background: var(--color-surface-soft); list-style: none; color: var(--color-text-soft); font-size: 0.8rem; }
.route-legend li { display: flex; align-items: center; gap: 0.4rem; }
.route-card__state { flex: 0 0 auto; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.route-card__state--current { background: var(--fill-violet, var(--color-violet)); color: #fff; }
.route-card__state--done { background: rgba(21, 115, 71, 0.12); color: var(--color-success); }
.route-card__state--locked { background: var(--surface-tint, #eeecf3); color: var(--color-text-soft); }
.route-card { padding: 0.85rem; }
.route-card__meta { align-items: center; font-size: 0.72rem; }
.route-card h3 { margin: 0.35rem 0; font-size: 0.95rem; line-height: 1.3; }
.route-card__goals { margin: 0.4rem 0; font-size: 0.78rem; line-height: 1.4; }
.route-card .button, .route-card .button-secondary { min-height: 40px; margin-top: 0.6rem; padding: 0.5rem 0.9rem; font-size: 0.8rem; }
.route-card.is-current { border: 2px solid var(--color-violet); background: var(--surface-tint, #faf7ff); box-shadow: 0 10px 24px rgba(104, 13, 191, 0.12); }
.route-card.is-locked { background: var(--surface-tint, #fafafc); border-style: dashed; }
.route-card.is-locked h3, .route-card.is-locked .route-card__goals { color: var(--color-text-soft); }
.route-card.is-locked .route-card__number { background: var(--surface-tint, #eeecf3); color: #9a95a8; }
.route-card__lock { margin: 0.6rem 0 0; padding: 0.5rem 0.7rem; border-radius: 12px; background: var(--surface-tint, #f1eff6); color: var(--color-text-soft); font-size: 0.76rem; font-weight: 600; line-height: 1.4; }
.preview-banner { flex-wrap: wrap; }
.preview-banner label { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; font-size: 0.82rem; }
.preview-banner select { min-height: 36px; padding: 0.3rem 2rem 0.3rem 0.7rem; font-size: 0.82rem; }

/* =========================================================
   Materiales de siempre (calentamiento) y visor dentro de la app
   ========================================================= */
.always-materials { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); padding: clamp(1rem, 2.5vw, 1.4rem); border-color: rgba(206, 0, 113, 0.18); background: linear-gradient(110deg, var(--surface-tint, #fff7fb), var(--surface-tint, #fbf8ff)); }
.always-materials__warmup { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.always-materials__warmup > div { flex: 1 1 240px; min-width: 0; }
.always-materials__icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 16px; background: var(--color-surface); font-size: 1.5rem; box-shadow: var(--shadow-card); }
.always-materials .eyebrow { margin: 0 0 0.15rem; color: var(--color-accent); }
.always-materials h2 { margin: 0 0 0.2rem; color: var(--color-primary); font-size: 1.12rem; }
.always-materials .muted { margin: 0; font-size: 0.88rem; }
.always-materials__warmup .button { flex: 0 0 auto; }
.always-materials__list { border-top: 1px solid rgba(206, 0, 113, 0.14); padding-top: var(--space-3); }
.always-materials__list > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; color: var(--color-primary); font-weight: 700; cursor: pointer; list-style: none; }
.always-materials__list > summary::-webkit-details-marker { display: none; }
.always-materials__list > summary small { color: var(--color-text-soft); font-weight: 500; }
.always-materials__list > summary span { margin-left: auto; color: var(--color-violet); }
.always-materials__list[open] > summary span { transform: rotate(180deg); }
.always-materials__list .res-featured__list { margin-top: var(--space-3); }
.res-featured--always { border-color: rgba(206, 0, 113, 0.18); background: linear-gradient(110deg, var(--surface-tint, #fff7fb), var(--surface-tint, #fbf8ff)); }
@media (max-width: 640px) { .always-materials__warmup .button { width: 100%; } }

.viewer { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--color-bg); }
.viewer__bar { display: flex; align-items: center; gap: 0.6rem; min-height: 60px; padding: 0.5rem 0.8rem calc(0.5rem); padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 6px 18px rgba(34, 10, 99, 0.06); }
.viewer__bar h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--color-primary); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.viewer__back { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 42px; padding: 0.45rem 0.9rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), var(--fill-secondary, var(--color-secondary))); color: #fff; font-weight: 700; }
.viewer__external { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-soft); font-weight: 700; }
.viewer__frame-wrap { min-height: 0; padding: clamp(0rem, 2vw, 1rem); }
.viewer__frame { display: block; width: 100%; height: 100%; border: 0; border-radius: clamp(0px, 2vw, 16px); background: var(--color-surface); box-shadow: var(--shadow-card); }
.viewer__frame-wrap--video { display: grid; place-items: center; overflow: auto; background: radial-gradient(ellipse at center, rgba(44, 20, 79, 0.8), rgba(14, 11, 25, 0.98)), var(--video-thumbnail) center / cover; }
.viewer__video-poster { position: relative; display: block; width: min(100%, 1040px); max-height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #100c18; cursor: pointer; box-shadow: 0 20px 64px rgba(0,0,0,.35); }
.viewer__video-poster img { display: block; width: 100%; max-height: calc(100vh - 112px); object-fit: contain; }
.viewer__video-poster-play { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 76px; height: 54px; border-radius: 16px; transform: translate(-50%, -50%); background: #e62117; color: #fff; font-size: 1.7rem; box-shadow: 0 5px 24px rgba(0,0,0,.35); transition: transform .18s ease, background .18s ease; }
.viewer__video-poster:hover .viewer__video-poster-play { background: #cc1d15; transform: translate(-50%, -50%) scale(1.08); }
.viewer__video-poster:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 4px; }
body:has(.viewer) { overflow: hidden; }
/* El título largo no debe ensanchar el visor: una sola columna al ancho de la pantalla. */
.viewer { grid-template-columns: minmax(0, 1fr); width: 100vw; max-width: 100%; }
.viewer__bar, .viewer__frame-wrap { min-width: 0; }
@media (max-width: 640px) {
  .viewer__frame-wrap { padding: 0; }
  .viewer__frame { border-radius: 0; box-shadow: none; }
  .viewer__back { padding-inline: 0.75rem; }
}

/* =========================================================
   Guías de siempre integradas (calentamiento, técnica, gimnasia)
   ========================================================= */
.guide-page { display: grid; gap: var(--space-4); max-width: 860px; }
.guide-hero { display: grid; gap: 0.35rem; }
.guide-hero__back { justify-self: start; margin-bottom: var(--space-2); }
.guide-hero .eyebrow { margin: 0; color: var(--color-accent); }
.guide-hero h1 { margin: 0; color: var(--color-primary); font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -0.03em; }
.guide-hero .muted { margin: 0; max-width: 640px; }
.guide-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0; }
.guide-chips span { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary); font-size: 0.8rem; font-weight: 700; }
.guide-section { display: grid; gap: var(--space-3); }
.guide-section h2, .warmup-routines h2, .warmup-player h2, .warmup-breath h2 { margin: 0; color: var(--color-primary); font-size: 1.2rem; }
.guide-section > p { margin: 0; color: var(--color-text); line-height: 1.6; }
.guide-section h3, .guide-level__body h3 { margin: 0.4rem 0 0; color: var(--color-text-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.guide-list { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.2rem; color: var(--color-text); line-height: 1.55; }
.guide-list--check { list-style: none; padding: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.guide-list--check li { padding: 0.55rem 0.75rem; border-radius: 12px; background: var(--color-surface-soft); color: var(--color-primary); font-weight: 600; font-size: 0.9rem; }
.guide-list--check li::before { content: "✓ "; color: var(--color-success); }
.guide-list--steps li::marker { color: var(--color-violet); font-weight: 800; }
.guide-list--tips { list-style: none; padding: 0; }
.guide-list--tips li { position: relative; padding-left: 1.4rem; color: var(--color-text-soft); }
.guide-list--tips li::before { content: "♪"; position: absolute; left: 0; color: var(--color-violet); }
.guide-image { width: 100%; max-width: 520px; border-radius: 16px; border: 1px solid var(--color-border); }
.guide-closing { background: linear-gradient(110deg, var(--surface-tint, #f7f5ff), var(--surface-tint, #fdf5fa)); }
.guide-closing p { color: var(--color-primary); font-weight: 600; }
.guide-note { margin: 0; font-size: 0.85rem; }
.guide-video { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(206, 0, 113, 0.2); border-radius: 16px; background: var(--surface-tint, #fff7fb); }
.guide-video--thumbnail { position: relative; display: grid; grid-template-columns: minmax(96px, 152px) minmax(0, 1fr); gap: 0.9rem; overflow: hidden; padding: 0; }
.guide-video--thumbnail > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-surface-soft); }
.guide-video__copy { display: grid; align-content: center; gap: 0.2rem; min-width: 0; padding: 0.6rem 2.8rem 0.6rem 0; }
.guide-video__overlay { position: absolute; top: 50%; left: clamp(28px, 8%, 72px); display: grid; place-items: center; width: 42px; height: 32px; transform: translate(-50%, -50%); border-radius: 10px; background: #e62117; color: #fff; opacity: 0; transition: opacity .18s ease; }
.guide-video--thumbnail:hover .guide-video__overlay, .guide-video--thumbnail:focus-visible .guide-video__overlay { opacity: 1; }
.guide-video > span:first-child { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--fill-accent, var(--color-accent)); color: #fff; }
.guide-video > span:last-child { display: grid; min-width: 0; }
.guide-video strong { color: var(--color-primary); }
.guide-video small { color: var(--color-text-soft); overflow-wrap: anywhere; }
.guide-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; }

.guide-level { padding: 0; overflow: hidden; }
.guide-level > summary { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.1rem; cursor: pointer; list-style: none; }
.guide-level > summary::-webkit-details-marker { display: none; }
.guide-level__icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 14px; background: var(--color-surface-soft); font-size: 1.3rem; }
.guide-level > summary > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.guide-level summary strong { color: var(--color-primary); }
.guide-level summary small { color: var(--color-text-soft); }
.guide-level__chevron { color: var(--color-violet); transition: transform 0.15s ease; }
.guide-level[open] .guide-level__chevron { transform: rotate(180deg); }
.guide-level__body { display: grid; gap: 0.6rem; padding: 0 1.1rem 1.1rem; }
.guide-level__body > p { margin: 0; line-height: 1.6; }

.guide-exercises { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.55rem; }
.guide-exercises article { display: grid; gap: 0.2rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.guide-exercises article p { margin: 0; color: var(--color-text-soft); font-size: 0.88rem; }
.guide-exercises article .guide-exercises__type { color: var(--color-violet); font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.guide-exercises article .guide-exercises__combo { color: var(--color-primary); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; }
.guide-levels { display: grid; gap: 0.55rem; }
.guide-levels article { display: grid; gap: 0.25rem; padding: 0.8rem 0.95rem; border-left: 4px solid var(--color-violet); border-radius: 6px 14px 14px 6px; background: var(--color-surface-soft); }
.guide-levels strong { color: var(--color-primary); }
.guide-levels p { margin: 0; color: var(--color-text); font-size: 0.92rem; }
.guide-levels p.guide-levels__sign { color: var(--color-success); font-size: 0.85rem; font-weight: 600; }
.guide-two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.guide-two > div { display: grid; align-content: start; gap: 0.6rem; }
.guide-pairs { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.guide-pairs li { display: grid; gap: 0.1rem; padding: 0.65rem 0.8rem; border-radius: 12px; background: var(--color-surface-soft); color: var(--color-text-soft); font-size: 0.9rem; }
.guide-pairs strong { color: var(--color-primary); }
.guide-pairs--avoid li { background: var(--surface-tint, #fff4f8); }
.guide-pairs--avoid strong { color: var(--color-accent); }
.guide-tips { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.guide-tips li { display: flex; align-items: center; gap: 0.6rem; color: var(--color-text); }
.guide-tips span { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--color-surface-soft); }
.guide-fingers { display: grid; gap: 0.5rem; }
.guide-fingers article { display: flex; gap: 0.8rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.guide-fingers__number { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--fill-violet, var(--color-violet)); color: #fff; font-weight: 800; }
.guide-fingers strong { color: var(--color-primary); }
.guide-fingers small { color: var(--color-text-soft); font-weight: 500; }
.guide-fingers p { margin: 0.2rem 0 0; color: var(--color-text); font-size: 0.92rem; }
.guide-fingers p.guide-fingers__tip { color: var(--color-text-soft); font-size: 0.84rem; }

/* Calentamiento interactivo */
.warmup-routines, .warmup-player, .warmup-breath { display: grid; gap: var(--space-3); }
.warmup-routines__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.warmup-option { display: grid; justify-items: center; gap: 0.1rem; padding: 0.75rem 0.4rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); text-align: center; }
.warmup-option span { font-size: 1.3rem; }
.warmup-option strong { color: var(--color-primary); font-size: 1.05rem; }
.warmup-option small { color: var(--color-text-soft); font-size: 0.72rem; line-height: 1.3; }
.warmup-option.is-active { border-color: var(--color-primary); background: var(--fill-primary, var(--color-primary)); }
.warmup-option.is-active strong, .warmup-option.is-active small { color: #fff; }
.warmup-player { border-top: 4px solid var(--color-accent); }
.warmup-player__count { margin: 0; color: var(--color-accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.warmup-player__media { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; }
.warmup-player__media img { width: 100%; max-height: 300px; object-fit: contain; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); }
.warmup-player__timer { position: relative; justify-self: center; width: 140px; height: 140px; }
.warmup-player__timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.warmup-ring__bg { fill: none; stroke: var(--color-surface-soft); stroke-width: 10; }
.warmup-ring__fg { fill: none; stroke: var(--color-accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.9s linear; }
.warmup-player__timer strong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-primary); font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.warmup-player__controls { display: grid; grid-template-columns: 56px 1fr 56px; gap: 0.5rem; }
.warmup-player__controls .button-ghost { padding: 0; font-size: 1.2rem; }
.warmup-player__sound { display: flex; align-items: center; gap: 0.5rem; justify-content: center; color: var(--color-text-soft); font-size: 0.85rem; }
.warmup-player__sound input { accent-color: var(--color-violet); width: 18px; height: 18px; }
.warmup-steps { display: grid; gap: 0.3rem; margin: 0; padding: var(--space-3) 0 0; list-style: none; border-top: 1px solid var(--color-border); }
.warmup-steps button { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.55rem; border: 0; border-radius: 12px; background: transparent; color: var(--color-text-soft); font-size: 0.88rem; text-align: left; }
.warmup-steps button span { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--color-surface-soft); color: var(--color-primary); font-size: 0.75rem; font-weight: 800; }
.warmup-steps button.is-active { background: var(--surface-tint, #fff1f8); color: var(--color-primary); font-weight: 700; }
.warmup-steps button.is-active span { background: var(--fill-accent, var(--color-accent)); color: #fff; }
.warmup-steps button.is-done span { background: var(--color-success); color: #fff; }
.warmup-breath { justify-items: center; text-align: center; }
.warmup-breath h2 { justify-self: start; }
.warmup-breath__patterns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.warmup-breath__orb { width: 120px; height: 120px; margin: 0.6rem 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9cfff 45%, var(--fill-secondary, var(--color-secondary))); box-shadow: 0 0 0 10px rgba(87, 41, 255, 0.08); transform: scale(0.7); transition-property: transform; transition-timing-function: ease-in-out; }
.warmup-breath__orb.is-in, .warmup-breath__orb.is-hold { transform: scale(1.1); }
.warmup-breath__orb.is-out { transform: scale(0.7); }
.warmup-breath__phrase { margin: 0; color: var(--color-primary); font-weight: 700; }
.warmup-challenge { background: linear-gradient(110deg, var(--surface-tint, #fffbea), var(--surface-tint, #fff)); }
.warmup-challenge .button-ghost { justify-self: start; }
@media (max-width: 480px) {
  .warmup-player__media { grid-auto-flow: row; }
  .warmup-player__timer { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .warmup-breath__orb, .warmup-ring__fg { transition: none; } }

/* =========================================================
   Plan de cada meta y evaluación de la experiencia
   ========================================================= */
.goal-plan__title { margin: var(--space-3) 0 0; color: var(--color-primary); font-size: 1.05rem; }
.goal-plan { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.goal-plan__step { position: relative; display: flex; gap: 0.85rem; padding: 0 0 1.1rem; }
.goal-plan__step::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--color-border); }
.goal-plan__step:last-child::before { display: none; }
.goal-plan__number { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--fill-violet, var(--color-violet)); color: #fff; font-size: 0.85rem; font-weight: 800; }
.goal-plan__step > div { display: grid; gap: 0.45rem; min-width: 0; flex: 1; padding-top: 4px; }
.goal-plan__step h4 { margin: 0; color: var(--color-primary); font-size: 1rem; }
.goal-plan__step p { margin: 0; color: var(--color-text); line-height: 1.55; }
.goal-plan__step .map-goal__resources { margin: 0; }
.goal-plan__list { display: grid; gap: 0.35rem; margin: 0; padding-left: 1.15rem; color: var(--color-text); line-height: 1.5; }
.goal-plan__list li::marker { color: var(--color-violet); font-weight: 800; }
.goal-plan__criteria { padding: 0.7rem 0.85rem; border-left: 4px solid var(--color-success); border-radius: 6px 14px 14px 6px; background: rgba(21, 115, 71, 0.06); }
.goal-plan__action { justify-self: start; }
.goal-plan__note { display: flex; gap: 0.5rem; margin: 0; padding: 0.8rem 0.95rem; border-radius: 14px; background: var(--color-surface-soft); color: var(--color-primary); font-size: 0.9rem; font-weight: 600; }

.eval { display: grid; gap: var(--space-4); }
.eval-intro > p { margin: 0 0 0.6rem; line-height: 1.6; }
.eval-how { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.2rem; color: var(--color-text); }
.eval-how li::marker { color: var(--color-violet); font-weight: 800; }
.eval-how strong { color: var(--color-primary); }
.eval-status { display: flex; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: 16px; }
.eval-status__icon { flex: 0 0 auto; font-size: 1.6rem; }
.eval-status strong { color: var(--color-primary); }
.eval-status p { margin: 0.2rem 0 0; color: var(--color-text-soft); }
.eval-status--wait { background: var(--surface-tint, #fff8e6); }
.eval-status--practice { background: var(--surface-tint, #f3edff); }
.eval-status--done { background: rgba(21, 115, 71, 0.1); }
.eval-status__feedback { margin: 0.6rem 0 0; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--color-surface); color: var(--color-text); white-space: pre-wrap; }
.eval-status__no-feedback { margin: 0.55rem 0 0; color: var(--color-text-soft); font-size: .9rem; }
.eval-status__feedback span { display: block; margin-bottom: 0.2rem; color: var(--color-violet); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.eval-form { display: grid; gap: var(--space-4); }
.eval-form fieldset { display: grid; gap: 0.7rem; margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 18px; background: var(--surface-tint, #fcfbff); min-width: 0; }
.eval-form fieldset[disabled] { opacity: 0.75; }
.eval-form legend { padding: 0 0.3rem; color: var(--color-primary); font-weight: 800; }
.eval-goal { display: grid; gap: 0.4rem; padding: 0.75rem 0.85rem; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); }
.eval-goal__title { margin: 0; color: var(--color-primary); font-weight: 700; }
.eval-goal__criteria { margin: 0; color: var(--color-text-soft); font-size: 0.86rem; line-height: 1.5; }
.eval-goal__criteria span { color: var(--color-success); font-weight: 700; }
.eval-goal__levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.eval-goal__levels label { position: relative; cursor: pointer; }
.eval-goal__levels input { position: absolute; opacity: 0; }
.eval-goal__levels span { display: grid; place-items: center; min-height: 44px; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text-soft); font-size: 0.8rem; font-weight: 700; text-align: center; line-height: 1.2; }
.eval-goal__levels input:checked + span { border-color: var(--color-violet); background: var(--surface-tint, #f3edff); color: var(--color-primary); }
.eval-goal__levels input[value="ready"]:checked + span { border-color: var(--color-success); background: rgba(21, 115, 71, 0.1); color: var(--color-success); }
.eval-goal__levels input:focus-visible + span { outline: 3px solid rgba(87, 41, 255, 0.35); }
.eval-evidence p { margin: 0; }
.eval-evidence label { display: grid; gap: 0.35rem; color: var(--color-text); font-weight: 700; }
.eval-evidence label small { color: var(--color-text-soft); font-weight: 500; }
.eval-evidence input, .eval-evidence textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 14px; padding: 0.75rem 0.9rem; background: var(--color-surface); font-weight: 400; resize: vertical; }
.eval-upload { position: relative; align-items: start; padding: 0.9rem; border: 1px solid rgba(87, 41, 255, 0.25); border-radius: 16px; background: var(--color-surface); cursor: pointer; }
.eval-upload:hover { border-color: var(--color-violet); background: var(--surface-tint, #fbf9ff); }
.eval-upload:focus-within { outline: 3px solid rgba(87, 41, 255, 0.25); outline-offset: 2px; }
.eval-upload input[type="file"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eval-upload__button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 0.2rem; padding: 0.7rem 1rem; border-radius: 999px; background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), var(--fill-secondary, var(--color-secondary))); color: #fff; font-weight: 800; }
.eval-upload__name { overflow-wrap: anywhere; }
.eval-upload.is-uploaded { border-color: rgba(21, 115, 71, 0.45); background: rgba(21, 115, 71, 0.06); }
.eval-upload__name--received { color: var(--color-success, #157347) !important; font-weight: 800 !important; }
.eval-upload__name--uploading { color: var(--color-violet); font-weight: 700 !important; }
.eval-upload__name--error { color: var(--color-danger, #b42318) !important; font-weight: 700 !important; }
.eval-evidence__or { text-align: center; color: var(--color-text-soft); font-weight: 700; margin: 0.1rem 0; }
.eval-evidence__goal { display: grid; gap: 0.7rem; padding: 0.9rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--surface-glass, rgba(255, 255, 255, 0.72)); }
.eval-evidence__goal > div { display: grid; gap: 0.2rem; }
.eval-evidence__goal > div strong { color: var(--color-primary); }
.eval-evidence__goal > div small { color: var(--color-text-soft); }
.eval-autosave-note { margin: -0.15rem 0 0.7rem; color: var(--color-success, #157347); font-size: .84rem; font-weight: 700; }
.eval-evidence__personal { display: grid; gap: 0.7rem; margin-top: 1rem; padding: 0.9rem; border: 1px solid rgba(21,115,71,.28); border-radius: 16px; background: rgba(21,115,71,.05); }.eval-evidence__personal > small { color: var(--color-text-soft); line-height: 1.45; }.eval-evidence__personal-more { padding-top: .2rem; }.eval-evidence__personal-more summary { cursor: pointer; color: var(--color-primary); font-weight: 750; }.eval-evidence__personal-more > div { display: grid; gap: .7rem; margin-top: .7rem; }
.eval-form__hint { margin: 0; color: var(--color-text-soft); font-size: 0.85rem; }
.eval-submit-notice { display: grid; gap: 0.25rem; margin-top: 1rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(87, 41, 255, 0.24); border-radius: 14px; background: var(--surface-tint, #f3edff); color: var(--color-text); font-size: 0.88rem; line-height: 1.45; }
.eval-submit-notice strong { color: var(--color-primary); }
.eval-form--submitted .eval-goals, .eval-form--submitted .eval-evidence { display: none; }
.eval-submitted-confirmation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; padding: 1rem; border: 1px solid rgba(21,115,71,.34); border-radius: 16px; background: #f3fff7; }
.eval-submitted-confirmation > span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #157347; color: #fff; font-weight: 900; }
.eval-submitted-confirmation div { display: grid; gap: .22rem; }.eval-submitted-confirmation strong { color: #146c36; }.eval-submitted-confirmation p, .eval-submitted-confirmation small { margin: 0; color: var(--color-text-soft); line-height: 1.45; }
.admin-eval__load-error { margin: 0; padding: 0.85rem 1rem; border: 1px solid rgba(201, 54, 54, 0.32); border-radius: 14px; background: #fff4f4; color: #8f2525; }
.routine-balance { display: grid; gap: 0.8rem; margin: 0 0 1rem; padding: 1rem; border: 1px solid rgba(87, 41, 255, 0.24); border-radius: 18px; background: linear-gradient(135deg, rgba(243, 237, 255, 0.9), rgba(255,255,255,0.95)); }
.routine-balance h2 { margin: 0.15rem 0 0.4rem; color: var(--color-primary); font-size: 1.15rem; }
.routine-balance p { margin: 0; color: var(--color-text-soft); line-height: 1.5; }
.routine-balance ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.routine-balance li { display: grid; gap: 0.15rem; min-height: 4.25rem; padding: 0.65rem; border: 1px solid rgba(87, 41, 255, 0.15); border-radius: 12px; background: rgba(255,255,255,0.72); }
.routine-balance li strong { color: var(--color-primary); font-size: 0.82rem; }
.routine-balance li span, .routine-balance small { color: var(--color-text-soft); font-size: 0.78rem; line-height: 1.35; }
.routine-balance__warm { border-left: 4px solid #e2a02e !important; }
.routine-balance__repertoire { border-left: 4px solid var(--color-secondary) !important; }
@media (max-width: 600px) { .routine-balance ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note3-mic-note { margin: 0; color: var(--color-text-soft); font-size: 0.82rem; line-height: 1.45; }
.consent-adult { margin: 0; padding: 0.8rem 0.9rem; border-radius: 14px; background: var(--surface-tint, #f3edff); color: var(--color-text); }
.pending-video-reminder { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem; border: 1px solid rgba(87, 41, 255, 0.32); background: linear-gradient(135deg, rgba(243, 237, 255, 0.9), rgba(255,255,255,0.9)); }
.pending-video-reminder__icon { display: grid; place-items: center; flex: 0 0 2.7rem; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--color-primary); font-size: 1.3rem; }
.pending-video-reminder h2 { margin: 0.15rem 0 0.35rem; color: var(--color-primary); font-size: 1.1rem; }
.pending-video-reminder p:not(.eyebrow) { margin: 0 0 0.75rem; color: var(--color-text-soft); }

/* Mapa visible del teclado antes de la primera gimnasia dactilar. */
.keyboard-map-explainer { display: grid; gap: 0.65rem; padding: 1rem; border: 1px solid rgba(87, 41, 255, 0.2); border-radius: 18px; background: linear-gradient(135deg, var(--surface-tint, #fbfaff), var(--surface-tint, #f3eeff)); }
.keyboard-map-explainer .eyebrow, .keyboard-map-explainer h4, .keyboard-map-explainer p { margin: 0; }
.keyboard-map-explainer h4 { color: var(--color-primary); font-size: 1.05rem; }
.keyboard-map-explainer p { color: var(--color-text); line-height: 1.55; }
.keyboard-map-explainer__keys { display: flex; align-items: start; justify-content: center; gap: 1.25rem; padding: 0.9rem; border-radius: 14px; background: var(--color-surface); }
.keyboard-map-explainer__group { display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: 0.22rem; min-width: 0; }
.keyboard-map-explainer__group span { display: block; width: 22px; height: 52px; border-radius: 0 0 7px 7px; background: linear-gradient(135deg, #282047, #09051a); box-shadow: 0 3px 0 #c9c2dc; }
.keyboard-map-explainer__group small { flex-basis: 100%; margin-top: 0.45rem; color: var(--color-primary); font-size: 0.7rem; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; }
.keyboard-map-explainer__tip { padding: 0.7rem 0.8rem; border-left: 4px solid var(--color-violet); border-radius: 5px 12px 12px 5px; background: rgba(87, 41, 255, 0.08); }
@media (max-width: 420px) { .keyboard-map-explainer__keys { gap: 0.8rem; padding-inline: 0.45rem; } .keyboard-map-explainer__group span { width: 18px; height: 46px; } .keyboard-map-explainer__group small { font-size: 0.62rem; } }

.keyboard-lesson { display: grid; gap: 0.8rem; padding: 1rem; border: 2px solid rgba(87, 41, 255, 0.3); border-radius: 20px; background: linear-gradient(145deg, var(--surface-tint, #fff), var(--surface-tint, #f5f0ff)); }
.keyboard-lesson__head { display: grid; gap: 0.3rem; }
.keyboard-lesson__head .eyebrow, .keyboard-lesson__head h4, .keyboard-lesson__head p { margin: 0; }
.keyboard-lesson__head h4 { color: var(--color-primary); font-size: 1.12rem; }
.keyboard-lesson__head p { color: var(--color-text-soft); line-height: 1.5; }
.keyboard-lesson__steps { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.keyboard-lesson__steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.65rem; padding: 0.8rem; border-radius: 15px; background: var(--color-surface); }
.keyboard-lesson__steps > li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fill-violet, var(--color-violet)); color: #fff; font-size: 0.8rem; font-weight: 800; }
.keyboard-lesson__steps div { display: grid; gap: 0.25rem; }
.keyboard-lesson__steps strong { color: var(--color-primary); }
.keyboard-lesson__steps p { margin: 0; color: var(--color-text); line-height: 1.52; }
.keyboard-lesson__pattern { display: flex !important; align-items: start; justify-content: center; gap: 0.24rem; margin-top: 0.35rem; padding: 0.8rem 0.5rem 1.3rem; border-radius: 12px; background: var(--color-surface-soft); position: relative; }
.keyboard-lesson__pattern i { width: 20px; height: 44px; border-radius: 0 0 6px 6px; background: linear-gradient(135deg, #282047, #09051a); box-shadow: 0 2px 0 #beb5d7; }
.keyboard-lesson__pattern b { width: 0.7rem; }
.keyboard-lesson__pattern small { position: absolute; bottom: 0.35rem; color: var(--color-primary); font-size: 0.68rem; font-weight: 800; }
.keyboard-lesson__pattern small:nth-of-type(1) { left: calc(50% - 5.65rem); }
.keyboard-lesson__pattern small:nth-of-type(2) { right: calc(50% - 6rem); }
@media (max-width: 420px) { .keyboard-lesson { padding: 0.8rem; } .keyboard-lesson__steps li { padding: 0.7rem; } .keyboard-lesson__pattern i { width: 17px; } }

/* Primer acercamiento al ritmo: sentir antes de leer. */
.rhythm-lesson { display: grid; gap: 0.9rem; margin: 1rem 0; padding: 1rem; border: 2px solid rgba(206, 0, 113, 0.22); border-radius: 22px; background: radial-gradient(circle at 100% 0%, var(--surface-glow, rgba(255, 196, 226, 0.72)), transparent 31%), linear-gradient(145deg, var(--surface-tint, #fff), var(--surface-tint, #f7f1ff)); }
.rhythm-lesson__head { display: grid; gap: 0.35rem; }
.rhythm-lesson__head .eyebrow, .rhythm-lesson__head h4, .rhythm-lesson__head p, .rhythm-lesson__head div { margin: 0; }
.rhythm-lesson__head > div { display: flex; align-items: center; gap: 0.65rem; }
.rhythm-lesson__head h4 { color: var(--color-primary); font-size: 1.2rem; }
.rhythm-lesson__head p { color: var(--color-text-soft); line-height: 1.5; }
.rhythm-lesson__round { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), #df157d); font-size: 2.2rem; line-height: 1; box-shadow: 0 5px 13px rgba(104, 13, 191, 0.25); }
.rhythm-song-demo { display: grid; gap: 0.7rem; padding: 0.9rem; border: 1px solid rgba(87, 41, 255, 0.2); border-radius: 18px; background: var(--color-surface); }
.rhythm-song-demo__head p, .rhythm-song-demo__head h5 { margin: 0; }
.rhythm-song-demo__head h5 { margin-top: 0.2rem; color: var(--color-primary); font-size: 1.03rem; }
.rhythm-song-demo__head p:last-child { margin-top: 0.35rem; color: var(--color-text-soft); line-height: 1.48; }
.rhythm-song-demo__mix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.rhythm-song-demo__mix > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.45rem; align-items: center; padding: 0.55rem; border: 1px solid rgba(34, 10, 99, 0.1); border-radius: 12px; background: var(--surface-tint, #f7f4ff); opacity: 0.42; transition: opacity .2s ease, transform .2s ease, background .2s ease; }
.rhythm-song-demo__mix > div.is-playing { opacity: 1; background: rgba(104, 13, 191, 0.1); transform: translateY(-1px); }
.rhythm-song-demo__mix > div span { grid-row: span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); font-weight: 900; }
.rhythm-song-demo__mix strong { color: var(--color-primary); font-size: 0.8rem; }
.rhythm-song-demo__mix small { color: var(--color-text-soft); font-size: 0.68rem; }
.rhythm-song-demo__count { display: flex; justify-content: center; gap: 0.4rem; }
.rhythm-song-demo__count span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--surface-tint, #efe9ff); color: var(--color-primary); font-size: 0.8rem; font-weight: 900; transition: transform .12s ease, background .12s ease, color .12s ease; }
.rhythm-song-demo__count span.is-active { background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), #df157d); color: #fff; transform: scale(1.16); }
.rhythm-song-demo__message { min-height: 2.8rem; margin: 0; color: var(--color-text-soft); font-size: 0.82rem; line-height: 1.42; }
.rhythm-song-demo__button { justify-self: stretch; }
.rhythm-metronome { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.85rem; border-radius: 17px; background: var(--color-surface); box-shadow: 0 6px 18px rgba(61, 30, 126, 0.08); }
.rhythm-metronome__beats { display: flex; gap: 0.3rem; }
.rhythm-metronome__beats span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--color-primary); background: var(--surface-tint, #f0eaff); font-size: 0.86rem; font-weight: 900; transition: transform .16s ease, background .16s ease, color .16s ease; }
.rhythm-metronome__beats span:first-child { border: 2px solid rgba(206, 0, 113, 0.36); }
.rhythm-metronome__beats span.is-active { color: #fff; background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), #df157d); transform: scale(1.13); box-shadow: 0 4px 12px rgba(104, 13, 191, .28); }
.rhythm-metronome__copy { display: grid; gap: 0.1rem; min-width: 0; }
.rhythm-metronome__copy strong { color: var(--color-primary); font-size: 0.93rem; }
.rhythm-metronome__copy small { color: var(--color-text-soft); font-size: 0.77rem; }
.rhythm-metronome__button { min-height: 2.7rem; padding-inline: 0.8rem; white-space: nowrap; font-size: 0.84rem; }
.rhythm-lesson__practice { display: grid; grid-template-columns: minmax(120px, .62fr) minmax(0, 1fr); gap: 0.85rem; align-items: center; overflow: hidden; border: 1px solid rgba(104, 13, 191, .14); border-radius: 17px; background: var(--color-surface); }
.rhythm-lesson__practice figure { align-self: stretch; min-height: 176px; margin: 0; background: linear-gradient(145deg, var(--surface-tint, #ecf6ff), var(--surface-tint, #eadfff)); }
.rhythm-lesson__practice img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.rhythm-lesson__practice > div { padding: 0.85rem 0.95rem 0.85rem 0; }
.rhythm-lesson__practice .eyebrow, .rhythm-lesson__practice h5, .rhythm-lesson__practice p { margin: 0; }
.rhythm-lesson__practice h5 { margin-top: 0.2rem; color: var(--color-primary); font-size: 1.02rem; }
.rhythm-lesson__practice .rhythm-lesson__why { margin-top: 0.45rem; color: var(--color-text-soft); font-size: 0.9rem; line-height: 1.48; }
.rhythm-lesson__practice p:last-child { margin-top: 0.35rem; line-height: 1.52; }
.rhythm-lesson__piano { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; padding: 0.85rem; border-radius: 17px; background: var(--surface-tint, #eee8ff); }
.rhythm-lesson__piano > span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--color-surface); font-size: 1.15rem; }
.rhythm-lesson__piano > div { display: grid; gap: 0.4rem; min-width: 0; }
.rhythm-lesson__piano p { margin: 0; line-height: 1.52; }
.rhythm-lesson__piano .eyebrow { margin-bottom: 0.2rem; }
.rhythm-piano-practice { display: grid; gap: 0.45rem; margin-top: 0.25rem; padding: 0.7rem; border: 1px solid rgba(104, 13, 191, 0.16); border-radius: 14px; background: var(--color-surface); }
.rhythm-piano-practice > strong { color: var(--color-primary); font-size: 0.9rem; }
.rhythm-piano-practice > small { color: var(--color-text-soft); font-size: 0.78rem; }
.rhythm-piano-practice__keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; align-items: stretch; padding-top: 0.05rem; }
.rhythm-piano-practice__keys button { position: relative; display: flex; align-items: end; justify-content: center; min-height: 4.5rem; padding: 0.45rem 0.15rem; border: 1px solid rgba(34, 10, 99, 0.28); border-radius: 0 0 8px 8px; background: linear-gradient(90deg, #fff, #f2eff8); color: var(--color-primary); font-size: 0.76rem; font-weight: 900; box-shadow: 0 3px 0 rgba(34, 10, 99, 0.16); cursor: pointer; transition: background .14s ease, color .14s ease, transform .14s ease; }
.rhythm-piano-practice__keys button::after { position: absolute; top: 0; right: -0.28rem; z-index: 1; width: 0.58rem; height: 2.45rem; border-radius: 0 0 5px 5px; background: #1b1239; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.22); content: ""; }
.rhythm-piano-practice__keys button:nth-child(3)::after, .rhythm-piano-practice__keys button:nth-child(5)::after { display: none; }
.rhythm-piano-practice__keys button.is-active { background: linear-gradient(160deg, var(--fill-primary, var(--color-primary)), #df157d); color: #fff; transform: translateY(2px); box-shadow: 0 1px 0 rgba(34, 10, 99, 0.18); }
.rhythm-piano-practice__beats { display: flex; justify-content: center; gap: 0.35rem; }
.rhythm-piano-practice__beats span { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; color: var(--color-primary); background: var(--surface-tint, #efe9ff); font-size: 0.76rem; font-weight: 900; transition: transform .12s ease, background .12s ease, color .12s ease; }
.rhythm-piano-practice__beats span.is-active { color: #fff; background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), #df157d); transform: scale(1.12); }
.rhythm-piano-practice [data-rhythm-piano-feedback] { min-height: 2.4rem; color: var(--color-text-soft); font-size: 0.79rem; line-height: 1.42; }
.rhythm-lesson__next { display: grid; gap: 0.45rem; padding: 0.1rem 0.15rem 0; }
.rhythm-lesson__next > p { margin: 0; color: var(--color-text-soft); font-size: 0.88rem; }
.rhythm-lesson__next ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.rhythm-lesson__next li { display: flex; align-items: center; gap: 0.55rem; padding: 0.65rem; border-radius: 13px; background: var(--color-surface); }
.rhythm-lesson__next li > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: var(--fill-violet, var(--color-violet)); font-size: 1.15rem; }
.rhythm-lesson__next li div { display: grid; gap: 0.08rem; }
.rhythm-lesson__next li strong { color: var(--color-primary); font-size: 0.9rem; }
.rhythm-lesson__next li small { color: var(--color-text-soft); font-size: 0.72rem; }
.rhythm-subdivision { display: grid; gap: .85rem; margin: 1rem 0; padding: 1rem; border: 2px solid rgba(206, 0, 113, .2); border-radius: 22px; background: radial-gradient(circle at 100% 0%, rgba(255, 196, 226, .48), transparent 32%), linear-gradient(145deg, var(--color-surface, #fff), #f7f1ff); }
.rhythm-subdivision__head .eyebrow,
.rhythm-subdivision__head h4,
.rhythm-subdivision__head > p:last-child { margin: 0; }
.rhythm-subdivision__head h4 { margin-top: .2rem; color: var(--color-primary); font-size: 1.2rem; }
.rhythm-subdivision__head > p:last-child { margin-top: .35rem; color: var(--color-text-soft); line-height: 1.52; }
.rhythm-subdivision__values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.rhythm-subdivision__values > div { display: grid; justify-items: center; gap: .08rem; padding: .6rem .35rem; border: 1px solid rgba(34, 10, 99, .1); border-radius: 14px; background: var(--color-surface, #fff); text-align: center; }
.rhythm-subdivision__values > div.is-new { border-color: rgba(206, 0, 113, .42); background: linear-gradient(145deg, #fff, #fff0f8); }
.rhythm-subdivision__values span { color: var(--color-primary); font-size: 1.65rem; font-weight: 900; line-height: 1.2; }
.rhythm-subdivision__values strong { color: var(--color-primary); font-size: .8rem; }
.rhythm-subdivision__values small { color: var(--color-text-soft); font-size: .7rem; }
.rhythm-subdivision__body,
.rhythm-subdivision__piano { display: grid; gap: .35rem; padding: .8rem .9rem; border-radius: 16px; background: var(--color-surface, #fff); }
.rhythm-subdivision__step { color: var(--color-accent, #ce0071); font-size: .75rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.rhythm-subdivision__body p,
.rhythm-subdivision__piano p { margin: 0; color: var(--color-text); line-height: 1.5; }
.rhythm-subdivision__body-map { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .15rem; }
.rhythm-subdivision__body-map span { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .65rem; border-radius: 999px; background: var(--surface-tint, #f3eeff); color: var(--color-primary); font-size: .85rem; }
.rhythm-subdivision__body-map i { color: var(--color-accent, #ce0071); font-style: normal; font-weight: 900; }
.rhythm-subdivision__movement-cue { padding: .7rem .8rem; border-left: 3px solid var(--color-accent, #ce0071); border-radius: 0 12px 12px 0; background: #fff4fa; line-height: 1.5; }
.rhythm-subdivision__keys { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); min-height: 86px; max-width: 500px; padding: 0 .5rem; border: 1px solid #ddd5eb; border-radius: 0 0 12px 12px; background: linear-gradient(#fff 0 76%, #eeeaf5 76%); }
.rhythm-subdivision__keys button { align-self: stretch; margin: 0 .12rem; border: 1px solid #c9c1d8; border-top: 0; border-radius: 0 0 8px 8px; background: linear-gradient(#fff 0 85%, #f2eff7); color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.rhythm-subdivision__keys button[aria-pressed="true"] { box-shadow: inset 0 -6px 0 rgba(87, 41, 255, .16); }
.rhythm-subdivision__keys button.is-active { background: linear-gradient(#e3d9ff, #c9b4ff); transform: translateY(2px); }
.rhythm-subdivision__keys button:focus-visible { outline: 3px solid var(--color-accent, #ce0071); outline-offset: 2px; }
.rhythm-subdivision__practice { display: grid; gap: .55rem; padding: .85rem; border: 1px solid rgba(87, 41, 255, .2); border-radius: 17px; background: var(--color-surface, #fff); }
.rhythm-subdivision__practice-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.rhythm-subdivision__practice-head h5 { margin: .15rem 0 0; color: var(--color-primary); font-size: 1rem; }
.rhythm-subdivision__practice-head label { display: grid; gap: .2rem; color: var(--color-text-soft); font-size: .72rem; font-weight: 800; }
.rhythm-subdivision__practice-head select { min-height: 38px; padding: .35rem .55rem; border: 1px solid rgba(87, 41, 255, .22); border-radius: 10px; background: var(--color-surface, #fff); color: var(--color-primary); font: inherit; font-size: .75rem; }
.rhythm-subdivision__choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.rhythm-subdivision__choices button { min-height: 38px; padding: .45rem .8rem; border: 1px solid rgba(87, 41, 255, .22); border-radius: 999px; background: var(--color-surface, #fff); color: var(--color-primary); font: inherit; font-size: .8rem; font-weight: 850; cursor: pointer; }
.rhythm-subdivision__choices button[aria-pressed="true"] { border-color: var(--color-primary); background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), #b526a3); color: #fff; }
.rhythm-subdivision__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.rhythm-subdivision__beat { display: grid; gap: .3rem; justify-items: center; padding: .45rem .25rem; border: 1px solid rgba(34, 10, 99, .09); border-radius: 12px; background: var(--surface-tint, #f8f5ff); }
.rhythm-subdivision__beat-number { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--color-primary); background: var(--color-surface, #fff); font-size: .85rem; font-weight: 900; }
.rhythm-subdivision__pair { display: flex; align-items: center; justify-content: center; gap: .2rem; width: 100%; }
.rhythm-subdivision__pair > span { display: grid; place-items: center; width: min(2rem, 45%); height: 1.75rem; border: 1px solid rgba(87, 41, 255, .18); border-radius: 8px; color: var(--color-primary); background: var(--color-surface, #fff); font-size: .8rem; font-weight: 900; transition: transform .12s ease, background .12s ease, color .12s ease; }
.rhythm-subdivision__pair > .rhythm-subdivision__and { color: var(--color-text-soft); }
.rhythm-subdivision__pair > .is-note { border-color: rgba(206, 0, 113, .38); }
.rhythm-subdivision__pair > .is-current { transform: scale(1.08); color: #fff; background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), #df157d); box-shadow: 0 3px 9px rgba(104, 13, 191, .2); }
.rhythm-subdivision__count { display: grid; grid-template-columns: repeat(8, 1fr); color: var(--color-text-soft); font-size: .68rem; font-weight: 800; text-align: center; }
.rhythm-subdivision__pattern-copy,
.rhythm-subdivision__feedback { margin: 0; color: var(--color-text-soft); font-size: .82rem; line-height: 1.45; }
.rhythm-subdivision__pattern-copy { color: var(--color-primary); font-weight: 800; }
.rhythm-subdivision__play { justify-self: start; }
.rhythm-subdivision__piano small { color: var(--color-text-soft); line-height: 1.45; }
.rhythm-subdivision--compact { margin: 1rem 0 1.25rem; }
@media (max-width: 520px) {
  .rhythm-subdivision { padding: .8rem; border-radius: 18px; }
  .rhythm-subdivision__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhythm-subdivision__practice-head { align-items: stretch; }
  .rhythm-subdivision__practice-head label { width: 100%; }
  .rhythm-subdivision__practice-head select { width: 100%; }
  .rhythm-subdivision__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rhythm-subdivision__choices button { padding-inline: .35rem; }
}
@media (max-width: 640px) { .rhythm-metronome { grid-template-columns: 1fr; } .rhythm-metronome__beats { justify-content: center; } .rhythm-metronome__copy { text-align: center; } .rhythm-metronome__button { width: 100%; } }
@media (max-width: 420px) { .rhythm-lesson { padding: 0.8rem; border-radius: 18px; } .rhythm-lesson__practice { grid-template-columns: 1fr; } .rhythm-lesson__practice figure { min-height: 155px; max-height: 190px; } .rhythm-lesson__practice > div { padding: 0 0.85rem 0.85rem; } }
@media (max-width: 360px) { .rhythm-song-demo__mix { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rhythm-metronome__beats span { transition: none; } }

/* Repertorio inicial: el orden de las notas se descubre como un camino. */
.note-order-lesson { display: grid; gap: 0.8rem; margin: 1rem 0; padding: 1rem; border: 2px solid rgba(87, 41, 255, .22); border-radius: 22px; background: radial-gradient(circle at 95% 3%, var(--surface-glow, rgba(255, 207, 238, .7)), transparent 28%), linear-gradient(145deg, var(--surface-tint, #fff), var(--surface-tint, #f5efff)); }
.note-order-lesson__head { display: grid; gap: 0.3rem; }
.note-order-lesson__head .eyebrow, .note-order-lesson__head h4, .note-order-lesson__head p { margin: 0; }
.note-order-lesson__head h4 { color: var(--color-primary); font-size: 1.12rem; word-spacing: .1rem; }
.note-order-lesson__head p { color: var(--color-text-soft); line-height: 1.5; }
.note-order-lesson__stairs { display: flex; align-items: end; gap: 0.28rem; min-height: 5.4rem; padding: 0.6rem; overflow-x: auto; border-radius: 15px; background: linear-gradient(180deg, var(--surface-tint, #f2edff), var(--surface-tint, #fff)); }
.note-order-lesson__stairs span { display: grid; flex: 0 0 2.45rem; place-items: center; min-height: calc(2.1rem + var(--note-step) * .28rem); border-radius: 11px 11px 7px 7px; color: #fff; background: linear-gradient(145deg, var(--fill-primary, var(--color-primary)), #bc2aa9); font-size: .78rem; font-weight: 900; box-shadow: 0 3px 0 rgba(61, 27, 131, .22); }
.note-order-lesson__challenge { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.note-order-lesson__challenge strong, .note-order-lesson__challenge p { margin: 0; }
.note-order-lesson__challenge strong { color: var(--color-primary); }
.note-order-lesson__challenge p { margin-top: .15rem; color: var(--color-text-soft); font-size: .86rem; line-height: 1.42; }
.note-order-lesson__challenge .button-ghost { flex: 0 0 auto; padding: .5rem .72rem; font-size: .82rem; }
.note-order-lesson__cards { display: flex; flex-wrap: wrap; gap: .45rem; }
.note-order-lesson__cards button { min-width: 3.3rem; min-height: 2.45rem; border: 1px solid rgba(87, 41, 255, .22); border-radius: 999px; color: var(--color-primary); background: var(--color-surface); font: inherit; font-weight: 800; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.note-order-lesson__cards button:hover:not(:disabled), .note-order-lesson__cards button:focus-visible { border-color: var(--color-violet); background: var(--surface-tint, #f0eaff); transform: translateY(-2px); }
.note-order-lesson__cards button:disabled, .note-order-lesson__cards button.is-correct { color: #fff; border-color: #239667; background: #239667; cursor: default; }
.note-order-lesson__cards button.is-wrong { border-color: #d34c66; background: var(--surface-tint, #fff0f3); color: #b32a45; animation: note-order-shake .25s linear; }
.note-order-lesson__feedback { min-height: 1.5em; margin: 0; padding: .65rem .78rem; border-radius: 12px; color: var(--color-primary); background: rgba(87, 41, 255, .08); font-size: .9rem; }
.note-order-lesson__piano { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: start; padding: .75rem; border-radius: 14px; background: var(--color-surface); }
.note-order-lesson__piano > span { font-size: 1.3rem; }
.note-order-lesson__piano p { margin: 0; line-height: 1.52; }
@keyframes note-order-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (max-width: 420px) { .note-order-lesson { padding: .8rem; border-radius: 18px; } .note-order-lesson__challenge { align-items: start; } .note-order-lesson__stairs span { flex-basis: 2.2rem; font-size: .71rem; } }
@media (prefers-reduced-motion: reduce) { .note-order-lesson__cards button { transition: none; } .note-order-lesson__cards button.is-wrong { animation: none; } }

.do-finder-lesson { display: grid; gap: .85rem; margin: 1rem 0; padding: 1rem; border: 2px solid rgba(87, 41, 255, .2); border-radius: 22px; background: linear-gradient(145deg, var(--surface-tint, #fff), var(--surface-tint, #f3efff)); }
.do-finder-lesson__head { display: grid; gap: .28rem; }
.do-finder-lesson__head .eyebrow, .do-finder-lesson__head h4, .do-finder-lesson__head p { margin: 0; }
.do-finder-lesson__head h4 { color: var(--color-primary); font-size: 1.1rem; }
.do-finder-lesson__head p { color: var(--color-text-soft); line-height: 1.5; }
.do-finder-lesson__checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.do-finder-lesson__checks label { position: relative; min-width: 0; cursor: pointer; }
.do-finder-lesson__checks input { position: absolute; opacity: 0; }
.do-finder-lesson__checks span { display: grid; gap: .12rem; min-height: 5.2rem; padding: .75rem .6rem .6rem; border: 1px solid rgba(87, 41, 255, .2); border-radius: 15px; background: var(--color-surface); transition: background .15s ease, border .15s ease, transform .15s ease; }
.do-finder-lesson__checks b { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--color-violet); border-radius: 50%; color: transparent; font-size: .76rem; }
.do-finder-lesson__checks strong { overflow-wrap: anywhere; color: var(--color-primary); font-size: .84rem; }
.do-finder-lesson__checks small { color: var(--color-text-soft); font-size: .72rem; }
.do-finder-lesson__checks input:checked + span { border-color: #239667; background: var(--surface-tint, #effaf4); transform: translateY(-2px); }
.do-finder-lesson__checks input:checked + span b { border-color: #239667; color: #fff; background: #239667; }
.do-finder-lesson__checks input:focus-visible + span { outline: 3px solid rgba(87, 41, 255, .28); outline-offset: 2px; }
.do-finder-lesson__piano { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: start; padding: .75rem; border-radius: 14px; background: var(--color-surface); }
.do-finder-lesson__piano > span { font-size: 1.3rem; }.do-finder-lesson__piano p { margin: 0; line-height: 1.52; }
.do-finder-keyboard-wrap { display: grid; gap: .55rem; padding: .8rem; border-radius: 16px; background: rgba(255,255,255,.62); border: 1px solid rgba(87,41,255,.14); }
.do-finder-keyboard-wrap > p { margin: 0; line-height: 1.45; }
.do-finder-keyboard { position: relative; min-width: 720px; height: 154px; overflow: hidden; border: 5px solid #261650; border-radius: 10px; background: #261650; box-shadow: 0 8px 18px rgba(27,10,70,.18); }
.do-finder-keyboard-wrap { overflow-x: auto; }
.do-finder-keyboard__whites { display: grid; grid-template-columns: repeat(21, 1fr); height: 100%; }
.do-finder-keyboard__whites button { position: relative; min-width: 0; border: 0; border-right: 1px solid #bfc2c9; border-radius: 0 0 5px 5px; background: linear-gradient(90deg,#fff,#f6f5f7); color: var(--color-primary); cursor: pointer; padding: 0 0 .55rem; font: 800 .72rem/1 var(--font-body); }
.do-finder-keyboard__whites button:focus-visible, .do-finder-keyboard__blacks button:focus-visible { z-index: 4; outline: 3px solid #ffbe34; outline-offset: -3px; }
.do-finder-keyboard__whites button.is-found { background: linear-gradient(180deg,#fff7c9,#ffd65c); box-shadow: inset 0 -7px 0 #ef9f00; }
.do-finder-keyboard__whites button.is-playing { transform: translateY(3px); background: #e9e4ff; }
.do-finder-keyboard__blacks button { position: absolute; z-index: 2; top: 0; left: calc((100% / 21) * (var(--black-position) + .64)); width: calc((100% / 21) * .72); height: 59%; border: 0; border-radius: 0 0 5px 5px; background: linear-gradient(90deg,#100b24,#39265d); box-shadow: 1px 3px 4px rgba(0,0,0,.38); cursor: pointer; }
.do-finder-keyboard__blacks button.is-playing { transform: translateY(3px); background: #7b52dd; }
.do-finder-keyboard__feedback { color: var(--color-text-soft); font-size: .86rem; min-height: 1.3rem; }
@media (max-width: 420px) { .do-finder-lesson { padding: .8rem; border-radius: 18px; } .do-finder-lesson__checks { gap: .38rem; } .do-finder-lesson__checks span { min-height: 4.75rem; padding: .55rem .45rem; } .do-finder-lesson__checks strong { font-size: .76rem; } }

/* Repertorio inicial para adultos: legible, sin claves por color. */
.three-note-repertoire { display: grid; gap: .85rem; margin: 1rem 0; padding: 1rem; border: 2px solid rgba(104, 13, 191, .26); border-radius: 22px; background: radial-gradient(circle at 100% 0%, var(--surface-glow, rgba(255, 203, 232, .65)), transparent 29%), linear-gradient(145deg, var(--surface-tint, #fff), var(--surface-tint, #f6f2ff)); }
.three-note-repertoire__head { display: grid; gap: .28rem; }.three-note-repertoire__head .eyebrow, .three-note-repertoire__head h4, .three-note-repertoire__head p { margin: 0; }.three-note-repertoire__head h4 { color: var(--color-primary); font-size: 1.14rem; }.three-note-repertoire__head p { color: var(--color-text-soft); line-height: 1.5; }
.three-note-repertoire__choices { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .15rem; }.three-note-repertoire__choices button { display: grid; flex: 0 0 auto; gap: .08rem; padding: .55rem .7rem; border: 1px solid rgba(87, 41, 255, .2); border-radius: 12px; color: var(--color-primary); background: var(--color-surface); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; white-space: nowrap; }.three-note-repertoire__choices button small { color: var(--color-text-soft); font-size: .64rem; text-align: left; }.three-note-repertoire__choices button.is-active { color: #fff; border-color: var(--color-primary); background: linear-gradient(135deg, var(--fill-primary, var(--color-primary)), #b526a3); }.three-note-repertoire__choices button.is-active small { color: rgba(255,255,255,.72); }
.three-note-score { display: grid; gap: .7rem; padding: .9rem; border: 1px solid rgba(87, 41, 255, .17); border-radius: 18px; background: var(--color-surface); }.three-note-score[hidden] { display: none; }.three-note-score header { display: flex; align-items: start; justify-content: space-between; gap: .65rem; }.three-note-score header .eyebrow, .three-note-score header h5 { margin: 0; }.three-note-score header h5 { margin-top: .16rem; color: var(--color-primary); font-size: 1rem; }.three-note-score header > small { padding: .3rem .48rem; border-radius: 999px; color: var(--color-text-soft); background: var(--surface-tint, #f3effb); font-size: .7rem; text-align: right; }
.three-note-score__lines { display: grid; gap: .38rem; }.three-note-score__lines > div { display: grid; grid-template-columns: 1.55rem minmax(0, 1fr); gap: .45rem; align-items: center; }.three-note-score__lines > div > small { color: var(--color-text-soft); font-size: .7rem; font-weight: 800; text-align: center; }.three-note-score__lines p { display: flex; flex-wrap: wrap; gap: .32rem; margin: 0; }.note-chip { display: inline-grid; place-items: center; min-width: 2.3rem; min-height: 2rem; padding: .22rem .4rem; border: 1px solid rgba(87, 41, 255, .18); border-radius: 9px; color: var(--color-primary); background: var(--surface-tint, #faf8ff); font-size: .8rem; font-weight: 850; }.note-chip--mi { color: #9c185e; border-color: rgba(206, 0, 113, .3); background: var(--surface-tint, #fff4fa); }.note-chip--re { color: #674600; border-color: rgba(192, 129, 0, .3); background: var(--surface-tint, #fffaec); }
.three-note-repertoire__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }.three-note-repertoire__modes button { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .65rem; border: 1px solid rgba(87, 41, 255, .2); border-radius: 14px; color: var(--color-text); background: var(--color-surface); font: inherit; text-align: left; cursor: pointer; }.three-note-repertoire__modes button > b { display: grid; flex: 0 0 auto; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--color-primary); background: var(--surface-tint, #eee7ff); font-size: .72rem; }.three-note-repertoire__modes button span { display: grid; min-width: 0; gap: .04rem; }.three-note-repertoire__modes button strong { color: var(--color-primary); font-size: .78rem; overflow-wrap: anywhere; }.three-note-repertoire__modes button small { color: var(--color-text-soft); font-size: .66rem; line-height: 1.2; }.three-note-repertoire__modes button.is-active { border-color: var(--color-primary); background: var(--surface-tint, #f3eeff); box-shadow: inset 0 0 0 1px rgba(87, 41, 255, .14); }.three-note-repertoire__modes button.is-active > b { color: #fff; background: var(--fill-primary, var(--color-primary)); }
.three-note-repertoire__coach { margin: 0; padding: .72rem .8rem; border-left: 4px solid var(--color-violet); border-radius: 6px 13px 13px 6px; background: var(--surface-tint, #f0ebff); line-height: 1.52; }
@media (max-width: 520px) { .three-note-repertoire { padding: .8rem; border-radius: 18px; }.three-note-repertoire__modes { grid-template-columns: 1fr; }.three-note-repertoire__modes button { min-height: 3.4rem; }.three-note-score { padding: .75rem; }.three-note-score header { display: grid; }.three-note-score header > small { justify-self: start; text-align: left; } }

.admin-eval { display: grid; gap: 0.55rem; padding: 0.85rem 0.95rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.admin-eval--submitted { border-color: rgba(206, 0, 113, 0.35); background: var(--surface-tint, #fff8fc); }
.admin-eval__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; }
.admin-eval__head strong { color: var(--color-primary); }
.admin-eval__goals { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.admin-eval__goals li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 10px; background: var(--color-surface-soft); font-size: 0.86rem; }
.admin-eval__goals em { flex: 0 0 auto; color: var(--color-violet); font-style: normal; font-weight: 700; }
.admin-eval__note { margin: 0; color: var(--color-text); font-size: 0.9rem; }
.admin-eval__videos { display: grid; gap: 0.5rem; }
.admin-eval__note span { color: var(--color-text-soft); font-weight: 700; }
.admin-eval__form { display: grid; gap: 0.5rem; }
.admin-eval__form label { display: grid; gap: 0.35rem; color: var(--color-text-soft); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-eval__form textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 14px; padding: 0.7rem 0.9rem; font: inherit; font-size: 0.95rem; text-transform: none; letter-spacing: 0; resize: vertical; }

/* Sesiones guiadas en Mi rutina: abrir y tocar, sin pensar */
.guided-session { display: grid; gap: var(--space-3); }
.guided-session .eyebrow { margin: 0; }
.guided-session h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.1rem); }
.guided-session h1 small { font-size: 0.55em; font-weight: 600; color: var(--color-primary); margin-left: 0.3rem; }
.session-tasks { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.session-task { display: grid; gap: 0.4rem; padding: 0.75rem 0.85rem; border: 1px solid var(--color-border, rgba(0,0,0,0.1)); border-radius: 16px; background: var(--color-surface, #fff); }
.session-task__main { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 0.7rem; cursor: pointer; }
.session-task input { width: 1.5rem; height: 1.5rem; accent-color: var(--color-primary); }
.session-task__icon { font-size: 1.4rem; }
.session-task__text { display: grid; gap: 0.1rem; min-width: 0; }
.session-task__text strong { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.session-task__text span { font-size: 0.9rem; color: var(--color-muted, #666); }
.session-task__min { font-weight: 700; color: var(--color-primary); }
.session-task__action { justify-self: start; margin-left: 2.2rem; padding: 0.3rem 0.8rem; font-size: 0.88rem; }
.session-task__more { margin-left: 2.2rem; font-size: 0.88rem; }
.session-task__more summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.session-task__more p { margin: 0.3rem 0 0; }
.session-task:has(input:checked) { opacity: 0.55; }
.session-task:has(input:checked) .session-task__text strong { text-decoration: line-through; }
.guided-session__done { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.guided-session__done .diary-moods { margin: 0; }
.guided-session__foot { margin: 0; font-size: 0.92rem; color: var(--color-muted, #666); }
.link-button { border: 0; padding: 0; background: none; color: var(--color-primary); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.session-checkpoint { display: flex; gap: var(--space-3); align-items: flex-start; border: 2px solid var(--color-primary); }
.session-checkpoint__icon { font-size: 2rem; }
.session-checkpoint h2 { margin: 0.2rem 0 0.4rem; }
.session-checkpoint .eyebrow { margin: 0; }
.session-checkpoint__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: var(--space-3); }
.routine-more > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
.routine-more > summary::-webkit-details-marker { display: none; }
.routine-more > summary > span:first-child { display: grid; gap: 0.15rem; }
.routine-more > summary small { color: var(--color-muted, #666); }
.routine-more[open] > summary { margin-bottom: var(--space-3); }
.routine-more .practice-diary { display: grid; gap: var(--space-4); }
@media (max-width: 640px) {
  .guided-session__done .button, .session-checkpoint__actions .button, .session-checkpoint__actions .button-ghost { width: 100%; }
  .session-checkpoint { flex-direction: column; }
}
.routine-page > .routine-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.assistant-message--assistant p { white-space: pre-line; }
.goal-team-picker, .goal-related { margin-top: var(--space-3); padding: 0.7rem 0.9rem; border: 1px dashed var(--color-border, rgba(0,0,0,0.2)); border-radius: 14px; }
.goal-team-picker summary, .goal-related summary { cursor: pointer; font-weight: 600; }
.goal-team-picker summary small, .goal-related summary small { display: block; font-weight: 400; color: var(--color-muted, #666); }
.goal-team-picker form { display: grid; gap: 0.6rem; margin-top: 0.6rem; }
.goal-team-picker__list { display: grid; gap: 0.5rem; max-height: 22rem; overflow: auto; margin: 0; padding: 0; list-style: none; }
.goal-team-picker__list li { display: grid; gap: 0.3rem; padding: 0.5rem; border-radius: 10px; background: var(--color-surface-muted, rgba(0,0,0,0.03)); }
.goal-team-picker__list label { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; overflow-wrap: anywhere; }
.goal-team-picker__list input[type="text"], .goal-team-picker input[type="search"] { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border, rgba(0,0,0,0.15)); border-radius: 8px; font: inherit; }
.goal-related { border-style: solid; opacity: 0.9; }
.goal-related .resource-links { margin-top: 0.5rem; }
.practice-resource--main { border: 2px solid var(--color-primary); }
.practice-resource--main .eyebrow { color: var(--color-primary); }
.practice-resource--main .button { width: 100%; justify-content: center; }
.required-video { position: relative; display: grid; grid-template-columns: minmax(100px, 172px) auto 1fr auto; align-items: center; gap: 0.8rem; margin: var(--space-3) 0; padding: 0.55rem 0.8rem 0.75rem 0.55rem; border: 2px solid var(--color-primary); border-radius: 16px; color: inherit; text-decoration: none; background: var(--color-surface, #fff); overflow: hidden; }
.required-video__thumbnail { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--color-surface-soft); }
.required-video span:nth-child(2) { display: grid; gap: 0.15rem; min-width: 0; }
.required-video small { color: var(--color-muted, #666); }
.required-video__play { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--fill-primary, var(--color-primary)); color: #fff; font-size: 1.1rem; }
.required-video__status { font-weight: 700; color: var(--color-primary); font-size: 0.88rem; white-space: nowrap; }
.required-video__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,0.06); }
.required-video__bar span { display: block; height: 100%; background: var(--fill-primary, var(--color-primary)); }
.required-video.is-done { border-color: #1f9d6a; }
.required-video.is-done .required-video__play { background: #1f9d6a; }
.required-video.is-done .required-video__status { color: var(--text-fixed, #1f9d6a); }
.required-video__hint { margin: var(--space-3) 0 0; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--color-surface-muted, rgba(92,44,196,0.08)); font-weight: 600; }
@media (max-width: 640px) { .required-video { grid-template-columns: minmax(88px, 34%) auto minmax(0, 1fr); gap: 0.55rem; padding-right: 0.6rem; } .required-video__status { grid-column: 2 / -1; justify-self: start; font-size: 0.78rem; } .guide-video--thumbnail { grid-template-columns: minmax(92px, 36%) minmax(0, 1fr); gap: 0.65rem; } .viewer__video-poster { width: 100%; border-radius: 0; } }
.admin-videos { display: grid; gap: 0.35rem; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.admin-videos small { color: var(--color-muted, #666); }
.eval-checklist { margin: 0 0 var(--space-3); padding: 0.8rem 1rem; border-radius: 14px; border: 2px solid var(--color-primary); background: var(--color-surface, #fff); }
.eval-checklist ol { margin: 0.5rem 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.eval-checklist p { margin: 0; font-size: 0.9rem; color: var(--color-muted, #666); }
.assistant-thread { max-height: min(52vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding-right: 0.2rem; }
.assistant-typing { display: inline-flex; gap: 0.3rem; align-items: center; min-height: 1.2rem; }
.assistant-typing span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; opacity: 0.35; animation: assistant-typing 1s infinite ease-in-out; }
.assistant-typing span:nth-child(2) { animation-delay: 0.15s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes assistant-typing { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 0.9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .assistant-typing span { animation: none; opacity: 0.6; } }

/* Semana de cumpleaños */
.birthday-banner { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: var(--space-4); padding: 1.1rem 1.2rem; border-radius: 22px; color: #fff; background: radial-gradient(circle at 90% 10%, rgba(255, 214, 102, 0.55), transparent 45%), linear-gradient(135deg, #ce0071, #5b2bd6); box-shadow: 0 12px 30px rgba(91, 43, 214, 0.25); }
.birthday-banner h2 { margin: 0 0 0.35rem; color: #fff; font-size: clamp(1.2rem, 4vw, 1.55rem); }
.birthday-banner p { margin: 0 0 0.4rem; color: rgba(255, 255, 255, 0.92); }
.birthday-banner small { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.birthday-banner__icon { font-size: 2.2rem; line-height: 1; animation: birthday-bob 2.4s ease-in-out infinite; }
.birthday-balloons { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.birthday-balloons span { position: absolute; bottom: -3rem; left: calc(6% + var(--i) * 14%); font-size: 1.8rem; opacity: 0.85; animation: birthday-rise 14s linear infinite; animation-delay: calc(var(--i) * -2s); }
@keyframes birthday-rise { 0% { transform: translateY(0) rotate(-6deg); } 50% { transform: translate(12px, -55vh) rotate(6deg); } 100% { transform: translateY(-115vh) rotate(-6deg); } }
@keyframes birthday-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .birthday-balloons { display: none; } .birthday-banner__icon { animation: none; } }

/* Inicio: la tarjeta de continuar es lo primero y lo más visible en el celular. */
.continue-card__cta { min-height: 3.4rem; font-size: 1.05rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
@media (max-width: 760px) {
  .route-hero { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .route-hero .hero-title { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .route-hero__link { display: none; }
}
.session-task__result { font-style: normal; font-size: 0.86rem; font-weight: 600; color: var(--color-primary); }

.resource-kind { display: block; margin-bottom: 0.15rem; font-size: 0.74rem; font-weight: 600; color: var(--color-text-soft, #666); }
.pieces-fit { display: grid; gap: var(--space-3); }
.pieces-fit h2, .pieces-fit .eyebrow { margin: 0; }
.pieces-fit__list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pieces-fit__list li { display: grid; gap: 0.3rem; justify-items: start; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: 16px; }
.pieces-fit__list p { margin: 0; color: var(--color-text-soft); font-size: 0.92rem; }
.pieces-fit__why { margin: 0; padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(92, 44, 196, 0.07); }
.guide-card--ask .button-ghost { margin-top: 0.4rem; }
.nav-link__short { display: none; }
@media (max-width: 760px) {
  .nav-link__full { display: none; }
  .nav-link__short { display: inline; }
  .sidebar__nav .nav-link { font-size: 0.68rem; letter-spacing: 0; }
}

/* ---------- Práctica: sesión guiada, metrónomo, grabadora, semana ---------- */
.session-start { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.session-start__go { min-height: 3.2rem; font-size: 1.05rem; flex: 1 1 220px; }
.session-start__express { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.92rem; }
.session-start__express input { width: 1.2rem; height: 1.2rem; accent-color: var(--color-primary); }
.session-timer { display: grid; gap: 0.35rem; justify-items: center; text-align: center; padding: 1.2rem 1rem; border-radius: 20px; color: #fff; background: linear-gradient(145deg, var(--fill-primary, var(--color-primary)), #3b17b8); }
.session-timer[hidden] { display: none; }
.session-timer__step { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.session-timer__title { margin: 0; color: #fff; font-size: clamp(1.15rem, 4.5vw, 1.45rem); }
.session-timer__result { margin: 0; color: rgba(255,255,255,0.9); font-weight: 600; }
.session-timer__clock { margin: 0.3rem 0; font-size: clamp(2.6rem, 12vw, 3.6rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.session-timer__track { width: 100%; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.2); overflow: hidden; }
.session-timer__track span { display: block; height: 100%; width: 0; background: var(--color-surface); transition: width 1s linear; }
.session-timer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; }
.session-timer .button { background: var(--color-surface); color: var(--color-primary); }
.session-timer .button-secondary, .session-timer .button-ghost { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }
.session-tools { border: 1px solid var(--color-border); border-radius: 16px; padding: 0.7rem 0.9rem; }
.session-tools summary { cursor: pointer; font-weight: 700; }
.session-tools__grid { display: grid; gap: 0.9rem; margin-top: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.metronome { display: grid; gap: 0.6rem; }
.metronome--compact { padding: 0.8rem; border: 1px solid var(--color-border); border-radius: 16px; }
.metronome__head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.metronome__row { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.metronome__value { display: grid; justify-items: center; margin: 0; }
.metronome__value span { font-size: 2.4rem; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.metronome__value small { color: var(--color-text-soft); }
.metronome__step { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 1.4rem; font-weight: 700; color: var(--color-primary); cursor: pointer; }
.metronome input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.metronome__dots { display: flex; justify-content: center; gap: 0.5rem; }
.metronome__dots span { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--color-border); color: var(--color-text-soft); font-size: 0.74rem; font-weight: 900; font-variant-numeric: tabular-nums; transition: transform 0.08s, background 0.08s, color 0.08s; }
.metronome__dots span.is-accent { outline: 2px solid rgba(92,44,196,0.35); outline-offset: 2px; }
.metronome__dots span.is-on { background: var(--fill-primary, var(--color-primary)); color: #fff; transform: scale(1.2); }
.recorder { display: grid; gap: 0.5rem; padding: 0.8rem; border: 1px solid var(--color-border); border-radius: 16px; }
.recorder p { margin: 0; }
.recorder__head { display: flex; justify-content: space-between; align-items: center; }
.recorder__clock { font-weight: 700; color: #c0182c; font-variant-numeric: tabular-nums; }
.recorder.is-recording { border-color: #c0182c; box-shadow: 0 0 0 3px rgba(192,24,44,0.12); }
.recorder__takes { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.recorder__takes li { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.recorder__takes audio { width: 100%; }
.recorder__privacy { font-size: 0.8rem; color: var(--color-text-soft); }
.week-ring { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); }
.week-ring svg { width: 64px; height: 64px; flex: 0 0 64px; transform: rotate(-90deg); }
.week-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.week-ring__track { stroke: var(--color-border); }
.week-ring__fill { stroke: var(--color-primary); transition: stroke-dasharray 0.4s; }
.week-ring > div { display: grid; gap: 0.2rem; }
.week-ring small { color: var(--color-text-soft); }
.week-ring__days { display: flex; gap: 0.3rem; margin-top: 0.2rem; }
.week-ring__days span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.72rem; font-weight: 700; background: var(--color-border); color: var(--color-text-soft); }
.week-ring__days span.is-on { background: var(--fill-primary, var(--color-primary)); color: #fff; }

/* ---------- Aprender: vistazo de la experiencia y mini-quiz ---------- */
.exp-overview > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
.exp-overview > summary::-webkit-details-marker { display: none; }
.exp-overview > summary > span:first-child { display: grid; gap: 0.15rem; }
.exp-overview > summary small { color: var(--color-text-soft); }
.exp-overview__tabs { display: flex; gap: 0.4rem; margin: 0.9rem 0 0.8rem; overflow-x: auto; }
.exp-overview__tabs button { flex: 0 0 auto; min-height: 2.6rem; padding: 0 1rem; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-weight: 600; color: var(--color-text); cursor: pointer; }
.exp-overview__tabs button.is-active { background: var(--fill-primary, var(--color-primary)); border-color: var(--color-primary); color: #fff; }
.exp-overview__next-title { margin: 0.2rem 0 0.4rem; color: var(--color-primary); }
.goal-levels { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.goal-levels li { display: grid; gap: 0.4rem; padding: 0.7rem 0.8rem; border: 1px solid var(--color-border); border-radius: 14px; }
.goal-levels__row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.goal-levels__item { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 99px; font-size: 0.82rem; font-weight: 600; background: var(--color-border); color: var(--color-text-soft); }
.goal-levels__item.is-on { background: rgba(31,157,106,0.14); color: var(--text-fixed, #157347); }
.goal-levels__note { margin: 0.6rem 0 0; font-size: 0.85rem; }
.goal-quiz { display: grid; gap: 0.7rem; margin-top: var(--space-4); padding: 1rem; border-radius: 18px; background: rgba(92,44,196,0.06); }
.goal-quiz h4, .goal-quiz > p { margin: 0; }
.goal-quiz__q { display: grid; gap: 0.45rem; margin: 0; padding: 0; border: 0; }
.goal-quiz__q legend { margin-bottom: 0.4rem; font-weight: 700; }
.goal-quiz__option { text-align: left; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; line-height: 1.35; color: var(--color-text); cursor: pointer; }
.goal-quiz__option:hover { border-color: var(--color-primary); }
.is-answered .goal-quiz__option { cursor: default; opacity: 0.6; }
.goal-quiz__option.is-correct { opacity: 1; border-color: #1f9d6a; background: rgba(31,157,106,0.1); font-weight: 600; }
.goal-quiz__option.is-wrong { opacity: 1; border-color: #c0182c; background: rgba(192,24,44,0.07); }
.goal-quiz__feedback { margin: 0; font-weight: 700; }
@media (max-width: 480px) { .exp-overview__tabs button { padding: 0 0.75rem; font-size: 0.88rem; } }

/* ---------- Taller ---------- */
.taller-page { display: grid; gap: var(--space-4); }
.taller-hero h1 { margin: 0.2rem 0; color: var(--color-primary); }
.taller-hero .eyebrow { margin: 0; }
.taller-games { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.taller-game { display: grid; gap: 0.3rem; justify-items: start; text-align: left; padding: 1rem; font: inherit; color: var(--color-text); cursor: pointer; border: 1px solid var(--color-border); text-decoration: none; }
.taller-game:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.taller-game__icon { font-size: 2rem; }
.taller-game span:not(.taller-game__icon) { color: var(--color-text-soft); font-size: 0.9rem; }
.taller-game small { margin-top: 0.2rem; font-weight: 700; color: var(--color-primary); }
.game-center { display: grid; gap: 0.8rem; }
.game-center h2, .game-center .eyebrow, .game-center p { margin: 0; }
.taller-game.is-locked { cursor: default; opacity: 0.58; background: var(--color-surface-soft); }
.taller-game.is-locked:hover { border-color: var(--color-border); transform: none; }
.taller-game__play { margin-top: 0.3rem; font-size: 0.85rem; color: var(--color-primary); }
.taller-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.taller-tool { display: grid; gap: 0.6rem; }
.taller-tool h2 { margin: 0; font-size: 1.15rem; }
.taller-tool p { margin: 0; }
.taller-tool__select { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.taller-tool__select select { flex: 1; min-height: 2.6rem; border-radius: 10px; border: 1px solid var(--color-border); padding: 0 0.6rem; font: inherit; }
.taller-tool__notes { font-weight: 700; color: var(--color-primary); text-align: center; }
.taller-tool .recorder { border: 0; padding: 0; }
.tuner__note { font-size: 3rem; font-weight: 800; text-align: center; color: var(--color-primary); line-height: 1.1; }
.tuner__detail { text-align: center; color: var(--color-text-soft); min-height: 1.2em; }
.taller-entry { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; font: inherit; color: var(--color-text); cursor: pointer; border: 1px solid var(--color-border); }
.taller-entry > span:first-child { font-size: 1.8rem; }
.taller-entry > span:nth-child(2) { display: grid; gap: 0.15rem; flex: 1; }
.taller-entry small { color: var(--color-text-soft); }
.vkeys { position: relative; display: flex; height: 150px; user-select: none; }
.vkeys__white { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.4rem; border: 1px solid #c9c4d8; border-radius: 0 0 8px 8px; background: var(--color-surface); font: inherit; font-size: 0.66rem; color: #6b6480; cursor: pointer; }
.vkeys__white:active, .vkeys__black:active { filter: brightness(0.9); }
.vkeys__black { position: absolute; top: 0; width: 6.4%; height: 60%; border: 0; border-radius: 0 0 6px 6px; background: #1e1a2e; cursor: pointer; z-index: 1; }
.vkeys .is-lit { background: #b9a4ff; color: #2a176b; font-weight: 800; }
.vkeys__black.is-lit { background: #6c4ad8; }
.vkeys .is-selected { background: var(--fill-accent, var(--color-accent)); color: #fff; }
.game { display: grid; gap: 0.8rem; justify-items: center; text-align: center; }
.game__head { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 0.5rem; }
.game__count { font-weight: 700; color: var(--color-text-soft); }
.game__options { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.game__options button { min-height: 2.5rem; padding: 0 0.9rem; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-weight: 600; cursor: pointer; }
.game__options button.is-active { background: var(--fill-primary, var(--color-primary)); color: #fff; border-color: var(--color-primary); }
.game__ask { margin: 0; font-size: 1.15rem; font-weight: 700; }
.game__answers { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.game__answers button { min-width: 4.2rem; min-height: 3rem; padding: 0 1rem; border-radius: 14px; border: 2px solid var(--color-primary); background: var(--color-surface); font: inherit; font-weight: 700; color: var(--color-primary); cursor: pointer; }
.game__answers button:hover { background: rgba(92,44,196,0.08); }
.game__hint { margin: 0; }
.game__listen { min-height: 3.2rem; padding: 0 1.4rem; border-radius: 99px; border: 0; background: rgba(92,44,196,0.1); color: var(--color-primary); font: inherit; font-weight: 700; cursor: pointer; }
.game__feedback { margin: 0; font-weight: 700; font-size: 1.05rem; }
.game__done h2 { margin: 0; font-size: 2rem; color: var(--color-primary); }
.game__big { margin: 0; font-size: 3rem; }
.game__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 0.6rem; }
.game .vkeys { width: 100%; }
.staff { width: 100%; max-width: 320px; }
.staff line { stroke: #2b2540; stroke-width: 1.2; }
.staff .staff__ledger { stroke-width: 1.4; }
.staff__note { fill: #2b2540; }
.staff__stem { stroke-width: 1.6 !important; }
.staff__clef { font-size: 46px; fill: #2b2540; font-family: "Noto Music", "Segoe UI Symbol", "Apple Symbols", serif; }
.rhythm-pad { width: 100%; min-height: 9rem; border-radius: 22px; border: 0; background: linear-gradient(145deg, var(--fill-primary, var(--color-primary)), #3b17b8); color: #fff; font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.rhythm-pad small { font-size: 0.8rem; font-weight: 500; opacity: 0.85; }
.rhythm-pad.is-hit { animation: rhythm-hit 0.15s; }
@keyframes rhythm-hit { from { transform: scale(0.97); filter: brightness(1.25); } to { transform: none; filter: none; } }
.taller-page > *, .taller-grid > * { min-width: 0; }
.vkeys__white, .vkeys__black { min-width: 0; padding-left: 0; padding-right: 0; }

/* ---------- Motivación: celebración, certificado, nota del profe ---------- */
.celebration { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20, 10, 50, 0.55); }
.celebration__card { position: relative; z-index: 1; max-width: 420px; display: grid; gap: 0.6rem; justify-items: center; text-align: center; padding: 1.6rem 1.3rem; border-radius: 26px; background: var(--color-surface); box-shadow: 0 24px 60px rgba(0,0,0,0.3); animation: celebration-pop 0.45s cubic-bezier(.2,1.4,.4,1); }
.celebration__card h2 { margin: 0; font-size: 1.8rem; color: var(--color-primary); }
.celebration__card p { margin: 0; }
.celebration__card blockquote { margin: 0; padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(92,44,196,0.07); font-style: italic; }
.celebration__medal { font-size: 3.4rem; line-height: 1; }
.celebration__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.4rem; }
.celebration__confetti span { position: absolute; top: -2rem; left: calc(8% + var(--i) * 11%); font-size: 1.8rem; animation: celebration-fall 3.2s ease-in infinite; animation-delay: calc(var(--i) * 0.35s); }
@keyframes celebration-pop { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes celebration-fall { to { transform: translateY(110vh) rotate(260deg); } }
@media (prefers-reduced-motion: reduce) { .celebration__confetti { display: none; } .celebration__card { animation: none; } }
.team-note { display: flex; align-items: center; gap: 0.9rem; width: 100%; margin-bottom: var(--space-4); text-align: left; font: inherit; color: var(--color-text); cursor: pointer; border: 2px solid rgba(92,44,196,0.25); }
.team-note__icon { font-size: 1.7rem; }
.team-note > span:nth-child(2) { display: grid; gap: 0.2rem; flex: 1; }
.team-note small { font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.evaluation-updates { display: grid; gap: 0.85rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid rgba(92,44,196,0.2); border-radius: 22px; background: linear-gradient(135deg, #fbf8ff, #fff); }
.evaluation-updates__heading h2, .evaluation-updates__heading p { margin: 0; }
.evaluation-updates__heading { display: grid; gap: 0.2rem; }
.evaluation-updates__list { display: grid; gap: 0.75rem; }
.evaluation-update { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; padding: 1rem; border-width: 1px; }
.evaluation-update--approved { border-color: rgba(19, 122, 71, 0.38); background: #f4fff7; }
.evaluation-update--practice { border-color: rgba(203, 0, 112, 0.25); background: #fff9fc; }
.evaluation-update__icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #fff; font-size: 1.4rem; }
.evaluation-update h3, .evaluation-update p { margin: 0; }
.evaluation-update > div { display: grid; gap: 0.45rem; }
.evaluation-update blockquote { margin: 0.1rem 0; padding: 0.65rem 0.75rem; border-left: 3px solid var(--color-primary); border-radius: 0 10px 10px 0; background: rgba(92,44,196,0.06); font-style: italic; }
.evaluation-update .button-secondary { justify-self: start; }
@media (max-width: 520px) { .evaluation-update { grid-template-columns: 1fr; }.evaluation-update__icon { width: 2.35rem; height: 2.35rem; } }
.continue-card__cert { color: #fff; margin-left: 0.3rem; }
.certificate-page { display: grid; gap: var(--space-4); }
.certificate-page__actions { display: flex; justify-content: space-between; gap: 0.5rem; }
.certificate { display: grid; gap: 0.5rem; justify-items: center; text-align: center; padding: clamp(1.5rem, 5vw, 3.5rem); border-radius: 18px; background: var(--color-surface); border: 10px double #cbb8ff; }
.certificate__logo { display: block; width: min(180px, 48vw); height: auto; margin-bottom: 0.2rem; object-fit: contain; }
.certificate__brand { margin: 0; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); font-size: 0.85rem; }
.certificate__kicker, .certificate__text { margin: 0; color: var(--color-text-soft); }
.certificate__name { margin: 0.3rem 0; font-size: clamp(1.8rem, 6vw, 2.8rem); color: #2a176b; }
.certificate__exp { margin: 0.3rem 0; color: var(--color-primary); font-size: clamp(1.1rem, 4vw, 1.5rem); }
.certificate__goals { margin: 0.4rem 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; font-weight: 600; }
.certificate__date { margin: 0.8rem 0 0; color: var(--color-text-soft); }
.certificate__sign { margin: 0; padding-top: 0.4rem; border-top: 1px solid var(--color-border); min-width: 12rem; font-weight: 700; }
@media print {
  body * { visibility: hidden; }
  .certificate, .certificate * { visibility: visible; }
  .certificate { position: fixed; inset: 0; margin: 0; border-radius: 0; }
  .no-print { display: none !important; }
}
.celebration__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ---------- Buscador y Mi porqué ---------- */
.search-overlay { position: fixed; inset: 0; z-index: 55; display: grid; align-items: start; justify-items: center; padding: 12px; background: rgba(20, 10, 50, 0.45); }
.search-overlay__panel { width: min(640px, 100%); max-height: calc(100vh - 24px); overflow: auto; margin-top: 4vh; padding: 0.8rem; border-radius: 20px; background: var(--color-surface); box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.search-overlay__bar { display: flex; gap: 0.5rem; position: sticky; top: 0; background: var(--color-surface); padding-bottom: 0.5rem; }
.search-overlay__bar input { flex: 1; min-height: 3rem; padding: 0 1rem; border-radius: 14px; border: 2px solid var(--color-primary); font: inherit; font-size: 1.05rem; }
.search-results { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.search-result { display: flex; gap: 0.7rem; align-items: center; padding: 0.65rem 0.7rem; border-radius: 12px; color: var(--color-text); text-decoration: none; }
.search-result:hover, .search-result:focus-visible { background: rgba(92,44,196,0.08); }
.search-result > span:first-child { font-size: 1.3rem; }
.search-result > span:last-child { display: grid; gap: 0.1rem; min-width: 0; }
.search-result small { color: var(--color-text-soft); }
.search-empty { padding: 0.8rem; margin: 0; }
.why-card { display: flex; align-items: center; gap: 0.8rem; margin-bottom: var(--space-4); padding: 0.9rem 1rem; border-radius: 18px; background: rgba(206, 0, 113, 0.06); border: 1px solid rgba(206, 0, 113, 0.18); }
.why-card > span { font-size: 1.5rem; }
.why-card p { flex: 1; margin: 0; display: grid; gap: 0.15rem; font-weight: 600; }
.why-card small { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); font-weight: 700; }
.why-card--form { display: grid; gap: 0.6rem; }
.why-card--form label { display: grid; gap: 0.2rem; }
.why-card--form label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-text-soft); font-size: 0.88rem; }
.why-card__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.why-card__row input { flex: 1 1 200px; min-height: 2.9rem; padding: 0 0.9rem; border-radius: 12px; border: 1px solid var(--color-border); font: inherit; }
.routine-why { margin: 0; padding: 0.6rem 0.9rem; border-radius: 14px; background: rgba(206, 0, 113, 0.06); }

/* ---------- Equipo: alertas y frases rápidas ---------- */
.admin-alerts h2 { margin: 0 0 0.6rem; }
.admin-alerts ul { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.admin-alerts button { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; text-align: left; color: var(--color-text); cursor: pointer; }
.admin-alerts button:hover { border-color: var(--color-primary); }
.admin-alerts button > span:first-child { font-size: 1.3rem; }
.admin-alerts button > span:nth-child(2) { display: grid; gap: 0.1rem; flex: 1; }
.admin-alerts small { color: var(--color-text-soft); }
.feedback-templates { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mp-topics h2 { margin: 0 0 0.3rem; }

.routine-reminder { display: grid; gap: 0.3rem; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.routine-reminder p { margin: 0; }
.routine-reminder__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.routine-reminder__row input { min-height: 2.6rem; padding: 0 0.6rem; border-radius: 10px; border: 1px solid var(--color-border); font: inherit; background: var(--color-surface); color: var(--color-text); }

/* ---------- Modo oscuro (solo si el estudiante lo elige) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #120f1c;
  --color-surface: #1d1930;
  --color-surface-soft: #262040;
  --color-border: #3a3452;
  --color-text: #ece9f5;
  --color-text-soft: #b8b2cc;
  --color-muted: #b8b2cc;
  --color-primary: #8b6cff;
  --color-primary-strong: #7aa2ff;
  --color-secondary: #6d4bff;
  --color-violet: #b69cff;
  --color-accent: #ff5fae;
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-success: #4fd18b;
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background-color: var(--color-surface-soft); color: var(--color-text); border-color: var(--color-border); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: var(--color-text); }
:root[data-theme="dark"] .vkeys__white { background: #f4f2fa; color: #4a4460; }
:root[data-theme="dark"] .staff { background: #f7f5fc; border-radius: 12px; }
:root[data-theme="dark"] .certificate { background: #fff; color: #232323; }
:root[data-theme="dark"] .certificate * { color: inherit; }
:root[data-theme="dark"] .certificate__name, :root[data-theme="dark"] .certificate__exp, :root[data-theme="dark"] .certificate__brand { color: #2a176b; }
:root[data-theme="dark"] img { opacity: 0.95; }
:root[data-theme="dark"] body { background: var(--color-bg); }
:root[data-theme="dark"] .topbar__help { background: var(--color-surface-soft); border-color: var(--color-border); color: var(--color-text); }
:root[data-theme="dark"] .topbar__avatar { background: var(--color-surface-soft); color: var(--color-violet); }
:root[data-theme="dark"] .sidebar__brand img { background: #fff; border-radius: 12px; padding: 4px 10px; }
:root[data-theme="dark"] .topbar__logout { color: var(--color-text); }
:root[data-theme="dark"] .why-card { background: rgba(255, 95, 174, 0.1); }
:root[data-theme="dark"] { --surface-tint: #262040; --surface-glass: rgba(29, 25, 48, 0.96); }

/* ---------- Repertorio Musicala en Mis obras ---------- */
.repertoire { display: grid; gap: 0.8rem; }
.repertoire h2, .repertoire .eyebrow, .repertoire > p { margin: 0; }
.repertoire__sub { margin: 0.4rem 0 0; font-size: 1.05rem; }
.song-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.song-card { display: grid; gap: 0.5rem; align-content: start; padding: 0.9rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); min-width: 0; }
.song-card__head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.song-card__head > div { display: grid; gap: 0.1rem; min-width: 0; }
.song-card__head strong { overflow-wrap: anywhere; }
.song-card__head small { color: var(--color-text-soft); }
.song-stars { flex: 0 0 auto; font-size: 0.78rem; color: #d99a00; font-weight: 700; white-space: nowrap; }
.song-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.song-card__tags span { padding: 0.15rem 0.55rem; border-radius: 99px; font-size: 0.76rem; font-weight: 600; background: var(--surface-tint, #f3edff); color: var(--color-primary); }
.song-card__why { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--color-text-soft); }
.song-card__guides { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.song-card__guides a { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.65rem; border-radius: 10px; border: 1px solid var(--color-border); font-size: 0.82rem; font-weight: 600; color: var(--color-text); text-decoration: none; }
.song-card__guides a:hover { border-color: var(--color-primary); }
.song-card__none { margin: 0; font-size: 0.85rem; }
.song-card__want { justify-self: start; }
.song-card__done { margin: 0; font-weight: 700; color: var(--color-success); font-size: 0.88rem; }
.repertoire__all > summary { display: flex; justify-content: space-between; cursor: pointer; padding: 0.7rem 0; list-style: none; }
.repertoire__all > summary::-webkit-details-marker { display: none; }
.repertoire__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.repertoire__filters input { flex: 1 1 200px; }
.repertoire__filters input, .repertoire__filters select { min-height: 2.7rem; padding: 0 0.7rem; border-radius: 12px; border: 1px solid var(--color-border); font: inherit; background: var(--color-surface); color: var(--color-text); }
.repertoire__count { margin: 0 0 0.4rem; }

.song-field abbr { text-decoration: none; color: var(--color-accent); font-weight: 800; }
.song-field input[aria-invalid="true"] { border-color: #c0182c; box-shadow: 0 0 0 3px rgba(192, 24, 44, 0.12); }

/* ---------- Dedos: mapa y marcador de tiempo ---------- */
.finger-map p { margin: 0; }
.finger-map { display: grid; gap: 0.7rem; }
.finger-map__rule { padding: 0.75rem 0.85rem; border-left: 4px solid var(--color-violet); border-radius: 5px 13px 13px 5px; background: var(--surface-tint, #f3edff); line-height: 1.5; }
.finger-map__example { padding: 0.7rem 0.85rem; border-radius: 13px; background: #fff; color: var(--color-text-soft); line-height: 1.5; text-align: center; }
.finger-map__hands { display: flex; justify-content: center; gap: 1.5rem; margin: 0; }
.finger-map__hands figure { display: grid; justify-items: center; gap: 0.3rem; margin: 0; }
.finger-map__hands figcaption { font-weight: 700; font-size: 0.9rem; }
.finger-map__hand { width: 110px; height: auto; }
.finger-map__palm { fill: #f3dcc9; stroke: #c9a58a; stroke-width: 1.5; }
.finger-map__tip circle { fill: var(--color-primary); stroke: #fff; stroke-width: 2; transition: transform 0.12s; transform-box: fill-box; transform-origin: center; }
.finger-map__tip text { fill: #fff; font-size: 11px; font-weight: 800; font-family: inherit; }
.finger-map__tip.is-active circle { fill: var(--color-accent); transform: scale(1.35); }
.finger-map__list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; justify-content: center; }
.finger-map__list li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem 0.25rem 0.25rem; border-radius: 99px; background: var(--surface-tint, #f3edff); font-size: 0.85rem; font-weight: 600; }
.finger-map__list span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--fill-primary, var(--color-primary)); color: #fff; font-size: 0.75rem; font-weight: 800; }
.finger-trainer { display: grid; gap: 0.7rem; }
.finger-trainer p { margin: 0; }
.finger-trainer__options { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.finger-trainer__options button { min-height: 2.4rem; padding: 0 0.8rem; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.finger-trainer__options button.is-active { background: var(--fill-primary, var(--color-primary)); border-color: var(--color-primary); color: #fff; }
.finger-trainer__stage { display: flex; align-items: center; gap: 1rem; padding: 0.8rem; border-radius: 16px; background: var(--surface-tint, #f7f3ff); }
.finger-trainer__stage > div { display: grid; gap: 0.3rem; }
.finger-trainer__label { font-weight: 700; }
.finger-trainer__move { font-size: 0.95rem; color: var(--color-text-soft); }
.finger-trainer__move.is-up, .finger-trainer__move.is-down { font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 900; color: var(--color-primary); }
.finger-trainer__move.is-down { color: var(--color-accent); }

.warmup-breath__intro { margin: 0; font-weight: 700; }
.warmup-breath__how { display: grid; gap: 0.3rem; width: 100%; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--surface-tint, #f7f3ff); text-align: left; }
.warmup-breath__how p, .warmup-breath__how ol { margin: 0; }
.warmup-breath__how ol { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding-left: 1.1rem; }
button.warmup-breath__orb { display: grid; place-items: center; border: 0; cursor: pointer; color: var(--color-primary); font: inherit; font-weight: 800; white-space: pre-line; text-align: center; line-height: 1.2; }
button.warmup-breath__orb span { transform: scale(1.3); }

.taller-focus { display: grid; gap: 0.7rem; border: 2px solid rgba(92, 44, 196, 0.25); }
.taller-focus h2, .taller-focus .eyebrow { margin: 0; }
.taller-focus__list { display: grid; gap: 0.5rem; }
.taller-focus__item { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.8rem 0.9rem; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.taller-focus__item:hover { border-color: var(--color-primary); }
.taller-focus__item > span:first-child { font-size: 1.7rem; }
.taller-focus__item > span:nth-child(2) { display: grid; gap: 0.1rem; flex: 1; }
.taller-focus__item small { color: var(--color-text-soft); }
.taller-focus__item em { font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--color-primary); }
.taller-all { margin: 0; font-size: 1.1rem; }

/* Etiquetas que son títulos, no botones: sin fondo ni forma de botón,
   para que nadie intente tocarlas. Los botones de verdad no cambian. */
.step-card__meta .pill, .pieces-fit__list .pill, .practice-resource .pill, .guide-card__tag, .guide-chips span {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-violet); cursor: default; box-shadow: none;
}
.step-card__meta .pill::before, .pieces-fit__list .pill::before, .practice-resource .pill::before, .guide-card__tag::before, .guide-chips span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7;
}
.step-card__meta, .guide-chips { gap: 0.9rem; }
.step-card__meta .pill--warning { color: var(--color-warning); }

/* ---------- MusiProfe: el chat nunca se "bloquea" al crecer ---------- */
.assistant-fab__panel { height: min(590px, calc(100vh - 6.5rem)); height: min(590px, calc(100dvh - 6.5rem)); max-height: none; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.assistant-fab__content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.assistant-thread { max-height: none; overflow: visible; }
@media (max-width: 640px) {
  .assistant-fab__panel { height: min(430px, calc(100vh - 12rem - env(safe-area-inset-bottom, 0px))); height: min(430px, calc(100dvh - 12rem - env(safe-area-inset-bottom, 0px))); }
  .assistant-fab__header { padding: 0.7rem 0.9rem; }
  .assistant-fab__identity span { display: none; }
  .assistant-fab__privacy { padding: 0.25rem 0.8rem; font-size: 0.68rem; }
}

/* ---------- Guías: volver siempre a la mano, abajo ---------- */
.guide-bottom-bar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 15; display: flex; justify-content: center; margin-top: var(--space-4); pointer-events: none; }
.guide-bottom-bar .button { pointer-events: auto; min-height: 3rem; padding-inline: 1.4rem; box-shadow: 0 10px 26px rgba(34, 10, 99, 0.28); }
@media (max-width: 760px) { .guide-bottom-bar { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Sesión guiada: los controles siempre visibles al bajar ---------- */
.session-timer:not([hidden]) { position: sticky; top: 8px; z-index: 16; box-shadow: 0 14px 30px rgba(34, 10, 99, 0.3); }
@media (max-width: 640px) {
  .session-timer { padding: 0.8rem 0.8rem; gap: 0.2rem; }
  .session-timer__clock { font-size: 2.2rem; margin: 0.1rem 0; }
  .session-timer__title { font-size: 1.05rem; }
  .session-timer__result { font-size: 0.85rem; }
  .session-timer__actions { margin-top: 0.3rem; gap: 0.35rem; }
  .session-timer__actions > * { min-height: 2.6rem; padding: 0 0.8rem; font-size: 0.88rem; }
}

.virtual-piano { display: flex; align-items: center; gap: 0.9rem; color: var(--color-text); text-decoration: none; border: 2px solid rgba(92, 44, 196, 0.25); }
.virtual-piano:hover { border-color: var(--color-primary); }
.virtual-piano > span:first-child { font-size: 2rem; }
.virtual-piano > span:nth-child(2) { display: grid; gap: 0.2rem; flex: 1; }
.virtual-piano small { color: var(--color-text-soft); }
.session-start__piano { flex-basis: 100%; font-weight: 700; font-size: 0.92rem; color: var(--color-primary); }

/* ---------- ¿Qué quieres hacer hoy? ---------- */
.today-chooser { display: grid; gap: 0.8rem; margin-bottom: var(--space-4); }
.today-chooser h2 { margin: 0; font-size: clamp(1.3rem, 4.5vw, 1.6rem); color: var(--color-primary); }
.today-chooser__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.today-option { display: grid; justify-items: center; align-content: start; gap: 0.25rem; min-height: 8rem; padding: 1rem 0.6rem; border-radius: 20px; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: center; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.today-option:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.today-option__icon { font-size: 2rem; }
.today-option strong { font-size: 1.1rem; }
.today-option small { color: var(--color-text-soft); font-size: 0.8rem; line-height: 1.3; }
.today-option--learn { border-color: rgba(92, 44, 196, 0.35); background: var(--surface-tint, #f7f3ff); }
.today-option--practice.is-locked { opacity: 0.75; border-style: dashed; }
.today-chooser__guide { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: 16px; border: 2px solid var(--color-primary); background: var(--color-surface); }
.today-chooser__guide p { margin: 0; }
.today-chooser__guide .button { justify-self: start; }
.practice-gate { display: flex; gap: 1rem; align-items: flex-start; border: 2px solid rgba(92, 44, 196, 0.3); }
.practice-gate > span { font-size: 2.4rem; }
.practice-gate h1 { margin: 0.2rem 0 0.4rem; font-size: clamp(1.3rem, 5vw, 1.7rem); }
.practice-gate p { margin: 0 0 0.7rem; }
.practice-gate .eyebrow { margin: 0; }
@media (max-width: 420px) {
  .today-option { min-height: 7rem; padding: 0.8rem 0.3rem; }
  .today-option small { font-size: 0.72rem; }
}

/* ---------- Canciones de 3 notas ---------- */
.note3-step { margin: 0.6rem 0 0.2rem; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-violet); }
.note3-legend { margin: 0.2rem 0 0; }
.note3-listen { display: grid; gap: 0.5rem; }
.note3-listen audio { width: 100%; }
.note3-instruments { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.note3-instruments button { min-height: 2.4rem; padding: 0 0.9rem; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; }
.note3-instruments button.is-active { background: var(--fill-primary, var(--color-primary)); color: #fff; border-color: var(--color-primary); }
.note3-score { display: grid; gap: 0.45rem; }
.note3-line { display: flex; align-items: center; gap: 0.6rem; }
.note3-line__n { flex: 0 0 1.6rem; font-size: 0.75rem; font-weight: 800; color: var(--color-text-soft); }
.note3-line > div { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.note3 { display: inline-grid; justify-items: center; gap: 0.1rem; min-width: 3.1rem; padding: 0.35rem 0.4rem; border-radius: 12px; border: 2px solid var(--color-border); background: var(--color-surface); transition: transform 0.12s, background 0.12s; }
.note3 b { font-size: 1rem; color: var(--color-text); }
.note3 small { font-size: 0.78rem; color: var(--color-text-soft); min-height: 1em; }
.note3--rojo { background: #ffd9d9; border-color: #ff4e4e; }
.note3--naranja { background: #ffe6cc; border-color: #fca954; }
.note3--amarillo { background: #fff6bf; border-color: #e6c300; }
.note3.is-current { transform: scale(1.12); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(92, 44, 196, 0.25); }
.note3.is-done { opacity: 0.55; }
.note3.is-wrong { border-color: #c0182c; animation: note3-shake 0.3s; }
@keyframes note3-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.note3-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.note3-feedback { margin: 0.4rem 0 0; font-weight: 600; }
.note3-guide { display: inline-block; margin-top: 0.5rem; font-weight: 700; color: var(--color-primary); }
.note3-legend .note3 { min-width: 2.4rem; padding: 0.1rem 0.3rem; }
.note-order-lesson__piano > div { display: grid; gap: 0.4rem; justify-items: start; }
.note-order-lesson__piano small { color: var(--color-text-soft); }

/* ==========================================================
   Regla visual: lo que NO es botón no se ve como botón.
   Etiquetas, estados y notas: texto con un punto o una línea
   de color, sin caja ni fondo redondeado. Los botones reales
   (button, .button, enlaces de acción) no cambian.
   ========================================================== */
.pill, .route-card__state, .experience-picker__current, .song-card__tags span, .goal-levels__item, .finger-map__list li, .piece-item--suggestion .pill {
  padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; cursor: default;
  font-weight: 800; letter-spacing: 0.02em;
}
.pill::before, .route-card__state::before, .song-card__tags span::before, .goal-levels__item::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.35rem; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: 0.75;
}
.route-card__state--current { color: var(--color-violet); }
.goal-levels__item > span:first-child { display: none; }
.goal-levels__item.is-on { color: var(--text-fixed, #157347); }
.finger-map__list li { gap: 0.3rem; }
.song-card__tags { gap: 0.2rem 0.8rem; }

/* Notas de las canciones: texto con una línea de color debajo, no cajas. */
.note3 { min-width: 2.6rem; padding: 0.15rem 0.2rem 0.25rem; border: 0; border-bottom: 3px solid var(--color-border); border-radius: 0; background: none; }
.note3 b { font-size: 1.05rem; }
.note3--rojo { background: none; border-bottom-color: #ff4e4e; }
.note3--rojo b { color: #d42a2a; }
.note3--naranja { background: none; border-bottom-color: #fca954; }
.note3--naranja b { color: #c56a0a; }
.note3--amarillo { background: none; border-bottom-color: #e6c300; }
.note3--amarillo b { color: #8a7400; }
.note3.is-current { transform: scale(1.15); border-bottom-color: var(--color-primary); box-shadow: none; background: var(--surface-tint, #f3edff); border-radius: 8px 8px 0 0; }
.note3.is-wrong { border-bottom-color: #c0182c; }

/* ---------- Después de pedir una obra ---------- */
.suggest-next { display: grid; gap: 0.6rem; border: 2px solid var(--color-success); outline: none; }
.suggest-next p, .suggest-next ol { margin: 0; }
.suggest-next__done { font-size: 1.1rem; color: var(--color-success); font-weight: 700; }
.suggest-next__steps { display: grid; gap: 0.3rem; padding-left: 1.2rem; }
.suggest-next__ask { font-weight: 700; }
.suggest-next__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.song-card__pending { margin: 0; font-weight: 700; color: var(--color-warning); font-size: 0.88rem; }
:root[data-theme="dark"] { --text-fixed: var(--color-text); }

/* Modo oscuro: rellenos oscuros (texto blanco legible) y textos de acento claros. */
:root[data-theme="dark"] {
  --color-primary: #b3a0ff;
  --color-violet: #c7b3ff;
  --color-secondary: #9d86ff;
  --color-accent: #ff8cc6;
  --color-primary-strong: #9dbcff;
  --fill-primary: #5b3fd9;
  --fill-secondary: #4a30c8;
  --fill-violet: #6a3fc2;
  --fill-accent: #b8005f;
}
:root[data-theme="dark"] { --surface-glass: rgba(38, 32, 64, 0.92); --surface-glow: rgba(255, 95, 174, 0.08); }
/* Modo oscuro: paleta de las experiencias y tonos de las tarjetas. */
:root[data-theme="dark"] {
  --tone-do: #b3a0ff;
  --tone-see: #8fb4ff;
  --tone-ask: #ff8cc6;
  --color-warning: #ffb84d;
  --experience-accent: #6a3fc2;
  --experience-accent-dark: #d4c4ff;
  --experience-accent-soft: rgba(179, 160, 255, 0.14);
  --experience-accent-lighter: rgba(179, 160, 255, 0.08);
  --experience-text: var(--color-text);
  --experience-muted: var(--color-text-soft);
  --experience-border: rgba(179, 160, 255, 0.22);
  --experience-border-strong: rgba(179, 160, 255, 0.34);
  --experience-surface: #1d1930;
  --experience-surface-soft: #231e3a;
  --experience-surface-lilac: #2a2346;
  --experience-shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.4);
  --experience-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .card { border-color: var(--color-border); }
:root[data-theme="dark"] .guide-card__tag, :root[data-theme="dark"] .guide-card .button-secondary { background: color-mix(in srgb, var(--tone) 16%, var(--color-surface)); }
:root[data-theme="dark"] .warmup-breath__orb { color: #2a176b; }
/* Modo oscuro: últimos detalles que medimos con bajo contraste. */
:root[data-theme="dark"] .piece-form .button, :root[data-theme="dark"] .diary-form .button { background: linear-gradient(90deg, #2f55c8, var(--fill-secondary), var(--fill-accent)); }
:root[data-theme="dark"] .survey-hero__eyebrow, :root[data-theme="dark"] .story-intro__eyebrow, :root[data-theme="dark"] .keyboard-diagram__badge { color: var(--color-violet); }
:root[data-theme="dark"] .experience-stage__ask-icon { background: var(--fill-accent); }
:root[data-theme="dark"] .keyboard-diagram { background: radial-gradient(circle at top right, rgba(179, 160, 255, 0.1), transparent 40%), linear-gradient(180deg, #231e3a, #1d1930); }
:root[data-theme="dark"] .keyboard-diagram__group-label { background: rgba(179, 160, 255, 0.1); }
:root[data-theme="dark"] .keyboard-diagram__group-label--fa { border-color: #9d86ff; color: #c7b3ff; background: rgba(157, 134, 255, 0.12); }
:root[data-theme="dark"] .keyboard-diagram__keys { border-color: #b3a0ff; }

/* ---------- Encuesta rápida ---------- */
.feedback-card { display: grid; gap: 0.6rem; margin-bottom: var(--space-4); border: 2px solid rgba(92, 44, 196, 0.25); }
.feedback-card h2, .feedback-card .eyebrow, .feedback-card > p { margin: 0; }
.feedback-form { display: grid; gap: 0.9rem; }
.feedback-form fieldset { margin: 0; padding: 0; border: 0; }
.feedback-form legend { margin-bottom: 0.4rem; font-weight: 700; }
.feedback-form legend small, .feedback-text small { font-weight: 400; color: var(--color-text-soft); }
.feedback-ease { display: flex; justify-content: space-between; gap: 0.3rem; }
.feedback-ease label { display: grid; justify-items: center; gap: 0.15rem; flex: 1; padding: 0.4rem 0.2rem; border-radius: 12px; cursor: pointer; }
.feedback-ease input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-ease span { font-size: 1.8rem; filter: grayscale(0.6); transition: transform 0.12s, filter 0.12s; }
.feedback-ease small { font-size: 0.68rem; color: var(--color-text-soft); text-align: center; }
.feedback-ease label:has(input:checked) { background: var(--surface-tint, #f3edff); outline: 2px solid var(--color-primary); }
.feedback-ease label:has(input:checked) span { filter: none; transform: scale(1.2); }
.feedback-ease label:has(input:focus-visible) { outline: 3px solid var(--color-primary); }
.feedback-likes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.feedback-likes legend { width: 100%; }
.feedback-likes label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font-size: 0.9rem; }
.feedback-likes label:has(input:checked) { border-color: var(--color-primary); background: var(--surface-tint, #f3edff); font-weight: 700; }
.feedback-likes input { accent-color: var(--color-primary); }
.feedback-text { display: grid; gap: 0.3rem; font-weight: 700; }
.feedback-text textarea { font: inherit; font-weight: 400; padding: 0.6rem 0.7rem; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feedback-card--thanks { display: flex; align-items: center; gap: 0.8rem; }
.feedback-card--thanks > span { font-size: 1.8rem; }
.feedback-card--thanks p { margin: 0.2rem 0 0; }
.admin-feedback h2 { margin: 0 0 0.5rem; }
.admin-feedback h2 small { font-size: 0.8rem; font-weight: 600; color: var(--color-text-soft); }
.admin-feedback__stats p { margin: 0 0 0.3rem; }
.admin-feedback__list { display: grid; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.admin-feedback__list li { padding: 0.6rem 0.8rem; border: 1px solid var(--color-border); border-radius: 12px; }
.admin-feedback__list p { margin: 0.25rem 0 0; }

/* ---------- Ilustración de las manos con los dedos numerados ---------- */
.hands-photo { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #fff; }
.hands-photo img { display: block; width: 100%; height: auto; }
.hands-photo__ring { position: absolute; width: 6.2%; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--color-accent); transform: translate(-50%, -50%) scale(0.6); opacity: 0; transition: opacity 0.12s, transform 0.12s; pointer-events: none; }
.hands-photo__ring.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 6px rgba(206, 0, 113, 0.25); }
.hands-photo figcaption { display: flex; justify-content: space-around; padding: 0.4rem 0 0.6rem; font-weight: 700; font-size: 0.9rem; color: #2a176b; background: #fff; }
.finger-trainer__stage { display: block; }

/* ---------- Legal ---------- */
.legal-overlay { position: fixed; inset: 0; z-index: 80; overflow-y: auto; padding: 12px; background: rgba(20, 10, 50, 0.55); }
.legal-doc { max-width: 760px; margin: 2vh auto; padding: 1.2rem 1.3rem 1.6rem; border-radius: 20px; background: var(--color-surface); color: var(--color-text); display: grid; gap: 0.6rem; }
.legal-doc__bar { position: sticky; top: -1.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0; background: var(--color-surface); z-index: 1; }
.legal-doc__bar nav { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.legal-doc__bar nav button { min-height: 2.3rem; padding: 0 0.8rem; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.legal-doc__bar nav button.is-active { background: var(--fill-primary, var(--color-primary)); border-color: var(--fill-primary, var(--color-primary)); color: #fff; }
.legal-doc h1 { margin: 0.2rem 0 0; font-size: clamp(1.4rem, 5vw, 1.9rem); color: var(--color-primary); }
.legal-doc h2 { margin: 0.8rem 0 0.2rem; font-size: 1.05rem; }
.legal-doc p { margin: 0 0 0.4rem; line-height: 1.55; }
.legal-doc__meta { font-size: 0.85rem; color: var(--color-text-soft); }
.legal-doc__contact { padding: 0.8rem; border-radius: 12px; background: var(--surface-tint, #f3edff); }
.legal-doc > .button { justify-self: start; }
.legal-links { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.legal-links a, .auth-panel__legal a { color: inherit; font-weight: 700; text-decoration: underline; }
.app-footer .legal-links { font-size: 0.85rem; }
@media (max-width: 640px) {
  .app-footer { align-items: flex-start; padding-right: 96px; text-align: left; }
  .app-footer .legal-links { max-width: 100%; }
}
.auth-panel__legal { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--color-text-soft); text-align: center; }
.consent-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.consent-card { max-width: 620px; display: grid; gap: 0.7rem; }
.consent-card h1 { margin: 0; font-size: clamp(1.4rem, 5vw, 1.8rem); color: var(--color-primary); }
.consent-card p, .consent-card .eyebrow { margin: 0; }
.consent-summary { display: grid; gap: 0.35rem; margin: 0; padding: 0.8rem 0.9rem; border-radius: 14px; background: var(--surface-tint, #f7f3ff); list-style: none; }
.consent-form { display: grid; gap: 0.7rem; }
.consent-who { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.consent-who legend { font-weight: 700; margin-bottom: 0.3rem; }
.consent-who label, .consent-check { display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.4; }
.consent-who input, .consent-check input { width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; accent-color: var(--color-primary); flex: 0 0 auto; }
.consent-check a { color: var(--color-primary); font-weight: 700; }
.consent-guardian { display: grid; gap: 0.5rem; padding: 0.7rem; border-radius: 12px; border: 1px dashed var(--color-border); }
.consent-guardian[hidden] { display: none; }
.consent-guardian label { display: grid; gap: 0.25rem; font-weight: 600; }
.consent-guardian input, .consent-guardian select { min-height: 2.7rem; padding: 0 0.7rem; border-radius: 10px; border: 1px solid var(--color-border); font: inherit; background: var(--color-surface); color: var(--color-text); }
.consent-error { color: #c0182c; font-weight: 700; }
.admin-consent { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--color-success); }
.admin-consent.is-missing { color: var(--color-warning); }

/* ---------- Cuestionario ya respondido ---------- */
.survey-done { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem; border-radius: 16px; background: rgba(31, 157, 106, 0.1); border: 2px solid rgba(31, 157, 106, 0.4); }
.survey-done__check { display: grid; place-items: center; flex: 0 0 2.6rem; height: 2.6rem; margin: 0; border-radius: 50%; background: #1f9d6a; color: #fff; font-size: 1.4rem; font-weight: 800; }
.survey-done h3 { margin: 0 0 0.3rem; color: var(--color-success); }
.survey-done p { margin: 0; }
.survey-done__answers { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: 14px; }
.survey-done__answers summary { cursor: pointer; font-weight: 700; color: var(--color-primary); }
.survey-done__answers dl { display: grid; gap: 0.6rem; margin: 0.8rem 0 0; }
.survey-done__row dt { font-weight: 700; font-size: 0.92rem; }
.survey-done__row dd { margin: 0.15rem 0 0; color: var(--color-text-soft); }
.survey-done__edit { margin: 0.8rem 0 0; }

.rhythm-subdivision__figures { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: .8rem; margin: 0; overflow: hidden; border: 1px solid rgba(104, 13, 191, .14); border-radius: 17px; background: var(--color-surface, #fff); }
.rhythm-subdivision__figures img { display: block; width: 100%; max-height: 230px; object-fit: contain; background: linear-gradient(145deg, #f3f9ff, #f1eaff); }
.rhythm-subdivision__figures figcaption { display: grid; gap: .15rem; padding: .8rem; margin-right: .8rem; border: 1px solid rgba(206, 0, 113, .42); border-radius: 14px; background: linear-gradient(145deg, #fff, #fff0f8); text-align: center; }
.rhythm-subdivision__figures figcaption span { color: var(--color-accent, #ce0071); font-size: 2.2rem; font-weight: 900; line-height: 1.1; }
.rhythm-subdivision__figures figcaption strong { color: var(--color-primary); }
.rhythm-subdivision__figures figcaption small { color: var(--color-text-soft); }
.rhythm-subdivision__moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.rhythm-subdivision__move { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid rgba(104, 13, 191, .14); border-radius: 17px; background: var(--color-surface, #fff); }
.rhythm-subdivision__move.is-new { border-color: rgba(206, 0, 113, .42); box-shadow: 0 8px 22px rgba(206, 0, 113, .08); }
.rhythm-subdivision__move figure { margin: 0; padding: .4rem; background: linear-gradient(145deg, #f3f9ff, #f1eaff); }
.rhythm-subdivision__move figure { padding: 0; background: #fff; }
.rhythm-subdivision__move img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rhythm-subdivision__move > div { display: grid; align-content: start; gap: .3rem; padding: .7rem .8rem .85rem; }
.rhythm-subdivision__move small { color: var(--color-accent, #ce0071); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rhythm-subdivision__move h5, .rhythm-subdivision__move p { margin: 0; }
.rhythm-subdivision__move h5 { color: var(--color-primary); font-size: .98rem; }
.rhythm-subdivision__move p { color: var(--color-text-soft); font-size: .88rem; line-height: 1.45; }
.rhythm-subdivision__move .rhythm-subdivision__move-count { color: var(--color-primary); font-weight: 800; }
@media (max-width: 760px) {
  .rhythm-subdivision__figures { grid-template-columns: 1fr; }
  .rhythm-subdivision__figures figcaption { margin: 0 .8rem .8rem; }
  .rhythm-subdivision__moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.four-note-repertoire__how { display: grid; gap: .35rem; margin: .4rem 0 0; padding: .75rem .9rem .75rem 2rem; border-radius: 14px; background: var(--surface-tint, #f6f1ff); color: var(--color-text-soft); line-height: 1.45; }
.four-note-repertoire__how strong { color: var(--color-primary); }
.four-note-repertoire:is([data-note-set="5"], [data-note-set="6"], [data-note-set="7"], [data-note-set="8"]) .three-note-repertoire__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); overflow: visible; }
.four-note-repertoire:is([data-note-set="5"], [data-note-set="6"], [data-note-set="7"], [data-note-set="8"]) .three-note-repertoire__choices button { min-width: 0; }
.chord-trainer { display: grid; gap: 1rem; margin: 1rem 0; }
.chord-trainer .eyebrow, .chord-trainer h5, .chord-trainer h6, .chord-trainer p { margin: 0; }
.chord-trainer h5 { color: var(--color-primary); font-size: 1.05rem; }
.chord-trainer__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.chord-trainer__intro article { display: grid; align-content: start; gap: .4rem; padding: .9rem 1rem; border: 1px solid rgba(104, 13, 191, .14); border-radius: 17px; background: var(--color-surface, #fff); }
.chord-trainer__intro article > span { justify-self: start; padding: .2rem .6rem; border-radius: 999px; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; font-weight: 900; font-size: .9rem; }
.chord-trainer__intro p { color: var(--color-text-soft); line-height: 1.5; }
.chord-trainer__intro s { opacity: .55; }
.chord-trainer__compare, .chord-trainer__actions, .chord-trainer__choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.chord-trainer__why, .chord-trainer__exercises, .chord-trainer__families { display: grid; gap: .5rem; padding: 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); }
.chord-trainer__why ul, .chord-trainer__exercises ol { display: grid; gap: .45rem; margin: 0; padding-left: 1.2rem; line-height: 1.5; }
.chord-trainer__why strong, .chord-trainer__exercises strong { color: var(--color-primary); }
.chord-trainer__lab { display: grid; gap: .75rem; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.chord-trainer__lab-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; align-items: end; }
.chord-trainer__lab-head p:not(.eyebrow) { color: var(--color-text-soft); }
.chord-trainer__choices button { padding: .5rem .85rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.chord-trainer__choices button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.chord-trainer__table { width: 100%; max-width: 520px; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid rgba(104, 13, 191, .18); border-radius: 14px; text-align: center; }
.chord-trainer__table th, .chord-trainer__table td { padding: .55rem .7rem; border-bottom: 1px solid rgba(104, 13, 191, .1); }
.chord-trainer__table thead th { background: var(--surface-tint, #f1eaff); color: var(--color-primary); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.chord-trainer__table tbody th { color: var(--color-primary); text-align: left; }
.chord-trainer__table tbody tr:last-child > * { border-bottom: 0; }
.chord-trainer__keyboard { position: relative; display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); height: 150px; overflow: hidden; border-radius: 10px; background: #1d1640; padding: 4px; gap: 2px; }
.chord-trainer__white { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem; padding-bottom: .35rem; border-radius: 0 0 6px 6px; background: #fff; transition: background .15s; }
.chord-trainer__white small { color: #6b6585; font-size: .62rem; font-weight: 700; }
.chord-trainer__black { position: absolute; top: 0; right: -32%; z-index: 2; width: 60%; height: 58%; border-radius: 0 0 4px 4px; background: #1d1640; }
.chord-trainer__finger { display: grid; place-items: center; min-width: 1.4rem; min-height: 1.4rem; border-radius: 50%; color: #fff; font-size: .78rem; font-weight: 900; }
.chord-trainer__white.is-lit { background: linear-gradient(180deg, #fff 30%, #ffd6ec); }
.chord-trainer__white.is-lit .chord-trainer__finger { background: #ce0071; }
.chord-trainer__white.is-lit.is-left { background: linear-gradient(180deg, #fff 30%, #dcd2ff); }
.chord-trainer__white.is-lit.is-left .chord-trainer__finger { background: #5729ff; }
.chord-trainer__feedback { color: var(--color-text-soft); }
.chord-trainer__family-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.chord-trainer__family-grid article { display: grid; align-content: start; gap: .3rem; padding: .75rem; border: 1px solid rgba(104, 13, 191, .14); border-radius: 14px; background: #fff; }
.chord-trainer__family-grid article.is-current { border-color: rgba(206, 0, 113, .5); box-shadow: 0 8px 22px rgba(206, 0, 113, .1); }
.chord-trainer__family-grid small { color: var(--color-accent, #ce0071); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chord-trainer__family-grid h6 { margin: 0; color: var(--color-primary); font-size: .9rem; }
.chord-trainer__family-grid strong { color: var(--color-primary); }
.chord-trainer__family-grid p { color: var(--color-text-soft); font-size: .85rem; line-height: 1.4; }
.chord-trainer__shape { font-size: 1rem; letter-spacing: .1em; }
@media (max-width: 760px) {
  .chord-trainer__intro, .chord-trainer__family-grid { grid-template-columns: 1fr 1fr; }
  .chord-trainer__keyboard { height: 120px; }
  .chord-trainer__white small { font-size: .5rem; }
}
@media (max-width: 480px) {
  .chord-trainer__intro, .chord-trainer__family-grid { grid-template-columns: 1fr; }
}
.eval-theory { display: grid; gap: .6rem; }
.theory-exam { display: grid; gap: .55rem; padding: .85rem; border: 2px solid rgba(87, 41, 255, .2); border-radius: 16px; background: linear-gradient(145deg, #fff, #f6f1ff); }
.theory-exam__head { display: flex; gap: .6rem; align-items: center; }
.theory-exam__head > span { font-size: 1.5rem; }
.theory-exam__head div { display: grid; }
.theory-exam__head strong { color: var(--color-primary); }
.theory-exam__head small, .theory-exam__count { color: var(--color-text-soft); font-size: .82rem; }
.theory-exam__status { margin: 0; color: var(--color-text-soft); }
.theory-exam__status.is-passed { color: #0b7a43; font-weight: 700; }
.theory-exam__status.is-pending { color: #a3420b; }
.theory-exam__question { display: grid; gap: .5rem; padding: .75rem; border-radius: 14px; background: #fff; border: 1px solid rgba(104, 13, 191, .14); }
.theory-exam__question p { margin: 0; }
.theory-exam__prompt { color: var(--color-primary); font-weight: 800; font-size: 1.02rem; }
.theory-exam__staff { width: 100%; max-width: 320px; justify-self: center; }
.theory-exam__staff line { stroke: #2c2450; stroke-width: 2; }
.theory-exam__clef { fill: #2c2450; font-family: "Noto Music", "Segoe UI Symbol", serif; }
.theory-exam__note { fill: #680dbf; }
.theory-exam__glyph { justify-self: center; color: var(--color-primary); font-size: 3.2rem; line-height: 1.1; font-family: "Noto Music", "Segoe UI Symbol", serif; }
.theory-exam__glyph--row { font-size: 2.4rem; letter-spacing: .3rem; }
.theory-exam__glyph span { color: var(--color-accent, #ce0071); font-family: inherit; font-weight: 900; }
.theory-exam__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .4rem; }
.theory-exam__options button { padding: .65rem .5rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 12px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.theory-exam__options button.is-correct { border-color: #0b7a43; background: #e3f7ec; color: #0b7a43; }
.theory-exam__options button.is-wrong { border-color: #c4153c; background: #fde7ec; color: #c4153c; }
.theory-exam__feedback { min-height: 1.3em; color: var(--color-text-soft); }
.theory-exam__result { margin: 0; padding: .7rem .8rem; border-radius: 12px; background: #fff4e8; }
.theory-exam__result.is-passed { background: #e3f7ec; }
.admin-eval__exam.is-passed small { color: #0b7a43; font-weight: 700; }
.indep { display: grid; gap: .9rem; margin: 1rem 0; }
.indep p, .indep h4 { margin: 0; }
.indep__intro { display: grid; gap: .5rem; padding: 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.indep__intro h4 { color: var(--color-primary); }
.indep__modes { display: grid; gap: .35rem; }
.indep__modes p { padding: .5rem .7rem; border-left: 3px solid var(--color-accent, #ce0071); border-radius: 0 10px 10px 0; background: #fff; }
.indep__lab { display: grid; gap: .7rem; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.indep__choices { display: flex; flex-wrap: wrap; gap: .35rem; }
.indep__choices button, .indep__mode button { min-width: 2.4rem; padding: .45rem .7rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.indep__choices button[aria-pressed="true"], .indep__mode button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.indep__title { color: var(--color-primary); }
.indep__table-scroll { overflow-x: auto; }
.indep__table { width: 100%; max-width: 560px; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid rgba(104, 13, 191, .18); border-radius: 14px; }
.indep__table th { padding: .5rem; background: var(--surface-tint, #f1eaff); color: var(--color-primary); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.indep__table td { padding: .45rem .6rem; border-top: 1px solid rgba(104, 13, 191, .1); }
.indep__table td:first-child { width: 30%; border-right: 1px solid rgba(104, 13, 191, .1); }
.indep__note { display: inline-grid; justify-items: center; min-width: 2.8rem; margin: .1rem; padding: .25rem .4rem; border-radius: 10px; background: #fff0f8; color: #8a0a50; font-weight: 800; transition: transform .12s, background .12s; }
.indep__note small { color: inherit; opacity: .7; font-size: .68rem; }
.indep__note--left { background: #ece6ff; color: #3d1fb8; }
.indep__note.is-on { transform: scale(1.12); background: #ce0071; color: #fff; }
.indep__note--left.is-on { background: #5729ff; }
.indep__keys { display: flex; gap: 3px; overflow-x: auto; padding: 4px; border-radius: 10px; background: #1d1640; }
.indep__key { display: grid; justify-items: center; align-content: end; gap: .2rem; flex: 1 0 2.4rem; height: 92px; padding-bottom: .35rem; border-radius: 0 0 6px 6px; background: #fff; color: #6b6585; font-size: .7rem; font-weight: 700; }
.indep__key b { width: 1.3rem; height: 1.3rem; border-radius: 50%; }
.indep__key--left.is-on { background: linear-gradient(180deg, #fff 30%, #dcd2ff); }
.indep__key--left.is-on b { background: #5729ff; }
.indep__key--right.is-on { background: linear-gradient(180deg, #fff 30%, #ffd6ec); }
.indep__key--right.is-on b { background: #ce0071; }
.indep__gap { flex: 0 0 1.2rem; }
.indep__controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.indep__mode { display: flex; gap: .35rem; }
.indep__feedback { color: var(--color-text-soft); }
.indep__steps { display: grid; gap: .4rem; margin: 0; padding: 1rem 1rem 1rem 2.2rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.motif { display: grid; gap: .9rem; margin: 1rem 0; }
.motif p, .motif h4 { margin: 0; }
.motif__intro { display: grid; gap: .55rem; padding: 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.motif__intro h4 { color: var(--color-primary); }
.motif__legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.motif__legend figure { display: grid; margin: 0; overflow: hidden; border: 1px solid rgba(104, 13, 191, .14); border-radius: 14px; background: #fff; }
.motif__legend figure > img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.motif__legend figcaption { display: grid; justify-items: center; gap: .1rem; padding: .45rem; text-align: center; }
.motif__legend-fig { height: 30px; }
.motif__legend strong { color: var(--color-primary); font-size: .85rem; }
.motif__legend small { color: var(--color-text-soft); font-size: .72rem; }
.motif__lab { display: grid; gap: .7rem; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.motif__choices { display: flex; flex-wrap: wrap; gap: .3rem; }
.motif__choices button { min-width: 2.3rem; padding: .4rem .55rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.motif__choices button.is-done { border-color: #0b7a43; background: #e3f7ec; color: #0b7a43; }
.motif__choices button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.motif__title { color: var(--color-primary); }
.motif__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid #2c2450; border-radius: 10px; background: #fff; }
.motif__bar { position: relative; padding: .9rem .35rem .5rem; border-left: 2px solid #2c2450; }
.motif__bar:first-child { border-left: 0; }
.motif__bar-n { position: absolute; top: .2rem; left: .35rem; color: var(--color-text-soft); font-size: .65rem; font-weight: 800; }
.motif__figs { display: flex; justify-content: space-around; align-items: flex-end; gap: 1px; min-height: 64px; }
.motif__fig { display: grid; place-items: center; flex: 1 1 0; min-width: 0; padding: .2rem 0; border-radius: 8px; transition: background .1s; }
.motif__fig img { height: 52px; max-width: 100%; }
.motif__fig--e img { height: 40px; }
.motif__fig.is-on { background: #ffd6ec; box-shadow: 0 0 0 2px #ce0071 inset; }
.motif__count { display: flex; justify-content: center; gap: .4rem; }
.motif__count span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-tint, #f1eaff); color: var(--color-primary); font-weight: 900; }
.motif__count span.is-on { background: #5729ff; color: #fff; }
.motif__controls, .motif__nav { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.motif__feedback { color: var(--color-text-soft); }
.motif__steps { display: grid; gap: .4rem; margin: 0; padding: 1rem 1rem 1rem 2.2rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
@media (max-width: 760px) {
  .motif__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motif__bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motif__bar:nth-child(3) { border-left: 0; border-top: 2px solid #2c2450; }
  .motif__bar:nth-child(4) { border-top: 2px solid #2c2450; }
}
.note3 i { display: block; color: var(--color-accent, #ce0071); font-size: .6rem; font-style: normal; font-weight: 800; line-height: 1; }
.chord-trainer__black { display: flex; align-items: flex-end; justify-content: center; padding-bottom: .3rem; }
.chord-trainer__black .chord-trainer__finger { min-width: 1.15rem; min-height: 1.15rem; font-size: .66rem; }
.chord-trainer__black.is-lit { background: #ce0071; }
.chord-trainer__black.is-lit .chord-trainer__finger { background: #fff; color: #ce0071; }
.chord-trainer__black.is-lit.is-left { background: #5729ff; }
.chord-trainer__black.is-lit.is-left .chord-trainer__finger { color: #5729ff; }
.chord-trainer__family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chord-trainer__review { padding: .8rem 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); }
.chord-trainer__review summary { color: var(--color-primary); font-weight: 800; cursor: pointer; }
.chord-trainer__review[open] summary { margin-bottom: .7rem; }
.gym-guide { display: grid; gap: .8rem; margin: 1rem 0; }
.gym-guide p, .gym-guide h4, .gym-guide ol, .gym-guide ul { margin: 0; }
.gym-guide h4 { color: var(--color-primary); }
.gym-guide__intro, .gym-guide__levels, .gym-guide__review { display: grid; gap: .45rem; padding: 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.gym-guide ol, .gym-guide ul { display: grid; gap: .3rem; padding-left: 1.2rem; }
.gym-guide__current { display: grid; gap: .5rem; padding: 1rem; border: 2px solid rgba(206, 0, 113, .3); border-radius: 22px; background: linear-gradient(145deg, #fff, #fff0f8); line-height: 1.5; }
.gym-guide__combos { display: flex; flex-wrap: wrap; gap: .4rem; }
.gym-guide__combo { display: inline-block; margin: .1rem; padding: .3rem .65rem; border-radius: 999px; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; font-weight: 900; letter-spacing: .03em; }
.gym-guide__review summary { color: var(--color-primary); font-weight: 800; cursor: pointer; }
.gym-guide__review li { display: block; }
.gym-guide__review .gym-guide__combo { background: #ece6ff; color: #3d1fb8; }
.gym-guide__review small { display: block; color: var(--color-text-soft); }
.gym-guide__tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.gym-guide__tips > div { display: grid; gap: .35rem; padding: .9rem; border: 1px solid rgba(104, 13, 191, .14); border-radius: 17px; background: #fff; }
@media (max-width: 640px) { .gym-guide__tips { grid-template-columns: 1fr; } }

.scale-trainer__why { display: grid; gap: .55rem; padding: 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.scale-trainer__why p { margin: 0; }
.scale-trainer__sharps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .55rem; }
.scale-trainer__sharps article { display: grid; gap: .25rem; padding: .75rem .85rem; border: 1px solid rgba(206, 0, 113, .3); border-radius: 14px; background: #fff; }
.scale-trainer__sharps strong { color: var(--color-primary); }
.scale-trainer__sharps small { color: var(--color-text-soft); }
.scale-trainer__sharps mark { padding: 0 .25rem; border-radius: 6px; background: #ce0071; color: #fff; font-weight: 800; }

/* Laboratorio de teoría */
.theory-lab { display: grid; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.theory-lab p { margin: 0; }
.theory-lab__intro { display: grid; gap: .35rem; line-height: 1.5; }
.theory-lab__tabs, .theory-lab__controls, .theory-lab__actions, .theory-lab__options { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.theory-lab__tabs button, .theory-lab__options button { padding: .45rem .8rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.theory-lab__tabs button[aria-selected="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.theory-lab__controls label { display: flex; gap: .35rem; align-items: center; color: var(--color-primary); font-weight: 700; }
.theory-lab__keys { display: flex; gap: 2px; overflow-x: auto; padding: 4px; border-radius: 10px; background: #1d1640; }
.theory-lab__white { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; flex: 1 0 1.9rem; height: 120px; padding-bottom: .3rem; border-radius: 0 0 6px 6px; background: #fff; font-size: .62rem; }
.theory-lab__white small { color: #6b6585; }
.theory-lab__white b, .theory-lab__black b { padding: .1rem .25rem; border-radius: 6px; background: #ce0071; color: #fff; font-size: .62rem; white-space: nowrap; }
.theory-lab__white.is-lit { background: linear-gradient(180deg, #fff 30%, #ffd6ec); }
.theory-lab__black { position: absolute; top: 0; right: -30%; z-index: 2; display: flex; align-items: flex-end; justify-content: center; width: 60%; height: 58%; padding-bottom: .25rem; border-radius: 0 0 4px 4px; background: #1d1640; }
.theory-lab__black.is-lit { background: #ce0071; }
.theory-lab__black.is-lit b { background: #fff; color: #ce0071; }
.theory-lab__desc { padding: .6rem .8rem; border-left: 3px solid var(--color-accent, #ce0071); border-radius: 0 12px 12px 0; background: #fff4fa; line-height: 1.5; }
.theory-lab__quiz { display: grid; gap: .45rem; padding: .8rem; border-radius: 14px; background: var(--surface-tint, #f6f1ff); }
.theory-lab__quiz-count, .theory-lab__feedback { color: var(--color-text-soft); font-size: .88rem; }
.theory-lab__options button.is-correct { border-color: #0b7a43; background: #e3f7ec; color: #0b7a43; }
.theory-lab__options button.is-wrong { border-color: #c4153c; background: #fde7ec; color: #c4153c; }
.theory-lab__circle { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, #fff 45%, var(--surface-tint, #f1eaff) 46%); }
.theory-lab__circle button { position: absolute; display: grid; place-items: center; width: 4.1rem; height: 3.1rem; margin: -1.55rem 0 0 -2.05rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 12px; background: #fff; color: var(--color-primary); font: inherit; cursor: pointer; }
.theory-lab__circle button strong { font-size: .8rem; }
.theory-lab__circle button small { color: var(--color-text-soft); font-size: .62rem; }
.theory-lab__circle button.is-active { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.theory-lab__circle button.is-active small { color: rgba(255,255,255,.8); }
.theory-lab__circle-center { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-text-soft); font-size: .8rem; font-weight: 800; text-align: center; }
/* Escalas a 2 octavas y con las dos manos */
.scale-motion { display: grid; gap: .7rem; margin: 1rem 0; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.scale-motion p, .scale-motion h4 { margin: 0; }
.scale-motion h4 { color: var(--color-primary); }
.scale-motion__controls, .scale-motion__modes, .scale-motion__actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.scale-motion__modes button { padding: .45rem .8rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.scale-motion__modes button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.scale-motion__scroll { overflow-x: auto; }
.scale-motion__table { border-collapse: separate; border-spacing: 3px; }
.scale-motion__table th { padding: .3rem .5rem; color: var(--color-primary); font-size: .8rem; text-align: left; white-space: nowrap; }
.scale-motion__table td { min-width: 2.4rem; padding: .3rem; border-radius: 10px; background: #fff; text-align: center; box-shadow: 0 0 0 1px rgba(104, 13, 191, .14) inset; }
.scale-motion__table td b { display: block; color: var(--color-primary); font-size: 1rem; }
.scale-motion__table td small { color: var(--color-text-soft); font-size: .68rem; }
.scale-motion__table td.is-current { background: #ce0071; }
.scale-motion__table td.is-current b, .scale-motion__table td.is-current small { color: #fff; }
.scale-motion__status { color: var(--color-text-soft); }
/* Gran pentagrama */
.grand-staff-lesson { display: grid; gap: .7rem; margin: 1rem 0; }
.grand-staff-lesson p, .grand-staff-lesson h4 { margin: 0; }
.grand-staff-lesson__intro { display: grid; gap: .45rem; padding: 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.grand-staff-lesson__intro h4 { color: var(--color-primary); }
.grand-staff { width: 100%; max-width: 640px; justify-self: center; border: 1px solid rgba(104, 13, 191, .14); border-radius: 16px; background: #fff; }
.grand-staff line { stroke: #2c2450; stroke-width: 2; }
.grand-staff__brace { stroke-width: 4; }
.grand-staff__clef { fill: #2c2450; font-size: 76px; font-family: "Noto Music", "Segoe UI Symbol", serif; }
.grand-staff__clef--fa { font-size: 60px; }
.grand-staff__band { cursor: pointer; }
.grand-staff__band rect { fill: transparent; }
.grand-staff__band:hover rect, .grand-staff__band:focus-visible rect { fill: rgba(87, 41, 255, .12); }
.grand-staff__band.is-selected rect { fill: rgba(206, 0, 113, .22); }
.grand-staff__band text { fill: #ce0071; font-size: 14px; font-weight: 800; }
.grand-staff__note { fill: #680dbf; }
.grand-staff-lesson__info, .grand-staff__feedback, .grand-staff__count { color: var(--color-text-soft); }
.grand-staff-lesson__quiz { display: grid; gap: .55rem; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.grand-staff__answers { display: flex; flex-wrap: wrap; gap: .4rem; }
.grand-staff__answers button { flex: 1 0 3.5rem; padding: .55rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 12px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.grand-staff__answers button.is-correct { border-color: #0b7a43; background: #e3f7ec; color: #0b7a43; }
.grand-staff__answers button.is-wrong { border-color: #c4153c; background: #fde7ec; color: #c4153c; }

/* Patrones de acompañamiento + escala */
.acc { display: grid; gap: .8rem; margin: 1rem 0; }
.acc p, .acc h4, .acc h5 { margin: 0; }
.acc__intro { display: grid; gap: .45rem; padding: 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.acc__intro h4, .acc__pattern h5 { color: var(--color-primary); }
.acc__patterns, .acc__steps, .acc__controls { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.acc__patterns button, .acc__steps button { padding: .5rem .9rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.acc__patterns button[aria-selected="true"], .acc__steps button[aria-selected="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.acc__pattern { display: grid; gap: .4rem; padding: 1rem; border: 2px solid rgba(206, 0, 113, .3); border-radius: 18px; background: linear-gradient(145deg, #fff, #fff0f8); line-height: 1.5; }
.acc__say span { color: var(--color-accent, #ce0071); font-weight: 800; }
.acc__lab { display: grid; gap: .65rem; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.acc__step-text { line-height: 1.5; }
.acc__grid-scroll { overflow-x: auto; }
.acc__grid { border-collapse: separate; border-spacing: 2px; }
.acc__grid th { padding: .2rem .35rem; color: var(--color-text-soft); font-size: .72rem; text-align: center; }
.acc__grid th.is-bar { color: var(--color-primary); box-shadow: -2px 0 0 #2c2450; }
.acc__grid th[scope="row"] { color: var(--color-primary); font-size: .8rem; text-align: left; white-space: nowrap; }
.acc__grid td { min-width: 2.3rem; padding: .3rem .2rem; border-radius: 8px; background: #fff; color: var(--color-primary); font-size: .72rem; font-weight: 800; line-height: 1.15; text-align: center; box-shadow: 0 0 0 1px rgba(104, 13, 191, .14) inset; }
.acc__row--lh td { background: #f1ecff; }
.acc__grid td.is-rest { color: var(--color-text-soft); }
.acc__grid .is-on { background: #ce0071 !important; color: #fff !important; }
.acc__meter { color: var(--color-text-soft); font-size: .82rem; }
.acc__keys { display: flex; gap: 2px; overflow-x: auto; padding: 4px; border-radius: 10px; background: #1d1640; }
.acc__key { display: grid; align-content: end; justify-items: center; flex: 1 0 2rem; height: 84px; padding-bottom: .3rem; border-radius: 0 0 6px 6px; background: #fff; color: #6b6585; font-size: .66rem; font-weight: 700; }
.acc__key--lh.is-on { background: linear-gradient(180deg, #fff 20%, #b9a6ff); color: #3d1fb8; }
.acc__key--rh.is-on { background: linear-gradient(180deg, #fff 20%, #ff9fcf); color: #8a0a50; }
.acc__feedback { color: var(--color-text-soft); }

/* Corcheas unidas por barra (Motivos rítmicos desde el Nivel 3) */
.motif__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: 2 1 0; min-width: 0; align-self: stretch; align-items: end; }
.motif__pair svg { position: absolute; left: 50%; bottom: .2rem; width: 52px; height: 52px; transform: translateX(-50%); fill: #2c2450; pointer-events: none; }
.motif__pair-hit { height: 100%; min-height: 56px; }
.motif__beams { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem; border: 2px solid rgba(206, 0, 113, .3); border-radius: 18px; background: linear-gradient(145deg, #fff, #fff0f8); line-height: 1.5; }
.motif__beams p { margin: 0 0 .35rem; }
.motif__beams-pics { display: flex; gap: .5rem; align-items: center; color: #2c2450; font-size: 2rem; }
.motif__beams-pics b { color: var(--color-accent, #ce0071); font-size: 1.3rem; }
.motif__beams-joined { position: relative; display: inline-flex; width: 60px; height: 60px; }
.motif__beams-joined .motif__pair { width: 60px; height: 60px; }
.motif__beams-joined .motif__pair-hit { display: none; }
@media (max-width: 560px) { .motif__beams { grid-template-columns: 1fr; } }

/* Cuaderno Musicala: Primeros pasos en el pentagrama */
.mb { display: grid; gap: .8rem; margin: 1rem 0; }
.mb p, .mb h4, .mb h5 { margin: 0; }
.mb__intro { display: grid; gap: .45rem; padding: 1rem; border-radius: 17px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.mb__intro h4, .mb__piece h5 { color: var(--color-primary); }
.mb__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .4rem; }
.mb__list button { display: grid; gap: .1rem; padding: .5rem .65rem; border: 1px solid rgba(87, 41, 255, .2); border-radius: 12px; background: #fff; color: var(--color-primary); font: inherit; font-size: .82rem; font-weight: 800; text-align: left; cursor: pointer; }
.mb__list button small { color: var(--color-text-soft); font-size: .66rem; }
.mb__list button.is-done { border-color: #0b7a43; background: #e3f7ec; }
.mb__list button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.mb__list button[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }
.mb__piece { display: grid; gap: .65rem; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.mb__new { padding: .5rem .7rem; border-left: 3px solid var(--color-accent, #ce0071); border-radius: 0 10px 10px 0; background: #fff4fa; }
.mb__steps, .mb__controls { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.mb__steps button { padding: .45rem .8rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 999px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.mb__steps button[aria-selected="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.mb__step-text, .mb__tip, .mb__feedback { line-height: 1.5; }
.mb__feedback { color: var(--color-text-soft); }
.mb__score { display: grid; gap: .3rem; padding: .5rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .12) inset; }
.mb-score { width: 100%; height: auto; }
.mb-staff, .mb-ledger { stroke: #2c2450; stroke-width: 1.3; }
.mb-clef { fill: #2c2450; font-size: 50px; font-family: "Noto Music", "Segoe UI Symbol", serif; }
.mb-clef--fa { font-size: 36px; }
.mb-meter { fill: #2c2450; font-size: 17px; font-weight: 900; font-family: Georgia, serif; text-anchor: middle; }
.mb-note ellipse.is-filled { fill: #2c2450; }
.mb-note ellipse.is-open { fill: #fff; stroke: #2c2450; stroke-width: 2; }
.mb-note--r ellipse.is-filled { fill: #b0157a; }
.mb-note--r ellipse.is-open { stroke: #b0157a; }
.mb-note--l ellipse.is-filled { fill: #4a2bd0; }
.mb-note--l ellipse.is-open { stroke: #4a2bd0; }
.mb-stem { stroke: #2c2450; stroke-width: 1.6; }
.mb-dot { fill: #2c2450; }
.mb-finger { fill: #6b6585; font-size: 10px; font-weight: 800; text-anchor: middle; }
.mb-name { fill: #ce0071; font-size: 9px; font-weight: 800; text-anchor: middle; }
.mb-rest { fill: #2c2450; font-size: 22px; font-family: "Noto Music", "Segoe UI Symbol", serif; }
.mb-rest-box { fill: #2c2450; }
.mb-tie { fill: none; stroke: #2c2450; stroke-width: 1.4; }
.mb-score .is-on ellipse.is-filled, .mb-score .is-on ellipse.is-open { fill: #ffc400; stroke: #ce0071; }
.mb-score text.is-on, .mb-score rect.is-on { fill: #ce0071; }
.mb__toggle { display: inline-flex; gap: .35rem; align-items: center; font-weight: 700; }
/* Patrones móviles (Experiencia XV) */
.moving-patterns__explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin: 1rem 0; }
.moving-patterns__card { display: grid; gap: .55rem; align-content: start; padding: 1rem; border-radius: 18px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.moving-patterns__card h4, .moving-patterns__card p { margin: 0; }
.moving-patterns__card h4 { color: var(--color-primary); }
.moving-patterns__card ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.moving-patterns__walk { list-style: none; padding: 0 !important; }
.moving-patterns__walk li { display: flex; gap: .55rem; align-items: center; }
.moving-patterns__walk b { flex: 0 0 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--color-primary); }
.moving-patterns__accent { color: #ce0071; font-weight: 800; }
.moving-patterns__figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.moving-patterns__figures span { display: grid; gap: .1rem; padding: .5rem; border-radius: 12px; background: #fff; }
.moving-patterns__figures small { color: var(--color-text-soft); }
.moving-patterns__figures code { font-size: .78rem; color: #680dbf; }
.moving-patterns__hint { padding: .5rem .7rem; border-radius: 12px; background: #fff4fa; font-size: .9rem; }
.moving-patterns { display: grid; gap: .7rem; margin: 1rem 0; padding: 1rem; border: 2px solid rgba(206, 0, 113, .22); border-radius: 22px; background: linear-gradient(145deg, #fff, #fbf5ff); }
.moving-patterns p, .moving-patterns h4 { margin: 0; }
.moving-patterns h4 { color: var(--color-primary); }
.moving-patterns__levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .4rem; }
.moving-patterns__levels button { display: grid; gap: .1rem; padding: .5rem .7rem; border: 1px solid rgba(87, 41, 255, .25); border-radius: 14px; background: #fff; color: var(--color-primary); font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.moving-patterns__levels button small { color: #ce0071; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.moving-patterns__levels button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.moving-patterns__levels button[aria-pressed="true"] small { color: #fff; }
.moving-patterns__controls, .moving-patterns__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.moving-patterns__controls label { display: grid; gap: .15rem; font-size: .8rem; font-weight: 700; color: var(--color-text-soft); }
.moving-patterns__instruction { padding: .7rem .9rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .14) inset; }
.moving-patterns__scroll { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .3rem; }
.moving-patterns__pos { flex: 0 0 auto; display: grid; gap: .25rem; padding: .5rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .14) inset; }
.moving-patterns__pos h5 { margin: 0; font-size: .72rem; color: var(--color-primary); }
.moving-patterns__pos em { font-style: normal; font-size: .68rem; font-weight: 800; color: var(--color-text-soft); }
.moving-patterns__map { display: flex; gap: 2px; }
.moving-patterns__map span { display: grid; min-width: 2.1rem; padding: .2rem; border-radius: 8px; background: var(--surface-tint, #f6f1ff); text-align: center; }
.moving-patterns__map b { color: var(--color-primary); }
.moving-patterns__map small { font-size: .66rem; color: var(--color-text-soft); }
.moving-patterns__pos.is-current { background: #ce0071; }
.moving-patterns__pos.is-current h5, .moving-patterns__pos.is-current em { color: #fff; }
.moving-patterns__status { color: var(--color-text-soft); }
/* Cuaderno "Cifrado y ritmo" (Experiencia XV) */
.kb__part { display: grid; gap: .35rem; }
.kb__part-title { font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #ce0071; }
.kb__source { color: var(--color-text-soft); font-size: .85rem; font-style: italic; }
.kb__style { padding: .5rem .7rem; border-radius: 12px; background: var(--surface-tint, #f6f1ff); }
.kb__chords { display: flex; flex-wrap: wrap; gap: .6rem; }
.kb-chord { margin: 0; display: grid; gap: .2rem; padding: .5rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .14) inset; }
.kb-chord figcaption { color: var(--color-primary); font-size: .85rem; }
.kb-chord figcaption strong { font-size: 1.05rem; margin-right: .2rem; }
.kb-chord svg { width: 210px; height: auto; }
.kb-chord small { color: var(--color-text-soft); font-size: .72rem; }
.kb-white { fill: #fff; stroke: #2c2450; stroke-width: .8; }
.kb-white.is-on { fill: #ffd1ea; }
.kb-black { fill: #2c2450; }
.kb-black.is-on { fill: #ce0071; }
.kb-finger { fill: #680dbf; font-size: 9px; font-weight: 900; text-anchor: middle; }
.kb-finger--black { fill: #fff; }
.kb-chord-symbol { fill: #680dbf; font-size: 15px; font-weight: 900; font-family: Georgia, serif; }
.kb-acc { fill: #2c2450; font-size: 18px; font-family: "Noto Music", "Segoe UI Symbol", serif; }
.kb-acc--note { font-size: 16px; }
.kb-beam { stroke: #2c2450; stroke-width: 5; }
.kb-flag { fill: none; stroke: #2c2450; stroke-width: 1.8; }
.kb-final { stroke-width: 3; }
.kb-score .mb-stem { stroke-width: 2; }
.kb-score .mb-ledger { stroke-width: 1.8; }
.kb-score .mb-clef { font-size: 58px; }
/* Solfeo hablado (Experiencia XVI) */
.sh__now { justify-self: center; min-width: 9rem; padding: .4rem 1.2rem; border-radius: 18px; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; font-size: 2.2rem; font-weight: 900; text-align: center; }
.sh__now.is-rest { background: #e9e5f2; color: var(--color-text-soft); font-size: 1.3rem; }
.sh__tips { padding: .6rem .8rem; border-radius: 12px; background: var(--surface-tint, #f6f1ff); line-height: 1.5; }
.sh__warn { color: #9a3b00; font-weight: 700; }
/* Melodías a dos manos (Experiencia XVI) */
.pb-score .mb-stem { stroke-width: 2; }
.pb-score .mb-ledger { stroke-width: 1.8; }
.pb-score .pb-clef { font-size: 58px; }
.pb-score .mb-note--r.is-on ellipse, .pb-score .mb-note--l.is-on ellipse { fill: #ffc400; stroke: #ce0071; }
/* Hanon con groove (Experiencia XVIII) */
.gh__chords { display: flex; flex-wrap: wrap; gap: .3rem; }
.gh__chords span { min-width: 2.4rem; padding: .25rem .5rem; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .16) inset; color: var(--color-primary); font-weight: 900; text-align: center; }
.gh__chords span.is-on { background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.pb-tuplet { fill: #2c2450; font-size: 11px; font-weight: 800; font-style: italic; text-anchor: middle; }
.mb__steps button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.st__row { display: grid; gap: .3rem; }
/* Visor de escalas: teclado, partitura, notas y tabla */
.scale-motion__views { align-items: center; }
.scale-motion__view { display: grid; gap: .5rem; }
.sm-kb__wrap { overflow-x: auto; padding-bottom: .2rem; }
.sm-kb { width: 100%; min-width: 560px; height: auto; }
.sm-kb__white { fill: #fff; stroke: #2c2450; stroke-width: 1; }
.sm-kb__black { fill: #241b3d; }
.sm-kb__white.is-right { fill: #ffd8ee; }
.sm-kb__white.is-left { fill: #e3dbff; }
.sm-kb__white.is-both { fill: #f3d6ff; }
.sm-kb__black.is-right { fill: #ce0071; }
.sm-kb__black.is-left { fill: #5729ff; }
.sm-kb__black.is-both { fill: #8a2bd1; }
.sm-kb__white.is-cross, .sm-kb__black.is-cross { stroke: #ffb300; stroke-width: 3; }
[data-motion-key].is-current rect { fill: #ffc400; }
.sm-kb__finger { font-size: 12px; font-weight: 900; text-anchor: middle; }
.sm-kb__f--right { fill: #b0157a; color: #b0157a; }
.sm-kb__f--left { fill: #4a2bd0; color: #4a2bd0; }
.sm-kb__finger.is-on-black tspan { fill: #fff; }
.sm-kb__name { fill: #2c2450; font-size: 9px; font-weight: 700; text-anchor: middle; }
.sm-kb__name.is-on-black { fill: #fff; font-size: 7px; }
.sm-legend { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--color-text-soft); font-size: .85rem; }
.sm-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 4px; }
.sm-dot--right { background: #ffd8ee; border: 1px solid #ce0071; }
.sm-dot--left { background: #e3dbff; border: 1px solid #5729ff; }
.sm-dot--cross { background: #fff; border: 3px solid #ffb300; }
.sm-notes { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.sm-notes__note { display: grid; justify-items: center; min-width: 3.4rem; padding: .45rem .35rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .16) inset; }
.sm-notes__note small { color: #ce0071; font-weight: 900; }
.sm-notes__note strong { color: var(--color-primary); font-size: 1.1rem; }
.sm-notes__note span b { font-size: .8rem; }
.sm-notes__gap { padding: .15rem .4rem; border-radius: 999px; background: var(--surface-tint, #f6f1ff); color: var(--color-primary); font-size: .72rem; font-weight: 900; }
.sm-notes__gap.is-semi { background: #ce0071; color: #fff; }
.scale-motion__table td.is-cross { box-shadow: 0 0 0 2px #ffb300 inset; }
.pb-score .is-current ellipse { fill: #ffc400; stroke: #ce0071; }
/* Modo reto: se ocultan nombres y dedos; al sonar, la nota actual los muestra. */
.scale-motion.is-challenge .sm-kb__finger, .scale-motion.is-challenge .sm-kb__name,
.scale-motion.is-challenge .sm-notes__note strong, .scale-motion.is-challenge .sm-notes__note span,
.scale-motion.is-challenge .scale-motion__table td b, .scale-motion.is-challenge .scale-motion__table td small { visibility: hidden; }
.scale-motion.is-challenge .is-current .sm-kb__finger, .scale-motion.is-challenge .is-current .sm-kb__name,
.scale-motion.is-challenge td.is-current b, .scale-motion.is-challenge td.is-current small { visibility: visible; }
/* Lector rítmico */
.rr__counts { display: flex; flex-wrap: wrap; gap: .35rem; }
.rr__counts span { display: grid; gap: .05rem; padding: .35rem .6rem; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .14) inset; color: var(--color-primary); font-weight: 900; letter-spacing: .04em; }
.rr__counts span small { color: var(--color-text-soft); font-size: .65rem; font-weight: 700; letter-spacing: 0; }
.rr__counts span.is-on { background: linear-gradient(135deg, #680dbf, #ce0071); color: #fff; }
.rr__counts span.is-on small { color: rgba(255, 255, 255, .8); }
/* Dúos a 4 manos */
.du__parts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.du__tag { padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 900; }
.du__tag--primo { background: #ffd8ee; color: #b0157a; }
.du__tag--secondo { background: #e3dbff; color: #4a2bd0; }
/* Laboratorio de lead sheets */
.jz__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.jz__card { display: grid; gap: .25rem; padding: .7rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .14) inset; }
.jz__card p { margin: 0; }
.jz__card strong { color: var(--color-primary); font-size: 1.2rem; font-family: Georgia, serif; }
.jz__card small { color: var(--color-text-soft); }
.jz__scale em { font-style: normal; font-weight: 900; color: #ce0071; }
.jz__now { display: grid; gap: .15rem; padding: .7rem 1rem; border-radius: 16px; background: linear-gradient(135deg, #2c1a5c, #680dbf); color: #fff; }
.jz__now span { font-size: .75rem; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.jz__now strong { font-size: 1.8rem; font-family: Georgia, serif; }
.jz__now small { opacity: .9; }
.inv__seq { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.inv__seq > span[data-inv-step] { display: grid; justify-items: center; gap: .05rem; min-width: 5.5rem; padding: .45rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(104, 13, 191, .16) inset; }
.inv__seq b { font-size: 1.3rem; color: var(--color-primary); }
.inv__seq small, .inv__seq i { font-size: .7rem; color: var(--color-text-soft); font-style: normal; }
.inv__seq em { font-style: normal; font-weight: 800; color: #ce0071; font-size: .85rem; }
.inv__seq > span.is-on { background: linear-gradient(135deg, #680dbf, #ce0071); }
.inv__seq > span.is-on * { color: #fff; }
.inv__arrow { color: var(--color-text-soft); }
/* Pentagrama de once líneas */
.els-box { display: grid; gap: .5rem; padding: 1rem; border-radius: 18px; background: var(--surface-tint, #f6f1ff); }
.els-box h4, .els-box p { margin: 0; }
.els-box h4 { color: var(--color-primary); }
.els__scroll { overflow-x: auto; background: #fff; border-radius: 14px; }
.els { width: 100%; min-width: 760px; height: auto; }
.els__line { stroke: #2c2450; stroke-width: 1.3; }
.els__mid { stroke: #ce0071; stroke-width: 1.6; stroke-dasharray: 6 4; }
.els__clef { fill: #2c2450; font-size: 52px; font-family: "Noto Music", "Segoe UI Symbol", serif; }
.els__clef--fa { font-size: 36px; }
.els__clef--do { fill: #ce0071; font-size: 30px; }
.els__note { cursor: pointer; }
.els__note ellipse { fill: #4a2bd0; }
.els__note text { fill: var(--color-text-soft); font-size: 9px; font-weight: 800; text-anchor: middle; }
.els__note.is-on ellipse { fill: #ffc400; stroke: #ce0071; stroke-width: 2; }
.els__note.is-on text { fill: #ce0071; }
.els__ref { display: flex; flex-wrap: wrap; gap: .4rem; }
.els__ref span { padding: .25rem .6rem; border-radius: 999px; background: #fff; font-size: .8rem; font-weight: 700; color: var(--color-primary); }
.pl__moves { display: grid; gap: .35rem; margin: 0; padding-left: 1rem; line-height: 1.45; }
.pl__moves em { color: var(--color-text-soft); font-style: normal; }
.pl__tag { padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 900; color: #fff; }
.pl__tag--strong { background: #0b7a43; } .pl__tag--mid { background: #680dbf; } .pl__tag--weak { background: #ce0071; }

/* Vista simple: solo lo esencial. La vista completa (data-view="full") muestra todo. */
.view-mode-note { margin: 0; text-align: center; font-size: .9rem; }
:root[data-view="full"] .view-mode-note { display: none; }
:root[data-view="simple"] :is(
  .piano-dashboard .guide,
  .piano-dashboard .route-start,
  .piano-dashboard .route-overview,
  .piano-dashboard .route-map-disclosure,
  .piano-dashboard .route-storage-note,
  .piano-dashboard .review-shelf,
  .piano-dashboard .taller-entry--game,
  .route-hero__link,
  .experience-about,
  .experience-header__note,
  .step-card__meta,
  .content-tip,
  .rhythm-lesson__why
) { display: none; }
.view-check { flex-wrap: wrap; border: 1px solid rgba(104, 13, 191, 0.18); background: linear-gradient(90deg, #fff0fa, #f1eaff); color: var(--color-primary); }
.view-check__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* En la vista simple cada paso queda en imagen, una o dos frases y el ejercicio. */
:root[data-view="simple"] .simple-extra,
:root[data-view="full"] .simple-more { display: none; }
.simple-more { display: block; margin: 0.75rem auto 0; text-align: center; font-size: 0.9rem; }
/* Vista simple: menos texto alrededor del ejercicio. Lo ocultado sigue en la vista completa. */
:root[data-view="simple"] :is(
  .experience-stage__hint,
  .practice-resource__intro > p:not(.eyebrow),
  .practice-resource .eyebrow,
  .goal-plan__step:nth-child(2),
  .goal-plan__note,
  .step-card [class$="__head"] > p:not(.eyebrow),
  .step-card > p.muted,
  .practice-list > li:nth-child(n+4),
  .goal-plan__list > li:nth-child(n+4)
) { display: none; }
:root[data-view="simple"] .step-card .practice-lead { font-size: 1.05rem; }
/* Vista simple estilo "mira y haz": el video va grande arriba y abre sonando. */
:root[data-view="full"] .simple-only { display: none; }
.simple-video { position: relative; display: block; overflow: hidden; margin: 0.75rem 0 1rem; border-radius: 18px; background: #100c18; box-shadow: 0 12px 36px rgba(34, 10, 99, 0.18); }
.simple-video img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.simple-video__play { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 84px; height: 60px; border-radius: 18px; transform: translate(-50%, -50%); background: #e62117; color: #fff; font-size: 1.9rem; box-shadow: 0 5px 24px rgba(0,0,0,.35); transition: transform .18s ease; }
.simple-video:hover .simple-video__play { transform: translate(-50%, -50%) scale(1.08); }
.simple-video__label { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(16, 12, 24, 0.78); color: #fff; font-weight: 800; font-size: 0.9rem; }
:root[data-view="simple"] .practice-lead { padding: 0.8rem 1rem; border-radius: 14px; background: #f1eaff; color: var(--color-primary); font-weight: 700; }
:root[data-view="simple"] .practice-lead::before { content: "🎹 Haz esto: "; }
:root[data-theme="dark"][data-view="simple"] .practice-lead { background: rgba(104, 13, 191, 0.25); color: var(--color-text); }
/* Clips cortos en bucle (vista simple y completa). Pueden ser verticales: se limita la altura. */
.simple-clips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0.75rem 0 1rem; }
.simple-clip { margin: 0; display: grid; gap: 0.4rem; justify-items: center; }
.simple-clip video { display: block; max-width: 100%; max-height: min(62vh, 520px); border-radius: 18px; background: #f1eaff; box-shadow: 0 12px 36px rgba(34, 10, 99, 0.18); }
.simple-clip figcaption { font-weight: 700; color: var(--color-primary); text-align: center; }
:root[data-theme="dark"] .simple-clip figcaption { color: var(--color-text); }
/* Varios clips: cuadrícula de 2 en el celular y hasta 4 en pantalla grande. */
.simple-clips:has(.simple-clip + .simple-clip) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
@media (min-width: 720px) { .simple-clips:has(.simple-clip + .simple-clip) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.simple-clip { min-width: 0; }
.warmup-along { display: grid; gap: 0.8rem; margin-bottom: 1rem; }
.warmup-along .simple-clips { margin-bottom: 0; }
.warmup-along .simple-clip { transition: opacity .25s ease, transform .25s ease; }
.warmup-along .simple-clip video { transition: box-shadow .25s ease; }
.warmup-along .simple-clip.is-current { transform: translateY(-4px); }
.warmup-along .simple-clip.is-current video { box-shadow: 0 0 0 4px #8f4bff, 0 14px 36px rgba(104, 13, 191, 0.3); }
.warmup-along .simple-clip.is-done { opacity: 0.55; }
.warmup-along .simple-clip.is-done figcaption::before { content: "✓ "; color: #0b7a43; }
.warmup-along__bar { display: grid; justify-items: center; gap: 0.5rem; max-width: 520px; width: 100%; margin-inline: auto; text-align: center; }
.warmup-along__bar p { margin: 0; color: var(--color-primary); }
.warmup-along__bar strong { font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.warmup-along__progress { width: 100%; height: 8px; border-radius: 999px; background: #e7dff5; overflow: hidden; }
.warmup-along__progress i { display: block; height: 100%; background: linear-gradient(90deg, #8f4bff, #ce0071); transition: width 1s linear; }
.warmup-along__video { display: flex; align-items: center; justify-content: center; gap: 0.6rem; color: var(--color-text-soft); text-decoration: none; font-size: 0.92rem; }
.warmup-along__video img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.warmup-along__video strong { color: var(--color-primary); text-decoration: underline; }
.simple-clips:has(.simple-clip + .simple-clip) .simple-clip video { width: 100%; max-height: none; aspect-ratio: 9 / 16; object-fit: cover; }
.simple-clips:has(.simple-clip + .simple-clip) figcaption { font-size: 0.85rem; line-height: 1.3; }
/* Clip con pulso: tiempos 1-2-3-4 abajo, sobre el video. */
.simple-clip__frame { position: relative; display: block; max-width: 100%; }
.pulse-overlay { position: absolute; inset: 0; pointer-events: none; }
.pulse-dots { position: absolute; left: 0; right: 0; bottom: 0.9rem; display: flex; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pulse-dots li { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.75); color: #220a63; font-weight: 900; font-size: 1.1rem; transition: transform .12s ease, background .12s ease; }
.pulse-dots li.is-on { background: #680dbf; color: #fff; }
.pulse-dots li.is-hit { transform: scale(1.25); background: #ce0071; }
/* Animación "encuentra los Do": 9 s en bucle, una parada por cada Do. */
.do-anim { margin: 0.75rem 0 1rem; padding: 2.4rem 0.75rem 0.9rem; border-radius: 18px; background: linear-gradient(180deg, #f6f0ff, #fff); box-shadow: 0 12px 36px rgba(34, 10, 99, 0.12); }
.do-anim__keys { position: relative; display: grid; grid-template-columns: repeat(var(--whites), 1fr); height: clamp(120px, 34vw, 190px); }
.do-anim__white { position: relative; border: 1px solid #c9c2d6; border-left: 0; border-radius: 0 0 6px 6px; background: #fff; }
.do-anim__white:first-child { border-left: 1px solid #c9c2d6; }
.do-anim__white b { position: absolute; left: 50%; top: -1.9rem; transform: translateX(-50%) scale(0.6); padding: 0.1rem 0.45rem; border-radius: 999px; background: #ce0071; color: #fff; font-size: 0.85rem; opacity: 0; white-space: nowrap; }
.do-anim__black { position: absolute; top: 0; left: var(--at); width: calc(100% / var(--whites) * 0.62); height: 60%; transform: translateX(-50%); border-radius: 0 0 4px 4px; background: #1d1626; }
.do-anim__hand { position: absolute; bottom: -0.35rem; left: calc(100% / var(--whites) * 0.5); transform: translateX(-50%); font-size: clamp(1.6rem, 6vw, 2.4rem); animation: do-anim-hand 9s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.do-anim figcaption { margin-top: 0.8rem; text-align: center; font-weight: 700; color: var(--color-primary); }
@keyframes do-anim-hand {
  0%, 18% { left: calc(100% / 21 * 0.5); opacity: 1; }
  33%, 51% { left: calc(100% / 21 * 7.5); }
  66%, 86% { left: calc(100% / 21 * 14.5); opacity: 1; }
  94% { left: calc(100% / 21 * 14.5); opacity: 0; }
  95% { left: calc(100% / 21 * 0.5); opacity: 0; }
  100% { left: calc(100% / 21 * 0.5); opacity: 1; }
}
.do-anim__white--stop0 { animation: do-anim-key0 9s infinite; } .do-anim__white--stop0 b { animation: do-anim-tag0 9s infinite; }
.do-anim__white--stop1 { animation: do-anim-key1 9s infinite; } .do-anim__white--stop1 b { animation: do-anim-tag1 9s infinite; }
.do-anim__white--stop2 { animation: do-anim-key2 9s infinite; } .do-anim__white--stop2 b { animation: do-anim-tag2 9s infinite; }
.do-anim__black--pair0 { animation: do-anim-pair0 9s infinite; } .do-anim__black--pair1 { animation: do-anim-pair1 9s infinite; } .do-anim__black--pair2 { animation: do-anim-pair2 9s infinite; }
@keyframes do-anim-key0 { 0%, 1% { background: #fff; } 3%, 92% { background: #ffd6ec; } 97%, 100% { background: #fff; } }
@keyframes do-anim-key1 { 0%, 33% { background: #fff; } 35%, 92% { background: #ffd6ec; } 97%, 100% { background: #fff; } }
@keyframes do-anim-key2 { 0%, 66% { background: #fff; } 68%, 92% { background: #ffd6ec; } 97%, 100% { background: #fff; } }
@keyframes do-anim-tag0 { 0%, 1% { opacity: 0; transform: translateX(-50%) scale(0.6); } 4%, 92% { opacity: 1; transform: translateX(-50%) scale(1); } 97%, 100% { opacity: 0; } }
@keyframes do-anim-tag1 { 0%, 33% { opacity: 0; transform: translateX(-50%) scale(0.6); } 36%, 92% { opacity: 1; transform: translateX(-50%) scale(1); } 97%, 100% { opacity: 0; } }
@keyframes do-anim-tag2 { 0%, 66% { opacity: 0; transform: translateX(-50%) scale(0.6); } 69%, 92% { opacity: 1; transform: translateX(-50%) scale(1); } 97%, 100% { opacity: 0; } }
@keyframes do-anim-pair0 { 0%, 1%, 20%, 100% { background: #1d1626; } 3%, 18% { background: #680dbf; } }
@keyframes do-anim-pair1 { 0%, 33%, 53%, 100% { background: #1d1626; } 35%, 51% { background: #680dbf; } }
@keyframes do-anim-pair2 { 0%, 66%, 88%, 100% { background: #1d1626; } 68%, 86% { background: #680dbf; } }
@media (prefers-reduced-motion: reduce) { .do-anim__hand { animation: none; display: none; } .do-anim__white--do { background: #ffd6ec; animation: none; } .do-anim__white--do b { opacity: 1; animation: none; transform: translateX(-50%); } }
:root[data-theme="dark"] .do-anim { background: var(--color-surface-soft); }
:root[data-theme="dark"] .do-anim figcaption { color: var(--color-text); }
/* Iniciación al ritmo: figuras con su gesto, sin pentagrama. */
.ri { display: grid; gap: 1rem; margin: 1rem 0; padding: 1.1rem; border: 1px solid rgba(206, 0, 113, 0.18); border-radius: 22px; background: linear-gradient(180deg, #fff7fb, #fff); }
.song-keys { position: relative; display: grid; grid-template-columns: repeat(var(--keys), 1fr); width: min(100%, 520px); height: 120px; margin: 0.9rem auto 0.4rem; }
.song-keys__white { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding-bottom: 6px; border: 1px solid #c9c2d6; border-radius: 0 0 8px 8px; background: #fff; color: #b3a9c4; font-size: 0.75rem; transition: background .12s ease, transform .12s ease; }
.song-keys__white b { font-weight: 700; }
.song-keys__white.is-used { color: var(--color-primary); }
.song-keys__white.is-used b { font-weight: 900; }
.song-keys__white i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ede6fa; color: var(--color-primary); font-style: normal; font-weight: 800; font-size: 0.72rem; }
.song-keys__black { position: absolute; top: 0; width: calc(100% / var(--keys) * 0.6); height: 60%; transform: translateX(-50%); border-radius: 0 0 5px 5px; background: #1d1626; z-index: 1; transition: background .12s ease; }
.song-keys__white.is-left { background: #efe6ff; }
.song-keys__white.is-left i { background: #680dbf; color: #fff; }
.song-keys__white.is-right { background: #ffe8f4; }
.song-keys__white.is-right i { background: #ce0071; color: #fff; }
.hp-fingers__legend { margin: 0.2rem 0 0; text-align: center; font-size: 0.88rem; font-weight: 700; color: var(--color-primary); }
.hp-fingers__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.hp-fingers__dot--left { background: #680dbf; }
.hp-fingers__dot--right { background: #ce0071; }
.song-keys .is-current {background: #8f4bff; color: #fff; transform: translateY(2px); }
.song-keys .song-keys__white.is-current b { color: #fff; }
.song-keys .is-wrong { background: #ffc9e3; }
.song-keys .song-keys__black.is-current { background: #8f4bff; }
.ri-why {display: grid; gap: 0.6rem; margin: 1rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.ri-why h4 { margin: 0.3rem 0 0; color: var(--color-primary); }
.ri-why p { margin: 0; }
.ri-why__bars { display: grid; gap: 0.45rem; max-width: 560px; }
.ri-why__bar { display: grid; grid-template-columns: 11rem 1fr; align-items: center; gap: 0.6rem; }
.ri-why__name { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.92rem; }
.ri-why__name img { width: 22px; height: 22px; }
.ri-why__cells { display: flex; gap: 4px; }
.ri-why__cells i { flex: 1; display: grid; place-items: center; height: 26px; border-radius: 8px; background: #8f4bff; color: #fff; font-style: normal; font-weight: 800; font-size: 0.85rem; }
.ri-why__bar--pulse .ri-why__cells i { background: #ede6fa; color: var(--color-primary); }
.ri-why__math { font-weight: 700; color: var(--color-primary); }
.ri-why__how { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
@media (max-width: 560px) { .ri-why__bar { grid-template-columns: 1fr; gap: 0.2rem; } }
.ri__intro h4 { margin: 0.1rem 0; }
.ri__intro p:not(.eyebrow) { margin: 0.2rem 0 0; }
.ri__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.ri__card { display: grid; gap: 0.5rem; padding: 0.75rem; border-radius: 18px; background: #fff; box-shadow: 0 6px 20px rgba(34, 10, 99, 0.08); }
.ri__card-gesture { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 14px; background: #f6f0ff; }
.ri__card-head { display: flex; align-items: center; gap: 0.5rem; }
.ri__card-head img { width: 34px; height: 46px; object-fit: contain; }
.ri__card-head strong { display: block; font-size: 1.1rem; color: var(--color-primary); }
.ri__card-head span { font-weight: 800; color: #ce0071; }
.ri__card p { margin: 0; font-size: 0.92rem; }
.ri__numbers { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ri__numbers button { width: 42px; height: 42px; border: 1px solid #d9cdee; border-radius: 50%; background: #fff; font-weight: 900; color: var(--color-primary); cursor: pointer; }
.ri__numbers button[aria-pressed="true"] { background: #680dbf; border-color: #680dbf; color: #fff; }
.ri__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.ri__bar { display: flex; gap: 0.3rem; padding: 0.4rem; border-left: 3px solid #220a63; }
.ri__bar:last-child { border-right: 3px solid #220a63; }
.ri__tile { flex: var(--beats) 1 0; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 0.2rem; padding: 0.4rem 0.2rem; border-radius: 14px; background: #fff; box-shadow: 0 3px 10px rgba(34, 10, 99, 0.08); transition: transform .12s ease, background .12s ease; }
.ri__tile.is-on { background: #ffd6ec; transform: translateY(-3px); }
.ri__glyph { width: 100%; max-width: 34px; height: 46px; object-fit: contain; }
.ri__gesture { width: 100%; max-width: 64px; aspect-ratio: 1; object-fit: contain; }
.ri__tile small { font-size: 0.7rem; font-weight: 800; color: var(--color-primary); text-align: center; }
.ri__beats { display: flex; justify-content: space-around; width: 100%; }
.ri__beats span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f1eaff; font-size: 0.75rem; font-weight: 900; color: #220a63; transition: transform .1s ease; }
.ri__beats span.is-on { background: #ce0071; color: #fff; transform: scale(1.2); }
.ri__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ri__modes { display: flex; gap: 0.3rem; }
.ri__modes button { padding: 0.5rem 0.9rem; border: 1px solid #d9cdee; border-radius: 999px; background: #fff; font-weight: 800; color: var(--color-primary); cursor: pointer; }
.ri__modes button[aria-pressed="true"] { background: #220a63; color: #fff; }
.ri__feedback { margin: 0; font-weight: 700; color: var(--color-primary); }
@media (max-width: 640px) {
  .ri__cards { grid-template-columns: 1fr; }
  .ri__card { grid-template-columns: 96px 1fr; align-items: center; }
  .ri__card-gesture { grid-row: span 2; }
  .ri__row { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .ri { background: var(--color-surface-soft); }
:root[data-theme="dark"] :is(.ri__card, .ri__tile, .ri__numbers button, .ri__modes button) { background: var(--color-surface); color: var(--color-text); }
:root[data-theme="dark"] .ri__tile.is-on { background: rgba(206, 0, 113, 0.35); }

/* Suscripción en la lista y la ficha del estudiante. */
.admin-subscription { margin: 0.2rem 0 0; font-weight: 700; color: var(--color-text-soft); }
small.admin-subscription { display: block; }
.admin-subscription--ok { color: #0b7a43; }
.admin-subscription--soon { color: #b45d00; }
.admin-subscription--expired { color: #ce0071; }
.preview-banner { flex-wrap: wrap; } .preview-banner label + label { margin-left: 0; }

/* =========================================================
   MODO NIÑOS · Musicalitos y Musikids
   Paleta alegre, letra redondeada, botones grandes y emojis.
   ========================================================= */
:root[data-kids="true"] {
  --kids-yellow: #ffc83d;
  --kids-turquoise: #12b5b0;
  --kids-coral: #ff6b5e;
  --kids-purple: #7b2ff7;
  --kids-sky: #e8f7ff;
  --color-bg: #fff8e8;
  --color-surface-soft: #fff1d6;
  --color-primary: #3d1a8a;
  --color-secondary: #7b2ff7;
  --color-accent: #ff6b5e;
  --surface-tint: #e8f7ff;
  --font-base: "Baloo 2", "Roboto", sans-serif;
  --radius-card: 30px;
  --tap: 54px;
}
:root[data-kids="true"] body { background: linear-gradient(180deg, #e8f7ff 0, #fff8e8 520px); font-size: 1.06rem; }
:root[data-kids="true"] :is(h1, h2, h3, h4, .hero-title, .step-card__title) { font-family: "Baloo 2", "Roboto", sans-serif; letter-spacing: 0; }
:root[data-kids="true"] .step-card__title { font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.15; }
:root[data-kids="true"] .card { border: 3px solid #ffe2a3; box-shadow: 0 10px 0 rgba(255, 200, 61, 0.35); }
:root[data-kids="true"] :is(.button, .button-secondary, .button-ghost) { min-height: var(--tap); border-radius: 999px; font-size: 1.05rem; font-weight: 800; }
:root[data-kids="true"] .button { background: linear-gradient(180deg, #8f4bff, #6a1fe6); box-shadow: 0 5px 0 #4b12a8; border: 0; }
:root[data-kids="true"] .button:active { transform: translateY(3px); box-shadow: 0 2px 0 #4b12a8; }
:root[data-kids="true"] .button-secondary { background: var(--kids-yellow); color: #3d1a8a; box-shadow: 0 5px 0 #d9a21c; border: 0; }
:root[data-kids="true"] .button-ghost { border: 3px solid #ffe2a3; }
:root[data-kids="true"] .eyebrow { color: var(--kids-coral); font-weight: 900; }
:root[data-kids="true"] .practice-lead { background: #fff1d6; border: 3px dashed var(--kids-yellow); color: #3d1a8a; font-size: 1.2rem; }
:root[data-kids="true"] .progress-bar span,
:root[data-kids="true"] .experience-stage__meter span { background: linear-gradient(90deg, var(--kids-turquoise), var(--kids-yellow), var(--kids-coral)); }

/* Menú con emojis grandes en vez de íconos de línea. */
:root[data-kids="true"] .sidebar__nav .nav-link__icon svg { display: none; }
:root[data-kids="true"] .sidebar__nav .nav-link__icon::before { font-size: 1.5rem; line-height: 1; }
:root[data-kids="true"] .sidebar__nav [data-nav="dashboard"] .nav-link__icon::before { content: "🗺️"; }
:root[data-kids="true"] .sidebar__nav [data-nav="experience"] .nav-link__icon::before { content: "🎹"; }
:root[data-kids="true"] .sidebar__nav [data-nav="routine"] .nav-link__icon::before { content: "⭐"; }
:root[data-kids="true"] .sidebar__nav [data-nav="pieces"] .nav-link__icon::before { content: "🎵"; }
:root[data-kids="true"] .sidebar__nav [data-nav="resources"] .nav-link__icon::before { content: "📚"; }
:root[data-kids="true"] .sidebar__nav [data-nav="messages"] .nav-link__icon::before { content: "💬"; }
:root[data-kids="true"] .sidebar__nav .nav-link.is-active { background: #fff1d6; border-radius: 20px; }

/* Cada tipo de paso con su ícono: en el título y en la ruta. */
:root[data-kids="true"] .experience-stage .step-card__title::before { margin-right: 0.35rem; }
:root[data-kids="true"] .experience-stage[data-step-type="practice"] .step-card__title::before { content: "🎹"; }
:root[data-kids="true"] .experience-stage[data-step-type="content"] .step-card__title::before { content: "👀"; }
:root[data-kids="true"] .experience-stage[data-step-type="goal"] .step-card__title::before { content: "🎯"; }
:root[data-kids="true"] .experience-stage[data-step-type="quiz"] .step-card__title::before { content: "🧩"; }
:root[data-kids="true"] .experience-stage[data-step-type="intro"] .step-card__title::before { content: "👋"; }
:root[data-kids="true"] .experience-stage[data-step-type="closure"] .step-card__title::before { content: "🎉"; }
:root[data-kids="true"] .experience-stage[data-step-type="evaluation"] .step-card__title::before { content: "🌟"; }
:root[data-kids="true"] .experience-stage[data-step-type="submission"] .step-card__title::before { content: "🎬"; }
:root[data-kids="true"] .step-rail__item .step-rail__index { font-size: 0; }
:root[data-kids="true"] .step-rail__item .step-rail__index::before { font-size: 1.05rem; content: "🎵"; }
:root[data-kids="true"] .step-rail__item[data-step-type="practice"] .step-rail__index::before { content: "🎹"; }
:root[data-kids="true"] .step-rail__item[data-step-type="content"] .step-rail__index::before { content: "👀"; }
:root[data-kids="true"] .step-rail__item[data-step-type="goal"] .step-rail__index::before { content: "🎯"; }
:root[data-kids="true"] .step-rail__item[data-step-type="quiz"] .step-rail__index::before { content: "🧩"; }
:root[data-kids="true"] .step-rail__item[data-step-type="intro"] .step-rail__index::before { content: "👋"; }
:root[data-kids="true"] .step-rail__item[data-step-type="closure"] .step-rail__index::before { content: "🎉"; }
:root[data-kids="true"] .step-rail__item[data-step-type="evaluation"] .step-rail__index::before { content: "🌟"; }
:root[data-kids="true"] .step-rail__item.is-completed .step-rail__index::before { content: "⭐"; }

/* Siempre vista simple: sin botón de vista completa ni sugerencias. */
:root[data-kids="true"] :is(.topbar__view, .view-check, .simple-more, .view-mode-note) { display: none !important; }

/* Modo oscuro: se conserva la paleta oscura, con acentos de colores. */
:root[data-kids="true"][data-theme="dark"] { --color-bg: #15102a; --color-surface-soft: #241a45; --color-primary: #e9ddff; }
:root[data-kids="true"][data-theme="dark"] body { background: var(--color-bg); }
:root[data-kids="true"][data-theme="dark"] .card { border-color: #3a2c6b; box-shadow: none; }
:root[data-kids="true"][data-theme="dark"] .practice-lead { background: #241a45; color: var(--color-text); }
:root[data-kids="true"][data-theme="dark"] .sidebar__nav .nav-link.is-active { background: #241a45; }

/* Modo niños · MusiProfe acompaña cada paso y cada paso terminado es una estrella. */
.kids-only { display: none; }
:root[data-kids="true"] .kids-only { display: flex; }
.kids-companion { align-items: center; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.kids-companion img { flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain; animation: kids-bob 2.6s ease-in-out infinite; }
.kids-companion p { position: relative; margin: 0; padding: 0.7rem 1rem; border-radius: 20px; background: #fff; border: 3px solid var(--kids-turquoise, #12b5b0); font-size: 1.1rem; font-weight: 700; color: var(--color-primary); }
.kids-companion p::before { content: ""; position: absolute; left: -12px; top: 50%; border: 9px solid transparent; border-right-color: var(--kids-turquoise, #12b5b0); transform: translateY(-50%); }
@keyframes kids-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.kids-star { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(61, 26, 138, 0.25); animation: kids-fade 2.2s ease forwards; cursor: pointer; }
.kids-star__card { position: relative; display: grid; justify-items: center; gap: 0.3rem; padding: 1.5rem 2rem; border-radius: 30px; background: #fff8e8; border: 4px solid #ffc83d; box-shadow: 0 12px 0 rgba(255, 200, 61, 0.45); font-family: "Baloo 2", "Roboto", sans-serif; color: #3d1a8a; text-align: center; animation: kids-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.kids-star__card strong { font-size: 2rem; line-height: 1; }
.kids-star__card span { font-size: 1.1rem; font-weight: 700; }
.kids-star__icon { font-size: 4.5rem !important; line-height: 1; animation: kids-spin .8s ease-out both; }
.kids-star__card i { position: absolute; left: 50%; top: 40%; font-style: normal; font-size: 1.4rem; animation: kids-burst 1s ease-out forwards; --angle: calc(var(--i) * 45deg); }
@keyframes kids-pop { from { transform: scale(0.6); } to { transform: scale(1); } }
@keyframes kids-spin { from { transform: rotate(-180deg) scale(0.2); } to { transform: rotate(0) scale(1); } }
@keyframes kids-burst { from { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-130px); opacity: 0; } }
@keyframes kids-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kids-companion img, .kids-star, .kids-star__card, .kids-star__icon, .kids-star__card i { animation: none; } .kids-star__card i { display: none; } }
:root[data-kids="true"][data-theme="dark"] .kids-companion p { background: #241a45; color: var(--color-text); }

/* Modo niños · recuadro del adulto y camino de estrellas. */
.kids-only-block { display: none; }
:root[data-kids="true"] .kids-only-block { display: block; }
.kids-adult { margin: 1rem 0 0.5rem; border: 2px dashed #b9e8e6; border-radius: 18px; background: #f2fbfb; font-family: var(--font-base); }
.kids-adult summary { padding: 0.7rem 1rem; font-weight: 800; color: #0d7f7b; cursor: pointer; list-style: none; }
.kids-adult summary::-webkit-details-marker { display: none; }
.kids-adult summary::after { content: " ⌄"; }
.kids-adult ul { margin: 0; padding: 0 1.2rem 0.9rem 2.2rem; font-size: 0.98rem; color: var(--color-text); }
.kids-adult li + li { margin-top: 0.3rem; }
.kids-path { padding: 1.2rem; border-radius: 30px; background: linear-gradient(180deg, #e8f7ff, #fff1d6); border: 3px solid #ffe2a3; }
.kids-path__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.kids-path__head h2 { margin: 0; font-size: 1.6rem; }
.kids-path__stars { margin: 0; padding: 0.3rem 0.9rem; border-radius: 999px; background: #fff; font-weight: 900; font-size: 1.1rem; color: #3d1a8a; }
.kids-path__stones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 0.5rem; margin: 0; padding: 0.5rem 0; list-style: none; }
/* Filas en zigzag: una va a la derecha y la siguiente vuelve. */
.kids-path__stone { display: grid; justify-items: center; gap: 0.2rem; }
.kids-path__stone:nth-child(8n + 5) { grid-column: 4; } .kids-path__stone:nth-child(8n + 6) { grid-column: 3; }
.kids-path__stone:nth-child(8n + 7) { grid-column: 2; } .kids-path__stone:nth-child(8n + 8) { grid-column: 1; }
.kids-path__stone:nth-child(8n + 5), .kids-path__stone:nth-child(8n + 6), .kids-path__stone:nth-child(8n + 7), .kids-path__stone:nth-child(8n + 8) { grid-row: calc(var(--row) + 1); }
.kids-path__stone:nth-child(8n + 1), .kids-path__stone:nth-child(8n + 2), .kids-path__stone:nth-child(8n + 3), .kids-path__stone:nth-child(8n + 4) { grid-row: calc(var(--row) + 1); }
.kids-path__stone button { position: relative; display: grid; place-items: center; width: clamp(56px, 16vw, 76px); aspect-ratio: 1; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 6px 0 #e6c98a; font-size: clamp(1.6rem, 6vw, 2.2rem); cursor: pointer; transition: transform .15s ease; }
.kids-path__stone button:hover { transform: translateY(-3px); }
.kids-path__stone.is-done button { background: #fff6d1; box-shadow: 0 6px 0 #ffc83d; }
.kids-path__stone.is-current button { background: #7b2ff7; box-shadow: 0 6px 0 #4b12a8; animation: kids-bob 2.4s ease-in-out infinite; }
.kids-path__stone.is-next button { opacity: 0.75; }
.kids-path__pin { position: absolute; top: -1.4rem; font-size: 1.5rem; }
.kids-path__stone small { font-weight: 900; color: #3d1a8a; }
:root[data-kids="true"][data-theme="dark"] .kids-path { background: #241a45; border-color: #3a2c6b; }
:root[data-kids="true"][data-theme="dark"] .kids-adult { background: #1c2f3a; border-color: #2c5560; }
:root[data-kids="true"][data-theme="dark"] .kids-path__stone button { background: #2d2156; }

/* Los animalitos saltan: mano dibujada, un animal por dedo, teclas debajo. */
.fa { display: grid; gap: 1rem; padding: 1.2rem; border: 3px solid #ffe2a3; background: linear-gradient(180deg, #e8f7ff, #fff8e8); font-family: "Baloo 2", "Roboto", sans-serif; }
.fa__head h2 { margin: 0.1rem 0; font-size: 1.6rem; color: #3d1a8a; }
.fa__head p:not(.eyebrow) { margin: 0.2rem 0 0; font-size: 1.05rem; }
.fa__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.fa__modes button { display: grid; gap: 0.1rem; padding: 0.6rem; border: 3px solid #ffe2a3; border-radius: 18px; background: #fff; color: #3d1a8a; font: inherit; cursor: pointer; }
.fa__modes button strong { font-size: 1.05rem; }
.fa__modes button small { font-weight: 800; color: #ce0071; letter-spacing: 0.04em; }
.fa__modes button[aria-pressed="true"] { background: #7b2ff7; border-color: #7b2ff7; color: #fff; }
.fa__modes button[aria-pressed="true"] small { color: #ffe2a3; }
.fa__stage { display: grid; justify-items: center; gap: 0.9rem; padding: 1rem 1rem 1.1rem; border-radius: 28px; background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #fdf8ff 55%, #f4ecff 100%); box-shadow: inset 0 0 0 2px #efe4ff; }
.fa__top { display: flex; align-items: center; gap: 1.1rem; width: min(100%, 560px); }
.fa__glove { flex: 0 0 auto; width: clamp(120px, 30vw, 150px); height: auto; aspect-ratio: 112 / 118; filter: drop-shadow(0 4px 6px rgba(61, 26, 138, .15)); }
.fa__glove-shape > * { fill: #fff; stroke: #3d1a8a; stroke-width: 3; stroke-linejoin: round; }
.fa__glove-shape > rect:last-child { stroke-width: 3; }
.fa__glove-cuff { fill: #ffe2a3; stroke: #3d1a8a; stroke-width: 3; }
.fa__glove-tip { transform-box: fill-box; transform-origin: center; transition: transform .15s ease; }
.fa__glove-tip circle { stroke: #3d1a8a; stroke-width: 2; }
.fa__glove-tip text { font: 900 10px "Baloo 2", sans-serif; fill: #fff; }
.fa__glove-tip.is-on { transform: scale(1.35); }
.fa__say { flex: 1; min-height: 2.6em; margin: 0; padding: 0.55rem 0.9rem; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 6px 18px rgba(61, 26, 138, .1); text-align: left; font-size: 1.15rem; font-weight: 800; line-height: 1.25; color: #3d1a8a; display: flex; align-items: center; }
.fa__scene { display: grid; width: min(100%, 560px); }
.fa__lanes { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 150px; }
.fa__buddy { position: relative; display: grid; justify-items: center; align-content: end; gap: 0.35rem; height: 100%; padding: 0 0 0.45rem; border: 0; background: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fa__body { position: relative; z-index: 1; display: grid; place-items: center; width: clamp(52px, 13vw, 76px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, color-mix(in srgb, var(--c) 30%, #fff) 60%, color-mix(in srgb, var(--c) 55%, #fff) 100%); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--c), 0 10px 18px color-mix(in srgb, var(--c) 35%, transparent); transition: transform .3s cubic-bezier(.2, 1.5, .4, 1); transform-origin: 50% 100%; }
.fa__animal { font-size: clamp(1.9rem, 7vw, 2.7rem); line-height: 1; transform: translateY(2px); }
.fa__shadow { position: absolute; bottom: 2.15rem; width: clamp(40px, 10vw, 58px); height: 10px; border-radius: 50%; background: rgba(61, 26, 138, .16); transition: transform .3s ease, opacity .3s ease; }
.fa__tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem 0.1rem 0.15rem; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(61, 26, 138, .12); font-size: 0.8rem; font-weight: 800; color: #3d1a8a; white-space: nowrap; }
.fa__tag b { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--c); color: #fff; font-size: 0.85rem; }
.fa__buddy:hover .fa__body, .fa__buddy:focus-visible .fa__body { transform: translateY(-6px); }
.fa__buddy:focus-visible { outline: none; }
.fa__buddy:focus-visible .fa__tag { outline: 3px solid var(--c); }
.fa__buddy.is-up .fa__body { transform: translateY(-58px) scale(1.06) rotate(-4deg); transition-timing-function: cubic-bezier(.2, .8, .3, 1); }
.fa__buddy.is-up .fa__shadow { transform: scale(.55); opacity: .5; }
.fa__buddy.is-land .fa__body { animation: fa-squash .32s ease-out; }
@keyframes fa-squash { 0% { transform: scale(1.18, .8); } 55% { transform: scale(.94, 1.06); } 100% { transform: none; } }
.fa__note { position: absolute; z-index: 3; bottom: 2.2rem; font-size: 1.5rem; font-weight: 900; color: var(--c); text-shadow: 0 2px 0 #fff; pointer-events: none; animation: fa-note .9s ease-out forwards; }
@keyframes fa-note { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(18px, -90px) scale(1.2) rotate(14deg); opacity: 0; } }
.fa__piano { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 10px 8px 8px; border-radius: 18px; background: linear-gradient(180deg, #3d1a8a, #2a1163); box-shadow: 0 10px 22px rgba(42, 17, 99, .28); }
.fa__key { position: relative; display: grid; align-items: end; justify-items: center; height: 96px; padding-bottom: 8px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #fff 70%, #f1ecf8); box-shadow: inset 0 -7px 0 #ddd3ec, inset 0 4px 0 var(--c); transition: transform .08s ease, box-shadow .08s ease, background .08s ease; }
.fa__key small { font-size: 0.78rem; font-weight: 800; color: #8a7bb0; }
.fa__key.is-on { transform: translateY(3px); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 40%, #fff)); box-shadow: inset 0 -3px 0 var(--c), inset 0 4px 0 var(--c), 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.fa__key.is-on small { color: #3d1a8a; }
.fa__black { position: absolute; top: 10px; left: calc(8px + (100% - 16px) * var(--i) / 5 - 13px); width: 26px; height: 56px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #2b2340, #120d1f); box-shadow: inset 0 -5px 0 #463b63; pointer-events: none; }
.fa__count { display: flex; gap: 0.5rem; }
.fa__count span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f1eaff; font-weight: 900; font-size: 1.2rem; color: #3d1a8a; transition: transform .12s ease; }
.fa__count span.is-on { background: #ff6b5e; color: #fff; transform: scale(1.2); }
.fa__controls { display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.fa__controls .button { min-width: 220px; font-size: 1.2rem; }
.fa__tip { margin: 0; font-weight: 700; color: #0d7f7b; }
@media (max-width: 520px) { .fa__modes { grid-template-columns: 1fr; } .fa__top { flex-direction: column; } .fa__say { text-align: center; justify-content: center; border-radius: 18px; } .fa__lanes { height: 130px; } .fa__tag { font-size: 0; gap: 0; padding: 0.1rem; } .fa__key { height: 78px; } .fa__black { width: 18px; left: calc(8px + (100% - 16px) * var(--i) / 5 - 9px); height: 46px; } }
@media (prefers-reduced-motion: reduce) { .fa__body, .fa__shadow, .fa__glove-tip { transition: none; } .fa__buddy.is-land .fa__body, .fa__note { animation: none; } }
:root[data-theme="dark"] .fa { background: #241a45; border-color: #3a2c6b; }
:root[data-theme="dark"] :is(.fa__stage, .fa__modes button) { background: #15102a; color: var(--color-text); box-shadow: none; }
:root[data-theme="dark"] :is(.fa__say, .fa__tag) { background: #241a45; color: var(--color-text); }
:root[data-theme="dark"] .fa__say, :root[data-theme="dark"] .fa__head h2 { color: var(--color-text); }

/* Gimnasia dactilar · ilustración con los dedos animados encima. */
.ft-scene { display: grid; justify-items: center; gap: 0.4rem; margin: 0.5rem 0 0.75rem; padding: 0.9rem 0.75rem 0.8rem; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, #f6f0ff 0, #fff 70%); }
.ft-svg { display: block; width: min(100%, 460px); height: auto; border-radius: 18px; border: 1px solid rgba(34, 10, 99, 0.08); box-shadow: 0 10px 30px rgba(34, 10, 99, 0.1); background: #fff; }
/* Subir, visto desde arriba: el dedo se acerca a quien mira y su sombra se separa de la tecla. */
.ft-lift { opacity: 0; transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), opacity .12s ease; transform-box: fill-box; transform-origin: 50% 92%; }
.ft-lift.is-up { opacity: 1; transform: scale(1.09) translateY(-3%); filter: url(#ftLift); }
.ft-key-glow { fill: #ff3d9a; opacity: 0; transition: opacity .1s ease; }
.ft-key-glow.is-pressed { opacity: 0.6; }
.ft-badge circle { fill: #fff; stroke: rgba(34, 10, 99, 0.2); stroke-width: 2; transition: fill .12s ease; }
.ft-badge text { font-family: var(--font-base); font-size: 28px; font-weight: 900; fill: #220a63; }
.ft-badge.is-active circle { fill: #ce0071; stroke: #fff; stroke-width: 3; }
.ft-badge.is-active text { fill: #fff; }
.ft-guide rect { fill: #ce0071; }
.ft-guide text { font-family: var(--font-base); font-size: 22px; font-weight: 900; fill: #fff; letter-spacing: 0.02em; }
.ft-scene__position { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1rem; margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--color-primary); }
.ft-scene__position b { padding: 0.05rem 0.45rem; border-radius: 999px; background: #ffe0ef; color: #ce0071; }
.ft-scene__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; margin: 0; font-size: 0.85rem; font-weight: 800; color: #680dbf; }
@media (prefers-reduced-motion: reduce) { .ft-lift, .ft-key-glow { transition: none; } }
:root[data-theme="dark"] .ft-scene { background: var(--color-surface-soft); }
.admin-advisories__requested { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 700; color: var(--color-primary); }

/* Asesorías: horarios libres agrupados por día. */
.advisory__days { display: grid; gap: 0.6rem; }
.advisory__day strong { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; color: var(--color-primary); }
/* Panel · disponibilidad para asesorías. */
.admin-availability { display: grid; gap: 0.6rem; margin-bottom: 1.2rem; padding: 1rem; border-radius: 18px; background: var(--color-surface-soft); }
.admin-availability h3 { margin: 0; }
.admin-availability p { margin: 0; }
.admin-availability__form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; }
.admin-availability__form label { display: grid; gap: 0.25rem; font-size: 0.8rem; font-weight: 800; color: var(--color-text-soft); }
.admin-availability__days { display: grid; gap: 0.6rem; }
.admin-availability__day strong { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; color: var(--color-primary); }
.admin-availability__slots { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.admin-availability__slot { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.4rem 0.25rem 0.7rem; border: 1px solid #d9cdee; border-radius: 999px; background: #fff; font-size: 0.85rem; font-weight: 700; }
.admin-availability__slot button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #f1eaff; color: #680dbf; font-weight: 900; cursor: pointer; }
.blocked-days { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.blocked-month { display: grid; grid-template-columns: 5.2rem 1fr; align-items: start; gap: 0.5rem; }
.blocked-month__name { padding-top: 0.2rem; color: var(--color-text-soft); font-size: 0.78rem; font-weight: 800; }
.blocked-month__days { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.blocked-day { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.1rem 0.15rem 0.1rem 0.5rem; border: 1px solid #f3b6d6; border-radius: 999px; background: #fff5fa; color: #a3005a; font-size: 0.78rem; font-weight: 700; }
.blocked-day button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #a3005a; font-size: 0.8rem; font-weight: 900; cursor: pointer; }
.blocked-day button:hover { background: #ffd6ec; }
.blocked-days__more summary { color: #680dbf; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.blocked-days__more[open] summary { margin-bottom: 0.35rem; }
.admin-availability__slot.is-booked { padding-right: 0.7rem; border-color: #0b7a43; background: #e7f6ee; color: #0b7a43; }
.admin-availability__day strong::first-letter, .advisory__day strong::first-letter { text-transform: uppercase; }

/* Panel · horario semanal de asesorías por docente. */
.admin-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.8rem; width: 100%; }
.admin-schedule__teacher { display: grid; gap: 0.35rem; margin: 0; padding: 0.8rem; border: 1px solid #d9cdee; border-radius: 16px; background: #fff; }
.admin-schedule__teacher legend { padding: 0 0.4rem; font-weight: 900; color: var(--color-primary); }
.admin-schedule__day { display: grid; grid-template-columns: 7.5rem 1fr auto 1fr; align-items: center; gap: 0.4rem; opacity: 0.55; }
.admin-schedule__day.is-on, .admin-schedule__day:has(input[type="checkbox"]:checked) { opacity: 1; }
.admin-schedule__day input[type="time"] { min-width: 0; min-height: 38px; padding: 0.3rem 0.4rem; }
.admin-schedule__toggle { display: flex; align-items: center; gap: 0.35rem; font-weight: 800; font-size: 0.9rem; }
.admin-schedule__blocked { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; padding-top: 0.5rem; border-top: 1px dashed #d9cdee; }
.admin-schedule__blocked > p { width: 100%; margin: 0; }
.admin-schedule__block-add { display: flex; gap: 0.35rem; width: 100%; }
.admin-schedule__save { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; width: 100%; }
.admin-schedule__save label { display: grid; gap: 0.25rem; font-size: 0.8rem; font-weight: 800; color: var(--color-text-soft); }
.admin-availability__slot.is-blocked { border-color: #ce0071; background: #fff0f7; color: #ce0071; }
.admin-schedule__day { grid-template-columns: 6.6rem minmax(0, 1fr) auto minmax(0, 1fr); }
.admin-schedule__toggle { display: flex !important; flex-direction: row !important; align-items: center; gap: 0.4rem; margin: 0; }
.admin-schedule__toggle input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: #680dbf; }
.admin-schedule__day input[type="time"] { width: 100%; font-size: 0.82rem; padding: 0.3rem 0.25rem; }

/* Panel · cuadrícula semanal 8 a. m. – 8 p. m.: libre o "no puedo". */
.admin-schedule__teacher h4 { margin: 0 0 0.3rem; color: var(--color-primary); }
.admin-grid { display: grid; grid-template-columns: 3.6rem repeat(7, minmax(0, 1fr)); gap: 3px; }
.admin-grid__day { padding: 0.25rem 0; border: 0; border-radius: 8px; background: #f1eaff; font-weight: 900; font-size: 0.78rem; color: var(--color-primary); cursor: pointer; }
.admin-grid__hour { align-self: center; font-size: 0.7rem; font-weight: 700; color: var(--color-text-soft); white-space: nowrap; }
.admin-grid__cell { display: inline-block; height: 26px; min-width: 0; padding: 0; border: 1px solid #b9e5cd; border-radius: 6px; background: #e7f6ee; cursor: pointer; }
.admin-grid__cell:hover { border-color: #0b7a43; }
.admin-grid__cell.is-busy { border-color: #c9c2d6; background: repeating-linear-gradient(135deg, #e4e0ea 0 6px, #d6d0de 6px 12px); }
.admin-grid__legend { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--color-text-soft); }
.admin-grid__legend .admin-grid__cell { width: 22px; height: 16px; cursor: default; }
.admin-schedule__dirty { font-size: 0.85rem; font-weight: 800; color: #b45d00; }

/* "Musicala te cuenta": franja discreta en Mi ruta y página propia. */
.news-teaser { display: grid; gap: 0.6rem; padding: 1rem 0 0; border-top: 1px solid var(--color-border); }
.news-teaser__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.news-teaser__head h2 { margin: 0; font-size: 1.05rem; color: var(--color-text-soft); }
.news-teaser__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; }
.news-card { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.news-card:hover { border-color: rgba(87, 41, 255, 0.35); transform: translateY(-1px); }
.news-card__cover { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.news-card__cover--emoji { display: grid; place-items: center; background: var(--color-surface-soft); font-size: 1.7rem; }
.news-card__text { display: grid; gap: 0.15rem; min-width: 0; }
.news-card__text strong { color: var(--color-primary); line-height: 1.25; }
.news-card__text small { color: var(--color-text-soft); line-height: 1.3; }
.news-card__date { font-size: 0.75rem; font-weight: 700; }
.news-page { display: grid; gap: 0.9rem; max-width: 760px; }
.news-page > .button-ghost { justify-self: start; }
.news-page h1 { margin: 0; }
.news-page__list { display: grid; gap: 0.6rem; }
.news-card--row .news-card__cover { width: 72px; height: 72px; }
.news-post__image { width: 100%; max-height: 360px; border-radius: 20px; object-fit: cover; }
.news-post__emoji { font-size: 3rem; }
.news-post__summary { margin: 0; font-size: 1.15rem; color: var(--color-text-soft); }
.news-post__body p { font-size: 1.05rem; line-height: 1.7; }
.news-post > .button-secondary { justify-self: start; }
.admin-posts { display: grid; gap: 0.8rem; }
.admin-posts__form { display: grid; gap: 0.6rem; }
.admin-posts__form label { display: grid; gap: 0.25rem; font-weight: 700; }
.admin-posts__row { display: grid; grid-template-columns: 6rem 1fr; gap: 0.6rem; }
.admin-posts__check { display: flex !important; align-items: center; gap: 0.4rem; }
.admin-posts__form .button { justify-self: start; }
.admin-posts__list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.admin-posts__list li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: 14px; }
.admin-posts__list li div { display: grid; }
.admin-posts__list small { color: var(--color-text-soft); }

/* Panel · editor de "Musicala te cuenta". */
.admin-posts { gap: 1rem; }
.admin-posts__head { display: flex; gap: 0.8rem; align-items: flex-start; }
.admin-posts__head h2 { margin: 0; }
.admin-posts__head p { margin: 0.2rem 0 0; }
.admin-posts__icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--color-surface-soft); font-size: 1.5rem; }
.admin-posts__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 1.2rem; align-items: start; }
.admin-posts__form { display: grid; gap: 0.85rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface-soft); }
.admin-field { display: grid; gap: 0.35rem; margin: 0; }
.admin-field > span { font-size: 0.85rem; font-weight: 800; color: var(--color-primary); }
.admin-field > span small { margin-left: 0.35rem; font-weight: 600; color: var(--color-text-soft); }
.admin-field input:not([type="hidden"]), .admin-field textarea { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); font: inherit; font-weight: 500; color: var(--color-text); }
.admin-field textarea { min-height: 180px; line-height: 1.55; resize: vertical; }
.admin-field input:focus-visible, .admin-field textarea:focus-visible { outline: 3px solid rgba(87, 41, 255, 0.22); border-color: var(--color-secondary); }
.admin-posts__emojis { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.admin-posts__emoji { width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); font-size: 1.3rem; cursor: pointer; }
.admin-posts__emoji.is-active { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(87, 41, 255, 0.18); }
.admin-posts__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.admin-posts__check { display: flex !important; align-items: center; gap: 0.45rem; font-weight: 700; }
.admin-posts__check input { width: 18px; height: 18px; accent-color: #680dbf; }
.admin-posts__preview { position: sticky; top: 1rem; display: grid; gap: 0.5rem; padding: 1rem; border: 1px dashed var(--color-border); border-radius: 18px; }
.admin-posts__preview .eyebrow { margin: 0; }
.admin-posts__list-title { margin: 0.4rem 0 0; }
.admin-posts__list-emoji { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-surface-soft); font-size: 1.3rem; }
.admin-posts__tag { padding: 0.25rem 0.6rem; border-radius: 999px; background: #e7f6ee; color: #0b7a43; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.admin-posts__list li:has(.admin-posts__tag) { grid-template-columns: auto 1fr auto; }
@media (max-width: 760px) { .admin-posts__layout { grid-template-columns: 1fr; } .admin-posts__preview { position: static; } }

.admin-posts__upload { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0.6rem 1rem; border: 2px dashed var(--color-border); border-radius: 12px; background: var(--color-surface); font-weight: 800; color: var(--color-primary); cursor: pointer; }
.admin-posts__upload:hover { border-color: var(--color-secondary); }
.admin-posts__upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.admin-posts__editing { margin: 0; padding: 0.5rem 0.8rem; border-radius: 12px; background: #fff5e0; color: #b45d00; font-weight: 800; }
.admin-posts__list li { grid-template-columns: auto 1fr auto auto auto; }
.admin-posts__list li:has(.admin-posts__tag) { grid-template-columns: auto 1fr auto auto; }

/* Teclado conectado (opcional) en los ejercicios. */
.midi-link { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); }
.midi-link small { display: block; margin-top: 0.2rem; font-weight: 600; color: var(--color-text-soft); }
.scale-trainer__listen-note, .pattern-trainer__midi { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--color-text-soft); }
.scale-trainer__key.is-wrong { box-shadow: 0 0 0 3px #ff8a3d; animation: midi-shake .25s ease; }
.pattern-trainer__key.is-hit { background: #d8f5e4 !important; box-shadow: 0 0 0 3px #0b7a43; }
.pattern-trainer__key.is-miss { background: #fff0e0 !important; box-shadow: 0 0 0 3px #ff8a3d; }
.is-hit-sample { color: #0b7a43; } .is-miss-sample { color: #d46a00; }
@keyframes midi-shake { 0%, 100% { transform: translateX(0); } 33% { transform: translateX(-4px); } 66% { transform: translateX(4px); } }

/* Ubica tus manos en el piano. */
.hand-placement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 1rem 0; }
.hp-card { position: relative; display: grid; gap: 0.6rem; align-content: start; padding: 1rem 1rem 1rem 3.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.hp-card--wide { grid-column: 1 / -1; }
.hp-card__n { position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #680dbf; color: #fff; font-weight: 900; }
.hp-card h4 { margin: 0 0 0.25rem; color: var(--color-primary); }
.hp-card p { margin: 0; }
.hp-card__image { width: 100%; max-height: 260px; object-fit: contain; border-radius: 16px; background: var(--color-surface-soft); }
.hp-card__tip { padding: 0.6rem 0.8rem; border-radius: 12px; background: #fff1d6; }
.hp-kb { display: grid; gap: 0.3rem; }
.hp-kb__brand { justify-self: center; padding: 0.15rem 0.7rem; border-radius: 6px; background: #3a2a22; color: #f5e6c8; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.12em; }
.hp-kb__keys { position: relative; height: clamp(110px, 22vw, 150px); margin: 2.2rem 0 2.6rem; }
.hp-kb__white { position: absolute; top: 0; bottom: 0; border: 1px solid #c9c2d6; border-radius: 0 0 5px 5px; background: #fff; }
.hp-kb__white small { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 0.55rem; font-weight: 800; color: #9a93a8; }
.hp-kb__white.is-central { background: #ffd6ec; border-color: #ce0071; animation: hp-pulse 1.8s ease-in-out infinite; }
.hp-kb__black { position: absolute; top: 0; height: 60%; transform: translateX(-50%); border-radius: 0 0 3px 3px; background: #1d1626; }
.hp-kb__tag { position: absolute; top: -1.9rem; transform: translateX(-50%); padding: 0.15rem 0.55rem; border-radius: 999px; background: #ce0071; color: #fff; font-size: 0.8rem; font-weight: 900; white-space: nowrap; }
.hp-kb__hand { position: absolute; bottom: -2.5rem; display: grid; justify-items: center; transform: translateX(-50%); font-size: 1.6rem; line-height: 1; }
.hp-kb__hand small { font-size: 0.7rem; font-weight: 800; color: var(--color-text-soft); }
@keyframes hp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(206, 0, 113, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(206, 0, 113, 0); } }
.hp-checks { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.hp-checks label { display: flex !important; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: 12px; font-weight: 600; cursor: pointer; }
.hp-checks label:has(input:checked) { border-color: #0b7a43; background: #e7f6ee; }
.hp-checks input { width: 20px; height: 20px; accent-color: #0b7a43; }
.hp-checks__done { margin: 0.6rem 0 0; font-weight: 800; color: #0b7a43; }
@media (max-width: 640px) { .hand-placement { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hp-kb__white.is-central { animation: none; } }

/* Panel: campos con el mismo estilo redondeado del resto de la plataforma. */
.admin-page :is(input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="url"], input[type="number"], input[type="search"], input:not([type]), textarea) {
  min-height: var(--tap); padding: 0.65rem 0.9rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); font: inherit; font-weight: 500; color: var(--color-text); box-shadow: none;
}
.admin-page :is(input, textarea):focus-visible { outline: 3px solid rgba(87, 41, 255, 0.22); outline-offset: 1px; border-color: var(--color-secondary); }
.admin-page label { gap: 0.35rem; }
.hp-card:first-child .hp-card__image { object-fit: cover; aspect-ratio: 16 / 9; }

/* Panel: descargar actividad. */
.admin-activity__head, .admin-roster__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem 1rem; }
.admin-roster__head h2 { margin: 0; }
.admin-download { min-height: 40px; padding: 0.5rem 1rem; font-size: 0.88rem; }

.kids-path__stone.is-locked button { opacity: 0.45; filter: grayscale(0.4); }

/* Íconos discretos en los títulos. */
.title-icon { display: inline-block; margin-right: 0.4rem; font-size: 0.95em; line-height: 1; }

/* Minijuegos de "Conociéndote mejor". */
.skill-games { display: grid; gap: 0.8rem; margin: 1.2rem 0 0.5rem; padding: 1.1rem; border: 1px solid rgba(104, 13, 191, 0.18); border-radius: var(--radius-card); background: linear-gradient(180deg, #f6f0ff, #fff); }
.skill-games__head h3 { margin: 0.15rem 0; }
.skill-games__head p { margin: 0; }
.skill-games__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; }
.sg-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; padding: 0.8rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.sg-card:hover { transform: translateY(-2px); border-color: rgba(104, 13, 191, 0.4); }
.sg-card.is-done { border-color: #8fd6ae; background: #f3fbf6; }
.sg-card__icon { position: relative; }
.sg-card__check { position: absolute; right: -8px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: #0b7a43; color: #fff; font-size: 11px; font-weight: 900; }
.sg-card__done { display: inline-block; margin-bottom: 0.2rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #d4f3e1; color: #0b7a43; font-size: 0.75rem; font-style: normal; font-weight: 800; }
.sg-card.is-done .sg-card__go { color: #0b7a43; }
.sg-progress { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; font-weight: 700; color: var(--color-primary); }
.sg-progress__bar { flex: 1; height: 8px; border-radius: 999px; background: #e7dff5; overflow: hidden; }
.sg-progress__bar i { display: block; height: 100%; border-radius: inherit; background: #0b7a43; transition: width .3s ease; }
.sg-card__icon { font-size: 1.8rem; }
.sg-card strong { display: block; color: var(--color-primary); }
.sg-card small { color: var(--color-text-soft); }
.sg-card__go { font-weight: 800; color: #680dbf; white-space: nowrap; }
.sg-play { display: grid; justify-items: center; gap: 0.7rem; padding: 1rem; border-radius: 18px; background: var(--color-surface); text-align: center; }
.sg-play__head { display: flex; justify-content: space-between; width: 100%; margin: 0; font-weight: 800; color: var(--color-primary); }
.sg-play__last { margin: 0; font-weight: 800; color: #0b7a43; }
.sg-play__text { margin: 0; font-size: 1.05rem; }
.sg-answers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.sg-answers .button-secondary { min-width: 150px; font-size: 1.05rem; }
.sg-tap { width: 160px; height: 160px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #8f4bff, #6a1fe6); box-shadow: 0 6px 0 #4b12a8; color: #fff; font-size: 1.3rem; font-weight: 900; cursor: pointer; }
.sg-tap:active { transform: translateY(4px); box-shadow: 0 2px 0 #4b12a8; }
.sg-tap:disabled { opacity: 0.5; }
.sg-ask { margin: 0; font-size: 1.1rem; }
.sg-keys { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 420px); height: 150px; }
.sg-keys__white { border: 1px solid #c9c2d6; border-radius: 0 0 8px 8px; background: #fff; cursor: pointer; }
.sg-keys__white:active { background: #ffd6ec; }
.sg-keys__black { position: absolute; top: 0; left: calc(var(--at) * 12.5%); width: 7.5%; height: 60%; transform: translateX(-50%); border: 0; border-radius: 0 0 5px 5px; background: #1d1626; cursor: pointer; }
.sg-keys__black:active { background: #ce0071; }
.sg-reveal { display: grid; justify-items: center; gap: 0.6rem; width: 100%; padding: 0.8rem; border-radius: 16px; background: #f3fbf6; animation: sg-pop .25s ease; }
.sg-reveal.is-wrong { background: #fff6ec; }
.sg-reveal.is-wrong .sg-play__last { color: #a4520a; }
.sg-reveal__text { margin: 0; max-width: 34rem; }
@keyframes sg-pop { from { opacity: 0; transform: scale(.97); } }
.sg-dots { width: min(100%, 300px); height: auto; overflow: visible; }
.sg-dots__axis { font-size: 10px; fill: var(--color-text-soft); }
.sg-dots__line { fill: none; stroke: #b9a6e8; stroke-width: 3; stroke-dasharray: 5 5; }
.sg-dots__dot { fill: #680dbf; }
.sg-dots__dot.is-changed { fill: #ce0071; }
.sg-dots__name { font-size: 12px; font-weight: 800; fill: var(--color-primary); text-anchor: middle; }
.sg-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; width: 100%; }
.sg-pair small, .sg-bars small { display: block; font-weight: 700; color: var(--color-text-soft); }
.sg-bars { width: min(100%, 360px); text-align: left; }
.sg-bars__row { display: flex; gap: 4px; height: 22px; }
.sg-bars__row span { min-width: 6px; border-radius: 6px; background: #8f4bff; }
.sg-bars + .sg-bars .sg-bars__row span { background: #ce0071; }
.sg-keys.is-static .sg-keys__white, .sg-keys.is-static .sg-keys__black { cursor: default; }
.sg-keys__white { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.sg-keys__white b { font-size: .8rem; color: #0b7a43; }
.sg-keys [data-mark="is-ok"] { background: #b9f0d1; }
.sg-keys .sg-keys__black[data-mark="is-ok"] { background: #0b7a43; }
.sg-keys [data-mark="is-wrong"] { background: #ffc9e3; }
.sg-keys .sg-keys__black[data-mark="is-wrong"] { background: #ce0071; }
.sg-parts { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.sg-parts__item { display: grid; justify-items: center; gap: 0.35rem; min-width: 130px; padding: 0.55rem 0.8rem; border: 2px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-text-soft); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.sg-parts__item.is-on { border-color: #8f4bff; background: #f3edff; color: var(--color-primary); transform: translateY(-2px); }
.sg-parts__item span { display: flex; gap: 6px; }
.sg-parts__item i { width: 12px; height: 12px; border-radius: 50%; background: #ddd3ee; transition: background .1s ease, transform .1s ease; }
.sg-parts__item i.is-lit { background: #680dbf; transform: scale(1.25); }
.sg-summary__score { margin: 0; font-size: 1.2rem; }
.sg-summary__score strong { font-size: 2.6rem; color: #680dbf; }
.sg-summary__rounds { display: flex; gap: 0.35rem; margin: 0; }
.sg-summary__rounds span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; }
.sg-summary__rounds .is-ok { background: #b9f0d1; color: #0b7a43; }
.sg-summary__rounds .is-miss { background: #eee8f6; color: #8a7fa0; }
.sg-summary__praise { margin: 0; font-weight: 700; color: var(--color-primary); }
.skill-games.is-kids .sg-card__icon { font-size: 2.2rem; }
.skill-games.is-kids .sg-play__text { font-size: 1.2rem; }
.admin-skill-check ul { display: grid; gap: 0.4rem; margin: 0.4rem 0; padding: 0; list-style: none; }
.admin-skill-check li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) auto; align-items: center; gap: 0.6rem; }
.admin-skill-check__bar { height: 10px; border-radius: 999px; background: #eee9f6; overflow: hidden; }
.admin-skill-check__bar span { display: block; height: 100%; background: linear-gradient(90deg, #680dbf, #ce0071); }
.admin-skill-check h3 small { font-weight: 600; color: var(--color-text-soft); font-size: 0.8rem; }
/* Bienvenida en video (Experiencia I): en la pantalla inicial reemplaza la ilustración. */
.welcome-video { display: grid; justify-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.welcome-video video { display: block; width: auto; max-width: 100%; max-height: min(70vh, 560px); aspect-ratio: 9 / 16; border-radius: 22px; background: #100c18; box-shadow: 0 14px 40px rgba(34, 10, 99, 0.2); }
.welcome-video figcaption { font-weight: 800; color: var(--color-primary); }
.story-intro:has([data-story-welcome]:not([hidden]) .welcome-video) > .practice-image--welcome { display: none; }

:root[data-kids="true"] .experience-stage .step-card__title .title-icon { display: none; }

/* La postura correcta. */
.posture-lesson { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 1rem 0; }
.pl-card { display: grid; gap: 0.6rem; align-content: start; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.pl-card header { display: flex; align-items: center; gap: 0.5rem; }
.pl-card__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #680dbf; color: #fff; font-weight: 900; }
.pl-card h4 { margin: 0; color: var(--color-primary); }
.pl-card__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; background: var(--color-surface-soft); }
.pl-card__lists { display: grid; gap: 0.4rem; }
.pl-yes, .pl-no { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.pl-yes li::before { content: "✅ "; }
.pl-no li::before { content: "❌ "; }
.pl-no { color: var(--color-text-soft); }
.pl-wrists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; padding: 0.6rem; border-radius: 14px; background: var(--color-surface-soft); }
.pl-wrist { margin: 0; display: grid; justify-items: center; gap: 0.2rem; padding: 0.3rem; border-radius: 12px; }
.pl-wrist.is-ok { background: #e7f6ee; box-shadow: inset 0 0 0 2px #0b7a43; }
.pl-wrist svg { width: 100%; max-width: 130px; }
.pl-wrist figcaption { font-size: 0.85rem; font-weight: 800; }
.pl-wrist__keys { fill: #fff; stroke: #c9c2d6; }
.pl-wrist__arm { fill: none; stroke: #e9b48f; stroke-width: 12; stroke-linecap: round; }
.pl-wrist__hand { fill: none; stroke: #f0c4a2; stroke-width: 11; stroke-linecap: round; }
.pl-wrist__finger { fill: none; stroke: #f0c4a2; stroke-width: 6; stroke-linecap: round; }
.pl-wrist__joint { fill: #d99a75; }
.pl-summary { grid-column: 1 / -1; margin: 0; padding: 0.8rem 1rem; border-radius: 14px; background: #fff1d6; }
@media (max-width: 640px) { .posture-lesson { grid-template-columns: 1fr; } }
.pl-wrists-photo { margin: 0; display: grid; gap: 0.35rem; }
.pl-wrists-photo img { width: 100%; border-radius: 14px; }
.pl-wrists-photo figcaption { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; text-align: center; font-size: 0.88rem; font-weight: 800; }
.pl-wrists-photo figcaption span { padding: 0.25rem 0; border-radius: 10px; background: var(--color-surface-soft); }
.pl-wrists-photo figcaption .is-ok { background: #e7f6ee; color: #0b7a43; box-shadow: inset 0 0 0 2px #0b7a43; }

/* Gimnasia dactilar · acabado: tarjeta, sombra del dedo que sube, números sobre las teclas, onda al tocar. */
.ft-scene { padding: 1rem 0.9rem 1rem; border: 1px solid rgba(104, 13, 191, 0.12); background: linear-gradient(180deg, #f8f4ff, #fffdfb); box-shadow: 0 14px 40px rgba(34, 10, 99, 0.08); }
.ft-svg { border: 0; border-radius: 20px; box-shadow: 0 10px 30px rgba(34, 10, 99, 0.16), 0 0 0 1px rgba(34, 10, 99, 0.06); }
.ft-gap { fill: rgba(40, 20, 10, 0.38); opacity: 0; transition: opacity .18s ease; }
.ft-gap.is-up { opacity: 1; }
.ft-lift.is-up { transform: scale(1.1) translateY(-4%); }
.ft-badge circle { fill: rgba(255, 255, 255, 0.94); stroke: rgba(34, 10, 99, 0.18); stroke-width: 2; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); transition: fill .15s ease, transform .15s ease; transform-box: fill-box; transform-origin: center; }
.ft-badge text { font-size: 24px; }
.ft-badge.is-active circle { fill: #ce0071; stroke: #fff; transform: scale(1.12); }
.ft-arrow { opacity: 0; transition: opacity .12s ease; }
.ft-arrow circle { fill: #ce0071; filter: drop-shadow(0 3px 5px rgba(206,0,113,.35)); }
.ft-arrow path { fill: #fff; }
.ft-badge.is-up .ft-arrow { opacity: 1; animation: ft-bounce .5s ease-in-out infinite alternate; }
@keyframes ft-bounce { from { transform: translateY(6px); } to { transform: translateY(-6px); } }
.ft-ripple { fill: none; stroke: #ff3d9a; stroke-width: 6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ft-ripple.is-pressed { animation: ft-ripple .55s ease-out forwards; }
@keyframes ft-ripple { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(1.8); } }
.ft-guide rect { fill: rgba(206, 0, 113, 0.92); filter: drop-shadow(0 4px 8px rgba(206, 0, 113, 0.3)); }
.ft-scene__position, .ft-scene__legend { display: none; }
.ft-scene__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.ft-chip { padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.88rem; font-weight: 700; }
.ft-chip b { font-weight: 900; }
.ft-chip--pos { background: #fff; border: 1px solid #ecd9f4; color: var(--color-primary); }
.ft-chip--pos b { color: #ce0071; }
.ft-chip--up { background: #efe6ff; color: #5a1fb8; }
.ft-chip--down { background: #ffe3f0; color: #b8005f; }
@media (prefers-reduced-motion: reduce) { .ft-badge.is-up .ft-arrow, .ft-ripple.is-pressed { animation: none; } }

/* El pulgar nace de la palma: su copia se desvanece hacia la base y sube desde ahí, sin dejar un corte. */
.ft-lift[data-ft-finger="1"] { transform-origin: 85% 95%; }
.ft-lift[data-ft-finger="1"].is-up { transform: scale(1.07) translate(-1%, -2%); }
.ft-gap[data-ft-finger="1"] { fill: rgba(40, 20, 10, 0.2); }

/* Teclado virtual: dispositivo y letras del computador. */
.vkeys-device { display: grid; gap: 0.4rem; margin: 0.6rem 0; }
.vkeys-device__ask { margin: 0; font-weight: 800; color: var(--color-primary); }
.vkeys-device__row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.vkeys-device__chip { padding: 0.45rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font: inherit; font-weight: 700; color: var(--color-primary); cursor: pointer; }
.vkeys-device__chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.vkeys-device__hint { margin: 0; font-size: 0.88rem; }
.vkeys__white { flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3rem; }
.vkeys__black { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 0.35rem; }
.vkeys__kbd { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.2rem; border-radius: 5px; border: 1px solid #c9c4d8; background: #f4f1fb; color: #3a2a7a; font-family: inherit; font-size: 0.72rem; font-weight: 800; line-height: 1; box-shadow: 0 2px 0 #c9c4d8; }
.vkeys__black .vkeys__kbd { background: #3a3352; border-color: #57507a; color: #fff; box-shadow: 0 2px 0 #14111f; }
.vkeys__kbd.is-waiting { background: #ce0071; border-color: #ce0071; color: #fff; }
.vkeys .is-pressed { filter: brightness(0.82); }
.help-topic { scroll-margin-top: 90px; }

/* Teclado virtual en pantalla grande: solo el teclado. */
.vkeys-tool__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.vkeys-tool__head h2 { margin: 0; }
.vkeys-tool.is-big { position: fixed; inset: 0; z-index: 9999; margin: 0; border-radius: 0; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom)); background: var(--color-surface); overflow: auto; }
.vkeys-tool.is-big > p.muted, .vkeys-tool.is-big .taller-tool__select, .vkeys-tool.is-big .vkeys-device__ask, .vkeys-tool.is-big .vkeys-device__hint { display: none; }
.vkeys-tool.is-big .vkeys { flex: 1; height: auto; min-height: 220px; }
.vkeys-tool.is-big .vkeys__white { font-size: 0.9rem; }
.vkeys-tool.is-big .vkeys__kbd { min-width: 2rem; height: 2rem; font-size: 1rem; }
.vkeys-tool.is-big .vkeys-device { display: none; }

/* Entrada: WhatsApp para quien llega a probar la plataforma. */
.auth-whatsapp { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: 16px; background: #1faa53; color: #fff; text-decoration: none; box-shadow: 0 10px 24px rgba(31, 170, 83, 0.28); }
.auth-whatsapp:hover { background: #179447; }
.auth-whatsapp strong { display: block; font-size: 1.02rem; }
.auth-whatsapp small { display: block; opacity: 0.92; }
.auth-whatsapp > span:nth-child(2) { flex: 1; }
.auth-whatsapp__icon { font-size: 1.6rem; }
.auth-whatsapp__or { margin: 0.2rem 0 -0.3rem; }
.auth-whatsapp-cta { background: #1faa53 !important; border-color: #1faa53 !important; color: #fff !important; text-align: center; }

.admin-advisories__actions { flex-wrap: wrap; }
.admin-advisories__reschedule summary { list-style: none; cursor: pointer; }
.admin-advisories__reschedule summary::-webkit-details-marker { display: none; }
.admin-advisories__reschedule[open] > div { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

/* Ficha del estudiante: resumen "¿Qué ha hecho?" */
.activity-summary { display: grid; gap: 0.6rem; margin: 0.5rem 0 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.activity-summary h3, .activity-summary h4 { margin: 0; }
.activity-summary h4 { margin-top: 0.3rem; font-size: 0.95rem; color: var(--color-primary); }
.activity-summary__warn { margin: 0; padding: 0.55rem 0.8rem; border-radius: 12px; background: #fff6ec; color: #8a4708; font-size: 0.88rem; }
.activity-summary__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.activity-summary__tile { display: grid; gap: 0.15rem; padding: 0.7rem 0.8rem; border-radius: 14px; background: var(--color-surface-soft); }
.activity-summary__tile strong { font-size: 1.15rem; color: var(--color-primary); }
.activity-summary__tile span { font-size: 0.8rem; color: var(--color-text-soft); }
.activity-summary__tile.is-hot { background: #e3f6eb; }
.activity-summary__tile.is-warm { background: #fff6ec; }
.activity-summary__tile.is-cold { background: #ffe8f0; }
.activity-summary__pieces { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.activity-summary__pieces li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 12px; background: var(--color-surface-soft); }
.activity-summary__pieces li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 900; }
.activity-summary__pieces li.is-seen > span { background: #0b7a43; color: #fff; }
.activity-summary__pieces li.is-unseen > span { background: #ffd6e6; color: #a3005a; }
.activity-summary__pieces small { display: block; color: var(--color-text-soft); }
.activity-summary__pieces em { font-style: normal; font-size: 0.85rem; font-weight: 700; }
.activity-summary__pieces li.is-unseen em { color: #a3005a; }
/* Modo oscuro: las teclas siguen blancas, así que su texto va oscuro. */
:root[data-theme="dark"] .song-keys__white { color: #8a7fa0; }
:root[data-theme="dark"] .song-keys__white.is-used { color: #3d1690; }
:root[data-theme="dark"] .song-keys .song-keys__white.is-current b { color: #fff; }

/* Panel · inscripciones pendientes de pago */
.enrollment small { color: var(--color-text-soft); font-weight: 400; }
.enrollment__billing summary { color: var(--color-primary); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.enrollment__billing p { margin: 0.35rem 0 0; font-size: 0.88rem; }
.enrollment__months { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 700; }
.enrollment__months select { min-height: 36px; }

/* Los códigos de visita se despliegan solo cuando el equipo los necesita. */
.admin-preview-codes__list > summary { padding: 0.75rem 0; }
.admin-preview-codes__list:not([open]) .admin-preview-codes__hide,
.admin-preview-codes__list[open] .admin-preview-codes__show { display: none; }

/* Juego "Encuentra la nota" (bajo): diapasón con cuerdas y trastes 0–5. */
.sg-fretboard { display: grid; grid-template-columns: 2.6rem 2.4rem repeat(5, minmax(0, 1fr)); gap: 0; width: min(100%, 460px); padding: 6px 8px; border-radius: 12px; background: #4a2f1f; }
.sg-fretboard__num { padding-bottom: 4px; text-align: center; color: #e8d7c4; font-size: 0.7rem; font-weight: 700; }
.sg-fretboard__string { display: grid; align-items: center; color: #f3e6d6; font-size: 0.78rem; font-weight: 800; }
.sg-fret { position: relative; display: grid; place-items: center; height: 40px; padding: 0; border: 0; border-right: 3px solid #c9c2bd; background: transparent; cursor: pointer; }
.sg-fret::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: linear-gradient(#d9d2c8, #a8a096); }
.sg-fret.is-open { border-right: 6px solid #f1ebe3; }
.sg-fret:hover::after, .sg-fret:focus-visible::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.sg-fret:active::after { background: #ce0071; }
.sg-fretboard.is-static .sg-fret { cursor: default; }
.sg-fret b { position: relative; z-index: 1; display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 4px; border-radius: 999px; font-size: 0.72rem; color: #fff; }
.sg-fret[data-mark="is-ok"] b { background: #0b7a43; }
.sg-fret[data-mark="is-wrong"] b { background: #ce0071; }

/* Bienvenida del bajo: video horizontal. */
.welcome-video--wide video { width: min(100%, 720px); max-height: none; aspect-ratio: 16 / 9; border-radius: 18px; }

/* Imágenes guía dentro de una explicación (p. ej. digitación en el bajo). */
.lesson-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; max-width: 760px; margin: 0.75rem auto 1rem; }
.lesson-images__item { display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(34, 10, 99, 0.14); }
.lesson-images__item img { display: block; width: 100%; height: auto; }

/* Melodías en notación numérica (bajo): el número va grande. */
.note3--tab b { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }