/* ==========================================================================
   TPD ICON SYSTEM
   Técnica: mask-image + background-color para colorear mediante variable CSS.
   Uso: <i class="tpd-icons tpd-icons-[nombre] tpd-icons-color-white"></i>
   Color por defecto: --tpd-color-primary (navy).
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE CLASS
   -------------------------------------------------------------------------- */
.tpd-icons {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--tpd-icon-color, var(--tpd-color-primary));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   MODIFICADORES DE COLOR
   Aplica la clase junto a .tpd-icons para cambiar el color del icono.
   Ejemplo: <i class="tpd-icons tpd-icons-search tpd-icons-color-white"></i>
   -------------------------------------------------------------------------- */
.tpd-icons-color-primary   { --tpd-icon-color: var(--tpd-color-primary); }
.tpd-icons-color-secondary { --tpd-icon-color: var(--tpd-color-secondary); }
.tpd-icons-color-white     { --tpd-icon-color: var(--tpd-color-white); }
.tpd-icons-color-black     { --tpd-icon-color: var(--tpd-color-black); }
.tpd-icons-color-eco       { --tpd-icon-color: var(--tpd-color-eco); }

/* --------------------------------------------------------------------------
   MODIFICADORES DE TAMAÑO
   -------------------------------------------------------------------------- */
.tpd-icons-xs { width: 12px; height: 12px; }
.tpd-icons-sm { width: 16px; height: 16px; }
.tpd-icons-md { width: 24px; height: 24px; }
.tpd-icons-lg { width: 32px; height: 32px; }
.tpd-icons-xl { width: 40px; height: 40px; }

/* ==========================================================================
   ICONOS DESDE assets/img/icons/
   PRIORIDAD: estos sobrescriben cualquier heroicon con el mismo nombre.
   ========================================================================== */

.tpd-icons-100-noches-desktop {
    -webkit-mask-image: url('../img/icons/100-noches-desktop.svg');
    mask-image: url('../img/icons/100-noches-desktop.svg');
}
.tpd-icons-address-book {
    -webkit-mask-image: url('../img/icons/address-book.svg');
    mask-image: url('../img/icons/address-book.svg');
}
.tpd-icons-all-invoice {
    -webkit-mask-image: url('../img/icons/all-invoice.svg');
    mask-image: url('../img/icons/all-invoice.svg');
}
.tpd-icons-bolsa-desktop-nav {
    -webkit-mask-image: url('../img/icons/bolsa-desktop-nav.svg');
    mask-image: url('../img/icons/bolsa-desktop-nav.svg');
}
.tpd-icons-check-black {
    -webkit-mask-image: url('../img/icons/check-black.svg');
    mask-image: url('../img/icons/check-black.svg');
}
.tpd-icons-check-blue {
    -webkit-mask-image: url('../img/icons/check-blue.svg');
    mask-image: url('../img/icons/check-blue.svg');
}
.tpd-icons-check-darkblue {
    -webkit-mask-image: url('../img/icons/check-darkblue.svg');
    mask-image: url('../img/icons/check-darkblue.svg');
}
.tpd-icons-check-white {
    -webkit-mask-image: url('../img/icons/check-white.svg');
    mask-image: url('../img/icons/check-white.svg');
}
.tpd-icons-coupon {
    -webkit-mask-image: url('../img/icons/coupon.svg');
    mask-image: url('../img/icons/coupon.svg');
}
.tpd-icons-email-alert {
    -webkit-mask-image: url('../img/icons/email-alert.svg');
    mask-image: url('../img/icons/email-alert.svg');
}
.tpd-icons-envio-desktop {
    -webkit-mask-image: url('../img/icons/envio-desktop.svg');
    mask-image: url('../img/icons/envio-desktop.svg');
}
.tpd-icons-fabrica-desktop {
    -webkit-mask-image: url('../img/icons/fabrica-desktop.svg');
    mask-image: url('../img/icons/fabrica-desktop.svg');
}
.tpd-icons-garantia-desktop {
    -webkit-mask-image: url('../img/icons/garantia-desktop.svg');
    mask-image: url('../img/icons/garantia-desktop.svg');
}
.tpd-icons-hamburguesa-movil-nav {
    -webkit-mask-image: url('../img/icons/hamburguesa-movil-nav.svg');
    mask-image: url('../img/icons/hamburguesa-movil-nav.svg');
}
.tpd-icons-icono-lupa-desktop-nav {
    -webkit-mask-image: url('../img/icons/icono-lupa-blanco-desktop-nav.svg');
    mask-image: url('../img/icons/icono-lupa-blanco-desktop-nav.svg');
}
.tpd-icons-icono-lupa-movil-nav {
    -webkit-mask-image: url('../img/icons/icono-lupa-blanco-movil-nav.svg');
    mask-image: url('../img/icons/icono-lupa-blanco-movil-nav.svg');
}
.tpd-icons-icono-telefono-desktop-nav {
    -webkit-mask-image: url('../img/icons/icono-telefono-blanco-desktop-nav.svg');
    mask-image: url('../img/icons/icono-telefono-blanco-desktop-nav.svg');
}
.tpd-icons-invoice {
    -webkit-mask-image: url('../img/icons/invoice.svg');
    mask-image: url('../img/icons/invoice.svg');
}
.tpd-icons-log-in-desktop-nav {
    -webkit-mask-image: url('../img/icons/log-in-desktop-nav.svg');
    mask-image: url('../img/icons/log-in-desktop-nav.svg');
}
.tpd-icons-log-in-menu-movil {
    -webkit-mask-image: url('../img/icons/log-in-menu-movil.svg');
    mask-image: url('../img/icons/log-in-menu-movil.svg');
}
.tpd-icons-montaje-desktop {
    -webkit-mask-image: url('../img/icons/montaje-desktop.svg');
    mask-image: url('../img/icons/montaje-desktop.svg');
}
.tpd-icons-order-slips {
    -webkit-mask-image: url('../img/icons/order-slips.svg');
    mask-image: url('../img/icons/order-slips.svg');
}
.tpd-icons-orders-history {
    -webkit-mask-image: url('../img/icons/orders-history.svg');
    mask-image: url('../img/icons/orders-history.svg');
}
.tpd-icons-personal-data {
    -webkit-mask-image: url('../img/icons/personal-data.svg');
    mask-image: url('../img/icons/personal-data.svg');
}
.tpd-icons-personal-data-2 {
    -webkit-mask-image: url('../img/icons/personal-data-2.svg');
    mask-image: url('../img/icons/personal-data-2.svg');
}
.tpd-icons-search-filter-icon {
    -webkit-mask-image: url('../img/icons/search-filter-icon.svg');
    mask-image: url('../img/icons/search-filter-icon.svg');
}
.tpd-icons-sostenible-desktop {
    -webkit-mask-image: url('../img/icons/sostenible-desktop.svg');
    mask-image: url('../img/icons/sostenible-desktop.svg');
}
/* user.svg: img/icons/ tiene PRIORIDAD sobre fonts/heroicons/user.svg */
.tpd-icons-user {
    -webkit-mask-image: url('../img/icons/user.svg');
    mask-image: url('../img/icons/user.svg');
}
.tpd-icons-wishlist {
    -webkit-mask-image: url('../img/icons/wishlist.svg');
    mask-image: url('../img/icons/wishlist.svg');
}

