/* CarnaVALverde — estilos de la SPA. Portados del prototipo aprobado (diseño, sección 7 de la especificación).
   Dark-first: una app de música vive en oscuro; el claro está diseñado aparte, no invertido. */

:root{
  --bg:#1C1C22; --surface:#24242C; --raised:#2E2E38; --line:#3A3A46;
  --fg:#F2F2EE; --muted:#A3A39B; --faint:#6E6E78;
  --accent:#9CC45A; --accent-solid:#5A762D;
  --peligro:#F2867C; --peligro-solid:#B3372B;   /* borrar cuenta, borrar lista, errores */
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --gutter-l:max(22px,env(safe-area-inset-left,0px));
  --gutter-r:max(22px,env(safe-area-inset-right,0px));
  --card:136px;   /* lado de la carátula en las filas */
  --celda:140px;  /* ancho mínimo de una carátula en las rejillas */
  --pena:92px;    /* diámetro del círculo de peña */
  color-scheme:dark;
}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){
  --bg:#F6F6F1; --surface:#FFFFFF; --raised:#ECECE4; --line:#DCDCD2;
  --fg:#1C1C22; --muted:#5E5E57; --faint:#8C8C84;
  --accent:#4A6325; --accent-solid:#5A762D;
  --peligro:#B3261E; --peligro-solid:#B3372B;
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#F6F6F1; --surface:#FFFFFF; --raised:#ECECE4; --line:#DCDCD2;
  --fg:#1C1C22; --muted:#5E5E57; --faint:#8C8C84;
  --accent:#4A6325; --accent-solid:#5A762D;
  --peligro:#B3261E; --peligro-solid:#B3372B;
  color-scheme:light;
}

html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);overflow:hidden;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
img{display:block}

/* ---- marco: columna fija, contenido con scroll entre cabecera y barras inferiores ----
   Móvil (<640): columna de 430 px como máximo. Tablet (640–1023): el mismo diseño a todo el ancho.
   Escritorio (>=1024): ver el bloque del final. */
.frame{height:100%;height:100dvh;max-width:430px;margin:0 auto;display:flex;flex-direction:column;
  background:var(--bg);position:relative;overflow:hidden}
@media (min-width:640px){
  .frame{max-width:none}
}

/* ---- cabecera ---- */
.top{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:12px;
  padding-left:var(--gutter-l);padding-right:var(--gutter-r);
  border-bottom:1px solid var(--line);background:var(--bg)}
.brand{display:flex;align-items:center;margin-right:auto;min-width:0}
.brand .logo{height:26px;width:auto;max-width:100%}
/* En OSCURO la hoja verde oscura del centro (#5A782D) queda a 3,3:1 sobre #1C1C22 y los trazos finos
   del libro se pierden. Un contorno claro muy fino + un halo suave la despegan del fondo SIN tocar
   los colores del logo. En claro no hace falta (las letras y la hoja ya contrastan). */
:root:not([data-theme="light"]) .brand .logo{
  filter:drop-shadow(0 0 .6px rgba(242,242,238,.55)) drop-shadow(0 0 5px rgba(242,242,238,.10))}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .brand .logo{filter:none} }
.acciones{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.icbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);flex:0 0 auto}
.icbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-solid);color:#fff;
  display:grid;place-items:center;flex:0 0 auto}
.avatar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}

/* ---- zona con scroll ---- */
.scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;outline:none}
.pad{padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.spacer{height:26px}

/* ---- filas ---- */
.row{margin-block:22px}
.rowhead{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.rowhead h2{font-family:var(--display);font-size:16.5px;font-weight:700;margin:0 auto 0 0;
  letter-spacing:-.015em;text-wrap:balance}
.rowhead .extra{font-size:11px;color:var(--faint);white-space:nowrap}
/* flechas para desplazar la fila: solo en escritorio (con ratón no hay scroll lateral con el dedo) */
.flechas{display:none;gap:6px;align-self:center}
.flecha{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--fg)}
.flecha svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.flecha:disabled{opacity:.35;cursor:default}
.flecha:not(:disabled):hover{background:var(--raised)}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:4px;margin-inline:calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));
  padding-inline:var(--gutter-l) var(--gutter-r);scroll-padding-inline:var(--gutter-l);
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}

/* tarjeta: la carátula lleva su enlace y el botón de play como HERMANOS (nunca un botón dentro de
   un enlace o de otro botón); el texto lleva el enlace accesible. Sirve igual en filas y en rejillas. */
.card{flex:0 0 var(--card);scroll-snap-align:start;min-width:0;position:relative}
.card .art{width:100%;aspect-ratio:1/1;border-radius:9px;overflow:hidden;background:var(--raised);
  position:relative;display:block}
.card .artlink{display:block;width:100%;height:100%}
.card .art img{width:100%;height:100%;object-fit:cover}
.card .txt{display:block}
.pbtn{position:absolute;right:7px;bottom:7px;width:34px;height:34px;border-radius:50%;
  background:var(--accent-solid);color:#fff;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.pbtn svg{width:14px;height:14px;fill:currentColor;stroke:none;margin-left:2px}
.card h3{font-size:13px;font-weight:600;margin:8px 0 2px;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card p{font-size:11.5px;color:var(--muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.66);color:#fff;
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px;
  font-variant-numeric:tabular-nums;pointer-events:none}

/* rejilla (peña, año, género): todo de un vistazo */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--celda),1fr));gap:20px 12px;margin-top:6px}
.grid .card{flex:none}

