/* ==========================================================================
   ft-icons.css — helpers para el sprite ft-icons.svg
   Fichero NUEVO. No toca styles.css. Se enlaza asi, DESPUES de styles.css:

     <link rel="stylesheet" href="/ft-icons.css">

   Nada de CDN: el sprite y este CSS viven en el proyecto.
   ========================================================================== */

/* Base. A proposito NO fija fill ni stroke: cada <symbol> del sprite ya trae
   los suyos (los de trazo van fill:none/stroke:currentColor, el de WhatsApp va
   relleno). Aqui solo se controla tamano y color heredado. */
.ft-i {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;   /* alinea con la linea base del texto */
  flex: none;               /* no se aplasta dentro de un flex container */
  color: inherit;           /* currentColor: el icono toma el color del texto */
}

/* Tamanos fijos, para rejillas de tarjetas y cabeceras */
.ft-i--sm { width: 1rem;    height: 1rem; }
.ft-i--md { width: 1.5rem;  height: 1.5rem; }
.ft-i--lg { width: 2rem;    height: 2rem; }
.ft-i--xl { width: 2.5rem;  height: 2.5rem; }

/* Trazo alternativo cuando el icono se ve muy fino (tamanos grandes) o muy
   basto (tamanos pequenos). El sprite viene a 1.5 por defecto. */
.ft-i--thin   { stroke-width: 1.25; }
.ft-i--bold   { stroke-width: 2; }

/* Icono dentro de una "pastilla" cuadrada, tipico de tarjeta de servicio */
.ft-i-badge {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.ft-i-badge .ft-i { width: 1.375rem; height: 1.375rem; vertical-align: 0; }

/* --------------------------------------------------------------------------
   Movimiento: SIEMPRE por defecto quieto, y solo se activa si el usuario no ha
   pedido reducir movimiento. Asi nada se mueve sin permiso.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* flecha que avanza al pasar por encima del enlace/boton que la contiene */
  .ft-i--nudge {
    transition: transform 180ms ease;
  }
  a:hover > .ft-i--nudge,
  a:focus-visible > .ft-i--nudge,
  button:hover > .ft-i--nudge,
  button:focus-visible > .ft-i--nudge,
  .btn:hover .ft-i--nudge,
  .btn:focus-visible .ft-i--nudge {
    transform: translateX(3px);
  }

  /* engranaje girando: solo para estados de "procesando" */
  .ft-i--spin { animation: ft-i-spin 1.6s linear infinite; }
  @keyframes ft-i-spin { to { transform: rotate(360deg); } }
}