/* Íconos propios de la marca: trazo fino y redondeado, dibujados a mano en comun/iconos/*.svg (sin librerías ni fuentes de otros sitios).
   Se pintan con el color del texto (máscara + currentColor) y son SOLO decorativos: el botón o el aviso siempre dice lo mismo con palabras.
   Se ponen con CSS (::before) para no tocar el código de las páginas. */

/* 1) Forma común de todos los íconos */
#tab-inicio::before, #tab-pendientes::before, #tab-proximos::before, #tab-agenda::before, #tab-miagenda::before, #tab-espera::before,
#salir::before, #login-enviar::before, .tarjeta > .principal::before, #revisar::before, #confirmar::before, #corregir::before,
#vista-asignar #rechazar::before, .botones .peligro::before, .botones .secundario::before,
#enviar::before, #aceptar::before, #pregunta #rechazar::before,
.error::before, .aviso::before, .urgencia::before, .listo h2::before, #resultado-texto::before {
  content: ""; display: inline-block; flex: none;
  width: 1.2em; height: 1.2em; margin-right: 0.5em; vertical-align: -0.22em;
  background-color: var(--color-icono, currentColor);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}

/* Pestañas del panel: el ícono va arriba del texto (como la barra inferior del diseño) */
#tab-inicio::before, #tab-pendientes::before, #tab-proximos::before, #tab-agenda::before, #tab-miagenda::before, #tab-espera::before {
  display: block; margin: 0 auto 0.2rem; width: 1.4em; height: 1.4em; vertical-align: baseline;
}

/* 2) Qué ícono va en cada lugar */
#tab-inicio { --ico: url("iconos/casa.svg"); }
#tab-pendientes { --ico: url("iconos/bandeja.svg"); }
#tab-proximos { --ico: url("iconos/calendario-check.svg"); }
#tab-agenda { --ico: url("iconos/calendario.svg"); }
#tab-miagenda { --ico: url("iconos/ajustes.svg"); }
#tab-espera { --ico: url("iconos/reloj-arena.svg"); }
#salir { --ico: url("iconos/salir.svg"); }
#login-enviar { --ico: url("iconos/entrar.svg"); }
.tarjeta > .principal { --ico: url("iconos/calendario-mas.svg"); }
#revisar { --ico: url("iconos/tablero-check.svg"); }
#confirmar, #aceptar { --ico: url("iconos/check.svg"); }
#corregir, #pregunta #rechazar { --ico: url("iconos/flecha-izq.svg"); }
#vista-asignar #rechazar, .botones .peligro { --ico: url("iconos/x.svg"); }
.botones .secundario { --ico: url("iconos/reloj-arena.svg"); }
#enviar { --ico: url("iconos/enviar.svg"); }

/* Avisos: el ícono lleva el color del estado */
.error { --ico: url("iconos/alerta-circulo.svg"); --color-icono: var(--color-error); }
.aviso { --ico: url("iconos/check-circulo.svg"); --color-icono: var(--color-ok); }
.urgencia { --ico: url("iconos/alerta.svg"); --color-icono: var(--color-aviso-borde); }
.listo h2, #resultado-texto { --ico: url("iconos/check-circulo.svg"); --color-icono: var(--color-ok); }
#resultado-texto::before { width: 1.5em; height: 1.5em; vertical-align: -0.35em; }
.listo h2::before { width: 1.3em; height: 1.3em; vertical-align: -0.3em; }

/* Íconos sueltos para la página de inicio y otros textos: <span class="ico ico-reloj"></span> */
.ico::before {
  content: ""; display: inline-block; flex: none; width: 1.3em; height: 1.3em; vertical-align: -0.28em;
  background-color: var(--color-icono, currentColor);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico-reloj { --ico: url("iconos/reloj.svg"); }
.ico-campana { --ico: url("iconos/campana.svg"); }
.ico-mail { --ico: url("iconos/mail.svg"); }
.ico-espera { --ico: url("iconos/reloj-arena.svg"); }
.ico-calendario { --ico: url("iconos/calendario.svg"); }
.ico-check { --ico: url("iconos/check-circulo.svg"); }
.ico-ubicacion { --ico: url("iconos/ubicacion.svg"); }
.ico-telefono { --ico: url("iconos/telefono.svg"); }
.ico-chat { --ico: url("iconos/chat.svg"); }
.ico-persona { --ico: url("iconos/persona.svg"); }
.ico-escudo { --ico: url("iconos/escudo.svg"); }
.ico-enviar { --ico: url("iconos/enviar.svg"); }
.ico-tablero { --ico: url("iconos/tablero-check.svg"); }
.ico-birrete { --ico: url("iconos/birrete.svg"); }
.ico-personas { --ico: url("iconos/personas.svg"); }
.ico-maletin { --ico: url("iconos/maletin.svg"); }