/* Estilos Globales y Reset Básico */
html, body {
    overflow-x: hidden; /* Evita el scroll horizontal */
    height: 100%; /* NUEVO: Asegura que la altura sea 100% de la ventana */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #999;
}

/* ========================= ENCABEZADO GOBIERNO ========================= */
.gob-header {
     background-color: #551833; /* Color guinda del Gobierno */
     color: white;
     padding: 25px 0;
}

.header-content {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
}

.top-nav a {
     color: white;
     text-decoration: none;
     margin-left: 20px;
     font-size: 20px;
}

.logo img {
     height: 65px;
     width: 220px;
     filter: brightness(2);
}

/* ========================= CONTENEDOR PRINCIPAL GRIS ========================= */
.main-container {
     max-width: 1000px;
     margin: 0px auto;
      /* Este color gris claro se asegura de que el centro no sea guinda */
     background-color: #e0e0e0; 
     border: 1px solid #ccc;
     padding: 20px;
}
/* ========================= CABECERA IPN/ESIA ========================= */
.school-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0px 0;
     border-bottom: 2px solid #551833;
     /* Esta línea crea el borde guinda inferior */
    border-bottom: 2px solid #551833; 
    
    /* MODIFICACIÓN CLAVE: Añadir espacio debajo del borde guinda */
    margin-bottom: 15px; /* Ajusta el valor (ej. 15px) para obtener la separación deseada */
}

.school-title {
    /* CAMBIO CLAVE 1: Fuerza a que el título ocupe todo el espacio que queda 
       entre el logo izquierdo y el grupo de logos derecho. */
    flex-grow: 1; 
    
    /* CAMBIO CLAVE 2: Centra el texto H1 y H2 dentro del gran espacio que ahora ocupa. */
    text-align: center; 
    
    /* Asegúrese de que no haya padding o margen innecesario */
    margin: 0; 
    padding: 0;
}

.school-title h1 {
     color: #551833;
     font-size: 20px;
     margin-top: 0;
}

.school-title h2 {
    color: #551833;
    font-size: 20px;
    margin-top: 0px 0 0 0;
}

.school-logo-left img {
     height: 80px;
     
}
.school-logo-right {
    /* MODIFICACIÓN CLAVE: Define el contenedor como Flex y apila los elementos verticalmente */
    display: flex;
    flex-direction: row; 
    
    /* Centra los elementos (imagen, @, imagen inferior) horizontalmente dentro de esta columna */
    align-items: center; 
    gap: 10px; /* Separación entre el logo de ESIA y el grupo de iconos */
    padding-top: 0px; 
    
    /* Centra los elementos verticalmente dentro de su espacio asignado */
    justify-content: center; 
    
    /* Opcional: Ajuste vertical para la columna completa, si es necesario */
    padding-top: 5px; 
    margin-top: -50px;
}

.school-logo-right .esia-logo-right {
    /* Mueve la imagen ESIA hacia arriba de forma independiente.
       Use un valor negativo, AJÚSTELO hasta que se pegue al borde superior.
       Pruebe con -30px y ajústelo según sea necesario. */
    margin-top: -10px; 
    
    /* Asegúrese de que el tamaño siga definido si lo necesita */
    height: 70px; /* o la altura que esté usando */
}

.icon-group-vertical {
    display: flex;
    flex-direction: column; /* Apila el @ y la imagen */
    align-items: center; /* Centra el @ y la imagen horizontalmente */
    justify-content: center;
/* También es crucial ajustar los estilos de las imágenes y el icono */
}

.school-logo-right .at-icon {
    font-size: 20px;
    color: #551833;
}
.school-logo-right img {
    height: 60px;
    margin: 0;
}
/* ========================= MENÚ DE NAVEGACIÓN ========================= */
.main-nav {
    background-color: #999; /* Fondo de menú gris oscuro */
    padding: 5px 0;
    justify-content: flex-end;
    display: flex; 
    width: 48%;
    margin-left: 180px;
    margin-top: -15px;
}
.main-nav a {
    color: white;
    text-decoration: none;
    padding: 0px 20px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    border-right: 1px solid #777;
}

.main-nav a:last-child {
    border-right: none;
}

/* ========================= CUERPO CENTRAL (DIVIDIDO) ========================= */
.central-content {
    display: flex;
    gap: 0px; /* Establece la separación de 30px entre los dos paneles */
    background-color: transparent;
    border: none;
    margin-top: -2px;
    width: 100%;
    /* Añade el padding horizontal de 20px */
    padding-left: 487px; 
    padding-right: 20px;
}

/* Columna de Inicio de Sesión (Izquierda) */
.login-panel {
    flex: 0 0 150px; /* Ancho fijo para la columna izquierda */
    background-color: #f7f7f7;
    padding: 20px;
    border-right: 2px solid #aaa;
}

.login-panel h3 {
    color: #551833;
    border-bottom: 2px solid #551833;
    padding-bottom: 5px;
}

.login-panel form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.login-panel form input {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    box-sizing: border-box;
    border: 1px solid #999;
}

.captcha-image {
    margin: 10px 0;
    text-align: center;
    border: 1px solid #ccc;
    display: inline-block;
}

.btn-iniciar {
    background-color: #ff9900; /* Botón color naranja/amarillo */
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
    font-weight: bold;
}

