/* ===================== Identidad visual: "urbano oscuro con neon" =====================
   Fondo casi negro con un resplandor sutil, acentos neon (magenta/rosa, cian, lima) para
   estados activos/hover/graficos, tipografia "Space Grotesk" para titulos/marca (con Inter y
   la pila de sistema como respaldo) e "Inter" para el cuerpo de texto. Todo lo demas (layout de
   formularios, tarjetas, etc.) se mantiene igual -- este bloque solo redefine los colores base
   y agrega la barra de pestañas nueva. */
/* Parte 4: el atributo hidden SIEMPRE esconde (antes, reglas como display:flex/grid le ganaban
   y dejaban visibles paneles, errores y campos de registro que deberian estar ocultos). */
[hidden] { display: none !important; }

:root {
  /* Skin por defecto: "Clasico" (el mismo neon magenta/cian/lima de siempre). */
  --bg: #07070c;
  --bg-glow-1: rgba(255, 45, 149, 0.10);
  --bg-glow-2: rgba(0, 224, 255, 0.08);
  --panel: #14141d;
  --panel-2: #0c0c14;
  --accent: #ff2d95;
  --accent-2: #00e0ff;
  --accent-3: #c6ff3d;
  --text: #f1f2f8;
  --muted: #9299ab;
  --border: #26263a;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Skin alternativo "Aurora" -- violeta/turquesa/dorado en vez del neon magenta/cian por defecto.
   Se activa poniendo data-skin="aurora" en <html> (ver public/theme.js, elegido con el selector
   del header). Redefine EXACTAMENTE las mismas variables que el :root de arriba y nada mas -- el
   fondo/panel/borde quedan igual de oscuros que el skin Clasico, asi que todos los colores fijos
   que hay sueltos en el resto de este archivo (rojos de error, badges, etc., pensados para un
   fondo oscuro) se siguen viendo bien sin tener que retocar cada uno. */
:root[data-skin="aurora"] {
  --bg: #05060f;
  --bg-glow-1: rgba(124, 92, 255, 0.14);
  --bg-glow-2: rgba(0, 212, 170, 0.10);
  --panel: #12142a;
  --panel-2: #0a0b1a;
  --accent: #7c5cff;
  --accent-2: #00d4aa;
  --accent-3: #ffd166;
  --text: #eef0fb;
  --muted: #8d93b0;
  --border: #262a4a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(680px 420px at 12% -6%, var(--bg-glow-1), transparent 60%),
    radial-gradient(680px 420px at 88% 0%, var(--bg-glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

header {
  padding: 24px 32px 8px;
  max-width: 1300px;
  margin: 0 auto;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.header-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Modal "⚙ Configuracion" del header -- ahi viven ahora los selectores de skin (apariencia) e
   idioma, cada uno en su propia fila con un label a la izquierda, en vez de sueltos en el header
   como antes. */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row label { font-weight: 600; }
.settings-select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-body);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 180px;
}
.settings-select:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* "Estructura vocal por segmentos" (final de la seccion 1, ver #segmentBuilder en index.html) --
   una tarjeta por segmento con inicio/fin/tipo y, si es "con voz", su propia letra. Mismo look
   general que .dataset-item (seccion 10). */
.segment-rows { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.segment-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #0f1220;
}
.segment-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0 12px;
}
.segment-row-grid label { font-size: 0.78rem; margin-bottom: 8px; }
.segment-row textarea {
  width: 100%;
  min-height: 60px;
  margin-top: 6px;
  padding: 8px 10px;
  background: #171a22;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font-body);
}
.segment-row-remove {
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 0.78rem;
  background: #3a1f24;
  color: #ff8a8a;
}
@media (max-width: 640px) {
  .segment-row-grid { grid-template-columns: 1fr 1fr; }
}

/* Estadisticas del patron actual (Beat Maker, seccion 13) -- una barrita horizontal por pista
   (bateria en --accent-2, melodicas en --accent) con la cantidad de golpes/notas al lado. Ver
   updateStatsChart() en beatmaker.js. */
.bm-stats-chart {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
}
.bm-stats-row { display: flex; align-items: center; gap: 8px; }
.bm-stats-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 0.76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-stats-bar-track {
  flex: 1;
  height: 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.bm-stats-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.15s ease;
  background: var(--accent-2);
}
.bm-stats-bar-fill.is-melodic { background: var(--accent); }
.bm-stats-count {
  width: 22px;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.76rem;
  color: var(--muted);
}
header h1 {
  margin: 0;
  font-size: 1.7rem;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
}
.brand-mark {
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 55%, var(--accent-3) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 45, 149, 0.25));
}
.brand-badge {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: normal;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 10px;
  vertical-align: middle;
}
header p { color: var(--muted); margin-top: 4px; }

.help-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  flex-shrink: 0;
}
.help-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* Barra de pestañas -- agrupa las 13 secciones de siempre en 4 pestañas (ver switchTab() en
   app.js) para no tener que hacer scroll infinito. Queda pegada arriba al hacer scroll. */
.tab-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 6px;
  max-width: 1300px;
  margin: 10px auto 0;
  padding: 6px 32px 0;
  border-bottom: 1px solid var(--border);
  background: rgba(7, 7, 12, 0.92);
  backdrop-filter: blur(6px);
  overflow-x: auto;
}
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 16px 10px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--accent-2);
  background: linear-gradient(180deg, rgba(0, 224, 255, 0.08), transparent);
}

main {
  padding: 20px 32px 40px;
  max-width: 1300px;
  margin: 0 auto;
}
.tab-page[hidden] { display: none; }

footer {
  text-align: center;
  padding: 18px 32px 32px;
}

.credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(255, 45, 149, 0.10), rgba(0, 224, 255, 0.10));
}

.credit-note {
  font-size: 0.95rem;
  filter: drop-shadow(0 0 6px rgba(255, 45, 149, 0.5));
}

.credit-text {
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.credit-name {
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* El credito del pie de pagina ("Desarrollado por...") se muestra 2 segundos cada vez que se
   entra a la app (ver authgate.js:hideGate) y despues se esfuma solo -- sigue viviendo siempre,
   fijo y sin el timer, adentro de Configuracion (ver el "settings-credit" mas abajo) para quien
   lo quiera ver de nuevo. .credit ya tiene su tamaño/opacidad final -- esta clase solo anima la
   transicion hacia opacity:0 en vez de que desaparezca de golpe. */
#footerCredit {
  transition: opacity 0.6s ease;
}
#footerCredit.credit-faded {
  opacity: 0;
  pointer-events: none;
}

.settings-credit {
  display: flex;
  margin: 18px auto 0;
  width: fit-content;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 20px 60px -30px rgba(255, 45, 149, 0.15);
}

h2 { font-size: 1rem; margin: 0 0 12px; color: var(--accent-2); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; }

label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 12px;
}

input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  background: #0f1220;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
}