/* ==========================================================================
   ICONOS DESDE assets/fonts/heroicons/
   Solo los necesarios para la UI. El catálogo completo (324 iconos) está
   en tpd-heroicons.css con la clase base .tpd-heroicon.
   ========================================================================== */

.tpd-icons-chevron-down {
    -webkit-mask-image: url('../fonts/heroicons/chevron-down.svg');
    mask-image: url('../fonts/heroicons/chevron-down.svg');
}
.tpd-icons-chevron-up {
    -webkit-mask-image: url('../fonts/heroicons/chevron-up.svg');
    mask-image: url('../fonts/heroicons/chevron-up.svg');
}
.tpd-icons-chevron-left {
    -webkit-mask-image: url('../fonts/heroicons/chevron-left.svg');
    mask-image: url('../fonts/heroicons/chevron-left.svg');
}
.tpd-icons-chevron-right {
    -webkit-mask-image: url('../fonts/heroicons/chevron-right.svg');
    mask-image: url('../fonts/heroicons/chevron-right.svg');
}
.tpd-icons-x-mark {
    -webkit-mask-image: url('../fonts/heroicons/x-mark.svg');
    mask-image: url('../fonts/heroicons/x-mark.svg');
}
.tpd-icons-check {
    -webkit-mask-image: url('../fonts/heroicons/check.svg');
    mask-image: url('../fonts/heroicons/check.svg');
}
.tpd-icons-magnifying-glass {
    -webkit-mask-image: url('../fonts/heroicons/magnifying-glass.svg');
    mask-image: url('../fonts/heroicons/magnifying-glass.svg');
}
.tpd-icons-phone-dark {
    -webkit-mask-image: url('../fonts/heroicons/phone.svg');
    mask-image: url('../fonts/heroicons/phone.svg');
}
.tpd-icons-phone-mobile {
    -webkit-mask-image: url('../fonts/heroicons/device-phone-mobile.svg');
    mask-image: url('../fonts/heroicons/device-phone-mobile.svg');
}
.tpd-icons-email {
    -webkit-mask-image: url('../fonts/heroicons/envelope.svg');
    mask-image: url('../fonts/heroicons/envelope.svg');
}
.tpd-icons-building-storefront {
    -webkit-mask-image: url('../fonts/heroicons/building-storefront.svg');
    mask-image: url('../fonts/heroicons/building-storefront.svg');
}
.tpd-icons-shopping-bag {
    -webkit-mask-image: url('../fonts/heroicons/shopping-bag.svg');
    mask-image: url('../fonts/heroicons/shopping-bag.svg');
}
.tpd-icons-star {
    -webkit-mask-image: url('../fonts/heroicons/star.svg');
    mask-image: url('../fonts/heroicons/star.svg');
}
.tpd-icons-heart {
    -webkit-mask-image: url('../fonts/heroicons/heart.svg');
    mask-image: url('../fonts/heroicons/heart.svg');
}
.tpd-icons-trash {
    -webkit-mask-image: url('../fonts/heroicons/trash.svg');
    mask-image: url('../fonts/heroicons/trash.svg');
}
.tpd-icons-plus {
    -webkit-mask-image: url('../fonts/heroicons/plus.svg');
    mask-image: url('../fonts/heroicons/plus.svg');
}
.tpd-icons-minus {
    -webkit-mask-image: url('../fonts/heroicons/minus.svg');
    mask-image: url('../fonts/heroicons/minus.svg');
}
.tpd-icons-funnel {
    -webkit-mask-image: url('../fonts/heroicons/funnel.svg');
    mask-image: url('../fonts/heroicons/funnel.svg');
}
.tpd-icons-arrows-up-down {
    -webkit-mask-image: url('../fonts/heroicons/arrows-up-down.svg');
    mask-image: url('../fonts/heroicons/arrows-up-down.svg');
}
.tpd-icons-shopping-cart-heroicon {
    -webkit-mask-image: url('../fonts/heroicons/shopping-cart.svg');
    mask-image: url('../fonts/heroicons/shopping-cart.svg');
}

