@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
/* 
Rosado: [#D90B6B] 
Violta: [#400135]

*/


/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@utility base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  :root {
    --radius: 0.5rem;
  }
}
@utility text-balance {
  text-wrap: balance;
}
/* Aplica los estilos solo a elementos con la clase .custom-scrollbar */
.sidebar-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.sidebar-scrollbar::-webkit-scrollbar-track {
  background: #b351dd; /* gris claro */
}

.sidebar-scrollbar::-webkit-scrollbar-thumb {
  background: #ffaace; /* azul Tailwind */
  border-radius: 4px;
  transition: background-color 1s ease;
}

.sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #ff8bbb; /* azul más oscuro */
  transition: background-color 1s ease;
}


.markdown-content h1 {
  @apply text-3xl font-bold my-4;
}

.markdown-content h2 {
  @apply text-2xl font-bold my-3;
}

.markdown-content p {
  @apply my-2;
}

.markdown-content a {
  @apply text-blue-500 underline;
}

.markdown-content ul {
  @apply list-disc pl-5 my-2;
}

.markdown-content ol {
  @apply list-decimal pl-5 my-2;
}

.markdown-content img {
  @apply my-4 rounded-lg;
}

.markdown-content blockquote {
  @apply border-l-4 border-gray-400 pl-4 italic my-4;
}

.markdown-content code {
  @apply text-green-500 p-1 rounded max-lg:text-sm;
}

.markdown-content pre {
  @apply bg-gray-700 p-4 rounded my-4;
}

@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: 240 5.9% 10%;
    --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: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .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: 0 0% 98%;
    --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: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/*
  ---break---
*/

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}