/* SUNWARD Web · hoja única.
   §1: la web ES SUNWARD Studio simplificado. Esto no es una interpretación del lenguaje de
   Studio: es su MISMO esqueleto —cabecera, carrusel de insignias, acordeón de cápsulas y
   barra de reproducción— con las clases `sw-*` y los valores copiados literalmente de
   `01_SUNWARD-Studio/src/theme/globals.css`. Lo que cambia es lo que se ha QUITADO, que es
   todo lo interno: herramientas de la cabecera, lápiz de editar, exportar derivados,
   continuidad, historial, la tira de los ocho pasos, los puntos de progreso, el botón de
   añadir escena y el arrastrar para reordenar. Nada de eso es público.
   Si algo de aquí se separa de Studio, es un error: se corrige mirando globals.css. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Los tokens de Studio, con sus mismos nombres y sus mismos valores. */
  --sw-paper: #F2EEE4;
  --sw-ink: #17160F;
  --sw-muted: #8C8874;
  --sw-line: rgba(23, 22, 15, .14);
  --sw-line-strong: rgba(23, 22, 15, .24);
  --sw-accent: #D88A3D;
  --sw-complete: #5E7C67;
  --sw-player-space: 88px;
  --sw-capsula: calc(80 / 420);
  --sw-tira-min: 44px;
  /* .75 → .95: la insignia se veía pequeña para ser el identificador del álbum (Alex,
     2026-08-26). Es un +27 %, dentro del 25-30 % pedido. Toda la geometría del carrusel
     cuelga de esta variable, así que el alto reservado y el margen negativo se ajustan
     solos — no hay ningún píxel que tocar aparte de este. */
  --sw-insignia-escala: .95;

  font-family: Geist, system-ui, sans-serif;
  color: var(--sw-ink);
  background: var(--sw-paper);
  font-synthesis: none;

  /* Medidas de los paneles de lectura de la canción (§13). */
  --t: 14px;
  --h: 19px;
}

/* Studio no lleva este reset; aquí sí, porque no hay build que normalice nada. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
/* El acordeon mide su alto contra la ventana: #sitio tiene que llegar hasta abajo. */
body[data-vista="album"] #sitio { height: 100%; }
/* El álbum es la aplicación: ocupa la ventana y no hace scroll, como Studio. La ficha sí. */
body[data-vista="album"] { overflow: hidden; }
body { background: var(--sw-paper); color: var(--sw-ink); font-family: Geist, system-ui, sans-serif; font-size: var(--t); line-height: 1.6; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
/* TODO acento lleva el color de la insignia del album (Alex, 26 ago). El naranja de marca
   queda solo de respaldo, para cuando un lugar no tenga insignia SVG de la que leerlo. */
button:focus-visible { outline: 2px solid var(--sw-acento, var(--sw-accent)); outline-offset: 2px; }

.sw-app-shell { height: 100%; display: flex; flex-direction: column; background: var(--sw-paper); }

/* ---- cabecera: solo el logotipo. Las herramientas de Studio son trabajo interno ---- */
/* El alto lo reserva Studio con su logotipo de 145 px: la insignia activa crece hacia
   arriba (scale 1,2) y sin ese aire se sale por el techo de la ventana. */
.sw-header { flex: none; display: flex; align-items: center; min-height: 96px; padding: 14px 28px 0; }
/* El logotipo de Studio dice STUDIO: eso es la herramienta interna. Aqui va la marca sola,
   el mismo trazo que firma los videos. */
.sw-header-logo { width: 190px; height: auto; flex: none; opacity: .96; filter: brightness(0); }
/* El idioma: un icono `Earth` que alterna, con el superíndice del idioma que se está leyendo.
   Ni bandera ni dos botones — una bandera nombra un país, y ni el castellano ni el inglés son
   de uno solo.
   Al pasar por encima, el círculo se tiñe del cielo de la insignia activa y el icono toma su
   color de marco. Sin línea exterior (Alex, 26 ago): el borde convertía el sombreado en un
   botón, y esto es una sombra, no una caja. Los colores los escribe el generador leyendo el
   SVG de la propia insignia, así que la cabecera cambia de color con el álbum sin que nadie
   los repita a mano. Si un lugar no tiene insignia SVG, se queda en el naranja de marca. */
.sw-lang-btn {
  margin-left: auto; position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: none; cursor: pointer; padding: 0;
  /* El azul de marco de la insignia, siempre y no solo al pasar por encima (Alex, 26 ago):
     el idioma pertenece al álbum que se está viendo, igual que el reproductor. */
  color: var(--sw-acento, var(--sw-accent));
  transition: background-color .2s ease, color .2s ease;
}
.sw-lang-btn:hover {
  /* Al pasar por encima solo aparece el fondo: el color del trazo ya es el del marco. Es el
     mismo 52 % del cielo que usa el botón de play — al 100 % se veía más oscuro que aquel,
     siendo el mismo gesto en dos sitios de la pantalla. */
  background: color-mix(in srgb, var(--sw-cielo, var(--sw-accent)) 52%, transparent);
}
.sw-lang-btn:focus-visible { outline: 2px solid var(--sw-acento, var(--sw-accent)); outline-offset: 2px; }
/* Del icono queda solo su círculo exterior y las dos letras van DENTRO (Alex, 26 ago): en vez
   de un superíndice colgando de una esquina, una moneda. Es el Circle de Lucide tal cual lo
   pasó Alex: 20 × 20 y trazo 1,25, sin tocarle el tamaño. El interior mide 16,7 px y el texto
   12,4 — cabe con dos píxeles de aire a cada lado.
   La negrita es de verdad: el 700 se AÑADIÓ al @import de JetBrains Mono, que estaba cargada
   solo en 400 y 500 — con `font-synthesis: none` el navegador no la finge, la ignora. */
.sw-lang-txt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  line-height: 1; letter-spacing: .2px; pointer-events: none;
}

