@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

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

/* --- FIX ancho extra de <input type="time"> en iOS Safari --- */
@supports (-webkit-touch-callout: none) {
  input[type="time"].ios-time-fix {
    /* Asegura el mismo box model y padding que el Input de shadcn (px-3 = 0.75rem) */
    box-sizing: border-box;
    padding-right: 0.75rem;
    width: 100%;
  }

  /* Quita el padding interno que añade Safari a los campos de hora */
  input[type="time"].ios-time-fix::-webkit-datetime-edit,
  input[type="time"].ios-time-fix::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
    margin: 0;
  }

  /* Evita ‘huecos’ a la derecha por alineaciones de Safari */
  input[type="time"].ios-time-fix::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
  }

  /* (Opcional, inocuo para time) Oculta iconos que reservan espacio extra */
  input[type="time"].ios-time-fix::-webkit-calendar-picker-indicator,
  input[type="time"].ios-time-fix::-webkit-clear-button,
  input[type="time"].ios-time-fix::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
  }
}


@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%;
    --navbar-height: 5rem;
    --mobile-bottom-nav-height: 0px;
  }

  .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%;
    --navbar-height: 5rem;
    --mobile-bottom-nav-height: 0px;
  }
}

@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;
  }
  
  .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;
  }

  .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;
  }

  .status-feedback-overlay {
    animation: statusFeedbackFade 1.6s ease-in-out forwards;
  }

  .status-feedback-icon {
    animation: statusFeedbackPop 1.6s ease-in-out forwards;
  }
}

@layer utilities {
  .event-highlight-animated {
    background-size: 200% 200%;
    animation: eventHighlight 6s ease-in-out infinite, eventHighlightGlow 2.8s ease-in-out infinite;
    position: relative;
    overflow: visible; 
    isolation: isolate;
    box-shadow: 0 0 0 rgba(250, 204, 21, 0.25);
    will-change: transform, box-shadow;
  }

  .event-highlight-animated::after {
    content: "";
    position: absolute;
    inset: -140% 40%;
    width: 140%;
    background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 45%,
      rgba(255, 255, 255, 0.65) 50%,
      rgba(255, 255, 255, 0.4) 55%,
      transparent 100%
    );
    opacity: 0;
    transform: rotate(18deg) translateX(-120%);
    animation: eventHighlightSheen 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }
}

@media (max-width: 767px) {
  body.contract-page [data-sidebar="sidebar"],
  body.contract-page nav[aria-label="Barra de pestañas"] {
    display: none !important;
  }
}

@keyframes eventHighlight {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes eventHighlightGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(250, 204, 21, 0.22),
      0 0 12px rgba(253, 230, 138, 0.25);
    transform: translateY(0) scale(1);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
  }

  50% {
    box-shadow:
      0 12px 28px rgba(245, 158, 11, 0.45),
      0 0 25px rgba(253, 230, 138, 0.55);
    transform: translateY(-1px) scale(1.015);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.75);
  }
}

@keyframes statusFeedbackFade {
  0% {
    opacity: 0;
  }

  10%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes statusFeedbackPop {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  25% {
    opacity: 1;
    transform: scale(1.05);
  }

  55% {
    transform: scale(1);
  }

  85% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes eventHighlightSheen {
  0%,
  100% {
    opacity: 0;
    transform: rotate(18deg) translateX(-120%);
  }

  20% {
    opacity: 0;
  }

  50% {
    opacity: 0.75;
    transform: rotate(18deg) translateX(15%);
  }

  80% {
    opacity: 0;
    transform: rotate(18deg) translateX(120%);
  }
}


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

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

/* Bloquea el scroll del body solo en móvil */
@media (max-width: 1023px) {
  body.lock-scroll {
    position: fixed;      /* evita el “bounce” de iOS */
    inset: 0;             /* top/right/bottom/left: 0 */
    overflow: hidden;     /* sin scroll vertical ni horizontal */
    width: 100%;
    height: 100dvh;       /* respeta la barra de direcciones móvil */
    overscroll-behavior: none; /* sin pull-to-refresh */
    touch-action: pan-x pinch-zoom; /* permite gestos horizontales y zoom, bloquea pan vertical */
  }
}


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

/* 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;
}