/* Estilos específicos para las páginas de autenticación */

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Aplicar animaciones */
.auth-container {
    animation: fadeInUp 0.6s ease-out;
}

.auth-form {
    animation: fadeIn 0.8s ease-out;
}

/* Estilos para el formulario de login */
.login-form {
    @apply space-y-6;
}

.login-form .form-group {
    @apply space-y-2;
}

.login-form .form-label {
    @apply block text-sm font-medium text-gray-700;
}

.login-form .form-input {
    @apply appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-all duration-200;
}

.login-form .form-input:focus {
    @apply ring-2 ring-indigo-500 border-indigo-500 shadow-sm;
}

.login-form .form-input.error {
    @apply border-red-300 focus:ring-red-500 focus:border-red-500;
}

.login-form .form-input.success {
    @apply border-green-300 focus:ring-green-500 focus:border-green-500;
}

/* Estilos para iconos de formulario */
.form-icon {
    @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400;
}

.form-icon.error {
    @apply text-red-400;
}

.form-icon.success {
    @apply text-green-400;
}

/* Estilos para botones */
.btn-login {
    @apply group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200;
}

.btn-login:hover:not(:disabled) {
    @apply transform -translate-y-0.5 shadow-lg;
}

.btn-login:active {
    @apply transform translate-y-0;
}

/* Estilos para el botón de mostrar/ocultar contraseña */
.password-toggle {
    @apply absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none transition-colors duration-200;
}

.password-toggle:hover {
    @apply text-gray-600;
}

/* Estilos para checkboxes */
.checkbox-container {
    @apply flex items-center;
}

.checkbox-input {
    @apply h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded transition-colors duration-200;
}

.checkbox-label {
    @apply ml-2 block text-sm text-gray-900;
}

/* Estilos para enlaces */
.auth-link {
    @apply font-medium text-indigo-600 hover:text-indigo-500 transition-colors duration-200;
}

.auth-link:hover {
    @apply text-indigo-500;
}

/* Estilos para alertas */
.alert {
    @apply px-4 py-3 rounded-md transition-all duration-300;
}

.alert-error {
    @apply bg-red-50 border border-red-200 text-red-700;
}

.alert-success {
    @apply bg-green-50 border border-green-200 text-green-700;
}

.alert-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-700;
}

.alert-info {
    @apply bg-blue-50 border border-blue-200 text-blue-700;
}

/* Estilos para mensajes de error de campo */
.field-error {
    @apply mt-1 text-sm text-red-600;
}

.field-success {
    @apply mt-1 text-sm text-green-600;
}

/* Estilos para el loading overlay */
.loading-overlay {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 transition-opacity duration-300;
}

.loading-content {
    @apply relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white transform transition-all duration-300;
}

.loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600;
}

/* Estilos para el fondo */
.auth-background {
    @apply bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen;
}

.auth-pattern {
    @apply absolute inset-0 opacity-20;
}

/* Estilos para el contenedor principal */
.auth-main-container {
    @apply relative min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8;
}

.auth-content-container {
    @apply max-w-md w-full space-y-8;
}

/* Estilos para el header de auth */
.auth-header {
    @apply text-center;
}

.auth-logo {
    @apply mx-auto h-16 w-16 bg-indigo-600 rounded-full flex items-center justify-center shadow-lg;
}

.auth-title {
    @apply mt-6 text-3xl font-extrabold text-gray-900;
}

.auth-subtitle {
    @apply mt-2 text-sm text-gray-600;
}

/* Estilos para el formulario container */
.auth-form-container {
    @apply bg-white py-8 px-6 shadow-xl rounded-lg sm:px-10;
}

/* Estilos para el footer de auth */
.auth-footer {
    @apply text-center text-sm text-gray-500;
}

/* Estilos para el recordar sesión */
.remember-container {
    @apply flex items-center justify-between;
}

.remember-checkbox {
    @apply flex items-center;
}

.remember-link {
    @apply text-sm;
}

/* Estilos para el enlace de registro */
.register-container {
    @apply text-center;
}

.register-text {
    @apply text-sm text-gray-600;
}

/* Estilos para el botón de envío */
.submit-container {
    @apply space-y-4;
}

.submit-button {
    @apply group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200;
}

.submit-button:hover:not(:disabled) {
    @apply transform -translate-y-0.5 shadow-lg;
}

.submit-button:active {
    @apply transform translate-y-0;
}

.submit-icon {
    @apply absolute left-0 inset-y-0 flex items-center pl-3;
}

.submit-text {
    @apply text-sm font-medium;
}

/* Estilos para el icono de login */
.login-icon {
    @apply text-indigo-500 group-hover:text-indigo-400 transition-colors duration-200;
}

.login-icon.spinning {
    @apply animate-spin;
}

/* Estilos para el estado de loading */
.loading-state .submit-button {
    @apply opacity-50 cursor-not-allowed;
}

.loading-state .submit-text {
    @apply text-indigo-200;
}

.loading-state .login-icon {
    @apply animate-spin;
}

/* Estilos para el estado de error */
.error-state .form-input {
    @apply border-red-300 focus:ring-red-500 focus:border-red-500;
}

.error-state .form-icon {
    @apply text-red-400;
}

/* Estilos para el estado de éxito */
.success-state .form-input {
    @apply border-green-300 focus:ring-green-500 focus:border-green-500;
}

.success-state .form-icon {
    @apply text-green-400;
}

/* Estilos responsivos */
@media (max-width: 640px) {
    .auth-form-container {
        @apply px-4 py-6;
    }
    
    .auth-title {
        @apply text-2xl;
    }
    
    .auth-logo {
        @apply h-12 w-12;
    }
}

/* Estilos para el focus visible */
.focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
}

/* Estilos para el scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Estilos para el texto truncado */
.text-truncate {
    @apply overflow-hidden whitespace-nowrap text-ellipsis;
}

/* Estilos para el placeholder personalizado */
.form-input::placeholder {
    @apply text-gray-400;
}

.form-input:focus::placeholder {
    @apply text-gray-300;
}

/* Estilos para el estado de hover en inputs */
.form-input:hover:not(:focus) {
    @apply border-gray-400;
}

/* Estilos para el estado de active en inputs */
.form-input:active {
    @apply border-indigo-500;
}

/* Estilos para el estado de disabled en inputs */
.form-input:disabled {
    @apply bg-gray-50 text-gray-500 cursor-not-allowed;
}

/* Estilos para el estado de readonly en inputs */
.form-input[readonly] {
    @apply bg-gray-50 text-gray-500 cursor-default;
}

/* Estilos para el estado de required en inputs */
.form-input:required {
    @apply border-gray-300;
}

.form-input:required:invalid {
    @apply border-red-300;
}

.form-input:required:valid {
    @apply border-green-300;
}

/* Estilos para el estado de autofill en inputs */
.form-input:-webkit-autofill {
    @apply bg-yellow-50;
}

.form-input:-webkit-autofill:focus {
    @apply bg-yellow-50;
}

/* Estilos para el estado de autofill en inputs */
.form-input:-webkit-autofill:hover {
    @apply bg-yellow-50;
}

.form-input:-webkit-autofill:active {
    @apply bg-yellow-50;
}