/******* Do not edit this file *******
Code Snippets Manager
Saved: Nov 21 2025 | 10:26:15 */
@charset "UTF-8";
/* =========================================
   BOTÓN DE FAVORITOS - ESTILO CORPORATIVO
   ========================================= */
.btn-toggle-fav {
  /* Estructura y Tamaño */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* Espacio entre icono y texto */
  padding: 5px 5px;
  box-sizing: border-box;
  /* Tipografía y Bordes */
  font-family: inherit;
  /* Hereda la fuente de tu tema */
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-radius: 8px;
  /* COLORES (Estado Normal: Añadir) */
  background-color: #ffffff;
  border: 2px solid #081389;
  color: #081389;
  /* Transiciones suaves */
  cursor: pointer;
  transition: all 0.3s ease;
}
/* HOVER (Al pasar el ratón) */
.btn-toggle-fav:hover {
  background-color: #DDE4F0;
  color: #081389;
  /* El borde se mantiene igual o puedes cambiarlo si quieres */
}
/* =========================================
   LÓGICA DEL ICONO (CORAZÓN)
   ========================================= */
.btn-toggle-fav .dashicons {
  font-size: 22px;
  width: 22px;
  height: 22px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Efecto rebote suave */
}
/* ESTADO 1: NO FAVORITO (Silueta Azul) */
/* Dashicons es una fuente sólida, así que usamos un truco de CSS para hacerla "hueca" */
.btn-toggle-fav:not(.activo) .dashicons {
  color: transparent;
  -webkit-text-stroke: 1.5px #081389;
  /* Dibuja el borde azul */
}
/* ESTADO 2: FAVORITO ACTIVO (Relleno Rojo) */
.btn-toggle-fav.activo .dashicons {
  color: #e74c3c;
  /* Rojo intenso */
  -webkit-text-stroke: 0;
  /* Quitamos el borde para que sea sólido */
  transform: scale(1.1);
  /* Lo hacemos un pelín más grande para destacar */
}
/* Opcional: Cambiar el texto/borde del botón cuando está activo para reforzar */
/* Si prefieres mantener el botón azul y solo cambiar el corazón, NO copies lo siguiente.
   Pero si quieres que todo el botón se "active", usa esto: */
/* 
.btn-toggle-fav.activo {
    border-color: #e74c3c;
    color: #e74c3c;
}
.btn-toggle-fav.activo:hover {
    background-color: #fadbd8; 
}
*/