/* Nothing design system — tokens (references/tokens.md) */

:root {
  --black: #000000;
  --surface: #111111;
  --surface-raised: #1a1a1a;
  --border: #222222;
  --border-visible: #333333;
  --text-disabled: #666666;
  --text-secondary: #999999;
  --text-primary: #e8e8e8;
  --text-display: #ffffff;
  --accent: #d71921;
  --success: #4a9e5c;
  --warning: #d4a843;
  --interactive: #5b9bf6;
  --seg-empty: var(--border);
}

:root[data-theme="light"] {
  --black: #f5f5f5;
  --surface: #ffffff;
  --surface-raised: #f0f0f0;
  --border: #e8e8e8;
  --border-visible: #cccccc;
  --text-disabled: #999999;
  --text-secondary: #666666;
  --text-primary: #1a1a1a;
  --text-display: #000000;
  --interactive: #007aff;
  --seg-empty: #e0e0e0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--black);
  color: var(--text-primary);
  font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

.pagina { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }

/* ---- grid de widgets (panel de instrumentos) ---- */
.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .grid-kpi { grid-template-columns: repeat(2, 1fr); } .grid-2col { grid-template-columns: 1fr; } }
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  min-width: 0;
}
.widget-hero { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.hero-doto {
  font-family: "Doto", "Space Mono", monospace; font-weight: 700;
  font-size: 84px; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-display);
  margin: 16px 0 8px;
}
.widget-valor {
  font-family: "Space Mono", monospace; font-size: 27px; line-height: 1.2;
  color: var(--text-display); margin-top: 12px; white-space: nowrap;
}
.unidad-sup { font-size: 12px; color: var(--text-secondary); margin-left: 6px; }
.widget-sub {
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-disabled); margin-top: 8px;
}
.chart-lead { font-size: 22px; color: var(--text-display); margin-top: 10px; }
.enlace { color: var(--interactive); text-decoration: none; }
/* drill-down silencioso: hereda color, subraya al hover — el tile no grita "link" */
.enlace-suave { color: inherit; text-decoration: none; }
.enlace-suave:hover { color: var(--text-primary); text-decoration: underline; }

/* ---- barra as-of: el corte de cada fuente es identidad del reporte ---- */
.asof-barra {
  display: flex; gap: 20px; flex-wrap: wrap; padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-disabled);
}
.asof-barra .nuevo { color: var(--warning); margin-left: auto; }

/* ---- tablas: orden por columna + export ---- */
th.ordenable { cursor: pointer; user-select: none; }
th[data-dir="desc"]::after { content: " ▼"; font-size: 9px; color: var(--text-secondary); }
th[data-dir="asc"]::after { content: " ▲"; font-size: 9px; color: var(--text-secondary); }
button.tabla-csv { display: block; margin-left: auto; margin-bottom: -4px; }

/* enlaces dentro de SVG (nombres de caso en el lollipop) */
.svg-enlace text:hover { fill: var(--text-primary); text-decoration: underline; }

/* ---- charts SVG ---- */
.chart { width: 100%; height: auto; margin-top: 14px; display: block; }
.chart-part { height: 14px; }
.chart-dona { height: 160px; width: auto; margin: 14px auto 0; display: block; }
.dona-centro { font-family: "Space Mono", monospace; font-size: 26px; fill: var(--text-display); }
.chart-tick { font-family: "Space Mono", monospace; font-size: 10px; fill: var(--text-disabled); letter-spacing: 0.04em; }
.chart-val { font-family: "Space Mono", monospace; font-size: 10px; fill: var(--text-primary); letter-spacing: 0.04em; }
/* halo del color del fondo: el texto sigue legible aunque caiga sobre una barra */
.chart-tick, .chart-val { paint-order: stroke; stroke: var(--black); stroke-width: 3px; stroke-linejoin: round; }
.chart rect[data-v] { cursor: crosshair; }
.chart rect[data-v]:hover { fill-opacity: 0.65; }
.chart-readout {
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary);
  text-align: right; min-height: 16px; margin-top: 2px;
}
.leyenda-part { margin-top: 10px; }
.chart-leyenda {
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.06em;
  color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; margin-right: 18px;
}
.muestra { width: 10px; height: 10px; background: var(--text-display); display: inline-block; }

