@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=Aleo:ital,wght@0,100..900;1,100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import "tailwindcss";

.font-inter {
  font-family: Inter, ui-sans-serif, sans-serif, system-ui;
}

.mapboxgl-marker {
  z-index: 3;
}

/* Source paths for Tailwind to scan */
@source "../client/**/*.{js,jsx}";
@source "../imports/**/*.{js,jsx}";

/* Use class-based dark mode (via .dark on <html>) */
@variant dark (&:where(.dark, .dark *));

/* Light theme (tweakcn) */
:root {
  --background: rgb(250, 251, 255);
  --foreground: rgb(0, 12, 51);
  --card: rgb(248, 249, 252);
  --card-foreground: rgb(15, 23, 42);
  --popover: rgb(239, 242, 251);
  --popover-foreground: rgb(15, 23, 42);
  --primary: rgb(41, 98, 255);
  --primary-foreground: rgb(238, 242, 255);
  --secondary: rgb(0, 146, 184);
  --secondary-foreground: rgb(236, 254, 255);
  --muted: rgb(152, 206, 215);
  --muted-foreground: rgb(31, 74, 81);
  --accent: rgb(210, 218, 238);
  --accent-foreground: rgb(35, 40, 90);
  --destructive: rgb(191, 97, 106);
  --destructive-foreground: rgb(255, 245, 246);
  --border: rgb(202, 213, 226);
  --input: rgb(202, 213, 226);
  --ring: rgb(202, 213, 226);
  --chart-1: rgb(143, 188, 187);
  --chart-2: rgb(136, 192, 208);
  --chart-3: rgb(129, 161, 193);
  --chart-4: rgb(94, 129, 172);
  --chart-5: rgb(0, 117, 149);
  --sidebar: rgb(241, 245, 249);
  --sidebar-foreground: rgb(15, 23, 42);
  --sidebar-primary: rgb(41, 98, 255);
  --sidebar-accent-foreground: rgb(48, 60, 148);
  --sidebar-border: rgb(202, 213, 226);
  --sidebar-ring: rgb(202, 213, 226);
  --font-sans: Space Grotesk, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Aleo, ui-serif, serif;
  --font-mono: Space Mono, ui-monospace, monospace;
  --radius: 0.7rem;
  --shadow-x: 1.5px;
  --shadow-y: 3px;
  --shadow-blur: 6.5px;
  --shadow-spread: -2px;
  --shadow-opacity: 0.16;
  --shadow-color: 0 0 0;
  --shadow-2xs: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.08);
  --shadow-xs: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.08);
  --shadow-sm: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 1px 2px -3px hsl(0 0 0 / 0.16);
  --shadow: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 1px 2px -3px hsl(0 0 0 / 0.16);
  --shadow-md: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 2px 4px -3px hsl(0 0 0 / 0.16);
  --shadow-lg: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 4px 6px -3px hsl(0 0 0 / 0.16);
  --shadow-xl: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 8px 10px -3px hsl(0 0 0 / 0.16);
  --shadow-2xl: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.40);
  --tracking-normal: 0em;
  --spacing: 0.23rem;
}

/* Dark theme (tweakcn) */
.dark {
  --background: rgb(9, 9, 11);
  --foreground: rgb(238, 242, 255);
  --card: rgb(12, 14, 30);
  --card-foreground: rgb(238, 242, 255);
  --popover: rgb(12, 14, 30);
  --popover-foreground: rgb(238, 242, 255);
  --primary: rgb(41, 98, 255);
  --primary-foreground: rgb(8, 7, 19);
  --secondary: rgb(0, 184, 219);
  --secondary-foreground: rgb(5, 51, 69);
  --muted: rgb(24, 28, 55);
  --muted-foreground: rgb(0, 184, 219);
  --accent: rgb(24, 28, 55);
  --accent-foreground: rgb(238, 242, 255);
  --destructive: rgb(236, 0, 63);
  --destructive-foreground: rgb(255, 241, 242);
  --border: rgb(29, 41, 61);
  --input: rgb(29, 41, 61);
  --ring: rgb(29, 41, 61);
  --chart-1: rgb(110, 17, 176);
  --chart-2: rgb(142, 81, 255);
  --chart-3: rgb(55, 42, 172);
  --chart-4: rgb(81, 162, 255);
  --chart-5: rgb(20, 71, 230);
  --sidebar: rgb(15, 23, 43);
  --sidebar-foreground: rgb(241, 245, 249);
  --sidebar-primary: rgb(41, 98, 255);
  --sidebar-accent: rgb(2, 6, 24);
  --sidebar-accent-foreground: rgb(115, 138, 215);
  --sidebar-border: rgb(29, 41, 61);
  --sidebar-ring: rgb(29, 41, 61);
  --font-sans: Space Grotesk, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Aleo, ui-serif, serif;
  --font-mono: Space Mono, ui-monospace, monospace;
  --radius: 0.7rem;
  --shadow-x: 1.5px;
  --shadow-y: 3px;
  --shadow-blur: 6.5px;
  --shadow-spread: -2px;
  --shadow-opacity: 0.16;
  --shadow-color: 0 0 0;
  --shadow-2xs: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.08);
  --shadow-xs: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.08);
  --shadow-sm: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 1px 2px -3px hsl(0 0 0 / 0.16);
  --shadow: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 1px 2px -3px hsl(0 0 0 / 0.16);
  --shadow-md: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 2px 4px -3px hsl(0 0 0 / 0.16);
  --shadow-lg: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 4px 6px -3px hsl(0 0 0 / 0.16);
  --shadow-xl: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.16), 1.5px 8px 10px -3px hsl(0 0 0 / 0.16);
  --shadow-2xl: 1.5px 3px 6.5px -2px hsl(0 0 0 / 0.40);
}

