/* Reproductor (reproductor.html): sobrio, oscuro por defecto, botones grandes para el dedo */

.pagina-reproductor {
  --rp-fondo: #14110d;
  --rp-panel: #1e1a15;
  --rp-linea: rgba(236, 228, 212, 0.12);
  --rp-texto: #ece4d4;
  --rp-suave: #a89c88;
  --rp-acento: #e0a36f;
  --rp-acorde: #f28b6b;
  --song-font: var(--rp-letra, 18px);
  background: var(--rp-fondo);
  color: var(--rp-texto);
  min-height: 100vh;
}

/* Temas (diálogo Colores). Los oscuros llevan además la clase rp-oscuro */
.pagina-reproductor[data-rp-tema="dia"] {
  --rp-fondo: #faf3e4;
  --rp-panel: #fffef9;
  --rp-linea: rgba(154, 79, 46, 0.18);
  --rp-texto: #2a241c;
  --rp-suave: #5a5044;
  --rp-acento: #9a4f2e;
  --rp-acorde: #b3261e;
}
.pagina-reproductor[data-rp-tema="carmelo"] {
  --rp-fondo: #241811;
  --rp-panel: #31221a;
  --rp-linea: rgba(240, 226, 196, 0.14);
  --rp-texto: #f3e8d2;
  --rp-suave: #bba88a;
  --rp-acento: #d9b26a;
  --rp-acorde: #f0c987;
}
.pagina-reproductor[data-rp-tema="mariano"] {
  --rp-fondo: #0e1a2e;
  --rp-panel: #16243c;
  --rp-linea: rgba(214, 228, 248, 0.14);
  --rp-texto: #e6eefa;
  --rp-suave: #9fb0c8;
  --rp-acento: #8fb8e8;
  --rp-acorde: #b5d3f5;
}
.pagina-reproductor[data-rp-tema="liturgico"] {
  --rp-fondo: #f3f1e7;
  --rp-panel: #fcfbf5;
  --rp-linea: rgba(47, 107, 58, 0.2);
  --rp-texto: #1f2a1f;
  --rp-suave: #4e5a4c;
  --rp-acento: #2f6b3a;
  --rp-acorde: #8a5a00;
}
.pagina-reproductor[data-rp-tema="penitencial"] {
  --rp-fondo: #1a1322;
  --rp-panel: #251b30;
  --rp-linea: rgba(232, 220, 244, 0.13);
  --rp-texto: #ece4f4;
  --rp-suave: #a99bb8;
  --rp-acento: #b58ad6;
  --rp-acorde: #d6b0f0;
}

.pagina-reproductor .nav-sitio {
  background: color-mix(in srgb, var(--rp-fondo) 94%, transparent);
  border-bottom-color: var(--rp-linea);
}
.pagina-reproductor .nav-marca { color: var(--rp-acento); font-size: 1.5rem; max-width: 65vw; }
.pagina-reproductor .nav-marca:hover { color: var(--rp-texto); }
.rp-app .nav-marca { max-width: none; }
.pagina-reproductor .nav-links a { color: var(--rp-texto); }
.pagina-reproductor .nav-links a[aria-current="page"],
.pagina-reproductor .nav-links a:hover { color: var(--rp-acento); border-bottom-color: var(--rp-acento); }
.pagina-reproductor .nav-toggle { color: var(--rp-acento); border-color: var(--rp-acento); }
@media (max-width: 720px) {
  .pagina-reproductor .nav-links { background: var(--rp-panel); }
  .pagina-reproductor .nav-marca { font-size: 1.3rem; }
}

/* Como app instalada solo se ve el reproductor: sin el menú del sitio */
.rp-app .nav-links,
.rp-app .nav-toggle,
.rp-app .rp-instalar { display: none !important; }

.rp {
  max-width: 52rem;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 0.75rem) 1rem 2rem;
}

.con-barra .rp {
  padding-bottom: 9.5rem;
}

.rp [hidden] {
  display: none !important;
}

/* ============ PESTAÑAS ============ */
.rp-pestanas {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1rem;
  background: var(--rp-panel);
  border: 1px solid var(--rp-linea);
  border-radius: 999px;
  position: sticky;
  top: calc(var(--nav-h) + 0.4rem);
  z-index: 5;
}

.rp-pestana {
  flex: 1;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.55rem 0.4rem;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--rp-suave);
  cursor: pointer;
  white-space: nowrap;
}