/* ---- filas compactas de covenants ---- */
.cov-fila { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.cov-nombre { font-size: 13px; color: var(--text-secondary); flex: 1; }
.cov-valor { font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; align-self: center; }
.dot-cumple { background: var(--success); }
.dot-atencion { background: var(--warning); }
.dot-alerta { background: var(--accent); }
.dot-sin_datos { background: var(--border-visible); }

/* ---- tipografía ---- */
.label {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.2;
}

.dato { font-family: "Space Mono", monospace; }

.hero-numero {
  font-family: "Doto", "Space Mono", monospace;
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-display);
}
.hero-unidad { font-family: "Space Mono", monospace; font-size: 24px; color: var(--text-secondary); }

h1 { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-display); }

/* ---- navegación ---- */
nav.principal {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 48px;
}
nav.principal .marca { margin-right: auto; }
nav.principal a {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text-disabled);
}
nav.principal a.activo { color: var(--text-display); }
nav.principal a.activo::before { content: "● "; color: var(--accent); font-size: 8px; vertical-align: 2px; }
nav.principal .separador { color: var(--border-visible); }
#modo {
  background: none; border: none; cursor: pointer;
  font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.08em;
  color: var(--text-disabled);
}
#modo:hover { color: var(--text-primary); }
/* logout: es un POST (CSRF) pero el <a> se ve como cualquier link del nav
   (hereda nav.principal a) — nada de chrome de <button> */
.salir-form { display: inline; margin: 0; }

/* ---- hero ---- */
.hero { margin: 64px 0 16px; }
.hero .label { margin-bottom: 16px; }
.hero-contexto { font-family: "Space Mono", monospace; font-size: 14px; color: var(--text-secondary); margin-top: 16px; }

/* ---- barra segmentada ---- */
.segmentos { display: flex; gap: 2px; margin-top: 24px; }
.segmentos span { height: 12px; flex: 1; background: var(--seg-empty); }
.segmentos span.lleno { background: var(--text-display); }
.segmentos span.alerta { background: var(--warning); }

/* ---- stat rows ---- */
.stats { margin-top: 64px; }
.stat-fila {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.stat-fila .valor { font-family: "Space Mono", monospace; font-size: 16px; color: var(--text-primary); }
.stat-fila .valor .unidad { font-size: 11px; color: var(--text-secondary); margin-left: 4px; }
.stat-fila .valor.pendiente { color: var(--text-disabled); }

/* ---- secciones ---- */
section { margin-top: 64px; }
section > .label { margin-bottom: 24px; }

/* ---- tablas ---- */
table { width: 100%; border-collapse: collapse; }
th {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary); font-weight: 400;
  text-align: left; padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--border-visible);
}
td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
td.num, th.num { text-align: right; font-family: "Space Mono", monospace; }
td .tag {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--border-visible);
  border-radius: 999px; padding: 2px 10px; color: var(--text-secondary);
}
tr.pasada td { color: var(--text-disabled); }

/* ---- formularios (ingesta) ---- */
.form-bloque { border: 1px solid var(--border-visible); border-radius: 8px; padding: 24px; margin-top: 24px; }
.form-bloque .label { margin-bottom: 16px; }
input[type="file"] {
  font-family: "Space Mono", monospace; font-size: 13px; color: var(--text-secondary);
  margin-bottom: 16px; display: block;
}
button.primario {
  font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--text-display); color: var(--black);
  border: none; border-radius: 999px; padding: 12px 24px; min-height: 44px; cursor: pointer;
}
.estado-inline { font-family: "Space Mono", monospace; font-size: 12px; margin-top: 24px; color: var(--success); }
.estado-inline.error { color: var(--accent); }
.aviso {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  color: var(--warning); margin-top: 8px;
}

