+ ) */
.input-with-icon { position: relative; }
.input-with-icon > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(251,210,74,0.85); font-size: 18px; pointer-events: none; z-index: 1; }
.input-with-icon > input { padding-left: 2.85rem !important; }
/* Label asociado */
.field-label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
color: rgba(255,255,255,0.65);
margin-bottom: 0.55rem;
}
/* ---------- Sidebar ---------- */
.sidebar {
background: linear-gradient(180deg, #0a0a0d 0%, #07070a 100%);
border-right: 1px solid rgba(255,232,138,0.08);
}
.sidebar-link {
display: flex; align-items: center; gap: .75rem;
padding: .65rem .85rem;
color: rgba(255,255,255,0.62);
border-radius: 12px;
font-weight: 500;
font-size: .88rem;
transition: background .2s ease, color .2s ease;
margin: 2px .5rem;
position: relative;
}
.sidebar-link i { font-size: 18px; flex-shrink: 0; }
.sidebar-link:hover {
background: rgba(255,232,138,0.06);
color: #fff4bf;
}
.sidebar-link.active {
background: linear-gradient(90deg, rgba(240,180,25,0.18) 0%, rgba(240,180,25,0.04) 100%);
color: #fff4bf;
font-weight: 600;
}
.sidebar-link.active::before {
content: "";
position: absolute; left: -0.5rem; top: 8px; bottom: 8px;
width: 3px; border-radius: 3px;
background: linear-gradient(180deg, #fbd24a 0%, #d4990d 100%);
box-shadow: 0 0 12px rgba(240,180,25,0.6);
}
.sidebar-section {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,0.32);
font-weight: 600;
padding: 1.1rem 1rem .35rem 1rem;
}
/* ---------- Navbar ---------- */
.navbar {
background: linear-gradient(180deg, rgba(10,10,13,0.85) 0%, rgba(10,10,13,0.65) 100%);
border-bottom: 1px solid rgba(255,232,138,0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* ---------- Tables ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
table thead th {
background: rgba(255,232,138,0.04);
color: rgba(255,228,138,0.65);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
padding: .8rem 1rem;
border-bottom: 1px solid rgba(255,232,138,0.08);
text-align: left;
}
table tbody td {
padding: .85rem 1rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
color: rgba(255,255,255,0.85);
font-size: .9rem;
}
table tbody tr:hover { background: rgba(255,232,138,0.025); }
/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.10);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(240,180,25,0.30); background-clip: padding-box; }
/* ---------- Animations ---------- */
@keyframes float {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, -25px); }
}
@keyframes float-slow {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-25px, 30px); }
}
@keyframes shimmer {
0% { background-position: -300% 0; }
100% { background-position: 300% 0; }
}
@keyframes pulse-gold {
0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,25,0.45); }
50% { box-shadow: 0 0 0 14px rgba(240,180,25,0); }
}
@keyframes float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-float { animation: float 22s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 28s ease-in-out infinite; }
.animate-pulse-gold { animation: pulse-gold 2.4s ease-in-out infinite; }
.animate-float-y { animation: float-y 4s ease-in-out infinite; }
.animate-fade-up { animation: fade-up .55s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* Shimmer text (gold) */
.shimmer-gold {
background: linear-gradient(90deg, #a8770a 0%, #fbd24a 25%, #fff4bf 50%, #fbd24a 75%, #a8770a 100%);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: shimmer 6s linear infinite;
}
/* Stagger helpers */
.stagger > * { opacity: 0; animation: fade-up .55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .12s; }
.stagger > *:nth-child(3) { animation-delay: .20s; }
.stagger > *:nth-child(4) { animation-delay: .28s; }
.stagger > *:nth-child(5) { animation-delay: .36s; }
.stagger > *:nth-child(6) { animation-delay: .44s; }
.stagger > *:nth-child(7) { animation-delay: .52s; }
.stagger > *:nth-child(8) { animation-delay: .60s; }
/* ---------- Misc helpers ---------- */
.divider-x { background: linear-gradient(90deg, transparent 0%, rgba(255,232,138,0.18) 50%, transparent 100%); height: 1px; }
.divider-y { background: linear-gradient(180deg, transparent 0%, rgba(255,232,138,0.18) 50%, transparent 100%); width: 1px; }
.glow-gold-sm { box-shadow: 0 0 24px -4px rgba(240,180,25,0.45); }
.glow-gold-md { box-shadow: 0 0 60px -12px rgba(240,180,25,0.55); }
/* Mobile-first tweaks */
@media (max-width: 640px) {
.card, .stat-card { padding: 1.05rem; border-radius: 1rem; }
table thead th, table tbody td { padding: .65rem .75rem; font-size: .82rem; }
}
/* =============================================================================
GLASS CARDS · spotlight que sigue al cursor
Uso: ...
============================================================================= */
.glass-card,
.card.glass-card,
.stat-card.glass-card {
--mx: 50%; --my: 50%;
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.018) 100%);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 22px;
overflow: hidden;
backdrop-filter: blur(16px) saturate(115%);
-webkit-backdrop-filter: blur(16px) saturate(115%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 24px 60px -28px rgba(0,0,0,0.65);
transition: transform .45s cubic-bezier(0.16,1,0.3,1),
border-color .35s ease,
box-shadow .45s ease;
isolation: isolate;
}
.glass-card:hover {
transform: translateY(-3px);
border-color: rgba(251,210,74,0.32);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 38px 70px -28px rgba(212,153,13,0.30);
}
.glass-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(360px circle at var(--mx) var(--my),
rgba(251,210,74,0.18),
rgba(251,210,74,0.06) 25%,
transparent 55%);
opacity: 0; transition: opacity .35s ease;
border-radius: inherit;
}
.glass-card:hover::before { opacity: 1; }
.glass-card > * { position: relative; z-index: 1; }
/* Variantes de spotlight para el admin (cyan / violeta) */
.glass-card.spot-cyan::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(34,211,238,0.18), rgba(34,211,238,0.05) 25%, transparent 55%); }
.glass-card.spot-violet::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(167,139,250,0.18), rgba(167,139,250,0.05) 25%, transparent 55%); }
.glass-card.spot-emerald::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(52,211,153,0.18), rgba(52,211,153,0.05) 25%, transparent 55%); }
/* Convertir todas las .card y .stat-card a glass-card por defecto */
.card { /* dejamos la versión opaca original como fallback, sin pisar */ }
/* =============================================================================
AMBIENT BACKGROUND — blobs animados (dorado + púrpura + azul muy sutil)
El layout añade en el shell autenticado.
============================================================================= */
.ambient-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient-bg .blob {
position: absolute; border-radius: 50%;
filter: blur(110px); opacity: 0.55;
will-change: transform;
}
.ambient-bg .blob-gold { width: 580px; height: 580px; top: -180px; left: -160px;
background: radial-gradient(circle, rgba(212,153,13,0.55) 0%, transparent 65%);
animation: blob-drift-a 22s ease-in-out infinite; }
.ambient-bg .blob-violet { width: 520px; height: 520px; bottom: -180px; right: 8%;
background: radial-gradient(circle, rgba(139,92,246,0.30) 0%, transparent 65%);
animation: blob-drift-b 28s ease-in-out infinite; }
.ambient-bg .blob-blue { width: 460px; height: 460px; top: 45%; right: -160px;
background: radial-gradient(circle, rgba(59,130,246,0.22) 0%, transparent 65%);
animation: blob-drift-c 25s ease-in-out infinite; }
.ambient-bg .blob-soft { width: 360px; height: 360px; top: 15%; left: 50%;
background: radial-gradient(circle, rgba(255,232,138,0.16) 0%, transparent 70%);
animation: blob-drift-a 33s ease-in-out infinite reverse; }
@keyframes blob-drift-a { 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(60px,-40px,0) scale(1.08) } }
@keyframes blob-drift-b { 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(-50px,60px,0) scale(0.92) } }
@keyframes blob-drift-c { 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(30px,-50px,0) scale(1.05) } }
/* =============================================================================
ONBOARDING · barra verde lujosa
============================================================================= */
.progress-luxe {
position: relative;
width: 100%;
height: 10px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.progress-luxe > .fill {
position: relative;
height: 100%;
border-radius: 999px;
background:
linear-gradient(90deg, #064e3b 0%, #047857 35%, #10b981 70%, #34d399 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 0 22px rgba(16,185,129,0.45);
transition: width .8s cubic-bezier(0.16,1,0.3,1);
}
.progress-luxe > .fill::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
background-size: 200% 100%;
animation: progress-shimmer 2.6s linear infinite;
border-radius: inherit;
mix-blend-mode: overlay;
}
@keyframes progress-shimmer {
0% { background-position: -150% 0; }
100% { background-position: 150% 0; }
}
/* =============================================================================
PACKAGE PRICE TILE — para la página /packages
============================================================================= */
.pkg-card {
position: relative;
border-radius: 24px;
padding: 1.5rem 1.4rem 1.4rem;
background:
linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 100%),
radial-gradient(120% 80% at 50% -20%, rgba(251,210,74,0.10), transparent 60%);
border: 1px solid rgba(255,255,255,0.07);
overflow: hidden;
isolation: isolate;
transition: transform .4s cubic-bezier(0.16,1,0.3,1), border-color .3s ease, box-shadow .35s ease;
backdrop-filter: blur(16px);
}
.pkg-card:hover {
transform: translateY(-6px);
border-color: rgba(251,210,74,0.42);
box-shadow: 0 50px 80px -38px rgba(212,153,13,0.38);
}
.pkg-card.is-featured {
background:
linear-gradient(180deg, rgba(251,210,74,0.10) 0%, rgba(168,119,10,0.02) 100%),
radial-gradient(120% 80% at 50% -20%, rgba(251,210,74,0.20), transparent 60%);
border-color: rgba(251,210,74,0.40);
}
.pkg-card .ribbon {
position: absolute; top: 14px; right: -42px;
transform: rotate(35deg); transform-origin: center;
background: linear-gradient(135deg, #fbd24a, #d4990d);
color: #181208;
font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
padding: 4px 50px;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.pkg-card .price {
font-family: 'General Sans','Satoshi',sans-serif;
font-size: clamp(2.6rem, 4vw, 3.4rem);
font-weight: 500; line-height: 1; letter-spacing: -0.04em;
background: linear-gradient(135deg, #fff4bf 0%, #fbd24a 40%, #d4990d 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pkg-card .price > .dollar { font-size: 0.5em; vertical-align: top; opacity: 0.85; }
.pkg-card .pkg-feat { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; }
.pkg-card .pkg-feat > i { color: #34d399; font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.pkg-card .pkg-feat > span { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.45; }
/* =============================================================================
STAT-CARD upgrade · evitar el cuadrito vacío sin icono.
Si la stat-card tiene .stat-icon, le da un look chévere.
============================================================================= */
.stat-icon {
width: 44px; height: 44px; border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 22px;
background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.stat-icon.is-gold { background: linear-gradient(135deg, rgba(251,210,74,0.18), rgba(168,119,10,0.05)); border-color: rgba(251,210,74,0.30); color: #fbd24a; }
.stat-icon.is-emerald { background: linear-gradient(135deg, rgba(52,211,153,0.18), rgba(4,120,87,0.05)); border-color: rgba(52,211,153,0.30); color: #34d399; }
.stat-icon.is-cyan { background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(8,145,178,0.05)); border-color: rgba(34,211,238,0.30); color: #22d3ee; }
.stat-icon.is-violet { background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(124,58,237,0.05)); border-color: rgba(167,139,250,0.30); color: #a78bfa; }
.stat-icon.is-rose { background: linear-gradient(135deg, rgba(244,114,182,0.18), rgba(190,24,93,0.05)); border-color: rgba(244,114,182,0.30); color: #f472b6; }
/* Mejor stat-card por defecto */
.stat-card.glass-card { padding: 1.4rem; }