@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Tailwind via CDN - añadir en _Host.cshtml o App.razor */
/* <script src="https://cdn.tailwindcss.com"></script> */

:root {
    --primary-color: #1e40af;
    --secondary-color: #64748b;
}

html, body {
    font-family: 'Inter', sans-serif;
}

/* Componentes personalizados */
.btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors;
}

.btn-secondary {
    @apply px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors;
}

.card {
    @apply bg-white rounded-lg shadow p-6;
}

.input {
    @apply w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Estados de carga */
.loading {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Navegación activa */
.nav-link.active {
    @apply bg-slate-700;
}

/* Tablas */
.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply w-full text-sm;
}

.table th {
    @apply text-left p-3 bg-gray-100 font-medium text-gray-700;
}

.table td {
    @apply p-3 border-b;
}

.table tr:hover {
    @apply bg-gray-50;
}

/* Badges */
.badge {
    @apply px-2 py-1 rounded text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-700;
}

.badge-warning {
    @apply bg-amber-100 text-amber-700;
}

.badge-info {
    @apply bg-blue-100 text-blue-700;
}

.badge-gray {
    @apply bg-gray-100 text-gray-700;
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-bar-fill {
    @apply bg-green-500 h-2 rounded-full transition-all;
}

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

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto;
}

/* Toast notifications */
.blazored-toast {
    @apply rounded-lg shadow-lg;
}

/* Formulario S-89 */
.s89-form {
    @apply border-2 border-gray-300 rounded-lg p-6 max-w-sm;
}

.s89-header {
    @apply text-center border-b pb-3 mb-4;
}

.s89-field {
    @apply mb-3;
}

.s89-label {
    @apply text-xs text-gray-500;
}

.s89-value {
    @apply font-medium;
}

.s89-cualidad {
    @apply bg-blue-50 border border-blue-200 rounded p-3 mt-4;
}