/* Iconos del design system: ver static/js/ds-icons.template.js */
.ds-on::before, .ds-on::after { content: none !important; display: none !important; }
.ds-on { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: -0.15em; }
.ds-icon {
  width: 1.2em; height: 1.2em; flex-shrink: 0; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: var(--ds-sw, 1.6);
  stroke-linecap: round; stroke-linejoin: round;
}
.ds-icon use { pointer-events: none; }
/* Los logos traen su propio color y relleno */
.ds-icon.ds-marca { fill: initial; stroke: none; }
/* Iconos grandes (decorativos) con trazo mas fino */
.text-4xl .ds-icon, .text-5xl .ds-icon, .text-6xl .ds-icon, .ds-thin .ds-icon { --ds-sw: 1.2; }
/* Evita ver el glifo de FontAwesome mientras carga el script */
.ds-wait i[class*="fa-"]::before { visibility: hidden; }