/* ====== Info / estadísticas ====== */
.progress {
  height:18px;
  background:#20242c;
  border-radius:12px;
  overflow:hidden;
  margin:12px 0 14px;
  border:1px solid var(--border);
}
.progress .seg { height:100%; display:inline-block; }

.stat-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.chip {
  padding:2px 8px;
  border-radius:6px;
  color:#111;
  font-weight:700;
}
.chip-dark { background:#2a2f39; color:#d9dde6; }

.lists {
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}


/* etiquetas de tipo */
.kind-major { background:var(--col-major); color:#111; font-weight:bold }
.kind-minor { background:var(--col-minor); color:#111; font-weight:bold }
.kind-dim   { background:var(--col-dim);   color:#111; font-weight:bold }
.kind-aug   { background:var(--col-aug);   color:#111; font-weight:bold }
.kind-7     { background:var(--col-7);     color:#111; font-weight:bold }
.kind-sus2  { background:var(--col-sus2);  color:#111; font-weight:bold }
.kind-sus4  { background:var(--col-sus4);  color:#111; font-weight:bold }

/* ====== Tablas dentro de stat-lists ====== */
#stat-lists table {
  width: 100%;
  table-layout: fixed;   /* reparte el ancho de forma uniforme */
  border-collapse: collapse;
}

#stat-lists th,
#stat-lists td {
  border: 1px solid #333;
  padding: 6px 8px;
  text-align: center;
  vertical-align: top;
}

/* Columna de acordes: horizontal con pills */
#stat-lists td.acordes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  white-space: normal;
  word-break: break-word;
}
/* No toques los chips .chord-pill */
#stat-lists td.acordes > span:not(.chord-pill) {
  background: #222;
  border: 1px solid #444;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #fff;
}



/* info.css — agrega esto */
#stat-lists .barlist{ display:grid; gap:10px; }
#stat-lists .bar{
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px;
}
#stat-lists .bar__row{ display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; font-variant-numeric:tabular-nums; }
#stat-lists .bar__track{ height:10px; background:#16181a; border-radius:6px; overflow:hidden; }
#stat-lists .bar__fill{ height:100%; width:0; background:var(--accent); transition:width .25s; }
#stat-lists .bar--full .bar__fill{ background:#465064; }
#stat-lists .bar--two  .bar__fill{ background:#465064; }
#stat-lists .bar--one  .bar__fill{ background:#465064; }
#stat-lists .bar--zero .bar__fill{ background:#465064; }

/* barrita mini bajo cada pill de acorde */
#stat-lists .acordes .mini-hits{ display:flex; gap:3px; height:4px; }
#stat-lists .acordes .mini-hits i{ width:10px; height:100%; border-radius:2px; }
/* Barras en 4 columnas */
#stat-lists .barlist{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}
#stat-lists .bar{ height:100%; }

/* Compacto dentro de cada tarjeta */
#stat-lists .bar__row{ margin-bottom:6px; display:flex; justify-content:space-between; gap:8px; }
#stat-lists .bar__track{ height:12px; }

/* Responsivo: 2 cols y 1 col en pantallas chicas */
@media (max-width:1000px){ #stat-lists .barlist{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){  #stat-lists .barlist{ grid-template-columns:1fr; } }







/* Paleta y tamaños de los chips */
:root{
  --hitA: #2e7d32;
  --hitB: #1565c0;
  --hitC: #9c1c28;
  --hit0: #5a5a5a;

  --pill-h: 44px;        /* alto fijo del chip */
  --label-h: 18px;       /* banda del símbolo */
  --dot-h: 8px;          /* alto reposo */
  --dot-h-hover: 20px;   /* alto en hover (vertical) */

  --dot-w: 22px;         /* ← ANCHO FIJO (caben 2 chars: C#, Bb) */
}

/* Contenedor del acorde (chip) */
.acordes .chord-pill{
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--pill-h);
  margin: 2px 6px;
  padding: 0 4px;
  border-radius: 8px;
  overflow: visible;
  background: transparent;
  border: none;
}

/* Símbolo siempre visible, centrado y 100% ancho */
.chord-pill__label{
  position: absolute;
  top: 2px;
  left: 0; right: 0;
  height: var(--label-h);
  line-height: var(--label-h);
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* Línea de dots */
.chord-pill__dots{
  display: flex;
  gap: 4px;
  padding-bottom: 3px;
  line-height: 0;
}

/* Dot contenedor: ancho FIJO; no animamos width */
.chord-pill__dot{
  position: relative;
  width: var(--dot-w);        /* ← aquí ajustas el ancho a mano */
  height: var(--dot-h);
  color: var(--hit0);         /* lo usa ::before como currentColor */
}
.chord-pill__dot[data-hit="a"]{ color: var(--hitA); }
.chord-pill__dot[data-hit="b"]{ color: var(--hitB); }
.chord-pill__dot[data-hit="c"]{ color: var(--hitC); }

/* Fondo del dot: solo crece en ALTURA en hover (no deforma el texto) */
.chord-pill__dot::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--dot-h);
  background: currentColor;
  border-radius: 6px;
  transition: height 150ms ease;
}

/* Texto centrado H/V, sin saltos de línea */
.chord-pill__dot > b{
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: var(--dot-h-hover);
  line-height: var(--dot-h-hover);
  text-align: center;
  white-space: nowrap;     /* evita “C#” en 2 líneas */
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: opacity 150ms ease;
}

/* Hover: solo altura y mostrar letras */
.acordes .chord-pill:hover .chord-pill__dot::before{ height: var(--dot-h-hover); }
.acordes .chord-pill:hover .chord-pill__dot > b{ opacity: 1; }






  /* una debajo de la otra */
.lists{ display:block; margin-top:10px; }
.lists .block{ background:var(--panel); border:0px solid var(--border); border-radius:12px; padding:10px; margin:12px 0; }

#stat-lists table{ width:100%; border-collapse:collapse; table-layout:auto; }  /* <- auto */
#stat-lists th,#stat-lists td{ border:1px solid #333; padding:6px 8px; text-align:center; vertical-align:top; }

/* Columna de acordes en pills */
#stat-lists td.acordes{ display:flex; flex-wrap:wrap; gap:6px; }
#stat-lists td.acordes span{ background:#222;  padding:2px 2px; border-radius:6px; font-size:.9rem; color:#fff; }

/* ── Distribución por tipo: anchos + alineación centrada en col 1,2,4 ── */
#stat-lists .block:first-child th:nth-child(1),
#stat-lists .block:first-child td:nth-child(1){
  width: 9rem;
  text-align: center;
  vertical-align: middle;
}

#stat-lists .block:first-child th:nth-child(2),
#stat-lists .block:first-child td:nth-child(2){
  width: 5rem;
  text-align: center;           /* antes estaba a la derecha */
  vertical-align: middle;
}

#stat-lists .block:first-child th:nth-child(3),
#stat-lists .block:first-child td:nth-child(3){
  width: auto;                   /* “Acordes” ocupa el resto */
  text-align: center;              /* se mantiene a la izquierda */
  vertical-align: middle;
}

#stat-lists .block:first-child th:nth-child(4),
#stat-lists .block:first-child td:nth-child(4){
  width: 7rem;
  text-align: center;            /* antes estaba a la derecha */
  vertical-align: middle;
}