:root{ color-scheme: light dark; }
body{ background:#f8fafc }
.dark body{ background:#0b1020; color:#e5e7eb }

.glass{ backdrop-filter:saturate(140%) blur(10px); background:rgba(255,255,255,.7) }
.dark .glass{ background:rgba(17,25,40,.55); border-color:rgba(255,255,255,.08) }

/* Mesh suave (igual vibe del hero) */
.mesh-hero{background-image:
        radial-gradient(40rem 30rem at 10% 10%, rgba(99,102,241,.28), transparent),
        radial-gradient(40rem 30rem at 90% 10%, rgba(59,130,246,.22), transparent),
        radial-gradient(50rem 30rem at 50% 100%, rgba(16,185,129,.20), transparent)
}
.dark .mesh-hero{background-image:
        radial-gradient(40rem 30rem at 10% 10%, rgba(99,102,241,.20), transparent),
        radial-gradient(40rem 30rem at 90% 10%, rgba(59,130,246,.16), transparent),
        radial-gradient(50rem 30rem at 50% 100%, rgba(16,185,129,.16), transparent)
}

/* Componentes base (mismos nombres que en home) */
.card{ border-radius:1rem; border:1px solid rgba(0,0,0,.1); background:#fff; position:relative; overflow:hidden }
.dark .card{ background:#0f172a; border-color:rgba(255,255,255,.08) }
.card::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 24px 64px rgba(2,6,23,.06); pointer-events:none }
.dark .card::before{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 24px 64px rgba(255,255,255,.04) }

.btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:1rem; padding:.75rem 1.25rem; font-weight:600 }
.btn-primary{ background:#4f46e5; color:#fff }
.btn-primary:hover{ filter:brightness(.95) }
.btn-ghost{ background:#fff; color:#0b1020; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) }
.dark .btn-ghost{ background:#111827; color:#e5e7eb }

.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem; border-radius:.9rem; font-size:.75rem; font-weight:600; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) }

.wa-pulse { animation: waPulse 2.8s infinite; }
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.35); }
    70%  { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
@media (prefers-reduced-motion: reduce) {
    .wa-pulse { animation: none; }
}

/* Skeleton simple */
.skeleton{ background: rgba(0,0,0,.06); border-radius: .75rem; }
.dark .skeleton{ background: rgba(255,255,255,.08); }
.pulse{ animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.55} 50%{opacity:1} }

/* 1) Aíslalo de filtros/opacidad del layout */
.calendar-shell,
.calendar-shell * {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* 2) Evita que pseudo-elementos “pinten” encima */
.calendar-shell::before,
.calendar-shell::after {
    content: none !important;
}

/* 3) Crea un “stacking context” limpio para que nada lo tape */
.calendar-shell {
    isolation: isolate;
    position: relative;
    overflow: hidden;
}

/* 4) Asegura que el iframe quede por encima de backgrounds del contenedor */
.calendar-iframe {
    position: relative;
    z-index: 1;
    background: white; /* evita que se “mezcle” con dark */
}