/* =============================================================================
   componentes/favoritos.css — Favoritos
   -----------------------------------------------------------------------------
   El botón del corazón (componentes/_boton-favorito.php) y el panel inferior
   "Guardar en…" que construye favoritos.js (#ss-listas). Su z-index, con el
   resto de offcanvas, en layout.css; los colores de sus casillas y enlaces, en
   base.css.
   ============================================================================= */

/* ---------- BOTÓN ---------- */
.ss-fav-btn { background:none; border:0; padding:0; line-height:1; color:#adb5bd; cursor:pointer;
              transition:color .15s ease, transform .15s ease; }
.ss-fav-btn:hover { color:var(--ss-first-color); transform:scale(1.12); }
.ss-fav-btn.activo { color:var(--ss-first-color); }
.ss-fav-btn:disabled { opacity:.5; cursor:default; }
/* Latido al marcar */
@keyframes ssFavPop { 0%{transform:scale(1)} 45%{transform:scale(1.35)} 100%{transform:scale(1)} }
.ss-fav-btn.pop i { animation:ssFavPop .32s ease; }

@media (prefers-reduced-motion: reduce) {
    .ss-fav-btn, .ss-fav-btn.pop i { transition:none; animation:none; }
}

/* ---------- PANEL "GUARDAR EN…" ----------
   Sube desde abajo con la altura de su contenido, sin pasar del 80% de la pantalla
   (Bootstrap le daría una altura fija de offcanvas-bottom). */
#ss-listas { height:auto; max-height:80vh; }