.rp-pestana.activa {
  background: var(--rp-acento);
  color: var(--rp-fondo);
}

/* ============ BOTONES Y TEXTOS ============ */
.rp-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  min-height: 2.4rem;
  border: 1px solid var(--rp-linea);
  border-radius: 999px;
  background: transparent;
  color: var(--rp-texto);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.rp-btn:hover:not(:disabled) { border-color: var(--rp-acento); color: var(--rp-acento); }
.rp-btn:disabled { opacity: 0.4; cursor: default; }
.rp-btn[aria-pressed="true"] { background: var(--rp-acento); border-color: var(--rp-acento); color: var(--rp-fondo); }
.rp-btn-fuerte { background: var(--rp-acento); border-color: var(--rp-acento); color: var(--rp-fondo); }
.rp-btn-fuerte:hover:not(:disabled) { filter: brightness(1.08); color: var(--rp-fondo); }
.rp-peligro { color: #f28b82; border-color: rgba(242, 139, 130, 0.4); }

.rp-aviso { color: var(--rp-suave); font-size: 0.9rem; margin: 0.5rem 0; }
.rp-error { color: #f28b82; margin: 0.5rem 0; }
.espacio { flex: 1; }

.rp h2 {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--rp-acento);
  margin: 0;
}

/* ============ CANCIONES ============ */
.rp-buscar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.rp-buscar input[type="search"],
.rp-vivo-codigo input,
.rp-editar input,
#rp-comunidad,
.rp-voz select {
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rp-linea);
  border-radius: 0.6rem;
  background: var(--rp-panel);
  color: var(--rp-texto);
  min-width: 0;
}

.rp-buscar input[type="search"] { flex: 1 1 18rem; }
.rp-check { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--rp-suave); font-size: 0.9rem; cursor: pointer; }
.rp-check input { accent-color: var(--rp-acento); width: 1.1rem; height: 1.1rem; }

.rp-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rp-lista > li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--rp-linea);
}

.rp-fila {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
  text-align: left;
  font: inherit;
  padding: 0.7rem 0.3rem;
  border: none;
  background: none;
  color: var(--rp-texto);
  cursor: pointer;
}

.rp-fila b { font-weight: 500; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-fila small { color: var(--rp-suave); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-fila:hover b { color: var(--rp-acento); }
.rp-lista > li.sonando .rp-fila b { color: var(--rp-acento); }
.rp-lista > li.sonando .rp-fila b::before { content: "♪ "; }

.rp-mas,
.rp-ico {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rp-linea);
  border-radius: 50%;
  background: none;
  color: var(--rp-texto);
  font-size: 1.15rem;
  cursor: pointer;
}

.rp-ico { width: 2.2rem; height: 2.2rem; font-size: 0.95rem; }
.rp-mas:hover, .rp-ico:hover:not(:disabled) { border-color: var(--rp-acento); color: var(--rp-acento); }
.rp-ico:disabled { opacity: 0.3; cursor: default; }

/* ============ LISTAS ============ */
.rp-bloque-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.2rem 0 0.6rem;
  flex-wrap: wrap;
}

.rp-listas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.rp-tarjeta {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rp-linea);
  border-radius: 0.8rem;
  background: var(--rp-panel);
  display: grid;
  gap: 0.6rem;
}

.rp-tarjeta-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.rp-tarjeta-cabeza > div { display: grid; gap: 0.1rem; min-width: 0; }
.rp-tarjeta-cabeza b { font-size: 1.02rem; font-weight: 560; }
.rp-tarjeta-cabeza small { color: var(--rp-suave); font-size: 0.8rem; }
.rp-tarjeta-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rp-editar { display: grid; gap: 0.6rem; }
.rp-editar label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--rp-suave); }
.rp-editar .rp-peligro { justify-self: start; }

/* ============ REPRODUCIENDO ============ */
.rp-vacio {
  text-align: center;
  color: var(--rp-suave);
  padding: 3rem 1rem;
  font-family: var(--fuente-cuerpo);
}

.rp-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.rp-momento {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-acento);
}

.rp-donde { margin: 0.1rem 0 0; color: var(--rp-suave); font-size: 0.85rem; }
.rp-ajustes { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.rp-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

#rp-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex: 1 1 100%;
}

#rp-extras .mezclador { flex: 1 1 100%; }

.rp-voz {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--rp-suave);
  font-size: 0.85rem;
}

.rp-voz select { font-size: 0.9rem; padding: 0.45rem 0.7rem; }

