/* ==========================================================
   CRM - ICONOS DE TRAZO

   Acompaña a js/iconos.js, que mete un SVG de Lucide adentro de
   cada `<i class="fa-...">`. Aca pasan dos cosas y nada mas:

     1. Se apaga el glifo de Font Awesome (`::before`) en los
        `<i>` ya convertidos —si no, se veria el icono viejo
        pegado al nuevo—. Los que NO se convirtieron (las marcas:
        WhatsApp, Spotify) conservan el suyo intacto.

     2. El SVG mide 1em y hereda `currentColor`. O sea: donde el
        CSS de siempre le daba tamaño con `font-size` y color con
        `color`, sigue funcionando igual. No hay ni un color
        propio de icono en todo el archivo, a proposito.

   Va despues de rendimiento.css, o sea ultimo de todos: apagar
   un `content` de una fuente de iconos necesita ganarle a la
   hoja de Font Awesome, que trae `!important` en varias reglas.
   ========================================================== */

i.ico::before,
i.ico::after {
    content: none !important;
}

i.ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Sin esto los iconos de trazo se ven mas chicos que los
       rellenos que reemplazan: la caja del glifo de Font Awesome
       era mas angosta que su dibujo. */
    width: 1em;
    height: 1em;
    /* Dentro de un flex —botones, celdas, tarjetas— la caja del
       icono se estiraba y el dibujo salia ovalado. */
    flex: 0 0 auto;
    aspect-ratio: 1;
    line-height: 1;
    vertical-align: -0.125em;
}

i.ico > svg {
    width: 100%;
    height: 100%;
    display: block;
    /* El trazo no se escala con el icono: a 2em se veria el doble
       de grueso que a 1em. Con esto un icono grande se ve mas
       liviano, que es como se dibujan los sets modernos. */
    vector-effect: non-scaling-stroke;
    overflow: visible;
}

/* Los botones redondos del pie del panel y de la barra de arriba
   piden un icono un punto mas grande: el trazo ocupa menos tinta
   que el relleno y al mismo tamaño se leia debil. */
html.nav-lateral body .lat-pie .btn-icon i.ico,
html.nav-lateral body .main-tabs .tab-btn i.ico {
    font-size: 1.12em;
}

/* Ningun icono con color propio: las tarjetas del tablero traian
   un ambar y un celeste fijos (`.icon-yellow`, `.icon-purple`) que
   no salian de ningun lado —no eran el acento elegido ni el gris
   del texto— y eran justo lo que hacia ver el tablero como una
   plantilla vieja. Pasan a seguir el acento, como los otros dos. */
html body .icon-yellow,
html body .icon-purple {
    background: rgba(var(--acento-rgb), 0.15) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(var(--acento-rgb), 0.3) !important;
}

/* La animacion de espera la traia Font Awesome sobre el `<i>`.
   Sigue sirviendo —gira la caja entera, con el SVG adentro— pero
   `fa-spin` depende de la variable de la fuente: se declara aca
   para no depender de ella. */
i.ico.fa-spin,
i.ico.fa-spinner {
    animation: ico-girar 1s linear infinite;
}

@keyframes ico-girar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    i.ico.fa-spin,
    i.ico.fa-spinner {
        animation-duration: 2.4s;
    }
}