/* ---- estado vacío ---- */
.vacio { text-align: center; padding: 96px 0; }
.vacio .titulo { color: var(--text-secondary); font-size: 18px; }
.vacio .detalle { color: var(--text-disabled); font-size: 14px; margin-top: 8px; }

/* ---- procedencia (pie) ---- */
footer.procedencia {
  margin-top: 96px; padding-top: 16px; border-top: 1px solid var(--border);
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-disabled); display: flex; gap: 24px; flex-wrap: wrap;
}

/* ---- covenants (semáforo: color solo en el valor) ---- */
.estado-cumple { color: var(--success); }
.estado-atencion { color: var(--warning); }
.estado-alerta { color: var(--accent); }
.estado-sin_datos { color: var(--text-disabled); }
.tag-mini {
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--border-visible);
  border-radius: 4px; padding: 1px 6px; color: var(--text-disabled); margin-left: 8px;
}
.covenant-detalle {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.02em;
  color: var(--text-disabled); padding: 4px 0 10px; border-bottom: 1px solid var(--border);
  margin-top: -10px;
}

/* ---- fórmula visible por covenant ("cómo se calcula", expandible) ---- */
.cov-exp {
  display: inline-block; background: none; border: none; cursor: pointer;
  font-family: "Space Mono", monospace; font-size: 10px; color: var(--text-disabled);
  padding: 0 8px 0 0; transition: transform 0.15s;
}
.cov-exp:hover { color: var(--text-display); }
.cov-exp.abierto { transform: rotate(90deg); padding: 0 0 0 8px; }
tr.abierta > td { border-bottom-color: transparent; }
tr.fila-det > td { padding: 0 12px 12px 24px; }
.cov-formula { border-left: 1px solid var(--border-visible); padding: 1px 0 1px 12px; }
.cf-fila {
  display: flex; gap: 10px; padding: 1px 0; line-height: 1.6;
  font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: 0.03em;
  color: var(--text-disabled);
}
.cf-k { flex: none; width: 52px; }
.cf-v { color: var(--text-secondary); }
.cf-v .dato { color: var(--text-secondary); }
.cf-fuente { color: var(--text-disabled); }

/* ---- señales (lista compacta, detalle al click) ---- */
.senal-c { border-bottom: 1px solid var(--border); border-left: 2px solid var(--border-visible); }
.senal-c.etiqueta-validado { border-left-color: var(--success); }
.senal-c.etiqueta-calibrado { border-left-color: var(--interactive); }
.senal-c.etiqueta-heuristico { border-left-color: var(--warning); }
.senal-c.etiqueta-por_calibrar { border-left-color: var(--text-disabled); }
.senal-fila {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 13px 12px; color: inherit; font: inherit;
}
.senal-fila:hover { background: var(--surface); }
.senal-exp { font-family: "Space Mono", monospace; font-size: 10px; color: var(--text-disabled); transition: transform 0.15s; flex: none; }
.senal-c.abierta .senal-exp { transform: rotate(90deg); }
.senal-titulo-c { font-size: 14px; color: var(--text-primary); flex: 1; min-width: 0; }
.senal-det { display: none; padding: 0 12px 16px 32px; }
.senal-c.abierta .senal-det { display: block; }

