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

@layer components {
    .nav-link {
        @apply relative text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white font-medium text-sm transition-colors duration-200;
    }

    .nav-link-underline {
        @apply absolute -bottom-0.5 left-0 w-0 h-0.5 bg-black dark:bg-gray-300 transition-all duration-300 group-hover:w-full;
    }

    .btn-primary {
        @apply inline-flex items-center px-5 py-2.5 bg-black dark:bg-gray-300 text-gray-300 dark:text-black text-sm font-semibold rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-all duration-200 shadow-sm hover:shadow-md;
    }

    .btn-secondary {
        @apply inline-flex items-center px-5 py-2.5 border-2 border-gray-900 dark:border-gray-300 text-gray-900 dark:text-white text-sm font-semibold rounded-lg hover:bg-gray-50 dark:hover:bg-gray-950 transition-all duration-200;
    }

    .theme-toggle {
        @apply p-2.5 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200;
    }

    .theme-icon {
        @apply w-5 h-5 text-gray-700 dark:text-gray-300;
    }

    .mobile-menu-btn {
        @apply p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors duration-200;
    }

    .hamburger-box {
        @apply w-6 h-5 relative flex flex-col justify-between;
    }

    .hamburger-line {
        @apply h-0.5 w-full bg-gray-900 dark:bg-white rounded-full transition-all duration-300;
    }

    .mobile-menu-btn.active .hamburger-line:first-child {
        @apply rotate-45 translate-y-2;
    }

    .mobile-menu-btn.active .hamburger-line:nth-child(2) {
        @apply opacity-0;
    }

    .mobile-menu-btn.active .hamburger-line:last-child {
        @apply -rotate-45 -translate-y-2;
    }

    .mobile-link {
        @apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-950 rounded-lg transition-colors duration-200 text-sm font-medium;
    }

    .mobile-link-outlined {
        @apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 border-2 border-gray-900 dark:border-white hover:bg-gray-50 dark:hover:bg-gray-950 rounded-lg transition-colors duration-200 text-sm font-semibold;
    }

    .mobile-link-primary {
        @apply flex items-center px-4 py-3 bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-100 rounded-lg transition-colors duration-200 text-sm font-semibold;
    }

    .title {
        @apply text-center text-4xl font-bold text-gray-900 dark:text-gray-300 mb-4;
    }

    .text-content {
        @apply mt-1 text-sm text-gray-600 dark:text-gray-400;
    }

    .button {
        @apply inline-flex items-center px-5 py-2.5 bg-black dark:bg-gray-300 text-white dark:text-black font-semibold rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors duration-200 shadow-sm hover:shadow-md;
    }

    .table-container {
        @apply bg-white dark:bg-gray-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden;
    }

    .table-responsive {
        @apply overflow-x-auto;
    }

    .table-modern {
        @apply w-full;
    }

    .table-header {
        @apply bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800;
    }

    .table-header-cell {
        @apply px-6 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider;
    }

    .table-body {
        @apply divide-y divide-gray-100 dark:divide-gray-800;
    }

    .table-row {
        @apply hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors;
    }

    .table-cell {
        @apply px-6 py-4 text-sm text-gray-600 dark:text-gray-400;
    }

    /* Estados y Badges */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .badge-success {
        @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
    }

    .badge-warning {
        @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
    }

    .badge-info {
        @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
    }

    .badge-danger {
        @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
    }

    /* Botones de Acción */
    .action-button {
        @apply p-1.5 text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800;
    }

    .action-button-primary {
        @apply p-1.5 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors;
    }

    .action-button-danger {
        @apply p-1.5 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors;
    }

    /* Toolbar */
    .table-toolbar {
        @apply px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900;
    }

    /* Paginación */
    .pagination-container {
        @apply px-6 py-4 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900;
    }

    .pagination-button {
        @apply px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors;
    }

    .pagination-button-active {
        @apply px-3 py-1 text-sm text-white bg-black dark:bg-white dark:text-black rounded-lg;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .table-row {
        animation: fadeIn 0.3s ease-out;
    }

    .label-gray {
        @apply inline-flex items-center px-3 py-1 text-xs font-medium text-gray-700 bg-gray-100 dark:text-gray-400 dark:bg-gray-800 rounded-full;
    }

    .label-blue {
        @apply inline-flex items-center px-3 py-1 text-xs font-medium text-blue-700 bg-blue-100 dark:text-blue-400 dark:bg-blue-900/20 rounded-full;
    }

    .card-form {
        @apply bg-white dark:bg-gray-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 p-6 md:p-8;
    }

    /* Form Grid Layouts */
    .form-grid {
        @apply grid grid-cols-1 md:grid-cols-2 gap-6;
    }

    .form-row {
        @apply grid grid-cols-1 md:grid-cols-2 gap-6;
    }

    /* Labels */
    .label {
        @apply block text-sm font-semibold text-gray-700 dark:text-gray-300;
    }

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

    /* Inputs Base */
    .input {
        @apply w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent transition-all duration-200 placeholder:text-gray-400 dark:placeholder:text-gray-600;
    }

    .input:hover:not(:focus) {
        @apply border-gray-400 dark:border-gray-600;
    }

    .select {
        @apply w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent transition-all duration-200 cursor-pointer;
    }

    .textarea {
        @apply w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent transition-all duration-200 placeholder:text-gray-400 dark:placeholder:text-gray-600 resize-none;
    }

    .input-group {
        @apply relative;
    }

    .checkbox {
        @apply w-4 h-4 text-black dark:text-white bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-black dark:focus:ring-white;
    }

    .checkbox-container {
        @apply flex items-center cursor-pointer;
    }

    .checkbox-label {
        @apply ml-2 text-sm text-gray-700 dark:text-gray-300;
    }

    .alert {
        @apply p-4 rounded-lg mb-6;
    }

    .alert-error {
        @apply bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 border border-red-200 dark:border-red-800 flex items-center gap-3;
    }

    .alert-success {
        @apply bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-400 border border-green-200 dark:border-green-800 flex items-center gap-3;
    }

    .alert-warning {
        @apply bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-800 flex items-center gap-3;
    }

    .alert-info {
        @apply bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 border border-blue-200 dark:border-blue-800 flex items-center gap-3;
    }

    .form-actions {
        @apply flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-200 dark:border-gray-800;
    }

    @media (max-width: 640px) {
        .form-actions {
            @apply flex-col-reverse w-full;
        }

        .form-actions > * {
            @apply w-full;
        }
    }

    .input:disabled, .select:disabled, .textarea:disabled {
        @apply bg-gray-50 dark:bg-gray-900 cursor-not-allowed opacity-60;
    }

    .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
        @apply outline-none ring-2 ring-black dark:ring-white ring-offset-2;
    }

    .dropdown {
        @apply relative min-w-64 bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 p-1;
    }

    .dropdown-link {
        @apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
    }

    /* FLECHA MEJORADA - Ahora sí se verá puntiaguda */
    .dropdown-arrow {
        position: absolute;
        width: 10px;
        height: 10px;
    }

    .dropdown-arrow::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: white;
        border: 1px solid rgb(229 231 235);
        transform: rotate(45deg);
    }

    .dark .dropdown-arrow::before {
        background: rgb(17 24 39);
        border-color: rgb(55 65 81);
    }

    /* Posicionamiento para bottom (dropdown abajo del botón) */
    .dropdown-arrow[data-popper-placement^='bottom'] {
        top: -5px;
    }

    .dropdown-arrow[data-popper-placement^='bottom']::before {
        border-bottom: 0;
        border-right: 0;
    }

    /* Posicionamiento para top (dropdown arriba del botón) */
    .dropdown-arrow[data-popper-placement^='top'] {
        bottom: -5px;
    }

    .dropdown-arrow[data-popper-placement^='top']::before {
        border-top: 0;
        border-left: 0;
    }

    /* Posicionamiento para left (dropdown a la izquierda) */
    .dropdown-arrow[data-popper-placement^='left'] {
        right: -5px;
    }

    .dropdown-arrow[data-popper-placement^='left']::before {
        border-left: 0;
        border-bottom: 0;
    }

    /* Posicionamiento para right (dropdown a la derecha) */
    .dropdown-arrow[data-popper-placement^='right'] {
        left: -5px;
    }

    .dropdown-arrow[data-popper-placement^='right']::before {
        border-right: 0;
        border-top: 0;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */