/* Ajuste padding body si la navbar es más alta */
body {
    padding-top: 70px;      /* Aumentado de 56px, ajusta según la altura final de tu navbar */
    padding-bottom: 0px;    /* Eliminado */

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa; /* Un gris muy claro para el fondo general */
}

main {
    flex: 1;
    width: 100%;
}

/* --- Estilos Navbar Personalizados --- */
.custom-navbar {
    transition: all 0.3s ease;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    border-bottom: 4px solid #f59e0b;
}

.custom-navbar .nav-link {
    position: relative;
    margin: 0 0.25rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.95) !important;
}

.custom-navbar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white !important;
}

.custom-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background-color: #f59e0b;
    border-radius: 2px;
}

/* Estilos por defecto de nav-link activo dentro de TU navbar */
.custom-navbar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Alinear verticalmente los items de la derecha (botones/dropdown) */
.custom-navbar .navbar-nav.ms-auto {
    align-items: center;
}

.dropdown-menu-dark { /* color de fonde de categorias y menu de usuario */
    background-color: #1b384b;
    border: 1px solid #3678da;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: #2563eb;
    color: white !important;
}

.dropdown-item.active {
    background-color: #f59e0b;
    color: #1e3a8a !important;
}

.navbar-brand span {
    color: white !important;
}

/* Botón Iniciar Sesión - Hover */
.btn-outline-light:hover {
    background-color: rgba(255,255,255,0.15) !important;
    color: white !important;
    border-color: white !important;
}

/* Botón Registrarse - Hover */
.btn-warning:hover {
    background-color: #f97316 !important;
    color: white !important;
    /*transform: translateY(-1px);*/
    /*box-shadow: 0 2px 8px rgba(245,158,11,0.4);*/
    /*border-color: #0d6efd;*/
}

.logo-nav-redo {
    border-radius: 3px;     /* Redondea todas las esquinas */
    margin-right: 0.5rem;   /* Separa del texto */
}
/* --- Fin Estilos Navbar --- */

/* Otros Estilos */

.publish-btn {
    background-color: #f97316;
    color: #f0f0f0;    
    font-weight: 500;
    transition: all 0.2s ease;
    /*box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);*/
    border-radius: 0.5rem !important;
}

.publish-btn:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    background-color: #f88c26;
    /*color: #f0f0f0;*/
    font-weight: 500;
    /*transform: translateY(-1px); /* Mover ligeramente hacia arriba */
}

.card-img-top-list {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.img-detalle {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
    margin: 1rem auto;
}

.alert {
    margin-top: 1rem;
}

/* Estilo NORMAL de la imagen en el aviso */
#imagePreview {
    max-width: 200px;
    max-height: 200px;
    margin-top: 10px;
    border: 1px solid #ddd;
    padding: 5px;
    display: none;
}

/* Estilo BLUREADA de la imagen en el aviso */
.img-contenedor-blur {
    position: relative;
    width: 100%;
    max-width: 800px;
    /*aspect-ratio: 4 / 3;*/
    height: 400px;      /* Esta variable ajusta el ALTO de la imagen preview dentro del aviso */
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 0 .5rem rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.img-contenedor-blur::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.7);
    transform: scale(1.1);
    z-index: 0;
}

/* Imagen adaptada completamente dentro del contenedor */
.img-foreground {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
}
/* ----------------------------- */

/* --- Estilos para buscador --- */
.search-form-container {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    margin-bottom: 1.5rem; /* Espacio antes de las categorías */
}

/* --- Efecto Hover para Tarjetas de Aviso --- */
.card-hover {
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out; /* Transición suave */
    will-change: transform; /* Ayuda al navegador a optimizar la animación */
}

.card-hover:hover {
    transform: translateY(-2px); /* Mover ligeramente hacia arriba */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12); /* Sombra un poco más pronunciada */
}
/* --- Fin Efecto Hover --- */

/* --- Estilos Página Detalle Aviso --- */
/* Caja de Descripción */
.description-box {
    background-color: #ffffff;                              /* Fondo blanco limpio */
    border: 1px solid #dee2e6;                              /* Borde gris estándar */
    /*box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);*/  /* Sombra sutil */
    line-height: 1.7;
    /* Padding ya aplicado con p-3 p-md-4 en HTML */
}
.description-box h4 {
    color: #495057;
    font-weight: 500; /* Peso de fuente título */
    font-size: 20px;
}

