/* ============================================================
   Análisis musical · Composición Módulo IV
   Hoja única: editorial / aula, legible, sin ruido visual
   ============================================================ */

:root {
  /* Base — noche porteña, papel digital */
  --bg-deep: #080a0e;
  --bg-elevated: #0f1218;
  --bg-card: rgba(18, 22, 30, 0.72);
  --bg-card-solid: #121620;

  --ink: #e6e9ef;
  --ink-soft: #a8b0bf;
  --ink-faint: #6b7380;

  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.1);

  /* Acento principal (dorado sobrio, no neón) */
  --accent: #d4a574;
  --accent-dim: rgba(212, 165, 116, 0.14);

  /* Tonos por bloque (sutiles, coherentes) */
  --tone-gold: 212 165 116;
  --tone-violet: 168 142 214;
  --tone-mint: 110 200 180;
  --tone-blue: 120 170 230;
  --tone-pink: 230 140 175;
  --tone-orange: 230 155 110;
  --tone-green: 130 200 130;
  --tone-cyan: 110 195 220;

  --font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Source Serif 4", "Georgia", serif;
  /* Títulos de obra (canciones, obras): Cormorant cursiva */
  --font-obra: "Cormorant", "Source Serif 4", serif;
  /* Cuerpo analítico: Literata (lectura prolongada) */
  --font-reading: "Literata", "Georgia", "Times New Roman", serif;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.45);

  --space-1: 0.5rem;
  --space-2: 0.85rem;
  --space-3: 1.25rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;
  --space-7: 4.5rem;

  /* Ancho útil: casi todo el viewport, con márgenes fluidos */
  --content-max: min(1760px, 98.5vw);
  --pad-inline: clamp(0.65rem, 2.5vw, 2.75rem);
  --pad-surface: clamp(1rem, 2.8vw, 3.25rem);

  /* Escala tipográfica fluida (cuerpo) */
  --step-0: clamp(1.0625rem, 0.95rem + 0.45vw, 1.1875rem);
  --step-1: clamp(1.125rem, 1rem + 0.55vw, 1.3125rem);
  --step-2: clamp(1.2rem, 1.05rem + 0.65vw, 1.45rem);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Las transiciones de hover se desactivan abajo solo donde hace falta */
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(90, 70, 120, 0.18), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 50%, rgba(40, 55, 95, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(120, 80, 40, 0.08), transparent 45%);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografía ---------- */
h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
  color: #e8c9a8;
}

/* Títulos utilitarios (compatibilidad con el HTML) */
.title.h-xxl {
  font-size: clamp(2rem, 1.2rem + 2.5vw, 2.85rem);
}

.title.h-xl {
  font-size: clamp(1.55rem, 1rem + 1.8vw, 2.1rem);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.title.h-xl.accent-3 {
  background: linear-gradient(135deg, #f0e6dc 0%, var(--accent) 55%, #a8c4e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.title.h-lg {
  font-size: clamp(1.35rem, 0.95rem + 1.2vw, 1.75rem);
}

.title.h-md {
  font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

/* Título de obra musical (cursiva tipográfica) */
cite.titulo-obra {
  font-family: var(--font-obra);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-feature-settings: "kern" 1, "liga" 1;
  color: rgba(245, 240, 232, 0.98);
}

/* Cabecera del bloque vídeo: obra en cursiva + intérprete en redonda */
.title-video {
  font-weight: 500;
  line-height: 1.35;
}

.title-video .title-video__sep {
  font-weight: 400;
  color: var(--ink-faint);
}

.title-video .title-video__artist {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  font-size: 0.92em;
}

.title-video__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.title-video__track-line {
  display: block;
  font-weight: 500;
}

/* ---------- Cabecera ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 10, 14, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Móvil: la cabecera no va pegada arriba; al desplazarte hacia abajo sube y deja de tapar el contenido */
@media (max-width: 720px) {
  .app-header {
    position: relative;
    top: auto;
    z-index: 10;
  }
}

.brand-track.is-brand-empty,
.title-video__track-line.is-brand-empty {
  display: none;
}

.app-footer__course.is-footer-brand-empty cite,
.app-footer__course.is-footer-brand-empty .footer-track-sep,
.app-footer__course.is-footer-brand-empty .asa-brand-artist,
.app-footer__course.is-footer-brand-empty .footer-app-sep {
  display: none;
}

.app-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--pad-inline);
}

.app-header__inner .app-brand {
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-header-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.app-brand--course .brand-dot {
  display: none;
}

/* Vista de conjunto (rejilla compacta) */
.overview-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.72rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(200, 206, 218, 0.92);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.overview-toggle:hover {
  background: rgba(212, 165, 116, 0.1);
  border-color: rgba(212, 165, 116, 0.28);
  color: var(--ink);
}

.overview-toggle[aria-pressed="true"] {
  background: rgba(212, 165, 116, 0.16);
  border-color: rgba(212, 165, 116, 0.42);
  color: #f0e6dc;
  box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.15);
}

.overview-toggle__glyph {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  box-shadow:
    0 0 0 1.5px rgba(212, 165, 116, 0.75),
    5px 0 0 1.5px rgba(212, 165, 116, 0.75),
    0 5px 0 1.5px rgba(212, 165, 116, 0.75),
    5px 5px 0 1.5px rgba(212, 165, 116, 0.75);
  opacity: 0.9;
}

.overview-toggle__label {
  max-width: 11rem;
  white-space: nowrap;
}

.overview-toggle__label-short {
  display: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--pad-inline);
}

.app-brand--course {
  align-items: flex-start;
}

.brand-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.brand-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.brand-headline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

.brand-track {
  margin: 0;
  font-size: clamp(0.88rem, 0.8rem + 0.28vw, 1.02rem);
  line-height: 1.4;
}

.brand-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.85rem + 0.35vw, 1.15rem);
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- Layout ---------- */
.main {
  padding: var(--space-4) 0 var(--space-7);
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-inline);
}

.content-surface {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--pad-surface);
  box-shadow: var(--shadow-soft);
}

/* ---------- Texto auxiliar ---------- */
.muted {
  color: var(--ink-soft);
}

.sheet-note {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.sheet-note-wrap {
  max-width: 52rem;
}

.sheet-note-hint {
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.sheet-note-code {
  font-size: 0.88em;
  padding: 0.08em 0.28em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kbd {
  font-family: var(--font-sans);
  font-size: 0.78em;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sheet-note-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.4rem;
}

.sheet-note-tool {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.sheet-note-tool:hover,
.sheet-note-tool:focus-visible {
  outline: none;
  color: var(--ink);
  background: rgba(212, 165, 116, 0.12);
  border-color: rgba(212, 165, 116, 0.35);
}

.sheet-note--editable {
  font-family: var(--font-reading);
  font-size: var(--step-0);
  line-height: 1.65;
  text-align: justify;
  color: var(--ink);
  min-height: 4.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sheet-note--editable:focus {
  outline: none;
  border-color: rgba(212, 165, 116, 0.45);
  box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.2);
}

.sheet-note--editable:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  pointer-events: none;
}

.sheet-note--editable strong,
.sheet-note--editable b {
  font-weight: 600;
  color: inherit;
}

.sheet-note--editable em,
.sheet-note--editable i {
  font-style: italic;
  color: inherit;
}

/* Texto analítico: bloques rellenables en clase */
.res-card--field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.res-field-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.res-field-tool {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.res-field-tool:hover,
.res-field-tool:focus-visible {
  outline: none;
  color: var(--ink);
  background: rgba(212, 165, 116, 0.12);
  border-color: rgba(212, 165, 116, 0.35);
}

.res-field--editable {
  font-family: var(--font-reading);
  font-size: var(--step-0);
  line-height: 1.65;
  text-align: justify;
  color: var(--ink);
  min-height: 5.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.res-field--editable:focus {
  outline: none;
  border-color: rgba(212, 165, 116, 0.45);
  box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.2);
}

.res-field--editable:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  pointer-events: none;
}

.res-field--editable strong,
.res-field--editable b {
  font-weight: 600;
  color: inherit;
}

.res-field--editable em,
.res-field--editable i {
  font-style: italic;
}

.sheet-note--editable .asa-rich-arrow-list,
.res-field--editable .asa-rich-arrow-list {
  list-style: none;
  margin: 0.18rem 0 0.25rem;
  padding: 0;
}

.sheet-note--editable .asa-rich-arrow-list li,
.res-field--editable .asa-rich-arrow-list li {
  position: relative;
  margin: 0.2rem 0;
  padding-left: 1.2rem;
}

.sheet-note--editable .asa-rich-arrow-list li::before,
.res-field--editable .asa-rich-arrow-list li::before {
  content: "➤";
  position: absolute;
  left: 0;
  top: 0.02rem;
  color: color-mix(in srgb, var(--accent) 72%, #ffffff 28%);
  font-weight: 700;
}

.center {
  text-align: center;
}

.text-block-spacing {
  margin-bottom: var(--space-3);
}

/* ---------- Vídeo ---------- */
.hero-video {
  margin-bottom: var(--space-4);
}

.hero-video .video-frame {
  margin-top: 0;
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.12),
    var(--shadow-lift);
}

.video-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: var(--space-2) 0;
  border-radius: var(--radius-md);
  background: #000;
}

/* Borde activable (por encima del iframe): doble clic = modo estudio */
.video-frame__studio-hit {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  cursor: ew-resize;
  background: linear-gradient(
    90deg,
    rgba(212, 165, 116, 0.42) 0%,
    rgba(212, 165, 116, 0.08) 72%,
    transparent 100%
  );
  opacity: 0.88;
  transition: opacity 0.22s ease, box-shadow 0.22s ease;
}

.video-frame__studio-hit:hover,
.video-frame__studio-hit:focus-visible {
  opacity: 1;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.55);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-frame iframe#asa-youtube-iframe {
  z-index: 2;
}

iframe#asa-youtube-iframe[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.title-video--studio-trigger {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0.15em 0.1em;
  margin-left: -0.1em;
  transition:
    color 0.2s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .title-video--studio-trigger:hover {
    background: rgba(212, 165, 116, 0.08);
    box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.2);
  }
}

/* Layout en columna por defecto; en modo estudio → dos paneles */
.studio-split {
  display: block;
}

body.split-studio .studio-split {
  display: grid;
  grid-template-columns: minmax(240px, 40%) minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.85rem);
  align-items: start;
  min-height: 0;
}

