/* ============================================================
   Louvor Set — Estilos globais
   ============================================================ */

/* ---- Variáveis ---- */
:root {
  --ls-primary:        #6c63ff;
  --ls-primary-dark:   #5a52d5;
  --ls-primary-light:  #ede9ff;
  --ls-sidebar-bg:     #1a1a2e;
  --ls-sidebar-text:   #c8c8d8;
  --ls-sidebar-hover:  rgba(108,99,255,.15);
  --ls-sidebar-active: rgba(108,99,255,.25);
  --ls-sidebar-width:  260px;
  --ls-topbar-h:       60px;
  --ls-body-bg:        #f4f5f9;
  --ls-card-bg:        #ffffff;
  --ls-border:         #e2e5ed;
  --ls-text:           #1e1e2e;
  --ls-text-muted:     #7a7a9a;
  --ls-radius:         10px;
  --ls-shadow:         0 2px 12px rgba(0,0,0,.08);
  --ls-transition:     .22s ease;

  /* Apresentação (sobrescritas via PHP inline) */
  --ap-bg:      #0d1117;
  --ap-fg:      #f0f0f0;
  --ap-title:   #ffd166;
  --ap-acorde:  #e63946;
  --ap-font:    'Inter', sans-serif;
  --ap-size:    1.15rem;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--ls-body-bg);
  color: var(--ls-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ls-primary); text-decoration: none; }
a:hover { color: var(--ls-primary-dark); }

.fw-500 { font-weight: 500; }

/* ============================================================
   LOGIN
   ============================================================ */
.ls-login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2b55 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
}

.ls-login-wrapper {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ls-login-card {
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.ls-login-brand {
  text-align: center;
  margin-bottom: 2rem;
}

.ls-login-icon {
  width: 72px;
  height: 72px;
  background: var(--ls-primary-light);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--ls-primary);
  margin-bottom: .75rem;
}

.ls-login-logo {
  max-height: 80px;
  margin-bottom: .75rem;
  object-fit: contain;
}

.ls-login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ls-text);
  margin: 0 0 .25rem;
}

.ls-login-subtitle {
  color: var(--ls-text-muted);
  margin: 0;
  font-size: .9rem;
}

.ls-btn-login {
  background: var(--ls-primary);
  border-color: var(--ls-primary);
  font-weight: 600;
  padding: .65rem;
  font-size: 1rem;
  border-radius: 8px;
  transition: background var(--ls-transition), transform .1s;
}
.ls-btn-login:hover {
  background: var(--ls-primary-dark);
  border-color: var(--ls-primary-dark);
  transform: translateY(-1px);
}

.ls-login-version { opacity: .5; }

/* ============================================================
   LAYOUT DO PAINEL
   ============================================================ */

/* ---- Sidebar ---- */
.ls-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--ls-sidebar-width);
  height: 100vh;
  background: var(--ls-sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width var(--ls-transition), transform var(--ls-transition);
  overflow: hidden;
}

.ls-sidebar.collapsed {
  width: 68px;
}

.ls-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.2rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
  overflow: hidden;
  min-height: var(--ls-topbar-h);
}

.ls-sidebar-logo {
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.ls-sidebar.collapsed .ls-sidebar-brand span,
.ls-sidebar.collapsed .ls-nav-label,
.ls-sidebar.collapsed .ls-nav-item span,
.ls-sidebar.collapsed .ls-nav-item .ms-auto,
.ls-sidebar.collapsed .ls-user-details,
.ls-sidebar.collapsed .ls-sidebar-footer .ls-user-name,
.ls-sidebar.collapsed .ls-sidebar-footer .ls-user-nivel {
  display: none;
}

.ls-sidebar.collapsed .ls-nav-item {
  justify-content: center;
  padding: .75rem 0;
}

/* ---- Navegação sidebar ---- */
.ls-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.ls-nav-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding: 1rem 1.2rem .35rem;
  white-space: nowrap;
  overflow: hidden;
}

