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

@theme {
  --color-bunting-50: #f1f5fd;
  --color-bunting-100: #e0e9f9;
  --color-bunting-200: #c8d8f5;
  --color-bunting-300: #a3c0ed;
  --color-bunting-400: #779ee3;
  --color-bunting-500: #577eda;
  --color-bunting-600: #4262ce;
  --color-bunting-700: #3950bc;
  --color-bunting-800: #33429a;
  --color-bunting-900: #2e3b7a;
  --color-bunting-950: #1a1f3d;
}

/*
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/

html {
  font-size: 15px;
}

@media (max-width: 450px) {
  html {
    font-size: 12px;
  }
}



.inline-field {
  display: none;
}

.inline-edit .inline-field {
  display: initial;
}

.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 10px;
  margin: 10px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #909090;
}


.ai_message p {
  @apply mb-4;
}

.ai_message h1 {
  @apply text-2xl font-medium mt-6 mb-4;
}

.ai_message h2 {
  @apply text-xl font-medium mt-5 mb-3;
}

.ai_message h3 {
  @apply text-lg font-medium mt-4 mb-2;
}

.ai_message ul {
  @apply list-disc list-inside my-4;
}

.ai_message ol {
  @apply list-decimal list-inside my-4;
}

.ai_message li {
  @apply mb-1;
}

.ai_message a {
  @apply text-blue-500 hover:underline;
}

.ai_message blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 my-4;
}

.ai_message pre {
  @apply bg-gray-900 text-white p-4 rounded-md overflow-x-auto;
}

.ai_message code {
  @apply bg-gray-100 text-red-600 px-1 py-0.5 rounded;
}

.ai_message table {
  @apply w-full border-collapse border border-gray-300 my-4;
}

.ai_message th {
  @apply bg-gray-200 font-medium text-left p-2 border border-gray-300;
}

.ai_message td {
  @apply p-2 border border-gray-300;
}

.ai_message img {
  @apply max-w-full rounded-lg my-4;
}

.ai_message strong {
  @apply font-medium;
}

.ai_message li>p {
  @apply mb-0 inline;
}

.ai_message li>ul {
  @apply mt-0;
}

.fullscreen {
  @apply fixed top-0 left-0 w-full h-full z-50 bg-white;
}

label.required::after {
  @apply content-['*'] ml-1 text-red-500;
}

label.optional::after {
  @apply content-['(opcional)'] ml-1 text-gray-500;
}

.markdown {
  @apply leading-relaxed text-sm;

  p {
    @apply mb-4;
  }

  p:last-child {
    @apply mb-0;
  }

  h1 {
    @apply text-xl font-bold mb-6 mt-8 border-b border-gray-200 pb-2;
  }

  h2 {
    @apply text-lg font-bold mb-4 mt-6;
  }

  h3 {
    @apply text-lg font-bold mb-3 mt-5;
  }

  h4 {
    @apply text-lg font-semibold mb-2 mt-4;
  }

  h5 {
    @apply text-base font-semibold mb-2 mt-3;
  }

  h6 {
    @apply text-sm font-semibold mb-2 mt-3 text-gray-600 uppercase tracking-wide;
  }

  ul {
    @apply list-disc pl-6 mb-4 space-y-1;
  }

  ol {
    @apply list-decimal pl-6 mb-4 space-y-1;
  }

  li {
    @apply text-gray-700;
  }

  a {
    @apply text-blue-600 hover:text-blue-800 underline decoration-blue-600/30 hover:decoration-blue-600 transition-colors;
  }

  strong,
  b {
    @apply font-bold;
  }

  em,
  i {
    @apply italic text-gray-800;
  }

  code {
    @apply bg-gray-100 text-blue-900 px-1.5 py-0.5 rounded text-sm font-mono font-medium border border-gray-200;
  }

  pre {
    @apply bg-gray-50 border border-gray-200 rounded-lg p-4 overflow-x-auto mb-4;

    code {
      @apply bg-transparent border-none px-0 py-0 text-gray-800;
    }
  }

  blockquote {
    @apply border-l-4 border-blue-500 pl-4 py-2 my-4 bg-blue-50 text-gray-700 italic;
  }

  hr {
    @apply my-8 border-t-2 border-gray-200;
  }

  img {
    @apply max-w-full h-auto rounded-lg shadow-sm my-4;
  }

  table {
    @apply w-full border-collapse border border-gray-200 my-4 rounded-lg overflow-hidden;
  }

  th {
    @apply bg-gray-100 border border-gray-200 px-4 py-2 text-left font-semibold;
  }

  td {
    @apply border border-gray-200 px-4 py-2 text-gray-700;
  }

  tr:nth-child(even) {
    @apply bg-gray-50;
  }

  /* Nested lists */
  ul ul,
  ol ol,
  ul ol,
  ol ul {
    @apply mt-1 mb-0;
  }

  /* Code syntax highlighting support */
  .highlight {
    @apply rounded-lg overflow-hidden;
  }
}