/* Base das iconas de Solar Broken Line que van en liña (ver Resources/views/iconos/_ico.html.twig).
   O envoltorio é o que manda: o SVG de dentro mide 1em, así que basta con cambiarlle o
   font-size ao .ico para redimensionala, exactamente igual que se facía co glyphicon.
   A cor non hai que dicila: o trazo é currentColor e colle a do texto ou a do botón. */
.ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -.125em;   /* asenta a icona na liña de base do texto, coma unha letra */

    /* CHAN DE 15px, e non é capricho. O trazo de Solar é de 1.5 sobre unha rexilla de 24,
       así que nunha icona de 12px o trazo mide 0,75px: medio píxel, que o navegador pinta
       en gris e fai que a icona se vexa máis feble ca o texto que acompaña. Os glyphicons
       de antes eran formas macizas e non lles pasaba. Comprobado debuxando as mesmas
       iconas de 12 a 17px: por debaixo de 15 desfánse, e as frechas case desaparecen.
       A primeira liña é para un navegador que non entenda max(); aí queda o chan fixo. */
    font-size: 15px;
    font-size: max(1em, 15px);
}
.ico > svg { display: block; width: 1em; height: 1em; }

/* DENTRO DUN BOTÓN manda a proporción, non o chan.
   Estes botóns teñen line-height: 1, así que calquera icona máis alta ca a letra estira o
   botón: «Asignar alumnado» medía 32.3px e «Crear grupo», que non ten icona, 29.2px. Tres
   píxeles por botón, en toda a aplicación. Dentro dun botón a icona mide o mesmo có texto e
   así os dous botóns son iguais; se fai falta unha icona grande porque o botón non ten
   texto, pídese coa clase `ico-lg` de abaixo. */
.btn .ico:not(.ico-lg),
button .ico:not(.ico-lg) {
    /* A icona mide o MESMO CA O TEXTO do botón. Probáronse outras dúas vías e as dúas
       deron problemas:
        · deixarlle o chan de 15px facía o botón 3px máis alto ca un sen icona
          («Asignar alumnado» 32.3 fronte a «Crear grupo» 29.2), en toda a aplicación;
        · darlle unha caixa de alto cero para que non estirase arranxaba iso pero
          desaliñaba a icona nos botóns `display: block` («Tramitación de solicitudes»,
          «Baremación»), onde colgaba 6px por debaixo.
       Igualando ao texto, o botón mide o mesmo con icona e sen ela, e a icona aliñase soa
       en flex e en block. Se o botón non ten texto, a icona é o control: `ico-lg`. */
    font-size: 1em;
}

/* Para un botón que é SÓ a icona, sen texto ao lado: alí a icona non acompaña, é o control
   enteiro, e a 15px pérdese dentro do botón. Úsase por exemplo nas frechas de mes.
   (Non hai un `.ico-sm`: por debaixo de 15px estas iconas non se len, así que dar unha clase
   para empequenecelas sería poñer unha trampa.) */
.ico-lg { font-size: 20px; }

/* Cores de estado. sdweb.css dáballas antes en toda a aplicación ás clases
   `glyphicon-ok-circle` (verde) e `glyphicon-ban-circle` (vermello), porque a icona levaba
   o seu nome na clase. Agora non o leva, así que a cor pídese onde significaba algo.
   Onde a cor xa vén do botón ou da etiqueta que a rodea, non fai falta nada. */
.ico-ok     { color: var(--success, #78c842); }
/* Azul da casa, para cando a icona ten que destacar sobre un texto que non é del
   (nas listas dos modais o texto é #333 e a icona ía en #2c3862 posto a man). */
.ico-primario { color: var(--primario, #2c3862); }
.ico-perigo { color: var(--danger, #dd141b); }

/* Iconas postas desde JavaScript (ver web/js/iconos.js e o guión que o xera).
   Alí non hai macro de Twig, así que estas dúas clases fan o que antes facía Font Awesome. */

/* Substitúe a `fa-spin`: o debuxo é a frecha circular de `recargar`, xirando. */
.ico-xira > svg { animation: ico-xirar 1.4s linear infinite; }
@keyframes ico-xirar { to { transform: rotate(360deg); } }
/* Quen prefire non ver animacións queda coa frecha quieta, que se le igual. */
@media (prefers-reduced-motion: reduce) { .ico-xira > svg { animation: none; } }

/* Substitúe o `style="margin-right:8px"` que ían metendo a man nos modais. */
.ico-marxe { margin-right: 8px; }