:root {
  --bg: #03060c;
  --bg-soft: #070d1a;
  --panel: rgba(9, 16, 28, 0.72);
  --panel-stroke: rgba(140, 180, 235, 0.12);
  --text-strong: #f0f6ff;
  --text: #a8c4e6;
  --text-soft: #8fa8cc;

  /* Canales: cian = medición (CH1), ámbar = referencia (CH2). Nunca usar para estados. */
  --measurement: #3fc8e6;
  --reference: #e09452;

  --grid: rgba(160, 200, 255, 0.05);
  --grid-strong: rgba(160, 200, 255, 0.12);

  /* Palette semántica — usar SOLO para estados (no para canales ni acentos decorativos). */
  --semantic-good: #a9ffd1;   /* todo OK, alineación válida, coherencia buena */
  --semantic-warn: #ffd38e;   /* atención, parámetros en zona de revisión */
  --semantic-bad:  #ffb59c;   /* error, delay inválido, coherencia crítica */
  --semantic-info: #8de7ff;   /* información neutra, notas de contexto */
  --success: var(--semantic-good); /* alias legacy */

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 14px 42px rgba(0, 0, 0, 0.28);
  --font-ui: "Bahnschrift", "Segoe UI Variable Display", sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(4, 7, 14, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  border: 2px solid rgba(4, 7, 14, 0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

body {
  font-family: var(--font-ui);
  color: var(--text-strong);
  background:
    radial-gradient(circle at 12% 12%, rgba(40, 140, 230, 0.07), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(80, 190, 240, 0.05), transparent 28%),
    radial-gradient(circle at 50% 82%, rgba(20, 80, 180, 0.07), transparent 30%),
    linear-gradient(180deg, #020409 0%, #040915 40%, #050d22 100%);
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  padding: 20px;
  padding-left: 42px; /* 22px cf-tab always visible */
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition:
    padding-left 0.25s cubic-bezier(0.4,0,0.2,1),
    padding-top 0.25s cubic-bezier(0.4,0,0.2,1),
    gap 0.25s cubic-bezier(0.4,0,0.2,1);
}
.app-shell.cf-open {
  padding-left: 152px; /* 22px tab + 130px panel */
}

.header-console {
  position: relative;
  z-index: 500;
  min-height: 0;
  flex-shrink: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
  transform: translateY(0);
  transition:
    grid-template-rows 0.25s cubic-bezier(0.4,0,0.2,1),
    opacity 0.18s ease,
    transform 0.25s cubic-bezier(0.4,0,0.2,1);
}

.header-console > .topbar-row {
  min-height: 0;
}

.app-shell.header-console-collapsed {
  padding-top: 6px;
  gap: 0;
}

.app-shell.header-console-collapsed .header-console {
  grid-template-rows: minmax(0, 0fr);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.app-shell.header-console-collapsed .header-console > .topbar-row {
  overflow: hidden;
}

@keyframes ambientDrift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.05); }
  66% { transform: translate(-30px, 40px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

.ambient {
  position: fixed;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.45;
  animation: ambientDrift 20s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* Pausa la animación cuando la pestaña no es visible (toggled vía JS en
   visibilitychange). El blur(80px) animado infinito de tres elementos
   .ambient sigue costando GPU aunque la pestaña esté oculta — pausar las
   keyframes elimina ese repaint continuo. */
.app-shell.animations-paused .ambient {
  animation-play-state: paused;
}

.ambient-a {
  width: 340px;
  height: 340px;
  left: -90px;
  top: 18%;
  background: rgba(40, 140, 230, 0.10);
}

.ambient-b {
  width: 280px;
  height: 280px;
  right: 8%;
  top: 8%;
  background: rgba(80, 190, 240, 0.08);
}

.ambient-c {
  width: 420px;
  height: 420px;
  left: 42%;
  bottom: -160px;
  background: rgba(20, 80, 180, 0.08);
}

.noise-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 100%);
}

.glass-panel {
  background: linear-gradient(135deg, rgba(16, 24, 42, 0.75), rgba(6, 10, 20, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(130%);
}

.topbar {
  position: relative;
  z-index: 200;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  transition: padding 0.25s ease,
    opacity 0.2s ease;
}

/* Status updates remain available to the application logic but do not take
   layout space in the fixed two-level header. */
.topbar .status-message {
  display: none !important;
}

/* Separadores: cuando hay wrap, evitar que queden "colgando" al final de
   una fila o al principio de la siguiente. */
.topbar-sep { align-self: stretch; height: auto; min-height: 18px; }

.brand-name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text-strong);
  flex-shrink: 0;
  margin: 0;
}

.topbar-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}

.device-select-compact {
  max-width: 160px;
  min-width: 80px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.85rem;
}

.channel-router {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.channel-router .ch-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--text-soft);
}
.channel-router .ch-label.live { color: #6cf; }
.channel-router .ch-label.reference { color: #fc6; }
.channel-router .ch-select {
  min-height: 26px;
  min-width: 56px;
  padding: 0 4px;
  font-size: 0.78rem;
  border-radius: 6px;
}
.channel-router .ch-select:disabled { opacity: 0.45; }
.channel-router .ch-swap {
  min-height: 26px;
  min-width: 26px;
  padding: 0 6px;
  font-size: 0.95rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.channel-router .ch-swap:not(:disabled):hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.channel-router .ch-swap:disabled { opacity: 0.35; cursor: not-allowed; }

.generator-panel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.generator-panel .gen-toggle[aria-pressed="true"] {
  background: #d23;
  color: #fff;
  border-color: #d23;
}

.generator-panel .gen-level {
  width: 90px;
  accent-color: #d23;
}
.generator-panel .gen-level-readout {
  font-size: 0.72rem;
  color: var(--text-soft);
  min-width: 46px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.generator-panel .gen-output {
  min-height: 26px;
  max-width: 140px;
  padding: 0 6px;
  font-size: 0.78rem;
  border-radius: 6px;
}
.generator-panel .gen-output-channel {
  min-height: 26px;
  min-width: 64px;
  padding: 0 6px;
  font-size: 0.78rem;
  border-radius: 6px;
}

.section-eyebrow,
.graph-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.graph-title h2,
.rail-section h3 {
  margin: 0;
}

.input-label {
  color: var(--text-soft);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-message {
  margin: 0;
  min-height: 18px;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.35;
}

.status-message.error {
  color: var(--semantic-bad);
}

.status-message.warn {
  color: var(--semantic-warn);
}

.status-message.success {
  color: var(--semantic-good);
}

.empty-state-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.empty-state-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.empty-state-inner {
  max-width: 460px;
  padding: 28px 36px;
  text-align: center;
  background: rgba(6, 10, 20, 0.82);
  border: 1px solid rgba(140, 180, 235, 0.14);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
}
.empty-state-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.empty-state-hint {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
  margin-bottom: 16px;
}
.empty-state-hint strong {
  color: var(--measurement);
  font-weight: 600;
}
.empty-state-tip {
  color: var(--text-soft);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.empty-state-tip kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin: 0 2px;
  border: 1px solid rgba(160, 200, 255, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
}

.work-mode .ambient {
  display: none;
}
.work-mode .noise-layer {
  display: none;
}
.work-mode .glass-panel {
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(5, 10, 22, 0.92), rgba(3, 7, 16, 0.86));
}
.work-mode {
  /* contraste extra para lecturas rápidas bajo ruido visual mínimo */
}

.chip-popover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip-popover > summary {
  list-style: none;
  cursor: pointer;
}
.chip-popover > summary::-webkit-details-marker {
  display: none;
}
.chip-popover:not([open]) > *:not(summary) {
  display: none !important;
}
.chip-popover[open] > summary {
  background: rgba(78, 196, 224, 0.10);
  border-color: rgba(78, 196, 224, 0.20);
  color: var(--text-strong);
}

.scalogram-advanced[open] {
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
  border-radius: 8px;
  background: rgba(6, 10, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.scalogram-advanced-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.scalogram-advanced-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}
.scalogram-advanced-group-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding-right: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  margin-right: 2px;
}

.graph-scalogram .graph-meta label[for="cwtAudioFileInput"] { order: 1; }
.graph-scalogram #cwtChannelChip { order: 2; }
.graph-scalogram #cwtRangeChip { order: 3; }
.graph-scalogram #cwtPerfChip { order: 4; }
.graph-scalogram .scalogram-advanced { order: 5; }

.graph-scalogram .cwt-focus-popover {
  position: relative;
  z-index: 8;
}
.graph-scalogram .cwt-focus-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 278px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(135, 192, 220, 0.16);
  border-radius: 9px;
  background: rgba(6, 11, 19, 0.97);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
}
.graph-scalogram .cwt-focus-frequency {
  min-width: 200px;
  display: grid;
  grid-template-columns: auto minmax(92px, 1fr) 48px;
  align-items: center;
  gap: 7px;
  color: rgba(196, 215, 232, 0.64);
  font: 600 10px/1 "Bahnschrift", system-ui, sans-serif;
}
.graph-scalogram .cwt-focus-frequency input {
  width: 100%;
  accent-color: var(--measurement);
}
.graph-scalogram .cwt-focus-frequency output {
  color: rgba(225, 239, 250, 0.88);
  font-family: var(--font-mono);
  text-align: right;
}
.graph-scalogram #cwtFocusSourceChip {
  color: var(--measurement);
  border-color: rgba(78, 196, 224, 0.34);
  background: rgba(78, 196, 224, 0.09);
}
.graph-scalogram #cwtFocusSourceChip.is-top {
  color: var(--reference);
  border-color: rgba(224, 148, 82, 0.34);
  background: rgba(224, 148, 82, 0.09);
}

.graph-scalogram #cwtFocusSourceChip.is-expected {
  color: #f6d35a;
  border-color: rgba(246, 211, 90, 0.42);
  background: rgba(246, 211, 90, 0.10);
}

.graph-scalogram #cwtFocusSourceChip.is-compare {
  color: #54e0a2;
  border-color: rgba(84, 224, 162, 0.44);
  background: linear-gradient(90deg, rgba(246, 211, 90, 0.08), rgba(84, 224, 162, 0.12));
}
.graph-scalogram #cwtFocusWindowChip {
  color: rgba(196, 218, 235, 0.76);
  border-color: rgba(150, 190, 220, 0.18);
  background: rgba(150, 190, 220, 0.045);
}
.graph-scalogram #cwtFocusWindowChip.is-field {
  color: rgba(190, 166, 232, 0.9);
  border-color: rgba(174, 140, 230, 0.3);
  background: rgba(150, 112, 215, 0.09);
}
.graph-scalogram .cwt-focus-set {
  color: rgba(190, 210, 228, 0.58);
}

