/* MusicScope Series — cabecera y barra de controles superiores */

.app-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.app-brand-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-brand-nav {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: #64748b;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  transition: border-color 0.12s, color 0.12s;
}

.app-brand-nav:hover {
  color: #1e293b;
  border-color: #b8c4d4;
}

@media (prefers-color-scheme: dark) {
  .app-brand-nav {
    color: #8b95a8;
    background: #2a303c;
    border-color: #3a4152;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .app-brand-nav:hover {
    color: #e8ecf4;
    border-color: #4a5264;
  }
}

.app-brand-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
}

.app-brand-text {
  min-width: 0;
}

.app-brand-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}

.app-brand-series {
  font-weight: 600;
  color: #0d9488;
}

@media (prefers-color-scheme: dark) {
  .app-brand-series { color: #2dd4bf; }
}

.app-brand-sub {
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--text-dim);
  font-style: italic;
}

/* ── Panel de controles superiores ── */
.control-deck {
  --cd-bg: #f3f5f8;
  --cd-bg2: #e9edf3;
  --cd-border: #d5dbe6;
  --cd-text: #1e293b;
  --cd-muted: #64748b;
  --cd-well: #ffffff;
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border: 1px solid var(--cd-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--cd-well) 0%, var(--cd-bg) 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.control-section + .control-section {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--cd-border);
}

.control-section-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cd-muted);
  margin-bottom: 6px;
}

.control-deck .row {
  margin-bottom: 0;
  gap: 6px;
}

.control-deck .lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--cd-muted);
}

.control-deck .mbtn {
  padding: 5px 13px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--cd-border);
  background: var(--cd-well);
  color: var(--cd-muted);
  min-height: 32px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.control-deck .mbtn:hover {
  border-color: #b8c4d4;
  color: var(--cd-text);
}

.control-deck .mbtn.on {
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
  border-color: #93c5fd;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 6px rgba(37, 99, 235, 0.15);
}

.control-deck .chip {
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  min-height: 32px;
  border: 1px solid var(--cd-border);
  background: var(--cd-well);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.control-deck .chip:hover { border-color: #b8c4d4; }

.control-deck .chip.sn {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  color: #047857;
  border-color: #6ee7b7;
}

.control-deck .chip.sd {
  background: linear-gradient(180deg, #ecfdf5 0%, #bbf7d0 100%);
  color: #15803d;
  border-color: #86efac;
}

.control-deck .chip.sv {
  background: linear-gradient(180deg, #fefce8 0%, #fef08a 100%);
  color: #854d0e;
  border-color: #fde047;
}

.control-deck select,
.control-deck input[type="range"] {
  border-radius: 8px;
  border-color: var(--cd-border);
  background: var(--cd-well);
}

.control-deck .rigorous-toggle {
  font-size: 11px;
  font-weight: 600;
  color: var(--cd-muted);
}

@media (prefers-color-scheme: dark) {
  .control-deck {
    --cd-bg: #252932;
    --cd-bg2: #1e2430;
    --cd-border: #3a4152;
    --cd-text: #e8ecf4;
    --cd-muted: #8b95a8;
    --cd-well: #2a303c;
  }

  .control-deck .mbtn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .control-deck .mbtn.on {
    background: linear-gradient(180deg, #1e3a5f 0%, #1e3a8a 100%);
    color: #93c5fd;
    border-color: #3b82f6;
  }

  .control-deck .chip.sn {
    background: linear-gradient(180deg, #14532d 0%, #166534 100%);
    color: #86efac;
    border-color: #22c55e;
  }
}