/* ==========================================================================
   Solfa Composer - Módulo Mobile & Landscape Responsivo
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis e Tokens Específicos para Mobile
   -------------------------------------------------------------------------- */
:root {
  --mobile-topbar-height: 44px;
  --mobile-dock-height: 84px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-key-bg: #1e293b;
  --mobile-key-active: #334155;
  --mobile-key-text: #f8fafc;
  --mobile-accent: #6366f1;
}

[data-theme="light"] {
  --mobile-key-bg: #ffffff;
  --mobile-key-active: #e2e8f0;
  --mobile-key-text: #0f172a;
}

/* --------------------------------------------------------------------------
   2. Bloqueio de Orientação: Portrait Guard Overlay
   Exibido quando o dispositivo móvel está na vertical (Portrait)
   -------------------------------------------------------------------------- */
.mobile-portrait-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(circle at center, #1e1b4b 0%, #090d16 100%);
  z-index: 999999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Exibir quando estiver em modo retrato em telas móveis e tablets */
@media screen and (orientation: portrait) and (max-width: 1024px) {
  .mobile-portrait-overlay:not(.overlay-dismissed) {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Classe manual para teste ou detecção via JS */
body.is-mobile-portrait .mobile-portrait-overlay:not(.overlay-dismissed) {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.portrait-guard-card {
  max-width: 380px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portrait-guard-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(165, 180, 252, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 24px;
}

/* Animação do Celular Girando para Horizontal */
.portrait-phone-anim {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.phone-icon-rotating {
  width: 44px;
  height: 72px;
  border: 3px solid #6366f1;
  border-radius: 10px;
  position: relative;
  animation: rotateLandscape 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.phone-icon-rotating::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 3px;
  background: #a5b4fc;
  border-radius: 2px;
}

.phone-icon-rotating::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border: 1.5px solid #a5b4fc;
  border-radius: 50%;
}

.rotate-arrow-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 1.4rem;
  color: #38bdf8;
  animation: pulseArrow 1.6s ease-in-out infinite alternate;
}

@keyframes rotateLandscape {
  0%, 20% {
    transform: rotate(0deg);
  }
  50%, 80% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes pulseArrow {
  0% { transform: scale(0.9) rotate(0deg); opacity: 0.6; }
  100% { transform: scale(1.15) rotate(15deg); opacity: 1; }
}

.portrait-guard-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: #ffffff;
  font-family: var(--font-heading, sans-serif);
}

.portrait-guard-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #cbd5e1;
  margin: 0 0 24px 0;
}

.portrait-guard-text strong {
  color: #38bdf8;
}

.portrait-guard-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.btn-force-landscape {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-force-landscape:active {
  transform: scale(0.98);
}

.btn-dismiss-overlay {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-dismiss-overlay:active {
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
}

/* --------------------------------------------------------------------------
   3. Barra Superior Mobile Unificada (Mobile TopBar)
   -------------------------------------------------------------------------- */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mobile-topbar-height);
  background: var(--bg-surface, #0f172a);
  border-bottom: 1px solid var(--border-color, #334155);
  z-index: 1000;
  padding: 0 8px;
  padding-top: var(--mobile-safe-top);
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  user-select: none;
}

.mobile-topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.btn-mobile-drawer {
  background: transparent;
  border: none;
  color: var(--text-main, #f8fafc);
  font-size: 1.15rem;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.btn-mobile-drawer:active {
  background: var(--bg-input, rgba(255, 255, 255, 0.1));
}

.mobile-score-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
}

.mobile-score-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-heading, sans-serif);
}

.mobile-score-meta {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
}

/* Alternador de Modo: Regente vs Compositor */
.mobile-mode-switcher {
  display: inline-flex;
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  margin: 0 8px;
  flex-shrink: 0;
}

.mobile-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.mobile-mode-btn.active {
  background: var(--primary, #6366f1);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3);
}

.mobile-topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-mobile-quick-play {
  background: var(--primary, #6366f1);
  color: #ffffff;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

.btn-mobile-quick-play:active {
  transform: scale(0.94);
}

.btn-mobile-quick-play.is-playing {
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.btn-mobile-fullscreen {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Dock do Regente (Conductor & Rehearsal Strip)
   -------------------------------------------------------------------------- */
.mobile-conductor-dock {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-surface, #0f172a);
  border-top: 1px solid var(--border-color, #334155);
  z-index: 1000;
  padding: 6px 10px;
  padding-bottom: calc(6px + var(--mobile-safe-bottom));
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.2);
  user-select: none;
}

.conductor-transport-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-conductor-control {
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  color: var(--text-main, #f8fafc);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-conductor-control:active {
  background: var(--primary, #6366f1);
  color: #ffffff;
  transform: scale(0.94);
}

.btn-conductor-control.active {
  background: var(--primary, #6366f1);
  color: #ffffff;
}

/* Controle de Tempo BPM no Dock do Regente */
.conductor-tempo-group {
  display: flex;
  align-items: center;
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 8px;
  padding: 2px 4px;
  gap: 4px;
  flex-shrink: 0;
}

.conductor-tempo-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  width: 26px;
  height: 28px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conductor-tempo-btn:active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main, #ffffff);
}

.conductor-tempo-val {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main, #f8fafc);
  min-width: 32px;
  text-align: center;
}

/* Naipes SATB com Solo / Mute Instantâneo para o Regente */
.conductor-voices-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.conductor-voice-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 8px;
  width: 44px;
  height: 38px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  position: relative;
}

.conductor-voice-char {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--text-main, #f8fafc);
  line-height: 1;
}

.conductor-voice-state {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
}

.conductor-voice-pill.is-soloed {
  background: #f59e0b !important;
  border-color: #d97706 !important;
}

.conductor-voice-pill.is-soloed .conductor-voice-char,
.conductor-voice-pill.is-soloed .conductor-voice-state {
  color: #ffffff !important;
}

.conductor-voice-pill.is-muted {
  opacity: 0.45;
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}

.conductor-voice-pill.is-muted .conductor-voice-char {
  text-decoration: line-through;
  color: #ef4444;
}

/* --------------------------------------------------------------------------
   5. Dock do Compositor (Mobile Sol-Fa Touch Keypad)
   -------------------------------------------------------------------------- */
.mobile-composer-dock {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-surface, #0f172a);
  border-top: 1px solid var(--border-color, #334155);
  z-index: 1000;
  padding: 4px 6px;
  padding-bottom: calc(4px + var(--mobile-safe-bottom));
  box-sizing: border-box;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  user-select: none;
  flex-direction: column;
  gap: 4px;
}

.composer-keypad-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

/* Teclas de Notas Sol-Fa Táteis */
.mkey-btn {
  flex: 1 1 0;
  height: 38px;
  background: var(--mobile-key-bg, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 8px;
  color: var(--mobile-key-text, #f8fafc);
  font-family: var(--font-music, var(--font-heading, sans-serif));
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.08s ease;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.2);
  touch-action: manipulation;
}

.mkey-btn:active, .mkey-btn.is-pressed {
  background: var(--primary, #6366f1) !important;
  color: #ffffff !important;
  transform: translateY(1.5px);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

/* Teclas Funcionais (Oitavas, Espaço, Apagar, Acidentes) */
.mkey-btn-fn {
  background: var(--bg-input, #0f172a);
  font-size: 0.85rem;
  font-weight: 700;
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.mkey-btn-fn.mkey-accent {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.mkey-btn-fn.mkey-del {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

.mkey-btn-fn.mkey-next {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.3);
  flex: 1.3 1 0;
}

/* Sub-dock de Voz Ativa e Acidentes */
.composer-subtools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
}

.composer-voice-switch {
  display: inline-flex;
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 6px;
  padding: 1px;
  gap: 2px;
}

.mvoice-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.mvoice-btn.active {
  background: var(--primary, #6366f1);
  color: #ffffff;
}

.composer-actions-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-m-action {
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  color: var(--text-main, #f8fafc);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.btn-m-action:active {
  background: rgba(255, 255, 255, 0.1);
}

/* Painel de Acidentes Deslizante / Popover */
.accidentals-popover {
  display: none;
  position: absolute;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border-color, #334155);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 1010;
  gap: 6px;
}

.accidentals-popover.open {
  display: flex;
}

.accidental-btn {
  width: 38px;
  height: 38px;
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 8px;
  color: #f59e0b;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.accidental-btn:active {
  background: #f59e0b;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   6. Gaveta Móvel Lateral (Off-Canvas Drawer)
   -------------------------------------------------------------------------- */
.mobile-drawer-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mobile-drawer-backdrop.open {
  display: block;
  opacity: 1;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--bg-surface, #0f172a);
  border-right: 1px solid var(--border-color, #334155);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  box-sizing: border-box;
}

.mobile-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, #334155);
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary, #6366f1);
  font-family: var(--font-heading, sans-serif);
}

.btn-drawer-close {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-drawer-close:active {
  background: rgba(255, 255, 255, 0.1);
}

.drawer-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #334155);
}

.drawer-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 8px;
}

.drawer-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-main, #f8fafc);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
  box-sizing: border-box;
}

.drawer-menu-item:active {
  background: var(--bg-input, rgba(255, 255, 255, 0.08));
}

.drawer-menu-item i {
  width: 18px;
  color: var(--primary, #6366f1);
  text-align: center;
}

.drawer-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.drawer-field-label {
  font-size: 0.8rem;
  color: var(--text-main, #f8fafc);
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawer-select {
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  color: var(--text-main, #f8fafc);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  max-width: 140px;
}

/* --------------------------------------------------------------------------
   7. Regras de Ativação Responsiva para Mobile Landscape
   Quando estiver em tela menor que 991px ou modo móvel landscape
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px), screen and (max-height: 520px) {
  /* Ocultar elementos pesados desktop */
  .musescore-titlebar,
  .toolbar,
  .sidebar-palettes,
  .guest-notice-bar {
    display: none !important;
  }

  /* Exibir a barra superior mobile */
  .mobile-topbar {
    display: flex !important;
  }

  /* Exibir o dock ativo */
  body.mobile-mode-regente .mobile-conductor-dock {
    display: flex !important;
  }

  body.mobile-mode-compositor .mobile-composer-dock {
    display: flex !important;
  }

  /* Ajuste de espaço na área de trabalho */
  .workspace-layout {
    margin-top: var(--mobile-topbar-height) !important;
    height: calc(100vh - var(--mobile-topbar-height)) !important;
    height: calc(100dvh - var(--mobile-topbar-height)) !important;
  }

  .score-scroll-area {
    padding: 6px 4px !important;
    padding-bottom: 95px !important; /* Espaço para o dock inferior */
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
  }

  .score-paper-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .score-pages-container {
    gap: 16px !important;
    padding-bottom: 20px !important;
    width: 100% !important;
  }

  /* Folha de partitura em largura 100% fluida no celular */
  .score-page.score-paper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 12px 10px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
  }

  /* Compactação do cabeçalho da partitura */
  .score-header-box {
    margin-bottom: 12px !important;
  }

  .score-title-row {
    margin-bottom: 6px !important;
  }

  .score-main-title {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
  }

  .score-subtitle {
    font-size: 0.75rem !important;
  }

  .score-hymn-num {
    font-size: 1.1rem !important;
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
  }

  .score-meta-grid {
    font-size: 0.72rem !important;
    gap: 4px !important;
  }

  /* Coluna de vozes mais compacta no mobile */
  .voice-labels-col {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  .voice-label-actions {
    display: none !important; /* Ações rápidas vão para o dock */
  }

  .voice-label-cell {
    font-size: 0.8rem !important;
    padding-right: 4px !important;
  }

  .voice-label-char {
    font-size: 0.88rem !important;
    width: 18px !important;
  }

  /* Compassos na grade */
  .solfa-system {
    gap: 0 !important;
    padding-bottom: 6px !important;
  }

  .measure-cell {
    min-width: 22px !important;
  }
}

/* --------------------------------------------------------------------------
   8. Proteção Read-Only no Modo Regente (Prevenção de Toques Acidentais)
   -------------------------------------------------------------------------- */
body.mobile-mode-regente .solfa-score-container,
body.mobile-mode-regente .score-paper {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* No modo regente, todas as células de notas, subdivisões, letras e pautas
   ignoram cliques/toques diretos, permitindo rolagem com o dedo (pan) 100% livre e suave */
body.mobile-mode-regente .score-scroll-area {
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
}

body.mobile-mode-regente .solfa-score-container .measure-cell,
body.mobile-mode-regente .solfa-score-container .note-part,
body.mobile-mode-regente .solfa-score-container .note-token,
body.mobile-mode-regente .solfa-score-container .lyrics-cell,
body.mobile-mode-regente .solfa-score-container .lyrics-part,
body.mobile-mode-regente .solfa-score-container .measure-box,
body.mobile-mode-regente .solfa-score-container .beat-column,
body.mobile-mode-regente .solfa-score-container .measure-bar-line,
body.mobile-mode-regente .solfa-score-container .slur-svg,
body.mobile-mode-regente .solfa-score-container .draggable-text,
body.mobile-mode-regente .solfa-score-container .dynamic-indicator,
body.mobile-mode-regente .solfa-score-container .repeat-volta-bracket {
  pointer-events: none !important;
  cursor: default !important;
}

/* No modo regente, cabeçalhos contenteditable também ficam protegidos contra foco acidental */
body.mobile-mode-regente .score-header-box [contenteditable] {
  pointer-events: none !important;
  -webkit-user-modify: read-only !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Selo visual discreto de Modo Regente (Somente Leitura) */
body.mobile-mode-regente .score-paper::after {
  content: 'MODO REGENTE • LEITURA';
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  font-family: var(--font-heading, sans-serif);
}

@media print {
  body.mobile-mode-regente .score-paper::after {
    display: none !important;
  }
}