textarea { resize: vertical; font-family: inherit; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.provider-select { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.radio {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
.radio input { margin-top: 4px; }
.radio strong { display: block; font-size: 0.9rem; }
.radio span { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: #08060a;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: filter 0.15s ease, transform 0.1s ease;
}
button:hover:not(:disabled) { filter: brightness(1.1); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.status { min-height: 1.2em; font-size: 0.85rem; color: var(--accent-2); margin-top: 10px; }

.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: #0f1220;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: 10px;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transition: width 0.5s ease;
}

button.stop-btn {
  background: linear-gradient(135deg, #ff6b6b, #e0b34a);
  color: #1a0b0b;
}

.lyrics-view {
  background: #0f1220;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  min-height: 90px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 16px;
}
.lyrics-view .active { color: var(--accent-2); font-weight: 600; }

/* "Grafica digitalizada" estilo Windows Media Player -- ver drawVisualizerFrame en app.js.
   El canvas y el overlay de letra van uno encima del otro (position: relative/absolute). */
.visualizer-panel { margin-bottom: 16px; }
.visualizer-canvas-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #05060a;
}
#visualizerCanvas { display: block; width: 100%; height: 200px; }
/* Mismo tipo de canvas reutilizado en Beat Maker y Grabar voz (ver public/visualizer.js) -- un
   poco mas bajo que el del Estudio porque esos paneles ya tienen bastantes controles arriba. */
.audio-visualizer-canvas { display: block; width: 100%; height: 160px; }
.visualizer-lyric-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  padding: 0 16px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 45, 149, 0.6);
  pointer-events: none;
  min-height: 1.4em;
  transition: opacity 0.15s ease;
}
.visualizer-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.visualizer-controls button {
  padding: 6px 12px;
  font-size: 0.82rem;
}
.visualizer-hint { font-size: 0.78rem; color: var(--muted); }
.instrument-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.instrument-tags:empty { display: none; }
.instrument-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: #1c2030;
  border: 1px solid var(--border);
  color: var(--accent-2);
}
.instrument-tag.instrument-tag-style { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; }
.instrument-tag.instrument-tag-excluded { color: var(--muted); text-decoration: line-through; }
.instrument-tag.instrument-tag-detected { color: #0f1116; background: var(--accent-2); border: none; font-weight: 600; }
.instrument-tags-note { flex-basis: 100%; font-size: 0.72rem; color: var(--muted); margin: 2px 0 0; }
.instrument-tags-heading { flex-basis: 100%; font-size: 0.8rem; color: var(--text); margin: 10px 0 0; font-weight: 600; }

/* "Radio EQ" -- fila estilo ecualizador digital de radio de carro para cada instrumento
   IDENTIFICADO de verdad (ver buildRadioEqRow en app.js) y, con el mismo look, las columnas del
   modo "Radio digital" del visualizador de audio (esas se dibujan en canvas, no con estos
   elementos, pero comparten paleta verde/amarillo/rojo). */
.radio-eq-board {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 10px;
  background: #05060a;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.radio-eq-row { display: flex; align-items: center; gap: 8px; }
.radio-eq-label { flex: 0 0 110px; font-size: 0.75rem; color: var(--text); text-align: right; }
.radio-eq-leds { display: flex; gap: 2px; flex: 1 1 auto; }
.radio-eq-led {
  flex: 1 1 auto;
  height: 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.radio-eq-led.is-lit.led-green { background: #3ddc84; }
.radio-eq-led.is-lit.led-yellow { background: #ffd166; }
.radio-eq-led.is-lit.led-red { background: #ff4d5e; }
.radio-eq-pct { flex: 0 0 38px; font-size: 0.72rem; color: var(--muted); text-align: right; }
@media (max-width: 640px) {
  .radio-eq-label { flex-basis: 80px; font-size: 0.7rem; }
}

.tracks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.empty-state { color: var(--muted); font-size: 0.9rem; }

.track {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #0f1220;
}
.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.track-controls { display: flex; align-items: center; gap: 10px; }
.waveform { min-height: 60px; margin-top: 8px; }
.native-audio { width: 100%; margin-top: 4px; }
.track-error { color: #ff6b6b; font-size: 0.78rem; margin: 6px 0 0; }
.track-error:empty { display: none; }

.pitch-match-badge { font-size: 0.78rem; color: var(--accent-2); margin: 4px 0 0; }
.pitch-match-badge-error { color: var(--muted); }

.transport { display: flex; gap: 10px; align-items: center; }
.transport select { width: auto; margin-top: 0; }
.export-hint { font-size: 0.78rem; color: var(--muted); margin: 6px 0 16px; }

.beats-hint { font-size: 0.82rem; color: var(--muted); margin-top: -6px; }
.beats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 8px;
  max-height: 260px;
  overflow-y: auto;
}
.beat-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #0f1220;
}
.beat-item.selected { border-color: var(--accent); background: #171334; }
.beat-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.beat-item-header .beat-name { font-weight: 600; }
.beat-item-header .beat-meta { color: var(--muted); font-size: 0.78rem; }
.beat-item-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.beat-item-actions button { padding: 6px 12px; font-size: 0.82rem; }
.beat-item-actions .danger { background: #3a1f24; color: #ff8a8a; }
.beat-analyze-result { font-size: 0.78rem; color: var(--accent-2); margin: 6px 0 0; }
.beat-analyze-result:empty { display: none; }
.selected-beat-info { font-size: 0.85rem; color: var(--accent-2); min-height: 1.2em; margin: 0 0 12px; }
.selected-beat-info:empty { display: none; }

.reference-hint { font-size: 0.82rem; color: var(--muted); margin-top: -6px; }
.reference-hint-warning { color: #e0b34a; margin-top: 6px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; }
.checkbox-label input { width: auto; margin-top: 0; }
.reference-keepstyle-hint { font-size: 0.78rem; color: var(--muted); margin: -6px 0 12px; }
.reference-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
}
.reference-preview audio { flex: 1; }
.reference-preview button { padding: 6px 12px; font-size: 0.82rem; background: #3a1f24; color: #ff8a8a; }
.reference-options {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0 16px;
  background: #0f1220;
}
.reference-options label:last-child { margin-bottom: 0; }

.clone-heading { margin-top: 28px; }
.clone-hint { font-size: 0.82rem; color: var(--muted); margin-top: -6px; }
.clone-hint code { background: #0f1220; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.clone-controls { display: flex; align-items: flex-end; gap: 14px; }
.clone-controls label { margin-bottom: 0; width: 140px; }
.clone-controls input { margin-top: 6px; }

.history-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #0f1220;
}
.history-panel label { margin-bottom: 8px; }
.history-panel button { padding: 8px 14px; font-size: 0.85rem; }

.tune-upload-block {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0 16px;
}
.tune-upload-block label { margin-bottom: 6px; }
.tune-upload-block input[type="file"] { margin-top: 8px; }

.lora-actions { display: flex; gap: 10px; margin: 4px 0 10px; }
.lora-actions button { flex: 1; }

.tune-panel {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 14px 14px;
  background: #0f1220;
}
.tune-panel summary {
  cursor: pointer;
  font-size: 1rem;
  color: var(--accent-2);
  padding: 10px 0;
  user-select: none;
}
.tune-panel[open] summary { margin-bottom: 4px; }
.tune-hint { font-size: 0.82rem; color: var(--muted); margin-top: 0; }
.tune-panel .grid { margin-bottom: 4px; }
.tune-panel button { margin-top: 4px; }

.autotune-panel { margin-top: 14px; }

/* Slider de "Velocidad de retune"/"Fuerza del efecto" (autotune, seccion 6) -- primer
   input[type=range] de la app, los demas controles numericos usan input[type=number]. */
input[type="range"] { width: 100%; margin-top: 6px; accent-color: var(--accent-2); }
.range-value { font-size: 0.82rem; color: var(--accent-2); }

.instrument-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 12px; }
.instrument-col-title { font-size: 0.85rem; color: var(--accent-2); margin: 0 0 8px; }
.instrument-grid { display: flex; flex-direction: column; gap: 6px; }
.instrument-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: 0.85rem;
  color: var(--text);
}
.instrument-grid input { width: auto; margin-top: 0; }

.task-type-warning { font-size: 0.82rem; color: #e0b34a; margin: 6px 0 0; }
.task-type-warning:empty { display: none; }

.history-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.history-actions button { padding: 6px 12px; font-size: 0.82rem; }
.history-actions .danger { background: #3a1f24; color: #ff8a8a; }

.tracks-hint { font-size: 0.78rem; color: var(--muted); margin: -8px 0 12px; }

.track.selected { border-color: var(--accent); background: #171334; }
.track-use-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.track-use-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0c10;
  border-color: transparent;
  font-weight: 600;
}

/* Selector de "Modo facil / Modo avanzado" (seccion 11) -- dos botones bien separados y del
   mismo tamano, en vez de reusar el boton chico de "usar esta version" (ese se veia angosto y
   desparejo al lado de un texto mas largo como "Modo avanzado"). */
.mode-toggle {
  display: flex;
  gap: 10px;
  margin: 10px 0 14px;
}
.mode-toggle-btn {
  flex: 1 1 0;
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #0f1220;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
}
.mode-toggle-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0c10;
  border-color: transparent;
}

.export-normalize { margin: 8px 0 4px; }

.status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
}

.status-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--panel);
}
/* Beat Maker/DJ Mixer arman los botones de "Renombrar"/"Borrar" de cada item guardado a mano con
   JS (document.createElement), pegados directo como hijos de .status-item sin ningun contenedor
   propio -- este margen es lo que evita que queden pegados al reproductor de audio de arriba y
   entre si cuando pasan a la siguiente linea en pantallas angostas. */
.status-item > button { margin-top: 6px; margin-right: 6px; }

.status-item-ok { border-color: rgba(0, 224, 255, 0.35); }
.status-item-missing { border-color: rgba(224, 90, 90, 0.4); }
.status-item-optional { opacity: 0.85; }

.status-item-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 2px;
}

.status-item-detail {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

.status-item-hint {
  font-size: 0.8rem;
  color: var(--accent-2);
  margin: 6px 0 0;
}

/* Explorador de archivos dentro de un elemento de la papelera (voces o canciones borradas) --
   se abre/cierra con el boton "📁 Ver archivos" de cada item, ver renderTrashFileExplorer en
   app.js. Es una tabla simple: ruta relativa del archivo + su tamano. */
.trash-file-explorer {
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.trash-file-explorer-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  font-family: 'Courier New', Courier, monospace;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.trash-file-explorer-row:last-child { border-bottom: none; }

.trash-file-explorer-path {
  color: var(--text, #e6e6e6);
  overflow-wrap: anywhere;
}

.trash-file-explorer-size {
  color: var(--muted);
  white-space: nowrap;
}

.trash-file-explorer-empty {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 4px 0 0;
}

.dataset-items { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; }
.dataset-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #0f1220;
}
.dataset-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.dataset-item-header .dataset-item-name { font-weight: 600; word-break: break-word; }
.dataset-item-header button { padding: 4px 10px; font-size: 0.78rem; background: #3a1f24; color: #ff8a8a; }
.dataset-item audio { width: 100%; margin-bottom: 8px; }
.dataset-item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.dataset-item-grid label { font-size: 0.78rem; margin-bottom: 8px; }
.dataset-item textarea {
  width: 100%;
  min-height: 60px;
  margin-top: 6px;
  padding: 8px 10px;
  background: #171a22;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
}
.dataset-item-status { font-size: 0.78rem; color: var(--accent-2); margin: 0 0 6px; }
.dataset-item-status.error { color: #ff8a8a; }

.train-log {
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}
#trainProgress .stop-btn { margin-top: 6px; }
#trainResultActions { margin-top: 12px; }
#trainResultActions code {
  background: #0f1220;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  word-break: break-all;
}

/* Modal "Instrucciones" (boton ❓ en el header) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 { margin: 0; }
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 8px;
}
.modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.modal-body .tune-panel { margin-top: 10px; }
.modal-body .tune-panel:first-of-type { margin-top: 0; }

/* Seccion 11 (Entrenar mi sonido) -- rediseño visual: agrupa los campos en tarjetas con titulo
   en vez de una lista plana de inputs, y le da mas peso al aviso y al panel de progreso. */
.train-panel summary { font-weight: 600; }

.train-warning {
  border: 1px solid #e0b34a;
  background: rgba(224, 179, 74, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text);
  margin: 4px 0 16px;
}
.train-warning strong { color: #e0b34a; }

.field-group {
  border: 1px solid var(--border);
  background: #0f1220;
  border-radius: 10px;
  padding: 10px 14px 2px;
  margin: 0 0 10px;
}
.field-group-title {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.field-group label:last-child { margin-bottom: 12px; }

.train-cta {
  width: 100%;
  padding: 9px 14px;
  font-size: 0.85rem;
  margin-top: 4px;
}

#trainCancelBtn, #trainCopyPathBtn, #trainUseAdapterBtn {
  padding: 7px 12px;
  font-size: 0.8rem;
}

.train-progress-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0f1220;
  padding: 16px;
  margin-top: 12px;
  transition: border-color 0.3s ease;
}
.train-progress-card[data-status="error"] { border-color: #ff6b6b; }
.train-progress-card[data-status="done"] { border-color: var(--accent-2); }
.train-progress-card[data-status="cancelled"] { border-color: var(--muted); }
.train-progress-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.train-status-icon { font-size: 1.2rem; line-height: 1; }
.train-progress-header p { margin: 0; font-size: 0.9rem; color: var(--accent-2); font-weight: 600; }
.train-log-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 12px 0 4px;
}

/* ===================== 13. Hacer beats (Beat Maker) ===================== */
/* Todo esto vive dentro de #beatMakerSection -- la grilla la arma public/beatmaker.js, este
   archivo solo define como se ve cada pieza (casilleros de bateria, filas de piano-roll para
   bajo/melodia, controles de transporte). */

.beatmaker-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 18px;
  padding: 14px 16px;
  background: #0f1220;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
}
.beatmaker-transport label {
  margin-bottom: 0;
  min-width: 90px;
}
.beatmaker-transport label input,
.beatmaker-transport label select {
  width: auto;
  min-width: 90px;
}
.beatmaker-transport label input[type="range"] { width: 120px; }
.beatmaker-transport-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
#bmPlayBtn.is-playing {
  background: linear-gradient(135deg, #e0245e, #ff6b8b);
}

.beatmaker-tracks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.bm-track-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--panel);
}

.bm-track-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bm-track-label .bm-track-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-track-label .bm-track-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bm-track-label input[type="range"] {
  width: 56px;
  margin: 0;
}
.bm-track-label select.bm-waveform {
  width: auto;
  margin: 0;
  padding: 2px 4px;
  font-size: 0.7rem;
}
button.bm-mute-btn {
  padding: 3px 8px;
  font-size: 0.7rem;
  background: var(--border);
  color: var(--text);
  font-weight: 600;
}
button.bm-mute-btn.is-muted {
  background: linear-gradient(135deg, #e0245e, #ff6b8b);
  color: #fff;
}

.bm-steps-scroll { overflow-x: auto; }
.bm-steps-row {
  display: flex;
  gap: 3px;
}
.bm-steps-row.bm-pianoroll-row {
  margin-bottom: 2px;
}
.bm-step {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #0f1220;
  cursor: pointer;
  padding: 0;
}
.bm-step.bm-beat-start { border-left: 2px solid var(--border-strong, #3a3f4e); }
.bm-step.is-active { background: var(--accent-2); border-color: var(--accent-2); }
#bmBassTrack .bm-step.is-active { background: var(--accent); border-color: var(--accent); }
#bmMelodyTrack .bm-step.is-active { background: #f5a524; border-color: #f5a524; }
/* Acento (velocity alta): mismo color de base pero mas brillante + glow + un puntito arriba,
   para que se distinga de un paso "normal" activo sin perder la logica de color por pista. */
.bm-step.is-accent {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 8px 1px currentColor;
  filter: brightness(1.35) saturate(1.3);
}
.bm-step.is-accent::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  margin: 2px auto 0;
  border-radius: 50%;
  background: #fff;
}
.bm-step.is-playhead { outline: 2px solid #fff; outline-offset: 1px; }

.bm-pianoroll-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.68rem;
  color: var(--muted);
  width: 32px;
  flex: 0 0 32px;
  text-align: right;
  padding-right: 4px;
  line-height: 22px;
}
.bm-pianoroll-row { display: flex; align-items: center; gap: 6px; }

.beatmaker-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
}
.beatmaker-save-row label { margin-bottom: 0; min-width: 140px; }

.bm-saved-item-audio { margin-top: 6px; width: 100%; }

#bmSwingValue { font-family: 'Courier New', Courier, monospace; color: var(--accent-3, var(--accent-2)); font-size: 0.78rem; }

/* --- Estructura de cancion: banco de patrones + arreglo (seccion 13) --- */
.bm-patterns-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.bm-patterns-list,
.bm-arrangement-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.bm-pattern-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}
.bm-pattern-chip.is-editing {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2);
}
.bm-pattern-chip-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.bm-pattern-chip-name .bm-pattern-chip-bars {
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}
.bm-pattern-chip-action {
  padding: 2px 6px;
  font-size: 0.72rem;
  background: var(--border);
  color: var(--text);
  border-radius: 6px;
}
.bm-pattern-chip-action.bm-pattern-chip-danger {
  background: linear-gradient(135deg, #e0245e, #ff6b8b);
  color: #fff;
}

.bm-arrangement-list {
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  min-height: 40px;
  background: #0f1220;
}
.bm-arrangement-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: rgba(255, 45, 149, 0.12);
  font-size: 0.78rem;
  color: var(--text);
}
.bm-arrangement-chip button {
  padding: 1px 5px;
  font-size: 0.7rem;
  line-height: 1;
  background: var(--border);
  color: var(--text);
}
.bm-arrangement-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bm-arrangement-add-row select { width: auto; min-width: 160px; }

/* --- Efectos y mezcla por pista (seccion 13) --- */
.bm-fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.bm-fx-track {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bm-fx-track-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
}
.bm-fx-track label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 0;
}
.bm-fx-track label input[type="range"] { width: 110px; }

/* --- Grabar voz (seccion 14) --- */
.rec-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.rec-source-tab {
  padding: 6px 12px;
  font-size: 0.82rem;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.rec-source-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.rec-source-panel { margin-bottom: 10px; }
.rec-source-panel label { max-width: 480px; }

.rec-backing-preview { margin-bottom: 4px; }

button.rec-record-btn {
  background: linear-gradient(135deg, #e0245e, #ff6b8b);
  font-weight: 600;
}
button.rec-record-btn.is-recording {
  animation: rec-pulse 1.1s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 36, 94, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(224, 36, 94, 0); }
}

.status-item.rec-take-selected {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2);
}
.rec-take-processing { color: var(--muted); font-style: italic; }

/* ===================== 15. Mezclador DJ (public/dj.js) ===================== */
.dj-decks {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.dj-deck {
  flex: 1 1 260px;
  min-width: 240px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.dj-deck h3 { margin: 0 0 8px; font-family: var(--font-display); }
.dj-deck select,
.dj-deck input[type='file'] { width: 100%; margin-bottom: 8px; }
.dj-deck .dj-load-btn { width: 100%; margin-bottom: 8px; }

/* Onda (waveform) en vivo de la pista cargada -- se dibuja una vez al cargar (picos por
   bloque de samples) y se redibuja en cada cuadro con la cabeza de reproduccion (linea vertical)
   en la posicion real que reporta el AudioWorklet (ver public/dj.js seccion 5.1). Tocar o
   arrastrar sobre ella manda un mensaje "seek" al worklet -- es otra forma de moverte para
   adelante o para atras en la pista, ademas del plato, como en Virtual DJ. */
.dj-waveform {
  display: block;
  width: 100%;
  height: 64px;
  margin: 4px 0 10px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: pointer;
  touch-action: none;
}
.dj-waveform.is-seeking { cursor: grabbing; }

/* El plato en si -- circulo grande, oscuro, con un "label" en el centro (como la etiqueta de un
   vinilo real) y una marca (linea) que sale del centro hacia el borde para poder VER que esta
   girando (o hacia donde lo arrastraste) de un vistazo. touch-action:none es necesario para que
   arrastrar con el dedo en el celular no haga scroll de la pagina en vez de rascar. */
.dj-platter {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  margin: 10px auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1a1a26 0%, #0a0a12 70%, #000 100%);
  border: 3px solid var(--border);
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 0 30px rgba(0, 0, 0, 0.6);
}
.dj-platter:active { cursor: grabbing; }
.dj-platter.is-scratching {
  box-shadow: 0 0 0 2px var(--accent), inset 0 0 30px rgba(0, 0, 0, 0.6);
}
.dj-platter-disc {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
}
.dj-platter-label {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.25;
  word-break: break-word;
}
/* No lleva transform propio -- JS rota el ".dj-platter-disc" (su elemento padre) entero, y como el
   punto de pivote por defecto de cualquier transform en CSS es el centro del propio elemento, todo
   lo que hay adentro (esta marca + la etiqueta con el nombre de la pista) gira parejo alrededor del
   centro real del disco, como el brazo/marca de un plato de verdad. */
.dj-platter-marker {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 16%;
  margin-left: -1px;
  background: var(--accent-2);
  border-radius: 2px;
}
.dj-deck-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.dj-deck-controls .dj-play-btn { flex: 0 0 auto; }
.dj-pitch-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  flex: 1 1 auto;
}
.dj-pitch-label input[type='range'] { flex: 1 1 auto; width: auto; margin: 0; }
.dj-pitch-value { font-size: 0.78rem; color: var(--muted); min-width: 3.2em; text-align: right; }

.dj-crossfader-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 14px auto;
  font-family: var(--font-display);
  color: var(--accent-2);
}
.dj-crossfader-row input[type='range'] { flex: 1 1 auto; width: auto; }

.dj-record-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dj-record-timer { font-family: var(--font-display); color: var(--accent); min-width: 3.5em; }

@media (max-width: 640px) {
  .dj-decks { flex-direction: column; }
  .dj-deck { min-width: 0; }
}

/* ===================== Iconos de ayuda -- avisos largos como nube al pasar el mouse ========= */
/* En vez de tener el parrafo de "aviso honesto" siempre visible y pegado (reguero de
   informacion), estos parrafos se reemplazan por un iconito (i) chiquito -- el texto aparece
   flotando recien a los ~5s de dejar el mouse quieto encima, y desaparece apenas se saca el
   mouse (ver public/hinttips.js). Reusa el mismo look que la nube de las secciones del editor
   de canciones (.se-tooltip) para que se sienta consistente en toda la app. */
.hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.7rem;
  line-height: 1;
  cursor: help;
  padding: 0;
  margin: 2px 0;
}
.hint-icon:hover, .hint-icon:focus-visible {
  color: var(--text);
  border-color: var(--accent);
  outline: none;
}
.hint-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20, 20, 29, 0.96);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hint-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-10px);
}
.hint-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(20, 20, 29, 0.96);
}

/* ===================== Editor de canciones (estilo Suno: secciones + reemplazar tramo) ===== */
.song-editor-panel {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
  backdrop-filter: blur(6px);
}
.song-editor-panel h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
}
.se-hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.se-waveform-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  padding: 6px;
}
#songEditorWaveform { min-height: 90px; }

/* Etiqueta corta de cada sección sobre la forma de onda -- SIN el texto largo pegado ahí
   (eso va en la nube flotante de .se-tooltip, ver más abajo) para que no se vea "como un
   reguero de información" sobre la pista. */
.se-section-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #07070c;
  padding: 2px 7px;
  border-radius: 999px;
  margin: 3px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: default;
}

/* Nube flotante con la descripción larga de la sección -- aparece recién a los ~5s de dejar el
   mouse quieto encima, y desaparece apenas lo sacás (ver attachHoverTooltip en songeditor.js). */
.se-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20, 20, 29, 0.96);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.se-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-10px);
}
.se-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(20, 20, 29, 0.96);
}

.se-replace-range {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
}
.se-replace-range strong { color: var(--text); }

.se-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 760px) {
  .se-grid { grid-template-columns: 1fr; }
}

.se-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.se-card h4 {
  margin: 0 0 8px;
  font-size: 0.86rem;
  font-family: var(--font-display);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.se-sections-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.se-section-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.se-color-chip { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }
.se-section-row .se-section-meta { flex: 1 1 auto; min-width: 0; }
.se-section-row .se-section-meta strong { display: block; font-size: 0.84rem; }
.se-section-row .se-section-meta span { display: block; font-size: 0.72rem; color: var(--muted); }
.se-section-row .se-section-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.se-section-row button { font-size: 0.72rem; padding: 4px 7px; }

.se-color-picker { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.se-color-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent;
}
.se-color-swatch.selected { border-color: var(--text); }

.se-caveat {
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}

.se-status { margin-top: 8px; font-size: 0.82rem; color: var(--muted); min-height: 1.2em; }
.se-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 6px;
  display: none;
}
.se-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  width: 0%;
  transition: width 0.4s ease;
}

.se-backup-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}

textarea.se-input, input.se-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}