/* --- Estilos Sección Preguntas y Respuestas --- */
.qna-section {
    background-color: #eff1f3; /* Fondo gris muy claro para la sección */
    border: 1px solid #c9d5e0; /* Borde ligeramente más oscuro que el fondo */
    margin-top: 2.5rem;
    /* Padding p-3 p-md-4 aplicado en HTML */
}

.qna-section h3 {
    color: #343a40;
    font-weight: 600;
}

/* Lista de Items Q&A */
.qna-list {
    margin-bottom: 1.5rem; /* Espacio antes del form de nueva pregunta */
}

/* Cada Par Pregunta/Respuesta */
.qna-item {
    padding: 1.2rem 0;                      /* Más espacio vertical */
    border-bottom: 1px solid #c9d5e0;     /* Borde estándar si se prefiere */
}
/* Borde punteado más suave entre items */
.qna-item:not(:last-child) {
   border-bottom: 1px dashed #ced4da;
}

/* Estilo de la Pregunta */
.qna-pregunta p {
    font-size: 1.1rem;  /* Tamaño estándar */
    color: #212529;   /* Negro */
    font-weight: 400;   /* Peso */
    line-height: 1.6;   /* Espaciado línea */
}
.qna-pregunta p strong { /* Para la "P:" */
    color: #0d6efd; /* Azul */
}
.qna-pregunta i {
    color: #0d6efd; /* Icono azul */
    margin-right: 0.3rem; /* Espacio icono */
    font-size: 1.1em; /* Icono ligeramente más grande */
}
.qna-pregunta small {
    font-size: 0.78em; /* Más pequeño */
    color: #6c757d; /* Gris */
}

/* Estilo de la Respuesta */
.qna-respuesta {
    background-color: #ffffff; /* Fondo blanco para la respuesta */
    border: 1px solid #e9ecef; /* Borde ligero */
    border-left: 4px solid #198754; /* Borde izquierdo verde más grueso */
    padding: 0.8rem 1rem 0.8rem 1rem;
    margin-top: 0.8rem; /* Separación de la pregunta */
    border-radius: 0.25rem; /* Redondeado */
}
.qna-respuesta p {
     font-size: 0.95rem;
     color: #343a40;
     line-height: 1.6;
}
.qna-respuesta p strong { /* Para la "R:" */
    color: #198754; /* Verde */
}
.qna-respuesta i {
    color: #198754; /* Icono verde */
    margin-right: 0.3rem;
    font-size: 1.1em;
}
.qna-respuesta small {
    font-size: 0.78em;
    color: #6c757d;
}

/* Formulario para Responder (dentro de .qna-respuesta-form) */
.qna-respuesta-form {
    /* margin-top: 0.8rem; */ /* Ya hay margen en .qna-respuesta */
    padding-top: 0.5rem; /* Espacio sobre el form */
}
.qna-respuesta-form form {
    align-items: flex-start;
}
.qna-respuesta-form textarea {
    min-height: calc(1.5em + 0.5rem + 2px);
    font-size: 0.9rem; /* Más pequeño */
    resize: vertical;
}
.qna-respuesta-form .invalid-feedback {
    font-size: 0.8em;
    margin-top: 0.1rem;
}

/* Formulario para Hacer Nueva Pregunta */
.qna-ask-form {
    border-top: 1px solid #173452; /* Separador */
    padding-top: 1rem;
    margin-top: 1rem; /* Espacio después de la lista */
}
.qna-ask-form h5 {
    color: #495057;
    font-weight: 500;
    margin-bottom: 1rem;
}
.qna-ask-form h5 i {
     color: #0d6efd; /* Icono azul */
     font-size: 1.1em;
     margin-right: 0.3rem;
}

/* ESTILO DEL FOOTER */
.footer {
    /* background-color: #e9ecef; */ /* Comentado o eliminado el gris claro anterior */
    background-color: #212529; /* Nuevo fondo oscuro (Bootstrap 'dark') */
    color: rgba(255, 255, 255, 0.7); /* Texto blanco semi-transparente */
    padding: 25px 0; /* Padding vertical (ajusta si lo necesitas más/menos alto) */
    margin-top: 4rem; /* *** AUMENTADO MARGEN SUPERIOR (era 30px o mt-auto) *** */
    /* border-top: 1px solid #dee2e6; */ /* Eliminada la línea divisoria superior clara */
    text-align: center;
}

