/*
 * Hot 100 AR · las vistas del chart (plugin billboard-hot100), sobre el shell del tema.
 * Colores con los tokens del shell (--bg, --ink, --surf, --surf2, --line, --muted, --accent, --accent-text, --accent-ink,
 * --pink, --purple): la página sirve en claro y en oscuro. Celular primero en lo que importa: sin scroll al costado de 320
 * a 1920 px; en 390 el costado va debajo y la grilla de meses queda en dos columnas. La historia de un artista (maqueta 3.3)
 * va con sus esquinas redondeadas y sus pastillas; en 390, las tarjetas en dos columnas y la story debajo de la lista. Más
 * charts (maqueta 3.5) va en 1440 con el Radar a la izquierda, el Chart Beat y los #2 a la derecha y el verano abajo a todo
 * el ancho; en 390, todo en una columna.
 */

.bbch{
  --bbch-edge:color-mix(in srgb,var(--ink) 18%,transparent);
  --bbch-edge2:color-mix(in srgb,var(--ink) 24%,transparent);
  --bbch-chip:color-mix(in srgb,var(--ink) 40%,transparent);
  --bbch-soft:color-mix(in srgb,var(--ink) 80%,var(--bg));
  --bbch-label:color-mix(in srgb,var(--ink) 90%,var(--bg));
  --bbch-rule:color-mix(in srgb,var(--ink) 14%,var(--bg));
  /* El rosa como color de TEXTO: el de la marca sobre oscuro; sobre claro (3:1) se oscurece con la tinta hasta pasar 4.5:1. */
  --bbch-pink:var(--pink);
  display:block;background:var(--bg);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;
}
:root[data-theme="light"] .bbch{--bbch-pink:color-mix(in srgb,var(--pink) 72%,var(--ink))}
.bbch *,.bbch *::before,.bbch *::after{box-sizing:border-box}

/* Lo de adentro del plugin queda afuera del color con !important del shell (genz-shell.php): cada texto toma el color de su
   regla, o el de su caja si no tiene, y nunca el que el tema padre (glossier-frontend.min.css) les pone a los títulos y los
   párrafos. Va primero y pesa 0,1,0: cualquier regla de abajo le gana. */
.bbch :where(h1,h2,h3,h4,h5,h6,p,span,li,label,strong,b,small,time,dt,dd,sup,em),
.bbch-beatbox :where(h1,h2,h3,h4,h5,h6,p,span,li,label,strong,b,small,time,dt,dd,sup,em){color:inherit}
/* Más del tema padre que le cae a todo el sitio (lo mismo que deshacen billboard-video y billboard-insight): svg{fill:currentColor}
   llenaba los íconos de trazo (fill="none"), li{margin-top:6px} abría huecos en todas las listas y label{…} ponía Poppins y
   un margen abajo. Los campos y los botones del tema, más abajo, en cada uno (sus reglas pesan más). */
.bbch svg[fill="none"],.bbch-beatbox svg[fill="none"]{fill:none}
.bbch :where(li),.bbch-beatbox :where(li){margin:0}
.bbch :where(label){margin:0;font-family:inherit}
/* El body del tema corta las palabras donde haga falta (word-break:break-word): un número grande no se corta nunca («0» y «1»). */
.bbch :where(.bbch-top__pos,.bbch-hist__n,.bbch-stat__v,.bbch-ones__y,.bbch-first__date,.bbch-arch__year-n,.bbch-song__rank,.bbch-story__n,
  .bbch-bday__one,.bbch-bday__pos,.bbch-radar__rank,.bbch-twos__n,.bbch-sum__pos,.bbch-sum__n,.bbch-list__n){white-space:nowrap}
.bbch-wrap{max-width:1280px;margin:0 auto;padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}
.bbch-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bbch-sr--focus:focus{position:static;width:auto;height:40px;margin:4px 0 0;padding:0 14px;overflow:visible;clip:auto;white-space:normal;align-self:flex-start;border:2px solid var(--ink);background:transparent;color:var(--ink);font:700 13px/1 'Space Grotesk',system-ui,sans-serif;cursor:pointer}
.bbch a,.bbch button{transition:border-color .15s,background-color .15s,color .15s}
.bbch a:focus-visible,.bbch button:focus-visible,.bbch input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.bbch-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.bbch-kicker--pink{color:var(--bbch-pink)}
.bbch-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-crumb a{color:var(--muted);text-decoration:none}
.bbch-crumb a:hover{color:var(--ink)}
.bbch-crumb [aria-current]{color:var(--ink)}

.bbch-chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border:1px solid var(--bbch-chip);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em}
.bbch-chip--on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.bbch-move{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700}
.bbch-move--up{color:var(--accent-text)}
.bbch-move--down{color:var(--bbch-pink)}
.bbch-move--same{color:var(--muted)}
.bbch-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.bbch-badge--new{background:var(--purple);color:#fff}
.bbch-badge--back{border:1px solid var(--ink);color:var(--ink)}

.bbch-cover{display:block;flex:0 0 auto;object-fit:cover;background:var(--surf2)}
.bbch-cover--none{background:linear-gradient(135deg,var(--purple),var(--pink))}

.bbch-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border:2px solid var(--accent);font-weight:700;font-size:16px;text-decoration:none}
.bbch-btn--accent{background:var(--accent);color:var(--accent-ink)}
.bbch-btn--accent:hover{background:transparent;color:var(--ink)}
.bbch-btn--ghost{align-self:flex-start;min-height:42px;padding:0 18px;border-color:var(--ink);color:var(--ink);font-size:14px}
.bbch-btn--ghost:hover{background:var(--ink);color:var(--bg)}

