/* ============================================================
   SERENZA · legend.css
   Leyenda de color colapsable + swatches reutilizables.

   Resuelve la ambigüedad cromática del listado de eventos y del
   centro de operaciones: el mismo --gold / --status-urgent codifica
   ejes distintos. Los swatches reusan los tokens de
   colors_and_type.css para no desincronizarse nunca de la UI.
   ============================================================ */

.sz-legend {
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}

.sz-legend__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  list-style: none;
  user-select: none;
}
.sz-legend__summary::-webkit-details-marker { display: none; }
.sz-legend__summary i { font-size: 16px; color: var(--gold-deep); }
.sz-legend__summary:hover { color: var(--forest); }
.sz-legend[open] .sz-legend__summary {
  border-bottom: 1px solid var(--border);
  color: var(--forest);
}

.sz-legend__body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 14px 16px 16px;
}

.sz-legend__group { min-width: 200px; flex: 1 1 240px; }
.sz-legend__group-title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

.sz-legend__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sz-legend__items li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-soft);
}

.sz-legend__note {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.5;
  max-width: 52ch;
}

/* ---------- Swatch ---------- */
/* Círculo sólido coloreado con el token real. Variantes por eje. */
.sz-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* Eje tiempo (igual al borde izquierdo de la tarjeta de evento) */
.sz-swatch--time-distant     { background: var(--sage-soft); }
.sz-swatch--time-near        { background: var(--sage); }
.sz-swatch--time-approaching { background: var(--gold); }
.sz-swatch--time-imminent    { background: var(--gold-deep); }
.sz-swatch--time-day_of      { background: var(--status-urgent); }
.sz-swatch--time-past        { background: var(--paper-deep); }

/* Eje salud (igual al dot de salud) */
.sz-swatch--health-on_track  { background: var(--sage); }
.sz-swatch--health-at_risk   { background: var(--gold); }
.sz-swatch--health-critical  { background: var(--status-urgent); }

/* Eje score (deep, coherente con el texto del chip) */
.sz-swatch--score-low  { background: var(--sage-deep); }
.sz-swatch--score-mid  { background: var(--gold-deep); }
.sz-swatch--score-high { background: var(--status-urgent); }

@media (max-width: 767px) {
  .sz-legend__body { gap: 16px 24px; padding: 12px 14px 14px; }
}