/* ---- grupo central: insignias + canciones, con su hueco para el reproductor ---- */
.sw-content-group { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; padding: 0 0 var(--sw-player-space); }

/* ---- insignias = álbumes (§4): la rueda cover flow de Studio, tal cual ---- */
.sw-badge-coverflow { flex: none; position: relative; height: calc(183px * var(--sw-insignia-escala)); }
.sw-badge-track {
  position: relative; width: min(760px, 94%); height: 183px;
  perspective: 1100px; perspective-origin: 50% 100%;
  margin: calc(-183px * (1 - var(--sw-insignia-escala))) auto 0;
  transform: scale(var(--sw-insignia-escala)); transform-origin: bottom center;
}
.sw-badge-slot {
  position: absolute; left: 50%; bottom: 0; transform-origin: bottom center;
  transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.sw-badge-item { display: flex; background: none; border: 0; cursor: pointer; padding: 0; }
.sw-badge-item:hover { filter: brightness(1.08); }
.sw-badge-item img { width: 111px; height: auto; display: block; opacity: .5; filter: saturate(.45); transition: opacity .2s ease, filter .2s ease; }
.sw-badge-item:hover img { opacity: .78; filter: saturate(.7); }
.sw-badge-item[data-active="true"] img { opacity: 1; filter: saturate(1); }

/* ---- acordeón de canciones (§8): el de escenas de Studio ---- */
.sw-scene-accordion { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 28px; container-type: inline-size; }
.sw-scene-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; flex: none;
  height: min(100%, calc((100cqw - var(--sw-huecos, 0px))
                         / (var(--sw-activa, 16 / 9) + var(--sw-tira-n, 0) * var(--sw-capsula))));
}
.sw-scene-card {
  position: relative; flex: 0 1 auto; aspect-ratio: var(--sw-capsula); min-width: var(--sw-tira-min); height: 100%; border-radius: 40px; overflow: hidden;
  cursor: pointer; background-size: cover; background-position: center; border: 0; padding: 0;
  transition: flex-basis .4s cubic-bezier(.4,0,.2,1), border-radius .4s cubic-bezier(.4,0,.2,1), filter .3s ease;
  box-shadow: 0 1px 2px rgba(23,22,15,.08);
  container-type: size;
}
.sw-scene-card[data-active="true"] { flex: 0 0 auto; height: 100%; aspect-ratio: 16/9; border-radius: 40px; background-size: contain; background-repeat: no-repeat; background-color: #0B0F14; cursor: pointer; }
.sw-scene-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, transparent 42%); opacity: 0; transition: opacity .2s ease; }
.sw-scene-card[data-active="true"]::after, .sw-scene-card:hover::after { opacity: 1; }
/* Una canción todavía no publicada llega con su ilustración DESATURADA —no en grises: el color
   sigue ahí, muy suave—, su número y su estado (Alex, 2026-08-26). Toda la lectura del sistema
   cabe en una frase: a color = ya publicado, apagada = todavía por salir.
   La desaturación viene ya hecha del generador — aquí no hay `filter`, y no es un detalle: con
   el filtro el navegador recibiría la imagen a plena saturación y bastaría un clic para verla. */
