/* Importación de Google Fonts */ /* ¡IMPORTANTE! Asegúrate de que esta línea esté en la sección de tu archivo HTML: */ /* */ @font-face { font-family: "bootstrap-icons"; src: url("/css/fonts/bootstrap-icons.woff2") format("woff2"), url("/css/fonts/bootstrap-icons.woff") format("woff"); font-display: swap; font-weight: normal; font-style: normal; } body { /* Eliminamos bg-light del body en HTML y lo definimos aquí */ background: radial-gradient(circle at top left, #17153b 0%, #0d0c26 100%); background-attachment: fixed; color: #ffffff; /* Color de texto general blanco */ font-family: "Open Sans", Arial, sans-serif; line-height: 1.6; } .container.py-5 { /* Centrar el contenedor principal */ display: flex; justify-content: center; align-items: center; min-height: 100vh; /* Para que ocupe al menos toda la altura de la ventana */ padding: 20px; } .auth-card { max-width: 400px; /* Ancho máximo para la tarjeta de autenticación */ width: 100%; background-color: #2e236c; /* Fondo oscuro de la tarjeta, similar a tus cards del memorial */ border-radius: 10px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08); padding: 20px 30px; /* Relleno interno de la tarjeta */ } .auth-card .card-body { padding: 0; /* Elimina el padding extra del card-body si lo hay */ } .auth-card h3 { font-family: "Playfair Display", Georgia, serif; color: #acacd6; /* Color de títulos */ font-weight: 700; margin-bottom: 20px; } .auth-card .form-control { background-color: #433d8b; /* Fondo para los campos de texto */ border: 1px solid #5a5198; /* Borde de los campos de texto */ color: #ffffff; /* Color del texto que se escribe */ border-radius: 5px; padding: 10px 15px; } .auth-card .form-control::placeholder { color: #c0c0e0; /* Color del placeholder */ opacity: 0.8; } .auth-card .form-control:focus { background-color: #5a5198; /* Color al enfocar el campo */ border-color: #acacd6; box-shadow: 0 0 0 0.25rem rgba(172, 172, 214, 0.25); /* Sombra de enfoque */ color: #ffffff; } .auth-card .btn-primary { background-color: #acacd6; /* Color principal para botones (como Entrar/Registrarse) */ border-color: #acacd6; color: #17153b; /* Texto oscuro para el botón principal */ font-weight: 600; transition: all 0.3s ease; } .auth-card .btn-primary:hover { background-color: #c0c0e0; /* Color más claro al hover */ border-color: #c0c0e0; color: #0d0c26; /* Texto más oscuro al hover */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .auth-card .btn-google { background-color: #c8acd6; /* Color de Google */ border-color: #c8acd6; color: #ffffff; font-weight: 600; transition: all 0.3s ease; } .auth-card .btn-google:hover { background-color: #17153b; border-color: #17153b; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .auth-card .text-muted { color: #c0c0e0 !important; /* Tu color de texto mutado */ } .auth-card a.text-decoration-none { color: #acacd6; /* Color de enlaces */ transition: color 0.3s ease; } .auth-card a.text-decoration-none:hover { color: #ffffff; /* Color de enlaces al hover */ } .auth-card .divider p { color: #c0c0e0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1); width: 100%; line-height: 0.1em; margin: 10px 0 20px; } .auth-card .divider p span { background: #2e236c; padding: 0 10px; } .auth-card .divider { display: flex; /* Ya tienes flex en el HTML, esto lo refuerza */ align-items: center; text-align: center; color: #fefcf7; /* Color beige suave para el texto "O" si lo hay */ margin: 20px 0; /* Espacio arriba y abajo del separador */ } /* La línea horizontal que acompaña al texto */ .auth-card .divider::before, .auth-card .divider::after { content: ""; flex: 1; /* Para que ocupen el espacio restante a los lados */ border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Una línea más clara y visible */ } .auth-card .divider:not(:empty)::before { margin-right: 0.25em; /* Espacio entre la línea y el texto si hay texto */ } .auth-card .divider:not(:empty)::after { margin-left: 0.25em; /* Espacio entre la línea y el texto si hay texto */ } /* Estilos para la alerta */ #alert { background-color: #433d8b; color: #fff; border: none; position: fixed; /* Para que aparezca sobre todo */ top: 20px; left: 50%; transform: translateX(-50%); z-index: 1050; /* Más alto que los modales de Bootstrap */ max-width: 600px; width: 90%; text-align: center; } #alert .btn-close { filter: invert(1); /* Hace que la X blanca */ } /* Responsividad para pantallas pequeñas */ @media (max-width: 768px) { .auth-card { padding: 20px; } } /* --- NUEVA REGLA PARA LOS PÁRRAFOS DE "¿No tienes cuenta?" / "¿Ya tienes cuenta?" --- */ .auth-card p.mt-4.text-center, /* Apunta al párrafo de "No tienes cuenta?" */ .auth-card p.mt-3.text-center /* Apunta al párrafo de "Ya tienes cuenta?" */ { color: #fefcf7 !important; /* Usamos !important para asegurar que sobreescriba cualquier otro color, como text-muted */ font-weight: 500; /* Un poco más de peso para que sea más legible */ } /* Aseguramos que los enlaces dentro de esos párrafos tengan el color deseado y el hover */ .auth-card p.text-center a.text-decoration-none { color: #acacd6 !important; /* Tu color de títulos/enlaces principales, con !important */ text-decoration: none; transition: color 0.3s ease; } .auth-card p.text-center a.text-decoration-none:hover { color: #ffffff !important; /* Blanco puro al pasar el ratón, con !important */ }