/**
 * assets/css/iconos.css
 * Íconos SVG por tipo de negocio (Phosphor Icons, duotone, licencia MIT).
 * Se pintan con mask-image + currentColor: heredan el color del texto.
 *
 * Uso:
 *   <span class="ico ico-barberia" aria-hidden="true"></span>   → ícono fijo
 *   <span class="ico ico-negocio"  aria-hidden="true"></span>   → ícono del tipo de
 *       negocio actual; requiere <body data-tipo="barberia|salon|spa|estetica|consultorio|otro">
 *   <span class="ico ico-profesional" aria-hidden="true"></span> → persona (genérico)
 *
 * Tamaño: 1em por defecto; ajustar con font-size en el contenedor o en .ico.
 *
 * @package Reservemos
 * @version 4.0.0
 */

.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}

/* Ícono fijo por tipo */
.ico-barberia    { --ico: url('../img/tipos/barberia.svg'); }
.ico-salon       { --ico: url('../img/tipos/salon.svg'); }
.ico-spa         { --ico: url('../img/tipos/spa.svg'); }
.ico-estetica    { --ico: url('../img/tipos/estetica.svg'); }
.ico-consultorio { --ico: url('../img/tipos/consultorio.svg'); }
.ico-otro        { --ico: url('../img/tipos/otro.svg'); }
.ico-profesional { --ico: url('../img/tipos/profesional.svg'); }

/* Ícono del negocio actual (según body[data-tipo]); "otro" si no hay tipo */
.ico-negocio                            { --ico: url('../img/tipos/otro.svg'); }
body[data-tipo="barberia"]    .ico-negocio { --ico: url('../img/tipos/barberia.svg'); }
body[data-tipo="salon"]       .ico-negocio { --ico: url('../img/tipos/salon.svg'); }
body[data-tipo="spa"]         .ico-negocio { --ico: url('../img/tipos/spa.svg'); }
body[data-tipo="estetica"]    .ico-negocio { --ico: url('../img/tipos/estetica.svg'); }
body[data-tipo="consultorio"] .ico-negocio { --ico: url('../img/tipos/consultorio.svg'); }
body[data-tipo="otro"]        .ico-negocio { --ico: url('../img/tipos/otro.svg'); }

/* Íconos complementarios (landing, beneficios, segmentos) */
.ico-unas    { --ico: url('../img/iconos/unas.svg'); }
.ico-paw     { --ico: url('../img/iconos/paw.svg'); }
.ico-facial  { --ico: url('../img/iconos/facial.svg'); }
.ico-mente   { --ico: url('../img/iconos/mente.svg'); }
.ico-fitness { --ico: url('../img/iconos/fitness.svg'); }
.ico-tatuaje { --ico: url('../img/iconos/tatuaje.svg'); }
.ico-mas     { --ico: url('../img/iconos/mas.svg'); }
.ico-agenda  { --ico: url('../img/iconos/agenda.svg'); }
.ico-equipo  { --ico: url('../img/iconos/equipo.svg'); }
.ico-stats   { --ico: url('../img/iconos/stats.svg'); }
.ico-enlace  { --ico: url('../img/iconos/enlace.svg'); }
.ico-correo  { --ico: url('../img/iconos/correo.svg'); }
.ico-chat    { --ico: url('../img/iconos/chat.svg'); }

/* Contacto y redes (reserva pública) */
.ico-instagram { --ico: url('../img/iconos/instagram-logo.svg'); }
.ico-whatsapp  { --ico: url('../img/iconos/whatsapp-logo.svg'); }
.ico-mapa      { --ico: url('../img/iconos/map-pin.svg'); }
.ico-telefono  { --ico: url('../img/iconos/phone.svg'); }
.ico-reloj     { --ico: url('../img/iconos/clock.svg'); }
.ico-info      { --ico: url('../img/iconos/info.svg'); }
.ico-check     { --ico: url('../img/iconos/check-circle.svg'); }
.ico-estrella  { --ico: url('../img/iconos/star.svg'); }