/* ---- fuente de financiamiento (selector de acreedor) ---- */
.fuente-barra { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; flex-wrap: wrap; }
.fuente-barra .tag {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--border-visible);
  border-radius: 999px; padding: 8px 18px; color: var(--text-secondary); text-decoration: none;
}
.fuente-barra .tag-activo { background: var(--text-display); color: var(--black); border-color: var(--text-display); }
.fuente-menu { position: relative; }
.fuente-menu summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  border: 1px solid var(--border-visible); border-radius: 999px; padding: 8px 18px;
  color: var(--text-display); background: var(--surface);
}
.fuente-menu summary::-webkit-details-marker { display: none; }
.fuente-menu summary .flecha { color: var(--text-disabled); margin-left: 6px; }
.fuente-menu[open] summary { border-color: var(--text-secondary); }
.fuente-opciones {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 280px;
  background: var(--surface-raised); border: 1px solid var(--border-visible); border-radius: 8px;
  padding: 6px 0;
}
.fuente-opciones a {
  display: block; padding: 12px 16px; text-decoration: none;
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-secondary); border-left: 2px solid transparent;
}
.fuente-opciones a:hover { color: var(--text-display); }
.fuente-opciones a.activo { color: var(--text-display); border-left-color: var(--accent); }
.fuente-nota {
  display: block; padding: 10px 16px 8px; border-top: 1px solid var(--border);
  font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--text-disabled); max-width: 300px;
}

/* ---- panel del agente (chat desplegable, solo originador) ---- */
#agente-boton {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.08em;
  background: var(--surface); color: var(--text-display);
  border: 1px solid var(--border-visible); border-radius: 999px;
  padding: 12px 20px; min-height: 44px; cursor: pointer;
}
#agente-boton:hover { border-color: var(--text-secondary); }
#agente-panel {
  position: fixed; right: 24px; bottom: 84px; z-index: 40;
  width: min(420px, calc(100vw - 48px)); max-height: min(72vh, 720px);
  display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-visible); border-radius: 16px;
  overflow: hidden;
}
body.agente-abierto #agente-panel { display: flex; }
.agente-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
.agente-feed { overflow-y: auto; padding: 8px 20px 16px; }
.burbuja {
  border: 1px solid var(--border); border-left: 2px solid var(--interactive);
  border-radius: 0 12px 12px 12px; padding: 12px 14px; margin-top: 12px;
}
.burbuja p { font-size: 13px; color: var(--text-primary); }
.burbuja-cab { font-size: 13px; font-weight: 500; color: var(--text-display); margin-bottom: 6px; }
.burbuja-motivo {
  font-family: "Space Mono", monospace; font-size: 9.5px !important; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-disabled) !important; margin-top: 8px;
}
.burbuja .senal-acciones { margin-top: 10px; }
.burbuja p { white-space: pre-wrap; }
.burbuja-user {
  border-left: none; border-right: 2px solid var(--text-secondary);
  border-radius: 12px 0 12px 12px; margin-left: 48px;
  font-size: 13px; color: var(--text-primary);
}
#agente-form { display: flex; gap: 8px; padding: 12px 20px 4px; border-top: 1px solid var(--border); }
#agente-input {
  flex: 1; background: none; border: 1px solid var(--border-visible); border-radius: 999px;
  padding: 10px 16px; color: var(--text-primary);
  font-family: "Space Mono", monospace; font-size: 12px;
}
#agente-input:focus { outline: none; border-color: var(--text-secondary); }
#agente-input:disabled { opacity: 0.5; }
.agente-enviar {
  background: var(--text-display); color: var(--black); border: none; border-radius: 999px;
  width: 40px; min-height: 40px; cursor: pointer; font-size: 15px;
}
.agente-pie { padding: 10px 20px 14px; border-top: 1px solid var(--border); font-size: 9px; }

/* ---- señales (detalle) ---- */
.senal { padding: 24px 0; border-bottom: 1px solid var(--border); }
.senal-descartada { opacity: 0.4; }
.senal-cabecera { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.senal-titulo { font-size: 16px; font-weight: 500; color: var(--text-display); margin-right: 8px; }
.senal-prosa { font-size: 14px; color: var(--text-primary); margin-top: 8px; max-width: 72ch; }
.senal-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.senal-evidencia {
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-disabled); text-transform: uppercase;
}
.senal-acciones { display: flex; gap: 8px; }
button.accion {
  background: none; border: none; cursor: pointer;
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-secondary); padding: 4px 0;
}
button.accion:hover { color: var(--text-display); }
.estado-rev-aprobada { color: var(--success); border-color: var(--success); }
.estado-rev-descartada { color: var(--text-disabled); }
.estado-rev-pendiente_revision { color: var(--warning); border-color: var(--warning); }

