/* static/css/styles.css */

body {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    /* Aquí puedes añadir otros estilos globales como el color de fondo, etc. */
}

/* Puedes usar los diferentes grosores que importaste así: */
h1, h2 {
    font-weight: 700; /* Bold */
}

p {
    font-weight: 400; /* Regular */
}

a, button {
    font-weight: 500; /* Medium */
}

/* static/hipotecas/css/styles.css */

/* Estilos para la cabecera (header) */
.site-header {
    background-color: #0A2540 !important; /* El azul profesional que elegimos */
    color: #FFFFFF !important; /* Texto en color blanco para un contraste perfecto */
}
/* Aplica el color de fondo directamente a la barra de navegación dentro del header */
.site-header .navbar {
    background-color: #0A2540; /* El azul profesional que elegimos */
}

.navbar-dark .navbar-toggler {
    border: none;
}

/* 2. Quitamos el recuadro azul que aparece al hacer clic (focus) */
.navbar-dark .navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

/* 3. Forzamos que el icono de las 3 rayas sea blanco puro */
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Estilos para el pie de página (footer) */
.site-footer {
    background-color: #0A2540; /* Usamos el mismo azul para consistencia */
    color: #FFFFFF; /* Texto también en blanco */
    padding: 30px 40px; /* Un poco más de espaciado que la cabecera */
    text-align: center; /* Centra el texto del copyright */
    margin-top: 50px; /* Un margen superior para separarlo del contenido principal */
}

/* --- Un toque extra: Estilos para los enlaces --- */
.site-header a {
    color: #FFFFFF; /* Los enlaces dentro de la cabecera también serán blancos */
    text-decoration: none; /* Quitamos el subrayado por defecto */
    margin-left: 15px; /* Espacio entre los enlaces de navegación */
    font-weight: 500; /* Un grosor de fuente medio, como importamos de Google Fonts */
    transition: color 0.3s ease; /* Una transición suave para el cambio de color */
}

.site-header a:hover {
    color: #A0AEC0; /* Un gris claro al pasar el ratón para dar feedback visual */
}

/* =================================================================
   ESTILOS PERSONALIZADOS PARA EL ACORDEÓN DE PREGUNTAS FRECUENTES (FAQ)
   ================================================================= */

/* Estilo general del item del acordeón */
.accordion-item {
    border-radius: .5rem;
    border: 1px solid #e9ecef; /* Borde suave */
    margin-bottom: 1rem;
    overflow: hidden; /* Para que el borde redondeado se aplique bien */
    transition: box-shadow 0.3s ease-in-out;
}

.accordion-item:hover {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.07);
}

/* Estilo del botón (la pregunta) */
.accordion-button {
    font-weight: 700; /* Letra en negrita */
    color: #212529; /* Color de texto oscuro */
    background-color: #fff;
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

/* Elimina la sombra de Bootstrap al hacer clic */
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

/* Estilo del botón cuando está desplegado (activo) */
.accordion-button:not(.collapsed) {
    color: #0d6efd; /* Color primario de tu tema */
    background-color: #f8f9fa; /* Un fondo muy suave */
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

/* Icono personalizado de "+" y "-" */
.accordion-button::after {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    content: "＋"; /* Icono de más por defecto */
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    background-image: none !important; /* Elimina el icono de flecha de Bootstrap */
    font-weight: 300;
    transition: transform 0.3s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    content: "−"; /* Icono de menos cuando está desplegado */
    transform: rotate(0deg); /* Asegura que no rote */
}

/* Estilo del cuerpo (la respuesta) */
.accordion-body {
    padding: 1.5rem;
    line-height: 1.6;
    background-color: #fff;
}

/* =============================================== */
/* Estilos para la sección Hero de la Home         */
/* =============================================== */

.hero-section {
    background-color: #0A2540; /* El mismo azul de la cabecera */
    color: #FFFFFF; /* Texto blanco */
    padding: 4rem 0; /* Espaciado vertical generoso */
}

/* Hacemos que los textos dentro del hero sean más legibles */
.hero-section .lead {
    color: rgba(255, 255, 255, 0.85);
}

/* Hacemos que el card del formulario resalte sobre el fondo oscuro */
.hero-section .card {
    background-color: #FFFFFF;
    color: #212529; /* Texto oscuro dentro del card */
}

/* Ajustes para que el borde de la cabecera no se vea en la home */
/* Esto elimina la línea que separa el header del nuevo hero */
.site-header .navbar {
    border-bottom: none !important;
}

/* =================================================================
   MEJORA DE DISEÑO: TARJETAS INTERACTIVAS
   ================================================================= */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}


/* =================================================================
   MEJORA DE DISEÑO: DESTACAR PUNTUACIÓN IA
   ================================================================= */
.ai-score-box {
    background-color: #f0f5ff; /* Un azul muy claro, derivado del primario */
    border: 1px solid #cce0ff;
    border-radius: .375rem; /* El mismo borde redondeado que los inputs */
}

/* =================================================================
   MEJORA DE DISEÑO: LEGIBILIDAD
   ================================================================= */
/* Aumentamos el interlineado de los párrafos para facilitar la lectura */
p {
    line-height: 1.7; 
}

/* Añadimos más espacio sobre los subtítulos para separar secciones */
h3 {
    margin-top: 2rem;
}