/* Theme mapping (Tailwind v4 @theme inline) */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-pulse-ring: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  --animate-pulse-dot: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;

  @keyframes accordion-down {
    from { height: 0; }
    to { height: var(--radix-accordion-content-height); }
  }

  @keyframes accordion-up {
    from { height: var(--radix-accordion-content-height); }
    to { height: 0; }
  }

  @keyframes pulse-ring {
    0% { transform: scale(0.33); }
    80%, 100% { opacity: 0; }
  }

  @keyframes pulse-dot {
    0% { transform: scale(0.8); }
    50% { transform: scale(1); }
    100% { transform: scale(0.8); }
  }

  /* Marquee animations */
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;

  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--gap))); }
  }

  @keyframes marquee-vertical {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-100% - var(--gap))); }
  }
}

/* Marquee animation classes */
.animate-marquee {
  animation: marquee var(--duration, 40s) linear infinite;
}

.animate-marquee-vertical {
  animation: marquee-vertical var(--duration, 40s) linear infinite;
}



/* Base styles */
html {
  font-size: 110%;
}

* {
  border-color: var(--border);
  outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-feature-settings: "rlig" 1, "calt" 1;
}

/* Default overflow: same scrollbar for all scrollable content */
.overflow-auto,
.overflow-x-auto,
.overflow-y-auto,
.overflow-scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 20%, transparent) transparent;
}

.overflow-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.overflow-auto::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track,
.overflow-scroll::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 9999px;
}

.overflow-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.2s ease;
}

.overflow-auto::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted-foreground) 35%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Custom scrollbar styles (explicit class for extra control) */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 20%, transparent) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 9999px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.2s ease;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted-foreground) 35%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.scrollbar-thin::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
}

/* Scrollbar con background cuando hover */
.scrollbar-thin:hover::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 9999px;
}

/* Force pointer cursor on map (overrides Mapbox grab cursor) */
.map-cursor-pointer,
.map-cursor-pointer * {
  cursor: pointer !important;
}

/* Hide react-scheduler view navigator (preserved from original) */
.rs__view_navigator {
  display: none !important;
}

/* Animation classes for shadcn/ui components (replacement for tailwindcss-animate) */
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
      scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
      rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
      scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
      rotate(var(--tw-exit-rotate, 0));
  }
}

@keyframes caret-blink {
  0%, 70%, 100% { opacity: 1; }
  20%, 50% { opacity: 0; }
}

.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: 0;
}

.animate-out {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: 0;
}

.animate-caret-blink {
  animation: caret-blink 1.25s ease-out infinite;
}

/* Entry/Exit animation modifiers */
.fade-in-0 { --tw-enter-opacity: 0; }
.fade-in-50 { --tw-enter-opacity: 0.5; }
.fade-in-80 { --tw-enter-opacity: 0.8; }
.fade-out-0 { --tw-exit-opacity: 0; }

.zoom-in-95 { --tw-enter-scale: 0.95; }
.zoom-out-95 { --tw-exit-scale: 0.95; }

.slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }
.slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }
.slide-in-from-left-2 { --tw-enter-translate-x: -0.5rem; }
.slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }

.slide-in-from-left-1\/2 { --tw-enter-translate-x: -50%; }
.slide-in-from-top-\[48\%\] { --tw-enter-translate-y: -48%; }

.slide-out-to-left-1\/2 { --tw-exit-translate-x: -50%; }
.slide-out-to-top-\[48\%\] { --tw-exit-translate-y: -48%; }

/* Data state variants for Radix UI */
[data-state="open"] .data-\[state\=open\]\:animate-in {
  animation-name: enter;
}
[data-state="closed"] .data-\[state\=closed\]\:animate-out {
  animation-name: exit;
}

@layer base {
  .maplibregl-popup-content {
    @apply bg-transparent! shadow-none! p-0! rounded-none!;
  }
  .maplibregl-popup-tip {
    @apply hidden!;
  }
}

/* Logo inversion for dark mode */
.logo-invert-dark {
  filter: none;
}

.dark .logo-invert-dark {
  filter: brightness(0) invert(1);
}

/* Light mode: override hardcoded white text to use dark foreground */
:root:not(.dark) .text-white {
  color: var(--foreground) !important;
}

:root:not(.dark) .text-white\/70 {
  color: color-mix(in srgb, var(--foreground) 70%, transparent) !important;
}

:root:not(.dark) .text-white\/60 {
  color: color-mix(in srgb, var(--foreground) 60%, transparent) !important;
}

/* Keep white text on and inside colored schedule/calendar event blocks */
:root:not(.dark) .scheduler-event.text-white,
:root:not(.dark) .scheduler-event .text-white {
  color: white !important;
}