/* =========================================================
   GLOW-ICONS.CSS — v1.0
   Efecto "trazo luminoso": un marco cuadrado-redondeado y el propio
   dibujo del ícono se iluminan/recorren con luz al pasar el mouse.
   100% CSS + SVG, sin dependencias, sin librerías de íconos externas.

   CÓMO FUNCIONA (resumen):
   - Cada ícono es un <span class="glow-icon"> con DOS SVG adentro:
       1) svg.marco  -> un cuadrado redondeado (dos <rect> superpuestos).
          El segundo rect (.trazo) arranca "escondido" con
          stroke-dasharray/stroke-dashoffset iguales, y al hacer
          hover se anima a stroke-dashoffset:0 -> se "dibuja" solo.
       2) svg.icono  -> el dibujo real del ícono (líneas estilo Lucide).
          SIEMPRE visible (a media opacidad) para que no se vea
          "apagado" en reposo; al hacer hover sube a opacidad completa
          y se le agrega un color + drop-shadow (el "glow").
   - El color de cada instancia se controla con la variable CSS --glow
     en el propio elemento (inline style), así cada botón puede tener
     su propio color sin duplicar CSS.

   PERSONALIZAR:
   - Cambia --glow-color-defecto abajo para el color por defecto.
   - El tamaño se controla con font-size en el elemento padre (todo
     usa unidades em, así que escala solo).
========================================================= */

:root{
  --glow-color-defecto: #2563EB; /* color de brillo si no se especifica --glow por instancia */
}

.glow-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.7em;
  height:1.7em;
  vertical-align:middle;
}

/* --- Marco (el cuadrado redondeado) --- */
.glow-icon svg.marco{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.glow-icon svg.marco rect{
  fill:none;
  stroke:rgba(120,120,140,.18); /* borde tenue visible en reposo */
  stroke-width:2;
}
.glow-icon svg.marco rect.trazo{
  stroke-dasharray:120; stroke-dashoffset:120; /* "escondido" al inicio */
  filter:drop-shadow(0 0 3px var(--glow, var(--glow-color-defecto)));
  transition:stroke-dashoffset .45s ease;
}
.glow-icon:hover svg.marco rect.trazo{
  stroke:var(--glow, var(--glow-color-defecto));
  stroke-dashoffset:0; /* se "dibuja" completo */
}

/* --- Ícono real (el dibujo de líneas) --- */
.glow-icon svg.icono{
  position:absolute; width:58%; height:58%;
  overflow:visible; pointer-events:none;
}
.glow-icon svg.icono .traza{
  fill:none;
  stroke:rgba(90,100,120,.75); /* color de reposo: visible, no apagado */
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dashoffset:0 !important; /* SIEMPRE dibujado (nunca invisible en reposo) */
  opacity:.6;
  transition:opacity .3s ease, stroke .3s ease, filter .3s ease;
}
.glow-icon:hover svg.icono .traza{
  opacity:1;
  stroke:var(--glow, var(--glow-color-defecto));
  filter:drop-shadow(0 0 3px var(--glow, var(--glow-color-defecto)));
}

/* Variante para íconos que van DENTRO de un botón de fondo oscuro/de
   color (ej. un botón "Guardar" azul sólido): agrega esta clase al
   botón contenedor para que el ícono se vea bien sin necesitar hover. */
.glow-icon-sobre-oscuro svg.icono .traza{
  stroke:rgba(255,255,255,.85);
  opacity:.85;
}

@media (prefers-reduced-motion: reduce){
  .glow-icon svg.marco rect.trazo,
  .glow-icon svg.icono .traza{ transition:none; }
}