/* apps/web/public/mapa-de-enlaces.css
 *
 * El dibujo SVG del mapa de enlaces (src/paginas/GrafoDeEnlaces.tsx). Hoja estatica: el lint del ADS prohibe los valores
 * fijos en `style` y `className`, y cssMap no llega a propiedades de SVG como `fill` o `stroke`; el componente marca cada
 * pieza con `data-mapa` y esta hoja la pinta. SOLO variables de token del ADS (--ds-*): ni un color ni un tamano de letra
 * a mano (§4.3). El foco y el rotulo al pasar el raton los resuelve el CSS (`:focus-visible`, `:hover`).
 */
[data-mapa='svg'] {
  display: block;
  width: 100%;
  height: auto;
}
[data-mapa='flecha'] {
  fill: var(--ds-border-bold);
}
[data-mapa='arista'] {
  stroke: var(--ds-border);
  stroke-width: 1.2;
}
[data-mapa='arista'][data-remarcada='si'] {
  stroke: var(--ds-border-bold);
  stroke-width: 2.5;
}
[data-mapa='nodo'] {
  outline: none;
  cursor: pointer;
}
[data-mapa='forma'] {
  fill: var(--ds-background-accent-blue-subtle);
  stroke: var(--ds-border-accent-blue);
  stroke-width: 2;
}
[data-mapa='forma'][data-tipo='otro-espacio'] {
  fill: var(--ds-background-accent-purple-subtle);
  stroke: var(--ds-border-accent-purple);
}
[data-mapa='forma'][data-tipo='actual'] {
  fill: var(--ds-background-brand-bold);
  stroke: var(--ds-border-brand);
  stroke-width: 4;
}
/* El aro de foco solo se ve con el foco de teclado (:focus-visible), como el de los botones del ADS. */
[data-mapa='aro'] {
  display: none;
  fill: none;
  stroke: var(--ds-border-focused);
  stroke-width: 3;
}
[data-mapa='nodo']:focus-visible [data-mapa='aro'] {
  display: inline;
}
[data-mapa='etiqueta'] {
  font: var(--ds-font-body-small);
  fill: var(--ds-text);
  /* Un halo del color del fondo: el nombre se lee aunque pase por encima de una arista. */
  stroke: var(--ds-surface-sunken);
  stroke-width: 4;
  paint-order: stroke;
}
[data-mapa='etiqueta'][data-actual='si'] {
  font: var(--ds-font-heading-xsmall);
}
/* En un mapa grande solo se rotulan unas pocas: el resto aparece al pasar el raton o al enfocar. */
[data-mapa='etiqueta'][data-oculta='si'] {
  display: none;
}
[data-mapa='nodo']:hover [data-mapa='etiqueta'][data-oculta='si'],
[data-mapa='nodo']:focus-visible [data-mapa='etiqueta'][data-oculta='si'] {
  display: inline;
}