/* (Opcional) Estilo para enlaces dentro del footer si los añades después */
.footer a {
    color: #ffffff; /* Enlaces en blanco */
    text-decoration: none;
}
.footer a:hover {
    color: #ffc107; /* Naranja al pasar el mouse sobre enlaces */
    text-decoration: underline;
}

/* Estilos lista mis_avisos */
.list-group-item {
    transition: background-color 0.2s ease;
}
.list-group-item:hover {
    background-color: #f5f1ed; /* Ligero cambio de fondo al pasar el mouse */
}

/* --- Estilos Página Mis Preguntas --- */
.pregunta-item {
    transition: background-color 0.2s ease;
}
.pregunta-item:hover {
    background-color: #f5f1ed; /* Ligero fondo al pasar */
}
.pregunta-aviso-titulo a {
    color: #0d6efd; /* Color enlace aviso */
}
.pregunta-aviso-titulo a:hover {
    /*text-decoration: underline !important;*/ /* Subrayar hover (importante por stretched-link) */
    color: #0a59cf;
}
.pregunta-texto {
    color: #343a40;
    font-size: 1rem;
    line-height: 1.6;
}
.pregunta-texto strong {
    color: #212529;
}
.respuesta-texto {
    background-color: #f0f0f0; /* Fondo ligeramente distinto para la respuesta */
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #495057;
}
.respuesta-texto strong {
    color: #198754; /* Verde */
}
.respuesta-texto small {
    display: block; /* Asegurar que la fecha esté en nueva línea */
    margin-top: 0.3rem;
}
/* --- Fin Estilos Mis Preguntas --- */

