:root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --secondary: #10b981;
            --dark-bg: #111827;
            --card-bg: #1f2937;
            --card-hover: #2d3748;
            --text-primary: #f3f4f6;
            --text-secondary: #9ca3af;
            --border-color: #374151;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-primary);
            min-height: 100vh;
        }
        
        .bg-gradient {
            background: linear-gradient(135deg, #2e1065, #1e1b4b);
        }
        
        .card-shadow {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        .glow-effect {
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            box-shadow: 0 4px 10px rgba(99, 102, 241, 0.5);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(99, 102, 241, 0.6);
        }
        
        .glass-effect {
            backdrop-filter: blur(10px);
            background: rgba(31, 41, 55, 0.8);
        }
        
        .hero-pattern {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234f46e5' fill-opacity='0.1'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        .input-glow:focus {
            box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
        }
        
        .feature-card {
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
        }
        
        .service-card {
            transition: all 0.3s ease;
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--dark-bg);
        }
        
        ::-webkit-scrollbar-thumb {
            background: #4b5563;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }

/* Estilo para el campo de búsqueda en el encabezado */
header input[type="text"] {
    color: #000000 !important; /* Forzar el color del texto a negro */
}

/* Regla general para asegurar que el texto en inputs y textareas sea negro */
input[type="text"], textarea {
    color: #000000 !important;
}

/* Estilo para el placeholder */
input::placeholder, textarea::placeholder {
    color: #000000 !important; /* Color negro para el placeholder */
    opacity: 1; /* Asegura que el placeholder no sea transparente */
}

/* Para navegadores basados en Webkit (Chrome, Safari) */
::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 1;
}

/* Para Mozilla Firefox */
::-moz-placeholder {
    color: #000000 !important;
    opacity: 1;
}

/* Para Microsoft Edge */
:-ms-input-placeholder {
    color: #000000 !important;
    opacity: 1;
}

/* Para Internet Explorer 10+ */
:-ms-input-placeholder {
    color: #000000 !important;
    opacity: 1;
}

/* Estilo específico para el input del chat */
#chat-input {
    color: #000000 !important;
}

/* Estilos para inputs, selects y textareas dentro de formularios */
#appointment-form input, #appointment-form select, #appointment-form textarea {
    color: #000000 !important;
}

/* Estilo para el contenedor de mensajes del chat */
#chat-messages {
    color: #000000 !important; /* Asegura que el texto de los mensajes sea negro */
}

#chat-messages div {
    color: #000000 !important; /* Asegura que el texto de los mensajes individuales sea negro */
}

#appointment-form input::placeholder, #appointment-form select::placeholder, #appointment-form textarea::placeholder {
    color: #000000 !important;
    opacity: 1;
}

#appointment-form ::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 1;
}

#appointment-form ::-moz-placeholder {
    color: #000000 !important;
    opacity: 1;
}

#appointment-form :-ms-input-placeholder {
    color: #000000 !important;
    opacity: 1;
}

#appointment-form :-ms-input-placeholder {
    color: #000000 !important;
    opacity: 1;
}