/* ============================================================
   Frasly Music · Hoja de estilos (v2, comunidad)
   Estilo: minimalista, limpio, centrado en la experiencia.
   ============================================================ */

:root {
  --bg: #0d0d12;
  --bg-soft: #15151d;
  --bg-card: #1a1a24;
  --text: #ececf1;
  --text-dim: #9a9aa8;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #8b7cf6;
  --accent-2: #67e8f9;
  --radius: 18px;
  --shadow: 0 14px 50px rgba(0, 0, 0, 0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea {
  font-family: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}
label { display: block; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 4px; }
.optional { margin-top: 10px; }

.hidden { display: none !important; }
/* El atributo HTML "hidden" (elemento.hidden = true) es distinto de la
   clase .hidden de arriba, y sin esto pierde contra CUALQUIER regla de
   display más específica -- confirmado en producción: .primary-btn
   {display:inline-block} y .ad-banner{display:flex} lo anulaban, así
   que instalarBtn.hidden=true (lib/instalar.js) y adBanner.hidden=true
   (lib/banner.js) no ocultaban nada en la práctica. */
[hidden] { display: none !important; }

.consent-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.consent-row input[type="checkbox"] { width: auto; margin-top: 3px; flex: none; }
.consent-row span { color: var(--text-dim); font-size: 0.82rem; }
.consent-row a { color: var(--accent); text-decoration: underline; }

.danger-btn { color: #f87171; border-color: rgba(248, 113, 113, 0.35); }

.mood-card.is-disabled { opacity: .4; pointer-events: none; }

.is-disabled { color: var(--text-dim); cursor: default; }

/* ---------- Header / menú ---------- */
.app-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 24px 10px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.logo-mark {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(from 0deg, #8b7cf6, #67e8f9, #f0abfc, #8b7cf6);
  animation: spin 16s linear infinite;
  box-shadow: 0 0 50px rgba(139, 124, 246, 0.45);
  flex-shrink: 0;
}
.app-header-inner { flex: 1; }
.menu-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ececf1, #c7c7f0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.menu-subtitle { color: var(--text-dim); font-size: 0.95rem; margin-top: 2px; }

.top-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.top-link {
  font-size: 0.85rem;
  border: 1px solid var(--line);
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--text-dim);
  transition: all 0.2s ease;
}
.top-link:hover { border-color: var(--accent); color: var(--text); }

/* padding-bottom generoso (30-ago-2026): sitio de sobra reservado para que
   el menú flotante único, fijo abajo a la derecha, nunca coincida con la
   última tarjeta o botón real de la pantalla al llegar al final del
   scroll (confirmado con una captura real: tapaba la opción "Corta"). */
.container { max-width: 1180px; margin: 0 auto; padding: 18px 24px 100px; }
.container-narrow { max-width: 720px; }
.container-wide { max-width: 1240px; }

@media (max-width: 640px) { .app-header { padding-top: 20px; } }

/* ---------- Menú de estados ---------- */
.moods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.mood-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  color: var(--text);
  text-align: left;
  padding: 0;
  min-height: 190px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: var(--shadow);
}
.mood-card:hover {
  transform: translateY(-5px);
  border-color: var(--c);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
.mood-card-bg {
  position: absolute; inset: 0; opacity: 0.35;
  transition: opacity 0.4s ease, transform 0.7s ease;
}
.mood-card:hover .mood-card-bg { opacity: 0.55; transform: scale(1.05); }
.mood-card-body { position: relative; padding: 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.mood-icon { font-size: 1.6rem; opacity: 0.95; }
.mood-name { font-size: 1.25rem; font-weight: 700; }
.mood-desc { color: var(--text-dim); font-size: 0.86rem; flex: 1; }
.mood-styles {
  font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--c); margin-top: 8px; opacity: 0.9;
}
.badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 0.62rem; padding: 4px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); color: var(--text-dim);
}

.app-footer { text-align: center; padding: 18px; color: var(--text-dim); font-size: 0.78rem; }

/* ---------- Paneles comunes ---------- */
.panel {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.panel-head { margin-bottom: 18px; }
.panel-title { font-size: 1.35rem; font-weight: 700; }
.panel-sub { color: var(--text-dim); font-size: 0.9rem; margin-top: 4px; }

.primary-btn, .secondary-btn {
  display: inline-block;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.primary-btn { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0d0d12; }
.secondary-btn { background: rgba(255, 255, 255, 0.05); color: var(--text); border: 1px solid var(--line); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-2px); opacity: 0.92; }
.primary-btn:disabled, .secondary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Top bar del player ---------- */
/* EL SCROLL DE LA PANTALLA DE ELEGIR (31-ago-2026).
   Aqui ponia "overflow: hidden" a secas, junto con la altura fija de la
   ventana. Pensado para el reproductor a pantalla completa, donde no debe
   moverse nada. Pero esta MISMA clase la lleva la pantalla de "¿Donde quieres
   escucharlo? / ¿Cuanto quieres?", que en un movil mide 1.254 px de alto en
   una ventana de 812: los ultimos 442 px, con el boton "Empezar" dentro,
   quedaban fuera de alcance y la pagina no se dejaba bajar. En el ordenador
   no se veia, porque ahi la ventana es mas alta y cabe.
   Se conserva el hidden HORIZONTAL, que es el que evita que algo se salga por
   los lados, y se permite bajar. Con el reproductor puesto el contenido cabe,
   asi que ahi no aparece barra ninguna.
   Comprobado en un movil de 375x812 antes de publicarlo: se llega al boton,
   se pulsa y arranca la musica. */
.player-page { overflow-x: hidden; overflow-y: auto; }
.player-backdrop { position: fixed; inset: 0; z-index: -1; transition: background 1s ease; }
.player-top {
  max-width: 1180px; margin: 0 auto; padding: 20px 24px 6px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.back-link { font-weight: 600; opacity: 0.85; transition: opacity 0.2s, color 0.2s; font-size: 0.92rem; }
.back-link:hover { opacity: 1; color: var(--accent); }
.player-mood-info { flex: 1; display: flex; flex-direction: column; }
.player-mood-name { font-weight: 700; font-size: 1.02rem; }
.player-style-name { color: var(--text-dim); font-size: 0.78rem; }
.share-btn {
  border: 1px solid var(--accent); color: var(--accent);
  background: transparent; padding: 9px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  transition: all 0.2s ease;
}
.share-btn:hover { background: var(--accent); color: #0d0d12; }

.community-page .player-top, .form-page .player-top {
  position: static;
  border-bottom: 1px solid var(--line);
}

/* ---------- Estilos (paso 1) ---------- */
.styles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.style-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; text-align: left; color: var(--text);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.style-card:hover { transform: translateY(-3px); border-color: var(--c); }
.style-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.style-count { font-size: 0.78rem; color: var(--text-dim); }

/* ---------- Duración (paso 2) ---------- */
.duration-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.duration-option {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; text-align: center; color: var(--text); transition: all 0.2s ease;
}
.duration-option:hover { border-color: var(--accent); }
.duration-option.is-selected { border-color: var(--accent); background: rgba(139, 124, 246, 0.12); }
.duration-option:disabled { opacity: 0.5; cursor: not-allowed; }
.duration-option:disabled:hover { border-color: var(--line); }
.duration-label { display: block; font-weight: 700; font-size: 1.05rem; }
.duration-desc { display: block; color: var(--text-dim); font-size: 0.78rem; margin-top: 3px; }
.duration-free {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 20px; color: var(--text-dim); font-size: 0.92rem;
}
.duration-free input {
  width: 90px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--text);
  font-size: 1rem; text-align: center;
}
.duration-free input:focus { outline: none; border-color: var(--accent); }
.duration-free input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Reproductor (paso 3) ---------- */
#playerPanel { text-align: center; }
.embed-wrap {
  position: relative;
  width: 100%; max-width: 700px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 18px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.embed-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  transition: opacity 0.4s ease;
}
.music-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Dos huecos superpuestos: el activo se ve, el otro prepara en silencio
   la siguiente canción para que el cambio de pista sea instantáneo. */
.music-slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.music-slot.is-active {
  opacity: 1; pointer-events: auto;
}
.music-slot iframe, .music-slot > div {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.music-frame.is-loading .music-slot.is-active {
  opacity: 0;
}
.embed-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: var(--text-dim);
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

.now-info { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.provider-tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; color: var(--text-dim);
}
.now-label { font-weight: 600; }
.track-index { color: var(--text-dim); font-size: 0.82rem; }

.session-progress { max-width: 700px; margin: 0 auto 16px; }
.progress-track { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s linear; }
.progress-time { text-align: center; color: var(--text-dim); font-size: 0.82rem; margin-top: 6px; }

.player-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ctl-btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--text);
  font-size: 1.15rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.22s ease;
}
.ctl-btn:hover { border-color: var(--accent); transform: scale(1.06); }
.ctl-btn.is-active { border-color: var(--accent); color: var(--accent); background: rgba(139, 124, 246, 0.12); }
.ctl-main { width: 66px; height: 66px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #0d0d12; font-size: 1.3rem; }
.ctl-quiet { color: var(--text-dim); }

.fallback-banner {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(220, 90, 50, 0.92); color: #fff;
  padding: 12px 22px; border-radius: 999px; font-size: 0.86rem; z-index: 60;
  box-shadow: var(--shadow); max-width: 90%;
}

.center-actions { display: flex; gap: 14px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

.wake-hint {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  max-width: 460px; margin: 16px auto 0; text-align: center;
  color: var(--text-dim); font-size: 0.78rem; line-height: 1.4;
}
.wake-hint .wake-hint-icon { flex: none; font-size: 1rem; }

.dim-toggle {
  display: block; margin: 10px auto 0; padding: 7px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--text-dim); font-size: 0.78rem; cursor: pointer;
}
.dim-toggle:hover { border-color: var(--accent); }
.dim-toggle.is-on { border-color: var(--accent); color: var(--accent); background: rgba(139, 124, 246, 0.12); }

/* Capa encima de todo, sin bloquear el dedo (pointer-events:none): oscurece
   lo que se ve sin tapar los botones que hay debajo. El wake lock sigue
   igual de activo -- esto no apaga nada, solo se ve más oscuro. */
.dim-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72);
  pointer-events: none; z-index: 9999;
}
.dim-overlay.hidden { display: none; }

/* ---------- Banner del plan gratis ---------- */
.ad-banner {
  display: flex; align-items: center; gap: 10px;
  max-width: 900px; margin: 0 auto 14px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card);
  overflow: hidden;
}
.ad-banner-texto { font-size: 0.85rem; color: var(--text-dim); flex: 1 1 auto; }
.ad-banner-img { flex: none; border-radius: 8px; object-fit: contain; }
.ad-banner-video { flex: none; border-radius: 8px; overflow: hidden; }
.ad-banner-video iframe { display: block; border: none; }

