/* ================================================
 * CRUDs Styling - tienda3d v2.1
 * ================================================ */

/* Botones principales */
.btn-primary {
    @apply px-6 py-2 bg-gradient-to-r from-purple-600 to-sky-600 hover:from-purple-700 hover:to-sky-700 text-white font-semibold rounded-lg transition transform hover:-translate-y-0.5 active:translate-y-0;
}

.btn-secondary {
    @apply px-6 py-2 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-lg transition;
}

.btn-danger {
    @apply px-6 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition;
}

/* Tablas responsive */
.tabla-responsive {
    @apply w-full border-collapse;
}

.tabla-responsive thead {
    @apply bg-gradient-to-r from-purple-600 to-sky-600 text-white;
}

.tabla-responsive th {
    @apply px-4 py-3 text-left font-semibold;
}

.tabla-responsive td {
    @apply px-4 py-3 border-b border-gray-200 dark:border-gray-700;
}

.tabla-responsive tbody tr {
    @apply hover:bg-purple-50 dark:hover:bg-gray-800 transition;
}

.tabla-responsive tbody tr:nth-child(even) {
    @apply bg-gray-50 dark:bg-gray-900;
}

/* Cards de productos */
.product-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 border-l-4 border-purple-500 overflow-hidden;
}

.product-card:hover {
    @apply -translate-y-1;
}

.product-image {
    @apply w-full h-48 object-cover;
}

.product-placeholder {
    @apply w-full h-48 bg-gradient-to-br from-purple-200 to-sky-200 dark:from-purple-900 dark:to-sky-900 flex items-center justify-center text-5xl;
}

/* Modales */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply sticky top-0 bg-gradient-to-r from-purple-600 to-sky-600 text-white px-6 py-4 flex justify-between items-center;
}

.modal-title {
    @apply text-2xl font-bold;
}

.modal-close {
    @apply text-white hover:text-gray-200 text-2xl cursor-pointer;
}

.modal-body {
    @apply p-6 space-y-4;
}

.modal-footer {
    @apply flex gap-4 pt-6 border-t border-gray-200 dark:border-gray-700;
}

/* Formularios */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
}

.form-input,
.form-textarea,
.form-select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent transition;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    @apply outline-none ring-2 ring-purple-500 ring-opacity-50;
}

/* Grid layouts */
.grid-productos {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.grid-clientes {
    @apply grid grid-cols-1 gap-4;
}

/* Estado badges */
.badge {
    @apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
}

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

.badge-inactivo {
    @apply bg-gray-100 dark:bg-gray-900/30 text-gray-800 dark:text-gray-300;
}

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

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

/* Info boxes */
.info-box {
    @apply bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded mb-4;
}

.success-box {
    @apply bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4 rounded mb-4;
}

.warning-box {
    @apply bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4 rounded mb-4;
}

.error-box {
    @apply bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded mb-4;
}

/* Calculador de costo */
.costo-box {
    @apply bg-gradient-to-br from-purple-50 to-sky-50 dark:from-purple-900/20 dark:to-sky-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4;
}

.costo-item {
    @apply flex justify-between items-center py-2;
}

.costo-item-label {
    @apply text-sm text-gray-700 dark:text-gray-300;
}

.costo-item-valor {
    @apply font-mono font-semibold text-gray-900 dark:text-white;
}

.costo-total {
    @apply text-lg font-bold text-purple-600 dark:text-purple-400 border-t-2 border-purple-300 dark:border-purple-700 pt-2 mt-2;
}

.costo-precio {
    @apply text-2xl font-bold text-sky-600 dark:text-sky-400 border-t-2 border-purple-300 dark:border-purple-700 pt-2 mt-2;
}

/* Búsqueda y filtros */
.search-box {
    @apply flex-1 px-4 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-600 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-purple-500 transition;
}

.filter-chip {
    @apply inline-block px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600 transition mr-2 mb-2;
}

.filter-chip.active {
    @apply bg-purple-600 dark:bg-purple-700 text-white;
}

/* Paginación */
.pagination {
    @apply flex justify-center gap-2 mt-8;
}

.pagination-btn {
    @apply px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 transition;
}

.pagination-btn.active {
    @apply bg-purple-600 text-white border-purple-600;
}

.pagination-btn:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content {
        @apply max-h-full overflow-y-auto;
    }

    .grid-productos {
        @apply grid-cols-1;
    }

    .tabla-responsive {
        @apply text-sm;
    }

    .tabla-responsive th,
    .tabla-responsive td {
        @apply px-2 py-2;
    }

    .form-label {
        @apply text-xs;
    }

    .form-input,
    .form-textarea,
    .form-select {
        @apply py-1.5 text-sm;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        @apply px-4 py-2 text-sm;
    }
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Dark mode específico */
.dark .form-input::placeholder,
.dark .form-textarea::placeholder {
    @apply text-gray-500;
}

.dark .tabla-responsive thead {
    @apply bg-gradient-to-r from-purple-700 to-sky-700;
}

.dark .modal-header {
    @apply bg-gradient-to-r from-purple-700 to-sky-700;
}