/* ===========================================================================
   NO CRÍTICO — carga diferida. Presupuesto 16 KB.
   =========================================================================== */

/* ------------------------------------------------------------- ESTRUCTURA */
.with-aside{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:62em){
  .with-aside{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}
  .aside{position:sticky;top:76px}
}
.with-aside>*,.grid-auto>*,.grid-2>*{min-width:0}
.grid-auto{display:grid;gap:var(--s-4);
           grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.grid-2{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media (min-width:52em){.grid-2{grid-template-columns:1fr 1fr}}
.aside{display:flex;flex-direction:column;gap:var(--s-5)}
.prosa{max-width:72ch;color:var(--text-soft)}
section+section{margin-top:var(--s-6)}
h2{margin-bottom:var(--s-4)}

/* ------------------------------------------------------------------ MIGAS */
.bc{font-size:var(--fs-sm);color:var(--text-soft);margin-bottom:var(--s-4)}
.bc ol{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none}
.bc li+li::before{content:"›";margin-right:var(--s-2);opacity:.5}
.bc a{color:var(--text-soft)}
.bc a:hover{color:var(--brand)}
/* Sobre el degradado del hero las migas van en blanco */
.hero .bc,.hero .bc a{color:rgba(255,255,255,.8)}
.hero .bc a:hover{color:#fff}

/* ---------------------------------------------------------------- TARJETAS */
.card{background:var(--surface);border:1px solid var(--border);
      border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:var(--s-5);
      margin-bottom:var(--s-5)}
.card>h2{font-size:var(--fs-h3);margin-bottom:var(--s-4)}
.card-tight{padding:var(--s-4)}
.panel{background:var(--brand-soft);border:1px solid var(--border);
       border-radius:var(--r-lg);padding:var(--s-5)}

/* Cifras de ficha: van bajo el hero, sobre fondo claro. No son las del hero. */
.stats-row{display:grid;gap:var(--s-3);margin-bottom:var(--s-5);
           grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
.stat-b{background:var(--surface);border:1px solid var(--border);
        border-radius:var(--r-lg);padding:var(--s-4) var(--s-3);text-align:center}
.stat-b b{display:block;font-size:1.75rem;font-weight:800;line-height:1;
          color:var(--brand);margin-bottom:var(--s-1);font-variant-numeric:tabular-nums}
.stat-b span{display:block;font-size:var(--fs-xs);color:var(--text-soft);
             text-transform:uppercase;letter-spacing:.4px;font-weight:600}

/* ------------------------------------------------------------- LIST-ITEM
   Filete izquierdo de 3 px que se tiñe de marca al pasar por encima.
   Es el gesto de la casa. */
.list-item{display:flex;align-items:center;gap:var(--s-3);
           padding:var(--s-3);border-left:3px solid transparent;
           border-radius:var(--r-sm);background:var(--surface);color:var(--text);
           min-height:2.75rem;contain:layout paint}
.list-item:hover{border-left-color:var(--brand);background:var(--brand-soft);
                 text-decoration:none}
.list-item .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-item .s{font-size:var(--fs-sm);color:var(--text-soft);overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
.li-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.li-end{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0;
        color:var(--text-soft);font-size:var(--fs-sm)}
.li-end .d{font-variant-numeric:tabular-nums}
.li-n{flex-shrink:0;width:2rem;text-align:right;font-weight:700;
      font-variant-numeric:tabular-nums;color:var(--text-faint);font-size:var(--fs-sm)}
.rowlist{display:flex;flex-direction:column;gap:2px;list-style:none}
.rowlist>li{border-bottom:1px solid var(--border)}
.rowlist>li:last-child{border-bottom:0}
/* Listas largas: el navegador se salta el layout de lo que no está en
   pantalla. Es lo que salva la ficha de un artista con 400 canciones. */
.rowlist-long>li{content-visibility:auto;contain-intrinsic-size:auto 52px}

.ico-v{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;
       background:var(--brand-soft);color:var(--brand);flex-shrink:0}

/* ------------------------------- CONTROLES DE LISTA: FILTRAR Y ORDENAR ---- */
.listctl{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;
         margin-bottom:var(--s-4)}
.listctl-buscar{position:relative;flex:1 1 14rem;min-width:0}
.listctl-buscar svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
                    color:var(--text-faint);pointer-events:none}
.listctl-buscar input{width:100%;padding:.5rem .8rem .5rem 2.2rem;
  border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface);color:var(--text);font-size:var(--fs-sm);min-height:2.5rem;
  font-family:inherit}
.listctl-buscar input:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.listctl-buscar input::-webkit-search-cancel-button{-webkit-appearance:none}

.listctl-orden{display:flex;gap:2px;background:var(--surface-alt);
               border:1px solid var(--border);border-radius:var(--r-full);padding:2px}
.ord{border:0;background:none;padding:.35rem .8rem;border-radius:var(--r-full);
     cursor:pointer;font-size:var(--fs-sm);color:var(--text-soft);min-height:2rem;
     font-family:inherit}
.ord:hover{color:var(--brand-dark)}
.ord.on{background:var(--brand);color:var(--brand-contrast);font-weight:600}
.listctl-n{font-size:var(--fs-sm);color:var(--text-soft);
           font-variant-numeric:tabular-nums;margin-left:auto}
/* Mientras se repinta, la lista se atenua: da senal sin mover nada de sitio. */
[aria-busy="true"]{opacity:.55;transition:opacity .12s}

@media (max-width:36em){
  .listctl-orden{width:100%;justify-content:space-between}
  .ord{flex:1;text-align:center;padding-inline:.4rem}
  .listctl-n{margin-left:0}
}

/* ------------------------------------------------------- FICHAS DE ARTISTA */
.acard{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);
       background:var(--surface);border:1px solid var(--border);
       border-left:3px solid transparent;border-radius:var(--r-lg);
       box-shadow:var(--sh-sm);color:var(--text);min-height:4.5rem}
.acard:hover{border-left-color:var(--brand);box-shadow:var(--sh-md);
             transform:translateY(-2px);text-decoration:none}
.acard .t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard .s{font-size:var(--fs-sm);color:var(--text-soft)}

/* Avatar generado: inicial sobre un color derivado del nombre. Cero
   peticiones de imagen y cero CLS en una rejilla de 50.000 artistas.

   El tono llega por CLASE y no por style="". La CSP es `style-src 'self'
   'nonce-…'` y un nonce NO cubre los atributos style, solo los bloques <style>:
   el navegador descartaba el atributo, --h se quedaba sin valor y todos los
   avatares salian iguales. Fallo invisible desde el servidor. */
.av-h0{--h:15}.av-h1{--h:45}.av-h2{--h:75}.av-h3{--h:105}
.av-h4{--h:135}.av-h5{--h:165}.av-h6{--h:195}.av-h7{--h:225}
.av-h8{--h:255}.av-h9{--h:285}.av-h10{--h:315}.av-h11{--h:345}
.av{flex-shrink:0;border-radius:50%;object-fit:cover;background:var(--surface-alt)}
.av-gen{display:grid;place-items:center;font-weight:800;line-height:1;
        background:hsl(var(--h) 42% 90%);color:hsl(var(--h) 55% 28%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .av-gen{background:hsl(var(--h) 26% 24%);
    color:hsl(var(--h) 60% 78%)}
}
[data-theme="dark"] .av-gen{background:hsl(var(--h) 26% 24%);color:hsl(var(--h) 60% 78%)}
.av-48{width:48px;height:48px;font-size:1.2rem}
.av-56{width:56px;height:56px;font-size:1.4rem}
.av-96{width:96px;height:96px;font-size:2.4rem}
/* Sobre el degradado del hero, con sombra propia para que despegue */
.hero .av,.hero .cover{margin:0 auto var(--s-4);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.hero .av-gen{background:rgba(255,255,255,.16);color:#fff}
.cover{border-radius:var(--r-lg);object-fit:cover}

/* ------------------------------------------------------------------- CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block:var(--s-5);list-style:none}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
      min-width:2.75rem;height:2.75rem;padding-inline:var(--s-3);
      border-radius:var(--r-full);background:var(--surface-alt);
      border:1px solid var(--border);color:var(--text);font-weight:600;
      font-size:var(--fs-sm)}
.chip:hover{background:var(--brand-soft);border-color:var(--brand);
            color:var(--brand-dark);text-decoration:none}
.chip[aria-current],.chip.on{background:var(--brand);border-color:var(--brand);
                             color:var(--brand-contrast)}
.chip-n{font-size:var(--fs-xs);padding:.05rem .4rem;background:var(--border);
        border-radius:var(--r-full);color:var(--text-soft);
        font-variant-numeric:tabular-nums}
.chip[aria-current] .chip-n,.chip.on .chip-n{background:rgba(255,255,255,.22);color:#fff}
/* Chips de dato dentro de una ficha: más bajos, no son navegación */
.chips-meta .chip{height:2rem;min-width:0;font-weight:500;font-size:var(--fs-xs)}
/* Sobre el hero */
.hero .chips{justify-content:center;margin-block:var(--s-4) 0}
.hero .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.hero .chip:hover{background:rgba(255,255,255,.24);color:#fff}

/* Barra A-Z: scroll-snap horizontal en móvil. Es la navegación principal. */
.azbar{overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
       scroll-snap-type:x proximity;margin-bottom:var(--s-5)}
.azbar ul{display:flex;gap:var(--s-2);list-style:none;padding-bottom:var(--s-2)}
.azbar .chip{scroll-snap-align:center;text-transform:uppercase}
.hero .azbar{margin-bottom:0}
.hero .azbar .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.hero .azbar .chip.on{background:#fff;border-color:#fff;color:var(--brand-dark)}

/* ------------------------------------------------------------------ BOTONES */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
     padding:var(--s-2) var(--s-4);border:1px solid transparent;border-radius:var(--r);
     font-weight:600;font-size:var(--fs-sm);background:var(--brand);
     color:var(--brand-contrast);min-height:2.75rem;cursor:pointer}
.btn:hover{background:var(--brand-dark);color:var(--brand-contrast);text-decoration:none}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--brand-soft);border-color:var(--brand);
                 color:var(--brand-dark)}
.btn-block{display:flex;width:100%}
.more{margin-top:var(--s-4);font-size:var(--fs-sm);font-weight:600}

/* ------------------------------------------------------------------- LETRA */
.lyr-tools{display:flex;gap:var(--s-2);margin-bottom:var(--s-4);flex-wrap:wrap}
.lyr-tools button{padding:.4rem .8rem;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r-full);cursor:pointer;
  font-size:var(--fs-sm);color:var(--text-soft);min-height:2.25rem}
.lyr-tools button:hover{border-color:var(--brand);color:var(--brand-dark);
                        background:var(--brand-soft)}
.lyr-cr{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--border);
        font-size:var(--fs-sm);color:var(--text-soft)}
.lyr-note{font-size:var(--fs-sm);color:var(--text-soft);padding:var(--s-3) var(--s-4);
  background:var(--brand-soft);border-radius:var(--r);margin-bottom:var(--s-5)}
.tr-list{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-2);
         align-items:center;font-size:var(--fs-sm);color:var(--text-soft)}

/* Fachada de YouTube: aspect-ratio fijo → al sustituir por el iframe el CLS
   es 0. Un iframe directo son ~900 KB antes de que nadie pulse play. */
.yt{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r-lg);
    overflow:hidden;contain:content;box-shadow:var(--sh-sm)}
.yt-b{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
      background:none;cursor:pointer}
.yt-b img{width:100%;height:100%;object-fit:cover}
.yt-p{position:absolute;inset:0;margin:auto;width:64px;height:46px;opacity:.9;
      transition:opacity .15s,transform .15s}
.yt-b:hover .yt-p{opacity:1;transform:scale(1.08)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------------------------------------------------------------- BÚSQUEDA
   SIN hero: quien busca quiere resultados. Lo que hace falta es contexto. */
.search-bar{background:var(--surface-alt);border-bottom:1px solid var(--border);
            padding-block:var(--s-5);margin-bottom:var(--s-6)}
.search-bar .container{display:flex;flex-wrap:wrap;align-items:baseline;
                       gap:var(--s-3);justify-content:space-between}
.search-bar h1{font-size:var(--fs-h2)}
.search-bar .n{color:var(--text-soft);font-size:var(--fs-sm)}
.form-inline{display:flex;gap:var(--s-2);max-width:34rem;width:100%}
.form-inline input{flex:1;min-width:0;padding:.7rem 1rem;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface);color:var(--text)}
.form-inline input:focus{outline:0;border-color:var(--brand)}
mark{background:var(--brand-soft);color:var(--brand-dark);padding:0 .15em;border-radius:3px}

/* Buscador de la barra + sugerencias */
.nav-search{position:relative;flex:1;min-width:0;max-width:26rem;display:none}
@media (min-width:56em){.nav-search{display:block}}
.nav-search input{width:100%;padding:.5rem .9rem .5rem 2.4rem;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;
  font-size:var(--fs-sm)}
.nav-search input::placeholder{color:rgba(255,255,255,.6)}
.nav-search input:focus{outline:0;background:#fff;color:var(--text);border-color:#fff}
.nav-search input:focus::placeholder{color:var(--text-faint)}
.nav-search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);
                color:rgba(255,255,255,.7);pointer-events:none}
.nav-search input:focus+svg{color:var(--text-soft)}
.sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
     background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
     box-shadow:var(--sh-lg);overflow:hidden;max-height:70vh;overflow-y:auto}
.sug[hidden]{display:none}
.sug-g{padding:var(--s-2) var(--s-4);font-size:var(--fs-xs);text-transform:uppercase;
       letter-spacing:.06em;color:var(--text-soft);background:var(--surface-alt);
       font-weight:700}
.sug a{display:flex;align-items:baseline;gap:var(--s-2);padding:var(--s-3) var(--s-4);
       border-bottom:1px solid var(--border);color:var(--text)}
.sug a:last-child{border-bottom:0}
.sug a:hover,.sug a[aria-selected="true"]{background:var(--brand-soft);text-decoration:none}
.sug-n{font-weight:600}
.sug-a{font-size:var(--fs-sm);color:var(--text-soft)}
.hero-search .sug{text-align:left}