.graph-scalogram .cwt-alignment-popover {
  position: relative;
  z-index: 8;
}
.graph-scalogram .cwt-alignment-summary {
  color: rgba(198, 216, 230, 0.68);
  border-color: rgba(150, 190, 220, 0.18);
  background: rgba(150, 190, 220, 0.045);
}
.graph-scalogram .cwt-alignment-summary[data-state="ready"] {
  color: rgba(112, 224, 178, 0.95);
  border-color: rgba(72, 210, 150, 0.32);
  background: rgba(72, 210, 150, 0.08);
}
.graph-scalogram .cwt-alignment-summary[data-state="review"] {
  color: rgba(244, 196, 116, 0.94);
  border-color: rgba(236, 174, 78, 0.3);
  background: rgba(236, 174, 78, 0.08);
}
.graph-scalogram .cwt-alignment-summary[data-verification="verified"] {
  color: rgba(112, 224, 178, 0.98);
  border-color: rgba(72, 210, 150, 0.4);
  background: rgba(72, 210, 150, 0.11);
}
.graph-scalogram .cwt-alignment-summary[data-verification="mismatch"] {
  color: rgba(255, 130, 130, 0.95);
  border-color: rgba(255, 105, 105, 0.34);
  background: rgba(255, 92, 92, 0.09);
}
.graph-scalogram .cwt-alignment-summary.is-preview {
  color: #f6d35a;
  border-color: rgba(246, 211, 90, 0.4);
  background: rgba(246, 211, 90, 0.1);
}
.graph-scalogram .cwt-alignment-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: min(340px, calc(100vw - 30px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(135, 192, 220, 0.16);
  border-radius: 9px;
  background: rgba(6, 11, 19, 0.97);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
}
.graph-scalogram .cwt-alignment-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.graph-scalogram .cwt-alignment-copy strong {
  color: rgba(226, 238, 248, 0.92);
  font: 650 11px/1.2 "Bahnschrift", system-ui, sans-serif;
}
.graph-scalogram .cwt-alignment-copy span {
  color: rgba(178, 202, 220, 0.68);
  font: 500 9px/1.35 var(--font-mono);
}
.graph-scalogram #cwtAlignmentPreviewButton:disabled {
  cursor: default;
  opacity: 0.42;
}
.graph-scalogram .cwt-sum-verification {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-top: 9px;
  border-top: 1px solid rgba(150, 190, 220, 0.12);
}
.graph-scalogram .cwt-sum-verification strong {
  color: rgba(198, 216, 230, 0.74);
  font: 650 10px/1.2 "Bahnschrift", system-ui, sans-serif;
}
.graph-scalogram .cwt-sum-verification span {
  color: rgba(166, 190, 208, 0.62);
  font: 500 9px/1.35 var(--font-mono);
}
.graph-scalogram .cwt-sum-verification[data-state="verified"] strong {
  color: rgba(112, 224, 178, 0.95);
}
.graph-scalogram .cwt-sum-verification[data-state="review"] strong {
  color: rgba(244, 196, 116, 0.94);
}
.graph-scalogram .cwt-sum-verification[data-state="mismatch"] strong {
  color: rgba(255, 130, 130, 0.95);
}
.graph-scalogram .cwt-sum-verification[data-state="expected"] strong {
  color: rgba(246, 211, 90, 0.96);
}
.graph-scalogram .cwt-prediction-key {
  color: rgba(210, 220, 226, 0.7);
}
.graph-scalogram .cwt-prediction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 3px;
}
.graph-scalogram .cwt-prediction-actions .meta-chip-button {
  min-height: 24px;
}
.graph-scalogram .cwt-prediction-actions .is-active {
  border-color: rgba(246, 211, 90, 0.5);
  color: rgba(255, 229, 132, 0.98);
  background: rgba(246, 211, 90, 0.09);
}
.graph-scalogram .cwt-prediction-actions .meta-chip-button:disabled {
  cursor: default;
  opacity: 0.42;
}
.graph-scalogram .cwt-prediction-more {
  position: relative;
}
.graph-scalogram .cwt-prediction-more > summary {
  min-width: 29px;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  letter-spacing: 1px;
}
.graph-scalogram .cwt-prediction-more > summary::-webkit-details-marker {
  display: none;
}
.graph-scalogram .cwt-prediction-more[open] > summary {
  border-color: rgba(147, 190, 218, 0.34);
  color: rgba(226, 238, 248, 0.92);
}
.graph-scalogram .cwt-prediction-more-menu {
  position: absolute;
  z-index: 4;
  right: 0;
  top: calc(100% + 5px);
  min-width: 116px;
  padding: 5px;
  border: 1px solid rgba(147, 190, 218, 0.2);
  border-radius: 9px;
  background: rgba(7, 13, 21, 0.98);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
}
.graph-scalogram .cwt-prediction-more-menu .meta-chip-button {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
}

.prediction-comparison-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(6, 11, 18, 0.62);
  color: rgba(204, 218, 228, 0.76);
  font: 600 9px/1 var(--font-mono);
}
.prediction-comparison-legend[hidden] { display: none; }
.prediction-comparison-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.prediction-comparison-legend > span[hidden] { display: none; }
.prediction-comparison-legend i {
  display: inline-block;
  width: 15px;
  height: 0;
  border-top: 2px solid currentColor;
}
.prediction-comparison-legend .is-predicted { color: #f6d35a; }
.prediction-comparison-legend .is-predicted i { border-top-style: dashed; }
.prediction-comparison-legend .is-measured { color: #54e0a2; }

.meta-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.10);
  margin: 0 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

.rail-advanced {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(160, 200, 255, 0.12);
}
.rail-advanced > summary {
  cursor: pointer;
  padding: 6px 2px 8px;
  color: var(--text-soft);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}
.rail-advanced > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  font-size: 0.72em;
  transition: transform 0.15s ease;
}
.rail-advanced[open] > summary::before {
  transform: rotate(90deg);
}
.rail-advanced > summary:hover {
  color: var(--text);
}
.rail-advanced > summary::-webkit-details-marker {
  display: none;
}

.meta-chip.meta-chip-button[data-has-options]::after {
  content: "▾";
  font-size: 0.72em;
  opacity: 0.6;
  margin-left: 2px;
  transition: opacity 0.15s ease;
}
.meta-chip.meta-chip-button[data-has-options]:hover::after {
  opacity: 0.95;
}

#syncPill, #autoIdlePill { display: none !important; }

.status-pill,
.legend-pill,
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.83rem;
  line-height: 1;
}
.meta-chip[hidden] { display: none; }

.global-smoothing-chip {
  min-width: 68px;
  justify-content: center;
  padding-inline: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
}

.global-smoothing-chip.is-mixed {
  color: #f2c879;
  border-color: rgba(242, 200, 121, 0.28);
  background: rgba(242, 200, 121, 0.08);
}

.status-pill {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

.status-pill.live {
  color: var(--measurement);
  border-color: rgba(78, 196, 224, 0.16);
  background: rgba(78, 196, 224, 0.07);
}

.status-pill.reference {
  color: var(--reference);
  border-color: rgba(224, 148, 82, 0.16);
  background: rgba(224, 148, 82, 0.07);
}

.status-pill.accent {
  color: var(--success);
  border-color: rgba(72, 184, 124, 0.16);
  background: rgba(72, 184, 124, 0.07);
}

.view-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  padding: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(12, 18, 32, 0.76), rgba(6, 10, 20, 0.64));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* separador de grupo */
.vs-sep {
  width: 1px; height: 18px; flex-shrink: 0;
  background: rgba(255,255,255,0.10);
  border-radius: 1px;
}

.view-preset-select {
  min-height: 24px;
  min-width: 84px;
  padding: 0 6px;
  font-size: 0.74rem;
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
}
.view-orientation-btn {
  min-height: 24px;
  min-width: 28px;
  padding: 0 6px;
  font-size: 0.85rem;
  border-radius: 5px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.2s;
}
.view-orientation-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.view-orientation-btn[data-orientation="cols"] {
  transform: rotate(90deg);
  color: #6cf;
  border-color: rgba(108,204,255,0.30);
}
.view-orientation-btn[data-orientation="rows"] {
  color: #fc6;
  border-color: rgba(255,204,102,0.30);
}

