/* ═══════════════════ LOS ICONOS DE MUEBLA ═══════════════════
   Se enlaza en TODAS las páginas:  <link rel="stylesheet" href="/iconos.css" />

   Y hay que enlazarlo de verdad, no dar por hecho que va con muebla-ui.css: la
   PORTADA no enlaza esa hoja. Tiene su propia copia de la barra y del menú, y
   ya se quedó una vez sin las reglas del menú lateral por eso mismo. Una
   página que use un icono sin enlazar este fichero no da ningún error: el
   icono simplemente no se dibuja y queda un hueco. Lo vigila
   pruebas/iconos.js.

   POR QUÉ EXISTE
   La barra de arriba usaba emoji: 🔍 para buscar y 🔔 para los avisos. Un emoji
   no es un icono — lo dibuja el sistema operativo, no nosotros. En un iPhone la
   lupa sale azul con el mango gris y la campana amarilla chillón, en Android
   son otros dibujos distintos, y en un Windows viejo puede salir un cuadrado.
   Al lado del logo, que es tipografía fina y marrón, cantan muchísimo.

   Fede lo vio comparando con sklum.com: lupa, persona, bolsa y marcador, todos
   del mismo trazo fino y del mismo color que el texto. Eso es lo que se hace
   aquí.

   CÓMO FUNCIONA
   Cada icono es un dibujo (SVG) metido en el propio CSS y usado como RECORTE
   (`mask`), no como imagen. La diferencia importa: al recortar, el color lo
   pone `background-color: currentColor`, así que el icono se pinta del mismo
   color que el texto que lo rodea y cambia solo al pasar el ratón o al estar
   activo. Con una imagen normal habría que tener una copia por cada color.

   CÓMO SE USA
       <span class="ic ic-lupa"></span>
       <span class="ic ic-corazon ic-20"></span>

   Los tamaños van en pasos: ic-16, ic-18, ic-20 (por defecto), ic-22, ic-24.

   AL AÑADIR UN ICONO NUEVO
   Que tenga el mismo trazo que los demás: lienzo de 24, `stroke-width` 1.5 y
   las puntas redondeadas. Un icono con trazo distinto se nota aunque no se
   sepa por qué. Y el `#` del color va escrito `%23`: dentro de un `url()` una
   almohadilla parte la dirección y el icono desaparece sin dar ningún error.
   ═══════════════════════════════════════════════════════════ */

.ic {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: -4px;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}

/* Tamaños */
.ic-16 { width: 16px; height: 16px; vertical-align: -3px; }
.ic-18 { width: 18px; height: 18px; vertical-align: -3.5px; }
.ic-20 { width: 20px; height: 20px; vertical-align: -4px; }
.ic-22 { width: 22px; height: 22px; vertical-align: -5px; }
.ic-24 { width: 24px; height: 24px; vertical-align: -5px; }

/* Dentro de un botón cuadrado no hay texto con el que alinearse. */
.ic-centrado { vertical-align: middle; }

/* Los corazones viven en botones redondos de tamaños muy distintos: 28 px en
   una tarjeta pequeña, 42 px sobre la foto grande del anuncio. Antes eran una
   letra y se ajustaban con `font-size`, que aquí ya no hace nada. */
.card-fav .ic, .card-fav-sm .ic, .fav-del .ic { width: 15px; height: 15px; }
.gallery-fav .ic { width: 20px; height: 20px; }
@media (max-width: 760px) {
  /* En el móvil estos botones crecen para poder tocarlos con el dedo. */
  .card-fav .ic { width: 18px; height: 18px; }
}

/* ─── Buscar ─── */
.ic-lupa {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.6 16.6 21 21'/%3E%3C/svg%3E");
}

/* ─── Persona: iniciar sesión y «mi perfil» ─── */
.ic-persona {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c0-4.1 3.4-6.6 7.5-6.6s7.5 2.5 7.5 6.6'/%3E%3C/svg%3E");
}

/* ─── Favoritos ─── */
.ic-corazon {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21.2l7.8-7.7 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}
/* El mismo, relleno: es el «ya está guardado». */
.ic-corazon-lleno {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21.2l7.8-7.7 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

/* ─── Avisos ─── */
.ic-campana {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8.5a6 6 0 0 0-12 0c0 6.5-2.5 8.5-2.5 8.5h17S18 15 18 8.5'/%3E%3Cpath d='M13.7 20.5a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
}

/* ─── Mensajes ─── */
.ic-mensaje {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8 8 0 0 1-11.7 7.1L3.5 20.5l1.9-5.3A8 8 0 1 1 20.5 11.5z'/%3E%3C/svg%3E");
}

/* ─── Bolsa: pedidos y compras ─── */
.ic-bolsa {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5 4 6.5v13a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-13l-2.5-4z'/%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M15.5 10.5a3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E");
}

/* ─── Marcador: guardado para después ─── */
.ic-marcador {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21.5 12 16.5 5 21.5V4.5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* ─── Vender: publicar un mueble ─── */
.ic-mas {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ─── Cerrar ─── */
.ic-cerrar {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* ─── La tienda ─── */
.ic-tienda {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5V20a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5V9.5'/%3E%3Cpath d='M2.5 9.5 5 3.5h14l2.5 6a3 3 0 0 1-5 2 3 3 0 0 1-4.5 0 3 3 0 0 1-4.5 0 3 3 0 0 1-5-2z'/%3E%3C/svg%3E");
}