@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        scroll-behavior: smooth;
    }

    [x-cloak] {
        display: none !important;
    }
}

@layer components {
    /* Fondo claro por defecto; con .dark sigue siendo claro (accesibilidad). */
    .poskn-page-bg {
        @apply min-h-screen bg-gradient-to-br from-white via-teal-50/90 to-cyan-100/70 dark:from-slate-100 dark:via-white dark:to-teal-50/80;
    }

    /* z-10 por debajo del nav (z-50) para que menús y botones no queden tapados */
    .poskn-header-bar {
        @apply relative z-10 border-b border-teal-200/80 bg-white/95 shadow-md shadow-teal-900/[0.06] backdrop-blur-lg dark:border-teal-300/60 dark:bg-white/95 dark:shadow-slate-300/20;
    }

    .poskn-card {
        @apply rounded-2xl border border-teal-200/90 bg-white shadow-md shadow-slate-200/40 backdrop-blur-sm dark:border-teal-300/70 dark:bg-white dark:shadow-slate-300/30;
    }

    .poskn-guest-shell {
        @apply relative min-h-screen overflow-hidden bg-gradient-to-br from-violet-600 via-teal-600 to-emerald-600;
    }

    .poskn-guest-shell::before {
        content: '';
        @apply pointer-events-none absolute inset-0 opacity-40;
        background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 45%);
    }

    .poskn-guest-card {
        @apply relative z-10 w-full max-w-md rounded-2xl border border-white/25 bg-white/95 p-8 shadow-2xl shadow-teal-950/30 ring-2 ring-white/20 backdrop-blur-xl dark:border-teal-500/20 dark:bg-slate-900/90 dark:ring-teal-500/10;
    }
}