/* =============================================================================
 * elevionis-icons.css — estilos de la familia de iconos propia de Elevionis
 * Acompaña a assets/js/core/ElevionisIcons.js (que inyecta los <svg>).
 * Solo alineación/sizing y tokens de acento; NO cambia layout ni navegación.
 * ========================================================================== */

/* SVG inyectado: hereda tamaño (1em) y color (currentColor) del <span> anfitrión,
   por lo que todas las reglas font-size/color existentes siguen aplicando. */
.evi-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  flex: 0 0 auto;
}

/* Acento de identidad: solo re-colorea el trazo del sub-elemento marcado.
   Por defecto = currentColor (monocromo, se adapta a cualquier contexto/color). */
.evi-icon .evi-accent {
  stroke: var(--evi-icon-accent, currentColor);
}

/* El <span.material-symbols-outlined> tenía overflow:hidden pensado para el glifo
   de la fuente; con el SVG lo relajamos para no recortarlo. */
.material-symbols-outlined[data-evi] {
  overflow: visible;
}

/* Student glyph hosts contain SVGs, not font baselines. Preserve each badge's
   own dimensions, padding, radius and color while centering its actual icon. */
.student-shell .material-symbols-outlined[data-evi] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.student-shell .material-symbols-outlined[data-evi] > .evi-icon {
  display: block;
  max-width: 100%;
  max-height: 100%;
  vertical-align: 0;
}
/* These existing padded badges need a glyph-sized content box. The universal
   border-box reset otherwise consumes their entire width with padding. */
.student-shell :is(.quick-action-card .icon, .class-info-item .icon-label) {
  box-sizing: content-box;
}

/* --- Acento violeta de Elevionis en la NAVEGACIÓN (Light Mode) -------------
   Reproduce las referencias aprobadas: el acento (flecha de Progreso, chevron de
   Aula, etc.) se ve violeta incluso en estado inactivo. Fuera de navegación el
   acento queda en currentColor para no chocar con iconos de estado (verde/rojo). */
.sidebar-nav .evi-icon,
.teacher-nav-tab .evi-icon,
.nav-btn .evi-icon,
.mobile-bottom-nav .evi-icon,
.sidebar-bell .evi-icon,
.topbar-icon.evi-icon,
.qa-tile .evi-icon {
  --evi-icon-accent: #7C3AED;
}

/* Dark Mode: misma geometría, violeta más claro para contraste. */
[data-theme="dark"] .sidebar-nav .evi-icon,
[data-theme="dark"] .teacher-nav-tab .evi-icon,
[data-theme="dark"] .nav-btn .evi-icon,
[data-theme="dark"] .mobile-bottom-nav .evi-icon,
[data-theme="dark"] .sidebar-bell .evi-icon,
[data-theme="dark"] .topbar-icon.evi-icon,
[data-theme="dark"] .qa-tile .evi-icon {
  --evi-icon-accent: #A78BFA;
}

/* Iconos animados por rotación (refresh/sync/progress) siguen girando: el <span>
   rota y el <svg> hijo con él. Si el proyecto usa keyframes sobre el span, no se
   requiere nada extra. */