/* ============================================================
   Sistema de íconos — eneuve.net
   Requiere que iconos-sprite.svg esté inyectado en el documento.
   ============================================================ */

:root {
  --ic-acento: #3B82F6;   /* azul de marca */
  --ic-cara-alta: #1B1F29;
  --ic-cara-baja: #080A0F;
}

/* --- Glifo suelto: botones, toolbars, tablas, chips --------- */
.ic {
  width: var(--ic-tam, 20px);
  height: var(--ic-tam, 20px);
  flex: none;
  color: currentColor;          /* hereda el color del texto */
  vertical-align: -0.15em;
}

/* Trazo más fino a tamaños grandes para mantener el peso óptico */
.ic[style*="--ic-tam: 3"],
.ic[style*="--ic-tam: 4"] { stroke-width: 1.75; }

/* --- Badge: sidebar, tarjetas de sección, dashboard --------- */
.ic-badge {
  --ic-caja: 64px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--ic-caja);
  height: var(--ic-caja);
  border-radius: 28%;
  background: linear-gradient(180deg, var(--ic-cara-alta), var(--ic-cara-baja));
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.09),
    0 0 0 1.5px color-mix(in srgb, var(--ic-acento) 75%, transparent),
    0 0 16px -2px var(--ic-acento),
    0 0 42px -8px var(--ic-acento),
    0 8px 22px -6px rgba(0, 0, 0, 0.85);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.ic-badge .ic {
  --ic-tam: calc(var(--ic-caja) * 0.46);
  stroke: url(#ic-grad);        /* degradado blanco → azul pálido */
  stroke-width: 2.05;
}

.ic-badge:hover,
a:hover > .ic-badge,
button:hover > .ic-badge {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    0 0 0 1.5px var(--ic-acento),
    0 0 22px -1px var(--ic-acento),
    0 0 56px -6px var(--ic-acento),
    0 10px 26px -6px rgba(0, 0, 0, 0.85);
}

/* Elemento activo del sidebar */
.ic-badge[aria-current="page"],
.ic-badge.is-activo {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
    0 0 0 2px var(--ic-acento),
    0 0 26px 0 var(--ic-acento),
    0 0 64px -4px var(--ic-acento);
}

/* --- Tema mono (blanco y negro, estilo eneuve.net) ---------- */
.tema-mono,
.ic-badge--mono { --ic-acento: #A8B2C4; }
.ic-badge--mono .ic { stroke: url(#ic-grad-mono); }

/* --- Tamaños ------------------------------------------------ */
.ic-badge--sm { --ic-caja: 44px; }
.ic-badge--md { --ic-caja: 64px; }
.ic-badge--lg { --ic-caja: 88px; }

/* --- Estados de cuenta: un solo glifo, color por modificador - */
.ic--activo   { color: #22C55E; }
.ic--caido    { color: #EF4444; }
.ic--inactivo { color: #6B7280; }
.ic--aviso    { color: #F59E0B; }
.ic--ok       { color: #22C55E; }

@media (prefers-reduced-motion: reduce) {
  .ic-badge { transition: none; }
  .ic-badge:hover { transform: none; }
}