/* ══════════ MÚSICA, EN EL SISTEMA VISUAL (29/09/2026) ══════════
   Tableros «PruMusica», «PruMusicaMovil» y «SisFirma» del lienzo. Fuera el
   cartel oscuro (.rock / .artv: fosforito, rosa, marquesinas y Caveat): el
   área usa los neutros, las piezas .sis-* y su magenta SOLO como
   var(--area) / var(--area-suave), que llegan por body[data-area]. La
   superficie noche (--noche) queda para su pieza propia: la ENTRADA.

   Todo cuelga de .mus (el envoltorio de cada vista) para no pisar a nadie y
   para ganar a las reglas genéricas de form.alta (02-viajes.css). */

.mus{ min-width:0 }
.mus .toca{ cursor:pointer }
.mus .toca:focus-visible{ outline:2px solid var(--acento); outline-offset:2px }

/* ── El marco: banda, panel con las pestañas y columna derecha ── */
.mus-panel{
  min-width:0; box-sizing:border-box; container-type:inline-size;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:4px 20px 18px;
}
.mus-panel > .sis-pestanas{ margin:0 0 14px }
.mus-lado{ gap:12px }

/* Las subvistas: un «volver» discreto y, si acaso, su título. */
.mus-sub-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:0 0 12px }
.mus .mus-volver{ padding-left:0 }
.mus-sub-tit{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px }
.mus-tit{ margin:0; font-family:var(--f-tit); font-weight:800; font-size:22px; letter-spacing:-.01em; line-height:1.15; color:var(--tx) }
.mus-tit-grande{ margin:2px 0 8px; font-family:var(--f-tit); font-weight:800; font-size:clamp(28px, 3.4vw, 40px); letter-spacing:-.02em; line-height:1.05; color:var(--tx); overflow-wrap:anywhere }

/* Textos menudos comunes del área. */
.mus-nada{ margin:0; font-size:13px; color:var(--tx2) }
.mus-nota-txt{ margin:0; font-size:12.5px; line-height:1.45; color:var(--tx2) }
.mus-intro{ margin:0 0 14px }
.mus-linea{ margin:8px 0 0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--tx) }
.mus-num{ flex-shrink:0; min-width:30px; text-align:right; font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--tx) }
.mus-num small{ display:block; font-weight:400; font-size:10.5px; color:var(--tx3) }
.mus-etqs{ display:flex; flex-wrap:wrap; gap:4px; align-items:center }
.mus-bloque{ margin:0 0 20px }
.mus-bloque-cab{ display:flex; align-items:baseline; gap:8px; margin:0 0 8px }
.mus-bloque-cab .mus-num{ text-align:left; min-width:0; color:var(--tx3) }
.mus-aviso{ margin:0 0 14px; justify-content:space-between; flex-wrap:wrap }

/* Una fila de cifras (cabecera del artista o del festival, cajas): como en
   la banda, separadas por filete y la primera en el color del área. */
.mus-cifras{ display:flex; flex-wrap:wrap; gap:12px 20px }
.mus-cifras > .sis-cifra + .sis-cifra{ border-left:1px solid var(--borde-s); padding-left:20px }
.mus-cifras > .sis-cifra:first-child .sis-cifra-v b{ color:var(--area) }
/* En la columna derecha (330 px) las cifras van a tres columnas fijas y sus
   rótulos pueden partirse. */
.mus-lado .mus-cifras{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px }
.mus-lado .mus-cifras > .sis-cifra + .sis-cifra{ padding-left:12px }
.mus-lado .mus-cifras .sis-rotulo{ white-space:normal }

/* Escritorio: Música usa el ancho entero, como la Agenda (el tope de
   1360 px de 15-escritorio.css dejaba media pantalla vacía a la derecha). */
@media (min-width:900px){ body[data-area="musica"] main{ max-width:none } }
/* En la barra de filtros, una sala de nombre largo no empuja el orden abajo. */
.mus .sis-filtros select{ max-width:200px; text-overflow:ellipsis }

/* Las filas del ranking común que se abren (más vistos, festivales). */
.mus .sis-ranking li.toca{ border-radius:var(--r-s) }
.mus .sis-ranking li.toca:hover .nom{ text-decoration:underline; text-underline-offset:3px }

/* ── La cara: foto sobre su inicial (fondo neutro si no hay foto) ── */
.mus-cara{
  position:relative; flex-shrink:0; box-sizing:border-box; overflow:hidden;
  width:var(--t, 40px); height:var(--t, 40px); border-radius:50%;
  background:var(--neutro-suave); display:inline-flex; align-items:center; justify-content:center;
}
.mus-cara.cuadrada{ border-radius:var(--r-s) }
.mus-cara i{ font-style:normal; font-family:var(--f-tit); font-weight:800; font-size:calc(var(--t, 40px) * .38); color:var(--tx2) }
.mus-cara .foto{ position:absolute; inset:0; background:center/cover no-repeat }