/* ---- calendario mensual ---- */
.prox-fila-grupo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .prox-fila-grupo { grid-template-columns: repeat(2, 1fr); } }
.prox-item { border-left: 1px solid var(--border-visible); padding-left: 12px; min-width: 0; }
.prox-fecha { font-size: 12px; color: var(--text-secondary); }
.prox-monto { font-size: 18px; color: var(--text-display); margin-top: 2px; white-space: nowrap; }
.prox-quien { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--text-disabled); margin-top: 4px; }

.cal-nav { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.cal-flecha {
  font-family: "Space Mono", monospace; font-size: 18px; text-decoration: none;
  color: var(--text-secondary); padding: 0 8px;
}
.cal-flecha:hover { color: var(--text-display); }
.cal-mes { font-size: 16px; letter-spacing: 0.08em; color: var(--text-display); }
.cal-total { margin-left: auto; }

.cal-tabla { table-layout: fixed; }
.cal-tabla th { text-align: center; padding: 8px 4px; }
.cal-dia {
  height: 92px; vertical-align: top; padding: 6px 6px !important;
  border: 1px solid var(--border) !important; background: var(--surface);
}
.cal-dia.fuera { background: transparent; opacity: 0.35; }
.cal-dia.cal-hoy { border-color: var(--interactive) !important; }
.cal-num { font-family: "Space Mono", monospace; font-size: 11px; color: var(--text-secondary); }
.cal-chip {
  font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: 0.02em;
  background: var(--surface-raised); border-left: 2px solid var(--text-secondary);
  color: var(--text-primary); padding: 2px 5px; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip-bullet { border-left-color: var(--warning); color: var(--warning); }

/* ---- toggle actual|histórico ---- */
.vista-barra { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.vista-toggle { display: inline-flex; border: 1px solid var(--border-visible); border-radius: 999px; overflow: hidden; }
.vista-toggle a {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  text-decoration: none; color: var(--text-secondary); padding: 8px 18px;
}
.vista-toggle a.activo { background: var(--text-display); color: var(--black); }

/* ---- servicio de deuda ---- */
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 16px; }
@media (max-width: 900px) { .sd-grid { grid-template-columns: 1fr; } }
.sd-mitad { min-width: 0; }
.sd-cifra { font-size: 30px; color: var(--text-display); margin: 10px 0 6px; white-space: nowrap; }

/* ---- metodología / reporte ---- */
.metodo-intro { font-size: 15px; color: var(--text-secondary); max-width: 72ch; margin-top: 12px; }
.reporte-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }

/* ---- impresión (reporte → PDF) ---- */
@media print {
  :root, :root[data-theme="light"] {
    --black: #ffffff; --surface: #ffffff; --surface-raised: #f4f4f4;
    --border: #dddddd; --border-visible: #bbbbbb;
    --text-disabled: #888888; --text-secondary: #555555;
    --text-primary: #111111; --text-display: #000000;
    --seg-empty: #e5e5e5;
  }
  body { background: #ffffff; }
  nav.principal, .no-print, .vista-toggle, .senal-acciones, footer.procedencia, #modo, .fuente-barra { display: none !important; }
  .pagina { max-width: 100%; padding: 0; }
  section { break-inside: avoid; margin-top: 28px; }
  a { color: inherit; text-decoration: none; }
}

/* ---- leyenda epistémica ---- */
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.leyenda .tag {
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--border-visible);
  border-radius: 4px; padding: 4px 12px; color: var(--text-secondary);
  text-decoration: none;
}
.leyenda a.tag:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.leyenda .tag-activo { background: var(--text-display); color: var(--black); border-color: var(--text-display); }