.ls-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.2rem;
  color: var(--ls-sidebar-text);
  font-size: .92rem;
  font-weight: 400;
  transition: background var(--ls-transition), color var(--ls-transition);
  white-space: nowrap;
  overflow: hidden;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.ls-nav-item i { font-size: 1.1rem; flex-shrink: 0; }
.ls-nav-item:hover {
  background: var(--ls-sidebar-hover);
  color: #fff;
  text-decoration: none;
}
.ls-nav-item.active {
  background: var(--ls-sidebar-active);
  color: #fff;
  border-left-color: var(--ls-primary);
  font-weight: 600;
}

/* ---- Rodapé sidebar ---- */
.ls-sidebar-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}

.ls-user-info {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  overflow: hidden;
}

.ls-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ls-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}

.ls-user-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ls-user-name {
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ls-user-nivel {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
}

.ls-btn-logout {
  color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.15);
  padding: .3rem .5rem;
  flex-shrink: 0;
}
.ls-btn-logout:hover { color: #ff6b6b; border-color: #ff6b6b; }

/* ---- Main content ---- */
.ls-main {
  margin-left: var(--ls-sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--ls-transition);
}
.ls-main.expanded { margin-left: 68px; }

/* ---- Topbar ---- */
.ls-topbar {
  height: var(--ls-topbar-h);
  background: var(--ls-card-bg);
  border-bottom: 1px solid var(--ls-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.ls-sidebar-toggle {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--ls-text-muted);
  cursor: pointer;
  padding: .25rem .4rem;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
}
.ls-sidebar-toggle:hover { background: var(--ls-body-bg); color: var(--ls-text); }

.ls-page-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
  color: var(--ls-text);
}

.ls-topbar-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ---- Flash messages ---- */
.ls-flash-container { padding: 1rem 1.5rem 0; }

/* ---- Conteúdo ---- */
.ls-content { padding: 1.5rem; flex: 1; }

/* ============================================================
   CARDS E TABELAS DO PAINEL
   ============================================================ */
.ls-card {
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
}

.ls-card-header {
  background: var(--ls-card-bg);
  border-bottom: 1px solid var(--ls-border);
  font-weight: 600;
  font-size: .95rem;
  padding: .9rem 1.1rem;
  border-radius: var(--ls-radius) var(--ls-radius) 0 0 !important;
}

.ls-table thead th {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ls-text-muted);
  background: var(--ls-body-bg);
  border-bottom: 2px solid var(--ls-border);
  padding: .75rem 1rem;
}

.ls-table tbody td {
  padding: .75rem 1rem;
  vertical-align: middle;
  border-color: var(--ls-border);
  font-size: .9rem;
}