/* ── Mis escuchas: periodo, cifras, la copia y los dos tops ── */
.mus-periodo{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; margin:0 0 18px }
.mus-periodo-cifras{ display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap }
.mus-periodo-cifras .sis-cifra-v b{ font-size:20px }
.mus-periodo-cifras > .sis-cifra:first-child .sis-cifra-v b{ color:var(--area) }
.mus-hueco{ flex:1 }
/* margin-left:auto: si no cabe en la fila y baja, se queda a la derecha. */
.mus-sync{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; margin-left:auto }
.mus-sync small{ font-family:var(--f-mono); font-size:10.5px; color:var(--tx3); text-align:right; max-width:260px }
.mus-sync small:empty{ display:none }

/* Según el ancho del PANEL (no de la ventana: la barra lateral y la columna
   derecha se lo comen): estrecho, una columna; mediano (el portátil con la
   columna derecha), artistas a todo el ancho y las canciones en dos columnas
   debajo; ancho, artistas y canciones lado a lado (7/5), como el tablero. */
.mus-escuchas{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px 26px }
@container (min-width:640px){
  .mus-escuchas .mus-canciones{ display:block; columns:2; column-gap:26px }
  .mus-escuchas .mus-cancion{ break-inside:avoid }
}
@container (min-width:940px){
  .mus-escuchas{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
  .mus-escuchas .mus-canciones{ display:flex; columns:auto }
}
.mus-escuchas-col{ min-width:0; display:flex; flex-direction:column; gap:10px }
.mus-escuchas-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.mus-escuchas-cab .sis-rotulo{ color:var(--tx2) }

/* Artistas: los cinco primeros grandes con su puesto; del 6 al 10, pequeños. */
.mus-arts-top, .mus-arts-resto{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px }
.mus-arts-resto{ margin-top:12px; padding-top:12px; border-top:1px solid var(--borde-s) }
.mus-art{ min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; cursor:pointer; border-radius:var(--r-m); padding:2px }
.mus-art:hover b{ text-decoration:underline; text-underline-offset:3px }
.mus-art:focus-visible{ outline:2px solid var(--acento); outline-offset:2px }
.mus-art-cara{ position:relative; display:block; width:100%; max-width:96px; margin-bottom:2px }
.mus-art.grande .mus-cara{ width:100%; height:auto; aspect-ratio:1 }
.mus-art:not(.grande) .mus-art-cara{ width:auto }
.mus-art-pos{
  position:absolute; left:-4px; top:-4px; width:26px; height:26px; box-sizing:border-box; border-radius:50%;
  background:var(--tx); color:#FFF; border:2px solid var(--sup); display:flex; align-items:center; justify-content:center;
  font-family:var(--f-tit); font-weight:800; font-size:13px;
}
.mus-art-pos.uno{ background:var(--area) }
.mus-art b{ max-width:100%; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-art:not(.grande) b{ font-size:12.5px }
.mus-art.grande b .pos{ display:none }
.mus-art small{ font-family:var(--f-mono); font-size:11px; color:var(--tx2) }

/* Canciones: portada cuadrada, título y artista, barra y reproducciones. */
.mus-canciones{ display:flex; flex-direction:column }
.mus-cancion{ display:flex; align-items:center; gap:10px; min-width:0; padding:5px 0; border-bottom:1px solid var(--borde-s) }
.mus-cancion .pos{ width:18px; flex-shrink:0; font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.mus-pista{ display:block; flex-shrink:0; width:54px; height:6px; border-radius:3px; background:var(--neutro-suave); overflow:hidden }
.mus-pista i{ display:block; height:100%; border-radius:3px; background:var(--area) }

/* ── Filas y listas ── */
.mus-fila{ display:flex; align-items:center; gap:12px; min-width:0; padding:8px 0; border-bottom:1px solid var(--borde-s) }
.mus-fila:last-child{ border-bottom:0 }
.mus-fila.toca:hover .mus-fila-txt b{ text-decoration:underline; text-underline-offset:3px }
.mus-fila > .pos{ width:22px; flex-shrink:0; text-align:right; font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.mus-fila-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.mus-fila-txt b{ font-size:14px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-fila-txt small{ font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-fila-txt small.nota{ color:var(--tx3) }
.mus-lista-cab{ margin:0 0 8px }
.mus-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:8px }
.mus-lista .mus-fila{ padding:10px 12px; background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-m) }
.mus-lista .mus-fila:last-child{ border-bottom:1px solid var(--borde-s) }
.mus-lista .mus-fila.toca:hover{ border-color:var(--borde) }
/* El top 100 es un ranking: se lee hacia abajo, columna a columna. */
.mus-lista.mus-top{ display:block; columns:340px; column-gap:8px }
.mus-lista.mus-top .mus-fila{ break-inside:avoid; margin-bottom:8px }
/* El día de una fila: número grande y mes/año en mono. */
.mus-dia{ width:44px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; text-align:center }
.mus-dia b{ font-family:var(--f-tit); font-weight:800; font-size:20px; line-height:1; color:var(--tx) }
.mus-dia small{ margin-top:3px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--tx3); white-space:nowrap }
.mus .mus-borrar{
  flex-shrink:0; width:28px; height:28px; padding:0; border:0; border-radius:var(--r-s); background:none; cursor:pointer;
  font-family:var(--f-txt); font-size:18px; line-height:1; color:var(--tx3);
}
.mus .mus-borrar:hover{ color:var(--error); background:var(--error-suave) }

/* ── La ENTRADA (pieza propia): noche, muescas a los lados y talón ── */
.mus-entrada{
  --muesca:var(--fondo);
  position:relative; display:flex; min-width:0; overflow:hidden; cursor:pointer;
  border-radius:var(--r-l); background:var(--noche); color:#FFF;
}
.mus-entrada::before, .mus-entrada::after{
  content:""; position:absolute; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%; background:var(--muesca);
}
.mus-entrada::before{ left:-10px }
.mus-entrada::after{ right:-10px }
.mus-entrada:focus-visible{ outline:2px solid var(--acento); outline-offset:2px }
.mus-entrada:hover b{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px }
.mus-entrada-cuerpo{ flex:1; min-width:0; padding:14px 20px; display:flex; flex-direction:column; gap:5px }
.mus-entrada-l1{ display:flex; align-items:center; gap:10px }
.mus-entrada .et{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#F4A8C4; white-space:nowrap }
.mus-entrada .cuando{ font-family:var(--f-mono); font-size:11px; color:#C9D2E0; white-space:nowrap }
.mus-entrada b{ font-family:var(--f-tit); font-weight:800; font-size:22px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-entrada .gira, .mus-entrada .donde{ font-size:13px; color:#C9D2E0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-entrada .gira{ font-size:12px; color:#8C9AB0 }
.mus-entrada-talon{
  width:80px; flex-shrink:0; border-left:2px dashed #3A4A63;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
}
.mus-entrada-talon span{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8C9AB0 }
.mus-entrada-talon b{ font-size:18px; color:#F4A8C4; white-space:nowrap }
/* Sobre blanco (una caja, el panel) la muesca muerde en blanco. */
.sis-caja .mus-entrada, .mus-panel .mus-entrada{ --muesca:var(--sup) }
.mus-entradas-rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px }
.mus-entradas{ display:flex; flex-direction:column; gap:8px }
.mus .mus-ver-entradas{ align-self:flex-start }

/* ── Columnas por año (directos, escuchas del artista) ── */
.mus-cols{ display:flex; flex-direction:column; gap:4px }
.mus-cols-barras{ display:flex; align-items:flex-end; gap:3px; min-height:40px; border-bottom:1px solid var(--borde) }
.mus-col{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:0; margin:0; border:0; background:none; font:inherit; color:inherit;
}
button.mus-col{ cursor:pointer }
.mus-col .n{ margin-bottom:4px; font-family:var(--f-mono); font-size:10px; color:var(--tx2); white-space:nowrap }
.mus-col i{ display:block; width:70%; max-width:28px; box-sizing:border-box; border-radius:3px 3px 0 0 }
.mus-col i + i{ border-radius:0 }
.mus-col i.suave{ background:var(--area-suave); background:color-mix(in srgb, var(--area) 28%, var(--sup)) }
.mus-col i.fuerte{ background:var(--area) }
.mus-col i.fut{ background:repeating-linear-gradient(45deg, var(--area) 0 3px, transparent 3px 7px); border:1.5px solid var(--area) }
button.mus-col:hover i.suave{ background:var(--area) }
button.mus-col:focus-visible{ outline:2px solid var(--acento); outline-offset:1px }
.mus-cols-rot{ display:flex; gap:3px }
.mus-cols-rot span{ flex:1 1 0; min-width:0; overflow:hidden; text-align:center; white-space:nowrap; font-family:var(--f-mono); font-size:10px; color:var(--tx3) }
.mus-cols-rot span.marca{ color:var(--area); font-weight:600 }
.mus-cols.densa .n{ display:none }
.mus-cols.densa .mus-cols-rot span{ font-size:8.5px }

/* ── El radar: la fila de la caja y la de la pestaña ── */
.mus-radar-mini{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--borde-s) }
.mus-radar-mini:last-child{ border-bottom:0 }
.mus-radar-mini .mus-fila-txt b{ font-size:13.5px }
.mus-radar-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:8px }
.mus-radar{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:10px 12px; background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-m);
}
/* Lo nuevo desde tu última visita: el «destacado» común, filete de 3 px. */
.mus-radar.nuevo{ box-shadow:inset 0 3px 0 var(--area) }
.mus-radar-que{ min-width:0 }
.mus-radar-que .l1{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.mus-radar-que .l1 b{ font-size:14.5px; font-weight:600 }
.mus-radar-que .l2{ margin-top:2px; font-size:12.5px; color:var(--tx2) }
.mus-radar-que .l3{ margin-top:2px; font-family:var(--f-mono); font-size:10.5px; color:var(--tx3) }
.mus-radar-acc{ display:flex; align-items:center; gap:6px }
.mus .mus-ire{ cursor:pointer; font:inherit; font-family:var(--f-mono); font-size:10px; font-weight:600 }
.mus .mus-ire:hover{ text-decoration:underline }
.mus .mus-quitar{ width:var(--h-s); height:var(--h-s); font-size:18px; color:var(--tx2) }

/* ── Logros ── */
.mus-logros{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px }
.mus-logro{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; box-sizing:border-box;
  padding:16px; background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); opacity:.55;
}
.mus-logro.si{ opacity:1 }
.mus-logro-ico{ font-size:28px; line-height:1; filter:grayscale(1) }
.mus-logro.si .mus-logro-ico{ filter:none }
.mus-logro b{ font-family:var(--f-tit); font-weight:800; font-size:15px }
.mus-logro p{ margin:0 0 4px; flex:1; font-size:12.5px; line-height:1.45; color:var(--tx2) }

/* ── Ficha del artista y del festival ── */
.mus-art-cab, .mus-fest-cab{ display:flex; align-items:center; gap:24px; margin:0 0 18px }
.mus-art-foto{ flex-shrink:0 }
.mus-art-datos{ min-width:0; display:flex; flex-direction:column; gap:6px }
.mus-art-datos .mus-etqs{ margin-bottom:4px }
.mus-candidatos{ display:flex; flex-direction:column; gap:6px }
.mus .mb-sug{
  display:flex; align-items:baseline; gap:8px; text-align:left; cursor:pointer; padding:8px 10px;
  background:var(--sup); border:1.5px solid var(--borde); border-radius:var(--r-m); color:var(--tx);
  font-family:var(--f-txt); font-size:14px; font-weight:400; letter-spacing:0; text-transform:none;
}
.mus .mb-sug:hover{ border-color:var(--tx) }
.mus .mb-sug b{ font-family:var(--f-txt); font-weight:600 }
.mus .mb-sug span{ font-family:var(--f-mono); font-size:11px; color:var(--tx2) }
.mus-discos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:14px 12px }
.mus-disco{ position:relative; min-width:0; display:flex; flex-direction:column; gap:3px }
.mus-disco .mus-cara{ width:100%; height:auto; aspect-ratio:1; margin-bottom:3px }
.mus-disco-etq{ position:absolute; top:6px; left:6px }
.mus-disco b{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-disco small{ font-family:var(--f-mono); font-size:10.5px; color:var(--tx3) }
.mus-fest-logo{
  flex-shrink:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-l); background:var(--neutro-suave); font-family:var(--f-tit); font-weight:800; font-size:36px; color:var(--tx2);
}
.mus-fest-logo.sin-imagen{ width:96px; height:96px }
/* La imagen la pega Jorge: puede ser cuadrada, apaisada o alta. La caja fija
   solo el ALTO y la imagen encoge entera, sin recortarse ni deformarse. */
.mus-fest-logo.con-imagen{ height:96px; max-width:240px; padding:8px 12px; background:var(--sup); border:1px solid var(--borde-s) }
.mus-fest-logo.con-imagen img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto }
.mus-fest-imgform{ display:flex; gap:8px; flex-wrap:wrap; max-width:560px; margin:0 0 18px }
.mus-fest-imgform input{
  flex:1; min-width:180px; height:var(--h-s); box-sizing:border-box; padding:0 12px;
  border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx); font-family:var(--f-txt); font-size:13px;
}
.mus-fest-imgform input:focus{ outline:none; border-color:var(--tx) }
.mus-ediciones{ display:flex; gap:6px; flex-wrap:wrap }
.mus-fest-dias{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px }

/* ── Ficha del concierto ── */
.mus-ficha-dos{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start }
@media (min-width:1100px){ .mus-ficha-dos{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }

/* ── Formularios (alta y ficha del concierto) con las piezas del sistema ──
   02-viajes.css viste TODO form.alta (campos crema, botones de tinta en
   mono y mayúsculas); aquí, dentro de .mus, vuelven a ser los comunes. */
.mus .mus-form{ display:flex; flex-direction:column; gap:4px; margin:0 0 14px }
.mus form.alta.mus-form{ border:1px solid var(--borde-s); border-radius:var(--r-l); background:var(--sup); padding:16px 18px }
.mus .mus-form label:not(.chip-check){
  display:block; margin:8px 0 3px; font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tx3);
}
.mus .mus-form label small{ font-family:var(--f-txt); font-size:11.5px; font-weight:400; letter-spacing:0; text-transform:none }
.mus .mus-form input:not([type=checkbox]):not([type=radio]), .mus .mus-form select{
  width:100%; height:var(--h-m); box-sizing:border-box; padding:0 12px;
  border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-size:14px;
}
.mus .mus-form input:focus, .mus .mus-form select:focus{ outline:none; border-color:var(--tx) }
.mus .mus-form .dos{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.mus .mus-form .dos > span{ display:flex; flex-direction:column; min-width:0 }
.mus .mus-form .dos > span > label{ margin-top:8px }
/* Los chips de «¿Quién?» y «Es un festival» son <label>: sin esto heredan el
   rótulo en mayúsculas que form.alta pone a toda etiqueta. */
.mus .mus-form .chip-check{ display:inline-flex; margin:0; text-transform:none; letter-spacing:0 }
.mus .mus-form .mus-chk{ align-self:flex-start; margin:8px 0 2px }
.mus .mus-form .mb-elegido{ margin:4px 0 0; font-family:var(--f-mono); font-size:11px; color:var(--ok) }
.mus .mus-form .mb-sin{ margin:4px 0 0; font-size:12px; color:var(--tx2) }
.mus .mus-form .sis-acciones{ margin-top:14px }
.mus .mus-form .sis-btn{
  height:var(--h-m); padding:0 14px; border:1.5px solid var(--tx); border-radius:var(--r-m); background:var(--sup); color:var(--tx);
  font-family:var(--f-txt); font-weight:600; font-size:14px; letter-spacing:0; text-transform:none;
}
.mus .mus-form .sis-btn.principal{ background:var(--acento); border-color:var(--acento); color:#FFF }

/* ── Móvil: sin panel, los artistas en una fila que se desliza ── */
@media (max-width:899px){
  .mus-panel{ padding:0; background:none; border:0; border-radius:0 }
  .mus-panel .mus-entrada{ --muesca:var(--fondo) }
  .mus-lado{ margin-top:8px }
  /* La banda en móvil enseña tres cifras: minutos del mes, racha y conciertos. */
  .mus-cab .sis-banda-cifras > .sis-cifra:nth-child(2){ display:none }
  .mus-cab .sis-banda-cifras > .sis-cifra:nth-child(4){ display:flex }
  .mus-cab .sis-cambio{ display:none }
  .mus-periodo{ margin-bottom:14px }
  .mus-periodo-cifras, .mus-hueco{ display:none }
  .mus-sync{ flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap }
  .mus-sync small{ text-align:left }
  .mus-arts{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -18px; padding:0 18px 4px; -webkit-overflow-scrolling:touch }
  .mus-arts::-webkit-scrollbar{ display:none }
  .mus-arts-top, .mus-arts-resto{ display:contents }
  .mus-art, .mus-art.grande{ flex:0 0 76px; padding:0 }
  .mus-art-cara, .mus-art:not(.grande) .mus-art-cara{ width:auto; max-width:none }
  .mus-art .mus-cara, .mus-art.grande .mus-cara{ width:64px; height:64px; aspect-ratio:auto }
  .mus-art-pos{ display:none }
  .mus-art b, .mus-art:not(.grande) b{ font-size:12.5px }
  .mus-art.grande b .pos{ display:inline }
  .mus-pista{ display:none }
  .mus-lista, .mus-radar-lista, .mus-entradas-rejilla{ grid-template-columns:minmax(0,1fr) }
  .mus-radar{ grid-template-columns:44px minmax(0,1fr) }
  .mus-radar-acc{ grid-column:2 }
  .mus-art-cab, .mus-fest-cab{ flex-direction:column; align-items:flex-start; gap:14px }
  .mus-art-foto .mus-cara{ width:120px; height:120px }
  .mus-cifras{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px }
  .mus-cifras > .sis-cifra + .sis-cifra{ border-left:0; padding-left:0 }
  .mus-lado .mus-cifras{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .mus-discos{ display:flex; overflow-x:auto; scrollbar-width:none; gap:10px; padding-bottom:4px }
  .mus-discos::-webkit-scrollbar{ display:none }
  .mus-disco{ flex:0 0 104px }
  .mus-fest-logo.sin-imagen{ width:72px; height:72px; font-size:28px }
  .mus-fest-logo.con-imagen{ height:72px; max-width:180px }
}

/* ══ Compartidas, NO son de Música ══
   Vivían aquí por historia y las usan otras áreas: .ordenar-fila (Escapes y
   el cuaderno de Viajes) y .leyenda (Agenda y Viajes, encima de la de
   03-pasaporte.css). Se quedan tal cual hasta que se promuevan a su sitio. */
.leyenda{display:flex; gap:14px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:#B9AEC2; margin-top:6px}
.leyenda i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; font-style:normal}
.ordenar-fila{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  margin:10px 0 8px;
}
.ordenar-fila label{
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--tinta-suave);
}
.ordenar-fila select{
  width:auto; font-size:.78rem; padding:5px 8px;
}

/* ══ Escuchas a fondo y la portada de Conciertos (15/10/2026) ══
   Las tarjetas son las de «Más datos» de Viajes (vjm-t, 03-pasaporte.css);
   aquí solo lo propio de Música. */
.mus-principal{ min-width:0 }
.mus-debajo{ margin-top:14px }
.mus-t .mus-cols{ margin-top:6px }
.mus-t .mus-cols-barras{ border-bottom-color:rgba(27,42,65,.25) }
.mus-t .mus-cols-rot span{ color:var(--tx2) }
.mus-t .sis-conmutador{ margin-left:auto }
.mus-t h4 .sis-conmutador + small{ display:none }
.mus-t-nota{ font-size:13px; color:var(--tx2); line-height:1.45; margin:8px 0 0 }
.mus-t-nota b{ color:var(--tx) }
.mus-t-ver{ display:block; margin:8px auto 0 }
.mus-volver-conc{ margin:0 0 6px }
/* Día × hora */
.mus-calor{ display:grid; grid-template-columns:18px repeat(24,minmax(0,1fr)); gap:2px; margin-top:2px }
.mus-calor span{ font:600 9px var(--f-mono); color:var(--tx2); display:flex; align-items:center }
.mus-calor span.h{ justify-content:center; font-size:8px }
.mus-calor i{ display:block; aspect-ratio:1; border-radius:3px; background:var(--area) }
.mus-dato3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; text-align:center }
.mus-dato3 div{ background:#fff; border:1.2px solid var(--tx); border-radius:12px; padding:8px 4px }
.mus-dato3 b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:18px; line-height:1.05 }
.mus-dato3 span{ display:block; margin-top:3px; font-size:11px; line-height:1.2; color:var(--tx2) }
/* El artista de cada año */
.mus-reyes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px }
.mus-rey{ background:#fff; border:1.2px solid var(--tx); border-radius:14px; padding:8px 6px 9px; text-align:center; min-width:0 }
.mus-rey.hoy{ background:var(--area-suave, #F4E3EE) }
.mus-rey small{ display:block; font:600 10px var(--f-mono); letter-spacing:.1em; color:var(--tx2) }
.mus-rey .mus-cara{ margin:5px auto 2px }
.mus-rey b{ display:block; font-family:var(--f-tit); font-weight:800; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-rey i{ font-style:normal; font-family:"Caveat",cursive; font-size:15px; color:var(--tx2) }
/* Chips con foto (descubrimientos) */
.mus-chips-art{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.mus-chip-art{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border-radius:16px; border:1.2px solid var(--tx); background:#fff; font-size:12.5px; font-weight:600 }
/* Tus más escuchados, en directo */
.mus-vivo{ display:grid; grid-template-columns:22px 30px minmax(0,1fr) auto auto; gap:6px 10px; align-items:center; margin-top:10px; font-size:13.5px }
.mus-vivo-nom{ min-width:0 }
.mus-vivo-nom b{ display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-vivo-nom small{ font:500 10.5px var(--f-mono); color:var(--tx2) }
.mus-vivo-veces{ display:flex; gap:2px; flex-wrap:wrap; max-width:96px; justify-content:flex-end }
.mus-vivo-veces i{ width:8px; height:8px; border-radius:50%; background:#2E6E4E }
.mus-vivo-veces em{ font:600 11px var(--f-mono); font-style:normal; color:var(--tx2) }
.mus-vivo-ult{ font-family:"Caveat",cursive; font-size:16px; color:var(--tx2); text-align:right; white-space:nowrap; min-width:64px }
.mus-vivo-ult.prox{ color:var(--teja, #B04E2E) }
@media (max-width:899px){ .mus-vivo-veces{ max-width:56px } }
/* El efecto concierto */
.mus-efecto{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:6px 10px; align-items:center; font-size:13.5px }
.mus-efecto-quien{ display:flex; align-items:center; gap:7px; min-width:0 }
.mus-efecto-quien > span:last-child{ min-width:0 }
.mus-efecto-quien b{ display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mus-efecto-quien small{ display:block; font-size:11px; color:var(--tx2) }
.mus-efecto-n{ font:600 11px var(--f-mono); color:var(--tx2); text-align:right; white-space:nowrap }
.mus-efecto-x{ font-family:var(--f-tit); font-weight:800; font-size:15px; color:#2E6E4E; text-align:right; min-width:44px }
.mus-efecto-x.baja{ color:var(--tx3) }
/* Anunciados (portada de Conciertos) */
.mus-anuncio{ display:grid; grid-template-columns:auto 30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--borde-s) }
.mus-anuncio:last-child{ border-bottom:0 }
.mus-anuncio em{ display:block; font-style:normal; font-family:"Caveat",cursive; font-size:16px; color:var(--teja, #B04E2E); line-height:1.1 }
.vjm-fila.mus-fila-art{ grid-template-columns:22px minmax(0,8em) minmax(0,1fr) 26px }
/* El idioma de las actuaciones, en CD */
.mus-cd-caja{ display:flex; align-items:center; gap:14px }
.mus-cd{ width:120px; height:120px; flex-shrink:0 }
.mus-cd-giro{ transform-origin:60px 60px; animation:musCdGira 18s linear infinite }
@media (prefers-reduced-motion:reduce){ .mus-cd-giro{ animation:none } }
@keyframes musCdGira{ to{ transform:rotate(360deg) } }
.mus-cd-ley{ display:flex; flex-direction:column; gap:8px; font-size:13.5px }
.mus-cd-ley span{ display:flex; gap:7px; align-items:center; white-space:nowrap }
.mus-cd-ley i{ flex-shrink:0; width:12px; height:12px; border-radius:50%; border:1px solid #1B2A41 }
.mus-cd-ley b{ font-family:var(--f-tit); font-weight:800; font-size:16px }

/* ══ Tu resumen en imagen (src/musica/ResumenEscuchas.tsx) ══
 * La lámina va en px a su tamaño real (1920 × 1080 o 1080 × 1920) y se
 * encoge desde fuera para verla. Maqueta: referencia/lienzo/ResumenEscuchas.html */
.rme-capa{ position:fixed; inset:0; z-index:3000; background:rgba(27,42,65,.55); overflow:auto; padding:16px }
.rme-caja{ background:var(--fondo, #F2F4F1); border-radius:16px; max-width:1240px; margin:0 auto; padding:14px; box-shadow:0 20px 60px rgba(27,42,65,.3) }
.rme-barra{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px }
.rme-cabecera{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.rme-titulo{ font-family:var(--f-tit); font-weight:800; font-size:18px; color:var(--tx) }
.rme-x{ flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--tx); background:var(--tx); color:#fff; font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center }
.rme-x:hover{ opacity:.85 }
.rme-x:focus-visible{ outline:3px solid #6B4FB8; outline-offset:2px }
.rme-grupo{ display:flex; gap:6px; flex-wrap:wrap }
.rme-hueco-barra{ flex:1 }
.rme-caja.vert .rme-hueco{ max-width:440px; margin:0 auto }
.rme-marco{ position:relative; overflow:hidden; border-radius:12px; box-shadow:0 8px 30px rgba(27,42,65,.18); min-height:120px; background:#FBF6EC }
.rme-espera{ margin:0; padding:40px 20px; text-align:center; font-family:var(--f-txt); color:var(--tx2) }
@media (max-width:760px){ .rme-capa{ padding:8px } .rme-caja{ padding:10px } .rme-hueco-barra{ display:none } }

.rme-lamina{ position:relative; width:1920px; height:1080px; overflow:hidden; background:#FBF6EC; color:#1B2A41; font-family:'Instrument Sans',system-ui,sans-serif; text-align:left }
.rme-lamina.vert{ width:1080px; height:1920px }
.rme-lamina > *{ position:absolute }
.rme-lamina img{ max-width:none }
.rme-circ{ border-radius:50% }
.rme-velo{ left:0; right:0; top:1430px; bottom:0; background:linear-gradient(to bottom, rgba(243,227,248,0), #F3E3F8 250px) }
.rme-suelo{ left:20px; top:1655px; width:1040px; height:180px; background:radial-gradient(closest-side, #D9CFEE 60%, rgba(217,207,238,0) 100%) }

.rme-cab{ left:80px; top:64px; right:80px; display:flex; align-items:flex-end; justify-content:space-between }
.rme-per{ font-family:'Caveat',cursive; font-weight:600; font-size:46px; color:#6B4FB8; margin-bottom:6px; line-height:1.1 }
.rme-tit{ font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; font-size:76px; letter-spacing:-.03em; line-height:.95 }
.rme-marca{ font-family:'Caveat',cursive; font-size:44px; color:#4A5A72 }

.rme-minutos{ left:80px; top:230px; width:760px }
.rme-minutos .n{ font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; font-size:190px; line-height:.82; letter-spacing:-.05em }
.rme-minutos .u{ font-family:'Caveat',cursive; font-size:60px; color:#6B4FB8; margin-left:10px }
.rme-minutos .sub{ display:flex; gap:14px; margin-top:22px }
.rme-minutos .sub span{ font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:#fff; border:2px solid #1B2A41; border-radius:40px; padding:10px 20px; white-space:nowrap }
.rme-minutos .sub b{ font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:26px; letter-spacing:0; margin-right:6px }
.rme-genero{ left:80px; top:492px; display:flex; align-items:center; gap:16px; font-family:'Caveat',cursive; font-size:32px; color:#4A5A72; white-space:nowrap }
.rme-genero b{ font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; font-size:40px; color:#fff; background:#6B4FB8; border:2.5px solid #1B2A41; border-radius:40px; padding:6px 26px 10px; letter-spacing:-.01em }

/* El logo: en apaisado, solo la escena (el letrero va arriba); en vertical, entero */
.rme-escena{ left:40px; bottom:30px; width:845px; height:348px; overflow:hidden }
.rme-escena img{ display:block; width:845px; height:auto }
.vert .rme-escena{ left:128px; bottom:22px; width:824px; height:484px }
.vert .rme-escena img{ width:824px }

.rme-der{ left:900px; top:200px; width:940px }
.rme-bloque{ background:#fff; border:2.5px solid #1B2A41; border-radius:28px; padding:18px 26px; margin-bottom:18px }
.rme-bloque h3{ margin:0 0 10px; display:flex; align-items:baseline; gap:12px; font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; font-size:28px; color:#1B2A41; letter-spacing:0 }
.rme-bloque h3 small{ margin-left:auto; font-family:'Caveat',cursive; font-weight:600; font-size:30px; color:#4A5A72 }
.rme-artistas{ display:grid; grid-template-columns:1.25fr repeat(4,1fr); gap:16px; align-items:end; text-align:center; padding:0 30px }
.rme-art img, .rme-art .sin{ display:block; width:100%; max-width:118px; margin:0 auto; aspect-ratio:1; border-radius:50%; object-fit:cover; border:3px solid #1B2A41; background:#E9E3F4 }
.rme-art .sin{ display:grid; place-items:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:40px }
.rme-art .pos{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#1B2A41; color:#fff; font:600 16px 'IBM Plex Mono',monospace; margin-top:-22px; position:relative }
.rme-art.uno img, .rme-art.uno .sin{ max-width:150px }
.rme-art.uno .pos{ background:#6B4FB8; width:42px; height:42px; font-size:20px }
.rme-art b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:21px; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rme-art small{ font-family:'Caveat',cursive; font-size:24px; color:#4A5A72 }
.rme-cancs{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; grid-auto-flow:column; grid-template-rows:repeat(5,auto) }
.rme-canc{ display:grid; grid-template-columns:30px 44px minmax(0,1fr) auto; gap:14px; align-items:center; padding:2px 0; border-bottom:2px dashed #E3E0EC }
.rme-canc .p{ font:600 20px 'IBM Plex Mono',monospace; color:#4A5A72 }
.rme-canc img, .rme-canc .sin{ width:44px; height:44px; border-radius:10px; object-fit:cover; border:2px solid #1B2A41; background:#FBF0D3; display:grid; place-items:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:24px }
.rme-canc > div{ min-width:0 }
.rme-canc b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rme-canc > div span{ display:block; font-size:16px; color:#4A5A72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rme-canc em{ font-style:normal; font-family:'Caveat',cursive; font-size:26px; color:#6B4FB8; font-weight:600; white-space:nowrap }
.rme-descub{ display:flex; gap:12px; flex-wrap:nowrap; overflow:hidden }
.rme-descub > span{ display:inline-flex; align-items:center; gap:8px; padding:4px 14px 4px 4px; border-radius:40px; border:2.5px solid #1B2A41; background:#F8E2EB; font-size:18px; font-weight:600; white-space:nowrap }
.rme-descub img, .rme-descub i{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #fff; display:grid; place-items:center; font-style:normal; background:#E9E3F4 }
.rme-descub small{ font-family:'Caveat',cursive; font-size:20px; color:#4A5A72; font-weight:600 }
.rme-vacio{ font-family:'Caveat',cursive; font-size:28px; color:#4A5A72 }

/* Vertical: todo en una columna y el género a la derecha */
.vert .rme-cab{ left:64px; right:64px; top:70px }
.vert .rme-tit{ font-size:80px }
.vert .rme-per{ font-size:38px; margin-bottom:10px }
.vert .rme-marca{ display:none }
.vert .rme-minutos{ left:64px; top:240px; width:952px }
.vert .rme-minutos .n{ font-size:176px }
.vert .rme-minutos .sub{ margin-top:20px }
.vert .rme-genero{ left:auto; right:64px; top:476px }
.vert .rme-der{ left:64px; top:568px; width:952px }
.vert .rme-artistas{ padding:0 10px }

/* El botón, junto a «Actualizar escuchas» */
.mus-sync-bot{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }

/* Lo que se apunta de un concierto (con quién, cómo fue): en la ficha, como una nota escrita */
.mus-recuerdo{ margin:10px 0 0; padding:10px 12px; background:#FBF0D3; border-radius:10px; font-size:14px; line-height:1.5; white-space:pre-line; color:var(--tx) }
.mus-form textarea{ width:100%; font:inherit; resize:vertical }