/* --------------------------------------------------------------- TABLA/TOP */
.data-table{width:100%;border-collapse:collapse;margin-block:var(--s-4)}
.data-table th,.data-table td{padding:var(--s-3);border-bottom:1px solid var(--border)}
.data-table thead th{background:var(--surface-alt);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.4px;color:var(--text-soft);text-align:left}
.data-table tbody tr:hover{background:var(--brand-soft)}
.data-table .num,.data-table td:last-child{text-align:right;
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- PAGINACIÓN */
.pag{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
     justify-content:center;margin-top:var(--s-6);list-style:none}
.pag a,.pag .on{display:grid;place-items:center;min-width:2.75rem;height:2.75rem;
  padding-inline:var(--s-3);border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-weight:600}
.pag a:hover{border-color:var(--brand);color:var(--brand-dark);
             background:var(--brand-soft);text-decoration:none}
.pag .on{background:var(--brand);border-color:var(--brand);color:var(--brand-contrast)}
.pag .e{color:var(--text-faint);padding-inline:var(--s-1)}

/* ------------------------------------------------------ VACÍOS · 404 · ADS */
.empty{padding:var(--s-7) var(--s-4);text-align:center;background:var(--surface);
       border:1px dashed var(--border);border-radius:var(--r-lg)}
.empty-t{font-weight:700;font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.empty-x{color:var(--text-soft);margin:0 auto;max-width:52ch}
.e404-n{font-size:clamp(3.5rem,14vw,7rem);font-weight:800;line-height:1;
        color:rgba(255,255,255,.22);margin-bottom:var(--s-2)}

/* Altura SIEMPRE reservada. Es la única forma de que un anuncio no destruya
   el CLS. Y nunca por encima del pliegue. */
/* AdSense exige display:block en el <ins>. Iba en un style="" y la CSP lo
   bloquea, asi que el bloque no se renderizaria: se descubriria el dia de
   encender los anuncios y sin ninguna pista de por que. */
.adsbygoogle{display:block}
.ad{display:block;margin:var(--s-6) auto;max-width:100%;overflow:hidden;
    background:var(--surface-alt);border-radius:var(--r)}
.ad-horizontal{min-height:280px}
.ad-vertical{min-height:600px}

/* ------------------------------------------------------------------- PIE */
.ftr{background:var(--nav-solid);color:rgba(255,255,255,.75);
     padding-block:var(--s-7) var(--s-5);margin-top:var(--s-7);font-size:var(--fs-sm)}
.ftr a{color:rgba(255,255,255,.75)}
.ftr a:hover{color:#fff}
.ftr-cols{display:grid;gap:var(--s-5);margin-bottom:var(--s-6)}
@media (min-width:44em){.ftr-cols{grid-template-columns:repeat(3,1fr)}}
.ftr-h{font-weight:700;color:#fff;margin-bottom:var(--s-3)}
.ftr ul{list-style:none}
.ftr li{margin-bottom:var(--s-2)}
.az-mini{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.az-mini li{margin:0}
.az-mini a{display:grid;place-items:center;width:2rem;height:2rem;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);font-weight:600;font-size:var(--fs-xs)}
.az-mini a:hover{background:rgba(255,255,255,.16);text-decoration:none}
.lang-list a[aria-current]{color:#fff;font-weight:700}
.ftr-legal{padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.14);
           display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between}

/* --------------------------------------------------------------- IMPRESIÓN */
@media print{
  .nav,.ftr,.ad,.aside,.lyr-tools,.bc,.tr-list,.skip,.hero-search{display:none!important}
  .hero{background:none!important;color:#000;padding:0;margin-bottom:1rem}
  .hero h1,.hero-sub{color:#000}
  body{background:#fff;color:#000}
  .lyr{max-width:none;font-size:12pt}
}

/* Votos: pulgar arriba / abajo. Ver c_votos() en componentes.php. */
.votos{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4)}
.voto{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r-full);
  cursor:pointer;color:var(--text-soft);font-size:var(--fs-sm);min-height:2.25rem}
.voto:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-soft)}
.voto .n{font-variant-numeric:tabular-nums;font-weight:600}
.voto.on{background:var(--brand);border-color:var(--brand);color:var(--brand-contrast)}
.voto-msg{font-size:var(--fs-xs);color:var(--text-soft)}
.votos[aria-busy="true"]{opacity:.55}