/*
Hoja de estilos: stylenoticia.css
Estilos específicos para la página de noticias.
*/

/* --- Contenido Principal de Noticia --- */

/* Highlight con el punto amarillo */
.avance-highlight {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-azul); /* Reutiliza variable de 'nosotrosstyle.css' */
    font-size: 1.1rem;
}

.avance-highlight .bullet {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: var(--color-amarillo); /* Reutiliza variable */
    border-radius: 50%;
    margin-right: 10px;
}

/* Imagen principal de la noticia */
.main-noticia-img {
    border: 5px solid var(--color-celeste); /* Reutiliza variable */
    border-radius: 15px;
    overflow: hidden;
    line-height: 0; /* Corrige espacio extra debajo de la imagen */
}

/* Texto de la foto */
.caption-text {
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
}

/* Cuerpo de la noticia */
.noticia-body p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: #333; /* Texto un poco más suave que el azul principal */
}

/* --- Sidebar (Columna Derecha) --- */
.sidebar-noticias {
    /* En pantallas móviles, añadir un separador superior */
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
}

/* Tarjeta de noticia pequeña */
.noticia-card-small {
    border: 2px solid var(--color-celeste); /* Reutiliza variable */
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

.noticia-card-small .noticia-card-img {
    flex: 0 0 100px; /* Ancho fijo para la imagen */
}

.noticia-card-small .noticia-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene el espacio */
}

.noticia-card-small .noticia-card-body {
    padding: 10px 15px;
}

.noticia-card-small .noticia-card-body h6 {
    margin-bottom: 5px;
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 700;
}

.noticia-card-small .noticia-card-body p {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #555;
    margin-bottom: 0;
}