.ad-banner-pequeno { padding: 5px 12px; }
.ad-banner-pequeno .ad-banner-img { height: 28px; width: 28px; }
.ad-banner-pequeno .ad-banner-video, .ad-banner-pequeno .ad-banner-video iframe { height: 60px; width: 106px; }

.ad-banner-mediano .ad-banner-img { height: 48px; width: 48px; }
.ad-banner-mediano .ad-banner-video, .ad-banner-mediano .ad-banner-video iframe { height: 100px; width: 178px; }

.ad-banner-grande { padding: 12px 16px; }
.ad-banner-grande .ad-banner-img { height: 80px; width: 80px; }
.ad-banner-grande .ad-banner-video, .ad-banner-grande .ad-banner-video iframe { height: 160px; width: 284px; }

.fm-relevo-aviso {
  background: rgba(220, 90, 50, 0.15); color: #f2a488;
  border: 1px solid rgba(220, 90, 50, 0.35); border-radius: 10px;
  padding: 10px 14px; font-size: 0.85rem; margin-bottom: 14px;
}

/* ---------- Formularios ---------- */
.create-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
input[type="color"] { padding: 3px; height: 46px; cursor: pointer; }
.form-block { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.form-block-head { margin-bottom: 10px; }
.form-block-head h3 { font-size: 0.95rem; }
.hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 2px; }
.link-feedback { margin-top: 10px; }
.fb { font-size: 0.8rem; padding: 4px 0; }
.fb-ok { color: #4ade80; }
.fb-error { color: #f87171; }

.custom-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.custom-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.custom-icon { font-size: 1.3rem; width: 34px; text-align: center; }
.custom-item-info { flex: 1; display: flex; flex-direction: column; }
.custom-item-info strong { font-size: 0.95rem; }
.custom-item-info span { color: var(--text-dim); font-size: 0.78rem; }
.mini-btn {
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 9px; padding: 6px 11px; font-size: 0.78rem; transition: all 0.2s ease;
}
.mini-btn:hover { border-color: #f87171; color: #f87171; }
.subset-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.empty-hint { color: var(--text-dim); font-size: 0.9rem; }
.import-result { color: var(--text-dim); font-size: 0.85rem; margin-top: 8px; }
.file-btn { position: relative; }
.import-result.ok { color: #4ade80; }

/* ---------- Comunidad ---------- */
.community-auth .auth-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.campo-contrasena { position: relative; }
.campo-contrasena input { padding-right: 42px; }
.ver-contrasena {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 1.05rem; cursor: pointer;
  padding: 6px 8px; opacity: 0.6; line-height: 1;
}
.ver-contrasena:hover { opacity: 1; }
.auth-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.session-head { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.session-user { display: flex; align-items: center; gap: 12px; }
.session-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #0d0d12; font-size: 1.1rem; flex-shrink: 0;
}
.avatar.small { width: 34px; height: 34px; font-size: 0.9rem; }
.sub-dim { color: var(--text-dim); font-size: 0.8rem; }

.feed-panel { padding-top: 4px; }
/* flex-wrap (31-ago-2026, segunda vuelta). Primero se probó overflow-x:auto
   (deslizar como una fila de chips), y arreglaba el desbordamiento, pero
   escondía "Por grupo o cantante" y "Mis bibliotecas" sin ninguna pista de
   que seguían ahí -- Ramón: "no seria mejor... para que se sepa que hay mas
   opciones". Con 4 botones exactos, envolver a dos filas las deja TODAS
   visibles sin ningún toque de más, que es justo lo que hace falta cuando
   una de ellas es la biblioteca del cliente. overflow-x:auto se queda puesto
   por si acaso (letras muy grandes, pantalla muy estrecha): con dos filas ya
   no debería hacer falta deslizar nunca, pero si algún día no cupiera ni así,
   no vuelve a romper la página entera. Donde ya cabía en una fila
   (community.html, 2 tabs) esto no cambia nada visible. */
.feed-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.feed-tabs::-webkit-scrollbar { display: none; }
.tab {
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  padding: 9px 18px; border-radius: 999px; font-size: 0.86rem; transition: all 0.2s ease;
  flex: none; white-space: nowrap;
}
.tab.is-active { background: var(--accent); border-color: var(--accent); color: #0d0d12; font-weight: 600; }
.feed-toolbar { margin-bottom: 16px; }
.feed-input { max-width: 340px; }

.feed-list { display: flex; flex-direction: column; gap: 16px; }
.post { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.post-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.post-meta { flex: 1; display: flex; flex-direction: column; }
.post-author { font-weight: 700; font-size: 0.92rem; }
.post-time { color: var(--text-dim); font-size: 0.72rem; }
.post-mood {
  font-size: 0.74rem; color: var(--accent-2);
  border: 1px solid rgba(103, 232, 249, 0.25); padding: 4px 10px; border-radius: 999px;
}
.post-text { margin: 8px 0; font-size: 0.92rem; }
.post-embed { margin: 10px 0; }
.iframe-16-9 { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }
.iframe-square { width: 100%; height: 152px; border: 0; border-radius: 10px; }
.post-foot { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.like-btn {
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; transition: all 0.2s ease;
}
.like-btn:hover { border-color: #f47; color: #f47; }
.like-btn.is-liked { border-color: #f47; color: #f47; background: rgba(255,68,119,0.1); }
.mini-link { color: var(--accent); font-size: 0.85rem; }
.mini-link:hover { text-decoration: underline; }

.users-list { display: flex; flex-direction: column; gap: 10px; }
.user-item { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.user-info { flex: 1; display: flex; flex-direction: column; }
.user-info strong { font-size: 0.93rem; }
.mini-tag { font-size: 0.72rem; color: var(--text-dim); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }

/* ---------- Modal compartir ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  position: relative; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; max-width: 460px; width: 100%; box-shadow: var(--shadow);
}
.modal-close {
  position: absolute; top: 12px; right: 14px; background: transparent; border: none;
  color: var(--text-dim); font-size: 1.6rem; line-height: 1;
}
.modal-title { font-size: 1.25rem; font-weight: 700; }
.modal-sub { color: var(--text-dim); font-size: 0.86rem; margin: 4px 0 18px; }
.share-form { display: flex; flex-direction: column; gap: 14px; }
.share-row { }
.modal-preview { font-size: 0.85rem; color: var(--accent-2); }
.share-unlogged { text-align: center; }

/* ---------- Buscar por grupo o cantante (30-ago-2026) ---------- */
.buscador-artista { margin: 0 0 18px; }
.buscador-campo {
  width: 100%; background: var(--bg-card); color: var(--text);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 16px; font-size: 1rem;
}
.buscador-campo:focus { outline: none; border-color: var(--accent); }
.buscador-nota { color: var(--text-dim); font-size: 0.85rem; margin: 8px 2px 0; }

.disco-card { display: flex; align-items: center; gap: 14px; text-align: left; }
.disco-portada { width: 64px; height: 64px; border-radius: 10px; flex: 0 0 auto; object-fit: cover; }

/* ---------- Elegir la fuente (30-ago-2026) ---------- */
.fuente-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.fuente-opcion {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 10px; text-align: center; color: var(--text); cursor: pointer;
  transition: all 0.2s ease;
}
.fuente-opcion:hover { border-color: var(--accent); }
.fuente-opcion.is-selected { border-color: var(--accent); background: rgba(139, 124, 246, 0.12); }
.fuente-icono { display: block; font-size: 1.3rem; line-height: 1.1; }
.fuente-nombre { display: block; font-weight: 700; font-size: 0.95rem; margin-top: 4px; }
.fuente-corto { display: block; color: var(--text-dim); font-size: 0.72rem; margin-top: 2px; }

.fuente-aviso {
  color: var(--text-dim); font-size: 0.85rem; line-height: 1.45;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 0 0 18px;
}
.fuente-aviso-alerta { color: var(--text); border-color: var(--accent); background: rgba(139, 124, 246, 0.14); }

/* Las instrucciones para reflejar la pantalla en la TV (31-ago-2026).
   El aparato que tiene delante va primero y resaltado; los otros debajo,
   porque la misma cuenta se usa en varios sitios. */
.cast-porque { display: block; margin: 6px 0 10px; color: var(--text-dim); }
.cast-como { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cast-como li { color: var(--text-dim); line-height: 1.45; }
.cast-como li strong { color: var(--text); }
.cast-como li.es-el-tuyo {
  color: var(--text); background: rgba(139, 124, 246, 0.12);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 9px 11px;
}

/* El aviso de bienvenida (31-ago-2026). Va DENTRO de la página, empujando lo
   de abajo: nada de ventana que tape, que un overlay a pantalla completa ya
   dejó el reproductor bloqueado una vez en esta misma app. */
.bienv {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; margin: 0 0 18px;
}
.bienv-titulo { font-size: 1.05rem; margin: 0 0 12px; color: var(--text); }
.bienv-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.bienv-lista li { display: flex; gap: 12px; align-items: flex-start; }
.bienv-icono { font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; }
.bienv-lista strong { display: block; color: var(--text); font-size: 0.95rem; }
.bienv-lista p { margin: 3px 0 0; color: var(--text-dim); font-size: 0.85rem; line-height: 1.45; }
.bienv-donde { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 12px; }
.bienv .mini-btn { min-height: 44px; padding: 10px 16px; }

/* La barra de bibliotecas (31-ago-2026): elegir cuál, y las tres acciones.
   En móvil se apila, que en una fila de 360 px no caben cuatro cosas sin que
   los botones bajen de los 44 px que hacen falta para pulsar con el dedo. */
.biblio-barra {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-bottom: 14px;
}
.biblio-elegir {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--text-dim); font-size: 0.85rem; flex: 1 1 190px;
}
.biblio-elegir select {
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font-size: 0.95rem; min-height: 44px; width: 100%;
}
.biblio-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.biblio-acciones .mini-btn { min-height: 44px; padding: 10px 14px; }
.biblio-ayuda {
  color: var(--text-dim); font-size: 0.82rem; margin: 10px 0 14px;
}

/* El aviso del botón de Transmitir. No tenía NINGÚN estilo (31-ago-2026):
   salía como texto suelto, y desde hoy puede llevar dentro un enlace, que sin
   estilo no se distingue del resto sobre el fondo oscuro. Se le pone el mismo
   traje que a .fuente-aviso, que es el aviso hermano de la pantalla anterior. */
.cast-aviso {
  color: var(--text-dim); font-size: 0.85rem; line-height: 1.45;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 12px 0 0;
}
.cast-aviso a {
  color: var(--accent); font-weight: 600; text-decoration: underline;
  /* 44 px de alto para que se pueda pulsar con el dedo sin apuntar */
  display: inline-block; padding: 11px 0; min-height: 22px;
}
.cast-aviso a:hover, .cast-aviso a:focus-visible { color: var(--text); }

.fuente-archivos { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
.fuente-archivos-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.fuente-archivos-ayuda { color: var(--text-dim); font-size: 0.78rem; margin: 0; }
.fuente-archivos-cuenta { color: var(--text-dim); font-size: 0.85rem; }
.file-btn-vaciar { background: none; border: 1px solid var(--line); color: var(--text-dim);
  font-size: 0.8rem; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.file-btn-vaciar:hover { border-color: var(--accent); color: var(--text); }
.archivos-audio { width: 100%; }

/* Con "Mi música" no hay vídeo que enseñar: el hueco 16:9 se quedaba de
   rectángulo negro enorme debajo del audio. Aquí el hueco se ajusta al
   reproductor y deja de pintar fondo. */
.embed-wrap.solo-audio {
  aspect-ratio: auto; background: transparent; box-shadow: none;
  display: flex; align-items: center; padding: 8px 0;
}
.embed-wrap.solo-audio .music-frame { display: none; }

.panel-head-sep { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Mandar lo que suena a Frasly Lab */
.lab-btn {
  display: block; width: 100%; margin: 12px 0 0;
  background: transparent; color: var(--accent-2);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font-size: 0.9rem; cursor: pointer;
  transition: all 0.2s ease;
}
.lab-btn:hover { border-color: var(--accent-2); background: rgba(103, 232, 249, 0.08); }

/* ---------- Valoración y sugerencias (30-ago-2026) ---------- */
.opinion-estrellas { display: flex; gap: 8px; justify-content: center; margin: 6px 0 20px; }
.opinion-estrellas button {
  background: none; border: 0; padding: 2px; font-size: 44px; line-height: 1;
  cursor: pointer; color: var(--text-dim);
}
.opinion-estrellas button.activa { color: #f5c518; }
.opinion-estado { font-size: 0.85rem; color: var(--text-dim); margin-top: 10px; }
.opinion-estado.ok { color: #4ade80; }

/* ---------- Instalar como app (30-ago-2026) ---------- */
.instalar-pasos { margin: 14px 0; padding-left: 22px; line-height: 1.6; font-size: 0.9rem; color: var(--text); }
.instalar-pasos li { margin-bottom: 6px; }
.instalar-nota { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
  background: rgba(139, 124, 246, .12); color: var(--text); font-size: 0.82rem; line-height: 1.5; }
.instalar-no-mostrar { display: flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 0.82rem; color: var(--text-dim); cursor: pointer; }

/* ---------- Menú único de opciones (30-ago-2026 / 1-sep-2026): un solo
   icono para todo (opinión, cuenta, transmitir). Antes era un círculo
   flotante fijo en la esquina -- y por mucho hueco que se le reservara,
   Ramón seguía viendo la pantalla "bloqueada" en el móvil, y ese hueco
   reservado dejaba media pantalla vacía sin usar ("esto más ancho, el
   botón de transmitir integrado, no a un lado", con foto). Ahora vive
   DENTRO de la cabecera de cada página, como un botón más: en flujo
   normal, nunca flotando sobre el contenido, así que no puede tapar
   nada en ningún punto del scroll y el contenido usa el ancho entero. */
.menu-flotante-fab {
  width: 40px; height: 40px; border-radius: 50%; border: none; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0d0d12; font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.menu-flotante-fab:hover { filter: brightness(1.08); }
.menu-flotante-card { max-width: 320px; }
.menu-flotante-opciones { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.menu-flotante-opcion {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font: inherit; font-size: 0.95rem; color: var(--text); cursor: pointer;
}
.menu-flotante-opcion:hover { border-color: var(--accent); }
.menu-flotante-icono { font-size: 1.3rem; line-height: 1; }

/* ---------- Animaciones ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 5px; }


/* Pie legal (31-ago-2026): el aviso de privacidad solo se veia al registrarse
   y el aviso legal no existia. Discreto, pero en todas las paginas. */
.pie-legal{
  margin: 2.5rem auto 1.2rem; padding: 0 1rem;
  text-align: center; font-size: .78rem; opacity: .6; line-height: 1.9;
}
.pie-legal a{ color: inherit; text-decoration: underline; }
.pie-legal a:hover{ opacity: 1; }