/* ===== Auth gate (login / registro) -- Fase B ===== */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 3, 8, 0.92);
  padding: 16px;
}
.auth-gate.auth-gate-hidden { display: none; }
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.auth-card h2 { margin: 0 0 4px; text-align: center; color: var(--text); }
.auth-gate-sub { color: var(--muted); text-align: center; margin: 0 0 18px; font-size: 14px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
}
.auth-tab.active { background: var(--accent); color: #07070c; border-color: var(--accent); font-weight: 600; }
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.auth-form input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.auth-submit {
  margin-top: 16px;
  padding: 11px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #07070c;
  font-weight: 700;
  cursor: pointer;
}
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-error { margin-top: 10px; color: #ff6b6b; font-size: 13px; text-align: center; }
.auth-account-badge { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
.auth-account-email {
  color: var(--muted);
  font-size: 13px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-register-fields { display: flex; flex-direction: column; gap: 6px; }
.auth-link-btn {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  display: block;
  width: 100%;
}
.auth-link-btn:hover { opacity: 0.85; }
.auth-pending-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-pending-msg { color: var(--text); font-size: 14px; text-align: center; margin: 0 0 4px; }
.auth-resend-status { color: var(--muted); font-size: 12px; text-align: center; margin: 4px 0 0; }

/* --- Mi cuenta / planes / tokens (seccion 15) y panel de administrador -- ver
   public/account.js. Reusa las variables de color y clases (.status-item, .mode-toggle-btn,
   .modal-card) ya definidas arriba para no inventar un lenguaje visual nuevo. */
.token-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #0f1220;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.token-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f1220;
}
.token-summary-count {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-2);
}
.token-summary-label { color: var(--muted); font-size: 0.85rem; }
.token-summary-plan {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.plan-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-card.current { border-color: var(--accent-2); }
.plan-card-name { font-weight: 700; font-size: 1rem; }
.plan-card-price { color: var(--accent-2); font-size: 0.9rem; font-weight: 600; }
.plan-card-tokens { color: var(--text); font-size: 0.85rem; }
.plan-card-tagline { color: var(--muted); font-size: 0.78rem; margin-bottom: 6px; }
.plan-card button { width: 100%; }

.admin-modal-card { max-width: 640px; }
.admin-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-2);
  color: #07070c;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}
.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.admin-user-actions select {
  background: #0f1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.8rem;
}
.admin-user-actions input[type="number"] {
  background: #0f1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.8rem;
}

/* ===================== Layout para movil (navegador en el telefono) =====================
   Hasta ahora PerreoAI solo se pensaba para escritorio -- el viewport meta tag ya estaba bien
   puesto (public/index.html), pero el CSS en si no tenia una estrategia real de mobile: solo
   3-4 arreglos sueltos para cosas puntuales (grid del beat maker, decks del DJ, editor de
   canciones). Este bloque agrega esa estrategia de forma pareja para TODA la app, sin tocar el
   layout de escritorio (todo vive adentro de @media, asi que en una pantalla ancha no cambia
   nada de lo que ya funcionaba).

   Dos escalones: 780px (tablets/telefonos grandes en horizontal, achica margenes y colapsa
   columnas) y 480px (telefonos comunes en vertical, ademas achica tipografia/botones). La app
   en si ya estaba armada con bastante flexibilidad (flex-wrap, minmax(), min(720px, 100%) en
   los modales, scroll horizontal ya puesto en la barra de pestañas y en la grilla del Beat
   Maker) -- lo que faltaba era sobre todo el padding lateral (32px de cada lado le comia como
   un 18% del ancho a un telefono de 360px) y las grillas de 2 columnas fijas que no colapsaban
   solas. */

@media (max-width: 780px) {
  /* Menos aire a los costados -- en escritorio 32px se ve bien, en un telefono es espacio
     perdido que le resta ancho util al contenido. */
  header, .tab-bar, main, footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  header { padding-top: 16px; }
  main { padding-top: 14px; padding-bottom: 28px; }

  header h1 { font-size: 1.3rem; flex-wrap: wrap; gap: 4px; }
  .brand-badge { margin-left: 6px; }
  header p { font-size: 0.85rem; }

  /* Los botones del header (cuenta, tokens, admin, configuracion, ayuda, estado) ya hacen wrap
     (.header-controls ya tiene flex-wrap desde siempre) -- achicamos su padding/tipografia para
     que entren mas por fila y no se vean gigantes al lado de los demas controles. */
  .header-controls { gap: 6px; }
  .help-btn { padding: 7px 10px; font-size: 0.82rem; }
  .token-badge { font-size: 0.8rem; }

  /* Barra de pestañas -- ya scrollea horizontal (overflow-x: auto), solo la achicamos un poco
     para que se vean mas pestañas de entrada antes de tener que deslizar. */
  .tab-bar { padding-top: 4px; gap: 2px; }
  .tab-btn { padding: 10px 12px 8px; font-size: 0.82rem; }

  .panel { padding: 14px; }
  h2 { font-size: 0.92rem; }

  /* Grillas de 2 columnas fijas de toda la app (pares label/input, columnas de instrumentos a
     incluir/excluir, filas del dataset) -- en un telefono angosto, dos columnas de un formulario
     quedan apretadas y dificiles de tocar bien; una sola columna se lee y se usa mejor. */
  .grid,
  .instrument-columns,
  .dataset-item-grid,
  .segment-row-grid {
    grid-template-columns: 1fr;
  }

  /* Filas de controles en linea (clonar voz: tono/volumen/autotune uno al lado del otro) --
     dejar que se acomoden en varias filas en vez de desbordar de costado. */
  .clone-controls { flex-wrap: wrap; }

  /* Los 3 canvas de visualizacion de audio (seccion 1, Beat Maker, Grabar voz) tienen un ancho
     "de fabrica" de 640px puesto en el HTML (width="640") -- sin esto, en un telefono angosto
     se salen del panel y fuerzan scroll horizontal de toda la pagina. Ninguno de los tres es
     clickeable con coordenadas pixel-a-pixel (son solo dibujo de la forma de onda), asi que
     achicarlos con CSS no rompe nada de su interaccion.  */
  canvas { max-width: 100%; height: auto; }

  /* Modales (estado del sistema, admin) -- ya usan width: min(720px, 100%), o sea que ya se
     angostan solos, pero el padding del fondo (24px) les seguia robando ancho de mas. */
  .modal-overlay { padding: 10px; }
  .modal-card { max-height: 92vh; }

  /* Nunca permitir que algo suelto (una grilla que se nos escapo, un canvas sin la regla de
     arriba en algun lugar que no vimos, etc.) empuje TODA la pagina a scrollear de costado --
     esto es una red de seguridad, no cambia nada de como se ve el contenido en si porque los
     contenedores que necesitan su propio scroll horizontal (barra de pestañas, grilla del Beat
     Maker) ya lo declaran ellos mismos con overflow-x: auto en su propio elemento. */
  body { overflow-x: hidden; }
}

@media (max-width: 480px) {
  header h1 { font-size: 1.15rem; }
  .brand-badge { font-size: 0.62rem; padding: 2px 8px; }
  header p { font-size: 0.8rem; }

  .help-btn { padding: 6px 8px; font-size: 0.78rem; }

  .panel { padding: 12px; }

  /* En un telefono chico, hasta la fila de sliders del autotune/clonado se agradece verla
     apilada en vez de en 2-3 por fila. */
  .clone-controls { gap: 10px; }
  .clone-controls > * { flex: 1 1 100%; }
}

/* ===== Panel de administrador de pagina completa (public/admin.html -- ver #87 del plan).
   Reemplaza el modal viejo (ver .admin-tag arriba, que sigue usandose aca tambien). Reusa las
   variables de color de siempre (--bg/--panel/--text/etc.) para verse igual que el resto de la
   app aunque sea un documento HTML separado. ===== */
.admin-gate-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--muted);
  font-family: var(--font-body);
}
.admin-page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.admin-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-header-sub { text-align: left; margin: 10px 0 18px; }
.admin-header-sub a { color: var(--accent-2); }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-tab {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
}
.admin-tab.active { background: var(--accent); color: #07070c; border-color: var(--accent); }
.admin-panel { padding-top: 4px; }
.admin-section-title { margin: 26px 0 12px; font-size: 1rem; color: var(--text); }
.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.admin-metric-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.admin-metric-value { font-size: 1.7rem; font-weight: 700; margin: 0 0 4px; font-family: var(--font-display); }
.admin-metric-label { margin: 0; color: var(--muted); font-size: 0.85rem; }
.admin-metric-sub { margin: 6px 0 0; color: var(--muted); font-size: 0.78rem; }
.admin-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

.admin-create-user-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--border-color, #333); border-radius: 8px; }
.admin-create-user-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-create-user-row input, .admin-create-user-row select { flex: 1 1 160px; min-width: 120px; }
.admin-create-user-result { display: flex; flex-direction: column; gap: 6px; }
.admin-create-user-link-row { display: flex; gap: 8px; }
.admin-create-user-link-row input { flex: 1; }

.admin-search-input {
  flex: 1 1 260px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.admin-users-table { display: flex; flex-direction: column; gap: 12px; }
.admin-user-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.admin-user-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-user-email { margin: 0; font-weight: 600; }
.admin-user-meta { margin: 4px 0 0; color: var(--muted); font-size: 0.8rem; }
.admin-user-card-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.admin-user-field label { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }
.admin-inline-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-inline-controls select,
.admin-inline-controls input[type="number"] {
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  min-width: 0;
}
.admin-inline-controls input[type="number"] { width: 90px; }
.admin-danger-btn { border-color: #ff6b6b; color: #ff6b6b; }
.admin-danger-btn:hover { background: rgba(255, 107, 107, 0.12); }
.admin-verify-tag { font-size: 0.82rem; }
.admin-activation-link { margin: 6px 0 0; font-size: 0.72rem; color: var(--muted); word-break: break-all; }
.admin-status-reason { margin: 6px 0 0; font-size: 0.75rem; color: var(--muted); }
.status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--border);
}
.status-pill-active { color: var(--accent-3); border-color: var(--accent-3); }
.status-pill-paused { color: #ffd166; border-color: #ffd166; }
.status-pill-banned { color: #ff6b6b; border-color: #ff6b6b; }
.admin-accounting-note { margin-bottom: 18px; line-height: 1.6; }
.admin-acc-switch { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.admin-acc-switch .help-btn.is-on { background: var(--accent, #ff2e88); color: #fff; border-color: transparent; }
.admin-table-scroll { overflow-x: auto; max-width: 100%; }
.admin-payments-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-payments-table th, .admin-payments-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
.admin-payments-table td:nth-child(4) { white-space: normal; min-width: 160px; }
.admin-payments-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-payments-table tr.is-refund td.num { color: #ff7a7a; }
.admin-plan-breakdown { display: flex; flex-direction: column; gap: 10px; }
.admin-plan-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.admin-plan-row-title { margin: 0 0 4px; font-weight: 600; }

@media (max-width: 640px) {
  .admin-page { padding: 16px 12px 40px; }
  .admin-header-top { flex-direction: column; align-items: flex-start; }
}

/* ===== Monitor de performance en vivo (public/admin-performance.html -- ver #89 del plan). ===== */
.perf-chart-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
}
.perf-chart-wrap canvas { width: 100%; height: auto; display: block; }
.perf-chart-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 0.78rem; color: var(--muted); }
.perf-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.perf-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.perf-swatch-queue { background: var(--accent); }
.perf-swatch-video { background: var(--accent-2); }
.perf-swatch-req { background: var(--accent-3); }

/* ===== Pagina animada de planes post-registro (public/planes.html -- ver #90 del plan). ===== */
.plans-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background:
    radial-gradient(900px 500px at 15% 10%, var(--bg-glow-1), transparent 55%),
    radial-gradient(900px 500px at 85% 90%, var(--bg-glow-2), transparent 55%),
    var(--bg);
  background-size: 200% 200%;
  animation: plans-bg-drift 18s ease-in-out infinite;
}
@keyframes plans-bg-drift {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.plans-page-inner { max-width: 980px; width: 100%; }
.plans-hero { text-align: center; margin-bottom: 28px; }
.plans-hero-check {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent-3);
  color: var(--accent-3);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 14px;
  animation: plans-pop-in 0.5s ease both;
}
.plans-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: 0 0 10px;
  animation: plans-fade-up 0.6s ease both 0.1s;
}
.plans-hero-sub {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
  font-size: 0.92rem;
  animation: plans-fade-up 0.6s ease both 0.2s;
}
.plans-grid-animated { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.plan-card-animated {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  animation: plans-fade-up 0.55s ease forwards;
}
.plan-card-animated:hover { transform: translateY(-3px); transition: transform 0.2s ease; }
@keyframes plans-fade-up {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes plans-pop-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
.plans-page-footer { text-align: center; margin-top: 22px; }
.plans-page-footer .auth-link-btn { display: inline-block; width: auto; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .plans-page { animation: none; }
  .plans-hero-check,
  .plans-hero-title,
  .plans-hero-sub,
  .plan-card-animated { animation: none; opacity: 1; transform: none; }
}

/* --- 16. Comunidad (red social: feed, ranking, perfiles, comentarios) -- ver public/social.js.
   Reusa .mode-toggle-btn, .plan-card-ish spacing, .status-list y las variables de color de
   siempre para no inventar un lenguaje visual nuevo. */
.publish-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.publish-panel .danger { background: #3a1f24; color: #ff8a8a; border-color: #5a2b31; }

.social-inline-toggle { margin: 0; }
.social-inline-toggle .mode-toggle-btn { padding: 6px 10px; font-size: 0.76rem; }

.social-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.social-sort-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}
.social-sort-label select { width: auto; }

.social-view { margin-top: 6px; }

.social-post-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.social-post-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--panel);
}
.social-post-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.social-post-avatar {
  font-size: 1.3rem;
  line-height: 1;
}
.social-post-username {
  background: none;
  border: none;
  color: var(--accent-2);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
  width: auto;
}
.social-post-username:hover { text-decoration: underline; }
.social-post-date { color: var(--muted); font-size: 0.72rem; margin-left: auto; }
.social-post-title { font-weight: 700; font-size: 0.95rem; margin: 2px 0; }
.social-post-meta { color: var(--muted); font-size: 0.78rem; margin: 0 0 6px; }
.social-post-caption { font-size: 0.85rem; margin: 0 0 8px; white-space: pre-wrap; }
.social-post-audio { width: 100%; margin: 6px 0; }
.social-post-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.social-action-btn {
  background: #0f1220;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  width: auto;
}
.social-action-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0c10;
  border-color: transparent;
}
.social-post-score { margin-left: auto; color: var(--muted); font-size: 0.72rem; }

.social-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.social-ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
}
.social-ranking-rank {
  font-weight: 800;
  color: var(--accent-2);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.social-ranking-row .social-post-username { font-size: 0.88rem; }
.social-ranking-main { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.social-ranking-title { font-size: 0.82rem; color: var(--text); }
.social-ranking-stats { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }

.social-profile-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--panel);
  margin-bottom: 14px;
}
.social-profile-top { display: flex; align-items: center; gap: 12px; }
.social-profile-avatar-big { font-size: 2.2rem; line-height: 1; }
.social-profile-name { font-weight: 800; font-size: 1.05rem; }
.social-profile-bio { color: var(--text); font-size: 0.85rem; margin: 0; white-space: pre-wrap; }
.social-profile-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
}
.social-profile-stats strong { color: var(--accent-2); }
.social-profile-follow-btn { width: auto; margin-left: auto; }

.social-comment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: 10px;
}
.social-comment-item { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.social-comment-item-header { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.social-comment-item-header .social-post-username { font-size: 0.8rem; }
.social-comment-date { color: var(--muted); font-size: 0.68rem; }
.social-comment-text { font-size: 0.85rem; margin: 0; white-space: pre-wrap; }
.social-comment-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.7rem;
  width: auto;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
}
.social-comment-form {
  display: flex;
  gap: 8px;
}
.social-comment-form input { flex: 1 1 auto; }
.social-comment-form button { width: auto; }

/* --- Jerarquia visual de botones (mejora de layout, MISMO colorido/degrade de siempre) --------
   Antes, todos los botones -- desde "Generar cancion" hasta un utilitario chico como "Deshacer
   acento boricua" -- usaban exactamente el mismo degrade lleno, sin que quede claro cual es LA
   accion principal de cada pantalla (se sentia como una pared de botones rosa/cian del mismo
   peso). Dos variantes nuevas, con las MISMAS variables de color (--accent/--accent-2/--border/
   --text) que ya existian, nada de colores nuevos:
   - .btn-secondary: para acciones de apoyo (renombrar, deshacer, quitar, extraer, agregar
     tramo/segmento) -- contorno suave en vez de degrade lleno, para que no compitan con la
     accion principal.
   - .cta-btn: para LA accion principal de una pantalla (ej. "Generar cancion") -- mas grande,
     con un resplandor sutil a juego con el que ya tiene .panel (mismo rgba(255,45,149,...)). */
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--accent-2);
  color: var(--accent-2);
  filter: none;
}

