/* ============================================================
   SIADME — Sistema de iconos (D-092)
   Material Symbols Outlined como set único.
   Importar este archivo DESPUÉS de tokens.css y components.css.
   ============================================================ */

/* Fuentes: TODAS servidas por el propio servidor (nada de fonts.googleapis.com).
   Ver el porqué y el detalle de cada una en fonts.css — en resumen: los iconos
   son ligaduras y, si la fuente no llegó, el navegador muestra la PALABRA
   ("event_available" cruzando la pantalla); y sin internet no llegan nunca, así
   que en una PC aislada TODO el sistema quedaba con texto en vez de iconos.
   El @import va primero de todo: es requisito de CSS. */
@import url('fonts.css');

/* Reset y configuración base del Material Symbols */
.material-symbols-outlined,
.icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  vertical-align: middle;
  user-select: none;

  /* Variable font: FILL, wght, GRAD, opsz */
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Tamaños estándar */
.icon { font-size: 20px; }      /* md (default) */
.icon--xs { font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.icon--sm { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.icon--lg { font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon--xl { font-size: 32px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
.icon--2xl { font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }

/* Variantes de peso (para énfasis) */
.icon--bold  { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.icon--thin  { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* Versión rellena (sólida) para estados activos */
.icon--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Asegurar alineación dentro de botones y navegación */
.btn .icon,
.btn .material-symbols-outlined {
  font-size: 18px;
  margin-right: 2px;
}
.btn--sm .icon,
.btn--sm .material-symbols-outlined {
  font-size: 16px;
}
.btn--lg .icon,
.btn--lg .material-symbols-outlined {
  font-size: 22px;
}
.btn--icon .icon,
.btn--icon .material-symbols-outlined {
  margin: 0;
  font-size: 20px;
}

.nav-item .icon,
.nav-item .material-symbols-outlined {
  font-size: 20px;
  flex-shrink: 0;
  color: inherit;
}

/* Para tarjetas, badges con icono */
.badge .icon,
.badge .material-symbols-outlined {
  font-size: 14px;
  margin-right: 2px;
}