/* «Me interesa» en el sitio público: el botón junto al título, el cuadro de inicio de sesión y el aviso.
   Usa los colores del sitio (variables de estilo.css). Nada de style="" en el HTML (CSP). */
.mi-fila { margin: 4px 0 14px; }
/* «Me interesa»: el botón más vistoso de la página. Un resplandor verde que respira y partículas discretas que suben.
   Todo es CSS (sin imágenes ni código de terceros). Con «reducir movimiento» queda quieto, solo con el brillo fijo. */
.mi-boton {
    --mi-verde: var(--accion, #22c55e);
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--alto-pildora, 40px); padding: 8px 18px;
    border-radius: 999px; cursor: pointer; font: 700 0.92rem var(--fuente-ui, inherit); letter-spacing: .01em;
    color: #eafff1; background: linear-gradient(135deg, rgba(34, 197, 94, .30), rgba(34, 197, 94, .10));
    border: 1px solid var(--mi-verde);
    box-shadow: 0 0 8px 0 rgba(34, 197, 94, .45), 0 0 20px 2px rgba(34, 197, 94, .20), inset 0 0 10px rgba(34, 197, 94, .18);
    animation: mi-respira 3.2s ease-in-out infinite;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.mi-boton svg { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 0 4px rgba(34, 197, 94, .8)); }
.mi-boton:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(34, 197, 94, .42), rgba(34, 197, 94, .16)); }
.mi-boton:active { transform: translateY(0) scale(.98); }
.mi-boton:focus-visible { outline: 2px solid #bbf7d0; outline-offset: 3px; }

/* Partículas: dos capas de puntos pequeños que suben y se apagan, a destiempo para que no se vea un patrón. */
.mi-boton::before, .mi-boton::after {
    content: ""; position: absolute; z-index: -1; left: 6px; right: 6px; bottom: 72%; height: 44px;
    pointer-events: none; opacity: 0; background-repeat: no-repeat;
}
.mi-boton::before {
    background-image:
        radial-gradient(circle at 14% 80%, #bbf7d0 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 46% 62%, #86efac 0 1px, transparent 2px),
        radial-gradient(circle at 78% 84%, #bbf7d0 0 1.6px, transparent 2.6px);
    animation: mi-particulas 4.6s ease-out infinite;
}
.mi-boton::after {
    background-image:
        radial-gradient(circle at 30% 76%, #86efac 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 62% 70%, #dcfce7 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 90% 78%, #86efac 0 1px, transparent 2px);
    animation: mi-particulas 4.6s ease-out 2.3s infinite;
}

@keyframes mi-respira {
    0%, 100% { box-shadow: 0 0 8px 0 rgba(34, 197, 94, .45), 0 0 20px 2px rgba(34, 197, 94, .20), inset 0 0 10px rgba(34, 197, 94, .18); }
    50% { box-shadow: 0 0 16px 3px rgba(34, 197, 94, .80), 0 0 38px 9px rgba(34, 197, 94, .34), inset 0 0 16px rgba(34, 197, 94, .32); }
}
@keyframes mi-particulas {
    0% { opacity: 0; transform: translateY(3px); }
    18% { opacity: .95; }
    70% { opacity: .5; }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* Ya guardado: el brillo se calma (respira más lento) y las partículas descansan. */
.mi-boton.mi-on { color: #eafff1; background: linear-gradient(135deg, rgba(34, 197, 94, .40), rgba(34, 197, 94, .18)); animation-duration: 5.5s; }
.mi-boton.mi-on::before, .mi-boton.mi-on::after { animation: none; opacity: 0; }
.mi-boton.mi-on svg { fill: currentColor; }
.mi-boton[disabled] { opacity: .7; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    .mi-boton, .mi-boton.mi-on { animation: none; }
    .mi-boton::before, .mi-boton::after { animation: none; opacity: 0; }
    .mi-boton:hover { transform: none; }
}

.mi-pista-admin { margin: 6px 0 12px; padding: 8px 12px; border-radius: var(--radio-campo, 10px); border: 1px dashed var(--borde-control, #3a3a3a); color: var(--texto-tenue, #a8a8a8); font-size: .8rem; }
.vf-panel .mi-boton { width: 100%; justify-content: center; margin: 0 0 8px; }

/* Por encima de cualquier otra ventana (el visor de fotos, la ficha de un producto…): el cuadro de sesión nunca queda detrás. */
#modal-me-interesa { z-index: 3000; }

.mi-contenido { max-width: 420px; text-align: left; }
.mi-contenido h2 { font-family: var(--fuente-editorial, Georgia, serif); font-size: 1.35rem; margin: 0 28px 8px 0; line-height: 1.25; }
.mi-texto { margin: 0 0 14px; color: var(--texto-tenue, #a8a8a8); line-height: 1.5; }
.mi-contenido label { display: block; margin: 10px 0 4px; font-size: .9rem; }
.mi-contenido input { width: 100%; min-height: var(--alto-control, 48px); padding: 10px 12px; border-radius: var(--radio-campo, 10px); border: 1px solid var(--borde-control, #3a3a3a); background: var(--fondo, #121212); color: var(--texto, #f2f2f2); font-size: 1rem; }
.mi-contenido input:focus-visible { outline: 2px solid var(--accion, #22c55e); outline-offset: 1px; }
.mi-contenido .alerta-error { margin: 12px 0 0; }
.mi-contenido .btn { width: 100%; margin-top: 14px; background: var(--accion, #22c55e); color: var(--accion-texto, #06210f); border-color: var(--accion, #22c55e); font-weight: 600; }
.mi-sin-clave { margin: 14px 0 0; text-align: center; color: var(--texto-tenue, #a8a8a8); }
.mi-sin-clave a { color: var(--accion, #22c55e); font-weight: 600; }
.mi-ahora-no { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--texto-tenue, #a8a8a8); cursor: pointer; text-decoration: underline; padding: 8px; font-size: .9rem; }

.mi-aviso {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3100; max-width: min(92vw, 420px);
    padding: 12px 18px; border-radius: 999px; background: #0f2a18; color: #d9f5e0; border: 1px solid var(--accion, #22c55e);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font-size: .95rem; text-align: center;
}
.mi-aviso a { color: #fff; font-weight: 600; margin-left: 6px; }