.cta-btn {
  display: block;
  width: 100%;
  margin: 18px 0 4px;
  padding: 14px 20px;
  font-size: 1rem;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 30px -12px rgba(255, 45, 149, 0.45);
}
.cta-btn:hover:not(:disabled) { box-shadow: 0 16px 36px -12px rgba(255, 45, 149, 0.6); }

/* Filas de botones relacionados -- mismo espaciado prolijo en toda la app en vez de que queden
   pegados o salten de linea de forma rara segun el ancho de pantalla. Uso opcional: envolver un
   grupo de botones/nube-de-ayuda relacionados en <div class="btn-row">...</div>. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-row .hint-icon { margin: 0; }

/* =============================================================================================
   Capa visual moderna (2026-09) -- se agrega AL FINAL a proposito: no borra ni reescribe nada de
   arriba, solo pule encima (bordes mas redondeados, paneles tipo "vidrio", pestañas en forma de
   pastilla, foco visible para teclado, tarjetas de la Comunidad estilo app de musica). Usa SOLO
   las variables de color de cada skin (--accent/--accent-2/--panel/--border/...), asi que
   funciona igual en "Clasico" y "Aurora" (y en cualquier skin nuevo que redefina esas variables).
   Si algun dia queres volver al look anterior, alcanza con borrar este bloque entero.
   ============================================================================================= */
:root {
  color-scheme: dark; /* controles nativos (select, audio, scrollbars) en modo oscuro */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --star: #ffc94d;
  --ring: color-mix(in srgb, var(--accent-2) 55%, transparent);
  --surface-glass: color-mix(in srgb, var(--panel) 82%, transparent);
  --surface-raised: color-mix(in srgb, var(--panel) 88%, #ffffff 4%);
  --hairline: color-mix(in srgb, var(--border) 75%, #ffffff 8%);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 50px -28px rgba(0, 0, 0, 0.9);
  --glow-accent: 0 10px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: #fff; }

/* Scrollbars finitas a juego con el skin */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent-2) 35%, var(--border)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-2) 30%, var(--border));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--accent-2) 55%, var(--border)); }

/* ---- Encabezado ---- */
header h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
.brand-badge { background: var(--surface-glass); backdrop-filter: blur(6px); }
.help-btn { border-radius: var(--radius-md); background: var(--surface-glass); border-color: var(--hairline); }

/* ---- Barra de pestañas: pastillas ---- */
.tab-bar {
  gap: 4px;
  padding: 8px 32px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
.tab-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.88rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tab-btn:hover { background: rgba(255, 255, 255, 0.05); }
.tab-btn.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 28%, transparent),
    color-mix(in srgb, var(--accent-2) 22%, transparent));
  box-shadow: 0 6px 22px -10px color-mix(in srgb, var(--accent-2) 70%, transparent);
}

/* ---- Paneles tipo vidrio ---- */
.panel {
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 120px),
    var(--surface-glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft), 0 30px 80px -50px color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 24px;
}
main .panel + .panel { margin-top: 18px; }

h2 {
  font-size: 1.12rem;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel > h2::before {
  content: '';
  width: 4px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 60%, transparent);
  flex-shrink: 0;
}

/* ---- Campos de formulario ---- */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="datetime-local"], textarea, select {
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input[type="text"]:hover, input[type="number"]:hover, textarea:hover, select:hover {
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--border));
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--ring);
}
label { font-weight: 500; }

/* ---- Botones ---- */
button {
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 20px -14px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn-secondary, .mode-toggle-btn, .social-action-btn, .track-use-btn, .help-btn, .hint-icon, .modal-close, .tab-btn {
  box-shadow: none;
}
.tab-btn:hover:not(:disabled) { transform: none; }
.btn-secondary { background: rgba(255, 255, 255, 0.05); border-color: var(--hairline); }
.cta-btn { border-radius: 14px; box-shadow: var(--glow-accent); }

/* ---- Selector segmentado (Modo facil/avanzado, Feed/Ranking/Perfil, etc.) ---- */
.mode-toggle {
  gap: 4px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.mode-toggle-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.mode-toggle-btn:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.04); transform: none; }
.mode-toggle-btn.active { box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); }

/* ---- Secciones desplegables ---- */
.tune-panel {
  border-radius: 14px;
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--panel-2) 85%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tune-panel:hover { border-color: color-mix(in srgb, var(--accent-2) 30%, var(--border)); }
.tune-panel[open] { background: var(--panel-2); border-color: color-mix(in srgb, var(--accent-2) 25%, var(--border)); }
.tune-panel summary { font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.tune-panel summary::-webkit-details-marker { display: none; }
.tune-panel summary::before {
  content: '▸';
  display: inline-block;
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.tune-panel[open] > summary::before { transform: rotate(90deg); color: var(--accent-2); }

/* ---- Modales ---- */
.modal-overlay { background: rgba(4, 4, 10, 0.62); backdrop-filter: blur(8px); }
.modal-card {
  border-radius: 20px;
  border-color: var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 140px), var(--panel);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.95);
  animation: modern-pop-in 0.18s ease-out;
}
@keyframes modern-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ---- Pistas / tarjetas de lista ---- */
.track, .status-item {
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.track:hover, .status-item:hover { border-color: color-mix(in srgb, var(--accent-2) 30%, var(--border)); }
.empty-state { padding: 18px; text-align: center; border: 1px dashed var(--hairline); border-radius: 14px; }

/* =========================== Comunidad (feed, ranking, calificaciones) =========================== */

/* Tarjeta "Publica una cancion para que la califiquen" -- borde con degrade del skin */
.social-publish-card {
  margin: 14px 0 18px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2) 60%, var(--accent-3)) border-box;
  box-shadow: 0 24px 60px -36px color-mix(in srgb, var(--accent) 70%, transparent);
}
.social-publish-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.social-publish-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.4rem;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 35%, transparent),
    color-mix(in srgb, var(--accent-2) 30%, transparent));
}
.social-publish-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.social-publish-sub { margin: 2px 0 0; color: var(--muted); font-size: 0.84rem; }
.social-publish-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.social-publish-field { margin: 0; }
.social-publish-btn { white-space: nowrap; padding: 11px 20px; }
.social-publish-card .status { margin: 10px 0 0; }
.social-publish-card .status:empty { display: none; }

/* Lista del feed en grilla (1 a 3 columnas segun el ancho) */
.social-post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.social-post-list > .empty-state { grid-column: 1 / -1; }

.social-post-card {
  --cover-hue: 320;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(420px 160px at 0% 0%, hsl(var(--cover-hue) 90% 60% / 0.10), transparent 70%),
    var(--surface-raised);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.social-post-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--cover-hue) 80% 60% / 0.45);
  box-shadow: var(--shadow-soft), 0 20px 50px -30px hsl(var(--cover-hue) 90% 55% / 0.7);
}
.social-post-top { display: flex; align-items: center; gap: 12px; }
.social-post-cover {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.8rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(135deg, hsl(var(--cover-hue) 85% 58%), hsl(calc(var(--cover-hue) + 70) 85% 45%));
  box-shadow: 0 10px 24px -12px hsl(var(--cover-hue) 90% 50% / 0.8);
}
.social-post-cover span { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.social-post-info { min-width: 0; flex: 1 1 auto; }
.social-post-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.social-post-byline { display: flex; align-items: center; gap: 8px; }
.social-post-byline .social-post-date { margin-left: 0; }
.social-post-byline .social-post-date::before { content: '·'; margin-right: 8px; color: var(--muted); }
.social-post-username { box-shadow: none; font-size: 0.86rem; }
.social-post-username:hover:not(:disabled) { transform: none; }
.social-post-meta { margin: 3px 0 0; font-size: 0.76rem; }
.social-post-caption {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  border-left: 3px solid hsl(var(--cover-hue) 85% 60% / 0.7);
}
.social-post-audio { height: 38px; margin: 0; border-radius: 999px; accent-color: var(--accent-2); }

.social-post-actions {
  margin-top: 0;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.social-post-buttons { display: flex; align-items: center; gap: 8px; }
.social-post-score { margin-left: 2px; }
.social-action-btn {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--hairline);
  padding: 6px 12px;
}
.social-action-btn:hover:not(:disabled) { color: var(--text); border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border)); }

/* Estrellas (orden invertido en el HTML + row-reverse = hover pinta hacia la izquierda) */
.social-rating { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.social-stars { display: inline-flex; flex-direction: row-reverse; }
.social-star-btn {
  width: auto;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 1px;
  font-size: 1.3rem;
  line-height: 1;
  color: color-mix(in srgb, var(--muted) 45%, transparent);
  transition: color 0.12s ease, transform 0.12s ease, text-shadow 0.12s ease;
}
.social-star-btn:hover:not(:disabled) { filter: none; }
.social-star-btn.filled { color: var(--star); text-shadow: 0 0 12px color-mix(in srgb, var(--star) 55%, transparent); }
.social-stars:not(.readonly):hover .social-star-btn { color: color-mix(in srgb, var(--muted) 45%, transparent); text-shadow: none; }
.social-stars:not(.readonly) .social-star-btn:hover,
.social-stars:not(.readonly) .social-star-btn:hover ~ .social-star-btn {
  color: var(--star);
  text-shadow: 0 0 12px color-mix(in srgb, var(--star) 55%, transparent);
  transform: scale(1.18);
}
.social-stars.readonly .social-star-btn:disabled { opacity: 1; cursor: default; font-size: 1.1rem; }
.social-rating-summary { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.social-rating-summary.is-error { color: #ff8a8a; white-space: normal; }
.social-rating.is-busy { opacity: 0.6; pointer-events: none; }
.social-rating.just-rated .social-star-btn.filled { animation: star-pop 0.45s ease-out; }
@keyframes star-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Ranking: medallas para el podio */
.social-ranking-list { gap: 10px; }
.social-ranking-rank {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; width: auto;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-display);
  font-size: 0.85rem;
}
.social-ranking-rank.top-1 { background: linear-gradient(135deg, #ffe08a, #f5b700); color: #2a1d00; box-shadow: 0 8px 20px -10px #f5b700; }
.social-ranking-rank.top-2 { background: linear-gradient(135deg, #f1f3f8, #aab3c5); color: #1b1f29; }
.social-ranking-rank.top-3 { background: linear-gradient(135deg, #ffc49b, #c7743d); color: #2a1305; }
.social-ranking-row {
  border-radius: 14px;
  border-color: var(--hairline);
  background: var(--surface-raised);
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}
.social-ranking-row:hover { border-color: color-mix(in srgb, var(--accent-2) 30%, var(--border)); }
.social-ranking-star { color: var(--star); font-weight: 700; }

/* Perfil */
.social-profile-card {
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  background:
    radial-gradient(500px 180px at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--surface-raised);
  padding: 20px;
}
.social-profile-avatar-big {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 80%, transparent);
  font-size: 1.9rem;
}
.social-profile-stats { gap: 8px; }
.social-profile-stats span {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
}

/* ---- Celulares / pantallas angostas ---- */
@media (max-width: 760px) {
  .social-publish-fields { grid-template-columns: minmax(0, 1fr); }
  .social-post-list { grid-template-columns: minmax(0, 1fr); }
  .tab-bar { padding: 8px 12px; }
  .panel { padding: 18px; }
}

/* Quien pidio menos movimiento en el sistema operativo no ve animaciones ni "saltitos" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  button:hover:not(:disabled), .social-post-card:hover { transform: none; }
}

/* ---- Textos segun quien mira (ver public/audience.js) ----
   .admin-text = explicacion tecnica (GPU, CUDA, rutas, nombres de modelos) -- solo para admin.
   .user-text  = la misma idea, en palabras simples -- para todos los demas. */
html:not(.is-admin) .admin-text { display: none !important; }
html.is-admin .user-text { display: none !important; }

/* =========================== Estudio: "Tus canciones" en tarjetas ===========================
   Mismo lenguaje visual que las canciones de la Comunidad (portada de color por cancion, titulo,
   datos, acciones en pastilla). Ver renderHistoryCards() en app.js. */
.history-panel {
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  padding: 16px 18px;
}
.history-select-legacy { display: none; }
.song-grid-title { margin: 8px 0 10px; }
.song-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.song-card-grid > .empty-state { grid-column: 1 / -1; }
.song-card {
  --cover-hue: 320;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(420px 160px at 0% 0%, hsl(var(--cover-hue) 90% 60% / 0.10), transparent 70%),
    var(--surface-raised);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.song-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--cover-hue) 80% 60% / 0.45);
  box-shadow: var(--shadow-soft), 0 20px 50px -30px hsl(var(--cover-hue) 90% 55% / 0.7);
}
.song-card:focus-visible { box-shadow: 0 0 0 3px var(--ring), var(--shadow-soft); }
.song-card.selected {
  border-color: hsl(var(--cover-hue) 85% 62% / 0.9);
  box-shadow: 0 0 0 1px hsl(var(--cover-hue) 85% 62% / 0.6), var(--shadow-soft),
    0 20px 50px -30px hsl(var(--cover-hue) 90% 55% / 0.8);
}
.song-card-top { position: relative; display: flex; align-items: center; gap: 12px; }
.song-card-cover { width: 56px; height: 56px; font-size: 1.55rem; }
.song-card-info { min-width: 0; flex: 1 1 auto; }
.song-card-title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-card-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.song-card-tag {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  color: var(--text);
}
.song-card-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0c10;
}
.song-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.history-panel .song-card-open { flex: 1 1 auto; padding: 8px 12px; font-size: 0.82rem; }
.song-card.is-open .song-card-open {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.history-panel .song-card-favbtn { font-size: 1rem; padding: 5px 12px; }
.song-card-favbtn.active {
  background: color-mix(in srgb, var(--star) 20%, transparent);
  border-color: color-mix(in srgb, var(--star) 55%, transparent);
  color: var(--star);
}
.song-card-more { display: block; margin: 0 auto 14px; }

/* Las versiones de la cancion abierta (#tracks) con el mismo acabado de tarjeta */
.track {
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.track.selected {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background:
    radial-gradient(420px 160px at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--surface-raised);
}

@media (max-width: 760px) {
  .song-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ======================= Seccion 9: "Subir grabaciones" (ver app.js) ======================= */
.voice-upload-box {
  border: 1.5px dashed color-mix(in srgb, var(--accent-2) 40%, var(--border));
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 4px 0 14px;
  background: color-mix(in srgb, var(--accent-2) 4%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.voice-upload-box.is-dragging {
  border-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  box-shadow: 0 0 0 4px var(--ring);
}
.voice-upload-drop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.voice-upload-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.4rem;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 35%, transparent),
    color-mix(in srgb, var(--accent-2) 30%, transparent));
}
.voice-upload-text { flex: 1 1 220px; min-width: 0; }
.voice-upload-title { margin: 0; font-family: var(--font-display); font-weight: 700; }
.voice-upload-sub { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }
.voice-upload-box .status:empty { display: none; }
.voice-upload-box .tune-hint { margin: 10px 0 6px; }
.voice-upload-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.voice-upload-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  font-size: 0.84rem;
}
.voice-upload-item-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-upload-item-size { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.voice-upload-remove {
  width: auto;
  padding: 2px 8px;
  font-size: 0.78rem;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--muted);
  box-shadow: none;
}
.voice-upload-remove:hover:not(:disabled) { color: #ff8a8a; border-color: #5a2b31; transform: none; }
.voice-upload-box .progress-bar { margin-top: 12px; }

/* ======================= Beat Maker: "Beatbox -> beat" (ver beatmaker.js, seccion 9) ======================= */
.beatbox-panel {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background:
    radial-gradient(520px 180px at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--panel-2) 85%, transparent);
}
.beatbox-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.beatbox-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.82rem;
  color: var(--muted);
}
.beatbox-chip strong { color: var(--text); font-family: var(--font-display); }
.beatbox-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 14px;
}
.beatbox-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
#bbRecordBtn { padding: 12px 22px; font-size: 0.95rem; box-shadow: var(--glow-accent); }
.beatbox-countdown {
  margin: 14px auto 4px;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%);
  border: 2px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
}
.beatbox-countdown.is-live {
  font-size: 1.7rem;
  color: #ff5c7a;
  border-color: #ff5c7a;
  background: radial-gradient(circle, rgba(255, 60, 100, 0.25), transparent 70%);
  animation: beatbox-pulse 0.9s ease-in-out infinite;
}
@keyframes beatbox-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 100, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(255, 60, 100, 0); }
}
.beatbox-countdown[hidden] { display: none; }

