/* ── Zona música: cartel de concierto ── */
.rock{
  background:#18121A; border-radius:var(--radio); padding:14px 12px 18px; margin:0 -4px;
  color:#F4EDE3; position:relative; overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px, rgba(244,237,227,.05) 1px, transparent 0);
  background-size:16px 16px;
}
.rock::before{
  content:"EN DIRECTO ✶ GIRA ✶ PISTA ✶ EN DIRECTO ✶ GIRA ✶ PISTA ✶ EN DIRECTO ✶ GIRA ✶ PISTA ✶";
  display:block; white-space:nowrap; overflow:hidden;
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.3em; font-weight:600;
  color:#18121A; background:#E4FF3B; padding:5px 8px; margin:-14px -12px 14px; transform:rotate(-.6deg) scale(1.02);
}
.rock .billete{background:#221A25; border-color:#E4FF3B; color:#F4EDE3}
.rock .billete::before{background:repeating-linear-gradient(to bottom, transparent 0 7px, #18121A 7px 14px); border-color:#E4FF3B}
.rock .billete h3{text-transform:uppercase; letter-spacing:.01em}
.rock .ruta{color:#B9AEC2}
.rock .etiqueta{color:#E4FF3B; border-color:#E4FF3B}
.rock .etiqueta.ambar{color:#FF3B7A; border-color:#FF3B7A}
.rock .borrar{color:#FF3B7A}
.rock .rank-fila{border-color:#3A2F3E}
.rock .rank-pos{color:#B9AEC2}
.rock .rank-fila:first-child .rank-pos{color:#E4FF3B}
.rock .rank-barra{background:#FF3B7A; opacity:1}
.rock form.alta{background:#221A25; border-color:#B9AEC2}
.rock form.alta strong{color:#B9AEC2}
.rock form.alta input, .rock form.alta select{background:#18121A; border-color:#3A2F3E; color:#F4EDE3}
.rock form.alta button{background:#E4FF3B; color:#18121A}
.rock .vacio{background:#221A25; border-color:#3A2F3E; color:#B9AEC2}
.rock .miga{color:#B9AEC2}
.evo{display:flex; align-items:flex-end; gap:5px; margin-top:12px}
.evo-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0}
.evo-col b{font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:#B9AEC2; font-weight:600}
.evo-bar{display:flex; flex-direction:column; justify-content:flex-end; height:78px; width:100%; max-width:26px}
.evo-bar .pas{background:#E4FF3B; border-radius:3px 3px 0 0}
.evo-bar .fut{background:#FF3B7A; border-radius:3px 3px 0 0; margin-bottom:1px}
.evo-col small{font-family:'IBM Plex Mono',monospace; font-size:.55rem; color:#B9AEC2}
.avatar{position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#3A2F3E; overflow:hidden; flex-shrink:0; margin-right:7px; vertical-align:middle}
.avatar i{font-style:normal; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.68rem; color:#B9AEC2}
.avatar .foto{position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center}
.split{display:flex; height:14px; border-radius:7px; overflow:hidden; margin:10px 0 4px; background:#3A2F3E}
.split span{display:block; height:100%}
.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}
.fest-fila{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed #3A2F3E; font-size:.85rem}
.fest-fila:last-child{border-bottom:0}
.fest-fila b{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:#E4FF3B; font-weight:600}
.fest-fila.toca{cursor:pointer}
.fest-fila.toca:hover{background:rgba(255,255,255,.04)}
.tc-fila{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed #3A2F3E}
.tc-fila:last-child{border-bottom:0}
.tc-pos{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:#B9AEC2; width:18px; flex-shrink:0}
.tc-pos.oro{color:#E4FF3B}
.tc-nombre{min-width:0}
.tc-nombre small{display:block; color:#B9AEC2; font-size:.66rem}
.tc-n{margin-left:auto; font-family:'IBM Plex Mono',monospace; color:#FF3B7A; font-size:.72rem; white-space:nowrap; flex-shrink:0}
.stats-musica{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px}
.stat-rock{
  background:#221A25; border:1.5px solid #3A2F3E; border-radius:10px; padding:10px 12px;
}
.stat-rock b{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.15rem; display:block; color:#E4FF3B; line-height:1.2}
.stat-rock span{font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:#B9AEC2}
.banner-logros{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#FF3B7A; color:#18121A; border-radius:10px; padding:12px 14px; margin-bottom:12px;
  cursor:pointer; transform:rotate(-.4deg); border:none; width:100%; text-align:left;
}
.banner-logros h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem; text-transform:uppercase}
.banner-logros span{font-family:'IBM Plex Mono',monospace; font-size:.62rem; font-weight:600; letter-spacing:.1em}
.medallero{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.medalla{
  background:#221A25; border:1.5px solid #3A2F3E; border-radius:12px; padding:14px 12px; text-align:center;
}
.medalla.si{border-color:#E4FF3B}
.medalla .icono{font-size:1.9rem; line-height:1; filter:grayscale(1) opacity(.35)}
.medalla.si .icono{filter:none}
.medalla h4{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.82rem; text-transform:uppercase; margin-top:8px; color:#F4EDE3}
.medalla p{font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:#B9AEC2; margin-top:5px; line-height:1.5}
.medalla .estado{display:inline-block; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:.56rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1.5px solid #3A2F3E; color:#B9AEC2}
.medalla.si .estado{border-color:#E4FF3B; color:#E4FF3B}
@media (min-width:640px){ .medallero{grid-template-columns:repeat(3,1fr)} .stats-musica{grid-template-columns:repeat(4,1fr)} }

/* ── Ranking de artistas ── */
.rank-fila{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--linea)}
.rank-fila:last-child{border-bottom:none}
.rank-pos{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.05rem; width:26px; color:var(--tinta-suave); flex-shrink:0}
.rank-fila:first-child .rank-pos{color:var(--sello)}
.rank-nombre{font-weight:600; font-size:.92rem; flex:1; min-width:0}
.rank-barra{height:7px; border-radius:4px; background:var(--visado); opacity:.85; min-width:7px}
.rank-veces{font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:600; width:30px; text-align:right; flex-shrink:0}


/* ═══ Las ENTRADAS: cada registro vestido de entrada de concierto ═══
   Talón perforado a la izquierda con el año en vertical, cuerpo a la derecha.
   La perforación es un borde discontinuo, que es exactamente lo que es. */
.tick{ display:flex; padding:0; overflow:hidden }
.tick .tick-talon{
  flex:0 0 44px; display:flex; align-items:center; justify-content:center;
  background:rgba(228,255,59,.08); border-right:2px dashed var(--linea);
  position:relative;
}
.tick .tick-talon .mono{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.2em;
  color:var(--tinta-suave);
}
/* Las muescas de la perforación, arriba y abajo del talón. El color es el
   fondo del envoltorio .rock (#18121A): la muesca "muerde" el billete. */
.tick .tick-talon::before, .tick .tick-talon::after{
  content:""; position:absolute; right:-8px; width:14px; height:14px;
  border-radius:50%; background:#18121A; border:1.5px solid #E4FF3B;
}
.tick .tick-talon::before{ top:-8px }
.tick .tick-talon::after{ bottom:-8px }
.tick .tick-cuerpo{ flex:1; padding:14px 16px; min-width:0 }

/* El "Ordenar por", pequeño y a la derecha. */
.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;
}

/* Columnas del gráfico y stat de cartera que se abren: son botones de verdad,
   pero se visten como lo que eran. */
button.evo-toca{ background:none; border:none; cursor:pointer; font:inherit; color:inherit }
button.evo-toca:hover b{ color:#E4FF3B }
button.stat-toca{ cursor:pointer; text-align:inherit; font:inherit }
button.stat-toca:hover{ border-color:#E4FF3B }