.view-reorder-btn {
  min-height: 24px;
  min-width: 28px;
  padding: 0 6px;
  font-size: 0.85rem;
  border-radius: 5px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-reorder-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.view-reorder-btn[aria-pressed="true"] {
  color: #9f9;
  background: rgba(110,230,140,0.10);
  border-color: rgba(110,230,140,0.40);
}

/* Flechas reorder: ocultas por default, visibles solo cuando el switcher
   está en modo reorder. Aparecen como pseudo-botones al lado de cada toggle. */
.panel-reorder-arrow {
  display: none;
  min-height: 22px;
  min-width: 18px;
  padding: 0 3px;
  font-size: 0.7rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
}
.panel-reorder-arrow:hover { color: #fff; background: rgba(255,255,255,0.10); }
.panel-reorder-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.view-switcher.reorder-mode .panel-reorder-arrow { display: inline-flex; align-items: center; justify-content: center; }
.view-switcher.reorder-mode .panel-toggle {
  /* En modo reorder, los toggles no togglean visibilidad: solo informan posición. */
  opacity: 0.85;
}

/* Override de orientación: column-first (paneles lado a lado). Solo aplica
   cuando el usuario eligió "cols" explícitamente. "auto" deja las reglas
   default (apilamiento vertical). */
.graph-stage[data-layout-orientation="cols"][data-active-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
.graph-stage[data-layout-orientation="cols"][data-active-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
.graph-stage[data-layout-orientation="cols"][data-active-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

/* fila topbar + view-switcher */
.topbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-row .topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  margin: 0;
}

.floating-view-switcher {
  grid-column: 3;
  grid-row: 2;
  flex-shrink: 0;
  display: flex;
}

/* modo compacto cuando el header está oculto */
.floating-view-switcher .pt-label {
  display: none;
}
.floating-view-switcher .panel-toggle::before {
  content: attr(data-short);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.floating-view-switcher .panel-toggle {
  min-height: 28px;
  padding: 0 9px;
}
.floating-view-switcher .vs-sep {
  height: 14px;
}

.panel-toggle {
  min-height: 58px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* WAV (scalograma CWT): sin botón en la barra de paneles. El nodo se mantiene
   en el DOM para que el estado siga sincronizando; solo se muestra/oculta con
   Shift+7 (atajo dedicado, casi un easter egg). */
.panel-toggle.scalogram { display: none !important; }

.panel-toggle:hover {
  transform: translateY(-2px) scale(1.02);
  background: rgba(255, 255, 255, 0.06);
}

.panel-toggle:disabled {
  opacity: 1;
  cursor: default;
}

.panel-toggle:disabled:hover {
  transform: none;
}

.panel-toggle.active {
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.panel-toggle.impulse.active {
  color: #ede9dd;
  background: rgba(232, 228, 215, 0.10);
  border-color: rgba(232, 228, 215, 0.16);
}

.panel-toggle.magnitude.active {
  color: var(--measurement);
  background: rgba(78, 196, 224, 0.10);
  border-color: rgba(78, 196, 224, 0.20);
}

.panel-toggle.phase.active {
  color: #c8b0e8;
  background: rgba(178, 148, 215, 0.12);
  border-color: rgba(178, 148, 215, 0.20);
}

.panel-toggle.groupdelay.active {
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.22);
}

.action-button.is-active {
  border-color: rgba(78, 196, 224, 0.24);
  background: rgba(78, 196, 224, 0.12);
  color: var(--text-strong);
}

.action-button.stopped {
  border-color: rgba(255, 160, 60, 0.35);
  background: rgba(255, 140, 40, 0.12);
  color: #ffb060;
}

.action-button.primary.is-active {
  background: linear-gradient(135deg, rgba(120, 210, 165, 0.94), rgba(72, 184, 124, 0.86));
  border-color: rgba(72, 184, 124, 0.30);
  color: #021009;
  box-shadow: 0 8px 24px rgba(72, 184, 124, 0.22);
}

.action-button,
.mini-button {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.action-button {
  min-height: 42px;
  padding: 0 18px;
  color: var(--text-strong);
}

.action-button.slim {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.85rem;
}

.action-button:hover,
.mini-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-button.primary {
  background: linear-gradient(135deg, rgba(60, 180, 230, 0.92), rgba(30, 120, 200, 0.80));
  color: #01060a;
  box-shadow: 0 8px 24px rgba(40, 140, 220, 0.20);
}

.action-button.ghost,
.mini-button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mini-button {
  min-height: 36px;
  padding: 0 14px;
  color: var(--text);
}

.mini-button.active {
  color: var(--text-strong);
  border-color: rgba(78, 196, 224, 0.24);
  background: rgba(78, 196, 224, 0.10);
}

.mini-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.mini-button:disabled:hover {
  transform: none;
}

.mobile-backdrop {
  display: none;
}

.workspace {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
  flex: 1;
  align-items: stretch;
  overflow: hidden;
}

.workspace-scrim {
  position: absolute;
  inset: 0;
  z-index: 7;
  border: 0;
  border-radius: calc(var(--radius-lg) + 4px);
  background: rgba(3, 6, 10, 0.25);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.graph-stage {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  gap: 12px;
  transition:
    grid-template-columns 0.28s ease,
    grid-template-rows 0.28s ease,
    filter 0.28s ease,
    transform 0.28s ease;
}

.graph-stage[data-active-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.graph-stage[data-active-count="2"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.graph-stage[data-active-count="3"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.graph-card {
  position: relative;
  min-height: 0;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 18, 30, 0.94), rgba(4, 7, 12, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 
    0 18px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.graph-card.is-hidden {
  display: none;
}

/* Resize split-pane: barra arrastrable en el borde inferior de cada panel.
   Franja invisible con una pill de affordance al hover. Hijo de .graph-card
   (que tiene overflow:hidden), así que se mantiene dentro del borde inferior. */
.row-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  z-index: 4;
  display: none;
  cursor: row-resize;
  touch-action: none;
}

.row-resize-handle.is-visible {
  display: block;
}

.row-resize-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 44px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.row-resize-handle:hover::after,
.graph-stage.is-resizing .row-resize-handle.is-visible::after {
  opacity: 1;
}

/* Sin animación de las filas mientras se arrastra (la transición de 0.28s en
   .graph-stage haría el drag laggy). Al soltar, el valor final ya está aplicado. */
.graph-stage.is-resizing {
  transition: none;
}

/* Cursor y sin selección de texto globales durante el drag, para que el cursor
   no parpadee si el puntero se adelanta al re-layout. */
body.is-row-resizing {
  cursor: row-resize;
  user-select: none;
}

.app-shell.options-open .workspace-scrim {
  opacity: 0.72;
  pointer-events: auto;
}

.app-shell.options-open .graph-stage {
  transform: scale(0.996);
}


.graph-impulse {
  --panel-glow: rgba(232, 228, 215, 0.10);
}

.graph-magnitude {
  --panel-glow: rgba(78, 196, 224, 0.09);
}

.graph-phase {
  --panel-glow: rgba(178, 148, 215, 0.09);
}

.graph-groupdelay {
  --panel-glow: rgba(96, 165, 250, 0.09);
}

.graph-scalogram {
  --panel-glow: rgba(120, 220, 160, 0.09);
}
.graph-spectrogram {
  --panel-glow: rgba(0, 180, 255, 0.09);
}
.graph-spectrogram .graph-shell canvas { cursor: crosshair; }

/* Combinaciones con groupdelay */
.graph-stage[data-active-panels="magnitude-groupdelay"],
.graph-stage[data-active-panels="phase-groupdelay"] {
  grid-template-rows: 1fr 1fr;
}

.graph-stage[data-active-panels="magnitude-phase-groupdelay"] {
  grid-template-rows: 1fr 1fr 1fr;
}

/* 5 paneles: 2 columnas */
.graph-stage[data-active-count="5"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

/* 4 paneles: grid 2×2 */
.graph-stage[data-active-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 6 paneles: 3 columnas × 2 filas */
.graph-stage[data-active-count="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 7 paneles: 3 columnas × 3 filas (la 9ª celda queda vacía o
   absorbida por span). La primera fila se mantiene compacta cuando
   está impulse para preservar su aspect ratio. */
.graph-stage[data-active-count="7"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

/* 4 paneles siempre en 2×2 (regla [data-active-count="4"] definida arriba).
   Sin overrides especiales para heatmaps. */


.graph-head {
  position: absolute;
  top: 12px;
  left: 50px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  pointer-events: none;
}

.graph-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.graph-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
}

.graph-title h2 {
  font-size: clamp(0.98rem, 1.4vw, 1.22rem);
  letter-spacing: 0.01em;
}

.legend-cluster,
.graph-meta,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.legend-cluster {
  justify-content: flex-start;
}

.graph-meta {
  justify-content: flex-start;
}

.graph-head .legend-pill,
.graph-head .meta-chip {
  min-height: 26px;
  padding: 0 10px;
  font-size: 0.72rem;
  background: rgba(6, 10, 16, 0.62);
  border-color: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
}

.legend-pill,
.meta-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.meta-chip-button {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.meta-chip-button:hover {
  transform: translateY(-1px);
}

.meta-chip-button.is-active {
  color: #e8f4fa;
  background: rgba(78, 196, 224, 0.12);
  border-color: rgba(78, 196, 224, 0.22);
  box-shadow: inset 0 0 0 1px rgba(78, 196, 224, 0.08);
}

.meta-chip-button.is-active.is-captured {
  color: #d8f4dc;
  background: rgba(125, 232, 180, 0.14);
  border-color: rgba(125, 232, 180, 0.32);
  box-shadow: inset 0 0 0 1px rgba(125, 232, 180, 0.12);
}

.meta-chip-button:not(.is-active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
}

.meta-chip-button.is-active.is-locked {
  color: #ffd0cc;
  background: rgba(232, 80, 60, 0.18);
  border-color: rgba(232, 80, 60, 0.55);
  box-shadow: 0 0 6px rgba(232, 80, 60, 0.25), inset 0 0 0 1px rgba(232, 80, 60, 0.15);
}

#impulseDeltaChip.is-active {
  color: #d4f5dc;
  background: rgba(125, 232, 180, 0.18);
  border-color: rgba(125, 232, 180, 0.55);
  box-shadow: 0 0 6px rgba(125, 232, 180, 0.25), inset 0 0 0 1px rgba(125, 232, 180, 0.15);
}

.legend-pill.measurement {
  color: var(--measurement);
}

.legend-pill.reference {
  color: var(--reference);
}

.graph-shell {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: 10px;
}

.graph-scalogram .graph-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.graph-scalogram.is-cwt-experimental-minimal .graph-shell {
  gap: 6px;
  padding-top: 6px;
}

.graph-scalogram.is-cwt-experimental-minimal .scalogram-status-line,
.graph-scalogram.is-cwt-experimental-minimal .graph-caption {
  text-align: center;
  max-width: min(520px, 100%);
  margin-inline: auto;
}

.graph-scalogram.is-cwt-experimental-minimal .scalogram-status-line {
  display: none;
}

.graph-scalogram.is-cwt-experimental-minimal .graph-caption {
  font-size: 0.66rem;
  color: rgba(174, 192, 212, 0.42);
}

.graph-scalogram.is-cwt-experimental-minimal .scalogram-energy-stage {
  order: 1;
}

.graph-scalogram.is-cwt-experimental-minimal .scalogram-readout,
.graph-scalogram.is-cwt-experimental-minimal .scalogram-canvas-overlay,
.graph-scalogram.is-cwt-experimental-minimal .scalogram-advanced {
  display: none !important;
}

.graph-scalogram .cwt-focus-set[data-state="ready"] {
  color: rgba(150, 225, 190, 0.78);
  border-color: rgba(100, 210, 160, 0.18);
}

.graph-scalogram .cwt-focus-set[data-state="calculating"] {
  color: rgba(245, 210, 145, 0.78);
}

.graph-scalogram .cwt-focus-set[data-quality="good"] {
  color: rgba(150, 225, 190, 0.82);
  border-color: rgba(100, 210, 160, 0.22);
}

.graph-scalogram .cwt-focus-set[data-quality="review"] {
  color: rgba(245, 210, 145, 0.84);
  border-color: rgba(230, 180, 90, 0.22);
}

.graph-scalogram .cwt-focus-set[data-quality="low"] {
  color: rgba(225, 154, 164, 0.82);
  border-color: rgba(220, 105, 125, 0.22);
}

.graph-scalogram.is-cwt-experimental-minimal .graph-caption {
  order: 2;
}

.scalogram-status-line {
  order: 0;
  flex: 0 0 auto;
  color: rgba(206, 222, 238, 0.72);
  font: 600 11px/1.2 "Bahnschrift", system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.graph-scalogram .scalogram-waveform {
  order: 1;
  flex: 0 0 52px;
  height: 52px;
  min-height: 44px;
  border-radius: 8px;
  cursor: crosshair;
}

.scalogram-energy-stage {
  order: 2;
  position: relative;
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
}

.cwt-segmented {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  gap: 1px;
}
.cwt-segmented-btn {
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.cwt-segmented-btn:hover {
  color: rgba(255, 255, 255, 0.92);
}
.cwt-segmented-btn.is-active {
  background: rgba(78, 196, 224, 0.18);
  color: rgba(255, 255, 255, 1);
  box-shadow: inset 0 0 0 1px rgba(78, 196, 224, 0.30);
}

.scalogram-canvas-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(6, 10, 16, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 4;
  pointer-events: auto;
  max-width: calc(100% - 220px);
}
.scalogram-canvas-overlay .meta-chip {
  font-size: 11px;
  padding: 3px 8px;
}

.graph-scalogram #scalogramCanvas {
  flex: 1 1 auto;
  height: auto;
  min-height: 220px;
  border-radius: 8px;
}

.scalogram-readout {
  position: absolute;
  right: 10px;
  top: 10px;
  width: min(300px, calc(100% - 20px));
  max-height: calc(100% - 20px);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(7, 10, 16, 0.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: border-color 120ms ease, background 120ms ease;
  z-index: 2;
}

.scalogram-readout.is-locked {
  border-color: rgba(180, 245, 205, 0.3);
  background: rgba(12, 22, 18, 0.78);
}

.scalogram-readout[data-snap="ridge"] {
  border-color: rgba(180, 245, 205, 0.22);
}

.scalogram-readout[data-snap="attention"] {
  border-color: rgba(255, 200, 90, 0.28);
}

.scalogram-readout[data-state="excitation"] {
  border-color: rgba(255, 150, 70, 0.34);
}

.scalogram-readout[data-state="storagelf"] {
  border-color: rgba(255, 200, 90, 0.36);
}

.scalogram-readout[data-state="resonance"],
.scalogram-readout[data-state="propagation"] {
  border-color: rgba(90, 220, 190, 0.30);
}

.scalogram-readout[data-state="conflict"] {
  border-color: rgba(174, 124, 255, 0.38);
}

.scalogram-readout[data-state="alignment"] {
  border-color: rgba(72, 210, 150, 0.38);
}

.scalogram-readout[data-state="partial"],
.scalogram-readout[data-state="inconclusive"] {
  border-color: rgba(230, 178, 72, 0.34);
}

.scalogram-readout[data-state="release"] {
  border-color: rgba(130, 165, 210, 0.26);
}

.scalogram-readout > div:not(.scalogram-readout-mini) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.scalogram-readout .scalogram-readout-wide {
  grid-column: span 3;
}

.scalogram-readout span {
  color: rgba(170, 188, 208, 0.68);
  font-size: 0.68rem;
}

.scalogram-readout strong {
  color: rgba(226, 238, 246, 0.94);
  font: 700 0.76rem/1 "Bahnschrift", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scalogram-readout-mini {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 2px;
}

.probe-mini-canvas {
  width: 100%;
  height: 52px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: block;
}

.scalogram-readout:not(.is-locked) .scalogram-readout-mini {
  display: none;
}

/* Attention Summary: panel diagnostic-only que lista las zonas de atencion del
   frame actual sin requerir Probe. Discreto, lectura rapida; cada fila combina
   una pill por tipo + razon traducida + tiempo/freq. */
.scalogram-attention {
  order: 4;
  flex: 0 0 auto;
  display: block;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(7, 10, 16, 0.54);
}

.scalogram-attention[hidden] {
  display: none;
}

.scalogram-attention-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.scalogram-attention-header::-webkit-details-marker {
  display: none;
}

.scalogram-attention:not([open]).has-zones .scalogram-attention-list,
.scalogram-attention:not([open]) .scalogram-attention-empty {
  display: none;
}

.scalogram-attention:not([open]) {
  opacity: 0.72;
}

.scalogram-attention-title {
  color: rgba(226, 238, 246, 0.86);
  font: 600 11px/1.2 "Bahnschrift", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.scalogram-attention-count {
  color: rgba(170, 188, 208, 0.6);
  font: 600 10px/1 "Bahnschrift", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.scalogram-attention-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.scalogram-attention-list:empty {
  display: none;
}

.scalogram-attention-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* El boton interno es el actor real (cliquear lleva el Probe a la zona).
   Diseñado plano por defecto, hover/focus dan feedback sin gritar.
   Layout multi-linea: [num + pill + title] / meta / reason. */
.scalogram-attention-action {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}

.scalogram-attention-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.scalogram-attention-num {
  font: 700 10px/1 "Bahnschrift", system-ui, sans-serif;
  color: rgba(170, 188, 208, 0.7);
  font-variant-numeric: tabular-nums;
  min-width: 14px;
  text-align: right;
}

.scalogram-attention-title {
  color: rgba(228, 240, 252, 0.95);
  font: 600 12px/1.25 "Bahnschrift", system-ui, sans-serif;
  flex: 1 1 auto;
  min-width: 0;
}

/* "Show N more" / "Show less" footer button. */
.scalogram-attention-more {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}
.scalogram-attention-more-btn {
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(180, 200, 220, 0.78);
  font: 600 10px/1 "Bahnschrift", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.scalogram-attention-more-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(180, 220, 255, 0.32);
  color: rgba(220, 235, 250, 0.95);
}
.scalogram-attention-more-btn:focus-visible {
  outline: none;
  border-color: rgba(180, 220, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
}

.scalogram-attention-action:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 200, 90, 0.3);
}

.scalogram-attention-action:focus-visible {
  outline: none;
  border-color: rgba(180, 220, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.scalogram-attention-action:active {
  background: rgba(255, 255, 255, 0.09);
}

.scalogram-attention-pill {
  font: 700 9px/1 "Bahnschrift", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 200, 90, 0.18);
  color: rgba(255, 218, 150, 0.95);
  white-space: nowrap;
}

.scalogram-attention-item[data-type="ridgeBreak"] .scalogram-attention-pill,
.scalogram-attention-item[data-type="frequencyJump"] .scalogram-attention-pill {
  background: rgba(255, 140, 140, 0.18);
  color: rgba(255, 180, 180, 0.95);
}

.scalogram-attention-item[data-type="ridgeSplit"] .scalogram-attention-pill,
.scalogram-attention-item[data-type="lfPersistence"] .scalogram-attention-pill,
.scalogram-attention-item[data-type="persistentTail"] .scalogram-attention-pill {
  background: rgba(180, 220, 255, 0.16);
  color: rgba(200, 226, 255, 0.95);
}

/* Linea 2 (donde): coords del hallazgo. Indentadas bajo el titulo. */
.scalogram-attention-meta {
  color: rgba(180, 200, 220, 0.78);
  font: 600 10px/1.2 "Bahnschrift", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  margin-left: 22px;
}

/* Linea 3 (por que): explicacion en lenguaje natural. Italica para que no
   compita con el titulo, color medio para jerarquia visual clara. */
.scalogram-attention-reason {
  color: rgba(210, 224, 240, 0.78);
  font: 400 11px/1.35 "Bahnschrift", system-ui, sans-serif;
  font-style: italic;
  margin-left: 22px;
}

.scalogram-attention-empty {
  margin: 0;
  color: rgba(170, 188, 208, 0.6);
  font: 500 11px/1.3 "Bahnschrift", system-ui, sans-serif;
  font-style: italic;
}

.scalogram-attention:not(.has-zones) .scalogram-attention-list {
  display: none;
}

.scalogram-attention.has-zones .scalogram-attention-empty {
  display: none;
}

.graph-scalogram .graph-caption {
  position: static;
  max-width: none;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: rgba(174, 192, 212, 0.54);
  font-size: 0.68rem;
  white-space: normal;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 18px;
  cursor: crosshair;
}

.meta-chip-button.is-primary {
  background: rgba(120, 220, 160, 0.18);
  border-color: rgba(120, 220, 160, 0.55);
  color: rgba(190, 240, 210, 0.98);
  font-weight: 700;
}
.meta-chip-button.is-primary:hover {
  background: rgba(120, 220, 160, 0.28);
  border-color: rgba(120, 220, 160, 0.7);
}
.meta-chip-button.is-primary.is-active {
  background: rgba(255, 200, 90, 0.2);
  border-color: rgba(255, 200, 90, 0.6);
  color: rgba(255, 230, 170, 0.98);
}

.scalogram-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 10, 16, 0.75);
  color: rgba(228, 237, 250, 0.92);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 36px;
  transition: background 0.15s, border-color 0.15s;
}
.scalogram-banner[hidden] { display: none; }
.scalogram-banner-icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(200, 215, 240, 0.55);
  box-shadow: 0 0 8px currentColor;
}
.scalogram-banner-text { flex: 1 1 auto; }
.scalogram-banner[data-severity="ok"] {
  background: rgba(28, 62, 38, 0.75);
  border-color: rgba(120, 220, 160, 0.45);
  color: rgba(190, 240, 210, 0.98);
}
.scalogram-banner[data-severity="ok"] .scalogram-banner-icon { background: #7de8b4; color: rgba(120, 220, 160, 0.6); }
.scalogram-banner[data-severity="warn"] {
  background: rgba(78, 56, 14, 0.8);
  border-color: rgba(255, 200, 90, 0.5);
  color: rgba(255, 230, 170, 0.98);
}
.scalogram-banner[data-severity="warn"] .scalogram-banner-icon { background: #ffc85a; color: rgba(255, 200, 90, 0.6); }
.scalogram-banner[data-severity="critical"] {
  background: rgba(90, 24, 24, 0.8);
  border-color: rgba(255, 110, 110, 0.55);
  color: rgba(255, 200, 200, 0.98);
}
.scalogram-banner[data-severity="critical"] .scalogram-banner-icon { background: #ff7070; color: rgba(255, 110, 110, 0.6); }

/* Review status: linea breve sobre el waveform que dice "mira aqui" — count
   de zonas, ridge ambiguo, energia difusa. Tamaño compacto (no compite con
   el banner de alineacion); un dot izquierdo + texto. */
.scalogram-review-status {
  order: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  margin: 0 0 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(6, 10, 16, 0.55);
  color: rgba(220, 232, 246, 0.78);
  font: 600 11px/1.2 "Bahnschrift", system-ui, sans-serif;
  letter-spacing: 0.01em;
  min-height: 22px;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.scalogram-review-status[hidden] { display: none; }
.scalogram-review-status-icon {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(200, 215, 240, 0.55);
  box-shadow: 0 0 6px currentColor;
}
.scalogram-review-status-text { flex: 1 1 auto; }

/* Estados:
   found  → info acentuado (color claro, dot azul-suave)
   noStrong → info muy bajo perfil (gris)
   ridgeAmbiguous → warn (ambar)
   diffuseEnergy → warn (ambar)                                            */
.scalogram-review-status[data-state="found"] {
  border-color: rgba(180, 220, 255, 0.28);
  color: rgba(220, 235, 250, 0.95);
}
.scalogram-review-status[data-state="found"] .scalogram-review-status-icon {
  background: #9ecbff;
}
.scalogram-review-status[data-state="noStrong"] {
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(180, 198, 218, 0.7);
}
.scalogram-review-status[data-state="ridgeAmbiguous"],
.scalogram-review-status[data-state="competingBands"],
.scalogram-review-status[data-state="diffuseEnergy"] {
  border-color: rgba(255, 200, 90, 0.32);
  color: rgba(255, 220, 160, 0.95);
}
.scalogram-review-status[data-state="ridgeAmbiguous"] .scalogram-review-status-icon,
.scalogram-review-status[data-state="competingBands"] .scalogram-review-status-icon,
.scalogram-review-status[data-state="diffuseEnergy"] .scalogram-review-status-icon {
  background: #ffc85a;
}

.scalogram-review-status[data-state="excitation"] {
  border-color: rgba(255, 150, 70, 0.30);
  color: rgba(255, 210, 178, 0.96);
}
.scalogram-review-status[data-state="excitation"] .scalogram-review-status-icon { background: #ff9646; }
.scalogram-review-status[data-state="storagelf"] {
  border-color: rgba(255, 200, 90, 0.32);
  color: rgba(255, 226, 164, 0.96);
}
.scalogram-review-status[data-state="storagelf"] .scalogram-review-status-icon { background: #ffc85a; }
.scalogram-review-status[data-state="resonance"],
.scalogram-review-status[data-state="propagation"] {
  border-color: rgba(90, 220, 190, 0.28);
  color: rgba(190, 244, 232, 0.94);
}
.scalogram-review-status[data-state="resonance"] .scalogram-review-status-icon,
.scalogram-review-status[data-state="propagation"] .scalogram-review-status-icon { background: #5adcbc; }
.scalogram-review-status[data-state="conflict"] {
  border-color: rgba(174, 124, 255, 0.36);
  color: rgba(222, 204, 255, 0.96);
}
.scalogram-review-status[data-state="conflict"] .scalogram-review-status-icon { background: #ae7cff; }
.scalogram-review-status[data-state="release"] {
  border-color: rgba(130, 165, 210, 0.24);
  color: rgba(190, 210, 236, 0.86);
}
.scalogram-review-status[data-state="release"] .scalogram-review-status-icon { background: #82a5d2; }

/* Hint de Ref/Meas: solo aparece cuando el toggle está en refMeas y la
   entrada estéreo no está conectada todavía. Tonos neutros, no compite con
   la review-status banner.                                                */
.scalogram-refmeas-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  margin: 0 0 6px;
  border-radius: 8px;
  border: 1px dashed rgba(180, 220, 255, 0.22);
  background: rgba(8, 14, 22, 0.55);
  color: rgba(200, 220, 240, 0.85);
  font: 600 11px/1.2 "Bahnschrift", system-ui, sans-serif;
  letter-spacing: 0.01em;
  min-height: 22px;
}
.scalogram-refmeas-hint[hidden] { display: none; }
.scalogram-refmeas-hint-icon {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ecbff;
  box-shadow: 0 0 6px currentColor;
}
.scalogram-refmeas-hint-text { flex: 1 1 auto; }
.scalogram-refmeas-offset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(180, 220, 255, 0.18);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(220, 232, 246, 0.85);
  font: 600 11px/1 "Bahnschrift", system-ui, sans-serif;
}
.scalogram-refmeas-offset[hidden] { display: none; }
.scalogram-refmeas-offset input[type="number"] {
  width: 56px;
  padding: 1px 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #f0f6ff;
  font: 600 11px/1 "Bahnschrift", system-ui, sans-serif;
  text-align: right;
}
.scalogram-refmeas-offset input[type="number"]:focus {
  outline: none;
  border-color: rgba(158, 203, 255, 0.55);
}
.scalogram-refmeas-offset-unit {
  color: rgba(180, 198, 218, 0.7);
  font-size: 10px;
}
.scalogram-refmeas-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(180, 220, 255, 0.18);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(220, 232, 246, 0.85);
  font: 600 11px/1.1 "Bahnschrift", system-ui, sans-serif;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.scalogram-refmeas-view-chip[hidden] { display: none; }
.scalogram-refmeas-view-chip:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(180, 220, 255, 0.32);
}
.scalogram-refmeas-view-chip.is-active {
  border-color: rgba(255, 200, 90, 0.45);
  color: rgba(255, 230, 180, 0.95);
  background: rgba(255, 200, 90, 0.06);
}
.scalogram-refmeas-view-label {
  color: rgba(180, 198, 218, 0.7);
  font-weight: 500;
}
.scalogram-refmeas-view-current {
  font-weight: 700;
}

/* Probe panel: alternancia de campos según el modo de análisis. Single
   (default): muestra Level + Ridge + Shape, oculta Reference/Measurement/
   Delta. RefMeas con análisis cargado (data-refmeas="1"): al revés. */
#cwtReadoutPanel:not([data-refmeas="1"]) .scalogram-readout-refmeas-only { display: none; }
#cwtReadoutPanel[data-refmeas="1"] .scalogram-readout-single-only { display: none; }

.scalogram-analysis {
  position: absolute;
  right: 12px;
  bottom: 14px;
  z-index: 3;
  max-width: min(55%, 420px);
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(6, 10, 16, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(228, 237, 250, 0.88);
  font-size: 0.72rem;
}

/* Visual guide: panel pedagogico colapsable que enseña la gramatica visual
   del CWT (vertical/horizontal/diagonal/persistente) y su diferencia con
   STFT. Bottom-left para no chocar con el analysis panel (bottom-right).
   Discrete por diseño: collapsed por default, abre el usuario una sola vez. */
.scalogram-visual-guide {
  position: absolute;
  left: 12px;
  bottom: 14px;
  z-index: 3;
  max-width: min(55%, 380px);
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(6, 10, 16, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(228, 237, 250, 0.88);
  font-size: 0.72rem;
}
.scalogram-visual-guide > summary {
  cursor: pointer;
  list-style: none;
  padding: 2px 2px;
  color: rgba(200, 230, 255, 0.85);
  letter-spacing: 0.01em;
}
.scalogram-visual-guide > summary::-webkit-details-marker { display: none; }
.scalogram-visual-guide-body { padding: 6px 2px 2px; }
.scalogram-visual-guide-grammar {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.scalogram-visual-guide-grammar li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  align-items: baseline;
}
.scalogram-vg-pill {
  font: 700 9px/1 "Bahnschrift", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 4px;
  text-align: center;
  background: rgba(180, 220, 255, 0.14);
  color: rgba(200, 226, 255, 0.95);
}
.scalogram-vg-pill[data-shape="vertical"]   { background: rgba(255, 140, 140, 0.16); color: rgba(255, 180, 180, 0.95); }
.scalogram-vg-pill[data-shape="horizontal"] { background: rgba(150, 220, 180, 0.16); color: rgba(180, 240, 200, 0.95); }
.scalogram-vg-pill[data-shape="diagonal"]   { background: rgba(180, 200, 255, 0.16); color: rgba(200, 220, 255, 0.95); }
.scalogram-vg-pill[data-shape="persistent"] { background: rgba(180, 220, 255, 0.16); color: rgba(200, 226, 255, 0.95); }
.scalogram-vg-pill[data-shape="ridge"]      { background: rgba(120, 220, 160, 0.16); color: rgba(170, 240, 200, 0.95); }
.scalogram-vg-pill[data-shape="attention"]  { background: rgba(255, 200, 90, 0.18); color: rgba(255, 218, 150, 0.95); }
.scalogram-vg-text {
  color: rgba(220, 232, 246, 0.85);
  font-size: 0.7rem;
  line-height: 1.3;
}
.scalogram-visual-guide-note {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  color: rgba(180, 200, 220, 0.78);
  font-size: 0.68rem;
  line-height: 1.35;
  font-style: italic;
}
.scalogram-analysis > summary {
  cursor: pointer;
  list-style: none;
  padding: 2px 2px;
  color: rgba(200, 230, 255, 0.85);
  letter-spacing: 0.01em;
}
.scalogram-analysis > summary::-webkit-details-marker { display: none; }
.scalogram-analysis-body { padding: 6px 2px 2px; }
.scalogram-analysis-hint {
  margin: 0 0 6px;
  color: rgba(200, 220, 240, 0.8);
  font-size: 0.7rem;
}
.scalogram-analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.scalogram-analysis-table th,
.scalogram-analysis-table td {
  padding: 2px 6px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.scalogram-analysis-table th:first-child,
.scalogram-analysis-table td:first-child { text-align: left; }

.scalogram-analysis-diagnosis {
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border-left: 3px solid rgba(180, 200, 230, 0.6);
  background: rgba(255, 255, 255, 0.04);
}
.scalogram-analysis-diagnosis[data-severity="ok"] {
  border-left-color: rgba(120, 220, 160, 0.85);
  background: rgba(80, 180, 130, 0.08);
}
.scalogram-analysis-diagnosis[data-severity="warn"] {
  border-left-color: rgba(255, 200, 90, 0.9);
  background: rgba(255, 190, 80, 0.08);
}
.scalogram-analysis-diagnosis[data-severity="critical"] {
  border-left-color: rgba(255, 110, 110, 0.95);
  background: rgba(255, 100, 100, 0.1);
}
.scalogram-analysis-diagnosis-title {
  margin: 0 0 2px;
  font-weight: 600;
  color: rgba(235, 245, 255, 0.95);
  font-size: 0.74rem;
}
.scalogram-analysis-diagnosis-detail {
  margin: 0 0 4px;
  color: rgba(220, 230, 245, 0.85);
  font-size: 0.7rem;
  line-height: 1.35;
}
.scalogram-analysis-diagnosis-actions {
  margin: 0;
  padding-left: 16px;
  color: rgba(215, 230, 250, 0.82);
  font-size: 0.68rem;
  line-height: 1.3;
}
.scalogram-analysis-diagnosis-actions:empty { display: none; }

.scalogram-analysis-onboarding {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(90, 160, 220, 0.14);
  border: 1px solid rgba(120, 180, 240, 0.35);
  color: rgba(220, 235, 255, 0.92);
  font-size: 0.7rem;
  line-height: 1.35;
}
.scalogram-analysis-onboarding p { margin: 0 0 6px; }
.scalogram-analysis-onboarding-dismiss {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(150, 200, 240, 0.5);
  background: rgba(20, 40, 60, 0.4);
  color: rgba(225, 240, 255, 0.95);
  font-size: 0.68rem;
  cursor: pointer;
}
.scalogram-analysis-onboarding-dismiss:hover {
  background: rgba(40, 70, 100, 0.55);
}

.graph-caption {
  position: absolute;
  left: 50px;
  bottom: 30px;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(6, 10, 16, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(228, 237, 250, 0.8);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  pointer-events: none;
  max-width: min(70%, 520px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-rail {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  transform: translateX(calc(100% + 1px));
  z-index: 100;
  width: min(360px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(14, 18, 26, 0.98);
  backdrop-filter: none;
  border: 1px solid rgba(184, 210, 238, 0.12);
  border-right: none;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.app-shell.options-open .control-rail {
  pointer-events: auto;
  transform: translateX(0);
}

.rail-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(9, 13, 19, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(2px);
}

.rail-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rail-manual-link {
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.06);
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rail-manual-link > span:first-child {
  color: #7dd3fc;
  font-size: 0.9rem;
  font-weight: 750;
}

.rail-manual-link:hover {
  color: var(--text-strong);
  background: rgba(125, 211, 252, 0.12);
  border-color: rgba(125, 211, 252, 0.32);
}

.rail-manual-link:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.72);
  outline-offset: 2px;
}

.rail-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-soft);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rail-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-strong);
  border-color: rgba(78, 196, 224, 0.25);
}

.control-rail::-webkit-scrollbar {
  width: 10px;
}

.control-rail::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
}

.control-rail::-webkit-scrollbar-thumb {
  background: rgba(78, 196, 224, 0.20);
  border-radius: 999px;
  border: 2px solid rgba(8, 12, 18, 0.5);
}

.control-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(78, 196, 224, 0.32);
}

.rail-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  flex: 1;
}

.rail-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rail-section[hidden] {
  display: none;
}

/* Secciones plegables: el header (eyebrow + h3) es el summary del details.
   Estado abierto/cerrado persistido por sección en userPrefs.railSectionsOpen.
   El display:flex del details anula el ocultamiento nativo del contenido
   cerrado en algunos Chromium — se fuerza explícitamente. */
.rail-section:not([open]) > :not(summary) {
  display: none;
}

.rail-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.rail-section-head::-webkit-details-marker {
  display: none;
}

.rail-section-head .section-eyebrow {
  display: block;
}

.rail-section-head::after {
  content: "▾";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(188, 216, 232, 0.64);
  font-size: 0.72rem;
  transition: transform 0.16s ease;
}

.rail-section[open] > .rail-section-head::after {
  transform: translateY(-50%) rotate(180deg);
}

.rail-section-head:hover h3 {
  color: #fff;
}

.rail-section h3 {
  font-size: 1rem;
  color: var(--text-strong);
}

.mono {
  font-family: var(--font-mono);
}

.control-line[hidden] { display: none; }

.control-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-size: 0.92rem;
}

.rail-dropdown {
  display: grid;
  gap: 8px;
}

.rail-dropdown > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.rail-dropdown > summary .mono {
  justify-self: end;
}

.rail-dropdown > summary::-webkit-details-marker {
  display: none;
}

.rail-dropdown > summary::after {
  content: "▾";
  margin-left: 8px;
  color: rgba(188, 216, 232, 0.64);
  font-size: 0.72rem;
  transition: transform 0.16s ease;
}

.rail-dropdown[open] > summary::after {
  transform: rotate(180deg);
}

.rail-dropdown-body {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(120, 180, 210, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.rail-tool-hint {
  margin: 0;
  color: rgba(174, 198, 214, 0.72);
  font-size: 0.72rem;
  line-height: 1.4;
}

#frozenIrComparisonReadout[data-state="valid"] {
  color: #9de8bd;
}

#frozenIrComparisonReadout[data-state="degraded"],
#frozenIrComparisonReadout[data-state="mismatch"] {
  color: rgba(255, 204, 120, 0.9);
}

.toggle-line {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 0.92rem;
}

.toggle-line input[type="checkbox"] {
  accent-color: #4ec4e0;
  width: 16px;
  height: 16px;
}

input[type="range"] {
  width: 100%;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(78, 196, 224, 0.45), rgba(224, 148, 82, 0.32));
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f3f7ff;
  box-shadow: 0 0 0 4px rgba(78, 196, 224, 0.15);
}

select {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 10, 16, 0.9);
  color: var(--text-strong);
  padding: 0 14px;
}


/* ─── Focus mode ───────────────────────────────────────────────── */
.app-shell.focus-mode .workspace {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.focus-mode .control-rail {
  display: none;
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .app-shell {
    min-height: 100vh;
    overflow: hidden;
    padding: 14px;
  }

  .workspace {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  .workspace-scrim {
    border-radius: 24px;
  }

  .control-rail {
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-right: none;
    padding: 18px;
  }

  .rail-topbar {
    top: -18px;
    margin: -18px -18px 2px;
    padding: 18px 18px 16px;
  }

  .graph-stage[data-active-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(260px, 1fr);
  }

  .graph-stage[data-active-count="2"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(220px, 1fr));
  }

  .graph-stage[data-active-count="3"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(220px, 1fr));
  }

  .graph-stage[data-active-count="4"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(180px, 1fr));
  }

  .graph-stage[data-active-count="5"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(180px, 1fr));
  }

  .graph-stage[data-active-count="6"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, minmax(180px, 1fr));
  }

  .graph-stage[data-active-count="7"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(7, minmax(180px, 1fr));
  }

  /* Heatmaps en mobile necesitan algo más de alto para ser legibles. */
  .graph-card[data-panel-card="scalogram"],
  .graph-card[data-panel-card="spectrogram"] {
    min-height: 240px;
  }

  .graph-head {
    top: 10px;
    left: 50px;
    right: 10px;
  }

  .legend-cluster,
  .graph-meta {
    justify-content: flex-start;
  }

  .graph-caption {
    max-width: calc(100% - 34px);
  }

}

/* ── Canvas Inspector Overlay ───────────────────────────────────────── */
#canvasInspector {
  position: absolute;
  bottom: 44px;
  right: 14px;
  background: rgba(8, 10, 16, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  padding: 5px 10px;
  font: 11px/1.7 monospace;
  color: #d0d6e2;
  pointer-events: none;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 1px;
}
#canvasInspector .ci-row {
  display: flex;
  gap: 7px;
  align-items: baseline;
}
#canvasInspector .ci-label {
  color: #505a6a;
  min-width: 12px;
  font-size: 10px;
}

/* ── Header controls tab ────────────────────────────────────────────── */
.header-controls-tower {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 502;
  pointer-events: none;
  transform: translateX(-50%);
}

.header-controls-tab {
  width: 108px;
  height: 26px;
  padding: 0 14px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(12, 16, 26, 0.86);
  color: rgba(125, 211, 252, 0.52);
  cursor: pointer;
  pointer-events: all;
  font: 700 9px var(--font-mono);
  letter-spacing: 0.16em;
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.header-controls-tab:hover,
.header-controls-tab[aria-expanded="false"] {
  background: rgba(20, 24, 34, 0.96);
  color: rgba(125, 211, 252, 0.88);
  border-color: rgba(125, 211, 252, 0.34);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.34), 0 0 14px rgba(125, 211, 252, 0.08);
}

.header-controls-tab:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.72);
  outline-offset: -2px;
}

/* ── Crest Factor Tower ─────────────────────────────────────────────── */
.cf-tower {
  position: fixed; left: 0; top: 0; height: 100vh;
  z-index: 50; display: flex; flex-direction: row;
  user-select: none; pointer-events: none;
}
.cf-tab {
  width: 22px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,16,26,0.82);
  border: none; border-right: 1px solid rgba(255,230,0,0.12);
  cursor: pointer; pointer-events: all;
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 700 9px monospace; letter-spacing: 0.18em;
  color: rgba(255,230,0,0.45);
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0; padding: 0;
}
.cf-tab:hover, .cf-tower.open .cf-tab {
  background: rgba(20,24,34,0.95); color: rgba(255,230,0,0.8);
}
.cf-panel {
  width: 0; overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.cf-tower.open .cf-panel { width: 96px; pointer-events: all; }
.cf-panel-inner {
  width: 96px; height: 100%;
  padding: 48px 6px 14px;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(8,11,20,0.90);
  border-right: 1px solid rgba(255,255,255,0.06);
  box-sizing: border-box;
}
.cf-top-block {
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
}
.cf-title {
  font: 700 8px monospace; letter-spacing: 0.14em;
  color: rgba(255,230,0,0.45); text-align: center;
}
.cf-readouts {
  display: flex; gap: 4px; justify-content: space-between;
}
.cf-readouts span {
  font: 600 10px monospace; color: rgba(220,240,255,0.85);
  min-width: 32px; text-align: center;
}
.cf-peak-readouts span {
  font: 700 13px monospace; color: rgba(220,240,255,0.95);
}
.cf-readout-labels {
  display: flex; gap: 3px; justify-content: space-between;
}
.cf-readout-labels span {
  font: 7px monospace; color: rgba(255,255,255,0.25);
  min-width: 32px; text-align: center;
}
.cf-body {
  flex: 1; min-height: 0;
  display: flex; gap: 2px; align-items: stretch;
}
.cf-scale-labels {
  display: flex; flex-direction: column;
  justify-content: space-between; padding-bottom: 18px;
}
.cf-scale-labels span {
  font: 8px monospace; color: rgba(255,255,255,0.2);
  white-space: nowrap; line-height: 1;
}
.cf-bars { display: flex; gap: 3px; flex: 1; align-items: stretch; }
.cf-bar-col {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px; flex: 1;
}
.cf-ch-label {
  font: 8px monospace; color: rgba(255,255,255,0.3);
}
.cf-bar {
  position: relative; flex: 1; width: 100%;
  background: rgba(255,255,255,0.04);
  border-radius: 3px; overflow: hidden;
}
.cf-rms-fill {
  position: absolute; bottom: 0; left: 0; right: 0; height: 0%;
  background: linear-gradient(to top,
    #4ec4e0 0%, #7de8b4 55%, #ffe600 82%, #ff3333 100%);
  border-radius: 3px;
}
.cf-peak-tick {
  position: absolute; left: 0; right: 0; height: 3px; bottom: 0;
  background: rgba(255,255,255,0.9); border-radius: 1px;
  transition: background 0.1s;
}
.cf-peak-tick.clip { background: #ff3333; box-shadow: 0 0 4px #ff3333; }
.cf-center-col {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.cf-cf-val {
  font: 700 15px monospace; color: #ffe600; white-space: nowrap;
}
.cf-mode-chip {
  font: 700 7px monospace; letter-spacing: 0.12em;
  color: rgba(255,230,0,0.55); background: none; border: none;
  cursor: pointer; padding: 2px 4px;
  border-radius: 3px; transition: color 0.15s, background 0.15s;
  pointer-events: all;
}
.cf-mode-chip:hover { color: rgba(255,230,0,0.9); background: rgba(255,230,0,0.08); }
.cf-label-cf {
  font: 8px monospace; color: rgba(255,230,0,0.4); white-space: nowrap;
}

/* ── Snapshot Bar ───────────────────────────────────────────────────── */
.snapshot-bar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1000;
}
.topbar-row {
  position: relative;
  z-index: 500;
}
.snap-menu {
  position: relative;
  z-index: 1001;
}
/* ── Snapshot bar dropdown menus (Snapshot ▾, Session ▾) ───────────── */
.snap-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.snap-menu-trigger[aria-expanded="true"] {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.snap-menu-panel {
  position: fixed;
  z-index: 99999;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  min-width: 160px;
  background: rgba(8, 11, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
[data-snap-menu="snapshot"] .snap-menu-panel {
  min-width: 224px;
}
.snap-menu.open .snap-menu-panel {
  display: flex;
}
.snap-menu-panel .snap-btn {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  border-radius: 6px;
}
.snap-menu-panel .snap-btn[disabled] { opacity: 0.4; }
.snap-menu-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.snap-capture-contract {
  display: grid;
  gap: 6px;
  margin: 4px 0 2px;
  padding: 8px;
  border: 1px solid rgba(72, 200, 150, 0.16);
  border-radius: 8px;
  background: rgba(72, 200, 150, 0.035);
}
.snap-contract-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.snap-contract-header > strong {
  color: rgba(218, 232, 242, 0.74);
  font: 650 0.66rem/1.2 "Bahnschrift", system-ui, sans-serif;
  letter-spacing: 0.025em;
}
.snap-contract-field,
.snap-contract-set {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  color: rgba(220, 232, 242, 0.72);
  font-size: 0.72rem;
}
.snap-contract-field select {
  min-width: 126px;
  max-width: 148px;
}
.snap-contract-set {
  gap: 5px;
  min-height: 0;
}
.snap-contract-set > span {
  color: rgba(100, 226, 174, 0.9);
  font-weight: 700;
}
.snap-contract-set button {
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(220, 232, 242, 0.78);
  font: inherit;
  cursor: pointer;
}
.snap-contract-set button:hover {
  border-color: rgba(72, 200, 150, 0.34);
  color: #fff;
}
.snap-contract-hint {
  min-height: 2.5em;
  white-space: normal;
  color: rgba(174, 195, 211, 0.58);
  font: 500 0.62rem/1.3 var(--font-mono);
}
.snap-contract-status {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: normal;
  color: rgba(180, 200, 216, 0.58);
  font: 600 0.66rem/1.3 monospace;
  letter-spacing: 0.025em;
}
.snap-contract-step {
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}
.snap-contract-step.is-complete {
  border-color: rgba(72, 200, 150, 0.22);
  color: rgba(92, 222, 166, 0.9);
}
.snap-contract-step.is-current {
  border-color: rgba(108, 196, 240, 0.36);
  background: rgba(80, 178, 225, 0.09);
  color: rgba(166, 222, 250, 0.96);
}
.snap-contract-arrow {
  color: rgba(170, 192, 208, 0.3);
}
.snap-contract-warning {
  color: rgba(255, 190, 92, 0.94);
}
.snap-contract-status[data-state="ready"] { color: rgba(72, 200, 150, 0.90); }
.snap-contract-status[data-state="warning"] { color: rgba(255, 190, 92, 0.90); }

.snap-optional-meta {
  border-radius: 7px;
  color: rgba(196, 212, 224, 0.68);
  font-size: 0.68rem;
}
.snap-optional-meta > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 3px;
  cursor: pointer;
  list-style: none;
}
.snap-optional-meta > summary::-webkit-details-marker { display: none; }
.snap-optional-meta > summary::before {
  content: "+";
  color: rgba(132, 184, 214, 0.58);
}
.snap-optional-meta[open] > summary::before { content: "−"; }
.snap-optional-meta > summary > span:first-child { margin-right: auto; }
.snap-optional-meta > summary > span:last-child {
  color: rgba(132, 184, 214, 0.74);
  font-family: var(--font-mono);
}
.snap-optional-meta.is-disabled > summary {
  cursor: default;
  opacity: 0.5;
}
.snap-optional-meta .snap-contract-field {
  margin-top: 3px;
  padding: 6px 3px 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.snap-optional-meta > small {
  display: block;
  padding: 2px 3px 5px;
  white-space: normal;
  color: rgba(174, 195, 211, 0.5);
  font: 500 0.6rem/1.3 var(--font-mono);
}

.snap-slots {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}

/* Colores por slot definidos vía attribute selectors — robusto ante
   limpieza accidental de inline styles. */
.snap-dot[data-slot="0"]  { --dot-color: #ff4d6d; }
.snap-dot[data-slot="1"]  { --dot-color: #ff8a3d; }
.snap-dot[data-slot="2"]  { --dot-color: #f6c85f; }
.snap-dot[data-slot="3"]  { --dot-color: #a8d95b; }
.snap-dot[data-slot="4"]  { --dot-color: #36c98f; }
.snap-dot[data-slot="5"]  { --dot-color: #2ec4b6; }
.snap-dot[data-slot="6"]  { --dot-color: #38bdf8; }
.snap-dot[data-slot="7"]  { --dot-color: #4f7cff; }
.snap-dot[data-slot="8"]  { --dot-color: #6c63ff; }
.snap-dot[data-slot="9"]  { --dot-color: #9b5de5; }

.snap-dot {
  display: inline-block;
  width: 35px; height: 21px;
  border-radius: 50%;
  /* Fallback sólido para navegadores sin color-mix (Chrome <111). */
  background-color: rgba(255,255,255,0.06);
  background-color: color-mix(in srgb, var(--dot-color, #888) 14%, transparent);
  border: 1px dashed rgba(255,255,255,0.30);
  border-color: color-mix(in srgb, var(--dot-color, #888) 55%, transparent);
  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, outline-color 0.2s, transform 0.15s;
  flex-shrink: 0;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-sizing: border-box;
}
.snap-dot:hover {
  background-color: color-mix(in srgb, var(--dot-color, #888) 28%, transparent);
  border-color: color-mix(in srgb, var(--dot-color, #888) 85%, transparent);
  transform: scale(1.12);
}
/* Estado lleno: prioridad alta vía especificidad extra + !important defensivo. */
.snap-slots .snap-dot.filled {
  background-color: var(--dot-color, #999) !important;
  background-image: none !important;
  border: 1px solid var(--dot-color, #999) !important;
  border-style: solid !important;
  box-shadow: 0 0 10px var(--dot-color, #999) !important;
}
.snap-slots .snap-dot.filled:hover {
  background-color: var(--dot-color, #999) !important;
  border-color: var(--dot-color, #999) !important;
  transform: scale(1.18);
  box-shadow: 0 0 14px var(--dot-color, #999) !important;
}
.snap-dot.filled.hidden-snap {
  background: color-mix(in srgb, var(--dot-color) 18%, transparent);
  box-shadow: none;
}
.snap-dot.selected {
  outline-color: var(--dot-color);
  outline-offset: 3px;
}
.snap-dot:not(.filled).selected {
  border-style: solid;
  border-color: var(--dot-color);
  outline-color: color-mix(in srgb, var(--dot-color) 55%, transparent);
}

.snap-divider {
  width: 1px; height: 18px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
}

.way-quick-capture {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}

.way-quick-button {
  --way-accent: 126, 214, 240;
  position: relative;
  min-width: 54px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(var(--way-accent), 0.30);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--way-accent), 0.12), rgba(var(--way-accent), 0.045));
  color: rgba(235, 247, 252, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: 700 0.74rem/1 var(--font-mono);
  letter-spacing: 0.07em;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.way-quick-button::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: rgb(var(--way-accent));
  box-shadow: 0 0 7px rgba(var(--way-accent), 0.55);
  vertical-align: 1px;
}

.way-quick-button:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--way-accent), 0.62);
  background: linear-gradient(180deg, rgba(var(--way-accent), 0.20), rgba(var(--way-accent), 0.08));
  color: #fff;
}

.way-quick-button:active {
  transform: translateY(0) scale(0.98);
}

.way-quick-button.is-next {
  border-color: rgba(var(--way-accent), 0.72);
  background: linear-gradient(180deg, rgba(var(--way-accent), 0.23), rgba(var(--way-accent), 0.09));
  box-shadow: 0 0 0 1px rgba(var(--way-accent), 0.10), 0 0 14px rgba(var(--way-accent), 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.way-quick-button.is-active {
  border-color: rgba(var(--way-accent), 0.82);
  background: linear-gradient(180deg, rgba(var(--way-accent), 0.30), rgba(var(--way-accent), 0.13));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(var(--way-accent), 0.13), 0 0 16px rgba(var(--way-accent), 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.way-sub { --way-accent: 66, 190, 238; }
.way-top { --way-accent: 74, 210, 160; }
.way-sum { --way-accent: 242, 190, 82; }
.way-virtual {
  --way-accent: 110, 231, 183;
  min-width: 64px;
}

.way-virtual.is-active {
  box-shadow: 0 0 0 1px rgba(var(--way-accent), 0.16), 0 0 20px rgba(var(--way-accent), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.virtual-sum-context {
  position: fixed;
  z-index: 1200;
  width: 300px;
  padding: 7px;
  border: 1px solid rgba(110, 231, 183, 0.25);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(9, 15, 25, 0.985), rgba(5, 10, 18, 0.985));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.52), 0 0 24px rgba(110, 231, 183, 0.09);
  backdrop-filter: blur(14px);
}

.virtual-sum-context[hidden] { display: none; }

.virtual-sum-context-head {
  display: grid;
  grid-template-columns: 1fr auto 20px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 3px 5px;
  color: rgba(208, 221, 238, 0.82);
  font-size: 0.76rem;
}

.virtual-sum-context-head strong {
  font-size: 0.78rem;
  letter-spacing: 0.015em;
}

.virtual-sum-context-head .mono {
  color: rgba(218, 228, 241, 0.82);
  font-weight: 700;
}

.virtual-sum-context-head button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(164, 187, 210, 0.62);
  cursor: pointer;
}

.virtual-sum-context-head button:hover { color: #6ee7b7; }

.virtual-sum-context-body {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(128, 164, 202, 0.11);
  border-radius: 9px;
  background: rgba(8, 15, 25, 0.66);
}

.virtual-sum-context-body .toggle-line,
.virtual-sum-context-body .control-line {
  margin: 0;
  color: rgba(188, 207, 228, 0.86);
  font-size: 0.75rem;
  font-weight: 650;
}

.virtual-sum-context-body input[type="range"] {
  width: 100%;
  margin: -1px 0 1px;
  accent-color: #b980ee;
}

.virtual-sum-context-body .mini-button {
  width: 100%;
  margin-top: 1px;
  color: rgba(194, 211, 231, 0.84);
}

.snap-btn {
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s;
}
.snap-btn:disabled { opacity: 0.32; cursor: default; }

.snap-capture {
  color: #48c896;
  border-color: rgba(72,200,150,0.25);
  background: rgba(72,200,150,0.06);
}
.snap-capture:not(:disabled):hover {
  background: rgba(72,200,150,0.14);
  border-color: rgba(72,200,150,0.45);
}
.snap-capture.active {
  background: rgba(72,200,150,0.12);
  border-color: rgba(72,200,150,0.35);
}

.snap-clear {
  color: var(--text-soft);
  border-color: rgba(255,255,255,0.08);
}
.snap-clear:not(:disabled):hover {
  color: #f5a623;
  border-color: rgba(245,166,35,0.3);
  background: rgba(245,166,35,0.07);
}

.snap-export {
  color: var(--text-soft);
  border-color: rgba(255,255,255,0.08);
}
.snap-export:not(:disabled):hover {
  color: #4a90e2;
  border-color: rgba(74,144,226,0.3);
  background: rgba(74,144,226,0.07);
}

.snap-toggle {
  color: var(--text-soft);
  border-color: rgba(255,255,255,0.08);
}
.snap-toggle.active {
  color: rgba(69,243,255,0.85);
  border-color: rgba(69,243,255,0.25);
  background: rgba(69,243,255,0.07);
}
.snap-toggle:hover {
  color: rgba(69,243,255,0.6);
  border-color: rgba(69,243,255,0.2);
}

.snap-stop {
  color: var(--text-soft);
  border-color: rgba(255,255,255,0.08);
}
.snap-stop:not(:disabled):hover {
  color: #f5a623;
  border-color: rgba(245,166,35,0.3);
  background: rgba(245,166,35,0.07);
}
.snap-stop.stopped {
  color: #f5a623;
  border-color: rgba(245,166,35,0.35);
  background: rgba(245,166,35,0.10);
}

/* ── Preset quick select (topbar-row) ───────────────────────────────── */
.preset-quick-select {
  grid-column: 2;
  grid-row: 2;
  display: block;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #d0d0d0;
  font-size: 11px;
  font-family: inherit;
  padding: 5px 22px 5px 12px;
  height: 30px;
  cursor: pointer;
  outline: none;
  max-width: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.15s, background-color 0.15s;
}
.preset-quick-select {
  max-width: 150px;
}
.preset-quick-select:hover {
  background-color: rgba(255,255,255,0.10);
  border-color: rgba(78,196,224,0.30);
}
.preset-quick-select:focus {
  border-color: rgba(78,196,224,0.50);
}
.preset-quick-select option {
  background: #1a1a2e;
  color: #d0d0d0;
}

@media (max-width: 1799px) {
  .preset-quick-select {
    display: none;
  }
}

@media (max-width: 1550px) {
  .topbar-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .snapshot-bar {
    grid-column: 1;
    grid-row: 2;
  }

  .floating-view-switcher {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
  }
}
/* ── Presets section ─────────────────────────────────────────────────── */
.preset-save-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px;
}
.preset-name-input {
  flex: 1; min-height: 34px; padding: 0 12px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(7,10,16,0.90); color: var(--text-strong);
  font: inherit; font-size: 0.88rem; outline: none;
  transition: border-color 0.18s ease;
}
.preset-name-input:focus { border-color: rgba(78,196,224,0.40); }
.preset-name-input.input-error {
  border-color: rgba(255,120,100,0.55);
  animation: preset-shake 0.3s ease;
}
@keyframes preset-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.preset-save-btn { flex-shrink: 0; white-space: nowrap; }
.preset-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 220px; overflow-y: auto; padding-right: 2px;
}
.preset-list::-webkit-scrollbar { width: 5px; }
.preset-list::-webkit-scrollbar-track { background: transparent; }
.preset-list::-webkit-scrollbar-thumb {
  background: rgba(78,196,224,0.18); border-radius: 999px;
}
.preset-row {
  display: flex; align-items: center; gap: 5px;
  border-radius: 10px; padding: 2px;
  transition: background 0.15s ease;
}
.preset-row.is-active {
  background: rgba(78,196,224,0.08);
  outline: 1px solid rgba(78,196,224,0.20);
}
.preset-name-btn {
  flex: 1; min-height: 32px; padding: 0 12px; text-align: left;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04); color: var(--text);
  font-size: 0.88rem; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.preset-name-btn:hover {
  background: rgba(255,255,255,0.08); color: var(--text-strong);
  border-color: rgba(78,196,224,0.20);
}
.preset-name-btn.preset-builtin {
  border-color: rgba(224,148,82,0.18); color: var(--text-soft); font-style: italic;
}
.preset-name-btn.preset-builtin::before {
  content: "★ "; color: rgba(224,148,82,0.55); font-style: normal;
}
.preset-delete-btn {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.07);
  background: transparent; color: var(--text-soft);
  font-size: 0.78rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, width 0.15s;
}
.preset-delete-btn:hover {
  background: rgba(255,80,80,0.12); color: #ff8888;
  border-color: rgba(255,80,80,0.25);
}
.preset-delete-btn.preset-delete-confirm {
  width: 42px; font-size: 0.68rem;
  background: rgba(255,80,80,0.18); color: #ffaaaa;
  border-color: rgba(255,80,80,0.40);
}
.preset-empty {
  margin: 0; color: var(--text-soft); font-size: 0.84rem;
  font-style: italic; text-align: center; padding: 8px 0;
}

/* ── Options Tower (right edge tab) ────────────────────────────────── */
.options-tower {
  position: fixed; right: 0; top: 0; height: 100vh;
  z-index: 101;
  display: flex; align-items: center;
  pointer-events: none;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-shell.options-open .options-tower {
  right: min(360px, 100%);
}
.options-tower-tab {
  width: 22px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,16,26,0.82);
  border: none; border-left: 1px solid rgba(69,243,255,0.12);
  cursor: pointer; pointer-events: all;
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 700 9px monospace; letter-spacing: 0.18em;
  color: rgba(69,243,255,0.45);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transition: background 0.2s, color 0.2s;
  padding: 0;
}
.options-tower-tab:hover,
.app-shell.options-open .options-tower-tab {
  background: rgba(20,24,34,0.95); color: rgba(69,243,255,0.85);
}

/* ─── Snap-dot context menu ──────────────────────────────────────── */
#snapContextMenu {
  position: fixed;
  z-index: 9999;
  background: rgba(18, 20, 30, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 150px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  user-select: none;
}
#snapContextMenu.visible { display: flex; }
#snapContextMenu button {
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 0.88rem;
  padding: 8px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.12s, color 0.12s;
}
#snapContextMenu button:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-strong);
}
#snapContextMenu button:disabled {
  color: rgba(255,255,255,0.2);
  cursor: default;
}
#snapContextMenu .ctx-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 3px 0;
}

/* Build version tag next to the brand. Auto-incremented by
   scripts/bump-version.mjs (CI rule, see .github/workflows/version-bump.yml). */
.brand-version {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(125, 211, 252, 0.78);
  background: rgba(125, 211, 252, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 4px;
  vertical-align: middle;
  user-select: none;
  transition: opacity 0.18s ease;
}
.brand-version:hover {
  color: rgba(125, 211, 252, 1);
  border-color: rgba(125, 211, 252, 0.45);
}