body.split-studio .studio-split__media {
  position: sticky;
  top: calc(4.25rem + env(safe-area-inset-top, 0px));
  align-self: start;
  z-index: 2;
}

body.split-studio .studio-split__rest {
  min-width: 0;
  padding-left: clamp(0.85rem, 2vw, 1.35rem);
  border-left: 1px solid var(--line-strong);
  margin-left: -1px;
}

body.split-studio .hero-video .video-frame {
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.18),
    var(--shadow-lift);
}

body.split-studio .video-frame {
  padding-bottom: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(42vh, 380px);
  width: 100%;
}

/* object-fit en iframe puede dejar el embed de YouTube sin pintar en WebKit */

/* Modo estudio desde un campo de comentario: comentario izquierda, partitura derecha. */
body.split-studio.split-studio--topic .hero-video--muted {
  display: none;
}

body.split-studio.split-studio--topic .studio-split {
  grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
}

body.split-studio.split-studio--topic .studio-split__media {
  align-self: start;
  top: calc(5.95rem + env(safe-area-inset-top, 0px));
  max-height: calc(100vh - (5.95rem + env(safe-area-inset-top, 0px)) - 0.65rem);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.split-studio.split-studio--topic .res-topic--study {
  margin: 0;
}

body.split-studio.split-studio--topic .res-topic--study .res-title {
  margin-top: 0;
}

body.split-studio.split-studio--topic .studio-split__rest .resumen-page,
body.split-studio.split-studio--topic .studio-split__rest > .hr:last-of-type {
  display: none;
}

@media (max-width: 900px) {
  /* Menos hueco bajo la cabecera: el vídeo queda pegado al bloque superior y tapa el scroll del resto */
  body.split-studio:not(.overview-mode) .main {
    padding-top: max(0.15rem, env(safe-area-inset-top, 0px));
    padding-bottom: var(--space-4);
  }

  body.split-studio:not(.overview-mode) .container {
    padding-top: 0;
  }

  body.split-studio:not(.overview-mode) .content-surface {
    padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
  }

  body.split-studio .studio-split {
    grid-template-columns: 1fr;
  }

  body.split-studio .studio-split__media {
    position: sticky;
    top: calc(3.35rem + env(safe-area-inset-top, 0px));
    z-index: 3;
    background: var(--bg-elevated);
    margin: 0;
    padding: 0 0 0.35rem;
    border-radius: var(--radius-md);
  }

  body.split-studio .hero-video {
    margin-bottom: 0.25rem;
    margin-top: 0;
  }

  body.split-studio .studio-split__rest {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(0.75rem, 2.5vw, 1.25rem);
  }

  /* Vídeo más compacto: deja más altura al texto bajo el título */
  body.split-studio .video-frame {
    aspect-ratio: 16 / 9;
    max-height: min(32vh, 200px);
    height: auto;
    padding-bottom: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  body.split-studio.split-studio--topic .studio-split__media {
    top: calc(4.35rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.2rem;
    max-height: calc(100vh - (4.35rem + env(safe-area-inset-top, 0px)) - 0.5rem);
  }
}

/* ---------- Partituras ---------- */
.sheet-strip {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}

.figure {
  margin: 0;
  text-align: center;
}

.figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s ease,
    border-color 0.38s ease;
  cursor: zoom-in;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .figure:not(.figure--sheet) img:hover {
    transform: translateY(-6px) scale(1.008);
    box-shadow:
      0 22px 56px rgba(0, 0, 0, 0.58),
      0 0 0 1px rgba(212, 165, 116, 0.18);
    border-color: rgba(255, 255, 255, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .figure:not(.figure--sheet) img {
    transition: none;
  }

  .figure:not(.figure--sheet) img:hover {
    transform: none;
  }
}

/* Partituras en SVG: lienzo blanco para que no se vea el fondo oscuro por transparencias */
.figure--sheet {
  --sheet-pad: clamp(0.65rem, 2vw, 1.35rem);
  margin: 0;
  display: block;
  width: 100%;
  background: #ffffff;
  padding: var(--sheet-pad);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-lift);
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s ease,
    border-color 0.38s ease;
  will-change: transform;
}

.figure.figure--sheet img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

/* Acento lateral partituras (tonos alineados con el análisis) */
.sheet-strip .figure.figure--sheet:nth-child(1) {
  --sheet-tone: var(--tone-gold);
}
.sheet-strip .figure.figure--sheet:nth-child(2) {
  --sheet-tone: var(--tone-violet);
}
.sheet-strip .figure.figure--sheet:nth-child(3) {
  --sheet-tone: var(--tone-mint);
}

/*
  Carril dentro de .sheet-page: misma altura que el SVG (figure fijo solo mide el viewport).
  Hueco con padding-left en .sheet-page para que la imagen no tape la franja.
*/
.figure.figure--sheet .sheet-page {
  position: relative;
  display: block;
  width: 100%;
  min-height: min-content;
  z-index: 1;
}

/* Sin padding izquierdo en el figure: la franja queda en el borde interior blanco (sin hueco gris). */
.figure.figure--sheet.has-sheet-rail {
  position: relative;
  padding: var(--sheet-pad) var(--sheet-pad) var(--sheet-pad) 0;
}

/* Carril en los primeros 12px; la imagen empieza después */
.figure.figure--sheet.has-sheet-rail .sheet-page {
  padding-left: 12px;
  box-sizing: border-box;
}

.sheet-spotlight-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 12;
  margin: 0;
  padding: 0;
  border: 0;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  cursor: zoom-in;
  touch-action: manipulation;
  pointer-events: auto;
  opacity: 1;
  /* Color sólido + degradado: evita “transparente” por composición */
  background-color: rgb(var(--sheet-tone) / 0.88);
  background-image: linear-gradient(
    180deg,
    rgb(var(--sheet-tone) / 0.95),
    rgb(var(--sheet-tone) / 0.42)
  );
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06);
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.sheet-spotlight-rail:hover,
.sheet-spotlight-rail:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

/* Envuelve la partitura; la rueda del ratón se engancha aquí (overview.js). */
.sheet-scroll {
  display: block;
  width: 100%;
}

/* Contenedor de partitura: zoom/paneo y anotaciones (modo ampliado) */
.sheet-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: var(--radius-sm);
  flex: 1;
  min-height: 72px;
}

.sheet-viewport--grab {
  cursor: grab;
}

.sheet-viewport--grabbing {
  cursor: grabbing;
}

.sheet-viewport--grab .sheet-viewport__pan img {
  user-select: none;
  -webkit-user-drag: none;
}

.sheet-viewport__pan {
  position: relative;
  display: block;
  width: 100%;
  transform-origin: top left;
  /* Partitura ampliada: zoom por ancho; los textos usan esto para escalar el cuerpo proporcionalmente. */
  --sheet-anno-zoom: 1;
}

.sheet-viewport__pan img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.sheet-anno-paste-image-wrap .sheet-anno-paste-image {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: move;
}

.sheet-anno-paste-image {
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.sheet-censor-preview {
  pointer-events: none;
}

.sheet-draw-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  z-index: 3;
}

.sheet-censor-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  z-index: 2;
}

/* Textos y marcos encima del dibujo del lápiz (no del archivo SVG) */
.sheet-annotate-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  box-sizing: border-box;
}

/* Solo recibe clics en modo texto/cuadro (overview.js); las anotaciones son hermanas con z-index mayor. */
.sheet-annotate-layer__placement {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Por encima del fondo de la capa pero debajo de anotaciones (z-index 2) para recibir clics en huecos. */
  z-index: 1;
  pointer-events: none;
}

/*
 * Fuera del modo edición de partitura (spotlight): capa anotaciones y dibujo no interactivos;
 * el desplazamiento vertical sigue en .sheet-scroll.
 */
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-annotate-layer,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-annotate-layer__placement {
  pointer-events: none !important;
}

.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-draw-canvas {
  pointer-events: none !important;
}

.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-text-host,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-box-wrap,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-censor-wrap,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-bracket-wrap,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-arrow-wrap,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-paste-image-wrap {
  pointer-events: none !important;
}

.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-text {
  user-select: none;
  -webkit-user-select: none;
}

.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-resize,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-text-move-edge,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-remove,
.figure.figure--sheet:not(.figure--sheet-spotlight) .sheet-anno-arrow-handle {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* El ancla (left/top %) es la esquina superior izquierda del bloque; arrastre por franjas en los cuatro bordes. */
.sheet-anno-text-host {
  position: absolute;
  z-index: 2;
  display: inline-block;
  vertical-align: top;
  max-width: none;
  transform: none;
  pointer-events: auto;
  /*
   * Inset fijo en px: si depende de --sheet-anno-zoom, al pasar spotlight→página cambia el zoom
   * del texto pero no el de los SVG y el bloque “salta” dentro del host (misma ax/ay %).
   * El scale() del .sheet-viewport__pan en vista normal ya escala todo junto a la partitura.
   */
  --text-move-inset: 0px;
  --text-move-side: 0px;
  --text-drag-edge-x: 11px;
  --text-drag-edge-y: 10px;
}

.sheet-anno-text-host.sheet-anno--active,
.sheet-anno-box-wrap.sheet-anno--active,
.sheet-anno-bracket-wrap.sheet-anno--active,
.sheet-anno-arrow-wrap.sheet-anno--active {
  z-index: 12;
}

/* Sin foco ni hover: solo el texto (sin panel gris); franjas de arrastre y × ocultas. */
.sheet-anno-text-host:not(:hover):not(:focus-within) .sheet-anno-text-move-edge {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sheet-anno-text-host:not(:hover):not(:focus-within) .sheet-anno-text {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.sheet-anno-text-host:not(:hover):not(:focus-within) .sheet-anno-remove {
  opacity: 0;
  pointer-events: none;
}

/* Franjas en los cuatro bordes (mismo velo ámbar al hover que el texto). */
.sheet-anno-text-move-edge {
  position: absolute;
  z-index: 5;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  box-sizing: border-box;
  transition:
    opacity 0.14s ease,
    visibility 0.14s ease,
    background 0.12s ease;
}

.sheet-anno-text-move-edge--start {
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--text-drag-edge-x);
  height: auto;
  border-radius: 5px 0 0 5px;
}

.sheet-anno-text-move-edge--end {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--text-drag-edge-x);
  height: auto;
  border-radius: 0 5px 5px 0;
}

.sheet-anno-text-move-edge--top {
  left: 0;
  right: 0;
  top: 0;
  height: var(--text-drag-edge-y);
  width: auto;
  border-radius: 5px 5px 0 0;
}

.sheet-anno-text-move-edge--bottom {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: var(--text-drag-edge-y);
  width: auto;
  border-radius: 0 0 5px 5px;
}

.sheet-anno-text-move-edge:hover,
.sheet-anno-text-move-edge:focus-visible {
  outline: none;
  background: rgba(212, 165, 116, 0.18);
}

.sheet-anno-text-move-edge:active {
  cursor: grabbing;
}

.sheet-anno--dragging,
.sheet-anno--dragging .sheet-anno-text,
.sheet-anno--dragging .sheet-anno-box {
  cursor: grabbing !important;
  user-select: none;
}

.sheet-anno-text {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-width: 2.75em;
  min-height: 1.35em;
  word-wrap: normal;
  overflow-wrap: normal;
  white-space: pre;
  /* --anno-font-px lo controla JS según ancho real del bitmap. */
  font-size: calc(var(--anno-font-px, 15) * 1px);
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  /* Sin padding horizontal: evita micro-deriva visual lateral al hacer la ventana muy pequeña. */
  padding: 0.18em 0;
  border-radius: 0.28em;
  font-family: var(--font-sans);
  line-height: 1.3;
  /* El color lo fija la paleta (inline); si no hay, tono papel */
  color: rgba(252, 250, 246, 0.98);
  text-shadow: 0 0.07em 0.14em rgba(0, 0, 0, 0.65);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  cursor: text;
  outline: none;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

/* Edición: velo mínimo para no tapar la partitura; tono papel / ámbar casi imperceptible */
.sheet-anno-text-host:hover .sheet-anno-text,
.sheet-anno-text:focus {
  border-color: rgba(212, 165, 116, 0.22);
  background: rgba(255, 248, 238, 0.07);
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.1),
    0 0.06em 0.22em rgba(0, 0, 0, 0.12);
}

.sheet-anno-text:focus {
  border-color: rgba(212, 165, 116, 0.32);
  background: rgba(255, 242, 228, 0.11);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.14),
    0 0.07em 0.32em rgba(0, 0, 0, 0.14);
}

