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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --primary: 42 100% 50%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 42 100% 50%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 42 100% 50%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 42 100% 50%;

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans selection:bg-plannit-gold selection:text-plannit-black;
  }
  
  h1, h2, h3, h4 {
    @apply font-display;
  }
}

@layer components {
  .glass-effect {
    @apply bg-white/80 backdrop-blur-glass border border-white/20 shadow-glass;
  }

  .form-select {
    @apply h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-plannit-black ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .gold-glow {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
  }
  
  .section-padding {
    @apply py-16 sm:py-20 md:py-24 lg:py-28;
  }
  
  .button-transition {
    @apply transition-all duration-300 ease-in-out;
  }
  
  .plannit-container {
    @apply container mx-auto px-4 md:px-6 lg:px-8;
  }
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Transition for page changes */
.page-transition-enter {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 400ms, transform 400ms;
}

.page-transition-exit {
  opacity: 1;
}

.page-transition-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

/* Loading blur for images */
.blur-load {
  background-size: cover;
  background-position: center;
}

.blur-load.loaded > img {
  opacity: 1;
}

.blur-load > img {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.backface-hidden { backface-visibility: hidden; }
.rotate-y-180    { transform: rotateY(180deg); }

@keyframes spin-slow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

.link-plannit {
  color: #1d4ed8;           /* azul‑600 de Tailwind */
  text-decoration: underline;
  transition: color .15s;
}

.link-plannit:hover {
  color: #1e40af;           /* azul‑700 */
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

html body[data-scroll-locked] {
  margin-right: 0 !important;
}

@supports not (scrollbar-gutter: stable) {
  @media (hover: hover) and (pointer: fine) {
    html { overflow-y: scroll; }
  }
}

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

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}