/* Columna del Contenido Principal (Derecha) */
.gray-frame {
    /* Fondo Gris Claro */
    background-color: #e0e0e0; 
    
    /* Padding para crear el grosor del marco gris */
    padding-right : 150px; 
    padding-bottom: 10px; /* Espacio interno */
    
    /* Asegurar que ocupe el ancho sin margen */
    width: 50%;
    max-width: 699px;/* Máximo ancho */ 
    
    /* Asegurar que se pegue al data-panel */
    margin: 0; 
}
/* Nuevo Marco Blanco que envuelve al panel rosa */
.marco-blanco {
    background-color: white; /* Color de fondo blanco */
    padding: 30px; /* Espacio entre el borde blanco y el recuadro rosa */
    padding-bottom: 100px; /* Espacio interno */
    display: flex; /* NECESARIO para que se ajuste al ancho del data-panel */

    /* Para que el marco blanco se separe correctamente del login-panel: */
    margin: 1px 0 0 3px; 
}

.data-panel {
     /* 1. Comportamiento Flexible */
    flex-grow: 0; 
    flex-shrink: 0;
    line-height: 1.0; /* Espaciado de línea para mejorar la legibilidad */

    /* 2. ESTILOS VISUALES */
    background-color: #ffece8;
    border-radius: 10px;
    border: 5px solid #6e6e6e; /* Borde gris oscuro */
    padding: 10px;

    /* 3. TAMAÑO Y POSICIÓN */
     width: 100%; */
    max-width: 600px;
    max-width: 500px;/* Máximo ancho */
    margin: 0; /* El margen se maneja en el marco blanco */
}

/* Mensaje de validación */
.validation-message {
    color: #2100ff; /* Color azul para el texto */
    padding: 5px 0;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14px; 
}

/* Bloque de datos */
.data-block p {
    margin: 5px 0; /* Separación vertical entre los datos */
    line-height: 1.0; /* Espaciado de línea para que no se vea tan pegado */
}

/* Estilo para el dato que se solicita (la etiqueta) */
.dato-etiqueta {
    color: #333; /* Color Gris Oscuro para las etiquetas */
    padding: 5px 0;
    margin-bottom: 10px;
    font-weight: bold; 
    font-size: 14px; 
}

/* Estilo para el dato en sí (el valor) */
.dato-valor {
    color: #2100ff; /* Azul vibrante */
    font-weight: bold; 
    font-size: 14px; 
}

.saes-footer {
    text-align: left;
    padding: 10px 0;
    margin-top: 10px;
    margin-bottom: 0; /* NUEVO: Elimina cualquier margen inferior residual */
    border-top: 1px solid #aaa;
    font-size: 20px;
}

.saes-footer a {
    color: #551833;
    text-decoration: underline;;
}

/* ========================= PIE DE PÁGINA GOBIERNO ========================= */
.gob-footer {
    background-color: #551833; /* Color guinda */
    color: white;
    padding: 20px 0;
    width: 100vw; /* Usa 100% del ancho del viewport */
    box-sizing: border-box;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.gob-footer .section-logo img {
    /* Agrega o modifica el ancho aquí, si existe */
    width: 250px; 
    height: auto;
    margin-right: 130px;
    margin-left: -60px;
}

.footer-sections {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
/* 1. Modificar el tamaño de la fuente para el párrafo de "¿Qué es gob.mx?" */
/* Selector: p (párrafo) dentro de la clase .section-gobmx */
.section-gobmx p {
    /* Reducir el tamaño de la letra. 12px es un buen tamaño para footer. */
    font-size: 18px; 
    
    /* Espacio entre líneas para mejor lectura */
    line-height: 1.8; 
}
.section-gobmx p a {
    /* Forzar el subrayado */
    text-decoration: underline; 
    
    /* Asegúrate de que el color sea blanco, como el resto del texto del footer */
    color: white; 
}

.footer-sections h3 {
    color: white;
    font-size: 25px;
    margin-top: 0;
}

.footer-sections ul {
    list-style: none;
    padding: 0;
}

.footer-sections a {
    color: white;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
}

.section-denuncia a {
    font-weight: bold;
    color: white;
    font-size: 23px;
    text-decoration: underline;
    margin-bottom: 20px;
}

/* Estilos para los contenedores de los iconos (si los necesitas) */
.social-icons {
    display: flex; /* Para alinearlos */
    gap: 25px;    /* Espacio entre los iconos */
}

/* Estilos para los enlaces y los propios iconos */
.social-icons a {
    color: rgba(255, 255, 255, 0.662); /* Color del icono */
    font-size: 34px; /* Tamaño del icono */
    /* Asegúrate de eliminar cualquier estilo de botón o borde si existe */
    text-decoration: none;
}

/* Opcional: Elimina el estilo para los span si todavía lo tienes */
.social-icons span {
    display: none;
}
/* Contenedor del número y texto */
.section-denuncia .contact-info-container {
    /* CLAVE: Usa flex para alinear el icono, el número y el texto en una fila */
    display: flex;
    align-items: center; /* Alineación vertical */
    margin-top: -5px; /* Separación de las redes sociales */
    padding: 5px 0;
    padding-right: -10px;
}

/* Estilo para el número "079" */
.section-denuncia .numero {
    font-size: 36px; /* Aumentar el tamaño del número */
    font-weight: bold;
    color: white;
    margin-right: 10px; /* Separación del texto "Comunícate..." */
}

/* Estilo para el texto "Comunícate, estamos para ayudarte" */
.section-denuncia .texto {
    font-size: 17px; /* Tamaño normal o ligeramente mayor */
    color: white;
    line-height: 1.2; /* Espaciado de línea para mejor legibilidad */
    /* Estilo para el icono de la flor/asterisco */
}
.section-denuncia .fa-asterisk {
    font-size: 36px; /* Mismo tamaño que el número para que se alineen bien */
    color: white;
    margin-right: 10px; /* Separación del icono con el número "079" */
}