/* ==========================================================================
   Sistema de iconos self-hosted — sprite en /assets/icons.svg
   Reemplaza Font Awesome (que se cargaba desde cdnjs).
   Iconos UI: set Solar. Marcas: mdi/ri/ic. Banderas: circle-flags.
   ========================================================================== */

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;   /* alineación óptica con el texto, como FA */
  fill: currentColor;          /* hereda el color del texto */
  flex-shrink: 0;
}

/* Banderas redondas (circle-flags) — a todo color, no heredan currentColor */
.flag {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.2em;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

/* En RTL (árabe) las flechas y chevrons horizontales se reflejan */
[dir="rtl"] .ic-arrow-right,
[dir="rtl"] .ic-arrow-right-long,
[dir="rtl"] .ic-arrow-left,
[dir="rtl"] .ic-chevron-right {
  transform: scaleX(-1);
}