/* ============ Crear cancion: "Tararea o haz beatbox, y la IA lo convierte en cancion" ============ */
.hum-card {
  margin: 22px 0 6px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, var(--accent-3), var(--accent) 50%, var(--accent-2)) border-box;
  box-shadow: 0 24px 60px -38px color-mix(in srgb, var(--accent) 70%, transparent);
}
.hum-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.hum-head-text { flex: 1 1 auto; min-width: 0; }
.hum-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.5rem;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 35%, transparent),
    color-mix(in srgb, var(--accent-3) 30%, transparent));
}
.hum-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.hum-sub { margin: 3px 0 0; color: var(--muted); font-size: 0.85rem; }
.hum-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#humRecordBtn { padding: 12px 22px; font-size: 0.95rem; box-shadow: var(--glow-accent); }
.hum-metronome { margin: 0; }
.hum-timer {
  font-family: var(--font-display);
  font-weight: 700;
  color: #ff5c7a;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ff5c7a;
  background: rgba(255, 60, 100, 0.12);
  animation: beatbox-pulse 0.9s ease-in-out infinite;
}
.hum-timer[hidden] { display: none; }
#humPreview { width: 100%; margin-top: 12px; }
.hum-options {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0 16px;
  margin-top: 12px;
  align-items: end;
}
.hum-options[hidden] { display: none; }
.hum-options .cta-btn { grid-column: 1 / -1; margin-top: 6px; }
.hum-card .status:empty { display: none; }
@media (max-width: 760px) { .hum-options { grid-template-columns: 1fr; } }

/* ===== Episodios (pestana Video, solo admin): muñequitos / anime / comedia con dialogos =====
   Tarjetas de personajes y escenas generadas por public/episodes.js. */
.episode-panel[open] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 7%, var(--panel-2)),
    var(--panel-2) 45%,
    color-mix(in srgb, var(--accent-2) 6%, var(--panel-2)));
}
.episode-panel > summary { font-size: 1.02rem; }
.episode-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 0 14px;
  align-items: end;
}
.episode-list { display: grid; gap: 10px; margin: 8px 0 10px; }
.episode-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px 12px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  transition: border-color 0.2s ease;
}
.episode-card:hover, .episode-card:focus-within {
  border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border));
}
.episode-card label { margin-top: 6px; font-size: 0.85rem; }
.episode-card-head { display: flex; align-items: center; gap: 8px; }
.episode-card-head input { flex: 1; margin-top: 0; font-weight: 600; }
.episode-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: #0b0b12;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.episode-card-title { font-family: var(--font-display); flex: 1; }
.episode-duration {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.episode-move, .episode-remove {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.episode-move:hover:not(:disabled) { color: var(--accent-2); border-color: var(--accent-2); }
.episode-remove:hover { color: #ff5c7a; border-color: #ff5c7a; }
.episode-move:disabled { opacity: 0.35; cursor: default; }
.episode-card .checkbox-label { margin-top: 8px; color: var(--muted); }
.episode-lines {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
}
.episode-lines .tune-hint { margin: 0; }
.episode-line {
  display: grid;
  grid-template-columns: minmax(90px, 0.9fr) minmax(0, 3fr) minmax(80px, 1fr) 30px;
  gap: 6px;
  align-items: center;
}
.episode-line select, .episode-line input { margin-top: 0; }
.episode-add-line { margin-top: 8px; font-size: 0.85rem; padding: 6px 12px; }
#epSummary { margin-top: 12px; }
#epSummary:empty { display: none; }
@media (max-width: 760px) {
  .episode-head { grid-template-columns: 1fr; }
  .episode-line { grid-template-columns: minmax(0, 1fr) 30px; }
  .episode-line .ep-line-char { grid-column: 1; }
  .episode-line .ep-line-text { grid-column: 1 / -1; grid-row: 2; }
  .episode-line .ep-line-emotion { grid-column: 1 / -1; grid-row: 3; }
  .episode-line .episode-remove { grid-column: 2; grid-row: 1; }
}

/* ===== Mis personajes (fotos + voz para H3 Ref2VA) -- public/characters.js ===== */
.vc-panel[open] {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 7%, var(--panel-2)), var(--panel-2) 50%);
}
.vc-subtitle {
  margin: 10px 0 6px;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vc-count {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.vc-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-thumb {
  position: relative;
  margin: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.vc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.vc-thumb-remove:hover { background: #ff3b6b; }
.vc-add-photo {
  width: 72px;
  height: 72px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 2px dashed color-mix(in srgb, var(--accent-2) 55%, var(--border));
  color: var(--accent-2);
  font-size: 1.9rem !important;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.vc-add-photo:hover { background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.vc-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vc-voice audio { height: 34px; max-width: 100%; }
.vc-voice button, .vc-voice .btn-secondary { margin: 0; }
.vc-upload-voice { display: inline-flex; align-items: center; cursor: pointer; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--hairline, var(--border)); }
.vc-new {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 0 12px;
  align-items: end;
  margin-top: 6px;
}
.vc-new .btn-secondary { margin-bottom: 2px; white-space: nowrap; }
.vc-new.vc-ai {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.vc-ai > .vc-subtitle, .vc-ai > .tune-hint { grid-column: 1 / -1; }
.vc-ai #vcAiBtn { justify-self: start; }
.ep-saved-thumbs { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.ep-saved-thumbs img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.ep-saved-thumbs span { font-size: 0.75rem; color: var(--muted); padding: 0 4px; }
@media (max-width: 760px) {
  .vc-new, .vc-new.vc-ai { grid-template-columns: 1fr; }
  .vc-thumb, .vc-add-photo { width: 64px; height: 64px; }
}

/* ===== ✨ Acabado final (editor de video) -- public/video.js renderFinishSection ===== */
.finish-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  align-items: end;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}
.finish-grid label { margin-top: 8px; font-size: 0.85rem; }
.finish-grid .fin-full { grid-column: 1 / -1; }
.finish-grid .fin-music-val, .finish-grid .fin-voice-val { color: var(--accent-2); font-weight: 600; }
.finish-btn { margin-top: 10px; width: 100%; }
@media (max-width: 760px) { .finish-grid { grid-template-columns: 1fr; } }

/* ===== ⏸ Videos en pausa (public/video.js loadPausedList) ===== */
.video-pause-row { margin-top: 8px; }
.video-pause-row .btn-secondary { flex: 1; }
.paused-item .paused-progress { margin: 6px 0; }
.paused-item .paused-preview { max-width: 280px; width: 100%; border-radius: 10px; margin: 6px 0; display: block; }
.paused-item .btn-row { margin-top: 6px; }
.video-pause-row[hidden], #epPauseBtn[hidden], #videoPausedSection[hidden] { display: none !important; }

/* ===== 📚 Ejemplos y 📘 Guia para empezar (public/guide.js) ===== */
.example-loader { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.example-loader select { width: auto; margin: 0; }
.example-loader .btn-secondary { margin: 0; }
.guide-panel[open] { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-3) 6%, var(--panel-2)), var(--panel-2) 55%); }
.guide-progress { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.guide-progress .progress-bar { flex: 1; margin: 0; }
.guide-progress .clone-hint { margin: 0; white-space: nowrap; }
.guide-steps { display: grid; gap: 10px; margin-bottom: 12px; }
.guide-step {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.guide-step.is-done { opacity: 0.75; border-color: color-mix(in srgb, var(--accent-3) 45%, var(--border)); }
.guide-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guide-step-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.8rem;
  color: #0b0b12;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  flex: none;
}
.guide-step.is-done .guide-step-num { background: var(--accent-3); }
.guide-step p { margin: 6px 0 8px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.guide-admin-tag { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.guide-step-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.guide-step-actions .btn-secondary { margin: 0; font-size: 0.85rem; padding: 6px 12px; }
.guide-done { margin: 0 0 0 auto; font-size: 0.85rem; }

/* ===== 📄 Subir libreto (public/scriptimport.js) ===== */
.script-import-box {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.script-import-box .si-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.script-import-box .si-file-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--hairline, var(--border)); font-weight: 600; font-size: 0.95rem; }
.script-import-box .si-paste-box textarea { width: 100%; box-sizing: border-box; font-family: inherit; }
.script-import-box .si-paste-box .si-go { margin-top: 6px; }
.script-import-box pre {
  white-space: pre-wrap;
  font-size: 0.8rem;
  max-height: 260px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.08);
}
.script-import-box .si-spread-label { display: flex; gap: 6px; align-items: flex-start; font-size: 0.85rem; margin: 4px 0; }

/* =============================================================================================
   🎬 Estudio de video (pestana Video) -- public/videostudio.js
   Vista Simple (tarjetas + pasos, una sub-pestana a la vez) y vista Avanzado (todo en una pagina
   con todas las opciones). Todo con las variables del skin, asi que anda en Clasico y Aurora.
   ============================================================================================= */
.vstudio { padding: 22px 24px 28px; }
.vstudio [hidden] { display: none !important; }
.vstudio .vs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.vstudio .vs-title { display: flex; align-items: center; gap: 8px; }
.vstudio .vs-title h2 { margin: 0; font-size: 1.25rem; color: var(--text); }
.vstudio .vs-title .hint-icon { margin: 0; }
.vstudio .vs-view-toggle { margin: 0; flex: 0 0 auto; }
.vstudio .vs-view-toggle .mode-toggle-btn { flex: 0 0 auto; padding: 7px 14px; }

/* ---- sub-pestanas ---- */
.vs-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 16px 0 20px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.vs-nav::-webkit-scrollbar { display: none; }
.vs-nav-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 14px 11px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vs-nav-btn:hover:not(:disabled) { color: var(--text); transform: none; filter: none; }
.vs-nav-btn.active { color: var(--text); border-bottom-color: var(--accent-2); }
.vs-count:empty { display: none; }
.vs-count {
  font-size: 0.72rem;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 16%, transparent);
  color: var(--accent-2);
}
.vs-running {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: none;
}
.vs-running[hidden] { display: none; }
.vs-running-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: vs-pulse 1.4s ease-in-out infinite;
}
@keyframes vs-pulse { 50% { opacity: 0.35; } }

/* ---- paginas / tipos / vistas ---- */
.vstudio[data-view="simple"][data-page="create"] .vs-page:not([data-page="create"]),
.vstudio[data-view="simple"][data-page="characters"] .vs-page:not([data-page="characters"]),
.vstudio[data-view="simple"][data-page="videos"] .vs-page:not([data-page="videos"]) { display: none; }
.vstudio[data-kind="music"] .vs-form:not([data-kinds~="music"]),
.vstudio[data-kind="free"] .vs-form:not([data-kinds~="free"]),
.vstudio[data-kind="episode"] .vs-form:not([data-kinds~="episode"]),
.vstudio[data-kind="upload"] .vs-form:not([data-kinds~="upload"]) { display: none; }
.vstudio[data-kind="music"] .vs-only-free,
.vstudio[data-kind="free"] .vs-only-music { display: none; }
.vstudio[data-view="simple"] .vs-adv-only,
.vstudio[data-view="simple"] .vs-page-title,
.vstudio[data-view="advanced"] .vs-simple-only { display: none; }
.vstudio[data-view="advanced"] .vs-page + .vs-page {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.vs-page-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
  scroll-margin-top: 90px;
}
.vs-page { scroll-margin-top: 90px; }
.vs-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 10px;
}
.vs-intro { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 14px; }
.vs-intro .hint-icon { margin: 0; flex: none; }

/* ---- "¿Que quieres crear?" ---- */
.vs-kinds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.vs-kind-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 16px 16px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--panel-2) 85%, transparent);
  color: var(--text);
  box-shadow: none;
  font-weight: 500;
}
.vs-kind-card:hover:not(:disabled) {
  filter: none;
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-2) 6%, var(--panel-2));
}
.vs-kind-card.active {
  border-color: transparent;
  background:
    linear-gradient(var(--panel-2), var(--panel-2)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 14px 34px -20px color-mix(in srgb, var(--accent-2) 80%, transparent);
}
.vs-kind-card.active .vs-kind-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 30%, transparent));
}
.vs-kind-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.3rem;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.05);
}
.vs-kind-card strong { font-family: var(--font-display); font-size: 0.98rem; }
.vs-kind-card small { color: var(--muted); font-size: 0.78rem; font-weight: 400; }

/* ---- pasos ---- */
.vs-step {
  position: relative;
  padding: 18px 18px 8px;
  margin-bottom: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}
.vs-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vs-step-head h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--text); }
.vs-step-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: #0b0b12;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.vs-step-note {
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 8px;
}
.vs-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  margin: 4px 0 8px;
}
.vs-field-label .hint-icon { margin: 0; }
.vs-inline-number { max-width: 240px; }
.vs-hidden-select { display: none; }
.vs-step .clone-hint { margin-top: 0; }

/* ---- botones de opcion (modo, calidad) ---- */
.vs-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vs-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: none;
}
.vs-chip small { font-weight: 400; font-size: 0.75rem; color: var(--muted); }
.vs-chip:hover:not(:disabled) { filter: none; border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }
.vs-chip.active {
  border-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, var(--panel-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent) inset;
}

/* ---- etiquetas de estilo ---- */
.vs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.vs-tag {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.vs-tag:hover:not(:disabled) { color: var(--text); filter: none; }
.vs-tag.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.vs-model-line { font-size: 0.82rem; color: var(--muted); margin: 0 0 10px; }
.vs-model-line b { color: var(--text); font-weight: 600; }
.vs-link {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 2px;
  color: var(--accent-2);
  font-weight: 600;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vs-link:hover:not(:disabled) { transform: none; filter: brightness(1.2); }
.vs-upload-go { font-size: 0.85rem; }

/* ---- "Quien sale" ---- */
.vs-cast { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.vs-avatar {
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 9px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  box-shadow: none;
  text-align: center;
}
.vs-avatar small { font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.vs-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
}
.vs-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-avatar-empty { font-size: 1.4rem; }
.vs-avatar-name { max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }
.vs-avatar:hover:not(:disabled) { filter: none; border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }
.vs-avatar.active { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--panel-2)); }
.vs-avatar.active .vs-avatar-img { border-color: var(--accent-2); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.vs-avatar-new { border-style: dashed; color: var(--muted); }
.vs-duet {
  margin-top: 4px;
  padding: 12px 14px 2px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--hairline);
}

/* ---- opciones avanzadas ---- */
.vs-advanced { background: color-mix(in srgb, var(--accent) 4%, var(--panel-2)); }
.vs-adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.vs-adv-card {
  padding: 12px 12px 2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--panel-2);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.vs-adv-card.vs-flash { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--ring); }
