/* Iconos Phosphor en la marca (tarea 2.16, RB.4; manual, sección 9).

   `<i class="ph ph-user"></i>`: el icono acompaña al texto, a su tamaño y en
   su color. Estas utilidades sustituyen a los modificadores de Font Awesome
   que usaban las plantillas (fa-sm, fa-lg, fa-2x… y fa-spin); la equivalencia
   la aplica scripts/iconos_phosphor.py. */

.ph {
  vertical-align: -0.125em;
}

.lb-icono-sm { font-size: 0.875em; }
.lb-icono-lg { font-size: 1.333em; }
.lb-icono-2x { font-size: 2em; }
.lb-icono-3x { font-size: 3em; }
.lb-icono-4x { font-size: 4em; }
.lb-icono-5x { font-size: 5em; }

.lb-icono-gira {
  animation: lb-icono-gira 1s linear infinite;
}

@keyframes lb-icono-gira {
  to { transform: rotate(360deg); }
}

/* Sección 11.3: sin movimiento, el indicador de carga se queda quieto */
@media (prefers-reduced-motion: reduce) {
  .lb-icono-gira { animation: none; }
}