/* 📌 Encabezado más elegante */
#div_encabezado {
    background-color: rgb(200, 200, 200); /* Color más suave y moderno */
    padding: 20px; /* Espaciado interno */
    text-align: center; /* Centrar contenido */
    border-bottom: 4px solid #0056b3; /* Línea decorativa */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo-container {
    position: absolute;
    left: 10px;
}

#logo {
    width: 150px;  /* Ajusta el tamaño de la imagen */
    height: auto;
    margin-right: 100px;  /* Espacio entre el logo y el texto */
}

/* 🏷 Título del encabezado */
#titulo_encabezado {
    color: #001a33;
    font-family: "Arial", sans-serif;
    font-size: 50px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#titulo_encabezado_ {
    color: #001a33;
    font-family: "Arial", sans-serif;
    font-size: 35px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.titulo-container {
    flex-grow: 1; /* Hace que el título se expanda y se mantenga centrado */
    text-align: center;
}





/* 📌 Menú estilizado */
.menu {
    text-align: center;
    background-color: #002244; /* Color de fondo del menú */
    padding: 15px 0;
    width: 100%;
    border-bottom: 4px solid #001a33; /* Línea inferior igual que el encabezado */
}

.menu li {
    display: inline-block; /* Alinear elementos en fila */
    margin: 0 20px; /* Espacio entre elementos */
    font-size: 22px;
    font-family: "Arial", sans-serif;
    font-weight: bold;
}

/* 🎨 Estilos de los enlaces del menú */
.menu li a {
    text-decoration: none;
    color: #007BFF;
    padding: 8px 15px;
    border-radius: 5px;
    transition: 0.3s;
}

/* 🔥 Hover sobre el menú */
.menu li a:hover {
    background-color: #007BFF;
    color: white;
}

/* 🖥 Estilos responsivos para pantallas pequeñas */
@media screen and (max-width: 768px) {
    #titulo_encabezado {
        font-size: 36px;
    }

    .menu li {
        font-size: 18px;
        margin: 10px 5px;
    }
}

.info_index { font-size: 25px;
    color: rgb(100, 165, 244);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.fecha {
 font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 color: rgb(124, 124, 124);    
}

.img_index {
    width: 100%; /* Se ajusta al tamaño del contenedor */
    max-width: 300px; /* Máximo de 500px */
    height: auto; /* Mantiene la proporción */
}

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    text-align: center;
    background-color: #f8f9fa;
}




/* Contenedor de la tabla */
#tabla-container {
    width: 90%;
    margin: 20px auto;
    overflow-x: auto;
}

/* Estilos de la tabla */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 5px;
    border: 1px solid #ddd; /* Más liviano que una sombra */
}

/* Estilos de encabezados */
th {
    background-color: #001a33;;
    color: white;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #001a33;;
}

/* Estilos de celdas */
td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* Colores alternados en las filas */
tr:nth-child(even) {
    background-color: #f9f9f9; /* Un color más suave y rápido de renderizar */
}

/* Hover sobre las filas */
tr:hover {
    background-color: #e1f0ff;
}

/* 📌 Contenedor principal que agrupa el texto y la imagen */
#info-container {
    display: flex;
    align-items: center;  /* Centra los elementos verticalmente */
    justify-content: space-between;  /* Mantiene el texto a la izquierda y la imagen a la derecha */
    padding: 20px;
    background-color: #f4f4f4; /* Fondo claro para diferenciar */
    border-bottom: 4px solid #001a33; /* Línea debajo */
}

/* Texto a la izquierda */
.texto-info {
    width: 60%;
    font-size: 25px;
    color: #333;
    line-height: 1.6;
}

/* Imagen a la derecha */
.imagen-info {
    width: 35%;
    display: flex;
    justify-content: center;
}

#foto-senador {
    width: 100%;
    max-width: 400px; /* Ajusta el tamaño máximo de la imagen */
    border-radius: 8px; /* Bordes redondeados */
}


