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

@layer components {
    /* Titulos */
    .section-heading {
        @apply text-lg font-semibold text-gray-700;
    }

    /* Titulos - Fin */
    /* Botones */
    .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-dark transition-colors duration-200;
    }

    .btn-secondary {
        @apply bg-white text-primary border border-primary px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors duration-200;
    }

    .btn-danger {
        @apply bg-white text-red-600 border border-red-200 px-4 py-2 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors duration-200;
    }

    .btn-icon {
        @apply p-2 text-gray-500 hover:text-primary rounded-lg transition-colors duration-200;
    }

    /* Botones - Fin */
    /* Formulario */
    .form-label {
        @apply block text-sm font-medium text-gray-700;
    }

    .form-input {
        @apply mt-1 block w-full rounded-lg border-gray-200 shadow-sm focus:border-primary focus:ring-primary sm:text-sm disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed;
    }

    .form-submit {
        @apply bg-primary text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors duration-200;
    }

    .form-cancel {
        @apply bg-white text-gray-700 border border-gray-200 py-2 px-4 rounded-lg text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors duration-200;
    }

    /* Formulario Fin */
    /* Tabs */
    .active-tab {
        @apply relative px-4 py-2 text-primary font-medium border-b-2 border-primary;
    }

    .inactive-tab {
        @apply relative px-4 py-2 text-gray-500 hover:text-primary font-medium border-b-2 border-transparent hover:border-gray-200;
    }

    /* Tabs Fin */
    /* Paginación */
    .pagy {
        @apply flex space-x-1 font-medium text-sm;

        a:not(.gap) {
            @apply block rounded-lg px-3 py-1 transition-colors;
            @apply text-sm bg-gray-50;

            &:hover {
                @apply bg-gray-100;
            }

            &:not([href]) {
                @apply text-sm bg-white cursor-default;
            }

            &.current {
                @apply text-white bg-primary hover:bg-primary-dark;
            }
        }

        label {
            @apply inline-block whitespace-nowrap bg-gray-50 rounded-lg px-3 py-0.5;

            input {
                @apply bg-white border-none rounded-md text-sm;
            }
        }
    }

    /* Paginación Fin */

}