.sw-scene-card--bloqueada {
  flex: 0 1 auto; aspect-ratio: var(--sw-capsula); min-width: var(--sw-tira-min); height: 100%;
  border-radius: 40px; overflow: hidden; cursor: default;
  background-size: cover; background-position: center; background-color: transparent;
  position: relative; container-type: size;
  box-shadow: 0 1px 2px rgba(23,22,15,.08);
}
/* Sin ilustración vuelve el hueco de Studio (`.sw-scene-add`), sin el «+». */
.sw-scene-card--bloqueada:not([style*="url"]) { border: 1px dashed var(--sw-line-strong); }
/* El velo que hace legibles número y rótulo sobre la obra. Uniforme y no en degradado desde
   abajo como en las publicadas: aquí el rótulo va centrado, y un degradado que nace en el
   borde inferior no lo cubriría. Suave a propósito — el punto de esto es que se vea el color
   atenuado, no taparlo. */
.sw-scene-card--bloqueada::after {
  content: ''; position: absolute; inset: 0; background: rgba(11,15,20,.24);
}
.sw-scene-card-num { position: absolute; left: 50%; top: 40px; z-index: 3; transform: translate(-50%, -50%); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(245,239,230,.7); opacity: .85; }
.sw-scene-card--bloqueada:not([style*="url"]) .sw-scene-card-num { color: var(--sw-muted); }
/* El estado, en la vertical del título de las publicadas y en la mono de los datos técnicos:
   es un dato, no una voz editorial. */