.bbch-box{background:var(--surf);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.bbch-box__head{display:flex;flex-direction:column;gap:6px}
.bbch-box__h{margin:0;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:32px;line-height:1;letter-spacing:.01em;color:var(--ink)}
.bbch-label{font-size:14px;font-weight:600;color:var(--bbch-label)}
.bbch-hint{font-size:13px;color:var(--muted)}
/* Los campos con tres clases (0,3,0): el tema padre pinta input[type="search"]:not(…) (0,2,1), date y number (0,1,1) blancos,
   redondos, de 55 px y en Poppins, y carga después de esta hoja. */
.bbz .bbch .bbch-input{flex:1 1 auto;min-width:0;width:100%;height:46px;margin:0;padding:0 12px;border:2px solid var(--bbch-edge2);border-radius:0;box-shadow:none;background:var(--bg);color:var(--ink);font-family:inherit;font-size:15px;font-weight:400;line-height:normal}
.bbz .bbch .bbch-input--date{font-family:'JetBrains Mono',monospace;font-size:14px}
:root[data-theme="dark"] .bbch-input--date{color-scheme:dark}
:root[data-theme="light"] .bbch-input--date{color-scheme:light}
.bbz .bbch .bbch-input[aria-invalid="true"]{border-color:var(--pink)}

/* ---- Archivo (maqueta 3.2) ---- */

.bbch-arch__hero{border-bottom:1px solid var(--line)}
.bbch-arch__hero-in{padding-top:48px;padding-bottom:40px;display:flex;flex-direction:column;gap:18px}
.bbch-arch__title{margin:0;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(44px,8vw,120px);line-height:.9;letter-spacing:.01em;color:var(--ink)}
.bbch-arch__title span{display:block}
.bbch-arch__since{color:var(--accent-text)}
.bbch-arch__lede{margin:0;max-width:620px;font-size:19px;line-height:1.45;color:var(--bbch-soft)}
.bbch-arch__chips{display:flex;flex-wrap:wrap;gap:8px}

.bbch-arch__body{padding-top:44px;padding-bottom:72px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px}
.bbch-arch__empty{margin:0;font-size:17px;color:var(--bbch-soft)}
.bbch-arch__main{flex:1 1 620px;min-width:0;display:flex;flex-direction:column;gap:56px}
.bbch-arch__aside{flex:1 1 300px;min-width:0;max-width:380px;display:flex;flex-direction:column;gap:24px}
.bbch-arch__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
.bbch-arch__head-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.bbch-arch__h2{margin:0;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(40px,5vw,52px);line-height:.95;letter-spacing:.01em;color:var(--ink)}
.bbch-arch__meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* 01 · las semanas */
.bbch-arch__weeks{display:flex;flex-direction:column;gap:20px}
.bbch-arch__years{display:flex;flex-wrap:wrap;gap:6px}
.bbch-arch__year{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 12px;border:2px solid var(--bbch-edge);background:transparent;color:var(--ink);text-decoration:none}
.bbch-arch__year:hover{border-color:var(--ink)}
.bbch-arch__year-n{font-family:'Archivo',sans-serif;font-weight:900;font-size:22px;line-height:1;letter-spacing:-.02em}
.bbch-arch__year-c{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.bbch-arch__year.is-now .bbch-arch__year-c{color:var(--accent-text)}
.bbch-arch__year[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg);box-shadow:4px 4px 0 var(--accent)}
.bbch-arch__year[aria-selected="true"] .bbch-arch__year-c{color:var(--bg);font-weight:700}
.bbch-arch__legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bbch-arch__legend span{display:inline-flex;align-items:center;gap:8px}
.bbch-arch__key{display:inline-block;width:16px;height:14px;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.bbch-arch__key--on{background:var(--accent);border-color:var(--accent)}
.bbch-arch__dot{display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--pink)}
.bbch-arch__panel + .bbch-arch__panel{margin-top:28px}
.bbch-arch__panel[hidden]{display:none}
.bbch-arch__panel-year{margin:0 0 12px;font-family:'Archivo',sans-serif;font-weight:900;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
/* Con JS (la sección se marca apenas se dibuja): solo el año elegido, sin su título repetido. */
.bbch-arch__weeks.is-js .bbch-arch__panel:not(.is-on){display:none}
.bbch-arch__weeks.is-js .bbch-arch__panel-year{display:none}
.bbch-arch__weeks.is-js .bbch-arch__panel + .bbch-arch__panel{margin-top:0}
.bbch-arch__months{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.bbch-arch__month{background:var(--surf);border:1px solid var(--line);padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.bbch-arch__month.is-on{border-color:var(--accent)}
.bbch-arch__month-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bbch-arch__month-n{font-family:'Bebas Neue',sans-serif;font-size:24px;line-height:1;color:var(--ink)}
.bbch-arch__month.is-on .bbch-arch__month-n{color:var(--accent-text)}
.bbch-arch__month-c{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.bbch-arch__days{display:flex;flex-wrap:wrap;gap:6px}
.bbch-arch__day{position:relative;display:inline-grid;place-items:center;width:34px;height:32px;border:1px solid var(--bbch-edge);background:var(--bg);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px;text-decoration:none}
.bbch-arch__day:hover{border-color:var(--ink)}
.bbch-arch__day.is-on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.bbch-arch__day .bbch-arch__dot{position:absolute;right:3px;top:3px;width:5px;height:5px}

/* 02 · el top 10 */
.bbch-arch__top{display:flex;flex-direction:column;gap:24px}
.bbch-arch__arrows{display:flex;gap:8px;flex-wrap:wrap}
.bbch-arch__arrow{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:2px solid var(--bbch-edge2);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.12em;text-decoration:none}
.bbch-arch__arrow:hover{border-color:var(--ink)}
.bbch-top{list-style:none;margin:0;padding:0;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--purple)}
.bbch-top__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:14px 18px;border-bottom:2px solid var(--bbch-rule)}
.bbch-top__row:last-child{border-bottom:0}
.bbch-top__row.is-one{padding:16px 18px;background:var(--accent);color:var(--accent-ink);border-bottom-color:var(--ink)}
.bbch-top__row.is-one:last-child{border-bottom:0}
.bbch-top__pos{flex:0 0 64px;font-family:'Archivo',sans-serif;font-weight:900;font-size:44px;line-height:.85;letter-spacing:-.05em}
.bbch-top__row.is-one .bbch-top__pos{font-size:52px}
.bbch-top__move{flex:0 0 auto;min-width:64px;display:inline-flex;align-items:center}
.bbch-top__row.is-one .bbch-move{color:var(--accent-ink)}
.bbch-top__row.is-one .bbch-badge--back{border-color:var(--accent-ink);color:var(--accent-ink)}
.bbch-top__song{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:3px}
.bbch-top__song a{color:inherit;text-decoration:none;font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:anywhere}
.bbch-top__song a:hover{text-decoration:underline}
.bbch-top__row.is-one .bbch-top__song a{font-size:22px}
.bbch-top__artists{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.bbch-top__row.is-one .bbch-top__artists{color:var(--accent-ink);font-weight:600}
.bbch-top__stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bbch-top__at1{display:inline-flex;align-items:center;height:24px;padding:0 10px;background:var(--accent-ink);color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.bbch-stat{display:flex;flex-direction:column;gap:3px;min-width:38px}
.bbch-stat__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bbch-top__row.is-one .bbch-stat__k{color:var(--accent-ink)}
.bbch-stat__v{font-family:'Archivo',sans-serif;font-weight:900;font-size:18px;line-height:1}
.bbch-stat__v.is-none{color:var(--muted)}
.bbch-top__row.is-one .bbch-stat__v.is-none{color:var(--accent-ink)}
.bbch-arch__note{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.bbch-arch__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-top:8px}

/* El costado: buscar, ir a una fecha, el #1 de cada año y el primer chart */
.bbch-arch__search,.bbch-arch__date{display:flex;flex-direction:column;gap:8px;margin:0}
.bbch-arch__date{border-top:1px solid var(--line);padding-top:14px}
.bbch-arch__search-row{display:flex;gap:8px}
/* Con .bbch adelante (0,2,0): el tema padre le pone a [type=submit] y a button ancho, padding y esquinas de 30 px. */
.bbch .bbch-arch__search-btn{flex:0 0 46px;width:46px;height:46px;margin:0;border:0;border-radius:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;padding:0}
.bbch-arch__search-btn svg{width:18px;height:18px}
.bbch-arch__none{margin:0;font-size:14px;color:var(--bbch-soft)}
.bbch-arch__results{display:flex;flex-direction:column;gap:8px}
.bbch-arch__results-h{margin:0;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-arch__results-l{list-style:none;margin:0 0 6px;padding:0;border-top:1px solid var(--line)}
.bbch-arch__results-l li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.bbch-arch__results-l a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.bbch-arch__results-l a:hover{text-decoration:underline}
.bbch-arch__results-l span{font-size:13px;color:var(--muted)}
.bbch-arch__error{margin:0;font-size:13px;font-weight:600;color:var(--bbch-pink)}

.bbch-ones{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bbch-ones__row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.bbch-ones__row:last-child{border-bottom:0}
.bbch-ones__row.is-on{margin:0 -8px;padding:10px 8px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.bbch-ones__y{font-family:'Archivo',sans-serif;font-weight:900;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.bbch-ones__row.is-on .bbch-ones__y{color:var(--accent-text)}
.bbch-ones__song{display:flex;flex-direction:column;gap:2px;min-width:0}
.bbch-ones__song a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.bbch-ones__song a:hover{text-decoration:underline}
.bbch-ones__who{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.bbch-ones__n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
.bbch-ones__n b{font-family:'Archivo',sans-serif;font-weight:900;font-size:17px;color:var(--ink)}

.bbch-box--first{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--pink);gap:12px}
.bbch-first__date{font-family:'Archivo',sans-serif;font-weight:900;font-size:46px;line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.bbch-first__one{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:12px}
.bbch-first__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-first__song{font-size:17px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.bbch-first__text{font-size:14px;color:var(--muted)}

/* ---- Historia de un artista (maqueta 3.3): la pestaña del perfil y la página del chart del artista ---- */

.bbch-art__hero-in{padding-top:36px;display:flex;flex-direction:column}
.bbch-art__kicker{margin:22px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.bbch-art__name{margin:10px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(64px,12vw,150px);line-height:.88;letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere}
.bbch-art__now{margin:22px 0 0;font-size:14px;color:var(--muted)}
.bbch-art__body{padding-bottom:72px}

.bbch-hist{background:transparent}
.bbch-hist__top{padding-top:40px}
.bbch-hist__h{margin:0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(44px,6vw,60px);line-height:.95;letter-spacing:.01em;color:var(--ink)}
.bbch-hist__accent{color:var(--accent-text)}
.bbch-hist__note,.bbch-hist__empty{margin:14px 0 0;max-width:640px;font-size:15px;line-height:1.45;color:var(--muted)}
.bbch-hist--empty{padding-top:40px}
.bbch-hist__empty{font-size:17px;color:var(--bbch-soft)}

.bbch-hist__cards{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.bbch-hist__card{min-width:0;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:22px}
/* Cada tarjeta ocupa tres filas de la grilla (rótulo, número y texto) y las comparte con las de su fila: si un rótulo va en dos
   renglones («Primera entrada registrada»), bajan los números de todas y quedan a la misma altura. Sin subgrid, como antes. */
@supports (grid-template-rows:subgrid){
  .bbch-hist__card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}
.bbch-hist__card.is-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bbch-hist__k{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-hist__card.is-accent .bbch-hist__k{font-weight:700;color:var(--accent-ink)}
.bbch-hist__n{margin:14px 0 0;font-family:'Archivo',sans-serif;font-weight:900;font-size:80px;line-height:.85;letter-spacing:-.05em;color:var(--ink)}
/* El año de la primera entrada: «2026» en Archivo 900 a 80 px mide 197 px y la tarjeta más angosta (cinco de 200 px) deja 154. */
.bbch-hist__n--year{font-size:60px}
.bbch-hist__card.is-accent .bbch-hist__n{color:var(--accent-ink)}
.bbch-hist__d{margin:12px 0 0;font-size:14px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.bbch-hist__card.is-accent .bbch-hist__d{font-weight:600;color:var(--accent-ink)}

.bbch-hist__years{margin-top:12px;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:24px}
.bbch-hist__years-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.bbch-hist__years-h p{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-hist__bars{margin-top:18px;display:flex;align-items:flex-end;gap:10px;height:170px}
.bbch-hist__bar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.bbch-hist__bar-n{text-align:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;color:var(--ink)}
.bbch-hist__bar-v{display:block;background:var(--accent)}
.bbch-hist__bar-y{text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--muted)}

.bbch-hist__row{margin-top:40px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}

/* Sus canciones */
.bbch-songs{flex:1 1 620px;min-width:0;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:24px}
.bbch-songs__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.bbch-songs__head-l{min-width:0}
.bbch-songs__h{margin:0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:40px;line-height:.95;letter-spacing:.01em;color:var(--ink)}
.bbch-songs__count{margin:6px 0 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-songs__count-part{display:none}
.bbch-sort{display:flex;background:var(--bg);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:999px;padding:4px}
.bbch-sort__b{border:0;border-radius:999px;background:transparent;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em;min-height:32px;padding:8px 14px;cursor:pointer}
.bbch-sort__b[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.bbch-songs__list{margin:20px 0 0;padding:0;list-style:none}
.bbch-song{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 0;border-top:1px solid var(--line)}
.bbch-song:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bbch-song__l{display:flex;align-items:center;gap:14px;flex:1 1 300px;min-width:0}
.bbch-song__rank{flex:0 0 32px;font-family:'Archivo',sans-serif;font-weight:900;font-size:26px;color:var(--muted)}
.bbch-song__l .bbch-cover{flex:0 0 44px;width:44px;height:44px;border-radius:6px}
.bbch-song__t{min-width:0}
.bbch-song__title{margin:0;font-weight:700;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.bbch-song__now{display:inline-block;margin-left:6px;vertical-align:2px;background:var(--pink);color:var(--accent-ink);font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;padding:3px 6px;white-space:nowrap}
.bbch-song__with{margin:2px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.bbch-song__r{display:flex;align-items:center;gap:14px;flex:1 1 300px;min-width:0}
.bbch-peak{flex:0 0 46px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 0}
.bbch-peak--one{background:var(--accent);color:var(--accent-ink)}
.bbch-peak--top{background:var(--ink);color:var(--bg)}
.bbch-peak--rest{border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);color:var(--ink);padding:3px 0}
.bbch-song__weeks{flex:0 0 64px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.bbch-song__track{flex:1 1 auto;display:block;height:10px;background:color-mix(in srgb,var(--ink) 9%,var(--surf))}
.bbch-song__fill{display:block;height:10px;background:var(--accent)}
.bbch-songs__foot{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.bbch-songs__more{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:transparent;color:var(--ink);border:1px solid var(--bbch-edge2);border-radius:999px;padding:12px 22px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;cursor:pointer}
.bbch-songs__more:hover{border-color:var(--ink)}
.bbch-songs__open{font-size:14px;font-weight:600;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.bbch-songs__open:hover{color:var(--ink)}
/* Sin JS: todas las canciones a la vista, su contador, y ni «Ordenar por» ni «Ver las N canciones» (no harían nada). */
.bbch-songs:not(.is-js) .bbch-sort,.bbch-songs:not(.is-js) .bbch-songs__more,.bbch-songs.is-all .bbch-songs__more{display:none}
/* Con JS (la sección se marca apenas se dibuja): las ocho primeras y «8 de N» hasta «Ver las N canciones». */
.bbch-songs.is-js:not(.is-all) .bbch-songs__list>li:nth-child(n+9){display:none}
.bbch-songs.is-js:not(.is-all) .bbch-songs__count-part{display:inline}
.bbch-songs.is-js:not(.is-all) .bbch-songs__count-all{display:none}

/* Tarjeta para stories */
.bbch-story{flex:0 1 360px;min-width:0}
.bbch-story__k{margin:0 0 12px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
/* 9:16 como la story; un nombre largo la estira en vez de cortar el pie. */
.bbch-story__card{width:100%;max-width:340px;aspect-ratio:9/16;background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px}
.bbch-story__card p{margin:0}
.bbch-story__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bbch-story__logo{font-family:'Archivo',sans-serif;font-weight:900;font-size:22px;letter-spacing:-.04em}
.bbch-story__logo sup{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.12em;margin-left:2px}
.bbch-story__pill{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.16em;border:1.5px solid var(--accent-ink);padding:3px 6px;white-space:nowrap}
.bbch-story__title{font-family:'Bebas Neue',Impact,sans-serif;font-size:54px;line-height:.88;letter-spacing:.01em}
.bbch-story__img{flex:1 1 auto;min-height:150px;background:#0a0a0c;border-radius:8px;overflow:hidden}
.bbch-story__img img{display:block;width:100%;height:100%;object-fit:cover}
.bbch-story__name{font-family:'Bebas Neue',Impact,sans-serif;font-size:46px;line-height:.9;letter-spacing:.01em;overflow-wrap:anywhere}
.bbch-story__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:2px solid var(--accent-ink);padding-top:12px}
.bbch-story__n{font-family:'Archivo',sans-serif;font-weight:900;font-size:34px;line-height:.9;letter-spacing:-.04em}
.bbch-story__card .bbch-story__l{margin:4px 0 0;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.14em}
.bbch-story__foot{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bbch-story__btns{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;max-width:340px}
.bbch-story__btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:999px;padding:12px 18px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;cursor:pointer}
.bbch-story__btn[hidden]{display:none}
.bbch-story__btn--dl{background:var(--ink);color:var(--bg);border:0}
.bbch-story__btn--dl[aria-busy="true"]{opacity:.7;cursor:progress}
.bbch-story__btn--copy{background:transparent;color:var(--ink);border:1px solid var(--bbch-edge2);padding:11px 18px}
.bbch-story__btn--copy:hover{border-color:var(--ink)}
.bbch-story__size{margin:12px 0 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Tablet: el costado baja y ocupa todo el ancho. */
@media (max-width:1023px){
  .bbch-arch__aside{flex-basis:100%;max-width:none}
}
/* Celular: menos aire, la grilla de meses en dos columnas y las filas del top 10 más compactas. */
@media (max-width:640px){
  .bbch-arch__hero-in{padding-top:28px;padding-bottom:28px;gap:14px}
  .bbch-arch__lede{font-size:17px}
  .bbch-arch__body{padding-top:28px;padding-bottom:48px;gap:32px}
  .bbch-arch__main{gap:40px}
  .bbch-arch__months{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bbch-arch__month{padding:10px 10px 12px}
  .bbch-top{box-shadow:5px 5px 0 var(--purple)}
  .bbch-top__row,.bbch-top__row.is-one{gap:8px 14px;padding:12px 14px}
  .bbch-top__pos{flex-basis:48px;font-size:36px}
  .bbch-top__row.is-one .bbch-top__pos{font-size:44px}
  .bbch-top__song a{font-size:18px}
  .bbch-top__row.is-one .bbch-top__song a{font-size:20px}
  .bbch-btn{min-height:48px;padding:0 18px;font-size:15px}
  .bbch-box{padding:18px}
  .bbch-first__date{font-size:38px}
  /* Historia de un artista: las tarjetas en dos columnas y la story debajo de la lista. */
  .bbch-art__hero-in{padding-top:24px}
  .bbch-art__body{padding-bottom:48px}
  .bbch-hist__top,.bbch-hist--empty{padding-top:28px}
  .bbch-hist__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bbch-hist__card{padding:16px}
  .bbch-hist__n{font-size:52px}
  .bbch-hist__d{font-size:13px}
  .bbch-hist__years{padding:18px}
  .bbch-hist__bars{gap:6px;height:150px}
  .bbch-hist__bar-y{font-size:9px;letter-spacing:0}
  .bbch-hist__row{margin-top:28px}
  .bbch-songs{flex-basis:100%;padding:18px 16px}
  .bbch-songs__h{font-size:34px}
  .bbch-song{gap:10px 14px}
  .bbch-song__l{gap:10px}
  .bbch-song__rank{flex-basis:26px;font-size:22px}
  .bbch-story{flex-basis:100%}
}
/* 320 a 400: con nueve años, el año entra debajo de su barra. */
@media (max-width:400px){
  .bbch-hist__bar-y{font-size:8px}
}
/* ---- ¿Qué era #1 el día que naciste? (maqueta 3.4): centrado a 560 px en PC, a todo el ancho en el celular ---- */

.bbch-bday__in{max-width:560px;margin:0 auto;padding:24px 16px 72px}
.bbch-bday__kicker{margin:0;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.bbch-bday__title{margin:10px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(46px,14vw,70px);line-height:.92;letter-spacing:.01em;color:var(--ink)}
.bbch-bday__acc{color:var(--accent-text)}
.bbch-bday__lede{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.bbch-bday__form{margin-top:20px;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:16px}
.bbch-bday__form-h{margin:0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-bday__fields{display:grid;grid-template-columns:1fr 1.5fr 1.15fr;gap:8px;margin-top:12px}
.bbch-bday__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.bbch-bday__field label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
/* Día, Mes y Año con tres clases (0,3,0), como los campos del archivo: el tema padre los hacía blancos, de 55 px, en Poppins y
   sin la flecha de los <select> (appearance:none). */
.bbz .bbch .bbch-bday__ctl{width:100%;height:48px;margin:0;border-radius:10px;border:1px solid var(--bbch-edge2);box-shadow:none;background:var(--bg);color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;line-height:normal;padding:0 8px}
.bbz .bbch select.bbch-bday__ctl{-webkit-appearance:auto;appearance:auto}
.bbz .bbch .bbch-bday__ctl--n{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;padding:0 10px}
:root[data-theme="dark"] .bbch-bday__ctl{color-scheme:dark}
:root[data-theme="light"] .bbch-bday__ctl{color-scheme:light}
.bbch-bday__ctl:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bbch-bday__note{margin:12px 0 0;display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--muted)}
.bbch-bday__note svg{flex:0 0 16px;margin-top:1px;color:var(--accent-text)}
/* Los botones con .bbch adelante (0,2,0): [type=submit] y button del tema padre les ponían width:auto y su padding. */
.bbch .bbch-bday__go{display:block;margin:14px 0 0;width:100%;height:52px;padding:0 16px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;cursor:pointer}
.bbch-bday__go:hover{filter:brightness(1.08)}
.bbch-bday__msg{margin:20px 0 0;padding:16px;border:1px solid var(--line);border-left:4px solid var(--pink);border-radius:10px;background:var(--surf);font-size:15px;line-height:1.4;color:var(--ink)}
.bbch-bday__res{margin-top:20px;border:2px solid var(--accent);border-radius:14px;overflow:hidden;background:var(--surf)}
.bbch-bday__res-bar{background:var(--accent);color:var(--accent-ink);padding:8px 14px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bbch-bday__res-in{padding:18px}
.bbch-bday__res-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.bbch-bday__one{margin:0;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(88px,32vw,128px);line-height:.78;letter-spacing:-.06em;color:var(--accent-text)}
.bbch-bday__cover{flex:0 0 112px;width:112px;height:112px}
.bbch-bday__cover .bbch-cover{width:112px;height:112px;border-radius:8px}
.bbch-bday__song{margin:18px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(34px,11vw,48px);line-height:.92;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}
.bbch-bday__who{margin:4px 0 0;font-size:16px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.bbch-bday__weeks{margin:10px 0 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bbch-bday__btns{margin-top:18px;display:flex;gap:8px}
.bbch .bbch-bday__btn{flex:1 1 0;min-width:0;width:auto;height:48px;margin:0;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--bbch-edge2);border-radius:999px;background:transparent;color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer}
.bbch-bday__btn svg{color:var(--accent-text)}
.bbch .bbch-bday__btn:hover{border-color:var(--ink)}
/* El borde transparente (y no 0) deja las dos mitades iguales: flex-basis 0 cuenta el borde de cada una. */
.bbch .bbch-bday__btn--fill{background:var(--accent);color:var(--accent-ink)}
.bbch .bbch-bday__btn--fill,.bbch .bbch-bday__btn--fill:hover{border-color:transparent}
.bbch-bday__btn--fill svg{color:currentColor}
.bbch .bbch-bday__btn[hidden]{display:none}
.bbch-bday__also{margin-top:28px}
.bbch-bday__also-h{margin:0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(28px,9vw,34px);line-height:.95;letter-spacing:.01em;color:var(--ink)}
.bbch-bday__also-k{margin:6px 0 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-bday__list{margin:14px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.bbch-bday__row{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.bbch-bday__pos{flex:0 0 44px;font-family:'Archivo',sans-serif;font-weight:900;font-size:34px;line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.bbch-bday__row .bbch-cover{flex:0 0 44px;width:44px;height:44px;border-radius:6px}
.bbch-bday__txt{min-width:0}
.bbch-bday__rt{margin:0;font-size:15px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.bbch-bday__ra{margin:2px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.bbch-bday__all{margin-top:16px;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border:1px solid var(--bbch-edge2);border-radius:999px;color:var(--ink);text-align:center;text-decoration:none;font-size:15px;font-weight:700}
.bbch-bday__all:hover{border-color:var(--ink)}
.bbch-bday__foot{margin:22px 0 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* 320 a 400: los tres campos siguen en una fila; el año no se corta. */
@media (max-width:400px){
  .bbch-bday__fields{grid-template-columns:1fr 1.4fr 1.2fr;gap:6px}
  .bbz .bbch .bbch-bday__ctl{padding:0 6px;font-size:15px}
  .bbz .bbch .bbch-bday__ctl--n{font-size:16px}
}

/* ---- Más charts (maqueta 3.5): Radar AR a la izquierda, Chart Beat y los #2 a la derecha, el verano abajo ---- */

.bbch-mas__in{padding-top:28px;padding-bottom:72px}
.bbch-mas__title{margin:18px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(56px,9vw,108px);line-height:.9;letter-spacing:.01em;color:var(--ink)}
.bbch-mas__acc{color:var(--accent-text)}
.bbch-mas__lede{margin:14px 0 0;max-width:640px;font-size:17px;line-height:1.5;color:var(--muted)}
.bbch-mas__empty{margin:36px 0 0;font-size:17px;color:var(--bbch-soft)}
.bbch-mas__preview{margin:28px 0 0;padding:14px 16px;border:1px dashed var(--bbch-chip);border-left:4px solid var(--pink);border-radius:10px;background:var(--surf);font-size:15px;line-height:1.45;color:var(--ink)}
.bbch-mas__grid{margin-top:36px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.bbch-mas__preview + .bbch-mas__grid{margin-top:16px}
.bbch-mas__side{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:24px}
.bbch-mas__grid.is-solo .bbch-mas__side{flex-direction:row;flex-wrap:wrap}
.bbch-mas__grid.is-solo .bbch-mas__card{flex:1 1 340px}
.bbch-mas__card{min-width:0;background:var(--surf);border:1px solid var(--line);border-radius:14px}
.bbch-mas__more{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--accent-text);text-decoration:none}
.bbch-mas__more:hover{text-decoration:underline}

/* Radar AR */
.bbch-radar{flex:2 1 640px;padding:28px}
.bbch-radar__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px}
.bbch-radar__k{margin:0;display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.bbch-radar__h{margin:8px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(52px,6vw,76px);line-height:.9;letter-spacing:.01em;color:var(--ink)}
.bbch-radar__sub{margin:8px 0 0;font-size:15px;color:var(--muted)}
.bbch-radar__week{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-radar__rule{margin-top:20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;border:1px solid var(--accent);border-radius:10px;padding:16px 18px;background:var(--bg)}
.bbch-radar__rule p{margin:0;flex:1 1 360px;min-width:0;font-size:15px;line-height:1.45;color:var(--ink)}
.bbch-radar__pill{flex:0 0 auto;background:var(--accent);color:var(--accent-ink);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;padding:5px 9px;white-space:nowrap}
.bbch-radar__pill--sm{font-size:9px;letter-spacing:.14em;padding:4px 7px}
.bbch-radar__grads{margin-top:14px}
.bbch-radar__grads-h{margin:0 0 10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-radar__grads-l{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.bbch-radar__grad{list-style:none;display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0}
.bbch-radar__grad .bbch-radar__t{flex:1 1 auto}
.bbch-radar .bbch-cover{width:44px;height:44px;border-radius:6px}
.bbch-radar__t{min-width:0}
.bbch-radar__song{margin:0;font-weight:700;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.bbch-radar__grad .bbch-radar__song{font-size:15px}
.bbch-radar__who{margin:2px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.bbch-radar__badge{display:inline-block;margin-left:6px;vertical-align:2px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;padding:3px 6px;white-space:nowrap}
.bbch-radar__badge--close{background:var(--pink);color:var(--accent-ink)}
.bbch-radar__badge--jump{background:var(--ink);color:var(--bg)}
.bbch-radar__cols{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:0 0 10px;border-bottom:1px solid var(--bbch-edge);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bbch-radar__list{margin:0;padding:0;list-style:none}
.bbch-radar__row{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 0;border-bottom:1px solid var(--line)}
.bbch-radar__row:last-child{border-bottom:0}
.bbch-radar__l{display:flex;align-items:center;gap:14px;flex:1 1 300px;min-width:0}
.bbch-radar__r{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
.bbch-radar__rank{flex:0 0 56px}
.bbch-radar__gap{flex:0 0 44px}
.bbch-radar__row .bbch-radar__rank{font-family:'Archivo',sans-serif;font-weight:900;font-size:42px;line-height:.85;letter-spacing:-.05em;color:var(--ink)}
.bbch-radar__row .bbch-radar__rank.is-one{color:var(--accent-text)}
.bbch-radar__pos,.bbch-radar__up{width:76px;text-align:center}
.bbch-radar__wk{width:90px;text-align:center}
.bbch-radar__row .bbch-radar__pos,.bbch-radar__row .bbch-radar__wk{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;color:var(--ink)}
.bbch-radar__jump{display:inline-block;background:var(--accent);color:var(--accent-ink);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;padding:4px 7px;white-space:nowrap}
.bbch-radar__foot{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.bbch-radar__play{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 22px;font-size:14px;font-weight:700;text-decoration:none}
.bbch-radar__play:hover{filter:brightness(1.08)}
.bbch-radar__note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Chart Beat */
.bbch-beat{overflow:hidden}
.bbch-beat__bar{background:var(--purple);color:#fff;padding:10px 18px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.bbch-beat__in{padding:20px}
.bbch-beat__img{display:block;width:100%;height:170px;object-fit:cover;border-radius:10px;background:var(--surf2)}
.bbch-beat__h{margin:16px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:42px;line-height:.95;letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere}
.bbch-beat__img + .bbch-beat__h{margin-top:16px}
.bbch-beat__k{margin:16px 0 8px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.bbch-beat__facts{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.bbch-beat__facts li{list-style:none;display:flex;gap:10px;font-size:14px;line-height:1.4;color:var(--ink)}
.bbch-beat__dot{flex:0 0 8px;height:8px;margin-top:6px;background:var(--accent)}
.bbch-beat__foot{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.bbch-beat__by{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Chart Beat: la caja de récords arriba de la nota y del archivo de la categoría (BBCH_Beat::box) */
.bbch-beatbox{box-sizing:border-box;max-width:100%;margin:0 0 28px;padding:20px;background:var(--surf);border:1px solid var(--line);border-top:6px solid var(--purple);border-radius:14px;color:var(--ink)}
.bbch-beatbox__k{margin:0 0 12px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.bbch-beatbox__facts{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.bbch-beatbox__facts li{list-style:none;display:flex;gap:10px;font-size:15px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.bbch-beatbox__dot{flex:0 0 8px;height:8px;margin-top:7px;background:var(--accent)}
.bbch-beatbox__more{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;color:var(--accent-text);text-decoration:none}
.bbch-beatbox__more:hover{text-decoration:underline}
.bbch-beatbox__more:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Los #2 que nunca llegaron a #1 */
.bbch-twos{padding:20px;display:flex;flex-direction:column;align-items:flex-start}
.bbch-twos__k{margin:0;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bbch-pink)}
.bbch-twos__h{margin:8px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:44px;line-height:.92;letter-spacing:.01em;color:var(--ink)}
.bbch-twos__list{align-self:stretch;margin:16px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.bbch-twos__row{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.bbch-twos__n{flex:0 0 36px;font-family:'Archivo',sans-serif;font-weight:900;font-size:28px;line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.bbch-twos__t{flex:1 1 auto;min-width:0}
.bbch-twos__song{margin:0;font-weight:700;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.bbch-twos__who{margin:2px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.bbch-twos__badge{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--accent-ink);background:var(--pink);padding:4px 7px;white-space:nowrap}
.bbch-twos__still{align-self:stretch;margin:14px 0 0;padding:12px 14px;border:1px dashed var(--bbch-chip);border-radius:10px;font-size:13px;line-height:1.45;color:var(--ink)}
.bbch-twos__still-k{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--accent-text)}
.bbch-twos > .bbch-mas__more{margin-top:16px}

/* Canciones del Verano */
.bbch-sum{margin-top:24px;border-radius:14px;overflow:hidden;border:1px solid var(--line);display:flex;flex-wrap:wrap}
.bbch-sum__l{flex:1 1 380px;min-width:0;background:var(--pink);color:var(--accent-ink);padding:28px;display:flex;flex-direction:column;gap:16px}
.bbch-sum__k{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.bbch-sum__h{margin:0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(56px,7vw,84px);line-height:.88;letter-spacing:.01em;color:var(--accent-ink)}
.bbch-sum__lede{margin:0;font-size:15px;line-height:1.45;font-weight:500}
.bbch-sum__eds{display:flex;flex-wrap:wrap;gap:6px}
.bbch-sum:not(.is-js) .bbch-sum__eds{display:none}
.bbch-sum__ed{min-height:36px;border:1.5px solid var(--accent-ink);border-radius:999px;background:transparent;color:var(--accent-ink);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;cursor:pointer}
.bbch-sum__ed[aria-pressed="true"]{background:var(--accent-ink);color:#f5f5f7}
.bbch-sum .bbch-sum__ed:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.bbch-sum__brand{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bbch-sum__brand-k{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.bbch-sum__brand-v{display:inline-grid;place-items:center;min-width:120px;max-width:200px;min-height:56px;padding:8px 14px;border:2px solid var(--accent-ink);border-radius:8px;color:var(--accent-ink);text-decoration:none}
.bbch-sum .bbch-sum__brand-v:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.bbch-sum__brand-logo{display:block;max-width:170px;max-height:40px;width:auto;height:auto;object-fit:contain}
.bbch-sum__brand-name{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;overflow-wrap:anywhere}
.bbch-sum__r{flex:1.4 1 480px;min-width:0;background:var(--surf);padding:28px}
.bbch-sum__panel + .bbch-sum__panel{margin-top:32px}
.bbch-sum.is-js .bbch-sum__panel:not(.is-on){display:none}
.bbch-sum.is-js .bbch-sum__panel + .bbch-sum__panel{margin-top:0}
.bbch-sum__panel[hidden]{display:none}
.bbch-sum__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.bbch-sum__head p{margin:0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bbch-sum__list{margin:14px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.bbch-sum__row{list-style:none;display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.bbch-sum__pos{flex:0 0 60px;font-family:'Archivo',sans-serif;font-weight:900;font-size:48px;line-height:.85;letter-spacing:-.05em;color:var(--ink)}
.bbch-sum__pos.is-one{color:var(--bbch-pink)}
.bbch-sum__row .bbch-cover{width:48px;height:48px;border-radius:6px}
.bbch-sum__t{flex:1 1 auto;min-width:0}
.bbch-sum__song{margin:0;font-weight:700;font-size:17px;color:var(--ink);overflow-wrap:anywhere}
.bbch-sum__who{margin:2px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.bbch-sum__n{flex:0 0 auto;font-family:'Archivo',sans-serif;font-weight:900;font-size:26px;color:var(--ink)}
.bbch-sum__foot{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.bbch-sum__note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Las páginas enteras: los #2 y el top 50 de un verano */
.bbch-list__in{padding-top:28px;padding-bottom:72px}
.bbch-list__hero{margin-top:18px;max-width:820px}
.bbch-list__k{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.bbch-list__k--pink{color:var(--bbch-pink)}
.bbch-list__title{margin:10px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(48px,8vw,96px);line-height:.9;letter-spacing:.01em;color:var(--ink)}
.bbch-list__lede{margin:14px 0 0;font-size:17px;line-height:1.5;color:var(--muted)}
.bbch-list__note{margin:12px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:var(--bbch-soft)}
.bbch-list__empty{margin:32px 0 0;font-size:17px;color:var(--bbch-soft)}
.bbch-list__cols{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px;padding:0 0 10px;border-bottom:1px solid var(--bbch-edge);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bbch-list__cols-l{padding-left:118px}
.bbch-list__cols-r,.bbch-list__nums{display:flex;gap:6px}
.bbch-list__cols-r span,.bbch-list__nums > span{width:96px;text-align:center}
.bbch-list__rows{margin:32px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.bbch-list__cols + .bbch-list__rows{margin-top:0}
.bbch-list__row{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 0;border-top:1px solid var(--line)}
.bbch-list__cols + .bbch-list__rows .bbch-list__row:first-child{border-top:0}
.bbch-list__n{flex:0 0 56px;font-family:'Archivo',sans-serif;font-weight:900;font-size:36px;line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.bbch-list__n.is-one{color:var(--bbch-pink)}
.bbch-list__row .bbch-cover{width:44px;height:44px;border-radius:6px}
.bbch-list__t{flex:1 1 220px;min-width:0}
.bbch-list__song{margin:0;font-weight:700;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.bbch-list__song a{color:inherit;text-decoration:none}
.bbch-list__song a:hover{text-decoration:underline}
.bbch-list__who{margin:2px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.bbch-list__meta{margin:6px 0 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bbch-list__nums{margin-left:auto}
.bbch-list__nums > span{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;color:var(--ink)}
.bbch-list .bbch-twos__still{margin-top:20px;max-width:640px}
.bbch-list__back{margin-top:28px}

/* Tablet: el Radar ocupa todo el ancho y la columna de la derecha va debajo. */
@media (max-width:1023px){
  .bbch-radar{flex-basis:100%}
}
/* Celular: todo en una columna, menos aire y las columnas de números más angostas (de 320 a 640 sin scroll al costado). */
@media (max-width:640px){
  .bbch-mas__in,.bbch-list__in{padding-top:20px;padding-bottom:48px}
  .bbch-mas__lede,.bbch-list__lede{font-size:15px}
  .bbch-mas__grid{margin-top:24px;gap:16px}
  .bbch-mas__side{gap:16px}
  .bbch-radar,.bbch-sum__l,.bbch-sum__r{padding:18px}
  .bbch-radar__rule{padding:14px}
  .bbch-radar__l{gap:10px;flex-basis:100%}
  .bbch-radar__rank{flex-basis:40px}
  .bbch-radar__row .bbch-radar__rank{font-size:32px}
  .bbch-radar__cols .bbch-radar__gap{flex-basis:44px}
  .bbch-radar__pos,.bbch-radar__up{width:64px}
  .bbch-radar__wk{width:72px}
  .bbch-radar__row .bbch-radar__pos,.bbch-radar__row .bbch-radar__wk{font-size:16px}
  .bbch-beat__h{font-size:36px}
  .bbch-twos__h{font-size:38px}
  .bbch-sum{margin-top:16px}
  .bbch-sum__pos{flex-basis:40px;font-size:36px}
  .bbch-sum__row{gap:12px}
  .bbch-sum__song{font-size:15px}
  .bbch-sum__n{font-size:22px}
  .bbch-list__cols-l{display:none}
  .bbch-list__cols{justify-content:flex-end}
  .bbch-list__n{flex-basis:40px;font-size:28px}
  .bbch-list__t{flex-basis:0}
  .bbch-list__cols-r span,.bbch-list__nums > span{width:72px}
  .bbch-list__nums{flex-basis:100%;justify-content:flex-end}
  .bbch-list__nums > span{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .bbch a,.bbch button{transition:none}
}