/*
* magicui.css — port vanilla de los componentes visuales de Magic UI.
*
* Inspirado en https://magicui.design — re-implementado en CSS puro
* para no introducir React/Tailwind/shadcn en un proyecto vanilla.
* Toda la animación es CSS; el JS solo aparece en magicui.js para
* efectos canvas (Particles) y event-driven (CoolMode click burst).
*
* Convenciones:
* - Prefijo .mu- para no chocar con clases existentes (.btn, .card…).
* - Variables --mu-* para personalizar color/duración por instancia.
* - `prefers-reduced-motion` desactiva animaciones (accesibilidad).
*
* Cómo usar (ver README en docs/MAGIC_UI.md):
*
*
tu card aquí
* ✨ Phase 19 — Webhooks live
*/
/* ════════════════════════════════════════════════════════════════ */
/* Variables globales (usables/sobrescribibles por instancia) */
/* ════════════════════════════════════════════════════════════════ */
:root {
--mu-azul: #38bdf8;
--mu-azul2: #7dd3fc;
--mu-morado: #a78bfa;
--mu-shine-light: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] {
--mu-shine-light: rgba(15, 23, 42, 0.55);
}
@media (prefers-reduced-motion: reduce) {
.mu-border-beam::before,
.mu-shimmer-btn::before,
.mu-shiny-text,
.mu-pulsating-btn,
.mu-meteor,
.mu-kinetic-text > span,
.mu-light-ray {
animation: none !important;
}
}
/* ════════════════════════════════════════════════════════════════ */
/* 1. BorderBeam — un haz de luz que recorre el borde de un card */
/* ════════════════════════════════════════════════════════════════ */
.mu-border-beam {
position: relative;
overflow: hidden;
}
.mu-border-beam::before {
/* Capa con el haz: una franja cónica que rota alrededor del card */
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px; /* grosor del beam */
background:
conic-gradient(
from 0deg,
transparent 0deg,
transparent 260deg,
var(--mu-azul) 290deg,
var(--mu-azul2) 320deg,
var(--mu-morado) 350deg,
transparent 360deg
);
/* Recorta el interior del card para que solo se vea el borde */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
/* Glow azul tenue para que el beam destaque del fondo del card */
filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
animation: mu-beam-rotate 8s linear infinite;
}
.mu-border-beam[data-mu-duration="4"]::before { animation-duration: 4s; }
.mu-border-beam[data-mu-duration="12"]::before { animation-duration: 12s; }
@keyframes mu-beam-rotate {
to { transform: rotate(360deg); }
}
/* ════════════════════════════════════════════════════════════════ */
/* 2. ShimmerButton — botón con un destello que cruza al hacer hover */
/* ════════════════════════════════════════════════════════════════ */
.mu-shimmer-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: #f8fafc;
font: 600 14px/1 'Inter', system-ui, sans-serif;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: transform .15s ease, box-shadow .15s ease;
}
.mu-shimmer-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(56, 189, 248, 0.5); }
.mu-shimmer-btn:active { transform: translateY(0); }
.mu-shimmer-btn::before {
/* Destello: gradient diagonal que viaja de left a right en loop */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
transparent 0%,
transparent 40%,
var(--mu-shine-light) 50%,
transparent 60%,
transparent 100%
);
transform: translateX(-100%);
animation: mu-shimmer 2.6s linear infinite;
z-index: -1;
}
@keyframes mu-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ──────────────────────────────────────────────────────────────────
* Modifier `.mu-shimmer` — añade solo el destello en loop a un botón
* existente SIN tocar su padding, background o borde. Útil para
* decorar CTAs ya estilados sin tener que reescribirlos.
* Requisito: el elemento debe tener `position: relative` (lo forzamos).
* ────────────────────────────────────────────────────────────────── */
.mu-shimmer {
position: relative;
overflow: hidden;
isolation: isolate; /* contiene el z-index:-1 del ::before */
}
.mu-shimmer::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
110deg,
transparent 0%,
transparent 40%,
var(--mu-shine-light) 50%,
transparent 60%,
transparent 100%
);
transform: translateX(-100%);
animation: mu-shimmer 2.8s linear infinite;
pointer-events: none;
z-index: -1; /* por debajo del texto sin tocar markup */
}
/* ════════════════════════════════════════════════════════════════ */
/* 3. AnimatedShinyText — texto con barrido de brillo en loop */
/* ════════════════════════════════════════════════════════════════ */
.mu-shiny-text {
display: inline-block;
background: linear-gradient(
110deg,
rgba(148, 163, 184, 0.85) 0%,
rgba(148, 163, 184, 0.85) 35%,
#f8fafc 50%,
rgba(148, 163, 184, 0.85) 65%,
rgba(148, 163, 184, 0.85) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: mu-shiny-text-bg 3s linear infinite;
}
html[data-theme="light"] .mu-shiny-text {
background: linear-gradient(
110deg,
rgba(71, 85, 105, 0.85) 0%,
rgba(71, 85, 105, 0.85) 35%,
#0f172a 50%,
rgba(71, 85, 105, 0.85) 65%,
rgba(71, 85, 105, 0.85) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes mu-shiny-text-bg {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
/* ════════════════════════════════════════════════════════════════ */
/* 4. PulsatingButton — pulso radial detrás del botón */
/* ════════════════════════════════════════════════════════════════ */
.mu-pulsating-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
border-radius: 999px;
border: none;
background: var(--mu-azul);
color: #0a0e1a;
font-weight: 700;
cursor: pointer;
z-index: 0;
}
.mu-pulsating-btn::after {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: var(--mu-azul);
z-index: -1;
animation: mu-pulse 1.8s ease-out infinite;
}
@keyframes mu-pulse {
0% { transform: scale(1); opacity: 0.55; }
100% { transform: scale(1.45); opacity: 0; }
}
/* ──────────────────────────────────────────────────────────────────
* Modifier `.mu-pulse` — añade SOLO el halo pulsante a un botón
* existente sin tocar su look (color/padding/borde). Pensado para
* remarcar un CTA en estado vacío ("crea tu primera key").
* ────────────────────────────────────────────────────────────────── */
.mu-pulse { position: relative; }
.mu-pulse::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: currentColor;
opacity: 0.4;
z-index: -1;
pointer-events: none;
animation: mu-pulse 1.8s ease-out infinite;
}
/* ════════════════════════════════════════════════════════════════ */
/* 5. InteractiveHoverButton — botón con icono que sale a la dcha */
/* ════════════════════════════════════════════════════════════════ */
.mu-hover-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px 10px 20px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.4);
background: transparent;
color: #e2e8f0;
font: 600 14px/1 'Inter', system-ui, sans-serif;
cursor: pointer;
overflow: hidden;
transition: padding .25s ease, color .2s ease;
}
.mu-hover-btn .mu-hover-btn-label { transition: transform .25s ease; }
.mu-hover-btn .mu-hover-btn-arrow {
position: absolute;
right: 14px;
opacity: 0;
transform: translateX(-8px);
transition: opacity .25s ease, transform .25s ease;
}
.mu-hover-btn:hover {
padding-right: 36px;
color: var(--mu-azul);
border-color: var(--mu-azul);
}
.mu-hover-btn:hover .mu-hover-btn-label { transform: translateX(-4px); }
.mu-hover-btn:hover .mu-hover-btn-arrow {
opacity: 1; transform: translateX(0);
}
/* ──────────────────────────────────────────────────────────────────
* Modifier `.mu-hover-arrow` — añade una flecha animada al hover
* SIN reemplazar el estilo del botón/link existente. La flecha se
* lee del atributo `data-mu-arrow` (default: "→"). Útil para
* premiar el hover en CTAs secundarios y items de menú.
*
* Uso:
* Ver planes
* Ver docs
* ────────────────────────────────────────────────────────────────── */
.mu-hover-arrow {
position: relative;
transition: padding-right .25s ease, color .2s ease;
}
.mu-hover-arrow::after {
content: attr(data-mu-arrow);
position: absolute;
right: 0;
top: 50%;
transform: translate(-6px, -50%);
opacity: 0;
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
font-weight: inherit;
}
.mu-hover-arrow:hover {
padding-right: 1.6em;
}
.mu-hover-arrow:hover::after {
opacity: 1;
transform: translate(2px, -50%);
}
/* Variante con flecha en la IZQUIERDA — pensada para botones tipo
"← Back" / "← Volver" donde la flecha apunta hacia atrás.
Uso:
Volver
*/
.mu-hover-arrow-left {
position: relative;
transition: padding-left .25s ease, color .2s ease;
}
.mu-hover-arrow-left::before {
content: attr(data-mu-arrow);
position: absolute;
left: 0;
top: 50%;
transform: translate(6px, -50%);
opacity: 0;
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
font-weight: inherit;
}
.mu-hover-arrow-left:hover {
padding-left: 1.6em;
}
.mu-hover-arrow-left:hover::before {
opacity: 1;
transform: translate(-2px, -50%);
}
/* ── Combinación `.btn-volver.mu-hover-arrow-left` ────────────────────
Caso especial: cuando la flecha "←" vive DENTRO de un `.btn-volver`
(botón con border + padding), el approach "absolute left:0" original
hace que la flecha quede pegada al borde y se corte visualmente.
Aquí la flecha se muestra SIEMPRE (no solo al hover) dentro del
padding interno del botón, con un pequeño desplazamiento al hover
como microinteracción. Mismo efecto, sin solaparse con el borde. */
.btn-volver.mu-hover-arrow-left {
padding-left: 2.2em; /* reserva espacio fijo para la flecha */
transition: background .2s ease, transform .2s ease,
border-color .2s ease;
}
.btn-volver.mu-hover-arrow-left::before {
left: 0.85em; /* dentro del padding, no en el borde */
opacity: 0.85; /* siempre visible (era 0 hasta el hover) */
transform: translateY(-50%); /* sin offset horizontal por defecto */
}
.btn-volver.mu-hover-arrow-left:hover {
padding-left: 2.2em; /* mantén el padding al hover */
}
.btn-volver.mu-hover-arrow-left:hover::before {
opacity: 1;
transform: translate(-3px, -50%); /* desliza levemente al hover */
}
/* ════════════════════════════════════════════════════════════════ */
/* 6. Meteors — gotas que caen diagonalmente (decoración bg) */
/* ════════════════════════════════════════════════════════════════ */
.mu-meteors {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.mu-meteor {
position: absolute;
top: -10%;
width: 2px;
height: 2px;
border-radius: 999px;
background: #f8fafc;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
transform: rotate(215deg);
animation: mu-meteor-fall linear infinite;
}
.mu-meteor::after {
/* La cola del meteoro */
content: "";
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), transparent);
}
html[data-theme="light"] .mu-meteor {
background: #475569;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .mu-meteor::after {
background: linear-gradient(90deg, rgba(71, 85, 105, 0.5), transparent);
}
@keyframes mu-meteor-fall {
0% { transform: rotate(215deg) translateX(0); opacity: 1; }
70% { opacity: 1; }
100% { transform: rotate(215deg) translateX(-700px); opacity: 0; }
}
/* ════════════════════════════════════════════════════════════════ */
/* 7. KineticText — letras con bounce desfasado */
/* ════════════════════════════════════════════════════════════════ */
.mu-kinetic-text {
display: inline-block;
line-height: 1;
}
.mu-kinetic-text > span {
display: inline-block;
animation: mu-kinetic-bounce 1.8s ease-in-out infinite;
}
@keyframes mu-kinetic-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* ════════════════════════════════════════════════════════════════ */
/* 8. LightRays — rayos de luz cayendo desde arriba */
/* ════════════════════════════════════════════════════════════════ */
.mu-light-rays {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.mu-light-ray {
position: absolute;
top: -30%;
width: 220px;
height: 130%;
background: linear-gradient(
180deg,
rgba(56, 189, 248, 0.18) 0%,
rgba(56, 189, 248, 0) 100%
);
transform-origin: top center;
filter: blur(20px);
animation: mu-ray-sway 9s ease-in-out infinite alternate;
}
.mu-light-ray:nth-child(1) { left: 8%; transform: rotate(-18deg); animation-delay: 0s; }
.mu-light-ray:nth-child(2) { left: 32%; transform: rotate( 12deg); animation-delay: -2s; }
.mu-light-ray:nth-child(3) { left: 60%; transform: rotate(-22deg); animation-delay: -4s; opacity: 0.7; }
.mu-light-ray:nth-child(4) { left: 80%; transform: rotate( 8deg); animation-delay: -1.5s; opacity: 0.6; }
@keyframes mu-ray-sway {
from { transform: translateX(-30px) rotate(-18deg); opacity: 0.6; }
to { transform: translateX( 30px) rotate( -8deg); opacity: 0.95; }
}
/* ════════════════════════════════════════════════════════════════ */
/* 9. AnimatedThemeToggler — sol↔luna con SVG morph */
/* ════════════════════════════════════════════════════════════════ */
.mu-theme-toggle {
position: relative;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.25);
background: transparent;
color: currentColor;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mu-theme-toggle:hover {
background: rgba(56, 189, 248, 0.08);
border-color: var(--mu-azul);
transform: rotate(15deg);
}
.mu-theme-toggle svg {
width: 18px;
height: 18px;
transition: transform .5s cubic-bezier(.5,.2,.2,1), opacity .35s ease;
}
.mu-theme-toggle .mu-icon-sun,
.mu-theme-toggle .mu-icon-moon {
position: absolute;
inset: 0;
margin: auto;
}
/* Estado dark: muestra luna, esconde sol */
html[data-theme="dark"] .mu-theme-toggle .mu-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
html[data-theme="dark"] .mu-theme-toggle .mu-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
/* Estado light: muestra sol, esconde luna */
html[data-theme="light"] .mu-theme-toggle .mu-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .mu-theme-toggle .mu-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
/* ════════════════════════════════════════════════════════════════ */
/* 10. Particles — el