/* cabecera de peña / año / género */
.termhead{display:flex;align-items:center;gap:16px;margin:22px 0 18px}
.termhead .circ{width:var(--pena);height:var(--pena);border-radius:50%;background:var(--raised);flex:0 0 auto;
  display:grid;place-items:center;font-family:var(--display);font-size:calc(var(--pena) * .3);font-weight:700;
  color:var(--accent);border:1px solid var(--line)}
.termhead .tx{min-width:0}
.que{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 4px;font-weight:600}
.termhead h1{font-family:var(--display);font-size:26px;font-weight:800;margin:0;letter-spacing:-.025em;
  line-height:1.1;text-wrap:balance}
.termhead .sub{margin:6px 0 0;font-size:13px;color:var(--muted)}
/* ---- buscar ---- */
.searchbox{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:0 6px 0 13px;margin:16px 0 0}
.searchbox:focus-within{border-color:var(--accent)}
.searchbox > svg{width:17px;height:17px;stroke:var(--faint);fill:none;stroke-width:2;flex:0 0 auto;
  stroke-linecap:round}
.searchbox input{flex:1;min-width:0;background:none;border:none;color:var(--fg);font:inherit;font-size:16px;
  padding:12px 0;outline:none;-webkit-appearance:none;appearance:none}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox input::placeholder{color:var(--faint)}