.vs-adv-card .video-ref-image-picker { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- boton final y resultados ---- */
.vs-go { margin-top: 4px; }
.vs-go .cta-btn { margin-top: 6px; }
.vs-go .cta-btn.stop-btn { background: linear-gradient(135deg, #ff3b6b, #b3123f); color: #fff; }
.vs-go .btn-row .cta-btn { flex: 1 1 auto; width: auto; margin: 6px 0 0; }
.vs-go .vs-ep-tools { justify-content: flex-start; }
#videoPreview { width: 100%; max-width: 100%; margin-top: 12px; border-radius: var(--radius-md); background: #000; }

/* ---- Subir y editar ---- */
.vs-upload { text-align: center; padding: 32px 20px 20px; border-style: dashed; }
.vs-upload h3 { font-family: var(--font-display); margin: 6px 0; }
.vs-upload .tune-hint { max-width: 560px; margin: 0 auto 14px; }
.vs-upload .video-ref-image-picker { display: flex; justify-content: center; align-items: center; gap: 8px; }
.vs-upload .cta-btn { width: auto; display: inline-block; margin: 0; padding: 12px 28px; }
.vs-upload-icon { font-size: 2rem; }

/* ---- Mis personajes ---- */
.vstudio .vc-panel { background: none; }
.vc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vc-grid > .tune-hint { grid-column: 1 / -1; }
.vs-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.vstudio .vs-create-card,
.vstudio .vs-create-card.vc-ai {
  display: block;
  margin: 0;
  padding: 14px 16px 6px;
  border: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}
.vs-create-card .vc-subtitle { margin-top: 0; font-weight: 600; color: var(--text); font-size: 0.92rem; }
.vs-create-card .btn-secondary { margin: 0 0 10px; }

/* ---- Mis videos ---- */
.vs-videos-title { display: flex; align-items: center; gap: 6px; }
.vs-videos-title .hint-icon { margin: 0; }

/* ---- celular ---- */
@media (max-width: 900px) {
  .vs-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-adv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vstudio { padding: 16px 16px 22px; }
  .vs-head { align-items: flex-start; }
  .vs-kind-card { padding: 12px; }
  .vs-kind-card small { font-size: 0.72rem; }
  .vs-kind-icon { width: 34px; height: 34px; font-size: 1.1rem; }
  .vs-step { padding: 14px 12px 4px; }
  .vs-chips { grid-template-columns: 1fr; }
  .vs-avatar { width: calc(33.33% - 7px); min-width: 92px; }
  .vc-grid, .vs-create-grid { grid-template-columns: 1fr; }
  .vs-running { margin-left: 4px; }
}

/* Episodios: bloque de continuidad */
.vs-ep-continuity { margin-top: 14px; }

/* =============================================================================================
   📚 Biblioteca (public/library.js): carpetas/series/albumes con portada + tarjetas en cuadricula
   ============================================================================================= */
.lib-bar { margin: 4px 0 10px; }
.lib-bar:empty { display: none; }
.lib-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lib-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 0.9rem; }
.lib-crumb {
  background: none; border: none; box-shadow: none; color: var(--accent-2); padding: 4px 6px; font-weight: 600; border-radius: 8px;
}
.lib-crumb:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); transform: none; filter: none; }
.lib-crumb.current { color: var(--text); padding: 4px 6px; font-weight: 700; }
.lib-sep { color: var(--muted); }
.lib-creates { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-new {
  padding: 6px 12px; font-size: 0.8rem; font-weight: 600; border-radius: 999px; color: var(--text);
  background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--hairline); box-shadow: none;
}
.lib-new:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent-2); filter: none; }
.lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.lib-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 8px 10px; text-align: left;
  border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
  box-shadow: none; font-weight: 500;
}
.lib-card:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); filter: none; }
.lib-card-name { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-card-meta { font-size: 0.74rem; color: var(--muted); }
.lib-cover {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: #000; font-size: 2rem;
}
.lib-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-cover-empty {
  background: linear-gradient(135deg, hsl(var(--lib-hue, 300) 70% 32%), hsl(calc(var(--lib-hue, 300) + 60) 70% 22%));
}
.lib-cover.big { width: 180px; flex: none; }
.lib-head {
  display: flex; gap: 16px; align-items: center; padding: 12px; margin-bottom: 12px;
  border-radius: var(--radius-md); border: 1px solid var(--hairline);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--panel-2)), var(--panel-2));
}
.lib-head-info { min-width: 0; }
.lib-type { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-2); font-weight: 700; }
.lib-head-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 2px 0; }
.lib-head-meta { color: var(--muted); font-size: 0.82rem; margin: 0 0 8px; }
.lib-head-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-head-actions button { padding: 6px 10px; font-size: 0.8rem; margin: 0; }
.lib-danger:hover:not(:disabled) { border-color: #ff5c7a; color: #ff5c7a; }
.lib-empty { margin: 0 0 10px; }

/* Menu flotante (mover / portada) */
.lib-pop {
  position: absolute; z-index: 60; min-width: 220px; max-width: 320px; max-height: 360px; overflow: auto;
  padding: 6px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--panel);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8);
}
.lib-pop button {
  display: block; width: 100%; text-align: left; background: none; border: none; box-shadow: none; color: var(--text);
  padding: 8px 10px; font-weight: 500; font-size: 0.86rem; border-radius: 8px;
}
.lib-pop button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); transform: none; filter: none; }
.lib-pop button.on { color: var(--accent-2); font-weight: 700; }
.lib-pop .lib-pop-new { color: var(--accent-2); }
.lib-pop-title { margin: 4px 10px 6px; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Listas en cuadricula (Mis videos, beats guardados) */
.status-list.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.lib-grid > .lib-grid-full, .lib-grid > .tune-hint { grid-column: 1 / -1; }
.lib-group-title { margin: 8px 0 0; }
.lib-item-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lib-item-card.lib-card-wide { grid-column: 1 / -1; }
.lib-item-video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; object-fit: contain; margin: 0 0 6px; }
.lib-item-card .status-item-label { overflow: hidden; text-overflow: ellipsis; }
.lib-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lib-item-actions > button { margin: 0; padding: 7px 11px; font-size: 0.8rem; }
.lib-item-btn { padding: 6px 10px; font-size: 0.9rem; }
.lib-item-row { display: flex; gap: 10px; align-items: center; }
.lib-mini-cover {
  flex: none; width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; font-size: 1.4rem;
  background: linear-gradient(135deg, hsl(var(--lib-hue, 200) 70% 32%), hsl(calc(var(--lib-hue, 200) + 60) 70% 22%));
}
.lib-mini-cover img, .song-card-cover.lib-has-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.song-card-cover.lib-has-cover { padding: 0; overflow: hidden; background: #000; }
.song-card-actions .lib-item-btn { padding: 5px 9px; }
@media (max-width: 640px) {
  .lib-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-head { flex-direction: column; align-items: stretch; }
  .lib-cover.big { width: 100%; }
  .status-list.lib-grid { grid-template-columns: 1fr; }
}

/* "Mostrar mas" tenia display:block y se veia aunque estuviera oculto */
.song-card-more[hidden] { display: none; }

/* Parte 4: "Ver mas" en la lista de videos. */
.lib-grid > .lib-show-more { justify-self: center; margin: 4px 0 8px; }

/* Parte 5: "Listo para abrir al publico" en el panel de admin. */
.admin-golive { margin-bottom: 18px; }
.admin-golive-summary { font-weight: 600; margin: 0 0 8px; }
.admin-golive-summary.is-ok { color: var(--accent-3); }
.admin-golive-summary.is-pending { color: var(--accent-2); }
.admin-golive-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.admin-golive-list li { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; line-height: 1.35; }
.admin-golive-list li.is-ok { border-color: rgba(198, 255, 61, 0.35); }
.admin-golive-list small { color: var(--muted); word-break: break-word; }

/* ===== Parte 6: panel en vivo / estadisticas / maquinas ===== */
:root {
  /* Colores de graficos (validados para fondo oscuro: banda de luminosidad, CVD y contraste). */
  --viz-1: #ff2d95;
  --viz-2: #1a9fd6;
  --viz-grid: #26263a;
  --viz-ink: var(--muted);
}
.live-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.live-machine { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.live-machine-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.live-machine h4 { margin: 0; font-size: 1rem; }
.live-machine h5 { margin: 12px 0 6px; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.live-muted { color: var(--muted); font-size: 0.8rem; margin: 4px 0; }
.live-pill { font-size: 0.75rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.live-pill.is-up { color: var(--accent-3); border-color: rgba(198, 255, 61, 0.4); }
.live-pill.is-down { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.5); }
.live-pill.is-off, .live-pill.is-unknown { color: var(--muted); }
.live-meter { height: 10px; border-radius: 6px; background: var(--panel-2); overflow: hidden; margin: 10px 0 4px; }
.live-meter-fill { height: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; transition: width 0.6s ease; }
.live-meter-label { margin: 2px 0; font-size: 0.85rem; }
.live-warn { color: #ffb347; font-weight: 600; }
.live-ok { color: #3ddc97; font-weight: 600; }
.live-badge { font-size: 0.8rem; margin: 8px 0 0; color: var(--accent-2); }
.live-spark { width: 100%; height: 44px; display: block; margin-top: 6px; cursor: crosshair; }
.live-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.85rem; }
.live-jobs small { color: var(--muted); }
.live-restart { margin-top: 10px; }
.live-table-wrap { overflow-x: auto; }
.live-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.live-table th, .live-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.live-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.live-table small { color: var(--muted); }
.live-updated { margin-top: 14px; }
.viz-axis, .viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.viz-area { fill: var(--viz-1); opacity: 0.1; }
.viz-cross { stroke: var(--text); stroke-width: 1; opacity: 0.5; vector-effect: non-scaling-stroke; }
.viz-s1 { fill: var(--viz-1); background: var(--viz-1); }
.viz-s2 { fill: var(--viz-2); background: var(--viz-2); }
.viz-hit { fill: transparent; cursor: crosshair; }
.viz-hit:hover { fill: rgba(255, 255, 255, 0.04); }
.viz-tick { fill: var(--viz-ink); font-size: 10px; font-family: var(--font-body, inherit); }
.viz-daily { width: 100%; height: auto; display: block; }
.viz-legend { display: flex; gap: 16px; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.viz-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.viz-tip { position: absolute; z-index: 9999; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; color: var(--text); pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); line-height: 1.45; }
.viz-tip[hidden] { display: none; }
.viz-table { margin-top: 8px; font-size: 0.85rem; }
.viz-table summary { cursor: pointer; color: var(--muted); }
.stats-chart { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.stats-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.stats-range { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); }
.stats-range select { padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.viz-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.viz-bars li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 0.85rem; }
.viz-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-bar-track { height: 14px; }
.viz-bar-fill { display: block; height: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; max-width: 100%; }
.viz-bar-value { color: var(--text); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.machines-settings { display: grid; gap: 10px; margin: 12px 0 16px; }
.machines-settings select { width: 100%; max-width: 640px; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); margin-top: 4px; }
.machines-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.machines-list { display: grid; gap: 12px; margin-bottom: 14px; }
.machine-row { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.machine-row legend { padding: 0 6px; font-weight: 600; }
.machine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.machine-grid label { display: grid; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.machine-grid input { padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.machine-flags { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; }
@media (max-width: 560px) {
  .viz-bars li { grid-template-columns: 1fr auto; }
  .viz-bar-track { grid-column: 1 / -1; }
}

/* ===== Parte 7: moderacion ===== */
.mod-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #ff6b6b; color: #07070c; font-size: 0.72rem; line-height: 18px; text-align: center; }
.mod-badge[hidden] { display: none; }
.mod-status p { margin: 4px 0; }
.mod-status-ok { color: var(--text); }
.mod-status-bad { color: #ffb347; }
.mod-select { width: auto; flex: 0 1 auto; min-width: 190px; max-width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.mod-list { display: grid; gap: 10px; margin-bottom: 12px; }
.mod-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.mod-card-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mod-line { margin: 6px 0; }
.mod-text { white-space: pre-wrap; word-break: break-word; background: var(--panel-2); border-radius: 8px; padding: 10px; margin: 6px 0; font-family: inherit; font-size: 0.88rem; max-height: 220px; overflow: auto; }
.mod-tag { display: inline-block; font-size: 0.75rem; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); }
.mod-state { font-size: 0.8rem; font-weight: 600; }
.mod-blocked { color: #ff6b6b; }
.mod-flagged { color: #ffb347; }
.mod-ok { color: var(--accent-3); }
.mod-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mod-access-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mod-access-log { margin-top: 20px; }
.mod-access-log summary { cursor: pointer; color: var(--muted); }

/* Parte 8: enlaces legales en la pantalla de acceso. */
.auth-legal-links { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.auth-legal-links a { color: var(--muted); }

/* Parte 10: respaldo fuera de la PC. */
.ob-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.ob-row { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(160px, 1fr) auto; gap: 12px; align-items: end; }
.ob-row label { display: grid; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.ob-row input[type="text"], .ob-row select { padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); width: 100%; }
.ob-includes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; }
.ob-warn { color: #ffb347; }
@media (max-width: 700px) { .ob-row { grid-template-columns: 1fr; } }
.ob-row label.machines-check { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 9px; color: var(--text); font-size: 0.88rem; }
.sync-result { margin-top: 6px; }
.sync-result .live-meter { max-width: 520px; }
.sync-log { max-height: 220px; overflow: auto; font-size: 0.75rem; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 8px; }

/* ===================== Pagina de bienvenida (sin sesion) =====================
   Vive dentro de #authGate: la misma puerta de login, ahora como pagina que se puede recorrer
   (hero + tarjeta de login, como funciona, funciones, precios en slides, preguntas). */
.auth-gate.landing {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  scroll-behavior: smooth;
  background:
    radial-gradient(900px 520px at 8% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(800px 520px at 95% 5%, var(--bg-glow-2), transparent 60%),
    var(--bg);
}
.auth-gate.landing.auth-gate-hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .auth-gate.landing { scroll-behavior: auto; } }

.landing-glow { position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none; overflow: hidden; z-index: 0; }
.landing-glow span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35;
  animation: landing-float 18s ease-in-out infinite alternate;
}
.landing-glow span:nth-child(1) { width: 420px; height: 420px; left: -120px; top: 60px; background: var(--accent); }
.landing-glow span:nth-child(2) { width: 360px; height: 360px; right: -100px; top: 0; background: var(--accent-2); animation-delay: -6s; }
.landing-glow span:nth-child(3) { width: 280px; height: 280px; left: 40%; top: 420px; background: var(--accent-3); opacity: 0.12; animation-delay: -12s; }
@keyframes landing-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.12); } }

.landing > *:not(.landing-glow) { position: relative; z-index: 1; }

.landing-nav {
  display: flex; align-items: center; gap: 16px;
  max-width: 1180px; margin: 0 auto; padding: 18px 16px;
}
.landing-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.landing-links { display: flex; gap: 22px; margin-left: auto; }
.landing-links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.landing-links a:hover { color: var(--text); }
.landing-nav-actions { display: flex; align-items: center; gap: 10px; }
.landing-lang {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 6px 10px; font-size: 0.8rem; cursor: pointer; font-weight: 600;
}
.landing-lang:hover { color: var(--text); border-color: var(--muted); }

.landing-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 0.98rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: var(--font-body);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.landing-btn:hover { transform: translateY(-1px); }
.landing-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #07070c; box-shadow: 0 10px 30px -10px var(--accent);
}
.landing-btn-primary:hover { box-shadow: 0 14px 36px -10px var(--accent); }
.landing-btn-ghost { background: rgba(255, 255, 255, 0.04); color: var(--text); border-color: var(--border); }
.landing-btn-ghost:hover { border-color: var(--muted); }
.landing-nav .landing-btn { padding: 8px 16px; font-size: 0.9rem; }

.landing-hero {
  max-width: 1180px; margin: 0 auto; padding: 40px 16px 56px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center;
}
.hero-eyebrow {
  display: inline-block; margin: 0 0 18px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--text); font-size: 0.85rem;
}
.hero-title { font-family: var(--font-display); font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.02; margin: 0 0 18px; letter-spacing: -0.02em; }
.hero-title span { display: block; }
.hero-title-accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--muted); font-size: 1.08rem; line-height: 1.6; max-width: 560px; margin: 0 0 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 30px; color: var(--muted); font-size: 0.9rem; }
.hero-trust li::before { content: '✓'; color: var(--accent-3); font-weight: 700; margin-right: 6px; }

.hero-eq { display: flex; align-items: flex-end; gap: 5px; height: 64px; max-width: 520px; }
.hero-eq span {
  flex: 1; border-radius: 4px 4px 1px 1px; height: 30%;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  opacity: 0.85; animation: hero-eq 1.1s ease-in-out infinite alternate;
}
.hero-eq span:nth-child(3n) { animation-duration: 0.8s; }
.hero-eq span:nth-child(4n+1) { animation-duration: 1.3s; animation-delay: -0.4s; }
.hero-eq span:nth-child(5n+2) { animation-duration: 0.95s; animation-delay: -0.2s; }
.hero-eq span:nth-child(7n) { animation-duration: 1.5s; animation-delay: -0.7s; }
@keyframes hero-eq { from { height: 14%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .hero-eq span, .landing-glow span, .landing-marquee-track { animation: none !important; }
  .hero-eq span:nth-child(odd) { height: 70%; }
}

.hero-card-wrap { position: relative; }
.hero-card-wrap::before {
  content: ''; position: absolute; inset: -2px; border-radius: 20px; z-index: 0;
  background: linear-gradient(135deg, var(--accent), transparent 40%, transparent 60%, var(--accent-2));
  opacity: 0.55;
}
.landing .auth-card {
  position: relative; z-index: 1; max-width: none; border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(10px); padding: 26px;
}
.landing .auth-card h2 { font-family: var(--font-display); font-size: 1.4rem; }
.hero-card-pulse .auth-card { animation: hero-card-pulse 0.9s ease; }
@keyframes hero-card-pulse { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 18px transparent; } }

.landing-marquee {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02); overflow: hidden; padding: 14px 0;
}
.landing-marquee-track { display: flex; width: max-content; animation: landing-marquee 40s linear infinite; }
.landing-marquee-track span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--muted);
  padding: 0 22px; white-space: nowrap;
}
.landing-marquee-track span::after { content: '✦'; color: var(--accent); margin-left: 44px; font-size: 0.8rem; position: relative; top: -2px; }
.landing-marquee-track span { padding: 0 0 0 44px; }
@keyframes landing-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.landing-section { max-width: 1180px; margin: 0 auto; padding: 72px 16px 8px; }
.landing-kicker { color: var(--accent-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; margin: 0 0 8px; text-align: center; }
.landing-h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); text-align: center; margin: 0 0 36px; letter-spacing: -0.01em; }
.landing-muted { color: var(--muted); }

