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

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Quicksand:wght@300..700&display=swap');

/* Global Styles */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --font-quick: 'Quicksand', sans-serif;
    --font-inter: 'Inter', sans-serif;

    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 199 89% 48%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

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

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 199 89% 48%;

    --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 {
    /* Azul marino oscuro como base para el tema oscuro */
    --background: 215 50% 10%;
    --foreground: 210 40% 98%;

    --card: 215 50% 12%;
    --card-foreground: 210 40% 98%;

    --popover: 215 50% 12%;
    --popover-foreground: 210 40% 98%;

    --primary: 199 89% 48%;
    --primary-foreground: 210 40% 98%;

    --secondary: 215 50% 18%;
    --secondary-foreground: 210 40% 98%;

    --muted: 215 50% 16%;
    --muted-foreground: 215 20% 65%;

    --accent: 215 50% 18%;
    --accent-foreground: 210 40% 98%;

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

    --border: 215 50% 20%;
    --input: 215 50% 20%;
    --ring: 199 89% 48%;

    --sidebar-background: 215 50% 12%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 210 40% 98%;
    --sidebar-primary-foreground: 215 50% 10%;
    --sidebar-accent: 215 50% 18%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 215 50% 20%;
    --sidebar-ring: 199 89% 48%;
  }
}

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

  html {
    @apply transition-colors;
  }

  body {
    @apply bg-background font-inter text-foreground transition-colors;
  }
}

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

/* Mobile Nav */
#header.header-blur {
  @apply backdrop-blur supports-[backdrop-filter]:bg-background/60;
}

/* Payment Modal And Versions History Scrollbar */
#payment-modal::-webkit-scrollbar,
#versions-history::-webkit-scrollbar {
  @apply w-1.5 bg-transparent
}

#payment-modal::-webkit-scrollbar-thumb,
#versions-history::-webkit-scrollbar-thumb {
  @apply dark:bg-gray-500 bg-gray-400/70 rounded-md transition-colors;
}

#payment-modal::-webkit-scrollbar-thumb:hover,
#versions-history::-webkit-scrollbar-thumb:hover {
  @apply dark:bg-slate-400 bg-gray-400;
}

/* Quill Styles */
.ql-toolbar {
  display: flex;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  border: 1px solid #d1d5db !important;
  border-bottom: none !important;
  overflow-x: auto;
}

.dark .ql-toolbar {
  border-color: #192f4d !important;
}

.ql-container {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border: 1px solid #d1d5db !important;
  border-top: none !important;
  font-family: inherit;
  font-size: 0.875rem;
}

.dark .ql-container {
  border-color: #192f4d !important;
}

.ql-editor {
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
}

.dark .ql-editor::before {
  color: #d1d5db;
}

.ql-editor ol,
.ql-editor ul {
  padding-left: 0;
}

.ql-editor li {
  padding-left: 1em;
}

.ql-editor p {
  margin-bottom: .2rem;
}

.ql-editor p:last-child {
  margin-bottom: 0;
}

.ql-snow .ql-formats {
  display: flex;
}

.ql-snow .ql-picker {
  color: #374151;
}

.ql-snow .ql-stroke {
  stroke: #374151;
}

.dark .ql-snow .ql-stroke {
  stroke: #d1d5db !important;
}

.ql-snow .ql-fill {
  fill: #374151;
}

.dark .ql-snow .ql-fill {
  fill: #d1d5db !important;
}

#plugin-description p {
  color: inherit;
}

#plugin-description p strong,
#plugin-description p b,
#plugin-description p em,
#plugin-description p i,
#plugin-description p u,
#plugin-description p small,
#plugin-description p mark,
#plugin-description p del,
#plugin-description p ins,
#plugin-description p a {
  color: inherit;
}

#plugin-description ol li[data-list="bullet"] {
  list-style-type: disc;
}
#plugin-description ol li[data-list="bullet"]::marker {
  color: #d1d5db;
}

/* Date Picker */
.dark [type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Plugin Cards Horizontal Scroll */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-scroll {
  animation: scroll 20s linear infinite;
}

.animate-scroll:hover {
  animation-play-state: paused;
}