/* ============================================================
   SpineNet · vista alertas
   Clases prefijadas v-al-…  ·  solo var(--token), nunca hex
   ============================================================ */

/* ---------- Resumen: cuántas de cada nivel, en cifras y en una barra ---------- */
.v-al-resumen {
  display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-4);
  padding: var(--s-5); border-radius: var(--r-lg); background: var(--bg-surface); border: 1px solid var(--border);
}
.v-al-resumen__cifras { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); }
.v-al-cifra { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs-13); color: var(--text-secondary); }
.v-al-cifra b { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.v-al-cifra--alerta b { color: var(--danger-ink); }
.v-al-cifra--aviso b { color: var(--warn-ink); }

/* ---------- Una tarjeta por acción ---------- */
.v-al__n {
  flex: 0 0 auto; align-self: center; min-width: 34px; padding: 3px 10px; border-radius: var(--r-full); text-align: center;
  font-size: var(--fs-15); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--warn-soft); color: var(--warn-ink);
}
.v-al__n.is-critico { background: var(--danger-soft); color: var(--danger-ink); }

.v-al__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v-al__item {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; min-width: 0;
  padding: 8px 2px; border: 0; border-top: 1px solid var(--border); background: none;
  font: inherit; text-align: left; color: var(--text-primary); cursor: pointer;
  transition: background var(--t-fast);
}
.v-al__lista li:first-child .v-al__item { border-top: 0; }
@media (hover: hover) { .v-al__item:hover { background: var(--bg-muted); } }
.v-al__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.v-al__item > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v-al__item b { font-size: var(--fs-13); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-al__item small { font-size: var(--fs-12); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-al__item > svg { flex: 0 0 auto; color: var(--text-muted); }
.v-al__nivel { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.v-al__nivel--critico { background: var(--danger); }
.v-al__nivel--alto { background: var(--warn); }
.v-al__ir { margin-left: auto; }