.landing-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.landing-steps li { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.step-num {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #07070c; font-weight: 800; font-family: var(--font-display);
}
.landing-steps h3, .feature-card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.12rem; }
.landing-steps p, .feature-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.95rem; }

.landing-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--panel);
  border: 1px solid var(--border); border-radius: 16px; padding: 22px; transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-2px); }
.feature-icon { display: inline-block; font-size: 1.6rem; margin-bottom: 10px; }

.price-switch {
  display: flex; width: fit-content; margin: -12px auto 28px; padding: 4px; gap: 4px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2);
}
.price-switch-btn {
  border: 0; background: transparent; color: var(--muted); padding: 9px 18px; border-radius: 999px;
  font-weight: 600; cursor: pointer; font-family: var(--font-body); font-size: 0.92rem;
}
.price-switch-btn.active { background: var(--accent); color: #07070c; }

.price-carousel { position: relative; display: flex; align-items: center; gap: 10px; }
.price-track {
  flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 48px) / 3.3));
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 4px 20px;
  scrollbar-width: none; outline: none;
}
.price-track::-webkit-scrollbar { display: none; }
.price-track:focus-visible { box-shadow: 0 0 0 2px var(--accent-2); border-radius: 12px; }
.price-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.price-arrow:disabled { opacity: 0.3; cursor: default; }
.price-arrow:not(:disabled):hover { border-color: var(--accent); }

.price-slide {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 26px 22px 22px;
}
.price-slide-popular {
  border-color: transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 20px 50px -24px var(--accent);
}
.price-badge {
  position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #07070c;
}
.price-slide h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.2rem; }
.price-slide-amount { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.02em; }
.price-slide-amount small { font-size: 0.95rem; color: var(--muted); font-weight: 500; margin-left: 2px; }
.price-slide ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; color: var(--muted); font-size: 0.92rem; flex: 1; }
.price-slide li::before { content: '✓'; color: var(--accent-3); font-weight: 800; margin-right: 8px; }
.price-slide .landing-btn { width: 100%; }

.price-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.price-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--border); transition: width 0.2s, background 0.2s; }
.price-dots span.on { width: 22px; background: var(--accent); }
.price-footnote { text-align: center; color: var(--muted); font-size: 0.88rem; margin: 18px auto 0; max-width: 720px; line-height: 1.55; }
.price-footnote a, .landing-muted a { color: var(--accent-2); }

.landing-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.landing-faq details { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 0 20px; }
.landing-faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; line-height: 1; transition: transform 0.2s; }
.landing-faq details[open] summary::after { transform: rotate(45deg); }
.landing-faq details p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }

.landing-final {
  max-width: 1100px; margin: 80px auto 0; padding: 48px 24px; text-align: center; border-radius: 24px;
  background:
    radial-gradient(500px 220px at 20% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(500px 220px at 80% 100%, color-mix(in srgb, var(--accent-2) 25%, transparent), transparent 70%),
    var(--panel);
  border: 1px solid var(--border);
}
.landing-final h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 10px; }
.landing-final p { color: var(--muted); margin: 0 0 24px; }

.landing-footer {
  max-width: 1180px; margin: 0 auto; padding: 40px 16px 48px; display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; color: var(--muted); font-size: 0.88rem;
}
.landing-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.landing-footer a { color: var(--muted); text-decoration: none; }
.landing-footer a:hover { color: var(--text); }

@media (max-width: 960px) {
  .landing-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 20px; }
  .hero-card-wrap { max-width: 460px; width: 100%; margin: 0 auto; }
  .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-track { grid-auto-columns: minmax(250px, calc((100% - 16px) / 2.2)); }
}
@media (max-width: 680px) {
  .landing-links { display: none; }
  .landing-nav-actions { margin-left: auto; }
  .landing-steps, .landing-features { grid-template-columns: 1fr; }
  .price-arrow { display: none; }
  .price-track { grid-auto-columns: 84%; padding-left: 0; padding-right: 0; }
  .landing-section { padding-top: 56px; }
  .hero-eq { height: 44px; }
  .landing-final { margin: 56px 16px 0; }
}
.landing .landing-h2, .landing .landing-final h2 { display: block; color: var(--text); text-align: center; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; }
.landing .landing-final h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.landing .auth-card h2 { display: block; color: var(--text); text-align: left; }
.landing h3 { color: var(--text); }

/* ===================== App con sesion: mismo estilo que la pagina de bienvenida =====================
   Encabezado con saludo, pestañas tipo pastilla con degradado, botones principales en pastilla
   y titulos de seccion mas grandes. Solo cambia la apariencia; la app funciona igual. */
#appRoot { position: relative; }
/* Solo el contenido normal va por encima del brillo de fondo. OJO: no tocar los modales
   (.modal-overlay usa position: fixed) ni la barra de pestañas (position: sticky). */
#appRoot > header, #appRoot > main, #appRoot > footer { position: relative; z-index: 1; }
.app-glow { height: 620px; }
.app-glow span { opacity: 0.22; }

.app-header { padding: 20px 32px 6px; }
.app-header h1 { font-size: 1.7rem; }
.app-header .brand-mark { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 35%, transparent)); }

.app-welcome {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-top: 18px;
}
.app-greeting {
  margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.1; color: var(--text) !important;
}
.app-tagline { margin: 6px 0 0 !important; color: var(--muted); font-size: 0.98rem; }
.app-eq { height: 42px; width: 240px; max-width: 32%; flex-shrink: 0; opacity: 0.9; }

/* Cuenta: circulito con inicial + correo, y tokens como pastilla con degradado */
.auth-account-badge {
  padding: 4px 4px 4px 4px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface-glass); margin-right: 4px;
}
.app-avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #07070c;
  font-weight: 800; font-size: 0.85rem; font-family: var(--font-display);
}
.auth-account-badge .help-btn { padding: 5px 12px; border-radius: 999px; font-size: 0.82rem; }
.token-badge {
  cursor: pointer; padding: 7px 14px; font-size: 0.85rem; color: var(--text);
  border: 1.5px solid transparent;
  background: linear-gradient(var(--panel-2), var(--panel-2)) padding-box, linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  box-shadow: 0 8px 22px -14px var(--accent);
  transition: transform 0.15s ease;
}
.token-badge::before { content: '🎟'; margin-right: 2px; }
.token-badge:hover { transform: translateY(-1px); }
.token-badge #tokenBadgeCount { font-weight: 800; color: var(--accent-2); }
.header-controls .help-btn { border-radius: 999px; }

/* Pestañas: la activa con el mismo degradado del boton principal de la portada */
.tab-bar { margin-top: 14px; padding: 10px 32px; gap: 6px; }
.tab-btn { font-size: 0.9rem; padding: 9px 16px; }
.tab-btn.active {
  color: #07070c;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px -12px var(--accent);
}

/* Titulos de seccion */
.panel > h2 { color: var(--text); font-size: 1.28rem; letter-spacing: -0.01em; margin-bottom: 16px; }
.panel { border-radius: 20px; }

/* Boton principal ("Generar cancion", etc.): pastilla con degradado como en la portada */
.cta-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #07070c; font-weight: 800; font-size: 1.05rem; padding: 16px 24px;
  box-shadow: 0 14px 36px -14px var(--accent);
}
.cta-btn:hover:not(:disabled) { box-shadow: 0 18px 44px -14px var(--accent); filter: brightness(1.05); }

/* Campos un poco mas redondeados */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="datetime-local"], textarea, select { border-radius: 12px; }

@media (max-width: 760px) {
  .app-header { padding: 14px 16px 4px; }
  .app-header h1 { font-size: 1.4rem; }
  .app-header .header-top { flex-wrap: nowrap; }
  .app-header .header-controls {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start;
    margin: 0 -16px; padding: 4px 16px; flex: 1 1 auto; min-width: 0;
  }
  .app-header .header-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .app-header .header-controls::-webkit-scrollbar { display: none; }
  .auth-account-email { display: none; }
  .app-welcome { margin-top: 12px; }
  .app-eq { display: none; }
  .tab-bar {
    padding: 8px 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
}
.app-header .header-controls > * { flex-shrink: 0; }
/* Barra de pestañas flotante y redondeada (se queda pegada arriba al hacer scroll) */
#appRoot .tab-bar {
  top: 10px; max-width: calc(1300px - 64px); margin: 16px auto 0; border-radius: 999px;
  border: 1px solid var(--hairline); padding: 6px;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9);
}
@media (max-width: 760px) {
  #appRoot .tab-bar { margin: 12px 16px 0; max-width: none; padding: 5px; }
}

/* Opciones solo para el admin (motores Demo / IA en internet / HeartMuLa) */
html:not(.is-admin) .admin-only { display: none !important; }
/* Enlaces legales del pie de la app: que bajen de linea en el celular (antes se salian de la pantalla) */
.app-legal-links { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 4px; }
/* Beat Maker en el celular: el selector de ejemplos se salia de la pantalla */
.example-loader { min-width: 0; max-width: 100%; }
.example-loader select { min-width: 0; max-width: 100%; flex: 1 1 200px; text-overflow: ellipsis; }
.example-loader .checkbox-label { min-width: 0; max-width: 100%; white-space: normal; }

.admin-tag-mod { background: rgba(80, 160, 255, 0.18); color: #8cc4ff; }

/* ===== Barra flotante: progreso de generacion + mini reproductor (public/nowdock.js) ===== */
.now-dock {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  animation: nd-in 0.28s ease-out;
}
.now-dock[hidden] { display: none; }
.now-dock > * { pointer-events: auto; }
@keyframes nd-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.has-now-dock { padding-bottom: 150px; }

.nd-gen, .nd-player {
  position: relative;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.nd-gen[hidden], .nd-player[hidden] { display: none; }

.nd-gen { display: flex; align-items: center; }
.nd-gen-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 13px;
  background: none;
  border: 0;
  color: var(--text);
  font: 500 0.92rem var(--font-body);
  text-align: left;
  cursor: pointer;
}
.nd-gen-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-gen-pct { font-variant-numeric: tabular-nums; color: var(--accent-2); font-weight: 600; }
.nd-gen-icon { font-size: 1.05rem; }
.nd-gen.is-busy .nd-gen-icon { animation: nd-bounce 1.1s ease-in-out infinite; }
@keyframes nd-bounce { 50% { transform: translateY(-3px) rotate(-8deg); } }
.nd-gen-close {
  background: none; border: 0; color: var(--muted); font-size: 0.95rem; padding: 10px 14px; cursor: pointer;
}
.nd-gen-close[hidden] { display: none; }
.nd-gen-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.06); }
.nd-gen-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.6s ease;
}
.nd-gen.is-busy .nd-gen-bar span { background-size: 200% 100%; animation: nd-shimmer 1.6s linear infinite; background-image: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); }
@keyframes nd-shimmer { to { background-position: -200% 0; } }
.nd-gen.is-done { border-color: color-mix(in srgb, var(--accent-3) 55%, var(--border)); }
.nd-gen.is-done .nd-gen-bar span { background: var(--accent-3); }
.nd-gen.is-error { border-color: rgba(255, 90, 90, 0.55); }
.nd-gen.is-error .nd-gen-pct { display: none; }

