/* Paleta de colores refinada */
:root {
   --primary-color: #2c3e50 !important; /* Azul oscuro elegante */
   --secondary-color: #95a5a6 !important; /* Gris claro suave */
   --accent-color: #ecf0f1 !important; /* Fondo claro */
   --text-color: #2c3e50 !important; /* Color de texto oscuro */
   --highlight-color: #3498db !important; /* Azul vibrante para botones y enlaces */
}

/* Botones */
.btn {
   font-size: 1rem !important;
   border-radius: 20px !important;
   background-color: var(--primary-color) !important;
   color: #fff !important;
   border: none !important;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
   transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.btn:hover {
   background-color: var(--highlight-color) !important;
   transform: translateY(-2px) !important;
}

/* Enlaces */
a {
   color: var(--primary-color) !important;
   text-decoration: none !important;
   transition: color 0.3s ease !important;
}

a:hover {
   color: var(--highlight-color) !important;
}

/* Inputs y Textareas */
input[type="text"], input[type="email"], input[type="password"], textarea {
   width: 100% !important;
   border: 2px solid var(--secondary-color) !important;
   border-radius: 8px !important;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
   transition: border-color 0.3s ease !important;
}

input:focus {
   border-color: var(--primary-color) !important;
   outline: none !important;
}

/* Tarjetas */
.card {
   background-color: var(--accent-color) !important;
   border-radius: 12px !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
   transition: box-shadow 0.3s ease !important;
}

.card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Animaciones */
.fade-in {
   opacity: 0 !important;
   transform: translateY(10px) !important;
   transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.fade-in.visible {
   opacity: 1 !important;
   transform: translateY(0) !important;
}