.sw-scene-card-estado {
  /* El texto arranca donde el extremo de la píldora tiene el centro de su semicírculo: el
     radio es 40px, así que ese punto está a 40px del borde inferior. Ahí empieza y crece hacia
     arriba — la línea de texto y la curva de la cápsula comparten origen.
     El giro va DENTRO de `transform`, no en la propiedad `rotate` suelta: `rotate` se aplica
     antes que `transform`, así que un `translate` se calcularía sobre el elemento ya girado y
     lo mandaría al lado contrario. */
  position: absolute; left: 50%; bottom: 40px; z-index: 3;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  max-height: calc(100cqh - 100px); overflow: hidden; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .02em;
  color: rgba(245,239,230,.9); text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.sw-scene-card--bloqueada:not([style*="url"]) .sw-scene-card-estado { color: var(--sw-muted); text-shadow: none; }

/* LA PROXIMA (Alex, 26 ago). El sistema tiene tres estados y no dos, y se deducen solos de la
   fecha: publicada, proxima —una sola, la mas cercana— y anunciada. La proxima es lo unico
   sobre lo que un visitante que llega hoy puede hacer algo, asi que deja de ser una espera:
   sale a color desde el generador, su velo se aclara y su rotulo va en el acento del album con
   la cuenta atras. Las otras once se quedan con su fecha y nada mas. */
.sw-scene-card--bloqueada[data-proxima="true"]::after {
  background: linear-gradient(0deg, rgba(0,0,0,.42) 0%, transparent 52%);
}
.sw-scene-card--bloqueada[data-proxima="true"] .sw-scene-card-estado {
  color: #FFF3E2; font-weight: 700;
}
.sw-scene-card--bloqueada[data-proxima="true"] .sw-scene-card-num { color: rgba(255,243,226,.9); }
/* El unico borde de la rejilla: la que viene. Con el color del album, no con uno inventado. */
.sw-scene-card--bloqueada[data-proxima="true"] {
  box-shadow: 0 0 0 2px var(--sw-acento, var(--sw-accent)), 0 2px 10px rgba(23,22,15,.18);
}

/* Las bloqueadas no responden al clic — eso es correcto — pero el cursor las hacia parecer
   pulsables. Ahora lo dicen tambien con la forma del puntero, no solo con el title. */
.sw-scene-card--bloqueada { cursor: default; }
.sw-scene-card-song { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.sw-scene-card:not([data-active="true"]):hover .sw-scene-card-song { opacity: 1; }
.sw-scene-card-song-text { display: block; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); max-height: calc(100cqh - 130px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px; line-height: 1.15; color: rgba(245,239,226,.8); text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* ---- lo que va sobre la imagen: marca, título, lugar·hora y código ---- */
/* En Studio el marco se calcula en JS porque la foto puede no ser 16:9. Aquí todo es 16:9
   por definición del formato, así que el marco ES la tarjeta. */
.sw-photo-overlay-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.sw-photo-brand { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(0,0,0,.18)); pointer-events: none; }
/* Colores SOLIDOS, sin alfa (Alex, 26 ago). Iban a rgba(...,.8), y con alfa el color que
   llega al ojo depende de lo que haya debajo: en pantalla completa es el negro #070B10 limpio,
   pero en la card el gradiente solo oscurece un 62 % en la base y se desvanece, asi que el
   texto se contaminaba con la foto y cambiaba de color segun la imagen.
   Estos tres valores son exactamente los que resultaban en pantalla completa, ya compuestos.
   Se ven igual alli y dejan de bailar aqui. */
.sw-photo-song-title {
  position: absolute; left: 4.1667cqw; bottom: 10.75cqh; max-width: calc(100% - 8.3334cqw); margin: 0;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(19px, 1.875cqw, 72px); line-height: 1.15;
  color: #C5C1B8; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-photo-place-time {
  position: absolute; left: 4.1667cqw; bottom: 7.407cqh; max-width: calc(100% - 8.3334cqw);
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(14px, 1.432cqw, 55px); line-height: 1.2;
  color: #B1BCB8; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El estado y la fecha de la canción que SÍ ha salido (Alex, 26 ago). Las que no han salido lo
   dicen en su cápsula, y a esta le faltaba.
   Va DEBAJO del código de escena y alineado con él a la derecha: los dos son datos de archivo,
   y juntos forman esa columna. A la izquierda vive lo que nombra la obra —título, lugar, hora—
   y no es lo mismo. Más apagado y más pequeño que ellos, a propósito. */
.sw-photo-estado {
  position: absolute; right: 24px; bottom: 7.407cqh; text-align: right;
  /* MISMO cuerpo y misma línea que `lugar · hora`, con el que comparte renglón: con cuerpos
     distintos las cajas se alinean por abajo pero las líneas base no caen en el mismo sitio, y
     el ojo lo ve torcido. La discreción la pone el color, no el tamaño. */
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(14px, 1.432cqw, 55px); line-height: 1.2;
  color: #8B9492; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-photo-scene-code {
  position: absolute; right: 24px; bottom: 11.3cqh;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(14px, 1.432cqw, 55px); line-height: 1.2;
  color: #B1BCB8; text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap;
}

/* ---- el único control esquinero que sobrevive: pantalla completa (§12) ---- */
.sw-corner-btn {
  position: absolute; top: 24px; right: 24px; z-index: 4;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: none; color: var(--sw-paper); cursor: pointer;
  transition: background-color .15s ease;
}
.sw-corner-btn:hover { background: rgba(242,238,228,.16); }
.sw-corner-btn svg { width: 20px; height: 20px; }

/* ---- barra de reproducción: `.sw-player-bar` de Studio ---- */
/* Vive FUERA de lo que se repinta (index.html) porque rehacer un iframe corta la música. */
#reproductor:empty { display: none; }
#reproductor {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 14px;
  width: min(680px, calc(100% - 56px));
  /* Mas estilizada (Alex, 26 ago): el alto lo marcaba el circulo de 44px del icono, que era
     la medida de un boton con rotulo al lado. Sin rotulo no hace falta: 32px de circulo y
     4px de aire dejan la pildora en 40. Estrecha y ancha, como una barra de reproduccion. */
  padding: 4px 16px 4px 4px; border-radius: 999px;
  background: #FCEFC8; color: #06202C;
  box-shadow: 0 6px 18px rgba(23,22,15,.14);
}
#reproductor iframe { display: block; border: 0; border-radius: 999px; width: 100%; }
#reproductor audio { width: 100%; }
/* Nada de Spotify se pide hasta que se pulsa: esto es lo que hay antes. */
.pedir {
  /* Sin `width: 100%`: se comia la barra entera y la dejaba en su minimo de 60px. Ahora
     ocupa lo suyo y el resto es para el tiempo y el progreso. */
  /* Solo el icono: ni rótulo ni nota (Alex, 26 ago). El texto sigue en `title` y en
     `aria-label` para quien no ve el icono. */
  display: flex; align-items: center; flex: none; cursor: pointer;
  padding: 0; border-radius: 999px; font: inherit;
  background: none; color: inherit; border: 0;
}
/* Sin sombreado en el boton entero: el unico circulo que se tine es el del icono. Teniendo
   los dos, la barra mostraba una pildora clara enorme detras del control (Alex, 26 ago). */
.pedir .play {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  /* Circular, no cuadrado con esquinas: el sombreado de reproduccion es un circulo, el mismo
     gesto que el del idioma en la cabecera. */
  border-radius: 50%; border: 0; background: none;
  color: var(--sw-acento, var(--sw-accent));
  transition: background-color .2s ease;
  position: relative;
}
/* Mientras suena, el circulo se llena del cielo de la insignia. Y "mientras suena" es de
   verdad: lo dice el evento playback_update de Spotify, no una suposicion nuestra. */
.pedir[data-sonando="true"] .play {
  background: color-mix(in srgb, var(--sw-cielo, var(--sw-accent)) 52%, transparent);
}
.pedir .play svg { display: block; }

/* El tiempo y la barra (Alex, 26 ago). Los números en la mono de los datos técnicos y con
   `tabular-nums`: sin eso, la cifra baila de ancho a cada segundo y el texto tiembla.
   La barra toma los dos tonos del álbum, como todo lo demás: el surco en cielo, lo recorrido
   en el azul del marco. */
.sw-tiempo { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.sw-tiempo span {
  flex: none; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--sw-muted);
}
.sw-barra {
  flex: 1 1 auto; height: 4px; border-radius: 999px; cursor: pointer; min-width: 60px;
  background: color-mix(in srgb, var(--sw-cielo, var(--sw-accent)) 52%, transparent);
}
/* El área de pulsación va más allá de los 4 px que se ven: acertar en una línea de 4 px con el
   ratón es incómodo, y con el dedo imposible. */
.sw-barra::before { content: ''; position: absolute; inset: -10px 0; }
.sw-barra { position: relative; }
.sw-barra-hecho {
  height: 100%; border-radius: 999px; width: 0;
  background: var(--sw-acento, var(--sw-accent));
  /* Sin transicion: la mueve requestAnimationFrame fotograma a fotograma, y una transicion
     encima solo anadiria retardo y rebote. */
}
/* El enlace a Spotify: mismo gesto que el icono de idioma — circulo que se tine al pasar por
   encima. Es la atribucion y la salida para oir la cancion entera. */
.sw-spotify {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; color: var(--sw-acento, var(--sw-accent));
  transition: background-color .2s ease;
}
.sw-spotify:hover { background: color-mix(in srgb, var(--sw-cielo, var(--sw-accent)) 52%, transparent); }
.sw-spotify svg { display: block; }

.sw-barra:focus-visible { outline: 2px solid var(--sw-acento, var(--sw-accent)); outline-offset: 4px; }
/* El embed de Spotify se oculta y manda nuestro control (Alex, 26 ago): con los dos a la vista
   habia dos reproductores para la misma cancion.
   Se recorta con un contenedor de alto cero en vez de apagarlo con `display: none`: el iframe
   tiene que seguir RENDERIZADO para reproducir — apagado del todo puede quedarse sin audio.
   Queda en el DOM, con su tamano, simplemente no se ve.
   Nota que no es tecnica: el embed tambien sirve de atribucion y de enlace a Spotify. Ocultarlo
   fue decision de Alex, avisado. */
.sw-embed {
  /* Fuera del reparto de la pildora: es hijo flex, y aunque tenga alto cero seguia
     reclamando ANCHO al aparecer el iframe — la barra de progreso se encogia al darle a play.
     Sacado del flujo, no le quita sitio a nadie. */
  position: absolute; width: 1px; height: 0; overflow: hidden; pointer-events: none;
}
.sw-embed iframe { display: block; border: 0; width: 100%; }


/* ── Pantalla 2 · la canción (§12 + §13, ahora la misma) ─────────────────── */
/* Decisión de Alex (25 ago): la pantalla completa y la ficha son LA MISMA pantalla. La
   ilustración es la base; los iconos no la adornan, la estructuran. Para la v1 el panel es
   siempre el mismo oscuro translúcido con desenfoque: NO se porta todavía el sistema de
   contraste medido de Studio. */
body[data-vista="cancion"] { overflow: hidden; }
body[data-vista="cancion"] #sitio { height: 100%; }

.sw-cancion { position: fixed; inset: 0; z-index: 60; background: #070B10; display: grid; place-items: center; }
/* El rótulo se ancla al rectángulo REAL de la obra, no a la ventana: como la obra siempre es
   16:9, basta con que lo sea el escenario. Studio lo mide en JS; aquí no hace falta. */
.sw-cancion .sw-photo-stage { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((100vh - var(--sw-player-space)) * 16 / 9)); }
.sw-cancion img.sw-photo-image { width: 100%; height: 100%; object-fit: contain; display: block; }
/* El vídeo ocupa el mismo rectángulo que la ilustración: es la misma obra en movimiento. */
.sw-cancion iframe.sw-photo-image { width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* «Solo la obra»: se apaga el rótulo, no los controles. */
.sw-cancion[data-limpio="true"] .sw-photo-brand,
.sw-cancion[data-limpio="true"] .sw-photo-song-title,
.sw-cancion[data-limpio="true"] .sw-photo-place-time,
.sw-cancion[data-limpio="true"] .sw-photo-estado,
.sw-cancion[data-limpio="true"] .sw-photo-scene-code { opacity: 0; transition: opacity .25s ease; }
.sw-cancion .sw-corner-btn { top: 20px; right: 20px; }

/* ---- la tira de capas: la cápsula crema de Studio (`.sw-fullscreen-steps`) ---- */
/* Va por encima del reproductor, que es fijo y ocupa los 88 px de abajo. */
.sw-capas {
  position: fixed; left: 50%; bottom: calc(var(--sw-player-space) + 8px); transform: translateX(-50%); z-index: 62;
  display: flex; align-items: center; gap: 2px;
  padding: 6px; border-radius: 999px;
  background: rgba(242,238,228,.92); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.sw-capa-btn {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: none; color: var(--sw-ink); cursor: pointer; opacity: .55;
  transition: opacity .15s ease, background-color .15s ease;
}
.sw-capa-btn:hover:not(:disabled) { opacity: .9; background: rgba(23,22,15,.07); }
.sw-capa-btn[data-viendo="true"] {
  opacity: 1; color: var(--sw-acento, var(--sw-accent));
  background: color-mix(in srgb, var(--sw-cielo, var(--sw-accent)) 52%, transparent);
}
/* Un icono que no puede enseñar nada no finge que sí. */
.sw-capa-btn:disabled { opacity: .2; cursor: default; }
/* El superíndice del micro dice qué letra se está leyendo, igual que en Studio. */
.sw-capa-btn sup {
  position: absolute; top: 2px; right: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 8px; line-height: 1; letter-spacing: .3px;
}

/* ---- el panel de lectura ---- */
/* Dos anchos, que pidió Alex: corto para Story/Score/Legacy, ancho para la letra. */
.sw-capa {
  position: absolute; z-index: 5; pointer-events: auto;
  /* Abajo se para antes de la tira de iconos y del reproductor: si pasara por debajo,
     el final del texto quedaria tapado justo donde se esta leyendo. */
  /* Sin scroll (Alex, 26 ago): sobraban 37px arriba y 62 entre el panel y la tira de iconos.
     Se recuperan casi todos y se deja solo el aire justo. */
  top: 2.6cqh; bottom: 15.4cqh; right: 4.1667cqw;
  display: flex; flex-direction: column;
  border-radius: 22px; border: 1px solid rgba(245,239,226,.16);
  background: rgba(7,11,16,.72); backdrop-filter: blur(14px);
  color: rgba(245,239,226,.86); box-shadow: 0 12px 40px rgba(0,0,0,.42);
}
.sw-capa[data-ancho="corto"] { width: min(400px, 40cqw); }
/* La letra ocupa casi todo el escenario: es el unico contenido que no cabe de otra forma, y
   cuantas mas columnas quepan, menos alto necesita. */
.sw-capa[data-ancho="ancho"] { width: min(1180px, 92cqw); left: 50%; right: auto; transform: translateX(-50%); }
.sw-capa-cabeza {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 16px 22px 12px; border-bottom: 1px solid rgba(245,239,226,.14);
}
/* El icono de la capa abierta, el MISMO que su boton de la barra inferior y en el mismo
   naranja con que ese boton se marca encendido: es lo que ata el control con lo que abre.
   Sin circulo, sin fondo, sin insignia — el icono y ya. */
.sw-capa-icono { flex: none; display: flex; color: var(--sw-acento, var(--sw-accent)); }
.sw-capa-icono svg { display: block; }
/* El titulo se lleva el hueco que queda, para que el codigo siga pegado a la derecha. */
.sw-capa-cabeza strong { margin-right: auto; }
.sw-capa-cabeza strong { font-family: Fraunces, serif; font-weight: 600; font-size: var(--h); letter-spacing: .4px; text-transform: uppercase; }
.sw-capa-cabeza .codigo { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(245,239,226,.55); }
/* El scroll lo hace el panel por dentro: la página no se mueve nunca. */
.sw-capa-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 22px; overscroll-behavior: contain; }
.sw-capa-cuerpo::-webkit-scrollbar { width: 6px; }
.sw-capa-cuerpo::-webkit-scrollbar-thumb { background: rgba(245,239,226,.22); border-radius: 3px; }
.sw-capa-cuerpo p + p { margin-top: 10px; }
.sw-capa-cuerpo h3 { font-family: Fraunces, serif; font-weight: 600; font-size: var(--h); letter-spacing: .4px; text-transform: uppercase; margin: 18px 0 8px; }
.sw-capa-cuerpo h3:first-child { margin-top: 0; }

/* ── sistema compartido de las capas ─────────────────────────────────────────
   Cuatro capas, una sola familia. Lo que cambia entre ellas es el RITMO, no las piezas:
   Story respira en prosa, Lyrics se compone como libreto, Score es tabular, Legacy va en dos
   modulos rotulados. Estetica de libreto y de ficha de archivo, no de panel de aplicacion.

   LA REGLA DE ARCHIVO. Un filete con su etiqueta encima, que es como se separan las secciones
   de una ficha de museo. Sustituye a los titulares sueltos: el titular pesaba tanto como el
   texto y partia la lectura en dos. */
.regla { display: flex; align-items: center; gap: 12px; margin: 15px 0 9px; }
.regla:first-child { margin-top: 0; }
.regla::after { content: ''; flex: 1; height: 1px; background: rgba(245,239,226,.16); }
.regla span {
  flex: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase; color: rgba(245,239,226,.52);
}

/* LOS CHIPS. Misma forma en las dos capas que los usan, distinto color: las sensaciones son
   del cielo del album y los generos de su marco. Asi se distinguen sin leerlos. */
.chips { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; }
.chips li {
  border-radius: 999px; padding: 3px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: calc(var(--t) * .78); letter-spacing: .3px;
}
.chips--cielo li {
  border: 1px solid color-mix(in srgb, var(--sw-cielo, var(--sw-accent)) 46%, transparent);
  background: color-mix(in srgb, var(--sw-cielo, var(--sw-accent)) 12%, transparent);
  color: color-mix(in srgb, var(--sw-cielo, var(--sw-accent)) 84%, white);
}
.chips--marco li {
  border: 1px solid color-mix(in srgb, var(--sw-acento, var(--sw-accent)) 52%, transparent);
  background: color-mix(in srgb, var(--sw-acento, var(--sw-accent)) 16%, transparent);
  color: rgba(245,239,226,.82);
}

/* ── STORY ─────────────────────────────────────────────────────────────────
   La entradilla es el primer parrafo del resumen, que es el que enuncia la idea. Va en la
   serif y a mayor cuerpo; los otros dos quedan de cuerpo de texto. No es un adorno: marca
   cual es la frase que hay que leer si solo se lee una. */
.idea {
  font-family: Fraunces, serif; font-weight: 500;
  font-size: calc(var(--t) * 1.24); line-height: 1.45;
  color: rgba(245,239,226,.94);
}
/* La frase central abre y la entradilla viene detras: dos piezas en la serif seguidas
   necesitan aire entre ellas, o se leen como un solo bloque. */
.frase-central + .idea { margin-top: 16px; }
.cuerpo-story { margin-top: 14px; color: rgba(245,239,226,.78); }
/* La frase central: lo unico del concepto que se publica literal, y por eso se compone como
   una cita y no como un parrafo mas — filete al margen y serif, el mismo gesto con el que el
   estribillo se distingue de las estrofas en Lyrics. Una pieza, no dos lenguajes. */
.frase-central {
  font-family: Fraunces, serif; font-weight: 500; font-size: calc(var(--t) * 1.12);
  line-height: 1.45; color: rgba(245,239,226,.92);
  border-left: 2px solid var(--sw-acento, var(--sw-accent)); padding-left: 14px;
}

/* ── LYRICS ────────────────────────────────────────────────────────────────
   Libreto: cada estrofa es su propio bloque y no se parte entre columnas. El estribillo se
   marca con un filete al margen y la serif — es el bloque que se repite, no una eleccion. */
/* Columnas por ANCHO y no por numero: el navegador pone las que quepan segun el escenario, y
   asi en una pantalla grande la letra entera cabe sin scroll y en una pequena no se estrecha
   hasta romper los versos. */
.letra { column-gap: 40px; }
.sw-capa[data-ancho="ancho"] .letra { columns: 250px; }
/* El panel de la letra: estrecho y centrado, no ancho. Ya no hay columnas que llenar. */
.sw-capa[data-ancho="medio"] { width: min(560px, 52cqw); left: 50%; right: auto; transform: translateX(-50%); }
.estrofa {
  white-space: pre-wrap; break-inside: avoid; margin: 0 0 14px;
  line-height: 1.62; color: rgba(245,239,226,.82);
}
.estrofa[data-estribillo="true"] {
  font-family: Fraunces, serif; font-size: calc(var(--t) * 1.08);
  color: rgba(245,239,226,.96);
  border-left: 2px solid var(--sw-acento, var(--sw-accent)); padding-left: 14px;
}

/* ── SCORE ─────────────────────────────────────────────────────────────────
   Tres alturas: la nota global con su anillo, las dos parciales con medidor, y los generos
   como chips. */
.score-cabeza { display: flex; align-items: center; gap: 18px; margin-bottom: 4px; }
.anillo { position: relative; flex: none; width: 82px; aspect-ratio: 1; }
.anillo svg { width: 100%; height: 100%; display: block; }
.anillo b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Fraunces, serif; font-weight: 600; font-size: 25px; }
.score-nombre { font-family: Fraunces, serif; font-weight: 600; letter-spacing: .4px; }
.score-puesto { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 1.2px; color: rgba(245,239,226,.6); }
/* Se dice lo que es: una valoracion del propio archivo, no una critica. */
.score-aviso { margin-top: 4px; font-size: calc(var(--t) * .82); color: rgba(245,239,226,.5); }

.nota + .nota { margin-top: 13px; }
.nota-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nota-nombre { font-family: Fraunces, serif; font-weight: 600; font-size: var(--h); letter-spacing: .4px; }
.nota-cifra { font-family: Fraunces, serif; font-weight: 600; font-size: calc(var(--h) * 1.15); font-variant-numeric: tabular-nums; }
/* El medidor: la misma barra fina del reproductor. Un gesto que ya existe en la pantalla no
   se reinventa con otra forma. */
.nota-medidor { height: 3px; border-radius: 999px; background: rgba(245,239,226,.14); margin: 6px 0 7px; overflow: hidden; }
.nota-medidor i { display: block; height: 100%; border-radius: 999px; }
.nota p { color: rgba(245,239,226,.74); font-size: calc(var(--t) * .9); line-height: 1.5; }

@media (max-width: 860px) {
  :root { --t: 13px; --h: 17px; }
  .sw-capa, .sw-capa[data-ancho="corto"], .sw-capa[data-ancho="ancho"] {
    width: auto; left: 4.1667cqw; right: 4.1667cqw; transform: none;
  }
  .sw-capa[data-ancho="ancho"] .letra { column-count: 1; }
  .generos { grid-template-columns: 1fr; }
}