.ls-table tbody tr:hover { background: #f8f9ff; }
.ls-list-item { padding: .75rem 1rem; }

/* ---- Badges de tipo ---- */
.badge { font-weight: 500; }
.ls-badge-tipo-cifra  { background: #fff0f0; color: #c0392b; }
.ls-badge-tipo-cifracc {background: #f9eaea; color: #c1560a; }
.badge.ls-badge-tipo-cifracc {font-size: 0; /* esconde o texto original sem quebrar layout */}
.badge.ls-badge-tipo-cifracc::before {content: "Cifra com Capo"; font-size: 0.75rem; /* ajuste para o tamanho que você usa nas badges */}
.ls-badge-tipo-tab    { background: #f0f4ff; color: #2980b9; }
.ls-badge-tipo-letra  { background: #f0fff4; color: #27ae60; }

/* ---- Badge de instrumento (módulo músicos) ---- */
.ls-badge-instrumento {
  background: rgba(108,99,255,.1);
  color: var(--ls-primary);
  font-size: .75rem;
  font-weight: 500;
  padding: .2rem .55rem;
  border-radius: 20px;
  border: 1px solid rgba(108,99,255,.2);
}

/* ---- Cards de estatística ---- */
.ls-stat-card {
  background: var(--ls-card-bg);
  border-radius: var(--ls-radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--ls-shadow);
  border: 1px solid var(--ls-border);
  border-left-width: 4px;
}

.ls-stat-cifra  { border-left-color: #e63946; }
.ls-stat-tab    { border-left-color: #2196f3; }
.ls-stat-letra  { border-left-color: #27ae60; }
.ls-stat-culto  { border-left-color: var(--ls-primary); }

.ls-stat-icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.ls-stat-cifra .ls-stat-icon  { background: #fff0f0; color: #e63946; }
.ls-stat-tab .ls-stat-icon    { background: #f0f4ff; color: #2196f3; }
.ls-stat-letra .ls-stat-icon  { background: #f0fff4; color: #27ae60; }
.ls-stat-culto .ls-stat-icon  { background: var(--ls-primary-light); color: var(--ls-primary); }

.ls-stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
.ls-stat-label {
  display: block;
  font-size: .8rem;
  color: var(--ls-text-muted);
  margin-top: .2rem;
}

.ls-exec-badge {
  display: inline-block;
  background: var(--ls-primary-light);
  color: var(--ls-primary);
  font-weight: 700;
  font-size: .8rem;
  padding: .2rem .6rem;
  border-radius: 20px;
}

/* ---- Busca / filtros ---- */
.ls-search-bar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Formulários do painel ---- */
.ls-form-card {
  background: var(--ls-card-bg);
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-border);
  box-shadow: var(--ls-shadow);
  padding: 1.5rem;
}

.ls-textarea-cifra {
  font-family: 'Courier New', monospace;
  font-size: .9rem;
  line-height: 1.7;
  min-height: 320px;
  resize: vertical;
}

/* Botão de ajuda para inserir colchetes */
.ls-acorde-helper {
  font-size: .78rem;
  color: var(--ls-text-muted);
}

/* ---- Set list (culto form) ---- */
.ls-setlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ls-setlist-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--ls-card-bg);
  border: 1px solid var(--ls-border);
  border-radius: 8px;
  padding: .65rem .85rem;
  margin-bottom: .4rem;
  transition: box-shadow .15s;
}

.ls-setlist-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.ls-setlist-drag {
  color: var(--ls-text-muted);
  cursor: grab;
  font-size: 1.1rem;
}
.ls-setlist-drag:active { cursor: grabbing; }

.ls-setlist-num {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ls-text-muted);
  width: 20px;
  text-align: center;
}

.ls-setlist-info { flex: 1; min-width: 0; }
.ls-setlist-nome {
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-setlist-meta { font-size: .78rem; color: var(--ls-text-muted); }

.ls-tom-input {
  width: 80px;
  font-size: .85rem;
  padding: .3rem .5rem;
}

.ls-tom-original {
  font-size: .72rem;
  color: var(--ls-text-muted);
  white-space: nowrap;
}

/* Autocomplete de busca de músicas */
.ls-autocomplete-wrapper { position: relative; }

.ls-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--ls-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.ls-autocomplete-list.show { display: block; }

.ls-autocomplete-item {
  padding: .6rem 1rem;
  cursor: pointer;
  font-size: .9rem;
  border-bottom: 1px solid var(--ls-border);
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background .1s;
}
.ls-autocomplete-item:last-child { border-bottom: none; }
.ls-autocomplete-item:hover { background: var(--ls-body-bg); }
.ls-autocomplete-item .ls-ac-nome { font-weight: 600; flex: 1; }
.ls-autocomplete-item .ls-ac-meta { font-size: .78rem; color: var(--ls-text-muted); }

/* ============================================================
   PÁGINA PÚBLICA (index.php raiz)
   ============================================================ */
.ls-public-page {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.ls-public-logo {
  max-height: 140px;
  object-fit: contain;
  margin-bottom: 2.5rem;
}

.ls-public-logo-icon {
  font-size: 4rem;
  color: var(--ls-primary);
  margin-bottom: 2rem;
  display: block;
  text-align: center;
}

.ls-public-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  width: 100%;
  max-width: 740px;
}

.ls-public-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: #f0fff4;
  border: 2px solid #c3e6cb;
  border-radius: 14px;
  padding: 2rem 1rem;
  color: #1a5c2e;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all .2s;
}
.ls-public-btn:hover {
  background: #27ae60;
  border-color: #27ae60;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(39,174,96,.25);
  text-decoration: none;
}

.ls-public-btn i { font-size: 2rem; }

/* ============================================================
   APRESENTAÇÃO (culto-*.php)
   ============================================================ */
.ls-ap-body {
  margin: 0;
  padding: 0;
  background: var(--ap-bg);
  color: var(--ap-fg);
  font-family: var(--ap-font);
  font-size: var(--ap-size);
  min-height: 100vh;
  overflow-x: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Barra de controles */
.ls-ap-controls {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: .6rem 1rem;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  gap: .5rem;
  flex-wrap: nowrap;
  transition: opacity .4s, transform .4s;
}

.ls-ap-controls.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.ls-ap-culto-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.ls-ap-culto-nome {
  color: var(--ap-title);
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ls-ap-culto-data {
  color: rgba(255,255,255,.6);
  font-size: .75rem;
}

/* Botões de controle */
.ls-ap-btns {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.ls-ap-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 7px;
  padding: .3rem .55rem;
  font-size: .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .25rem;
  line-height: 1;
  transition: background .15s;
  white-space: nowrap;
  min-height: 34px;
}
.ls-ap-btn:hover { background: rgba(255,255,255,.25); }
.ls-ap-btn.active { background: var(--ls-primary); border-color: var(--ls-primary); }

.ls-ap-btn-size { font-weight: 700; font-size: .9rem; }

/* Área de conteúdo */
.ls-ap-stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 80px 5vw 100px;
  touch-action: pan-y;
}

/* Nome da música */
.ls-ap-musica-nome {
  font-size: 2em;
  font-weight: 800;
  color: var(--ap-title);
  margin-bottom: .15em;
  line-height: 1.2;
}

/* Tom */
.ls-ap-tom {
  font-size: .85em;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.4em;
  font-weight: 500;
}

/* Conteúdo da música */
.ls-ap-conteudo {
  line-height: 2;
  letter-spacing: .01em;
  max-width: 900px;
}

/* Acordes coloridos */
.ls-acorde {
  font-weight: 800;
  display: inline;
  /* color vem do inline style */
}

/* Tab */
.ls-tab {
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: .9em;
  white-space: pre;
  line-height: 1.6;
  overflow-x: auto;
  background: transparent;
  color: var(--ap-fg);
  border: none;
  padding: 0;
  margin: 0;
}

/* Navegação inferior (setas) */
.ls-ap-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 1rem;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  transition: opacity .4s, transform .4s;
}

.ls-ap-nav.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.ls-ap-nav-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.ls-ap-nav-btn:hover   { background: rgba(255,255,255,.3); }
.ls-ap-nav-btn:disabled { opacity: .3; cursor: default; }

.ls-ap-counter {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  text-align: center;
  line-height: 1.3;
}

.ls-ap-counter strong {
  color: rgba(255,255,255,.85);
  font-size: 1rem;
}

/* Modo Light da apresentação */
.ls-ap-body.ls-ap-light {
  --ap-bg: #ffffff;
  --ap-fg: #1a1a1a;
  --ap-title: #1a5c2e;
}
.ls-ap-body.ls-ap-light .ls-ap-controls,
.ls-ap-body.ls-ap-light .ls-ap-nav {
  background: rgba(240,240,240,.85);
}
.ls-ap-body.ls-ap-light .ls-ap-btn { color: #1a1a1a; border-color: rgba(0,0,0,.2); }
.ls-ap-body.ls-ap-light .ls-ap-culto-nome { color: #1a5c2e; }
.ls-ap-body.ls-ap-light .ls-ap-culto-data { color: rgba(0,0,0,.5); }
.ls-ap-body.ls-ap-light .ls-ap-nav-btn { color: #1a1a1a; border-color: rgba(0,0,0,.2); }
.ls-ap-body.ls-ap-light .ls-ap-counter { color: rgba(0,0,0,.5); }
.ls-ap-body.ls-ap-light .ls-ap-counter strong { color: rgba(0,0,0,.8); }

/* Transição entre músicas */
.ls-ap-stage { transition: opacity .25s ease; }
.ls-ap-stage.fade-out { opacity: 0; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 767.98px) {

  /* Sidebar mobile: sobrepõe o conteúdo */
  .ls-sidebar {
    transform: translateX(-100%);
    width: var(--ls-sidebar-width) !important;
  }
  .ls-sidebar.mobile-open { transform: translateX(0); }
  .ls-main { margin-left: 0 !important; }

  .ls-content { padding: 1rem; }
  .ls-topbar  { padding: 0 1rem; }

  .ls-ap-musica-nome { font-size: 1.5em; }
  .ls-ap-stage { padding: 75px 4vw 90px; }

  .ls-public-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .ls-ap-btns { gap: .25rem; }
  .ls-ap-btn  { padding: .28rem .45rem; font-size: .8rem; min-height: 32px; }
  .ls-sidebar.collapsed .ls-nav-label {display: block;}
  .ls-sidebar.collapsed .ls-nav-item {justify-content: flex-start;}
}

@media (max-width: 400px) {
  .ls-public-grid { grid-template-columns: 1fr; }
}

/* Overlay mobile */
.ls-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1039;
}
.ls-overlay.show { display: block; }

/* ============================================================
   UTILITÁRIOS EXTRAS
   ============================================================ */
.ls-color-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: .35rem;
}

.ls-tom-badge {
  display: inline-block;
  background: rgba(108,99,255,.12);
  color: var(--ls-primary);
  font-size: .75rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 4px;
}

.ls-link-icon {
  font-size: .85rem;
  color: var(--ls-text-muted);
}
.ls-link-icon:hover { color: var(--ls-primary); }

/* Ordenação ativa (SortableJS) */
.sortable-ghost {
  opacity: .4;
  background: var(--ls-primary-light) !important;
}
.sortable-chosen { box-shadow: 0 4px 16px rgba(108,99,255,.3) !important; }


/* ---- Layout 2 colunas na apresentação ---- */
#apStage.duas-colunas #apConteudo {
  columns: 2;
  column-gap: 3rem;
  column-rule: 1px solid rgba(255,255,255,.1);
}

#apStage.duas-colunas #apConteudo br {
  display: block;
}

/* Em telas pequenas força 1 coluna mesmo com o botão ativo 
@media (max-width: 700px) {
  #apStage.duas-colunas #apConteudo {
    columns: 1;
  }
}*/


/* ---- Preserva espaços na cifra ---- */
#apStage[data-tipo="cifra"] #apConteudo, #apStage[data-tipo="cifracc"] #apConteudo {
  white-space: pre-wrap;
  /*font-family: 'Courier New', Courier, monospace;*/
  font-size: inherit;
  line-height: 1.7;
  text-transform: uppercase;
}

/* ---- 2 colunas: só desktop acima de 1024px ---- */
#apStage.duas-colunas #apConteudo {
  columns: 2;
  column-gap: 3rem;
  column-rule: 1px solid rgba(255,255,255,.1);
}
/*
@media (max-width: 1024px) {
  #apStage.duas-colunas #apConteudo {
    columns: 1;
  }
}*/

/* Cifra com 2 colunas mantém pre-wrap ---- */
#apStage[data-tipo="cifra"].duas-colunas #apConteudo, #apStage[data-tipo="cifracc"].duas-colunas #apConteudo {
  white-space: pre-wrap;
}