/* styles.css — interfaz simple, prioridad claridad sobre estética. */

* { box-sizing: border-box; }

/* Layout vertical: [controles] arriba, [visualizador grande a ancho completo],
   [informe] debajo. La página entera hace scroll vertical si el informe es largo. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  color: #2b2924;
  background: #F1EEE9; /* off-white cálido */
  overflow-x: hidden; /* seguridad: los contenedores ya son 100% de ancho */
}

header {
  background: #1f2937;
  color: #fff;
  padding: 12px 20px;
}
header h1 { margin: 0; font-size: 18px; }
header p  { margin: 4px 0 0; font-size: 12px; color: #cbd5e1; }

.controls {
  /* PASO F: contenedor del dashboard (bloques apilados). Antes era una fila flex larga. */
  display: block;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

/* ===== PASO F: dashboard de controles en bloques funcionales (cards) ===== */
.controls-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.control-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.card-title {
  margin: 0;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #374151;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
}
.card-sub {
  border-top: 1px dashed #e2e5ea;
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.card-sub-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }

/* Barra de acciones (Generar / Limpiar / Copiar enlace) + grupo de exportación. */
.action-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px;
}
#btnGenerate { padding: 10px 22px; font-weight: 700; font-size: 15px; } /* mayor peso visual */
.btn-secondary { background: #eef1f4; color: #374151; }
.btn-secondary:hover { background: #e2e6ea; }
.export-bar {
  margin-left: auto;                    /* empuja las exportaciones a la derecha en desktop */
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-left: 12px; border-left: 1px solid #e5e7eb;
}
.export-bar .export-label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.export-bar button { background: #eef1f4; color: #374151; font-size: 13px; padding: 7px 11px; } /* menor peso que Generar */
.export-bar button:hover { background: #e2e6ea; }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.field select,
.field input {
  padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px;
  /* PASO F: en grid con stretch, border-box evita que padding/borde desborden la celda. */
  box-sizing: border-box; width: 100%; max-width: 100%;
}

.checks { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.checks strong { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.checks label { display: flex; align-items: center; gap: 6px; }

.buttons { display: flex; flex-wrap: wrap; gap: 8px; }
button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  background: #e5e7eb;
}
button:hover { background: #d1d5db; }
#btnGenerate { background: #2563eb; color: #fff; }
#btnGenerate:hover { background: #1d4ed8; }

/* Leyenda de colores por voz. */
.legend { display: flex; gap: 16px; padding: 8px 20px; font-size: 13px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.swatch-sm { width: 10px; height: 10px; border-radius: 2px; flex: none; }
/* El cierre real se dibuja como ARO alrededor de la nota, no como relleno: su swatch en
   la leyenda lo refleja (borde dorado, interior marfil como el de la nota neutra). */
.swatch-ring { background: #FAF9F6; border: 2.5px solid #C9A227; box-sizing: border-box; }

/* --- Relojes del ciclo (capa analítica del piano roll) --- */
/* `display:flex` de .legend le gana al `display:none` que el user-agent aplica a
   [hidden]; sin esta regla la leyenda de relojes quedaría siempre visible. */
.legend[hidden] { display: none; }
.legend-clocks { flex-wrap: wrap; row-gap: 4px; }
.clock-analysis .clock-master { font-weight: 600; }
/* Deshabilitada por completo: el bloque se atenúa pero sigue visible (no salta de sitio). */
.clock-analysis.is-disabled .clock-master { opacity: .45; }
.clock-analysis.is-disabled label { cursor: not-allowed; }
/* Escala simétrica: la capa sigue activa, pero grado y estado no aplican; en la leyenda se
   muestran "desactivados" (gris + tachado) en lugar de ocultarse. */
.legend-clocks span.is-off { opacity: .42; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .35); }
.clock-note { margin: 2px 0 0; font-size: 11px; line-height: 1.35; color: #8a8378; }

/* Barra de reproducción. */
.playback {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #E4DFD6;
  font-size: 13px;
}
.playback label { display: inline-flex; align-items: center; gap: 6px; color: #555; }
.playback select { padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
.playback input[type="range"] { width: 96px; }
#reading { border-color: #c4b5e8; }
#reading:disabled { opacity: 0.5; }
.playback button { padding: 6px 12px; border: none; border-radius: 6px; cursor: pointer; background: #e5e7eb; font-size: 13px; }
.playback button:hover { background: #d7d3cc; }
.playback .pb-play { background: #2f6f4f; color: #fff; }
.playback .pb-play:hover { background: #285f43; }
.playback .pb-hint { color: #9C968B; font-size: 12px; }

#status { padding: 6px 16px; font-size: 13px; color: #374151; min-height: 18px; }

/* Marco funcional (síntesis por bordes) */
.frame-info { padding: 7px 16px; font-size: 13px; color: #4c1d95; background: #f6f1ff; border-top: 1px solid #e6ddff; border-bottom: 1px solid #e6ddff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frame-info[hidden] { display: none; }
.frame-info .fl { font-weight: 700; color: #6d28d9; }
.frame-info .frm { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #0f3d2e; background: #eef6f1; padding: 1px 7px; border-radius: 4px; }
.frame-play { border: none; border-radius: 6px; background: #6d28d9; color: #fff; cursor: pointer; padding: 3px 10px; font-size: 12.5px; }
.frame-play:hover { background: #5b21b6; }
.frame-info .fold-note { flex-basis: 100%; margin-top: 4px; font-size: 11.5px; color: #7c6ba3; font-style: italic; }
/* Retornos bifásicos (panel de texto) */
.biphasic-info { padding: 7px 16px; font-size: 12.5px; color: #14532d; background: #f0f9f2; border-top: 1px solid #d9ead2; border-bottom: 1px solid #d9ead2; }
.biphasic-info[hidden] { display: none; }
.biphasic-info .fl { font-weight: 700; color: #2f6f4f; margin-right: 8px; }
.biphasic-info .bp-row { margin-top: 3px; line-height: 1.7; }
.biphasic-info .bp-loop { color: #6b7f70; font-style: italic; }
.biphasic-info .frm { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #0f3d2e; background: #e2f0e6; padding: 0 5px; border-radius: 4px; }
.biphasic-info .bp-dev { color: #6b7f70; font-size: 11.5px; }
.biphasic-info .bp-sum { margin: 2px 0 6px; color: #2f6f4f; font-size: 12px; font-weight: 600; }
.biphasic-info .bp-cur { background: #d8ecd9; border: 1px solid #a9d0ac; border-radius: 5px; padding: 1px 5px; }
.biphasic-info .bp-cmp { background: #e8e0f7; border: 1px solid #c9b8ea; border-radius: 5px; padding: 1px 5px; }
.biphasic-info .bp-leg { margin-top: 5px; font-size: 11.5px; color: #4a5f50; }
.biphasic-info .bp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
#biphasicCompare { padding: 2px 8px; border: 1px solid #c9b8ea; border-radius: 6px; font-size: 12.5px; }
#biphasicCompare:disabled { opacity: 0.5; }
.bp-degree { display: flex; align-items: center; gap: 6px; }
#biphasicDegree { padding: 2px 8px; border: 1px solid #b9d8bd; border-radius: 6px; font-size: 12.5px; }
#biphasicDegree:disabled { opacity: 0.5; }

.fold-controls label { display: flex; align-items: center; gap: 6px; }
.fold-controls select { max-width: 230px; padding: 3px 6px; border: 1px solid #c4b5e8; border-radius: 6px; font-size: 12.5px; }
.fold-controls select:disabled { opacity: 0.5; }

/* "Análisis de ciclo" dentro de Capas de análisis: el wrapper (conserva #clockAnalysis para el
   gating de escalas) se comporta como bloque para apilar la casilla y su nota. */
.checks > .clock-analysis { display: block; }

/* Arcos complementarios: los selectores de grado/comparación aparecen (revelado progresivo)
   debajo del checkbox, indentados, SOLO cuando los arcos están activos (app.js togglea [hidden]). */
.bp-selectors { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 2px 22px; padding-left: 8px; border-left: 2px solid #e5e7eb; }
.bp-selectors[hidden] { display: none; }
.bp-selectors select { padding: 2px 6px; border: 1px solid #b9d8bd; border-radius: 6px; font-size: 12.5px; }
.bp-selectors select:disabled { opacity: 0.5; }

/* Opciones avanzadas: desplegables colapsados (details/summary), para no dominar el panel. */
.advanced-options .adv-block { border-top: 1px solid #ececec; padding-top: 4px; }
.advanced-options summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #374151; padding: 2px 0; }
.advanced-options summary::-webkit-details-marker { display: none; }
.advanced-options summary::before { content: "▸"; color: #9ca3af; font-size: 11px; }
.advanced-options details[open] > summary::before { content: "▾"; }
.advanced-options details > label { margin-top: 6px; }

/* Zona principal: apilada en vertical (visualizador arriba, informe debajo). */
.main {
  display: block;
  padding: 10px 16px 28px;
}

/* Visualizador a ANCHO COMPLETO y bien alto (responsive a la altura de pantalla). */
.canvas-wrap {
  position: relative;  /* ancla el canvas overlay del playhead */
  width: 100%;
  max-width: none;
  height: 90vh;        /* piano roll lo más grande posible (limitado por el alto) */
  min-height: 440px;
  overflow: hidden;    /* el canvas se ajusta al contenedor, sin scroll interno */
}
/* Capa del playhead animado (PASO 4B.1): encima de la grilla, transparente y sin
   capturar el mouse (los clicks/hover siguen yendo a #grid). */
#gridOverlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  border-radius: 10px;
}
#grid {
  display: block;
  width: 100%;
  height: 100%;
  background: #F5F3EF;
  border: 1px solid #E4DFD6;
  border-radius: 10px;
  cursor: pointer;   /* click = escuchar acorde · doble click = pantalla completa */
}
/* Borde del canvas según el estilo visual (PASO 4A). El interior lo pinta el canvas;
   esto solo ajusta el marco para que combine con cada tema. */
#grid[data-visual-style="classic"]   { border-color: #E4DFD6; background: #F5F3EF; }
#grid[data-visual-style="neon"]      { border-color: #1b2740; background: #0b0f1a; }
#grid[data-visual-style="blueprint"] { border-color: #2a557d; background: #0f2a44; }
#grid[data-visual-style="ink"]       { border-color: #d3c8ad; background: #f4efe3; }
#grid[data-visual-style="glass"]     { border-color: #d3dbe3; background: #eef2f6; }

/* Al entrar en pantalla completa, el contenedor ocupa TODA la pantalla con fondo
   blanco y el canvas sin borde ni margen. Hay que forzar 100% de alto porque el
   78vh normal solo llenaría parte de la pantalla. */
.canvas-wrap:fullscreen { width: 100%; height: 100%; background: #fff; padding: 0; }
.canvas-wrap:fullscreen #grid { border: none; border-radius: 0; cursor: zoom-out; }

/* Informe DEBAJO del visualizador, a ancho de lectura cómodo y centrado.
   Sin scroll interno: hace scroll la página completa. */
.report {
  width: 100%;
  max-width: 1100px;
  margin: 22px auto 0;
  overflow: visible;
  font-size: 13px;
}
.report h2 { margin: 0 0 10px; font-size: 16px; }
.report .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.report h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #374151; }
/* Anotación de la retrogradación dentro del título de su progresión original (asc/desc).
   No-mayúscula, itálica y atenuada para leerse como nota secundaria del encabezado. */
.report h3 .retro-note { text-transform: none; letter-spacing: normal; font-weight: 400; font-style: italic; font-size: 10px; color: #9ca3af; }
.report p { margin: 6px 0; line-height: 1.45; }
.report ul.kv { list-style: none; padding: 0; margin: 0; }
.report ul.kv li { padding: 2px 0; }
.report ol { margin: 6px 0 0; padding-left: 22px; }
.report ol.prog li { margin-bottom: 3px; }
.report .notes { font-family: ui-monospace, "Consolas", monospace; font-weight: 600; }
.report .dur { margin: 0 0 6px; }
.report .hint { color: #888; }
.report .err { color: #b91c1c; }

/* Análisis funcional. */
.report .caption { font-size: 12px; color: #6b7280; margin: -4px 0 12px; line-height: 1.5; }
.report .seq { font-family: ui-monospace, "Consolas", monospace; line-height: 1.7; margin: 0 0 8px;
               padding: 8px; background: #f3f4f6; border-radius: 6px; word-spacing: 2px; }
.report .fn { font-weight: 700; color: #1f2937; }
.report .fn.nt { font-weight: 400; color: #9ca3af; font-style: italic; }

/* ============ Panel de análisis detallado (PASO 2G) ============ */
/* Debajo del informe, a ancho de lectura cómodo. Colapsable (<details>). */
.analysis { width: 100%; max-width: 1100px; margin: 0 auto 32px; padding: 0 16px; }
.analysis > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 15px; font-weight: 700; color: #374151;
  padding: 10px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
}
.analysis > summary::-webkit-details-marker { display: none; } /* ocultar triángulo nativo */
.analysis > summary::before { content: "▸"; color: #9ca3af; font-size: 12px; }
.analysis[open] > summary::before { content: "▾"; }
.analysis > summary:hover { background: #f9fafb; }
.analysis-body { margin-top: 12px; }

.an-section { margin-bottom: 16px; }
.an-section h4 {
  margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #374151;
}
.an-count { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9ca3af; }
/* Anotación de la retrogradación dentro del título de su serie original (asc/desc). */
.an-section h4 .retro-note { font-weight: 400; text-transform: none; letter-spacing: 0; font-style: italic; color: #9ca3af; font-size: 0.92em; }

/* Scroll interno si la tabla es larga o angosta; encabezado fijo. */
.an-scroll { overflow: auto; max-height: 440px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.an-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.an-table th, .an-table td { padding: 5px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid #eef0f2; }
.an-table thead th {
  position: sticky; top: 0; background: #f3f4f6; color: #374151; z-index: 1;
  font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .02em;
}
.an-table tbody tr:last-child td { border-bottom: none; }
.an-table tbody tr:hover { background: #f9fafb; }
.an-label { font-family: ui-monospace, "Consolas", monospace; font-weight: 700; color: #1f2937; }
.an-notes { font-family: ui-monospace, "Consolas", monospace; }

/* ------------------------------------------------------------------
   Bajo cifrado apilado (PASO 3C · render). La cifra interna "6/3" se
   muestra como bloque vertical (6 sobre 3), estilo bajo cifrado tradicional.
   Cada elemento es texto (admite "♯6", "♭7"…). El "/" nunca se muestra.
   ------------------------------------------------------------------ */
.fb-combo { display: inline-flex; align-items: center; gap: 0.35em; vertical-align: middle; }
.fb-analysis { }
.fb-stack {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 0.82; vertical-align: middle; font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}
.fb-stack > span { display: block; position: relative; }
/* Cifra tachada (5ª disminuida, PASO 3D.1): barra DIAGONAL sobre el número.
   No usa el "/" como símbolo; se dibuja con un pseudo-elemento rotado que
   hereda el color del texto (currentColor), así funciona en cualquier tema. */
.fb-stack > span.fb-strike::after {
  content: ""; position: absolute; left: -20%; right: -20%; top: 48%;
  border-top: 0.12em solid currentColor; transform: rotate(-20deg);
  pointer-events: none;
}
/* PASO C.1: en la tarjeta de Performance el tachado debe ser tan marcado como el del
   canvas de la grilla (misma 5ª disminuida). Fuente grande -> barra un poco más gruesa. */
#perfCard .fb-stack > span.fb-strike::after { border-top-width: 0.13em; }
/* Número romano con cifra de inversión (PASO D.3): raíz normal + cifra a la derecha.
   1 cifra -> superíndice (arriba); 2 cifras -> stack vertical compacto (arriba/abajo).
   El contenedor alinea las cajas por su TOPE, así el dígito único y el superior del stack
   quedan a la misma altura; el inferior del stack cae cerca de la línea base del romano. */
.roman { display: inline-flex; align-items: flex-start; }
.roman-root { line-height: 1; }
.roman-figures {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  font-size: 0.6em; line-height: 1.02; margin-left: 0.08em;
  font-variant-numeric: tabular-nums;
}
.roman-figures > span { display: block; }
.roman-figures.roman-sup { justify-content: flex-start; } /* 1 cifra: queda arriba (superíndice) */
.roman-figures.roman-stack { }                            /* 2 cifras: columna compacta */

/* En la progresión del reporte, mantener la línea base ordenada. */
.report .seq .fb-stack { font-size: 0.85em; }
.an-val { color: #6b7280; }
.an-table tr.an-pass td { color: #9ca3af; font-style: italic; } /* sonoridad de paso: atenuada */
.an-err { color: #b91c1c; font-size: 13px; margin: 4px 0; }

/* Fila activa (PASO 2H): resaltado discreto, en el mismo tono cálido que el
   playhead de la grilla, para que ambos apunten al mismo acorde. */
.an-table tbody tr.analysis-row-active td { background: rgba(120, 110, 95, 0.16); }
.an-table tbody tr.analysis-row-active td:first-child { box-shadow: inset 3px 0 0 #8a7d63; }
.an-table tbody tr.analysis-row-active:hover td { background: rgba(120, 110, 95, 0.22); }

/* ============ Vista performance (PASO 4C) ============ */
/* Modo "focus": oculta todo salvo la visualización + una barra mínima. La grilla
   ocupa el viewport completo; el overlay (absoluto dentro de .canvas-wrap) la sigue.
   Se combina con la Fullscreen API cuando está disponible. */
#perfBar { display: none; }
body.performance > header,
body.performance > .controls,
body.performance > .legend,
body.performance > .playback,
body.performance > #status,
body.performance .report,
body.performance #analysisPanel { display: none !important; }

body.performance { overflow: hidden; }
body.performance .main { display: block; padding: 0; margin: 0; }
body.performance .canvas-wrap {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  height: 100dvh; /* PASO 4B: usa el alto visible real en mobile (fallback a 100vh arriba) */
  min-height: 0; z-index: 50; overflow: hidden;
}
body.performance #grid,
body.performance #gridOverlay { border: none; border-radius: 0; }

body.performance #perfBar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; /* PASO 4B: en pantallas angostas baja a 2+ filas; nunca deja controles fuera */
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 9px 16px; font-size: 13px;
  color: #f3f4f6; background: rgba(17, 20, 27, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .35s ease, transform .35s ease; /* auto-ocultar suave (PASO 4C.1) */
}
/* Auto-ocultar la barra tras inactividad del mouse en la vista performance. */
body.performance.perf-ui-hidden #perfBar {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
#perfBar .perf-info { font-weight: 600; letter-spacing: .01em; opacity: .95; }
#perfBar .perf-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#perfBar select {
  padding: 4px 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px;
  background: rgba(255,255,255,.10); color: #f3f4f6; font-size: 12px;
}
#perfBar select option { color: #111; } /* legibilidad del desplegable */
#perfBar button {
  padding: 5px 12px; border: none; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,.16); color: #f3f4f6; font-size: 13px;
}
#perfBar button:hover { background: rgba(255,255,255,.28); }
#perfBar .pb-play { background: #2f6f4f; }
#perfBar .pb-play:hover { background: #285f43; }

/* Tarjeta del evento activo (PASO 4F): solo en performance + con clase .on (playback).
   Panel translúcido legible sobre cualquier estilo; leve realce en Neon. */
#perfCard { display: none; }
body.performance #perfCard.on {
  display: block;
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  min-width: 150px; max-width: 46vw;
  padding: 10px 14px; border-radius: 10px;
  color: #f3f4f6; background: rgba(17, 20, 27, 0.58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 13px; line-height: 1.35;
  transition: opacity .25s ease;
}
#perfCard .pc-label { font-family: ui-monospace, "Consolas", monospace; font-weight: 700; font-size: 19px; letter-spacing: .02em; }
#perfCard .pc-name { margin-top: 2px; opacity: .95; }
#perfCard .pc-notes { margin-top: 4px; font-family: ui-monospace, "Consolas", monospace; opacity: .92; }
#perfCard .pc-validation { margin-top: 3px; font-size: 12px; opacity: .72; }
/* Realce sutil por estilo (opcional): Neon con glow frío. */
body[data-perf-style="neon"].performance #perfCard.on {
  border: 1px solid rgba(90, 210, 255, .3); box-shadow: 0 0 14px rgba(80, 200, 255, .22);
}

/* ----- PASO 4B: mobile / touch (smartphones portrait ≤600px). Solo responsive/CSS. ----- */
@media (max-width: 600px) {
  /* Áreas táctiles cómodas (~40px) sin romper el layout que ya envuelve (flex-wrap). */
  button, select { min-height: 40px; }
  /* Vista Performance: la barra se centra y usa filas completas; nada queda off-screen. */
  body.performance #perfBar { justify-content: center; row-gap: 8px; }
  #perfBar .perf-info { width: 100%; text-align: center; font-size: 12px; opacity: .9; }
  #perfBar .perf-controls { width: 100%; justify-content: center; }
  #perfBar select, #perfBar button { min-height: 40px; }
  /* Play y Salir siempre visibles y tocables (no se encogen). */
  #perfBar #btnPerfPlay, #perfBar #btnPerfExit { flex: 0 0 auto; }
}
/* Muy angosto (≈320px): la línea de info no es esencial; se oculta para dar aire a Play/Salir. */
@media (max-width: 380px) {
  #perfBar .perf-info { display: none; }
}

/* Pantallas chicas: mismo layout vertical, visualizador un poco menos alto. */
@media (max-width: 900px) {
  .canvas-wrap { height: 72vh; }
}

/* PASO F: dashboard de controles -> una sola columna (cards apiladas) en pantallas medianas/chicas. */
@media (max-width: 820px) {
  .controls-dashboard { grid-template-columns: 1fr; }
  .action-bar .export-bar { margin-left: 0; border-left: none; padding-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  /* Inputs y selects a ancho completo dentro de las cards; botones en wrap. */
  .card-grid, .card-grid--sub { grid-template-columns: 1fr; }
  .action-bar #btnGenerate { flex: 1 1 100%; }   /* Generar destacado, ancho completo */
  .export-bar { width: 100%; }
  .export-bar button { flex: 1 1 auto; }
}

/* Tooltip flotante. */
#tooltip {
  position: fixed;
  display: none;
  pointer-events: none;
  background: rgba(17, 24, 39, .95);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  z-index: 10;
  white-space: nowrap;
}

/* ============ Ayuda / onboarding (PASO B) ============ */
/* Header en fila: título a la izquierda, botón de ayuda a la derecha. */
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header-text { min-width: 0; }
/* Botones del header agrupados a la derecha (Explorador de Secuencias + Guía). */
.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#btnHelp, #btnExplorer {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
  padding: 6px 14px; font-size: 13px;
}
#btnHelp:hover, #btnExplorer:hover { background: rgba(255, 255, 255, .26); }
/* El acceso al explorador es un <a> con aspecto de botón (no toca app.js). */
#btnExplorer {
  display: inline-flex; align-items: center;
  border-radius: 6px; cursor: pointer; text-decoration: none;
  font-weight: 600; white-space: nowrap;
}

/* Créditos al pie: discretos, separados del contenido, centrados y legibles. */
.site-credits {
  margin: 44px auto 0;
  max-width: 760px;
  padding: 22px 20px 40px;
  border-top: 1px solid #e3ddd2;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.site-credits h2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4b5563;
}
.site-credits p { margin: 6px 0; }
.site-credits strong { color: #374151; }
body.performance > .site-credits { display: none; } /* la vista performance oculta el resto */

/* Modal de ayuda: overlay fijo centrado, cerrable, con scroll interno si hace falta. */
.help-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.help-modal[hidden] { display: none; } /* fuente de verdad = atributo hidden */
.help-backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 20, 27, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.help-dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px;
  max-height: 86vh; max-height: 86dvh;
  display: flex; flex-direction: column;
  background: #fff; color: #2b2924;
  border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.help-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid #e5e7eb; background: #f9fafb;
}
.help-head h2 { margin: 0; font-size: 16px; }
.help-close {
  flex: 0 0 auto;
  background: transparent; border: none; color: #6b7280;
  font-size: 18px; line-height: 1; cursor: pointer;
  padding: 6px 10px; border-radius: 6px;
}
.help-close:hover { background: #e5e7eb; color: #111; }
.help-body { padding: 6px 18px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.help-body section { margin-top: 14px; }
.help-body h3 { margin: 0 0 4px; font-size: 13px; color: #1f2937; }
.help-body p { margin: 0; font-size: 13px; line-height: 1.5; color: #374151; }
/* Sección "Relojes del ciclo": párrafos + lista de los cuatro relojes con su swatch. */
.help-rich p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #374151; }
.help-rich p:last-child { margin-bottom: 0; }
.help-clocks { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.help-clocks li { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: #374151; }
.help-clocks li .swatch, .help-clocks li .swatch-ring { flex: none; margin-top: 2px; }

/* Novedades: explicaciones de lo nuevo con selector General / Técnica. */
.help-new { border: 1px solid #d6e6da; background: #f4f9f5; border-radius: 10px; padding: 10px 14px 12px; }
.help-new-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.help-new-head h3 { margin: 0; }
.help-new-hint { margin: 4px 0 2px !important; font-size: 11.5px !important; color: #6b7280 !important; font-style: italic; }
.help-new section { margin-top: 12px; }
.help-new h4 { margin: 0 0 4px; font-size: 13px; color: #1f2937; }
.help-level { display: inline-flex; border: 1px solid #b9d8bd; border-radius: 8px; overflow: hidden; background: #fff; }
.help-level-btn { border: 0; background: transparent; padding: 4px 12px; font-size: 12.5px; color: #2f6f4f; cursor: pointer; }
.help-level-btn + .help-level-btn { border-left: 1px solid #d6e6da; }
.help-level-btn:hover { background: #eaf4ec; }
.help-level-btn.is-on { background: #2f6f4f; color: #fff; font-weight: 600; }
/* Un nivel visible por vez: por defecto General; con .is-tech se muestra la Técnica. */
.help-lvl-tech { display: none; }
.help-new.is-tech .help-lvl-general { display: none; }
.help-new.is-tech .help-lvl-tech { display: block; }

/* Mobile: el modal usa casi todo el ancho; el contenido scrollea internamente. */
@media (max-width: 600px) {
  .help-modal { padding: 10px; }
  .help-dialog { max-height: 90vh; max-height: 90dvh; }
}