.rp-video {
  max-width: 480px;
  margin: 0 0 0.9rem;
}

.rp-video .yt-aviso { color: var(--rp-suave); }

.rp-sin-audio {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--rp-acento);
  background: var(--rp-panel);
  color: var(--rp-suave);
  font-size: 0.9rem;
  border-radius: 0 0.4rem 0.4rem 0;
}

/* La canción (las clases de editor/js/render.js) */
.rp-letra {
  font-family: 'Courier New', monospace;
  font-size: var(--song-font);
  line-height: 1.5;
  overflow-x: auto;
  color: var(--rp-texto);
  padding-bottom: 1rem;
}

.rp-letra .song-header { font-family: var(--fuente-cuerpo); margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rp-linea); }
.rp-letra .song-title { font-family: var(--fuente-display); font-size: 1.55em; font-weight: 600; line-height: 1.2; color: var(--rp-texto); }
.rp-letra .song-credits { font-size: 0.75em; font-style: italic; color: var(--rp-suave); margin-top: 0.2rem; }
.rp-letra .song-meta { font-size: 0.75em; color: var(--rp-suave); margin-top: 0.2rem; }
.rp-letra .song-tags { display: none; }
.rp-letra .line { white-space: pre; min-height: 1.5em; }
.rp-letra .chord-line, .rp-letra .chord { color: var(--rp-acorde); font-weight: bold; }
.rp-letra .chord-extra { color: var(--rp-suave); font-weight: normal; }
.rp-letra .section-heading { font-family: var(--fuente-cuerpo); font-weight: 600; color: var(--rp-acento); margin: 0.6em 0 0.1em; white-space: pre-wrap; }
.rp-letra .comment-line {
  font-family: var(--fuente-cuerpo); font-style: italic; font-size: 0.85em; color: var(--rp-suave);
  border-left: 3px solid var(--rp-acento); padding: 2px 10px; margin: 4px 0; white-space: pre-wrap;
}
.rp-letra .voice-section {
  border-left: 4px solid var(--vc);
  background: color-mix(in srgb, var(--vc) 10%, transparent);
  padding: 4px 0 6px 14px; margin: 10px 0; border-radius: 0 6px 6px 0;
}
.rp-letra .voice-label {
  display: inline-block; font-family: var(--fuente-cuerpo); font-size: 11px; font-weight: bold;
  color: #fff; background: var(--vc); padding: 2px 9px; border-radius: 10px; margin: 2px 0 4px;
}
.rp-letra .strum-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; white-space: normal; margin: 6px 0; font-family: var(--fuente-cuerpo); }
.rp-letra .strum-name { font-size: 0.85em; font-weight: bold; color: var(--rp-suave); }
.rp-oscuro .rp-letra .strum-svg { filter: invert(0.9) hue-rotate(180deg); }

/* Solo letra: sin líneas de acordes ni rasgueos */
.solo-letra .chord-line,
.solo-letra .strum-line { display: none; }

/* ============ EN VIVO ============ */
.rp-vivo-entrar { max-width: 26rem; margin: 1.5rem auto; display: grid; gap: 0.6rem; text-align: center; }
.rp-vivo-codigo { display: flex; gap: 0.5rem; justify-content: center; }
.rp-vivo-codigo input { width: 8rem; text-align: center; font-size: 1.6rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }

.rp-vivo-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--rp-linea);
  border-radius: 0.8rem;
  background: var(--rp-panel);
  font-size: 0.88rem;
  color: var(--rp-suave);
}

.rp-vivo-punto {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #e53935;
  animation: rp-latido 1.6s ease-in-out infinite;
}

.vivo-terminado .rp-vivo-punto { background: var(--rp-suave); animation: none; }

@keyframes rp-latido {
  50% { opacity: 0.35; }
}

.rp-segmentado { display: inline-flex; gap: 0.25rem; }
.rp-segmentado .rp-btn { min-height: 2.1rem; padding: 0.35rem 0.7rem; }

/* ============ BARRA DE REPRODUCCIÓN ============ */
.rp-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr);
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--rp-panel) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rp-linea);
}

.rp-barra[hidden] { display: none; }

.rp-barra-titulo {
  font: inherit;
  font-weight: 500;
  text-align: left;
  border: none;
  background: none;
  color: var(--rp-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  padding: 0;
}

.rp-controles { display: flex; align-items: center; gap: 0.5rem; }

.rp-ctl {
  width: 2.8rem;
  height: 2.8rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--rp-texto);
  font-size: 1.2rem;
  cursor: pointer;
}

