/* Íconos propios (js/icono.js). Un color —el del texto donde van— y cuatro tamaños. */
.ico {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon-md);
  height: var(--icon-md);
  vertical-align: -0.17em;      /* asienta el ícono en la línea del texto */
  stroke-width: 2;
}
.ico-sm { width: var(--icon-sm); height: var(--icon-sm); }
.ico-md { width: var(--icon-md); height: var(--icon-md); }
.ico-lg { width: var(--icon-lg); height: var(--icon-lg); }
.ico-xl { width: var(--icon-xl); height: var(--icon-xl); }
/* En tamaños chicos el trazo de 2 empasta; en grandes queda flaco. */
.ico-sm { stroke-width: 2.25; }
.ico-xl { stroke-width: 1.75; }
/* Acompaña a la letra donde va, como hacía el emoji que reemplaza. */
.ico-txt { width: 1.15em; height: 1.15em; }

/* Punto de estado: reemplaza a los círculos de color en emoji (🟢🟡🔴⚪), que cada teléfono pinta
   distinto. Toma los colores del tema. <span class="punto punto-ok"></span> */
.punto { display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-right: .35em; vertical-align: .04em; background: currentColor; }
.punto-ok { background: var(--color-success); }
.punto-aviso { background: var(--color-warning); }
.punto-mal { background: var(--color-danger); }
.punto-neutro { background: var(--color-text-muted); opacity: .6; }