/* ==========================================================================
   ALIASES DE COMPATIBILIDAD
   Mantienen los nombres usados en los .tpl actuales sin modificar ningún
   archivo HTML. Apuntan siempre a img/icons/ si el SVG existe ahí.
   ========================================================================== */

/* Carrito — usa la bolsa personalizada de img/icons/ */
.tpd-icons-shopping-cart {
    -webkit-mask-image: url('../img/icons/bolsa-desktop-nav.svg');
    mask-image: url('../img/icons/bolsa-desktop-nav.svg');
}
/* Buscador — usa el icono de lupa personalizado de img/icons/ */
.tpd-icons-search {
    -webkit-mask-image: url('../img/icons/icono-lupa-blanco-desktop-nav.svg');
    mask-image: url('../img/icons/icono-lupa-blanco-desktop-nav.svg');
}
/* Teléfono — usa el icono personalizado de img/icons/ */
.tpd-icons-phone {
    -webkit-mask-image: url('../img/icons/icono-telefono-blanco-desktop-nav.svg');
    mask-image: url('../img/icons/icono-telefono-blanco-desktop-nav.svg');
}
/* Menú hamburguesa */
.tpd-icons-menu {
    -webkit-mask-image: url('../img/icons/hamburguesa-movil-nav.svg');
    mask-image: url('../img/icons/hamburguesa-movil-nav.svg');
}
/* Reassurance: 100 noches */
.tpd-icons-night {
    -webkit-mask-image: url('../img/icons/100-noches-desktop.svg');
    mask-image: url('../img/icons/100-noches-desktop.svg');
}
/* Reassurance: envío gratis */
.tpd-icons-shipping-free {
    -webkit-mask-image: url('../img/icons/envio-desktop.svg');
    mask-image: url('../img/icons/envio-desktop.svg');
}
/* Reassurance: garantía */
.tpd-icons-warranty {
    -webkit-mask-image: url('../img/icons/garantia-desktop.svg');
    mask-image: url('../img/icons/garantia-desktop.svg');
}
/* Reassurance: montaje */
.tpd-icons-montage {
    -webkit-mask-image: url('../img/icons/montaje-desktop.svg');
    mask-image: url('../img/icons/montaje-desktop.svg');
}
/* Reassurance: sostenibilidad */
.tpd-icons-sustainable {
    -webkit-mask-image: url('../img/icons/sostenible-desktop.svg');
    mask-image: url('../img/icons/sostenible-desktop.svg');
}
/* Reassurance: fabricantes */
.tpd-icons-manufacturer {
    -webkit-mask-image: url('../img/icons/fabrica-desktop.svg');
    mask-image: url('../img/icons/fabrica-desktop.svg');
}
/* Reassurance: financiación */
.tpd-icons-sequra {
    -webkit-mask-image: url('../img/icons/sequra.svg');
    mask-image: url('../img/icons/sequra.svg');
}

/* ==========================================================================
   REDES SOCIALES — assets/img/footer/
   ========================================================================== */

.tpd-icons-facebook {
    -webkit-mask-image: url('../img/footer/facebook.svg');
    background-image: url('../img/footer/facebook.svg');
}
.tpd-icons-instagram {
    -webkit-mask-image: url('../img/footer/instagram.svg');
    background-image: url('../img/footer/instagram.svg');
}
.tpd-icons-youtube {
    -webkit-mask-image: url('../img/footer/youtube.svg');
    background-image: url('../img/footer/youtube.svg');
}
.tpd-icons-tiktok {
    -webkit-mask-image: url('../img/footer/tiktok.svg');
    background-image: url('../img/footer/tiktok.svg');
}
.tpd-icons-linkedin {
    -webkit-mask-image: url('../img/footer/linkeding.svg');
    background-image: url('../img/footer/linkeding.svg');
}
.tpd-icons-whatsapp {
    -webkit-mask-image: url('../img/footer/whatsapp.svg');
    background-image: url('../img/footer/whatsapp.svg');
}