/* --- Ajustes Responsivos --- */
@media (min-width: 992px) {
    /* En escritorio, quitar el borde superior del sidebar */
    .sidebar-noticias {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

  
    /* ==================================================== */
/* ESTILOS DEL NUEVO FOOTER                             */
/* ==================================================== */
.footer-albec-new {
    background-color: var(--color-celeste); /* Fondo turquesa oscuro */
    color: white;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto; /* Empuja el footer hacia abajo */
    font-family: 'Montserrat', sans-serif; /* Asegura la fuente */
}

.footer-main-content-new {
    padding: 60px 0; /* Mayor padding vertical */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Divisor más sutil */
}

.footer-col {
    /* Base para las columnas del footer */
    padding: 0 15px; /* Espaciado interno */
}

/* Columna del Logo */
.footer-logo-col {
    flex: 1 1 300px; /* Base ancha, permite reducir */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinear el contenido a la izquierda */
    text-align: left;
}

.footer-logo-col img {
    max-width: 200px; /* Tamaño del logo */
    height: auto;
}

.footer-slogan {
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 10px;
    opacity: 0.9;
}

/* Columna de Navegación */
.footer-nav-col {
    flex: 1 1 200px; /* Ancho fijo para la navegación */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espacio entre enlaces */
}

.footer-nav-col a {
    color: white;
    text-decoration: none;
    font-weight: 600; /* Semibold */
    font-size: 0.95rem;
    padding: 5px 10px;
    background-color: #009fb5;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: fit-content; /* Se ajusta al ancho del texto */
}

.footer-nav-col a:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Columna de Contacto */
.footer-contact-col {
    flex: 1 1 350px; /* Un poco más ancha para el texto de dirección */
    text-align: left;
}

.footer-section-title {
    font-weight: 700; /* Bold */
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    display: inline-block;
}

.footer-contact-col p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
    opacity: 0.9;
}

.footer-location-tag {
    background-color: var(--color-amarillo); /* Color amarillo */
    color: var(--color-azul); /* Texto azul oscuro */
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 700; /* Bold */
    font-size: 0.95rem;
    display: inline-block; /* Ajusta el ancho al contenido */
    margin-bottom: 20px;
}

.footer-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-phone i {
    font-size: 1.5rem;
    color: var(--color-amarillo); /* Icono de teléfono amarillo */
}

.footer-social-icons {
    display: flex;
    gap: 15px; /* Espacio entre íconos */
}

.social-icon {
    width: 35px; /* Tamaño de los íconos */
    height: 35px;
    transition: transform 0.2s ease;
}

.social-icon:hover {
    transform: translateY(-3px); /* Pequeño efecto hover */
}

/* Footer Bottom (Información Legal) */
.footer-bottom-new {
    padding: 20px 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.footer-bottom-new p {
    margin-bottom: 0;
}

/* Media Queries para Responsividad */
@media (max-width: 991.98px) {
    .footer-main-content-new .container {
        flex-direction: column; /* Apila las columnas */
        align-items: center;
        text-align: center;
    }

    .footer-col {
        margin-bottom: 30px; /* Espacio entre columnas apiladas */
        padding: 0; /* Quita padding horizontal */
        width: 100%;
        max-width: 400px; /* Limita el ancho de las columnas */
    }

    .footer-logo-col,
    .footer-nav-col,
    .footer-contact-col {
        align-items: center; /* Centrar contenido apilado */
        text-align: center;
    }

    .footer-nav-col a {
        width: auto; /* Permite que los enlaces se centren */
    }

    .footer-section-title,
    .footer-location-tag {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    .footer-main-content-new {
        padding: 40px 0;
    }
    .footer-logo-col img {
        max-width: 150px;
    }
    .footer-slogan {
        font-size: 1rem;
    }
    .footer-nav-col a {
        font-size: 0.9rem;
    }
    .footer-phone span {
        font-size: 1.1rem;
    }
    .social-icon {
        width: 30px;
        height: 30px;
    }
}


/* --- Estilos Adicionales para SIDEBAR y MODAL --- */

/* 1. Corrección del Layout de la tarjeta pequeña */

/* Oculta el párrafo de las tarjetas pequeñas (el contenido completo que ahora está en el modal) */
.noticia-card-small .noticia-card-body p {
    display: none; 
}

/* Ajusta la altura de la tarjeta ya que el texto desapareció */
.noticia-card-small {
    /* Asegura que el contenido (imagen y título) esté centrado verticalmente */
    align-items: center; 
    /* Le damos una altura mínima para que el diseño sea uniforme */
    min-height: 100px;
}

/* Mejora la presentación de la imagen */
.noticia-card-small .noticia-card-img {
    flex: 0 0 110px; /* Ancho fijo ligeramente ajustado */
    height: 90px; /* Altura fija para la imagen */
}

/* 2. Estilos para hacer el título clickeable (Modal Trigger) */
.noticia-card-small .noticia-card-body h6 {
    cursor: pointer; /* Indica que es un elemento interactivo */
    transition: color 0.2s ease, text-decoration 0.2s ease;
    /* Ajustes visuales para el título */
    line-height: 1.35;
    margin-top: 5px;
    margin-bottom: 0;
}

.noticia-card-small .noticia-card-body h6:hover {
    /* Oscurece el color del título y subraya al pasar el mouse */
    color: #002e54 !important; /* Usando el color más oscuro de la marca */
    text-decoration: underline;
}

/* 3. Estilos opcionales para mejorar la apariencia del modal (Bootstrap) */
.modal-dialog.modal-lg {
    max-width: 800px; /* Aumentar el tamaño del modal para la noticia completa */
}

.modal-content {
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.modal-header {
    border-bottom: none;
    padding: 2rem 2rem 0.5rem 2rem;
}

.modal-body {
    padding: 0 2rem 2rem 2rem;
}

.modal-body p {
    line-height: 1.7;
    text-align: justify;
}

.modal-body img.modal-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Asegura que los textos largos se vean bien en el modal */
.modal-body ul, .modal-body ol {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}




/* 1. Ocultar el submenú por defecto */
.submenu {
    display: none;
    position: absolute; /* Permite que el submenú flote sobre el contenido */
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
    margin: 0;
    /* Estilos básicos para el fondo y borde del submenú */
    background-color: white; 
    border: 1px solid #ccc;
    z-index: 10; /* Asegura que esté por encima de otros elementos */
}

/* 2. Posicionar el submenú correctamente */
.has-submenu {
    position: relative; /* Es clave para que 'position: absolute' del submenú funcione correctamente */
}

/* 3. Mostrar el submenú al pasar el ratón (hover) */
.has-submenu:hover .submenu {
    display: block;
}

/* Opcional: Estilos para que los elementos del submenú se vean mejor */
.submenu-item a {
    padding: 10px 15px;
    display: block;
    white-space: nowrap; /* Evita que el texto de los nombres largos se rompa */
}

/* Estilos para la nueva lista de proyectos en el footer */
.footer-projects-list {
    list-style: none; /* Elimina las viñetas */
    padding: 0; /* Elimina el padding por defecto de las listas */
    margin-top: 5px; /* Pequeño espacio debajo del título PROYECTOS */
    margin-bottom: 15px; /* Espacio antes de los siguientes enlaces */
}

.footer-projects-list a {
    /* Puedes aplicar estilos similares a tus enlaces <a> existentes */
    display: block; /* Asegura que cada enlace ocupe su propia línea */
    margin-bottom: 5px; /* Espacio entre cada proyecto */
    text-decoration: none;
    /* Asegúrate que el color de texto sea el mismo que los otros enlaces */
    /* Ejemplo: color: #FFFFFF; */ 
}

/* Oculta la lista de proyectos por defecto */
#listaProyectos {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

.telefono {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
}

.telefono img {
    width: 30px; 
    height: 30px;
    vertical-align: middle;
}

.telefono .numero {
    padding: 5px 10px;
    background-color: var(--color-turquesa-claro); /* Ahora Celeste */
    color: var(--color-turquesa-fondo); /* Ahora Celeste (se mantiene el contraste con el fondo Celeste) */
    font-weight: bold;
}

.redes-sociales {
    display: flex;
    gap: 15px;
}

.redes-sociales img {
    width: 30px; 
    height: 30px; 
    vertical-align: middle; 
}

}