.sheet-anno-text-host:hover .sheet-anno-text-move-edge,
.sheet-anno-text-host:focus-within .sheet-anno-text-move-edge,
.sheet-anno-text-host.sheet-anno--active .sheet-anno-text-move-edge,
.sheet-anno-text-host.sheet-anno--dragging .sheet-anno-text-move-edge {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sheet-anno-text strong,
.sheet-anno-text b {
  font-weight: 700;
}

.sheet-anno-text em,
.sheet-anno-text i {
  font-style: italic;
}

.sheet-anno-remove {
  position: absolute;
  top: calc(-10px * var(--sheet-anno-zoom, 1));
  right: calc(-10px * var(--sheet-anno-zoom, 1));
  width: calc(1.15rem * var(--sheet-anno-zoom, 1));
  height: calc(1.15rem * var(--sheet-anno-zoom, 1));
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: calc(0.72rem * var(--sheet-anno-zoom, 1));
  line-height: 1;
  cursor: pointer;
  color: rgba(240, 242, 248, 0.95);
  background: rgba(28, 32, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0.88;
  transition:
    opacity 0.12s ease,
    visibility 0.12s ease;
  z-index: 4;
  touch-action: manipulation;
}

/* Texto: × y em relativos al font-size del host (overview.js), no a --sheet-anno-zoom del pan. */
/* Marco transparente / corchete / flecha: × solo al pasar el ratón o con foco en el bloque (como el texto). */
.sheet-anno-box-wrap:not(:hover):not(:focus-within) .sheet-anno-remove,
.sheet-anno-bracket-wrap:not(:hover):not(:focus-within) .sheet-anno-remove,
.sheet-anno-arrow-wrap:not(:hover):not(:focus-within) .sheet-anno-remove,
.sheet-anno-paste-image-wrap:not(:hover):not(:focus-within) .sheet-anno-remove {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sheet-anno-text-host:hover .sheet-anno-remove,
.sheet-anno-text-host:focus-within .sheet-anno-remove,
.sheet-anno-text-host.sheet-anno--active .sheet-anno-remove,
.sheet-anno-box-wrap:hover .sheet-anno-remove,
.sheet-anno-box-wrap:focus-within .sheet-anno-remove,
.sheet-anno-box-wrap.sheet-anno--active .sheet-anno-remove,
.sheet-anno-bracket-wrap:hover .sheet-anno-remove,
.sheet-anno-bracket-wrap:focus-within .sheet-anno-remove,
.sheet-anno-bracket-wrap.sheet-anno--active .sheet-anno-remove,
.sheet-anno-arrow-wrap:hover .sheet-anno-remove,
.sheet-anno-arrow-wrap:focus-within .sheet-anno-remove,
.sheet-anno-arrow-wrap.sheet-anno--active .sheet-anno-remove,
.sheet-anno-paste-image-wrap:hover .sheet-anno-remove,
.sheet-anno-paste-image-wrap:focus-within .sheet-anno-remove,
.sheet-anno-paste-image-wrap.sheet-anno--active .sheet-anno-remove,
.sheet-anno-remove:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (hover: none) {
  .sheet-anno-text-host {
    --text-drag-edge-x: 17px;
    --text-drag-edge-y: 16px;
  }

  .sheet-anno-text-host .sheet-anno-remove {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sheet-anno-box-wrap:focus-within .sheet-anno-remove,
  .sheet-anno-bracket-wrap:focus-within .sheet-anno-remove,
  .sheet-anno-arrow-wrap:focus-within .sheet-anno-remove,
  .sheet-anno-paste-image-wrap:focus-within .sheet-anno-remove {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sheet-anno-text-host:focus-within .sheet-anno-text-move-edge,
  .sheet-anno-text-host.sheet-anno--dragging .sheet-anno-text-move-edge {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sheet-anno-text-host .sheet-anno-text {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .sheet-anno-text-host:focus-within .sheet-anno-text {
    border-color: rgba(212, 165, 116, 0.3);
    background: rgba(255, 242, 228, 0.11);
    box-shadow:
      0 0 0 1px rgba(212, 165, 116, 0.12),
      0 0.07em 0.32em rgba(0, 0, 0, 0.14);
  }
}

@media (hover: none) and (pointer: coarse) {
  .sheet-anno-remove {
    width: 1.45rem;
    height: 1.45rem;
    min-width: 28px;
    min-height: 28px;
    font-size: 0.85rem;
    top: -12px;
    right: -12px;
  }

}

.sheet-anno-remove:hover {
  background: rgba(212, 82, 82, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
}

.sheet-anno-box-wrap {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  pointer-events: auto;
}

.sheet-anno-censor-wrap {
  position: absolute;
  z-index: 1;
  background: #fff;
  pointer-events: none;
  display: none; /* Persistencia/edición lógica; se rasteriza en .sheet-censor-canvas */
}

/* Imagen superpuesta: mismas coordenadas % que marcos/texto (overview.js). */
.sheet-anno-paste-image-wrap {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: auto;
}

.sheet-anno-bracket-wrap,
.sheet-anno-arrow-wrap {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  pointer-events: auto;
}

.sheet-anno-bracket-wrap svg,
.sheet-anno-arrow-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sheet-anno-arrow-handle {
  cursor: grab;
  pointer-events: auto;
  transition:
    opacity 0.14s ease,
    visibility 0.14s ease;
}

.sheet-anno-arrow-handle--tip {
  cursor: nwse-resize;
}

.sheet-anno-arrow-head {
  pointer-events: none;
}

.sheet-anno-resize {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 6;
  border-radius: 2px;
  background: rgba(252, 250, 248, 0.96);
  border: 1px solid rgba(24, 28, 36, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  touch-action: none;
  transition:
    opacity 0.14s ease,
    visibility 0.14s ease;
}

.sheet-anno-resize--nw {
  left: -6px;
  top: -6px;
  cursor: nw-resize;
}

.sheet-anno-resize--se {
  right: -6px;
  bottom: -6px;
  cursor: se-resize;
}

/* Marco transparente / corchete / flecha: asas NW–SE (y puntos de curva en flecha) solo con hover o foco. */
.sheet-anno-box-wrap:not(:hover):not(:focus-within) .sheet-anno-resize,
.sheet-anno-bracket-wrap:not(:hover):not(:focus-within) .sheet-anno-resize,
.sheet-anno-arrow-wrap:not(:hover):not(:focus-within) .sheet-anno-resize,
.sheet-anno-arrow-wrap:not(:hover):not(:focus-within) .sheet-anno-arrow-handle,
.sheet-anno-paste-image-wrap:not(:hover):not(:focus-within) .sheet-anno-resize {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sheet-anno-box-wrap:hover .sheet-anno-resize,
.sheet-anno-box-wrap:focus-within .sheet-anno-resize,
.sheet-anno-box-wrap.sheet-anno--active .sheet-anno-resize,
.sheet-anno-bracket-wrap:hover .sheet-anno-resize,
.sheet-anno-bracket-wrap:focus-within .sheet-anno-resize,
.sheet-anno-bracket-wrap.sheet-anno--active .sheet-anno-resize,
.sheet-anno-arrow-wrap:hover .sheet-anno-resize,
.sheet-anno-arrow-wrap:focus-within .sheet-anno-resize,
.sheet-anno-arrow-wrap.sheet-anno--active .sheet-anno-resize,
.sheet-anno-arrow-wrap:hover .sheet-anno-arrow-handle,
.sheet-anno-arrow-wrap.sheet-anno--active .sheet-anno-arrow-handle,
.sheet-anno-arrow-wrap:focus-within .sheet-anno-arrow-handle,
.sheet-anno-paste-image-wrap:hover .sheet-anno-resize,
.sheet-anno-paste-image-wrap:focus-within .sheet-anno-resize,
.sheet-anno-paste-image-wrap.sheet-anno--active .sheet-anno-resize {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Durante arrastre de esquina (clase reutilizada en marco/corchete/flecha). */
.sheet-anno-box-wrap.sheet-anno-box-wrap--resizing .sheet-anno-resize,
.sheet-anno-bracket-wrap.sheet-anno-box-wrap--resizing .sheet-anno-resize,
.sheet-anno-arrow-wrap.sheet-anno-box-wrap--resizing .sheet-anno-resize,
.sheet-anno-paste-image-wrap.sheet-anno-box-wrap--resizing .sheet-anno-resize {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sheet-anno-box-wrap:focus,
.sheet-anno-bracket-wrap:focus,
.sheet-anno-arrow-wrap:focus,
.sheet-anno-paste-image-wrap:focus {
  outline: none;
}

.sheet-anno-box-wrap--resizing .sheet-anno-box {
  cursor: se-resize;
}

.sheet-anno-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 3px;
  pointer-events: auto;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
}

.sheet-anno-box-wrap:active .sheet-anno-box {
  cursor: grabbing;
}

.sheet-anno-box--draft {
  pointer-events: none;
  border-style: dashed !important;
}

/* Lápiz/borrador: el canvas recibe eventos; en modo mano applyToolUI pone none (inline). */
.figure.figure--sheet.figure--sheet-spotlight
  .sheet-viewport:not(.sheet-viewport--grab)
  .sheet-draw-canvas {
  pointer-events: auto;
}

.sheet-laser-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  display: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 95, 85, 1) 0%,
    rgba(255, 95, 85, 0.45) 35%,
    rgba(255, 95, 85, 0) 72%
  );
  box-shadow:
    0 0 10px 3px rgba(255, 70, 60, 0.85),
    0 0 22px 6px rgba(255, 120, 90, 0.35);
}

.sheet-tooldock {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  flex-shrink: 0;
}

/* Paleta: más ancha en pantallas grandes, más compacta en móvil */
.figure.figure--sheet.figure--sheet-spotlight .sheet-tooldock {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  /* Por encima del panel y del velo; el figure ya no recorta con overflow:auto */
  z-index: 6000;
  right: max(0.35rem, env(safe-area-inset-right));
  top: 50%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  margin: 0;
  width: clamp(2.65rem, 3.2vmin + 1.85rem, 3.35rem);
  min-width: clamp(2.65rem, 3.2vmin + 1.85rem, 3.35rem);
  max-width: 3.45rem;
  max-height: min(96svh, 100%);
  padding: clamp(0.22rem, 0.45vmin, 0.38rem) clamp(0.12rem, 0.28vmin, 0.22rem);
  gap: clamp(0.16rem, 0.35vmin, 0.38rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(8, 10, 14, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(10px, 1.1vmin, 14px);
  box-shadow:
    0 3px 18px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-tooldock > .sheet-tool {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.sheet-tool__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.42em;
  height: 1.42em;
  flex-shrink: 0;
}

.sheet-tool__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sheet-tooldock__handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.1rem 0.22rem;
  margin: 0 0 0.06rem;
  cursor: grab;
  touch-action: none;
  border-radius: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sheet-tooldock__handle:active {
  cursor: grabbing;
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-tooldock__grip {
  width: clamp(0.75rem, 1.5vmin + 0.35rem, 1.15rem);
  height: clamp(0.28rem, 0.5vmin + 0.2rem, 0.42rem);
}

.sheet-tooldock__grip {
  display: block;
  width: 0.95rem;
  height: 0.35rem;
  border-radius: 2px;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0 2px,
    transparent 2px 5px
  );
  opacity: 0.75;
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-tool {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(1.45rem, 2.9vmin + 0.55rem, 2.15rem);
  padding: clamp(0.1rem, 0.25vmin, 0.18rem) clamp(0.06rem, 0.18vmin, 0.12rem);
  font-size: clamp(0.62rem, 1.25vmin + 0.42rem, 0.95rem);
  border-radius: clamp(5px, 0.55vmin, 8px);
  color: rgba(230, 233, 240, 0.96);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-tool:hover {
  background: rgba(212, 165, 116, 0.14);
  border-color: rgba(212, 165, 116, 0.35);
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-tool.is-active {
  background: rgba(212, 165, 116, 0.22);
  border-color: rgba(212, 165, 116, 0.45);
  color: #fdf8f2;
}

/* Móvil / pantalla estrecha: barra inferior deslizable (la columna derecha queda fuera o tapada) */
@media (max-width: 640px), (max-height: 520px) {
  .figure.figure--sheet.figure--sheet-spotlight .sheet-tooldock {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    left: max(0.35rem, env(safe-area-inset-left));
    right: max(0.35rem, env(safe-area-inset-right));
    top: auto;
    bottom: max(0.45rem, env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: min(44vh, 11rem);
    min-height: 2.85rem;
    padding: 0.32rem 0.4rem;
    gap: 0.28rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    z-index: 6200;
  }

  .figure.figure--sheet.figure--sheet-spotlight .sheet-tooldock > .sheet-tool {
    flex: 0 0 auto;
    width: auto;
    min-width: 2.35rem;
    min-height: 2.35rem;
    font-size: clamp(0.65rem, 2.8vw, 0.85rem);
  }

  .figure.figure--sheet.figure--sheet-spotlight .sheet-tooldock__handle {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0.2rem 0.15rem;
    margin: 0 0.1rem 0 0;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}

body.overview-mode .sheet-tooldock {
  display: none !important;
}

/* En vista conjunto la paleta sigue oculta; si hay partitura ampliada, el modo conjunto ya se cerró */
body.overview-mode .figure.figure--sheet.figure--sheet-spotlight .sheet-tooldock {
  display: flex !important;
}

/* Paletas contextuales (clic derecho en lápiz / goma) */
.sheet-tool-popover {
  position: fixed;
  z-index: 6100;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(0.28rem, 0.6vmin, 0.45rem);
  padding: clamp(0.28rem, 0.65vmin, 0.42rem) clamp(0.35rem, 0.85vmin, 0.55rem);
  background: rgba(12, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: sheet-popover-in 0.14s ease-out both;
}

@keyframes sheet-popover-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sheet-tool-popover--colors {
  padding: clamp(0.35rem, 0.75vmin, 0.5rem) clamp(0.42rem, 0.9vmin, 0.6rem);
  gap: clamp(0.32rem, 0.7vmin, 0.5rem);
}

.sheet-tool-popover__swatch {
  width: clamp(1.25rem, 2.6vmin + 0.45rem, 1.68rem);
  height: clamp(1.25rem, 2.6vmin + 0.45rem, 1.68rem);
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.sheet-tool-popover__swatch:hover,
.sheet-tool-popover__swatch:focus-visible {
  outline: none;
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.55);
}

.sheet-tool-popover--erase.sheet-tool-popover--sizes {
  border-radius: 16px;
  padding: 0.4rem 0.45rem;
  gap: 0.35rem;
}

.sheet-tool-popover__erase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: clamp(3.1rem, 8vmin, 3.75rem);
  min-height: clamp(3.5rem, 9vmin, 4.1rem);
  padding: 0.35rem 0.25rem 0.4rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.12s ease,
    transform 0.12s ease;
}

.sheet-tool-popover__erase-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  color: rgba(240, 200, 210, 0.95);
}

.sheet-tool-popover__erase-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sheet-tool-popover__erase:hover,
.sheet-tool-popover__erase:focus-visible {
  outline: none;
  background: rgba(212, 165, 116, 0.18);
  transform: scale(1.06);
}

.sheet-tool-popover__erase-dot {
  display: block;
  border-radius: 50%;
  background: rgba(230, 233, 240, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

/* Paleta texto / marcos (clic derecho en T o ▢) */
.sheet-tool-popover--annotate {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: min(420px, 96vw);
  border-radius: 16px;
  row-gap: 0.55rem;
  padding: clamp(0.4rem, 1vmin, 0.55rem) clamp(0.45rem, 1.1vmin, 0.65rem);
}

.sheet-tool-popover__row--symbols .sheet-tool-popover__symbol-grid {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  max-height: min(42vh, 280px);
  overflow-y: auto;
  padding-right: 0.15rem;
  margin-top: 0.15rem;
}

.sheet-tool-popover__btn--symbol {
  min-width: 1.75rem;
  min-height: 1.65rem;
  padding: 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
}

.sheet-tool-popover__btn--gesture {
  padding: 0.28rem 0.42rem;
  color: rgba(236, 118, 118, 0.98);
}

.sheet-tool-popover__btn--gesture .sheet-quick-gesture__svg {
  display: block;
  width: 1.28rem;
  height: 1.28rem;
}

.sheet-tool-popover__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.sheet-tool-popover__label {
  flex: 0 0 100%;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(168, 176, 191, 0.88);
}

.sheet-tool-popover__btn {
  min-width: 2.1rem;
  min-height: 1.85rem;
  padding: 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(230, 233, 240, 0.95);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

.sheet-tool-popover__btn:hover,
.sheet-tool-popover__btn:focus-visible {
  outline: none;
  background: rgba(212, 165, 116, 0.16);
  border-color: rgba(212, 165, 116, 0.4);
}

.sheet-tool-popover__btn.is-on {
  background: rgba(212, 165, 116, 0.24);
  border-color: rgba(212, 165, 116, 0.5);
  color: #fdf8f2;
}

.sheet-tool-popover__divider {
  flex: 0 0 100%;
  height: 1px;
  margin: 0.1rem 0;
  background: rgba(255, 255, 255, 0.08);
}

.sheet-tool-popover__swatch--box {
  border-radius: 6px;
}

.sheet-tooldock__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.sheet-tooldock__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.sheet-tooldock__nav-mid {
  display: flex;
  flex-direction: row;
  gap: 3px;
  justify-content: center;
}

.sheet-tool {
  min-width: 1.65rem;
  min-height: 1.65rem;
  padding: 0 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(30, 34, 44, 0.95);
  background: linear-gradient(180deg, #f8f9fc 0%, #e4e8f0 100%);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sheet-tool:hover {
  background: #fff;
  border-color: rgba(212, 165, 116, 0.45);
}

.sheet-tool.is-active {
  background: rgba(212, 165, 116, 0.28);
  border-color: rgba(212, 165, 116, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sheet-tool:disabled,
.sheet-tool.sheet-tool--disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.25);
  box-shadow: none;
}

.sheet-tool:disabled:hover,
.sheet-tool.sheet-tool--disabled:hover {
  background: linear-gradient(180deg, #f8f9fc 0%, #e4e8f0 100%);
  border-color: rgba(0, 0, 0, 0.14);
}

.figure.figure--sheet.figure--sheet-spotlight {
  position: fixed;
  left: clamp(0.5rem, 2.5vw, 1.5rem);
  right: clamp(0.5rem, 2.5vw, 1.5rem);
  top: clamp(0.5rem, 2.5vw, 1.5rem);
  bottom: clamp(0.5rem, 2.5vw, 1.5rem);
  z-index: 5001;
  width: auto;
  height: auto;
  max-height: none;
  margin: 0;
  /* visible: si overflow:auto, el fixed de la paleta queda recortado detrás del panel */
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  padding: var(--sheet-pad) var(--sheet-pad) var(--sheet-pad) 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.22),
    0 24px 80px rgba(0, 0, 0, 0.55);
  transform-origin: 85% 38%;
  animation: spotlight-pop 1.85s linear both;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: visible;
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-spotlight-rail {
  z-index: 50;
  mix-blend-mode: normal;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.figure.figure--sheet.figure--sheet-spotlight .sheet-spotlight-rail:hover,
.figure.figure--sheet.figure--sheet-spotlight .sheet-spotlight-rail:focus-visible {
  filter: brightness(1.12) saturate(1.08);
  opacity: 1;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .figure.figure--sheet.figure--sheet-spotlight {
    animation: none !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .figure.figure--sheet:hover {
    transform: translateY(-6px) scale(1.004);
    box-shadow:
      0 22px 56px rgba(0, 0, 0, 0.58),
      0 0 0 1px rgba(212, 165, 116, 0.22);
    border-color: rgba(0, 0, 0, 0.14);
  }
  /*
   * Modo edición (spotlight): el hover de la miniatura aplica transform en el figure entero.
   * Eso rompe la coherencia entre left/top % del host y getBoundingClientRect(img vs texto) → texto “salta”.
   */
  .figure.figure--sheet.figure--sheet-spotlight:hover {
    transform: none;
    box-shadow:
      0 0 0 1px rgba(212, 165, 116, 0.22),
      0 24px 80px rgba(0, 0, 0, 0.55);
    border-color: rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .figure--sheet {
    transition: none;
    will-change: auto;
  }

  .figure.figure--sheet:hover {
    transform: none;
  }
}

.figure figcaption {
  margin-top: var(--space-2);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.45;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Separador ---------- */
.hr {
  border: none;
  height: 1px;
  margin: var(--space-5) 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 165, 116, 0.35) 50%,
    transparent
  );
}

/* ---------- Bloques analíticos ---------- */
.resumen-page {
  --ink-block: rgba(235, 237, 242, 0.95);
}

.resumen-page > .title.h-md {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.res-topic {
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}

.res-topic:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.res-title {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.res-title h3 {
  margin: 0;
  font-size: clamp(1.28rem, 1.05rem + 0.65vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

/* Tarjeta con acento lateral por data-tone */
.res-card {
  --t: var(--tone-gold);
  position: relative;
  width: 100%;
  max-width: none;
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.85rem)
    clamp(1.35rem, 3vw, 2rem) clamp(1.35rem, 2.5vw, 1.85rem);
  padding-left: calc(clamp(1.35rem, 3vw, 2rem) + 10px);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: auto;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
  will-change: transform;
}

.res-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1rem, 2.5vw, 1.5rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    rgb(var(--t) / 0.95),
    rgb(var(--t) / 0.45)
  );
  transition: opacity 0.35s ease, filter 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .res-card:hover {
    transform: translateY(-5px);
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.52),
      0 0 0 1px rgba(212, 165, 116, 0.14);
    border-color: rgba(255, 255, 255, 0.11);
    background: rgba(22, 26, 36, 0.88);
  }

  .res-card:hover::before {
    opacity: 1;
    filter: brightness(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .res-card {
    transition: none;
    will-change: auto;
  }

  .res-card:hover {
    transform: none;
  }
}

/* Prosa analítica: Literata, tracking y OpenType */
.res-card.prose {
  font-family: var(--font-reading);
  font-optical-sizing: auto;
}

/* Carril izquierdo (doble clic): sustituye la franja ::before */
.res-card.prose.has-spotlight-rail::before {
  display: none;
}

.spotlight-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  cursor: zoom-in;
  touch-action: manipulation;
  background: linear-gradient(
    180deg,
    rgb(var(--t) / 0.95),
    rgb(var(--t) / 0.4)
  );
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.spotlight-rail:hover,
.spotlight-rail:focus-visible {
  filter: brightness(1.15);
  outline: none;
}

/* En vista ampliada el carril debe seguir viéndose claro (no “a ciegas”) */
.res-topic.res-topic--spotlight .spotlight-rail {
  width: 22px;
  z-index: 12;
  background: linear-gradient(
    180deg,
    rgb(var(--t) / 1),
    rgb(var(--t) / 0.72)
  );
  border-right: 1px solid rgb(var(--t) / 0.95);
  box-shadow:
    inset -2px 0 0 rgba(0, 0, 0, 0.25),
    4px 0 28px rgb(var(--t) / 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.res-topic.res-topic--spotlight .spotlight-rail:hover,
.res-topic.res-topic--spotlight .spotlight-rail:focus-visible {
  filter: brightness(1.08) saturate(1.15);
  box-shadow:
    inset -2px 0 0 rgba(0, 0, 0, 0.2),
    6px 0 36px rgb(var(--t) / 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

.res-card p {
  color: var(--ink-block);
  font-size: var(--step-1);
  line-height: 1.78;
  letter-spacing: 0.01em;
  max-width: none;
  width: 100%;
  text-align: justify;
  text-align-last: auto;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
  word-break: normal;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "onum" 1;
}

.res-card p + p {
  margin-top: 1rem;
}

.prose em {
  font-style: italic;
  color: rgba(232, 210, 180, 0.95);
  letter-spacing: 0.02em;
}

.prose strong {
  font-family: var(--font-reading);
  font-weight: 600;
  letter-spacing: 0.015em;
}

/* Acordes y símbolos en línea */
.nota-acorde {
  font-family: var(--font-sans);
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.12em 0.35em;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  white-space: nowrap;
}

/* Capitular solo en la apertura de cada bloque (no en el esquema formal) */
.res-card > p:first-of-type:not(.form-schema)::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  padding: 0.02em 0;
  font-family: var(--font-serif);
  font-size: 2.85em;
  font-weight: 600;
  line-height: 0.92;
  color: rgb(var(--t));
}

.form-schema {
  text-align: center !important;
  margin: var(--space-2) 0 var(--space-3) !important;
  padding: clamp(1rem, 2.5vw, 1.35rem) var(--space-2);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: none !important;
}

.form-schema__inner {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.15rem);
}

.res-card[data-tone="gold"] {
  --t: var(--tone-gold);
}
.res-card[data-tone="violet"] {
  --t: var(--tone-violet);
}
.res-card[data-tone="mint"] {
  --t: var(--tone-mint);
}
.res-card[data-tone="blue"] {
  --t: var(--tone-blue);
}
.res-card[data-tone="pink"] {
  --t: var(--tone-pink);
}
.res-card[data-tone="orange"] {
  --t: var(--tone-orange);
}
.res-card[data-tone="green"] {
  --t: var(--tone-green);
}
.res-card[data-tone="cyan"] {
  --t: var(--tone-cyan);
}

/* Viñeta temática por sección (opcional, muy sutil) */
.res-topic[data-topic="1"] .res-title h3 {
  color: rgb(var(--tone-gold));
}
.res-topic[data-topic="2"] .res-title h3 {
  color: rgb(var(--tone-violet));
}
.res-topic[data-topic="3"] .res-title h3 {
  color: rgb(var(--tone-mint));
}
.res-topic[data-topic="4"] .res-title h3 {
  color: rgb(var(--tone-blue));
}
.res-topic[data-topic="5"] .res-title h3 {
  color: rgb(var(--tone-pink));
}
.res-topic[data-topic="6"] .res-title h3 {
  color: rgb(var(--tone-orange));
}
.res-topic[data-topic="7"] .res-title h3 {
  color: rgb(var(--tone-green));
}
.res-topic[data-topic="8"] .res-title h3 {
  color: rgb(var(--tone-cyan));
}

/* ---------- Pie ---------- */
.app-footer {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--pad-inline) var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.app-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.app-footer__row--main {
  margin-bottom: var(--space-3);
}

.app-footer__course cite.titulo-obra {
  color: var(--accent);
}

.app-footer__year {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.app-footer__author {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ---------- Animación entrada (una sola, ligera) ---------- */
.fade-in-up {
  animation: enter-up 0.7s ease-out both;
}

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    /* `none` evita que el ancestro conserve `transform` y rompa `position: fixed` del modo spotlight */
    transform: none;
  }
}

/* ---------- Selección ---------- */
::selection {
  background: rgba(212, 165, 116, 0.35);
  color: var(--ink);
}

/* ---------- Pantallas amplias: cuerpo un poco mayor, sigue justificado a todo el ancho ---------- */
@media (min-width: 1200px) {
  .res-card p {
    font-size: clamp(1.1875rem, 1rem + 0.2vw, 1.28rem);
    line-height: 1.82;
  }
}

/* ---------- Vista de conjunto (rejilla compacta) ---------- */
body.overview-mode {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body.overview-mode .main {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(0.2rem, env(safe-area-inset-top, 0px)) 0 clamp(0.35rem, 1.2vw, 0.65rem);
}

body.overview-mode .container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.overview-mode .content-surface {
  flex: 1 1 auto;
  min-height: calc(100dvh - 5rem - 5.5rem);
  display: flex;
  flex-direction: column;
  padding: clamp(0.5rem, 1.25vw + 0.3rem, 1rem);
}

/* Base: rejilla más ancha + escala visual mayor; scroll interno en celdas */
body.overview-mode .studio-split {
  display: grid !important;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-content: start;
  gap: clamp(0.45rem, 1.1vw, 0.85rem);
  align-items: start;
  justify-content: stretch;
  grid-auto-rows: auto;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, clamp(132px, 14.5vmin, 248px)), 1fr)
  );
}

@media (min-width: 1800px) {
  body.overview-mode .studio-split {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  body.overview-mode .studio-split__media {
    grid-column: span 3;
  }
}

@media (min-width: 1500px) and (max-width: 1799px) {
  body.overview-mode .studio-split {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  body.overview-mode .studio-split__media {
    grid-column: span 2;
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  body.overview-mode .studio-split {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.overview-mode .studio-split__media {
    grid-column: span 2;
  }
}

@media (min-width: 780px) and (max-width: 1199px) {
  body.overview-mode .studio-split {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.overview-mode .studio-split__media {
    grid-column: span 2;
  }
}

@media (min-width: 520px) and (max-width: 779px) {
  body.overview-mode .studio-split {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.overview-mode .studio-split__media {
    grid-column: 1 / -1;
  }
}

body.overview-mode .studio-split__media {
  min-width: 0;
  min-height: 0;
  height: auto;
  display: block;
}

body.overview-mode .hero-video {
  display: block;
  margin-bottom: 0;
}

body.overview-mode .studio-split__rest {
  display: contents !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.overview-mode section[aria-labelledby="partitura-heading"],
body.overview-mode .resumen-page {
  display: contents;
}

body.overview-mode .sheet-strip {
  display: contents;
}

body.overview-mode .studio-split__rest > hr,
body.overview-mode #partitura-heading,
body.overview-mode .sheet-note-wrap,
body.overview-mode .resumen-page > .title.h-md {
  display: none !important;
}

/* Vista conjunto: cabecera limpia de lectura (sin inputs ni miniatura) */
body.overview-mode .asa-media-panel,
body.overview-mode .asa-video-thumb-wrap {
  display: none !important;
}

body.overview-mode .hero-video .title.h-md {
  font-size: clamp(0.9rem, 1.2vw, 1.08rem) !important;
  margin-bottom: 0.45rem !important;
  line-height: 1.25 !important;
}

body.overview-mode .hero-video .video-frame {
  aspect-ratio: 16 / 9;
  max-height: min(36vh, 340px);
  height: auto;
  padding-bottom: 0;
}

body.overview-mode .figure.figure--sheet {
  margin: 0;
  padding: 4px;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

body.overview-mode .sheet-scroll {
  max-height: min(52vh, 30rem);
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border-radius: var(--radius-sm);
}

/* Sin transiciones en miniaturas: evita parpadeo al redimensionar canvas */
body.overview-mode .figure.figure--sheet img {
  transition: none !important;
}

body.overview-mode .figure.figure--sheet .sheet-viewport {
  flex: 0 0 auto;
  min-height: 0;
}

body.overview-mode .figure.figure--sheet.has-sheet-rail {
  padding: 4px 4px 4px 0;
}

body.overview-mode .figure.figure--sheet.has-sheet-rail .sheet-page {
  padding-left: 6px;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

body.overview-mode .sheet-spotlight-rail {
  width: 6px;
}

body.overview-mode .res-topic {
  margin: 0 !important;
  padding: 0.4rem !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: auto;
  max-height: none;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Si se activa modo estudio dentro de la vista conjunto */
body.overview-mode.split-studio .studio-split__media {
  position: static;
  top: auto;
}

body.overview-mode .res-title {
  margin: 0 0 0.25rem !important;
  padding: 0 !important;
  border: none !important;
  flex-shrink: 0;
}

/* Letra diminuta: el contenedor puede ser grande; el texto sí es pequeño */
body.overview-mode .res-title h3 {
  font-size: clamp(0.8rem, 0.62rem + 0.35vw, 0.98rem) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em;
}

body.overview-mode .res-card {
  flex: 0 0 auto;
  min-height: auto;
  max-height: none;
  padding: 0.45rem 0.5rem 0.42rem !important;
  overflow: visible;
}

body.overview-mode .res-card::before {
  width: 2px;
  top: 0.3rem;
  bottom: 0.3rem;
}

body.overview-mode .res-card > p:first-of-type:not(.form-schema)::first-letter {
  font-size: 1em !important;
  float: none;
  padding: 0;
  margin: 0;
}

/* Vista conjunto: solo títulos de campos (sin cuerpo editable) */
body.overview-mode .res-card.res-card--field .res-field-toolbar,
body.overview-mode .res-card.res-card--field .res-field--editable {
  display: none !important;
}

/* Vista conjunto: solo imágenes, no upload ni helper text */
body.overview-mode .asa-sheet-upload,
body.overview-mode #asa-sheet-empty {
  display: none !important;
}

body.overview-mode .form-schema {
  font-size: clamp(5.5px, 0.4rem + 0.4vw, 7.5px) !important;
  line-height: 1.2 !important;
}

body.overview-mode .form-schema__inner {
  font-size: inherit !important;
  letter-spacing: 0.04em !important;
}

@media (max-width: 519px) {
  body.overview-mode .studio-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.overview-mode .studio-split__media {
    grid-column: 1 / -1;
  }
}

/* Móvil muy estrecho: una columna para aprovechar ancho táctil */
@media (max-width: 400px) {
  body.overview-mode .studio-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.overview-mode .content-surface {
    transition: none;
  }
}

/* ---------- Vista conjunto v3: reparto inteligente (pantalla + nº partituras) ---------- */
body.overview-mode {
  --ov-sheet-zone-min: 12rem;
  --ov-sheet-zone-max: 36vh;
  --ov-sheet-thumb-min: 150px;
  --ov-topic-title-min: 4.7rem;
}

body.overview-mode[data-overview-sheet-bucket="mid"] {
  --ov-sheet-zone-min: 15rem;
  --ov-sheet-zone-max: 44vh;
  --ov-sheet-thumb-min: 132px;
  --ov-topic-title-min: 4.2rem;
}

body.overview-mode[data-overview-sheet-bucket="high"] {
  --ov-sheet-zone-min: 18rem;
  --ov-sheet-zone-max: 52vh;
  --ov-sheet-thumb-min: 114px;
  --ov-topic-title-min: 3.8rem;
}

body.overview-mode .studio-split {
  display: grid !important;
  grid-template-columns: minmax(330px, 1.15fr) minmax(390px, 1fr);
  grid-template-rows: auto minmax(var(--ov-sheet-zone-min), var(--ov-sheet-zone-max));
  grid-template-areas:
    "media topics"
    "sheets topics";
  gap: clamp(0.55rem, 1.2vw, 0.95rem);
  align-items: stretch;
}

body.overview-mode .studio-split__media {
  grid-area: media;
  min-width: 0;
}

body.overview-mode section[aria-labelledby="partitura-heading"] {
  grid-area: sheets;
  display: grid !important;
  grid-template-rows: 1fr;
  min-width: 0;
  min-height: 0;
}

body.overview-mode .sheet-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--ov-sheet-thumb-min), 1fr));
  gap: 0.42rem;
  align-content: stretch;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  padding-right: 2px;
  grid-auto-rows: minmax(0, 1fr);
}

body.overview-mode .figure.figure--sheet {
  min-height: 0;
  padding: 2px;
  height: 100%;
}

body.overview-mode .figure.figure--sheet .sheet-page,
body.overview-mode .figure.figure--sheet .sheet-scroll,
body.overview-mode .figure.figure--sheet .sheet-viewport {
  height: 100%;
  max-height: none;
}

body.overview-mode .figure.figure--sheet .sheet-scroll {
  overflow: hidden;
}

body.overview-mode .figure.figure--sheet .sheet-viewport__pan,
body.overview-mode .figure.figure--sheet .sheet-viewport__pan img {
  height: 100%;
}

body.overview-mode .figure.figure--sheet .sheet-viewport__pan img {
  width: 100%;
  object-fit: contain;
}

/* Pocas páginas: repartir columnas fijas para ocupar toda la zona */
body.overview-mode[data-overview-sheet-count="1"] .sheet-strip {
  grid-template-columns: 1fr;
}
body.overview-mode[data-overview-sheet-count="2"] .sheet-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.overview-mode[data-overview-sheet-count="3"] .sheet-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.overview-mode[data-overview-sheet-count="4"] .sheet-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Modo compacto extremo: sustituir miniaturas por fichas de página */
body.overview-mode[data-overview-sheet-compact="1"] .sheet-strip {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: minmax(2.35rem, auto);
}

body.overview-mode[data-overview-sheet-compact="1"] .figure.figure--sheet .sheet-scroll {
  display: none !important;
}

body.overview-mode[data-overview-sheet-compact="1"] .figure.figure--sheet {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(16, 22, 38, 0.96), rgba(10, 16, 30, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.08);
  color: var(--ink-soft);
}

body.overview-mode[data-overview-sheet-compact="1"] .figure.figure--sheet::after {
  content: "Página " attr(data-sheet-page);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--accent) 60%, var(--ink-soft));
}

body.overview-mode .resumen-page {
  grid-area: topics;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(var(--ov-topic-title-min), 1fr));
  gap: 0.45rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

body.overview-mode .resumen-page > .title.h-md {
  display: none !important;
}

body.overview-mode .res-topic {
  min-height: 0;
  max-height: none;
  padding: 0.5rem 0.55rem !important;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

body.overview-mode .res-topic:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

body.overview-mode .res-topic.asa-drop-target {
  border-color: color-mix(in srgb, var(--accent) 68%, #ffffff 32%);
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.35),
    0 18px 28px rgba(0, 0, 0, 0.34);
  transform: translateY(-2px);
}

body.overview-mode .res-title h3 {
  font-size: clamp(0.86rem, 0.72rem + 0.34vw, 1rem) !important;
  line-height: 1.25 !important;
}

@media (min-width: 1300px) {
  body.overview-mode .res-topic {
    position: relative;
    border-radius: 12px;
    background:
      linear-gradient(165deg, rgba(18, 24, 40, 0.88), rgba(10, 15, 28, 0.96)),
      radial-gradient(circle at 15% 14%, rgba(212, 165, 116, 0.08), transparent 56%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  body.overview-mode .res-topic::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
      96deg,
      color-mix(in srgb, var(--topic-dropcap, var(--accent)) 58%, transparent 42%) 0%,
      transparent 55%
    );
    opacity: 0.16;
  }

  body.overview-mode .res-topic::after {
    content: "";
    position: absolute;
    left: 0.48rem;
    top: 0.52rem;
    width: 2.2rem;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--topic-dropcap, var(--accent)) 74%, #fff 26%);
    opacity: 0.72;
    pointer-events: none;
  }

  body.overview-mode .res-title {
    margin-bottom: 0 !important;
    padding-top: 0.3rem;
  }

  body.overview-mode .res-title h3 {
    font-size: clamp(0.96rem, 0.86rem + 0.3vw, 1.18rem) !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.26);
  }
}

@media (min-width: 1520px) and (min-height: 840px) {
  body.overview-mode {
    --ov-topic-title-min: 5.4rem;
  }

  body.overview-mode .res-topic {
    padding: 0.66rem 0.72rem !important;
    border-radius: 14px;
  }

  body.overview-mode .res-title h3 {
    font-size: clamp(1.08rem, 0.98rem + 0.28vw, 1.32rem) !important;
    line-height: 1.32 !important;
  }
}

/* En vista conjunto: solo tarjeta/título de tema */
body.overview-mode .res-card.res-card--field,
body.overview-mode .res-card.res-card--field .res-field-toolbar,
body.overview-mode .res-card.res-card--field .res-field--editable {
  display: none !important;
}

@media (max-width: 1080px) {
  body.overview-mode {
    --ov-sheet-zone-min: 11rem;
    --ov-sheet-zone-max: 34vh;
  }

  body.overview-mode .studio-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(var(--ov-sheet-zone-min), var(--ov-sheet-zone-max)) auto;
    grid-template-areas:
      "media"
      "sheets"
      "topics";
  }

  body.overview-mode .resumen-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(3.5rem, auto));
    height: auto;
  }
}

@media (max-width: 680px) {
  body.overview-mode .resumen-page {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, minmax(3.2rem, auto));
  }

  body.overview-mode .sheet-strip {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  }
}

/* DnD visual en modo conjunto */
body.overview-mode.asa-overview-dragging-sheet .res-topic {
  transition-duration: 0.08s;
}

/* Modal flotante IA partitura->campo */
.asa-ai-float {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 5105;
  width: min(520px, calc(100vw - 16px));
  height: min(420px, calc(100vh - 20px));
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(14, 19, 33, 0.98), rgba(9, 13, 24, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.asa-ai-float[hidden] {
  display: none !important;
}

.asa-ai-float__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: move;
}

.asa-ai-float__title {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.asa-ai-float__head-actions,
.asa-ai-float__actions {
  display: flex;
  gap: 0.35rem;
}

.asa-ai-float__meta {
  padding: 0.45rem 0.62rem;
  font-size: 0.74rem;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.asa-ai-float__text {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  resize: none;
  padding: 0.62rem;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-reading);
  font-size: 0.93rem;
  line-height: 1.4;
}

.asa-ai-float__text:focus {
  outline: none;
}

.asa-ai-float__actions {
  padding: 0.45rem 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.asa-ai-float__btn {
  min-height: 1.7rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-soft);
  cursor: pointer;
}

.asa-ai-float__btn:hover,
.asa-ai-float__btn:focus-visible {
  outline: none;
  border-color: rgba(212, 165, 116, 0.45);
  background: rgba(212, 165, 116, 0.12);
}

.asa-ai-float__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  border: 0;
  background: linear-gradient(135deg, transparent 45%, rgba(212, 165, 116, 0.7) 45%, rgba(212, 165, 116, 0.7) 58%, transparent 58%);
  cursor: nwse-resize;
}

/* ---------- Modo spotlight (doble clic en carril izquierdo) ---------- */
body.spotlight-on {
  overflow: hidden;
}

/* Sin backdrop-filter: en algunos navegadores dejaba la capa de contenido en negro */
body.spotlight-on::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4999;
  background: rgba(4, 6, 10, 0.88);
  animation: studio-backdrop-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: auto;
}

@keyframes studio-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hijo directo de body tras acoplar en JS: z-index por encima del velo */
.res-topic.res-topic--spotlight {
  position: fixed;
  left: clamp(0.75rem, 3vw, 2rem);
  right: clamp(0.75rem, 3vw, 2rem);
  top: clamp(0.75rem, 3vw, 2rem);
  bottom: clamp(0.75rem, 3vw, 2rem);
  width: auto;
  height: auto;
  max-height: none;
  z-index: 5001;
  margin: 0 !important;
  padding: clamp(1rem, 3vw, 1.75rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(22, 26, 36, 0.98) 0%, rgba(12, 14, 22, 0.99) 100%);
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.35),
    0 32px 100px rgba(0, 0, 0, 0.65);
  /* Origen hacia la derecha en la fase final */
  transform-origin: 85% 38%;
  animation: spotlight-pop 1.85s linear both;
  border-bottom: none !important;
}

/*
  Sin filter en el panel: si no, el carril de partitura hereda brightness y “pierde” el color.
  Solo opacity + transform.
*/
@keyframes spotlight-pop {
  0% {
    opacity: 0.35;
    transform: perspective(2000px) translateZ(36px) scale(1.06);
  }
  25% {
    opacity: 0.72;
    transform: perspective(2000px) translateZ(-220px) scale(0.54);
  }
  50% {
    opacity: 0.55;
    transform: perspective(2000px) translateX(min(48vw, 580px)) translateZ(-125px)
      scale(0.56) rotateY(-9deg);
  }
  75% {
    opacity: 0.9;
    transform: perspective(2000px) translateX(8vw) translateZ(-22px) scale(0.93)
      rotateY(-1.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.res-topic.res-topic--spotlight .res-card {
  transform: none !important;
  overflow: visible;
}

.res-topic.res-topic--spotlight .res-card:hover {
  transform: none !important;
}

/* Móvil estrecho: un pelín más de interlineado para líneas cortas justificadas */
@media (max-width: 480px) {
  .res-card p {
    line-height: 1.82;
    letter-spacing: 0.008em;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.spotlight-on::before,
  .res-topic.res-topic--spotlight {
    animation: none !important;
  }
}

/* ---------- Móvil: menos blur en tarjetas (rendimiento) ---------- */
@media (max-width: 720px) {
  .res-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-card-solid);
    padding-left: calc(1.15rem + 10px);
  }

  .res-card.prose.has-spotlight-rail {
    padding-left: calc(1.15rem + 14px);
  }

  .app-footer__row--main {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .res-card > p:first-of-type:not(.form-schema)::first-letter {
    font-size: 2.35em;
  }

  .hero-video .video-frame {
    border-radius: var(--radius-sm);
  }
}

/* ---------- AudioScore Analyzer (PWA) ---------- */
.app-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}

.asa-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(230, 233, 239, 0.95);
  background: rgba(212, 165, 116, 0.14);
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.asa-header-btn:hover,
.asa-header-btn:focus-visible {
  background: rgba(212, 165, 116, 0.22);
  border-color: rgba(212, 165, 116, 0.5);
  color: var(--ink);
  outline: none;
}

.asa-header-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.asa-header-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(200, 206, 218, 0.92);
}

.asa-header-btn--ghost:hover,
.asa-header-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 165, 116, 0.28);
}

.asa-header-btn--danger {
  background: rgba(214, 82, 82, 0.14);
  border-color: rgba(214, 82, 82, 0.38);
  color: rgba(255, 224, 224, 0.96);
}

.asa-header-btn--danger:hover,
.asa-header-btn--danger:focus-visible {
  background: rgba(214, 82, 82, 0.24);
  border-color: rgba(214, 82, 82, 0.52);
  color: #fff;
}

body.asa-modal-open {
  overflow: hidden;
}

.asa-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.asa-modal[hidden] {
  display: none !important;
}

.asa-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.asa-modal__panel {
  position: relative;
  z-index: 1;
  width: min(28rem, 100%);
  padding: 1.35rem 1.25rem 1.25rem;
  background: var(--bg-card-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

.asa-modal__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
}

.asa-modal__hint {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.asa-modal__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.asa-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.asa-modal__input:focus {
  outline: none;
  border-color: rgba(212, 165, 116, 0.45);
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.12);
}

.asa-modal__select {
  appearance: auto;
  -webkit-appearance: menulist;
  background-color: rgba(14, 18, 28, 0.92);
  color: #f2f5fb;
}

.asa-modal__select option {
  color: #0f1220;
  background: #f3f6ff;
}

.asa-modal__textarea {
  resize: vertical;
  min-height: 7.6rem;
  line-height: 1.38;
}

.asa-modal__ext {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
}

.asa-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.res-title__editable,
.asa-section-heading[contenteditable="true"] {
  cursor: text;
}

.res-title__editable:focus-visible,
.asa-section-heading[contenteditable="true"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.35);
  border-radius: 4px;
}

.asa-media-panel {
  margin-bottom: var(--space-3);
}

.asa-meta-grid {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 0.55rem 1rem;
  align-items: center;
}

@media (max-width: 640px) {
  .asa-meta-grid {
    grid-template-columns: 1fr;
  }
}

.asa-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.asa-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-reading);
  font-size: var(--step-0);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.asa-input:hover {
  border-color: rgba(212, 165, 116, 0.25);
}

.asa-input:focus {
  border-color: rgba(212, 165, 116, 0.45);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.12);
}

.asa-video-url-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

/* Marco con ratio fijo por tipo: la imagen rellena sin banda clara fuera del marco */
.asa-video-thumb-wrap {
  flex: 0 1 auto;
  align-self: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #121212;
  overflow: hidden;
  width: clamp(84px, 19vw, 172px);
  max-width: min(172px, 44%);
}

.asa-video-thumb-wrap--youtube {
  aspect-ratio: 16 / 9;
}

.asa-video-thumb-wrap .asa-video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  vertical-align: top;
  border: 0;
}

.asa-video-thumb-wrap--youtube .asa-video-thumb {
  object-fit: cover;
}

.asa-video-thumb-wrap.is-hidden {
  display: none !important;
}

body.split-studio .hero-video .asa-video-thumb-wrap {
  max-width: min(124px, 34vw);
}

body.overview-mode .hero-video .asa-video-thumb-wrap {
  max-width: min(104px, 30vw);
}

.asa-hint {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.asa-sheet-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: var(--space-3);
}

.asa-dropzone {
  flex: 1 1 12rem;
  min-height: 5rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  border: 1px dashed rgba(212, 165, 116, 0.35);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.asa-dropzone:hover,
.asa-dropzone:focus-visible {
  border-color: rgba(212, 165, 116, 0.55);
  background: rgba(212, 165, 116, 0.06);
  outline: none;
}

.asa-dropzone.is-drag {
  border-style: solid;
  background: rgba(212, 165, 116, 0.1);
}

.asa-dropzone__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-1);
}

.asa-dropzone__sub {
  font-size: 0.82rem;
}

.asa-sheet-upload__actions {
  display: flex;
  align-items: center;
}

.asa-add-sheet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(82, 130, 215, 0.12);
  border: 1px solid rgba(82, 130, 215, 0.35);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
}

.asa-add-sheet:hover,
.asa-add-sheet:focus-visible {
  background: rgba(82, 130, 215, 0.2);
  border-color: rgba(82, 130, 215, 0.5);
  outline: none;
}

.asa-add-sheet__plus {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 500;
  opacity: 0.9;
}

.asa-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.asa-sheet-empty {
  margin: 0 0 var(--space-3);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.figure.figure--sheet {
  position: relative;
}

.asa-sheet-delete {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: rgba(230, 233, 239, 0.85);
  background: rgba(8, 10, 14, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.asa-sheet-download {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: rgba(230, 233, 239, 0.9);
  background: rgba(8, 10, 14, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.asa-sheet-download:hover,
.asa-sheet-download:focus-visible {
  background: rgba(66, 132, 245, 0.32);
  border-color: rgba(66, 132, 245, 0.58);
  color: #fff;
  outline: none;
}

.asa-sheet-delete:hover,
.asa-sheet-delete:focus-visible {
  background: rgba(214, 82, 82, 0.35);
  border-color: rgba(214, 82, 82, 0.55);
  color: #fff;
  outline: none;
}

.asa-sheet-delete__ic {
  display: flex;
  pointer-events: none;
}

/* En modo partitura ampliada no mostramos la papelera de borrado rápido. */
.figure.figure--sheet.figure--sheet-spotlight .asa-sheet-delete {
  display: none;
}

.figure.figure--sheet.figure--sheet-spotlight .asa-sheet-download {
  display: none;
}

.sheet-note-toolbar,
.res-field-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.toolbar-sep {
  width: 1px;
  height: 1.1rem;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 0.15rem;
}

.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.toolbar-group--colors {
  gap: 0.35rem;
}

.asa-tbtn {
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.asa-tbtn:hover,
.asa-tbtn:focus-visible {
  background: rgba(212, 165, 116, 0.12);
  border-color: rgba(212, 165, 116, 0.35);
  color: var(--ink);
  outline: none;
}

.asa-tbtn--align {
  min-width: 1.55rem;
  padding: 0 0.25rem;
}

.asa-tbtn--ai {
  min-width: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #d7e8ff;
  background: rgba(66, 132, 245, 0.2);
  border-color: rgba(102, 163, 255, 0.52);
}

.asa-tbtn--ai:hover,
.asa-tbtn--ai:focus-visible {
  color: #eef6ff;
  background: rgba(66, 132, 245, 0.32);
  border-color: rgba(132, 184, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(66, 132, 245, 0.26);
}

.asa-tbtn--ai-settings {
  min-width: 1.7rem;
  font-size: 0.78rem;
  color: #c9dcff;
  background: rgba(66, 132, 245, 0.12);
  border-color: rgba(102, 163, 255, 0.38);
}

.asa-tbtn--ai-settings:hover,
.asa-tbtn--ai-settings:focus-visible {
  color: #ecf5ff;
  background: rgba(66, 132, 245, 0.24);
  border-color: rgba(132, 184, 255, 0.68);
}

body.asa-readonly .sheet-note-toolbar,
body.asa-readonly .res-field-toolbar {
  display: none;
}

body.asa-readonly .sheet-note--editable,
body.asa-readonly .res-field--editable,
body.asa-readonly .res-title__editable,
body.asa-readonly .asa-section-heading {
  cursor: default;
}

body.asa-readonly .figure.figure--sheet-spotlight .sheet-anno-remove,
body.asa-readonly .figure.figure--sheet-spotlight .sheet-anno-resize,
body.asa-readonly .figure.figure--sheet-spotlight .sheet-anno-arrow-handle,
body.asa-readonly .figure.figure--sheet-spotlight .sheet-anno-text-move-edge {
  opacity: 0 !important;
  pointer-events: none !important;
}

.asa-color-swatch {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: var(--swatch, #e6e9ef);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.asa-color-swatch:hover,
.asa-color-swatch:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.35);
  outline: none;
}

/* Tamaños respecto al cuerpo del campo (--step-0), no en em (los em se encadenan al anidar spans y el orden S/M/L parece invertido). */
.sheet-note--editable .asa-rich-fs--sm,
.res-field--editable .asa-rich-fs--sm {
  font-size: calc(var(--step-0) * 0.92);
}

.sheet-note--editable .asa-rich-fs--md,
.res-field--editable .asa-rich-fs--md {
  font-size: calc(var(--step-0) * 1);
}

.sheet-note--editable .asa-rich-fs--lg,
.res-field--editable .asa-rich-fs--lg {
  font-size: calc(var(--step-0) * 1.18);
  line-height: 1.55;
}

.asa-btn__long {
  display: inline;
}

.asa-btn__short {
  display: none;
}

/* Por debajo de ~1180px: cabecera en columna (sin choque título ↔ botones al redimensionar ventana) */
@media (max-width: 1180px) {
  .app-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .app-header__inner .app-brand {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .app-header__actions {
    width: 100%;
    max-width: none;
    justify-content: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
}

@media (max-width: 720px) {
  .app-header__inner {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .app-header-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .brand-headline {
    font-size: clamp(1.12rem, 0.95rem + 0.9vw, 1.55rem);
    line-height: 1.2;
  }

  .hero-video .title-video {
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem);
  }
}

@media (max-width: 620px) {
  .asa-btn__long {
    display: none;
  }

  .asa-btn__short {
    display: inline;
  }

  .asa-header-btn {
    padding: 0.4rem 0.45rem;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    justify-content: center;
    min-width: 0;
  }

  .overview-toggle__label {
    display: none;
  }

  .overview-toggle__label-short {
    display: inline;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }

  .overview-toggle {
    padding: 0.4rem 0.45rem;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    gap: 0.3rem;
    justify-content: center;
    min-width: 0;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  .asa-media-panel {
    margin-bottom: var(--space-2);
  }

  .asa-hint {
    font-size: 0.78rem;
  }

  .asa-sheet-upload {
    flex-direction: column;
  }

  .asa-sheet-upload__actions {
    width: 100%;
  }

  .asa-add-sheet {
    width: 100%;
    justify-content: center;
  }
}

/* Vídeo flotante (paleta partitura) */
.asa-sheet-pip {
  position: fixed;
  z-index: 60000;
  display: flex;
  flex-direction: column;
  width: min(320px, 94vw);
  max-width: 100vw;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  background: rgba(18, 20, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  touch-action: none;
}

.asa-sheet-pip[hidden] {
  display: none !important;
}

.asa-sheet-pip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem 0.35rem 0.65rem;
  cursor: grab;
  user-select: none;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 246, 242, 0.88);
}

.asa-sheet-pip__header:active {
  cursor: grabbing;
}

.asa-sheet-pip__title {
  flex: 1;
  min-width: 0;
}

.asa-sheet-pip__close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(248, 246, 242, 0.9);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.asa-sheet-pip__close:hover {
  background: rgba(212, 82, 82, 0.35);
}

.asa-sheet-pip__body {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.asa-sheet-pip__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.asa-sheet-pip__resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px 0 0 0;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.22) 50%);
  opacity: 0.75;
}

.asa-sheet-pip__resize:hover {
  opacity: 1;
}

/* Modo lectura vs edición (notas + apartados analíticos) */
.sheet-note-wrap.asa-rich--view .sheet-note-toolbar,
.res-card.res-card--field.asa-rich--view .res-field-toolbar {
  display: none;
}

.sheet-note-wrap.asa-rich--view,
.res-card.res-card--field.asa-rich--view {
  background: transparent;
  border-radius: 0;
  padding-bottom: 0;
}

.sheet-note-wrap.asa-rich--view .sheet-note--editable,
.res-card.res-card--field.asa-rich--view .res-field--editable {
  cursor: pointer;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0.08rem 0;
  color: rgba(252, 250, 246, 0.95);
  line-height: 1.78;
  letter-spacing: 0.016em;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

.sheet-note-wrap.asa-rich--view .sheet-note--editable .asa-rich-dropcap {
  color: var(--accent);
  font-size: 2.55em;
  line-height: 0.82;
  float: left;
  margin: 0.07em 0.09em -0.02em 0;
  font-weight: 600;
  font-family: "Cormorant", var(--font-reading);
}

.res-topic[data-topic="1"] {
  --topic-dropcap: rgb(var(--tone-gold));
}
.res-topic[data-topic="2"] {
  --topic-dropcap: rgb(var(--tone-violet));
}
.res-topic[data-topic="3"] {
  --topic-dropcap: rgb(var(--tone-mint));
}
.res-topic[data-topic="4"] {
  --topic-dropcap: rgb(var(--tone-blue));
}
.res-topic[data-topic="5"] {
  --topic-dropcap: rgb(var(--tone-pink));
}
.res-topic[data-topic="6"] {
  --topic-dropcap: rgb(var(--tone-orange));
}
.res-topic[data-topic="7"] {
  --topic-dropcap: rgb(var(--tone-green));
}
.res-topic[data-topic="8"] {
  --topic-dropcap: rgb(var(--tone-cyan));
}

.res-card.res-card--field.asa-rich--view .res-field--editable .asa-rich-dropcap {
  color: var(--topic-dropcap, var(--accent));
  font-size: 2.55em;
  line-height: 0.82;
  float: left;
  margin: 0.07em 0.09em -0.02em 0;
  font-weight: 600;
  font-family: "Cormorant", var(--font-reading);
}

.res-card.res-card--field.asa-rich--view .res-field--editable {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

.sheet-note-wrap.asa-rich--editing .sheet-note--editable,
.res-card.res-card--field.asa-rich--editing .res-field--editable {
  cursor: text;
  border-color: rgba(212, 165, 116, 0.42);
  background: rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.18);
}

.res-card.res-card--field.asa-rich--editing .res-field--editable {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  letter-spacing: inherit;
}

.sheet-note-wrap.asa-rich--view::after,
.res-card.res-card--field.asa-rich--view::after {
  content: "Lectura · pulsa el texto para editar";
  display: block;
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  margin-top: 0.4rem;
  padding-top: 0.28rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  opacity: 0.86;
}

.sheet-note-wrap.asa-rich--editing::after,
.res-card.res-card--field.asa-rich--editing::after {
  content: "Modo edición";
  color: rgba(212, 165, 116, 0.75);
}

/* Bocadillo / bloque destacado (notas y analítico) */
.asa-rich-callout {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: 0.2rem 0;
  padding: 0.28rem 0.55rem 0.28rem 0.62rem;
  border-radius: 6px;
  background: rgba(212, 165, 116, 0.12);
  border-left: 3px solid rgba(212, 165, 116, 0.88);
  font-family: var(--font-sans);
  font-size: 0.94em;
  line-height: 1.45;
  color: var(--ink);
  vertical-align: baseline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.res-field--editable .asa-rich-callout,
.sheet-note--editable .asa-rich-callout {
  background: rgba(212, 165, 116, 0.14);
}

.asa-tbtn--callout {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.asa-tbtn.asa-rich-tool--on {
  color: var(--ink);
  background: rgba(212, 165, 116, 0.22);
  border-color: rgba(212, 165, 116, 0.55);
}

.asa-color-swatch.asa-rich-swatch--on {
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.55);
  border-color: rgba(255, 255, 255, 0.45);
}