/* Estilos del formulario de filtros SOLO en proyectos */
.pagina-proyectos .filtros-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos de los inputs y etiquetas SOLO en proyectos */
.pagina-proyectos .filtros-form label {
    font-weight: bold;
    margin-right: 10px;
}

.pagina-proyectos .filtros-form input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 200px;
    margin-right: 15px;
}

/* Botón de búsqueda SOLO en proyectos */
.pagina-proyectos .filtros-form button {
    padding: 10px 15px;
    background-color: #003366;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.pagina-proyectos .filtros-form button:hover {
    background-color: #001a33;
}

/* Tabla de resultados SOLO en proyectos */
.pagina-proyectos .resultados {
    margin-top: 20px;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/* 🌟 Contenedor del formulario de contacto con diseño vertical */
.pagina-contacto .contacto-container {
    width: 50%;
    margin: 10px auto; 
    padding: 10px;
    background: #eaf2ff; /* Fondo azul claro */
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid #003366;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 🌟 Estilo de los títulos */
.pagina-contacto .contacto-container h2 {
    font-size: 24px;
    color: #003366;
}

/* 📝 Estilos del formulario */
.pagina-contacto .form-contacto {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Contenedor de cada campo (Nombre, Email, Información) */
.pagina-contacto .campo-formulario {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
}

/* 🏷 Estilos para etiquetas */
.pagina-contacto .form-contacto label {
    font-weight: bold;
    color: #003366;
    font-size: 16px;
    margin-bottom: 5px;
}

/* 📩 Estilos para inputs y textarea */
.pagina-contacto .form-contacto input,
.pagina-contacto .form-contacto textarea {
    padding: 3px;
    border: 2px solid #003366;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
    background-color: white;
    transition: 0.3s;
}

/* ✨ Efecto al enfocar */
.pagina-contacto .form-contacto input:focus,
.pagina-contacto .form-contacto textarea:focus {
    border-color: #007BFF;
    outline: none;
    box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
}

/* 🚀 Botón con un diseño atractivo */
.pagina-contacto .form-contacto button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(to right, #007BFF, #0056b3);
    color: white;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.pagina-contacto .form-contacto button:hover {
    background: linear-gradient(to right, #0056b3, #003366);
}

/* 📱 Estilos Responsivos para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .pagina-contacto .contacto-container {
        width: 80%;
    }
}

/* 📌 Footer más arriba y con mejor espaciado */
.footer {
    background-color: #002244;
    color: white;
    padding: 20px 20px 10px; /* Reduce el espacio inferior */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-top: 4px solid #001a33;
    position: relative;
    margin-top: 30px; /* Ajusta la separación con el contenido anterior */
}

/* 📌 Información del footer (dirección, teléfono, email) */
.footer-info {
    width: 50%;
    text-align: left;
    padding-left: 20px;
    font-size: 18px; /* Asegura que el texto sea legible */
}

/* 📌 Redes sociales ubicadas arriba a la derecha */
.footer-redes {
    position: absolute;
    top: 5px; /* Baja un poco los íconos */
    right: 20px;
    display: flex;
    gap: 15px;
}

/* 📌 Tamaño más grande de los íconos */
.footer-redes img {
    width: 50px;  /* Aumenta el tamaño de los íconos */
    height: 50px; /* Mantiene la proporción */
    transition: transform 0.3s ease-in-out;
}

/* 📌 Efecto hover en redes sociales */
.footer-redes img:hover {
    transform: scale(1.3);
}

/* 📱 Responsividad: Ajustes en móviles */
@media screen and (max-width: 768px) {
    .footer {
        flex-direction: column;
        text-align: center;
        margin-top: 50px; /* Mayor margen en móviles */
        padding-bottom: 15px; /* Ajuste para evitar cortes */
    }

    .footer-info {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .footer-redes {
        position: static; /* Se coloca debajo en móviles */
        margin-top: 10px;
        justify-content: center;
    }
}