/* ====== Variables globales ====== */
:root {
  /* Colores base */
  --bg:#181818;
  --panel:#1b1b1c;
  --panel-2:#1b1b1c;
  --border:#2a2f39;

  --fg:#dadada;
  --muted:#a5adba;
  --accent:#7aa2ff;

  /* Colores hits */
  --hitA:#519751;
  --hitB:#407bae;
  --hitC:#7d3636; 

    --hit-alpha: .20;        /* fondo más suave */
  --hit-border-alpha: .45; /* borde un poco más marcado */



  /* Otros */
  --radius: 12px;
  --shadow: 0 2px 10px rgba(50, 50, 50, 0.25);
  --font: 14px/1.5 "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;



}

* { box-sizing:border-box; }

html, body {
  margin:0;
  scrollbar-gutter: stable;
  background:var(--bg);
  color:var(--fg);
  font:var(--font);
}

.wrap {
  max-width:1100px;
  margin:24px auto;
  padding:0 20px;
}

h1 {
  font-size:1.6rem;
  font-weight:800;
  margin:0 0 14px;
}

#stat-lists .stackbar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#141820;border:1px solid var(--border)}
#stat-lists .stackbar .seg{height:100%}
#stat-lists .seg--full{background:#ababab}
#stat-lists .seg--two {background:#909090}
#stat-lists .seg--one {background:#464646}
#stat-lists .seg--zero{background:#212121}


.card-controls .row-groups{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
}

.card-controls .group-label{
  font-weight:700;
  color:var(--fg);
  opacity:.9;
  margin-right:4px;
}

.card-controls .groups-sep{
  width:18px;
  height:1px;
  display:inline-block;
}



/* Estado “apagado” para filas de la tabla de acordes */
#tabla-acordes tbody tr.row-muted {
  opacity: .2;               /* oscurece todo (texto + fondos) */
  filter: grayscale(99%);     /* un toque desaturado */
  color: black;              /* letras negras */
  transition: opacity .15s ease, filter .15s ease, background-color .15s ease;
}


/* Mantén el dim incluso en hover para dar sensación de deshabilitado */
#tabla-acordes tbody tr.row-muted:hover {
  opacity: .45;
  filter: grayscale(12%);
}

/* Botón flotante para exportar PDF */
#btn-export-pdf{
  position: fixed;
  inset: 10px auto auto 10px;   /* top-left */
  z-index: 99999;
  padding: 8px 12px;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
#btn-export-pdf:hover{ filter: brightness(1.08); }
@media print{ #btn-export-pdf{ display: none !important; } }






/* ===== Selector/leyenda sobre la tabla (radios custom) ===== */
.table-legend{
  display:flex;
  gap:10px;
  align-items:center;
  margin:6px 0 10px;
}

/* --- Tamaño unificado para ambas píldoras --- */
:root{
  /* diámetro del “chip” de la izquierda (R/3/5/7) */
  --legend-item-d: 22px;
  /* separaciones y radio */
  --legend-gap: 10px;
  --legend-pad-x: 12px;
  --legend-pad-y: 6px;
  --legend-radius: 12px;
  /* colores “encendido” */
  --legend-on-bg: rgba(122,162,255,.18);
  --legend-on-ring: rgba(122,162,255,.66);
}

/* El propio label hace de botón */
.legend-pill{ position:relative; display:inline-flex; }

/* Ocultamos el radio nativo */
.legend-pill > input{
  position:absolute; inset:0; opacity:0; pointer-events:none; appearance:none;
}

/* base visual para ambas */
.legend-pill .deg-pill,
.legend-pill .dot-pill{
  display:inline-flex; align-items:center; gap:var(--legend-gap);
  padding:var(--legend-pad-y) var(--legend-pad-x);
  height: calc(var(--legend-item-d) + var(--legend-pad-y)*2);       /* mismo alto */
  border-radius: var(--legend-radius);
  background:var(--panel-2);
  border:1px solid var(--border);
  cursor:pointer; user-select:none;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .05s ease;
}

/* ambos con el MISMO ancho mínimo (4 “slots” como la de grados) */
.legend-pill .deg-pill,
.legend-pill .dot-pill{
  min-width: calc(4*var(--legend-item-d) + 3*var(--legend-gap) + 2*var(--legend-pad-x));
  justify-content:center;
}

/* hover/focus */
.legend-pill:hover .deg-pill,
.legend-pill:hover .dot-pill{ background:#1e222b; }
.legend-pill > input:focus-visible + .deg-pill,
.legend-pill > input:focus-visible + .dot-pill{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* seleccionado */
.legend-pill > input:checked + .deg-pill,
.legend-pill > input:checked + .dot-pill{
  background: var(--legend-on-bg);
  box-shadow: inset 0 0 0 1px var(--legend-on-ring);
  border-color: var(--legend-on-ring);
}
.legend-pill:active .deg-pill,
.legend-pill:active .dot-pill{ transform: translateY(1px); }

/* contenido “R 3 5 7” */
.deg-pill .d{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--legend-item-d); height:var(--legend-item-d);
  border-radius:999px; font-weight:800; font-size:12px; color:#e6e8ee; background:#30374a;
}
.deg-pill .d.dim{ opacity:.45; }

/* bolitas A/B/C */
.dot-pill .dot{
  width:10px; height:10px; border-radius:50%;
  display:inline-block; box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.dot-pill .dot.a{ background:#2e7d32; } /* verde */
.dot-pill .dot.b{ background:#1565c0; } /* azul  */
.dot-pill .dot.c{ background:#9c1c28; } /* rojo  */