/* ÍCONOS DE SAAVY (img/icons.svg). Se cargan en todas las páginas.
   <svg class="si"><use href="/static/img/icons.svg#nombre"/></svg>
   .si suelto  = ícono de línea del color del texto (en botones, pestañas y filas).
   .si-tile    = baldosa gris con la silueta en blanco (encabezados, listas, tarjetas, menús).
   Regla: nunca emojis en botones, menús ni encabezados. */
:root { --si-bg: #8e8e93; }
.si { display: inline-block; width: 1.15em; height: 1.15em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.si-tile { display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--si-bg); color: #fff; }
.si-tile > .si { width: 18px; height: 18px; vertical-align: 0; }
.si-tile.sm { width: 22px; height: 22px; border-radius: 6px; } .si-tile.sm > .si { width: 13px; height: 13px; }
.si-tile.lg { width: 44px; height: 44px; border-radius: 11px; } .si-tile.lg > .si { width: 25px; height: 25px; }
.si-tile.xl { width: 58px; height: 58px; border-radius: 14px; } .si-tile.xl > .si { width: 32px; height: 32px; }
.si-tile.dark { background: #111114; }
.si-tile.light { background: rgba(118, 118, 128, .14); color: #3c3c43; }
.btn .si, .pill .si, button .si { width: 15px; height: 15px; vertical-align: -3px; }
.btn > .si:first-child { margin-right: .4em; }
.btn.icon-only > .si { margin: 0; }