.nd-player { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.nd-play {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.nd-play:active { transform: scale(0.94); }
.nd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nd-title {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--text); font: 600 0.92rem var(--font-body); text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.nd-title:hover { color: var(--accent-2); }
.nd-seek-row { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.nd-seek { flex: 1; min-width: 0; accent-color: var(--accent); height: 4px; margin: 0; }
.nd-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; opacity: 0.35; }
.nd-eq i { display: block; width: 3px; height: 30%; background: var(--accent-2); border-radius: 2px; }
.nd-player.is-playing .nd-eq { opacity: 1; }
.nd-player.is-playing .nd-eq i { animation: hero-eq 0.9s ease-in-out infinite alternate; }
.nd-player.is-playing .nd-eq i:nth-child(2) { animation-delay: -0.3s; }
.nd-player.is-playing .nd-eq i:nth-child(3) { animation-delay: -0.6s; }
.nd-player.is-playing .nd-eq i:nth-child(4) { animation-delay: -0.15s; }
.nd-close { flex: none; background: none; border: 0; color: var(--muted); font-size: 0.95rem; padding: 8px; cursor: pointer; }
.nd-close:hover, .nd-gen-close:hover { color: var(--text); }

@media (max-width: 560px) {
  .now-dock { width: calc(100vw - 16px); bottom: max(8px, env(safe-area-inset-bottom)); gap: 6px; }
  .nd-eq { display: none; }
  .nd-player { gap: 10px; padding: 8px 10px; }
  .nd-play { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .now-dock, .nd-gen.is-busy .nd-gen-icon, .nd-player.is-playing .nd-eq i, .nd-gen.is-busy .nd-gen-bar span { animation: none; }
}

/* Ronda 2: titulos muy largos sin espacios no deben romper el ancho en el celular. */
.song-card, .song-card *, .social-post, .history-item, .track-header span, .admin-user-email { overflow-wrap: anywhere; min-width: 0; }
.now-dock .nd-title, .now-dock .nd-close, .now-dock .nd-gen-main, .now-dock .nd-gen-close { box-shadow: none; border-radius: 8px; }
.now-dock .nd-title:hover, .now-dock .nd-gen-main:hover, .now-dock .nd-close:hover, .now-dock .nd-gen-close:hover { transform: none; filter: none; }
.now-dock .nd-title:focus-visible, .now-dock .nd-gen-main:focus-visible { box-shadow: 0 0 0 2px var(--accent-2); }
.now-dock .nd-seek { margin-top: 0; }

/* Modo juego (Admin -> Maquinas) */
.game-mode-box { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.game-mode-box > div { flex: 1 1 320px; min-width: 0; }
.game-mode-box p { margin: 6px 0 0; }
.game-mode-state { font-size: 0.85rem; color: var(--muted); margin-left: 6px; }
.game-mode-box.is-on { border-color: color-mix(in srgb, var(--accent-3) 60%, var(--border)); background: color-mix(in srgb, var(--accent-3) 8%, transparent); }
.game-mode-box.is-on .game-mode-state { color: var(--accent-3); font-weight: 600; }

/* Medidor de carga (Admin -> En vivo) y refuerzo RunPod (Admin -> Maquinas) */
.load-banner { border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; background: rgba(255, 255, 255, 0.03); }
.load-banner p { margin: 6px 0 0; }
.load-banner-top { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: baseline; }
.load-banner-top span { color: var(--muted); font-size: 0.9rem; }
.load-banner .load-ram-low { color: #ffb347; font-weight: 600; }
.load-banner.is-normal { border-color: color-mix(in srgb, #3ddc84 45%, var(--border)); }
.load-banner.is-cargado { border-color: color-mix(in srgb, #ffc94d 60%, var(--border)); background: rgba(255, 201, 77, 0.06); }
.load-banner.is-saturado { border-color: color-mix(in srgb, #ff5a6e 70%, var(--border)); background: rgba(255, 90, 110, 0.08); }
.runpod-box { border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; background: rgba(255, 255, 255, 0.03); }
.runpod-box > summary { cursor: pointer; font-weight: 700; }
.runpod-keys { margin: 8px 0; padding-left: 4px; list-style: none; display: grid; gap: 4px; font-size: 0.9rem; }
.runpod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; margin: 10px 0; }
.runpod-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--muted); }
.final-sale-note { border-left: 3px solid rgba(255, 201, 77, 0.7); padding-left: 10px; }

/* Letrero rotativo del mini reproductor */
@keyframes nd-swap-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.now-dock .nd-title.nd-swap { animation: nd-swap-in 0.35s ease-out; }
.now-dock .nd-title.is-lyric { font-style: italic; color: color-mix(in srgb, var(--accent-2) 70%, var(--text)); }
.now-dock .nd-title.is-brand { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.now-dock .nd-play.is-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; animation: nd-flip 0.45s ease-out; }
@keyframes nd-flip { from { transform: rotateY(90deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .now-dock .nd-title.nd-swap, .now-dock .nd-play.is-brand { animation: none; } }

/* Numeros de seccion ("1.", "8c."...): ayudan al admin a ubicarse, pero al cliente lo confunden
   (las pestañas ya separan todo). Solo los ve el admin. */
html:not(.is-admin) .sec-num { display: none; }
#durationPick { font-variant-numeric: tabular-nums; }

/* ===== Planes: candados y modo facil (ver public/plangate.js) ===== */
html.is-easy [data-level="advanced"] { display: none !important; }
.feature-locked > :not(.feature-lock-card):not(summary):not(.keep-when-locked) { display: none !important; }
details.feature-locked > summary::after { content: " 🔒"; }
.tab-btn.is-locked::after { content: " 🔒"; font-size: 0.85em; }
.feature-lock-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0; padding: 12px 14px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent, #ff2d95) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #ff2d95) 8%, transparent);
}
.feature-lock-card.is-big { margin: 18px 0; padding: 22px; }
.feature-lock-icon { font-size: 1.4rem; }
.feature-lock-card.is-big .feature-lock-icon { font-size: 2rem; }
.feature-lock-text { flex: 1 1 200px; min-width: 0; }
.feature-lock-text strong { display: block; }
.feature-lock-text p { margin: 2px 0 0; color: var(--muted); font-size: 0.92rem; }
.feature-lock-btn { flex: 0 0 auto; }
.tab-page.feature-locked { padding: 0 4px; }
.mode-switch { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; cursor: pointer; font-size: 0.92rem; color: var(--muted); user-select: none; }
.mode-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-switch-track { width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); position: relative; transition: background 0.2s; flex: 0 0 auto; }
.mode-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.mode-switch input:checked + .mode-switch-track { background: var(--accent, #ff2d95); }
.mode-switch input:checked + .mode-switch-track::after { transform: translateX(16px); }
.mode-switch input:focus-visible + .mode-switch-track { outline: 2px solid var(--accent, #ff2d95); outline-offset: 2px; }
.plan-card-includes, .price-includes { margin: 8px 0 10px; padding-left: 18px; text-align: left; font-size: 0.9rem; }
.plan-card-includes li, .price-includes li { margin: 3px 0; }

/* ===== Herramientas: barra secundaria (Beat Maker, Grabar voz, DJ, Mi voz) ===== */
.tab-bar.subtab-bar {
  position: static;
  margin: 0 auto;
  padding: 8px 32px 4px;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
}
.tab-bar.subtab-bar[hidden] { display: none; }
.subtab-btn { font-size: 0.82rem; padding: 7px 14px; border: 1px solid var(--hairline, rgba(255,255,255,0.1)); }
@media (max-width: 640px) {
  .tab-bar.subtab-bar { padding: 6px 16px 2px; }
}

/* ===== "Mas opciones" en una fila de botones (ver public/chipgroups.js) ===== */
.chip-group { margin: 14px 0 6px; }
.chip-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.chip-group-title { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.chip-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--hairline, rgba(255,255,255,0.12)); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); color: var(--text);
  padding: 6px 12px; font-size: 0.84rem; cursor: pointer; white-space: nowrap;
}
.chip:hover { background: rgba(255, 255, 255, 0.08); }
.chip.active { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); background: color-mix(in srgb, var(--accent-2) 16%, transparent); }
.chip.is-locked { color: var(--muted); }
.chip-item.chip-hidden { display: none !important; }
.chip-group > details.chip-item > summary { display: none; }
.chip-group > .chip-item { margin-top: 10px; }
/* Si en modo facil no queda ningun boton visible, no se muestra la fila */
html.is-easy .chip-group:not(:has(> .chip-group-head .chip:not([data-level="advanced"]))) { display: none; }
.transport { flex-wrap: wrap; }
@media (max-width: 640px) {
  .transport > button { flex: 1 1 140px; }
}
/* Candado chico para campos sueltos (no ocupa media pantalla) */
.feature-lock-card.is-compact { padding: 8px 12px; gap: 8px; margin: 6px 0; }
.feature-lock-card.is-compact .feature-lock-icon { font-size: 1rem; }
.feature-lock-card.is-compact .feature-lock-text p { display: none; }
.feature-lock-card.is-compact .feature-lock-text strong { font-weight: 500; font-size: 0.9rem; }
.feature-lock-card.is-compact .feature-lock-btn { padding: 5px 12px; font-size: 0.82rem; }
.song-extra-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.song-extra-tools > button.btn-secondary { width: auto; padding: 7px 12px; font-size: 0.84rem; }
.song-extra-tools > .clone-hint { flex-basis: 100%; }
.play-new-song-btn {
  display: block; width: 100%; margin-top: 10px; padding: 12px 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--text);
  font-weight: 700; font-size: 1rem; cursor: pointer;
}
.play-new-song-btn[hidden] { display: none; }
.song-card-open.is-playing { background: color-mix(in srgb, var(--accent-2) 22%, transparent); }

/* ===== "Tu idea" -> la IA escribe la letra ===== */
.idea-box {
  margin: 12px 0 14px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.idea-label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.idea-box textarea { width: 100%; resize: vertical; min-height: 56px; }
.idea-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.idea-create-btn {
  border: none; border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer; color: #111;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.idea-create-btn:disabled, .idea-write-btn:disabled { opacity: 0.6; cursor: wait; }
.idea-write-btn { background: none; border: none; padding: 4px 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 0.88rem; }
.idea-box .status:empty { display: none; }

/* =====================================================================================
   ✨ Editar con IA (public/aiedit.js)
   ===================================================================================== */
.ai-edit-entry { margin: 4px 0 14px; }
.ai-edit-open-btn {
  border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--panel-2), var(--panel-2)) padding-box, linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  color: var(--text);
}
.nd-edit {
  flex: none; border: 1px solid var(--border); background: transparent; color: var(--text);
  border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; padding: 0;
}
.nd-edit:hover { border-color: var(--accent-2); }
.song-card-aibtn, .song-card-studiobtn { font-size: 0.95rem; padding: 5px 10px; }

.ai-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); z-index: 120;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--panel) 97%, #000);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.75);
  animation: ai-slide 0.22s ease-out;
}
@keyframes ai-slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ai-head-text { display: flex; flex-direction: column; min-width: 0; }
.ai-head-text strong { font-family: var(--font-display); font-size: 1.05rem; }
.ai-song { color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-close { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; padding: 0; }
.ai-lock { padding: 10px 14px 0; }
.ai-msgs { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 94%; padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }
.ai-msg p { margin: 0 0 6px; }
.ai-msg p:last-child { margin-bottom: 0; }
.ai-me { align-self: flex-end; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, #000), color-mix(in srgb, var(--accent-2) 45%, #000)); color: #fff; border-bottom-right-radius: 4px; }
.ai-ai { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; width: 94%; }
.ai-error { border-color: #7a2b34; color: #ff9aa5; }
.ai-thinking { color: var(--muted); }
.ai-dots i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--accent-2); animation: ai-dot 1s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.1); } }
.ai-plan { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline, var(--border)); }
.ai-plan-title { font-weight: 700; margin: 0 0 6px !important; }
.ai-plan ul { margin: 0 0 6px; padding-left: 18px; }
.ai-plan-line { margin: 2px 0 !important; }
.ai-plan-note { color: var(--muted); font-size: 0.8rem; margin: 6px 0 0 !important; }
.ai-plan-ok { color: var(--accent-3); font-size: 0.86rem; }
.ai-plan-error { color: #ff9aa5; font-size: 0.86rem; }
.ai-lyrics { white-space: pre-wrap; margin: 6px 0; padding: 8px 10px; max-height: 190px; overflow: auto; background: var(--bg); border-radius: 10px; font-family: inherit; font-size: 0.84rem; border: 1px solid var(--border); }
.ai-plan-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.ai-plan-actions:empty { display: none; }
.ai-apply { border-radius: 999px; padding: 8px 18px; font-weight: 700; cursor: pointer; border: 0; color: #07070c; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.ai-skip { border-radius: 999px; padding: 8px 14px; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); }
.ai-prog { width: 100%; font-size: 0.84rem; color: var(--muted); }
.ai-prog-bar { height: 6px; margin-top: 6px; border-radius: 6px; background: var(--border); overflow: hidden; }
.ai-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s; }
.ai-chips { display: flex; gap: 6px; padding: 6px 14px; overflow-x: auto; flex: none; }
.ai-chip { flex: none; border-radius: 999px; padding: 6px 12px; font-size: 0.78rem; cursor: pointer; background: transparent; color: var(--text); border: 1px solid var(--border); white-space: nowrap; }
.ai-chip:hover { border-color: var(--accent-2); }
.ai-form { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--border); align-items: flex-end; }
.ai-form.is-disabled { opacity: 0.5; pointer-events: none; }
.ai-input { flex: 1 1 auto; resize: none; margin: 0 !important; min-height: 46px; }
.ai-send { flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer; border: 0; color: #07070c; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* =====================================================================================
   Diseño "Nuevo" (public/suno.js): menu lateral + Crear + lista de canciones + reproductor
   Solo se activa con html.layout-suno (pantalla ancha y elegido en Configuracion).
   ===================================================================================== */
html.layout-suno #appRoot { padding-left: 236px; }
html.layout-suno .app-glow { position: fixed; left: 236px; height: 100vh; }
body.has-now-dock .ai-drawer { bottom: 84px; }
html.layout-suno .suno-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: 236px; z-index: 60;
  display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 120px; overflow-y: auto;
  background: color-mix(in srgb, var(--panel-2) 94%, #000);
  border-right: 1px solid var(--border);
}
html.layout-suno .suno-brand {
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em;
  padding: 4px 12px 16px;
}
html.layout-suno .suno-brand span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.layout-suno #appRoot .suno-side .tab-bar:not(.subtab-bar) {
  position: static; display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  backdrop-filter: none; overflow: visible;
}
html.layout-suno .suno-side .tab-btn {
  width: 100%; text-align: left; font-size: 0.95rem; padding: 11px 14px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: var(--muted); box-shadow: none;
}
html.layout-suno .suno-side .tab-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
html.layout-suno .suno-side .tab-btn.active {
  color: var(--text); font-weight: 700; box-shadow: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
  border-color: color-mix(in srgb, var(--accent-2) 35%, transparent);
}
html.layout-suno #appRoot .suno-side .tab-bar.subtab-bar {
  position: static; display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px 16px;
  padding: 0 0 0 8px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent;
  box-shadow: none; max-width: none; width: auto; overflow: visible; backdrop-filter: none;
}
html.layout-suno .suno-side .subtab-btn { font-size: 0.86rem; padding: 8px 12px; border-radius: 10px; }
html.layout-suno .suno-side .subtab-btn.active { background: rgba(255, 255, 255, 0.08); }

/* Encabezado delgado: solo cuenta, tokens y botones */
html.layout-suno .app-header { padding: 14px 26px 4px; }
html.layout-suno .app-header h1, html.layout-suno .app-welcome { display: none; }
html.layout-suno .app-header .header-top { justify-content: flex-end; }
html.layout-suno main { max-width: none; padding: 10px 26px 40px; }
html.layout-suno footer { padding-left: 26px; }

/* Crear: formulario a la izquierda, canciones a la derecha */
html.layout-suno .tab-page[data-tab-page="crear"].active {
  display: grid; grid-template-columns: minmax(400px, 500px) minmax(0, 1fr); gap: 20px; align-items: start;
}
html.layout-suno main .panel + .panel { margin-top: 0; }
html.layout-suno .suno-modebar {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
}
html.layout-suno .suno-modebar button {
  border: 0; background: transparent; color: var(--muted); font-weight: 700; padding: 8px 18px;
  border-radius: 999px; cursor: pointer; font-size: 0.88rem; box-shadow: none;
}
html.layout-suno .suno-modebar button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #07070c; }

html.layout-suno .suno-songs {
  position: sticky; top: 12px; display: flex; flex-direction: column; padding: 18px;
  max-height: calc(100vh - 140px); overflow: hidden;
}
html.layout-suno .suno-songs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
html.layout-suno .suno-songs-head h2 { margin: 0; font-size: 1.15rem; }
html.layout-suno .suno-songs-head h2::before { content: none; }
html.layout-suno .suno-songs-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.layout-suno .suno-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); }
html.layout-suno .suno-seg button { border: 0; background: transparent; color: var(--muted); padding: 5px 11px; border-radius: 999px; cursor: pointer; font-size: 0.8rem; box-shadow: none; }
html.layout-suno .suno-seg button.on { background: rgba(255, 255, 255, 0.12); color: var(--text); }
html.layout-suno .suno-sort { width: auto; margin: 0; padding: 6px 10px; font-size: 0.82rem; border-radius: 999px; }
html.layout-suno .suno-songs-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 4px; }
/* Dentro: la busqueda compacta, sin los textos largos ni los controles repetidos */
html.layout-suno .suno-songs .history-panel { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
html.layout-suno .suno-songs .history-panel > label:first-child { font-size: 0; margin-bottom: 8px; }
html.layout-suno .suno-songs .history-panel > label:first-child input { font-size: 0.9rem; margin: 0; }
html.layout-suno .suno-songs .history-panel > label.checkbox-label,
html.layout-suno .suno-songs .song-grid-title,
html.layout-suno .suno-songs .history-select-legacy,
html.layout-suno .suno-songs #historyLoadBtn,
html.layout-suno .suno-songs #historyFavoriteBtn { display: none; }
html.layout-suno .suno-songs .history-actions { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
html.layout-suno .suno-songs #historyStatus { font-size: 0.78rem; }
/* Lista (por defecto) o cuadricula */
html.layout-suno .suno-songs:not(.is-grid) .song-card-grid { grid-template-columns: 1fr; gap: 6px; }
html.layout-suno .suno-songs:not(.is-grid) .song-card { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; }
html.layout-suno .suno-songs:not(.is-grid) .song-card-top { flex: 1 1 auto; min-width: 0; }
html.layout-suno .suno-songs:not(.is-grid) .song-card-cover { width: 46px; height: 46px; font-size: 1.2rem; }
html.layout-suno .suno-songs:not(.is-grid) .song-card-tags { display: none; }
html.layout-suno .suno-songs:not(.is-grid) .song-card-actions { border-top: 0; padding-top: 0; flex: none; }
html.layout-suno .suno-songs:not(.is-grid) .song-card-actions .song-card-open { flex: none; }
html.layout-suno .suno-songs.is-grid .song-card-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Reproductor fijo abajo, de lado a lado (junto al menu) */
html.layout-suno .now-dock {
  left: 236px; right: 0; bottom: 0; width: auto; transform: none; animation: none; gap: 0;
}
html.layout-suno .now-dock .nd-player, html.layout-suno .now-dock .nd-gen {
  border-radius: 0; border-width: 1px 0 0; background: color-mix(in srgb, var(--panel-2) 96%, #000);
}
html.layout-suno body.has-now-dock { padding-bottom: 96px; }
html.layout-suno .now-dock .nd-info { flex: 1 1 auto; }
html.layout-suno .now-dock .nd-seek-row { max-width: none; }

html.layout-suno .suno-songs.is-grid .song-card-actions { flex-wrap: wrap; }
html.layout-suno .suno-songs.is-grid .song-card-actions .song-card-open { flex: 1 0 100%; white-space: nowrap; }
.suno-only { display: none; }
html.layout-suno .suno-only { display: block; }
.suno-only .btn-secondary { margin-bottom: 12px; }

/* 💡 Episodio con mi idea (public/episodeidea.js) */
.episode-idea { margin: 4px 0 14px; }
.episode-idea .ep-idea-length { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; color: var(--muted); }
.episode-idea .ep-idea-length select { width: auto; margin: 0; padding: 6px 10px; }