html {
    scroll-behavior: auto;
}

select[readonly] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    pointer-events: none;
    touch-action: none;
}

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

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentcolor);
    }
}

html {
    font-size: 17px;
}

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

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