/* Asegurar que los botones ocupen todo el ancho en móviles */
/* NAVBAR MOBILE IMPROVEMENTS */
@media (max-width: 991.98px) {
    /* Espaciado entre items en menú colapsado */
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }
    
    /* Botones a full width en móviles */
    .navbar-nav .btn {
        width: 100%;
        text-align: left;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .btn-warning, .btn-outline-light {
        font-size: 1rem; /* mismo tamaño de fuente */
        padding: 0.75rem 1rem; /* mismos paddings */
    }    
    
    /* Menú desplegable full width */
    .dropdown-menu {
        width: 100%;
        border: none;
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: none;
    }
    
    /* Mejor espaciado del menú colapsado */
    .navbar-collapse {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Ajuste para el toggle del dropdown */
    .dropdown-toggle::after {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Asegurar que el nombre de usuario no se corte */
    .navbar-nav .nav-link {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Avatar Circle - Estilo consistente */
.avatar-circle {
    background-color: #f7e91f;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; /* reducís letra */
    font-weight: bold;
    color: #000;
}

/* Versión mobile si necesitas ajustes */
@media (max-width: 991.98px) {
    .avatar-circle {
        margin-right: 0.5rem !important;
    }
}

/* ESTILOS PÁGINA FAQ */
.faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}

.faq-main-title {
    color: #1e3a8a;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.faq-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: #f59e0b;
    border-radius: 2px;
}

.faq-lead-text {
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.faq-accordion {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.faq-accordion-item {
    border-left: none;
    border-right: none;
    border-color: #e5e7eb;
}

.faq-accordion-item:first-child {
    border-top: none;
}

.faq-accordion-item:last-child {
    border-bottom: none;
}

.faq-accordion-header button {
    font-weight: 600;
    color: #1e3a8a;
    padding: 1.25rem 1.5rem;
    background-color: #f8fafc;
    transition: all 0.3s ease;
}

.faq-accordion-header button:not(.collapsed) {
    background-color: #2563eb;
    color: white;
}

.faq-accordion-header button:hover {
    background-color: #e0e7ff;
}

.faq-accordion-header button:not(.collapsed):hover {
    background-color: #1d4ed8;
}

.faq-accordion-body {
    padding: 1.5rem;
    background-color: #ffffff;
    line-height: 1.7;
    color: #4b5563;
}

.faq-accordion-body ul {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.faq-accordion-body li {
    margin-bottom: 0.5rem;
}

.faq-content-link {
    color: #2563eb;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.faq-content-link:hover {
    color: #1e3a8a;
    text-decoration: none;
}

.faq-highlight-text {
    background-color: #fef3c7;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .faq-main-title {
        font-size: 1.8rem;
    }
    
    .faq-accordion-header button {
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    .faq-accordion-body {
        padding: 1rem;
    }
}
/* FIN PAGINA FAQ */


/* PAGINA DE CONTACTO */
.contacto-main {
    max-width: 700px;
}

.contacto-form textarea {
    resize: vertical;
}

.contacto-alert {
    max-width: 700px;
}

/* Botones nuevos para colores de outliner */
.btn-outline-purple {
    background-color: #fff !important;
    color: #6f42c1 !important;
    border-color: #6f42c1;    
}

.btn-outline-purple:hover {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

.btn-outline-orange {
    background-color: #fff !important;
    color: #FD7E14 !important;
    border-color: #FD7E14;    
}

.btn-outline-orange:hover {
    background-color: #FD7E14 !important;
    color: #fff !important;
}

/* Clase personalizada para fondo naranja */
.bg-custom-orange {
    background-color: #fd7e14 !important;
    color: white !important;
}
.bg-custom-orange .card-footer a {
    color: white !important; opacity: 0.85;
}
.bg-custom-orange .card-footer a:hover { opacity: 1; }


/* Mensaje final de scroll infinito */
#fin-mensaje {
    display: none;
}

.fin-aviso-mensaje {
    padding: 5px 10px !important;   /* tamaño el padding */
    box-sizing: border-box;         /* Asegura que el padding no altere el tamaño del recuadro */    
    background-color: #f1f0ee;    /* color de fondo */
    color: #212529;
    border: 1px solid #d1cdc9;
    font-size: 1rem;
    font-weight: 400;
    transition: all 0.3s ease;
    width: 50%;                     /* El ancho será el 50% del contenedor padre */
    max-width: 500px;               /* Limita el ancho máximo a 500px */
    margin: 0 auto;                 /* Centra el recuadro */
}

.fin-aviso-mensaje i {
    color: #f97316;  /* ícono a tono */
}

/* BOTONES DE COMPARTIR */
#compartir-enlaces button {
    font-size: 14px;
    padding: 6px 14px;
    margin: 5px;
    display: flex;
    align-items: center;
}

#compartir-enlaces .d-flex {
    gap: 1px; /* Reducir el espacio entre los botones */
}

#compartir-enlaces span { /* texto de compartir */
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}

#compartir-enlaces .btn-sm {
    padding: 6px 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

/* Ajuste para los iconos */
#compartir-enlaces i {
    margin-right: 5px; /* Espacio entre el icono y el texto */
}

/* ------------ FIN COMPARTIR --------------*/

/* Estilo para los botones de mostrar/ocultar contraseña sin borde */
.password-toggle-btn-plain {
    background-color: transparent !important; /* Fondo transparente */
    border: none !important; /* Sin borde */
    padding: 0 0.5rem; /* Ajusta el padding horizontal si es necesario, vertical a 0 */
    margin-left: -1px; /* Puede ser necesario para alinear con el borde del input */
    box-shadow: none !important; /* Quitar sombra de foco de Bootstrap */
    color: #6c757d; /* Color del icono (similar al secondary de Bootstrap) */
}

/* Mantener un feedback visual al pasar el mouse (opcional) */
.password-toggle-btn-plain:hover {
    color: #5a6268; /* Oscurecer un poco el icono */
}

/* Estilo para el foco (importante para accesibilidad) */
.password-toggle-btn-plain:focus {
    /* Puedes añadir un outline sutil o dejar que el navegador maneje el foco */
     /* outline: 1px dotted #ccc; */
     /* O simplemente asegurar que no haya box-shadow */
     box-shadow: none !important;
     color: #5a6268; /* Mantener color hover/focus */
}

/* Asegurar que el icono use el color del botón */
.password-toggle-btn-plain i {
    color: inherit;
    vertical-align: middle; /* Alinear verticalmente el icono */
}