.rp-ctl:disabled { opacity: 0.3; cursor: default; }
.rp-play { width: 3.4rem; height: 3.4rem; background: var(--rp-acento); color: var(--rp-fondo); font-size: 1.35rem; }
.rp-modo { color: var(--rp-suave); font-size: 1.05rem; }
.rp-modo[aria-pressed="true"] { color: var(--rp-acento); background: color-mix(in srgb, var(--rp-acento) 16%, transparent); }

.rp-avance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--rp-suave);
  font-variant-numeric: tabular-nums;
}

.rp-avance input { flex: 1; min-width: 0; accent-color: var(--rp-acento); }

@media (max-width: 720px) {
  .rp-barra {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
  .rp-controles { justify-content: center; gap: 0.3rem; }
  .rp-ctl { width: 2.5rem; height: 2.5rem; }
  .rp-play { width: 3.2rem; height: 3.2rem; }
  .con-barra .rp { padding-bottom: 12rem; }
  .rp-toast { bottom: 11rem; }
  .rp-pestana { font-size: 0.82rem; }
  .rp-ajustes .rp-btn { padding: 0.45rem 0.65rem; }
}

/* ============ DIÁLOGO Y AVISOS ============ */
.rp-dlg {
  width: min(26rem, 94vw);
  padding: 1rem 1.1rem;
  border: 1px solid var(--rp-linea);
  border-radius: 0.9rem;
  background: var(--rp-panel);
  color: var(--rp-texto);
}

.rp-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.rp-dlg .rp-elegir { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; max-height: 50vh; overflow: auto; }
.rp-dlg .rp-elegir li { border-bottom: 1px solid var(--rp-linea); }
.rp-dlg-acciones { display: flex; gap: 0.5rem; }
.rp-dlg .rp-elegir .rp-sugerida { background: color-mix(in srgb, var(--rp-acento) 12%, transparent); border-radius: 0.5rem; }
.rp-dlg .rp-elegir .rp-sugerida b { color: var(--rp-acento); }

.rp-temas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.6rem 0 1rem; }
.rp-tema-op {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.3rem;
  border: 2px solid var(--rp-linea);
  border-radius: 0.7rem;
  background: none;
  color: var(--rp-texto);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.rp-tema-op[aria-checked="true"] { border-color: var(--rp-acento); }
.rp-muestra {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.4);
  background: linear-gradient(135deg, var(--m-fondo) 50%, var(--m-acento) 50%);
}
.rp-acento-propio { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.rp-acento-propio input { width: 3rem; height: 2.2rem; padding: 0; border: 1px solid var(--rp-linea); border-radius: 0.4rem; background: none; }
.rp-pasos { margin: 0.5rem 0 0.8rem; padding-left: 1.3rem; line-height: 1.6; }
.rp-instalar { margin-left: auto; align-self: center; }
.rp-video-nota { max-width: 480px; margin: -0.5rem 0 0.9rem; font-size: 0.8rem; }

.rp-toast {
  position: fixed;
  left: 50%;
  bottom: 8.5rem;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--rp-texto);
  color: var(--rp-fondo);
  font-size: 0.9rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  max-width: 92vw;
}

/* Mezclador y partituras en modo noche */
.rp-oscuro .mezclador { background: var(--rp-panel); border-color: var(--rp-linea); color: var(--rp-texto); }
.rp-oscuro .mz-cabeza { color: var(--rp-acento); }
.rp-oscuro .mz-estado, .rp-oscuro .mz-mivoz, .rp-oscuro .mz-tiempo { color: var(--rp-suave); }
.rp-oscuro .mz-voz { color: color-mix(in srgb, var(--vc) 55%, #fff); }
.rp-oscuro .mezclador .btn-chico { background: transparent; color: var(--rp-texto); border-color: var(--rp-linea); }
.rp-oscuro .mezclador [aria-pressed="true"] { background: var(--rp-acento); border-color: var(--rp-acento); color: var(--rp-fondo); }
.rp-oscuro .dlg-partitura { background: var(--rp-panel); color: var(--rp-texto); }
.rp-oscuro .partitura-titulo { color: var(--rp-acento); }
.rp-oscuro .dlg-partitura .btn-chico { background: transparent; color: var(--rp-texto); border-color: var(--rp-linea); }