.limpiar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--faint);flex:0 0 auto}
.limpiar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.limpiar[hidden]{display:none}
#resultados{transition:opacity .15s}
#resultados.cargando{opacity:.55}
.pista{color:var(--muted);font-size:13px;line-height:1.55;margin:18px 0 0}
.grupo{margin-top:22px}
.grouphead{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  margin:0 0 6px;font-weight:600}
.hit{display:flex;align-items:center;gap:12px;padding:8px 0;min-width:0}
.hit .art{width:46px;height:46px;border-radius:7px;background:var(--raised);flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center}
.hit .art img{width:100%;height:100%;object-fit:cover}
.hit .art.anio{font-family:var(--display);font-weight:700;font-size:13px;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hit .circ{width:46px;height:46px;border-radius:50%;background:var(--raised);flex:0 0 auto;
  display:grid;place-items:center;font-family:var(--display);font-size:17px;font-weight:700;color:var(--accent)}
.hit .tx{min-width:0;flex:1}
.hit .h{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hit .s{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hit .frag{display:block;font-size:12px;color:var(--faint);margin-top:3px;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hit .frag mark{background:color-mix(in srgb,var(--accent-solid) 30%,transparent);color:var(--fg);
  border-radius:3px;padding:0 1px}
.hit:hover .h{color:var(--accent)}

/* foto de peña en el círculo (si no tiene, la inicial) */
.circ.foto{overflow:hidden;padding:0;background:var(--raised)}
.circ.foto img{width:100%;height:100%;object-fit:cover;display:block}

/* flecha de volver (páginas interiores) */
.volver{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface);border:1px solid var(--line);color:var(--fg);margin:14px 0 -2px}
.volver svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;margin-left:-2px}
.volver:hover{background:var(--raised)}
.ficha .volver + .albumhead{margin-top:12px}
.volver + .termhead{margin-top:14px}
.bloque{margin-top:26px}
.mas{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:22px}
.mas .retry{margin-top:0}
.mas .cuenta{font-size:11.5px;color:var(--faint)}
.retry:disabled{opacity:.6}

/* años y peñas */
.year{flex:0 0 auto;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:11px 14px;text-align:center;min-width:76px;display:block}
.year b{font-family:var(--display);font-size:19px;font-weight:700;display:block;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.year span{font-size:10px;color:var(--faint)}
.pena{flex:0 0 var(--pena);scroll-snap-align:start;text-align:center;display:block}
.pena .circ{width:var(--pena);height:var(--pena);border-radius:50%;background:var(--raised);
  display:grid;place-items:center;font-family:var(--display);font-size:calc(var(--pena) * .27);font-weight:700;
  color:var(--accent);border:1px solid var(--line)}
.pena p{font-size:11.5px;margin:7px 0 0;line-height:1.25;color:var(--fg);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* cargando */
.sk .art,.sk .circ,.sk.year{background:var(--raised);border-color:transparent}
.sk h3,.sk p,.sk h1,.sk .tt,.sk .td,.sk.year b,.sk.year span{color:transparent;background:var(--raised);border-radius:4px}
.sk h3{width:80%}.sk p{width:55%}.sk h1{width:70%}.sk .que{width:30%}.sk .tt{width:60%}.sk .td{width:20%}
.sk{animation:cvpulso 1.3s ease-in-out infinite;pointer-events:none}
@keyframes cvpulso{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

.empty{color:var(--faint);font-size:13px;text-align:center;padding:36px 0;line-height:1.6}
.retry{margin-top:14px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;
  padding:9px 17px;font-size:13px;font-weight:600}

/* en construcción / no encontrado */
.wip{text-align:center;padding:64px 0 24px}
.wip .ic{width:56px;height:56px;border-radius:50%;background:var(--raised);
  display:grid;place-items:center;margin:0 auto 16px;color:var(--accent)}
.wip .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wip h1{font-family:var(--display);font-size:22px;font-weight:800;margin:0 0 8px;letter-spacing:-.02em}
.wip .que{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 4px;font-weight:600}
.wip .nombre{font-size:15px;color:var(--fg);margin:0 auto 22px;max-width:30ch;line-height:1.4;font-weight:600}
.wip .ruta{font-size:11.5px;color:var(--faint);margin:-16px 0 22px;word-break:break-all}
.play{background:var(--accent-solid);color:#fff;border-radius:999px;padding:11px 21px;
  font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px}

/* ---- ficha de agrupación (y bloque SEO que sirve WordPress, que la SPA sustituye) ---- */
.albumhead{display:flex;gap:14px;align-items:flex-end;margin-top:18px}
.albumhead .art{width:118px;height:118px;border-radius:10px;overflow:hidden;background:var(--raised);flex:0 0 auto}
.albumhead .art img{width:100%;height:100%;object-fit:cover}
.albumhead .tx{min-width:0}
.albumhead h1{font-family:var(--display);font-size:22px;font-weight:800;margin:0 0 5px;
  letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.albumhead p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.albumhead p a{color:var(--accent)}
.albumhead p a:hover{text-decoration:underline}
.actions{display:flex;align-items:center;gap:10px;margin:16px 0 4px}
.ghost{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted)}
.ghost svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.play svg{width:14px;height:14px;fill:currentColor}
.actions button:disabled{opacity:.45;cursor:not-allowed}
.tracks{list-style:none;margin:16px 0 0;padding:0}
.track{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.track .n{font-size:12px;color:var(--faint);width:19px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.track .tx{min-width:0;flex:1}
.track .tt{display:block;margin:0 0 2px;font-size:13.5px;font-weight:500}
.track .td{display:block;font-size:11px;color:var(--faint)}
.track .dur{display:none;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;flex:0 0 auto}
.track .letra{flex:0 0 auto;color:var(--accent);display:grid;place-items:center}
.track .letra svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.track.destacada{background:color-mix(in srgb,var(--accent-solid) 14%,transparent);
  margin-inline:-10px;padding-inline:10px;border-radius:8px}
.track.destacada .tt{color:var(--accent);font-weight:600}
/* fila que es un enlace entero (charlas de Podcast / Radio): el padding pasa al enlace */
.track.enlace{padding:0}
.track.enlace > a{display:flex;align-items:center;gap:12px;padding:10px 0;width:100%;min-width:0}
.track.enlace > a:hover .tt{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- coplas pulsables (ficha y listas de charlas): el <li> lleva un botón que ocupa la fila ---- */
.track.con-fila{padding:0}
.fila{display:flex;align-items:center;gap:12px;padding:10px 0;width:100%;min-width:0;text-align:left}
.fila:hover .tt{color:var(--accent)}
.track .n{position:relative}
.track .n .eq{display:none;color:var(--accent)}
.track .n .eq svg{width:11px;height:11px;fill:currentColor}
/* la copla que suena: el número se cambia por ▶ verde y el título se pone verde */
.track.sonando .n .num{display:none}
.track.sonando .n .eq{display:inline-grid}
.track.sonando .tt{color:var(--accent);font-weight:600}
.track.sonando.pausada .n .eq{opacity:.55}

/* "Seguir escuchando" (portada) */
.cont{flex:0 0 min(300px,82vw);display:flex;gap:11px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:9px;scroll-snap-align:start;text-align:left}
.cont .art{width:56px;height:56px;border-radius:7px;flex:0 0 auto;overflow:hidden;background:var(--raised)}
.cont .art img{width:100%;height:100%;object-fit:cover}
.cont .tx{min-width:0;flex:1}
.cont .h{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont .s{display:block;font-size:11.5px;color:var(--muted);margin:2px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont .bar{display:block;height:3px;background:var(--raised);border-radius:2px;overflow:hidden}
.cont .bar i{display:block;height:100%;background:var(--accent-solid)}
.cont .go{width:34px;height:34px;border-radius:50%;background:var(--accent-solid);color:#fff;
  display:grid;place-items:center;flex:0 0 auto}
.cont .go svg{width:13px;height:13px;fill:currentColor;margin-left:2px}

/* barras arrastrables (posición y volumen) */
.rango{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;margin:0;cursor:pointer;--pct:0%}
.rango:disabled{cursor:default;opacity:.5}
.rango::-webkit-slider-runnable-track{height:4px;border-radius:3px;
  background:linear-gradient(to right,var(--accent-solid) var(--pct),var(--raised) var(--pct))}
.rango::-moz-range-track{height:4px;border-radius:3px;background:var(--raised)}
.rango::-moz-range-progress{height:4px;border-radius:3px;background:var(--accent-solid)}
.rango::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--fg);margin-top:-4px;border:none}
.rango::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--fg);border:none}

/* ---- mini reproductor + navegación ---- */
.dock{flex:0 0 auto;background:var(--surface);border-top:1px solid var(--line);position:relative}
.mini{display:flex;align-items:center;gap:6px;position:relative;
  padding-block:9px;padding-left:var(--gutter-l);padding-right:calc(var(--gutter-r) - 4px);
  border-bottom:1px solid var(--line)}
/* barra fina de progreso (móvil), pegada arriba del mini */
.minibarra{position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;pointer-events:none}
.minibarra i{display:block;height:100%;width:0;background:var(--accent-solid)}
.mini.vacio .minibarra{display:none}
.miniopen{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-align:left}
.miniopen:disabled{cursor:default}
.mini .art{width:40px;height:40px;border-radius:7px;overflow:hidden;background:var(--raised);flex:0 0 auto;
  display:grid;place-items:center;color:var(--faint)}
.mini .art img{width:100%;height:100%;object-fit:cover}
.mini .art svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mini .tx{min-width:0;flex:1}
.mini .t{display:block;margin:0 0 2px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .s{display:block;margin:0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .centro{display:flex;align-items:center;flex:0 0 auto}
.miniprog,.mini .derecha,.mini .ctl .esc{display:none}   /* en móvil: solo play/pausa y siguiente */
.mini .ctl{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.mini .ctl button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--fg)}
.mini .ctl svg{width:18px;height:18px;fill:currentColor;stroke:none}
.mini .ctl .pp{background:var(--accent-solid);color:#fff}
.mini .ctl .pp svg{width:16px;height:16px;margin-left:1px}
.mini .ctl button:disabled{opacity:.4}
.mini .ctl .pp:disabled{opacity:.55}
/* botones de modo (aleatorio, repetir) y de icono de trazo */
[data-accion].modo svg,[data-accion="cola"] svg,.volico svg{fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
[data-accion].modo{color:var(--muted)}
[data-accion].modo.on{color:var(--accent)}
.con1{position:relative;display:grid;place-items:center}
.con1 b{position:absolute;font-size:8px;font-weight:800;font-family:var(--body);line-height:1;
  top:50%;left:50%;transform:translate(-50%,-50%);color:currentColor}
/* cargando: un aro que gira dentro del botón de play */
.girando{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  display:block;animation:cvgira .8s linear infinite}
@keyframes cvgira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.girando{animation-duration:2.4s}}

/* ---- reproductor a pantalla completa ---- */
.player{position:absolute;inset:0;background:var(--bg);z-index:20;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .34s cubic-bezier(.32,.72,0,1);visibility:hidden;outline:none}
.player.open{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){.player{transition:none}}
.phead{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:12px;
  padding-left:var(--gutter-l);padding-right:var(--gutter-r);touch-action:none}
.phead .lbl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  text-align:center;flex:1;min-width:0}
.phead .hueco{width:34px;flex:0 0 auto}
.pbody{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding-left:var(--gutter-l);padding-right:var(--gutter-r);padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
.bigart{width:100%;max-width:min(320px,42vh);aspect-ratio:1;margin:6px auto 20px;border-radius:13px;
  overflow:hidden;background:var(--raised);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.bigart img{width:100%;height:100%;object-fit:cover;display:block}
.ptitle{font-family:var(--display);font-size:21px;font-weight:700;margin:0 0 4px;
  letter-spacing:-.02em;text-wrap:balance}
.psub{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.psub a{color:var(--accent)}
.seek .times{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);
  margin-top:4px;font-variant-numeric:tabular-nums}
.pctl{display:flex;align-items:center;justify-content:space-between;margin:14px 0 8px}
.pctl button{color:var(--fg);display:grid;place-items:center;width:46px;height:46px;border-radius:50%}
.pctl svg{width:24px;height:24px;fill:currentColor}
.pctl .side svg{width:20px;height:20px}
.pctl .big{width:64px;height:64px;background:var(--accent-solid);color:#fff}
.pctl .big svg{width:26px;height:26px}
.pctl .big .girando{width:22px;height:22px}
/* velocidad · temporizador · compartir */
.extras{display:flex;justify-content:space-around;gap:6px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.extras button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;flex:1;
  color:var(--muted);font-size:10.5px;font-weight:500;padding:4px 0}
.extras button b{font-family:var(--display);font-size:14px;font-weight:700;line-height:18px;color:var(--fg)}
.extras button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.extras button.on{color:var(--accent)}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:16px 0 0}
.tabs button{padding:9px 0;font-size:13px;font-weight:600;color:var(--faint);border-bottom:2px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:6px}
.tabs button.on{color:var(--fg);border-bottom-color:var(--accent-solid)}
.tabs .cuantas{font-weight:500;color:var(--faint);font-size:11.5px}
.colalista,.letrapanel{padding-top:10px}
.letra-texto{white-space:pre-line;font-size:15px;line-height:1.75;color:var(--fg);padding:6px 0 4px}
.editarletra{margin:14px 0 0}
.lyric{padding:22px 0 10px;text-align:center}
.lyric .ic{width:48px;height:48px;border-radius:50%;background:var(--raised);display:grid;place-items:center;margin:0 auto 12px;color:var(--faint)}
.lyric .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.lyric h4{font-family:var(--display);font-size:16px;margin:0 0 6px;font-weight:700}
.lyric p{font-size:12.5px;color:var(--muted);margin:0 auto 16px;max-width:32ch;line-height:1.55}
.addlyric{display:inline-block;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600}

/* botón pequeño en la cabecera de una fila ("Reproducir todo" en Al azar) */
.chipbtn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;align-self:center;white-space:nowrap}
.chipbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chipbtn:hover{border-color:var(--accent)}
/* acciones bajo la cabecera de peña / año */
.termacc{margin-top:-6px}
.termacc .play svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hoja de compartir */
.hoja-fondo{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.hoja-fondo[hidden]{display:none}
.hoja{width:100%;max-width:440px;background:var(--surface);color:var(--fg);border-radius:16px 16px 0 0;
  padding:14px 18px max(18px,env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.35);
  transform:translateY(16px);opacity:.6;transition:transform .2s,opacity .2s}
.hoja-fondo.abierta .hoja{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.hoja{transition:none}}
.hojacab{display:flex;align-items:center;justify-content:space-between}
.hojacab h2{font-family:var(--display);font-size:18px;margin:0}
.hojaque{margin:2px 0 10px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opc{display:flex;align-items:center;gap:14px;width:100%;padding:12px 4px;font-size:15px;font-weight:500;
  border-top:1px solid var(--line);text-align:left}
.opc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.opc:hover{color:var(--accent)}
.opc.discreto{font-size:13px;color:var(--muted)}
.opc.discreto svg{width:18px;height:18px;color:var(--faint)}
.incrustar{padding:4px 0 6px}
.incrustar textarea{width:100%;font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:8px;resize:none}
.incrustar .retry{margin-top:8px}
@media (min-width:1024px){
  .hoja-fondo{align-items:center}
  .hoja{border-radius:16px;padding-bottom:18px}
}

/* "Escúchalo en la app" (solo navegador móvil Android) */
.avisoapp{display:flex;align-items:center;gap:10px;flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--line);
  padding:8px var(--gutter-r) 8px var(--gutter-l);font-size:12.5px}
.avisoapp img{width:28px;height:28px;border-radius:7px;flex:0 0 auto}
.avisoapp .txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.avisoapp .txt b{color:var(--fg)}
.avisoapp .abrir{background:var(--accent-solid);color:#fff;border-radius:999px;padding:6px 14px;font-weight:600;font-size:12.5px;flex:0 0 auto}
.avisoapp .cerrar{width:28px;height:28px;display:grid;place-items:center;color:var(--faint);flex:0 0 auto}
.avisoapp .cerrar svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* Aviso de cookies (solo web). Móvil y tablet: un hijo más de .frame, justo encima del reproductor:
   encoge la zona con scroll en vez de taparla. Escritorio: tarjeta fija sobre el reproductor.
   "Rechazar" y "Aceptar" con el MISMO estilo y tamaño. */
.avisocookies{flex:0 0 auto;background:var(--surface);border-top:1px solid var(--line);
  padding:12px var(--gutter-r) 12px var(--gutter-l);font-size:13px;line-height:1.45;color:var(--muted)}
.avisocookies p{margin:0 0 10px}
.avisocookies b{color:var(--fg);font-weight:600}
.avisocookies a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.avisocookies .botones{display:flex;gap:10px}
.avisocookies .botones button{flex:1 1 0;min-height:40px;border-radius:999px;border:1px solid var(--line);
  background:var(--raised);color:var(--fg);font-weight:600;font-size:13.5px}
.avisocookies .botones button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:1024px){
  .avisocookies{position:fixed;z-index:30;bottom:96px;left:calc(var(--lateral) + 24px);right:24px;margin:0 auto;max-width:620px;
    border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
}

/* Pie de la portada y de las páginas de WordPress: privacidad y cookies */
.piepag{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:28px 0 0;font-size:12.5px}
.piepag a,.piepag button{color:var(--faint);text-decoration:underline;text-underline-offset:2px;font-size:inherit}

.tabcola{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:10px 0;width:100%;
  border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--fg)}
.tabcola svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.tabcola .cuantas{margin-left:auto;color:var(--faint);font-weight:500}
.tabcola[aria-expanded="true"]{color:var(--accent)}
.colalista .ahora{font-size:12px;color:var(--muted);margin:4px 0 8px}
.colalista .ahora b{color:var(--accent);font-weight:600}
.qrow{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line)}
.qsaltar{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:9px 0;text-align:left}
.qsaltar .n{width:20px;font-size:11px;color:var(--faint);flex:0 0 auto;font-variant-numeric:tabular-nums}
.qsaltar .tx{min-width:0;flex:1}
.qsaltar .h{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsaltar .s{display:block;font-size:11px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsaltar:hover .h{color:var(--accent)}
.qquitar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--faint);flex:0 0 auto}
.qquitar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.qquitar:hover{color:var(--fg);background:var(--surface)}
.nav{display:flex;
  padding-left:max(8px,env(safe-area-inset-left,0px));
  padding-right:max(8px,env(safe-area-inset-right,0px));
  padding-top:7px;padding-bottom:max(9px,env(safe-area-inset-bottom,0px))}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--faint);font-size:10.5px;font-weight:500}
.nav a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current="page"]{color:var(--accent)}

/* aviso flotante */
.toast{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);
  max-width:calc(100% - 44px);width:max-content;background:var(--raised);color:var(--fg);
  border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:12.5px;line-height:1.4;
  box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* =====================================================================================================
   CUENTA (Fase 3a): avatar, ♡, ⋯, hoja de entrar / crear cuenta, Mi biblioteca y listas
   ===================================================================================================== */
.avatar.con span{font-family:var(--display);font-size:15px;font-weight:700;line-height:1}
.avatar.entrar{width:auto;padding:0 15px;border-radius:999px;font-size:13px;font-weight:600}
.avatar.grande{width:56px;height:56px}
.avatar.grande span{font-size:22px}

/* ♡ me gusta y ⋯ más opciones: al lado de la fila, nunca dentro de su botón */
.corazon,.masbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:var(--faint)}
.corazon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.corazon.on{color:var(--accent)}
.corazon.on svg{fill:currentColor}
.corazon:hover,.masbtn:hover{color:var(--fg)}
.corazon.on:hover{color:var(--accent)}
.corazon:disabled{opacity:.4;cursor:default}
.masbtn svg{width:18px;height:18px;fill:currentColor}
.corazon.grande{width:46px;height:46px;margin:-4px -8px 0 0}
.corazon.grande svg{width:25px;height:25px}
@media (prefers-reduced-motion:no-preference){ .corazon.on svg{animation:cvlatido .28s ease-out} }
@keyframes cvlatido{50%{transform:scale(1.22)}}
.track.con-fila{gap:0}
.track.con-fila > .fila{flex:1}
.hitfila{display:flex;align-items:center;gap:2px;min-width:0}
.hitfila .hit{flex:1}
.ptit{display:flex;align-items:flex-start;gap:8px}
.ptit .tx{min-width:0;flex:1}

/* filas de la biblioteca: carátula y "Agrupación (Peña)" debajo del título */
.tart{width:42px;height:42px;border-radius:6px;overflow:hidden;background:var(--raised);flex:0 0 auto;
  display:grid;place-items:center;color:var(--faint)}
.tart img{width:100%;height:100%;object-fit:cover}
.tart svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.track .ts{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track.conart .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ordbtns{display:flex;flex:0 0 auto}
.ordbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--fg)}
.ordbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ordbtn:disabled{opacity:.25;cursor:default}
.ordbtn:not(:disabled):hover{background:var(--surface)}
.tracks.ordenando .track{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.track.arrastrando{opacity:.4}
.track.soltar-antes{box-shadow:inset 0 2px 0 var(--accent)}
.track.soltar-despues{box-shadow:inset 0 -2px 0 var(--accent)}
.chipbtn.on{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
/* iconos rellenos dentro de botones de trazo (play de una lista, ⋯ de la cabecera) */
.termacc .play.relleno svg{fill:currentColor;stroke:none}
.ghost.puntos svg{fill:currentColor;stroke:none}

/* hoja: formularios de cuenta y opciones */
.hoja{max-height:88vh;max-height:88dvh;overflow-y:auto}
.hojamotivo{margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:var(--raised);font-size:13.5px;font-weight:600}
.hojatexto{font-size:13.5px;color:var(--muted);line-height:1.55;margin:6px 0}
.hojatexto b{color:var(--fg)}
.hojatexto.ok{color:var(--fg);padding:8px 0}
.form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.campo span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.campo small{font-weight:400;color:var(--faint)}
.campo input{width:100%;font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:11px 12px;outline:none;-webkit-appearance:none;appearance:none}
.campo input:focus{border-color:var(--accent)}
.trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}   /* campo trampa (antispam) */
.hojaerror{margin:0;color:var(--peligro);font-size:13px;line-height:1.45;font-weight:600}
.hojaerror[hidden]{display:none}
.play.ancho{width:100%;justify-content:center;padding:13px 21px;font-size:15px}
.play:disabled{opacity:.6;cursor:default}
.play.peligro{background:var(--peligro-solid)}
.hojalinks{text-align:center;font-size:13px;color:var(--muted);margin:12px 0 0}
.enlace{color:var(--accent);font-weight:600;font-size:13px}
.enlace:hover{text-decoration:underline}
.opc span{min-width:0}
.opc small{display:block;font-size:12px;font-weight:400;color:var(--faint);margin-top:2px}
.opc.peligro,.opc.peligro svg{color:var(--peligro)}
.opc:disabled{opacity:.5}

/* Mi biblioteca */
.bibtit{font-family:var(--display);font-size:26px;font-weight:800;margin:20px 0 12px;letter-spacing:-.025em}
.bibtabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));padding:2px var(--gutter-r) 2px var(--gutter-l)}
.bibtabs::-webkit-scrollbar{display:none}
.bibtabs a{flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;
  font-weight:600;color:var(--muted);white-space:nowrap}
.bibtabs a:hover{color:var(--fg)}
.bibtabs a.on{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
.cuantas{font-size:12.5px;color:var(--faint);margin:16px 0 0}
.biblio .actions{margin-top:10px}
.bibbarra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.bibbarra .cuantas{margin:0}
.vacio{text-align:center;padding:42px 0 10px}
.vacio > svg{width:34px;height:34px;fill:none;stroke:var(--faint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vacio p{margin:10px 0 0;font-size:14.5px;font-weight:600}
.vacio .sub{margin-top:4px;font-size:13px;font-weight:400;color:var(--muted);line-height:1.5}
.vacio .chipbtn{margin-top:18px}
.listas{list-style:none;margin:8px 0 0;padding:0}
.lrow{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.lrowlink{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:10px 0}
.lrow .tart{width:50px;height:50px}
.lrow .tx{min-width:0;flex:1}
.lrow .tt{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .ts{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.lrowlink:hover .tt{color:var(--accent)}
.bienvenida{text-align:center;padding:40px 0 24px;max-width:420px;margin:0 auto}
.bienvenida .ic{width:56px;height:56px;border-radius:50%;background:var(--raised);display:grid;place-items:center;
  margin:0 auto 14px;color:var(--accent)}
.bienvenida .ic svg{width:26px;height:26px;fill:currentColor;stroke:none}
.bienvenida h1{font-family:var(--display);font-size:24px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
.bienvenida > p{margin:0;color:var(--muted);font-size:14px}
.ventajas{list-style:none;padding:0;margin:20px 0 26px;text-align:left;display:grid;gap:13px}
.ventajas li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--muted)}
.ventajas li b{color:var(--fg)}
.ventajas svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;color:var(--accent);fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.botones{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.botones .retry{margin-top:0}
.cuenta{margin-top:22px;max-width:480px}
.quien{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.quien .tx{min-width:0}
.quien .nom{margin:0;font-size:17px;font-weight:700}
.quien .cor{margin:3px 0 0;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}

/* Continuar con Google: el botón OFICIAL de Google (no se le cambia nada), centrado, y el separador */
.congoogle{margin:12px 0 2px}
.gsiboton{min-height:44px;display:flex;justify-content:center;color-scheme:normal}
.gsiboton[aria-busy="true"]{border-radius:999px;background:var(--raised)}
.separador{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--line)}
.retry.ancho{width:100%;margin-top:0}
.retry[hidden]{display:none}
.quien .conectada{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.quien .conectada svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:var(--accent)}
.hojalegal{margin:-2px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.hojalegal a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* contraseña nueva (/restablecer/) */
.restablecer{max-width:400px;margin:0 auto;padding:40px 0 10px;text-align:center}
.restablecer .ic{width:56px;height:56px;border-radius:50%;background:var(--raised);display:grid;place-items:center;
  margin:0 auto 14px;color:var(--accent)}
.restablecer .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.restablecer h1{font-family:var(--display);font-size:24px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em;text-wrap:balance}
.restablecer .sub{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5}
.restablecer .form{text-align:left;margin-top:0}

/* =====================================================================================================
   PÁGINAS DE WORDPRESS (privacidad, términos…): texto largo legible en claro y oscuro. El contenido
   viene de the_content (bloques, shortcodes, páginas de demostración de Waveme): todo se contiene en
   el ancho y nada rompe la maqueta.
   ===================================================================================================== */
.pagina article{max-width:72ch}
.pagtit{font-family:var(--display);font-size:28px;font-weight:800;margin:18px 0 14px;letter-spacing:-.025em;
  line-height:1.15;text-wrap:balance;overflow-wrap:anywhere}
.pagina .sk h1,.pagina .sk p{color:transparent;background:var(--raised);border-radius:4px}
.pagina .sk p{height:14px;margin:12px 0}
.prosa{font-size:15.5px;line-height:1.7;color:var(--fg);overflow-wrap:anywhere;min-width:0;
  overflow-x:auto}   /* algo con un ancho fijo (p. ej. un deslizador de demostración) se desplaza dentro, no rompe la página */
.prosa::after{content:"";display:table;clear:both}
.prosa > :first-child{margin-top:0}
.prosa p,.prosa ul,.prosa ol,.prosa blockquote,.prosa figure,.prosa pre,.prosa table,.prosa dl{margin:0 0 1.05em}
.prosa h1,.prosa h2,.prosa h3,.prosa h4,.prosa h5,.prosa h6{font-family:var(--display);line-height:1.25;
  letter-spacing:-.015em;margin:1.6em 0 .5em;text-wrap:balance}
.prosa h1{font-size:24px}.prosa h2{font-size:21px}.prosa h3{font-size:18px}.prosa h4,.prosa h5,.prosa h6{font-size:16px}
.prosa a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prosa strong,.prosa b{font-weight:700}
.prosa ul,.prosa ol{padding-left:1.4em}
.prosa li{margin:.3em 0}
.prosa li::marker{color:var(--muted)}
.prosa blockquote{margin-left:0;padding:.2em 0 .2em 1em;border-left:3px solid var(--accent-solid);color:var(--muted)}
.prosa hr{border:none;border-top:1px solid var(--line);margin:1.8em 0}
.prosa img,.prosa video,.prosa iframe,.prosa embed,.prosa object,.prosa svg{max-width:100%;height:auto}
.prosa iframe{border:0}
.prosa figure{margin-left:0;margin-right:0}
.prosa figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.prosa table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px}
.prosa th,.prosa td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;
  overflow-wrap:normal}   /* en una celda no se parten palabras: si no cabe, la tabla se desplaza */
.prosa th{background:var(--surface)}
.prosa pre{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px}
.prosa code{font-family:ui-monospace,Consolas,monospace;font-size:.92em}
.prosa .alignleft{float:left;margin:.3em 1em .6em 0}
.prosa .alignright{float:right;margin:.3em 0 .6em 1em}
.prosa .aligncenter{display:block;margin-left:auto;margin-right:auto}
.prosa .has-text-align-center{text-align:center}
.prosa .has-text-align-right{text-align:right}
/* bloques de WordPress sin su CSS: columnas que se apilan en el móvil, botones como los nuestros */
.prosa .wp-block-columns{display:flex;flex-wrap:wrap;gap:1em 1.5em}
.prosa .wp-block-column{flex:1 1 220px;min-width:0}
.prosa .wp-block-column > :first-child{margin-top:0}
.prosa .wp-block-button__link,.prosa .wp-element-button{display:inline-block;background:var(--accent-solid);color:#fff;
  border-radius:999px;padding:9px 18px;font-weight:600;text-decoration:none}
.prosa .wp-block-image img{border-radius:8px}
.prosa [class*="-wrapper"],.prosa [class*="slider"],.prosa [class*="grid"]{max-width:100%;overflow-x:auto}
@media (max-width:480px){ .prosa .alignleft,.prosa .alignright{float:none;margin:0 0 1em} }

/* =====================================================================================================
   ESCRITORIO (>= 1024 px) — distribución tipo reproductor web, con el MISMO HTML:
     ┌ logo ─┬──────────── tema · avatar ┐
     │ nav   │ contenido                  │
     ├───────┴────────────────────────────┤
     │ reproductor a todo lo ancho        │
   .top y .dock pasan a display:contents, así sus hijos (logo, acciones, mini, nav) se colocan
   directamente en la rejilla del marco.
   ===================================================================================================== */
@media (min-width:1024px){
  :root{
    --gutter-l:32px; --gutter-r:32px;
    --card:180px;
    --celda:170px;
    --pena:120px;
    --lateral:240px;
  }
  .frame{display:grid;max-width:none;
    grid-template-columns:var(--lateral) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"logo top" "nav main" "player player"}
  .top,.dock{display:contents}

  /* barra lateral: logo + navegación */
  .brand{grid-area:logo;margin:0;padding:22px 24px 18px;background:var(--surface);
    border-right:1px solid var(--line)}
  .brand .logo{height:auto;width:100%;max-width:192px}
  .nav{grid-area:nav;flex-direction:column;gap:2px;padding:6px 12px;background:var(--surface);
    border-right:1px solid var(--line)}
  .nav a{flex:0 0 auto;flex-direction:row;gap:14px;padding:10px 12px;border-radius:8px;
    font-size:14px;font-weight:600;color:var(--muted)}
  .nav a:hover{color:var(--fg);background:var(--raised)}
  .nav a[aria-current="page"]{color:var(--accent);background:var(--raised)}
  .nav a svg{width:22px;height:22px}

  /* barra superior del contenido: tema + avatar a la derecha */
  .acciones{grid-area:top;justify-content:flex-end;padding:14px var(--gutter-r) 6px}

  .scroll{grid-area:main}
  .row{margin-block:28px}
  .row:first-child{margin-top:12px}
  .rowhead{margin-bottom:14px}
  .rowhead h2{font-size:21px}
  .rowhead .extra{font-size:12px}
  .flechas{display:flex}
  .rail{gap:18px;scroll-snap-type:none}
  .card h3{font-size:14px}
  .card p{font-size:12.5px}
  .pena p{font-size:12.5px}

  /* reproductor fijo abajo, a todo lo ancho: anterior, play, siguiente, posición arrastrable,
     tiempos, aleatorio y repetir en el centro; cola y volumen a la derecha */
  .mini{grid-area:player;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);
    gap:24px;padding:12px 24px;background:var(--surface);border-top:1px solid var(--line);border-bottom:none}
  .minibarra{display:none}
  .mini .art{width:56px;height:56px;border-radius:8px}
  .mini .t{font-size:14px}
  .mini .s{font-size:12px}
  .mini .centro{flex-direction:column;gap:4px;min-width:0}
  .mini .ctl .esc{display:grid}
  .mini .ctl{gap:12px}
  .mini .ctl .pp{width:40px;height:40px}
  .mini .ctl .modo svg{width:17px;height:17px}
  .miniprog{display:flex;align-items:center;gap:10px;width:100%;max-width:600px;
    font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
  .miniprog .tm{width:40px;text-align:center;flex:0 0 auto}
  .mini .derecha{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
  .mini .derecha .icono{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
  .mini .derecha .icono:hover{color:var(--fg)}
  .mini .derecha .icono:disabled{opacity:.4}
  .mini .derecha svg{width:19px;height:19px}
  .mini .derecha .corazon.on{color:var(--accent)}
  .vol{display:flex;align-items:center;gap:8px;width:150px}
  .volico{color:var(--muted);display:grid}

  /* pantalla completa en escritorio: el mismo panel, sobre el contenido (sin tapar el reproductor) */
  .player{grid-column:2;grid-row:1 / 3;position:relative;inset:auto;z-index:20}
  .player:not(.open){display:none}
  .pbody{max-width:720px;width:100%;margin:0 auto}

  /* rejillas y cabeceras de peña / año / género */
  .grid{gap:26px 18px}
  .termhead{margin:18px 0 22px;gap:24px}
  .termhead h1{font-size:40px}
  .termhead .sub{font-size:14px}
  .bloque{margin-top:34px}
  .bloque .rowhead h2{font-size:21px}

  /* ficha: carátula a la izquierda, datos a la derecha; la lista de coplas debajo, a lo ancho */
  .albumhead{gap:28px;margin-top:22px}
  .albumhead .art{width:232px;height:232px;border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.28)}
  .albumhead h1{font-size:44px;margin-bottom:10px}
  .albumhead p{font-size:15px}
  .actions{margin:24px 0 8px;gap:12px}
  .tracks{margin-top:18px}
  .track{gap:16px;padding:11px 12px;border-bottom:none;border-radius:8px}
  .track:hover{background:var(--surface)}
  .track .n{width:24px;text-align:right}
  .track .tt{font-size:14.5px;margin:0}
  .track .td{display:none}
  .track .dur{display:block;width:56px;text-align:right}
  .track.destacada{margin-inline:0}
  .track.enlace{padding:0}
  .track.enlace > a{gap:16px;padding:11px 12px}
  .track.con-fila{padding:0 6px 0 0;gap:2px}
  .fila{gap:16px;padding:11px 12px;border-radius:8px}
  .track.conart .fila{padding-block:8px}
  .track[draggable="true"]{cursor:grab}
  .track .ts{font-size:12.5px}
  .bibtit{font-size:40px;margin:14px 0 18px}
  .bibtabs{margin-inline:0;padding-inline:0}
  .lrow{border-bottom:none;border-radius:8px;padding-right:6px}
  .lrow:hover{background:var(--surface)}
  .lrowlink{padding:10px 12px}
  .hitfila .hit{margin-inline:-10px 0}
  .volver{margin-top:4px}

  /* buscar: caja más contenida y resultados en dos columnas */
  .buscar .searchbox{max-width:640px;margin-top:8px}
  .buscar .pista{max-width:640px}
  .hits{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2px 28px}
  .hit{padding:8px 10px;margin-inline:-10px;border-radius:8px}
  .hit:hover{background:var(--surface)}
  .grupo{margin-top:28px}

  /* el aviso flotante, encima del reproductor */
  .toast{position:fixed;bottom:96px;left:calc(50% + var(--lateral) / 2)}
}