:root {
  /* 
  * Variables de color para el diseño
  * --maroon: Color institucional guinda(#5A1236)
  * --accent-blue: Color azul para acentos (#016FB9)
  * --white: Blanco puro (#FFFFFF)
  * --gray-light: Gris claro para fondos (#f9f9f9)
  * --gray-medium: Gris medio para bordes (#e0e0e0)
  * --gray-dark: Gris oscuro para texto y elementos (#333333)
  * --text-color: Color principal de texto (#444444)
  */
  --maroon: #5A1236;     
  --accent-blue: #016FB9; 
  --white: #FFFFFF;
  --gray-light: #f9f9f9;
  --gray-medium: #e0e0e0;
  --gray-dark: #333333;
  --text-color: #444444;
}

/* Reset básico para todos los elementos */
* {
  margin: 0;           /* Elimina márgenes por defecto */
  padding: 0;          /* Elimina padding por defecto */
  box-sizing: border-box; /* Modelo de caja más intuitivo */
}

/* Estilos base del cuerpo del documento */
body {
  font-family:  'Red Hat Display', sans-serif; /* Fuente principal y fallbacks */
  background-color: var(--gray-light);     /* Fondo gris claro */
  color: var(--text-color);                /* Color de texto principal */
  line-height: 1.6;                       /* Espaciado entre líneas */
}

/* -----------------------------
 HEADER
----------------------------- */
header {
  background: linear-gradient(45deg, var(--maroon) 0%, #501215 100%); /* Gradiente granate */
  color: var(--white);                  /* Texto blanco */
  padding: 1rem 2rem;                   /* Espaciado interno */
}

header .header-content {
  max-width: 1200px;    /* Ancho máximo del contenido */
  margin: 0 auto;       /* Centrado horizontal */
}

header h1 {
  font-size: 1.8rem;    /* Tamaño del título principal */
  font-weight: 700;     /* Grosor de fuente */
  margin-bottom: 0.3rem; /* Espaciado inferior */
}

header p {
  font-size: 0.9rem;    /* Tamaño del texto secundario */
}

.encabezado-gob {
  display: flex;                   /* Flexbox */
  justify-content: space-between;  /* Espacio uniforme entre columnas */
  align-items: flex-start;         /* Alineación arriba */
  background-color: #5A1236;       /* Fondo verde oscuro */
  padding: 0px;
  padding-right: 40px;                  /* Espaciado interno */
/*
  Para mantener el contenedor fijo
  position: fixed;
  top: 0px;
  width: 100%;*/
}

.encabezado-gob img{
  padding-left: 20%;
  max-width: 70%;              
  height: auto;
  margin-left: 30%;
}

.lista-gob img{
  max-width: 55px;              
  height: 28px;
}

.lista-gob ul{
  max-width: 1200px;    /* Ancho máximo */
  margin: 0 auto;       /* Centrado */
  display: flex;        /* Disposición en fila */
  list-style: none;     /* Elimina viñetas */
  padding: 0.2rem;      /* Espaciado interno */
  gap: 1rem;            /* Espacio entre elementos */
  text-align: right;
  font-size: 15px;
 
}

.lista-gob a{
  color: #FFFFFF;
  text-decoration: none;
}

/*Alineacion cintillo directorio*/
.cintilloDirectorio ul {
  padding-left: 20%;
  display: flex;
  list-style: none;
  padding: 7px;
  margin: 0;
  justify-content: flex-end; /*Alinear los elementos a la izq*/
  font-size: 11px;
}

.cintilloDirectorio li {
  margin-right: 10px; /* Espaciado entre elementos */
}

.cintilloDirectorio a {
  text-decoration: none;
  color: #444444; /* Ajusta el color del texto */
}

/*Alineacion cintillo imagenes*/
.cintilloImagenes ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 5px;
  margin-left: 175px;
  
}

.cintilloImagenes li {
  margin-right: -250px; /* Espaciado entre elementos */
  
}

.cintilloImagenes img {
  padding-left: 90px;
  max-width: 73%;              
  height: auto;
}



/*Alineacion cintillo Accesibilidad*/
.cintilloAccesibilidad ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-end; /*Alinear los elementos a la izq*/
}

.cintilloAccesibilidad li {
  margin-right: 10px; /* Espaciado entre elementos */
}

.cintilloAccesibilidad a {
  text-decoration: none;
  color: #444444; /* Ajusta el color del texto */
}


/* -----------------------------
 NAVEGACIÓN PRINCIPAL
----------------------------- */
nav {
  background-color: var(--gray-dark); /* Fondo gris oscuro */
}

nav ul {
  width: 1260px;        /* Ancho específico */
  height: 42.39px;      /* Altura específica */
  margin: 0 auto;       /* Centrado */
  display: flex;        /* Disposición en fila */
  list-style: none;     /* Elimina viñetas */
  padding: 0;           /* Espaciado interno */
  gap: 1rem;            /* Espacio entre elementos */
  align-items: center;  /* Centrado vertical */
  justify-content: center; /* Centrado horizontal de los elementos */
}

nav li {
  flex-shrink: 0;       /* Evita que los ítems se reduzcan */
}

nav a {
  color: var(--white);           /* Texto blanco */
  text-decoration: none;        /* Sin subrayado */
  font-weight: 500;             /* Grosor de fuente */
  padding: 0.5rem 0.75rem;     /* Espaciado interno */
  border-radius: 4px;           /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Transición suave */
}

nav a:hover {
  background-color: var(--maroon); /* Fondo granate al pasar mouse */
}

/* Contenedor general del banner */
.banner {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1.5rem;
  border-radius: 0px;
  box-shadow: 0 4px 6px #0000001a;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.banner-img {
  width: 70%;      
  max-width: 70%;   
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px #00000026;
  margin-left: 17%;
}

.banner-text {
  background-color: var(--white);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--maroon);
  box-shadow: 0 2px 4px #00000026;
}

.banner-text h3 {
  color: var(--maroon);
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.banner-text p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--text-color);
  font-size: 0.95rem;
  text-align: justify;
}

.banner-text a {
  color: var(--accent-blue);
  text-decoration: none;
}

.banner-text a:hover {
  text-decoration: underline;
}

/* -----------------------------
 CONTENIDO PRINCIPAL
----------------------------- */
.main-container {
  max-width: 1200px;   /* Ancho máximo */
  margin: 2rem auto;   /* Centrado con margen superior/inferior */
  display: grid;       /* Grid layout */
  grid-template-columns: 1fr 300px; /* Dos columnas (principal + sidebar) */
  gap: 2rem;           /* Espacio entre columnas */
  padding: 0 1rem;     /* Espaciado lateral */
}

.content {
  background-color: var(--white); /* Fondo blanco */
  border-radius: 6px;            /* Bordes redondeados */
  box-shadow: 0 0 10px rgba(0,0,0,0.05); /* Sombra sutil */
  padding: 2rem;                 /* Espaciado interno */

}

.content a{
  text-decoration: none;
  color: #016FB9;
}

.content h2 {
  color: var(--maroon);          /* Color granate para títulos */
  margin-bottom: 1rem;          /* Espaciado inferior */
}

.content p {
  margin-bottom: 1rem;          /* Espaciado entre párrafos */
  line-height: 1.6;             /* Interlineado */
}

.issues div{
  padding-left: 20px; /* Indentación */
}

.issue div{
  padding-left: 20px; /* Indentación */
}

.issue div{
  padding-left: 20px; /* Indentación */
}

hr{
  border: 1px solid #ccc;
  margin: 20px 0;
}

.issueDescription {
  font-size: 13px; /* Hace el texto más pequeño */
  color: #6c757d; /* Color gris */
}

/* Notas destacadas */
.note {
  background-color: var(--accent-blue); /* Fondo azul */
  color: var(--white);          /* Texto blanco */
  padding: 0.8rem 1rem;         /* Espaciado interno */
  border-radius: 4px;           /* Bordes redondeados */
  margin: 1rem 0;               /* Margen superior/inferior */
  font-size: 0.95rem;           /* Tamaño de fuente */
}

/* Estilos para el consejo editorial */
.editorial-board h3 {
  color: var(--maroon);         /* Color granate */
  margin-top: 2rem;             /* Margen superior grande */
}

.editorial-board h4 {
  margin-top: 1rem;             /* Margen superior */
  margin-bottom: 0.5rem;        /* Margen inferior */
  font-weight: 600;             /* Grosor de fuente */
}

.editorial-board ul {
  list-style-type: disc;        /* Viñetas tipo disco */
  margin-left: 2rem;            /* Sangría */
  margin-top: 0.5rem;           /* Margen superior */
}

.map-container {
  max-width: 800px; /* Ajusta ancho máximo del contenedor */
  margin: 2rem auto; /* Centra horizontalmente y separa verticalmente */
  padding: 1rem;
  background: #f8f8f8; /* Fondo gris claro */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.map-container h3 {
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
}

.map-container img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  margin: 0 auto;
}

/* Tabla de contenidos */
.table-contents h3 {
  color: var(--maroon);         /* Color granate */
  margin-top: 2rem;             /* Margen superior */
  margin-bottom: 1rem;          /* Margen inferior */
}
.table-contents h4 {
  color: var(--gray-dark);         /* Color granate */
  margin-top: 2rem;             /* Margen superior */
  margin-bottom: 1rem;          /* Margen inferior */
}

/* Lista de artículos */
.articles-list {
  list-style: none;             /* Sin viñetas */
  margin: 0;
  padding: 0;
}

.articles-list li {
  background-color: var(--gray-light); /* Fondo gris claro */
  border-left: 4px solid var(--accent-blue); /* Borde izquierdo azul */
  margin-bottom: 1rem;          /* Margen inferior */
  border-radius: 4px;           /* Bordes redondeados */
  padding: 0.5rem 1rem;         /* Espaciado interno */
  transition: background-color 0.3s; /* Transición suave */
}

.articles-list li:hover {
  background-color: var(--gray-medium); /* Cambio de color al pasar mouse */
}

.article-link {
  color: var(--accent-blue);    /* Color azul */
  text-decoration: none;        /* Sin subrayado */
  font-weight: 600;             /* Grosor de fuente */
  margin-right: 0.5rem;         /* Margen derecho */
}

/* Enlaces a PDF */
.pdf-link {
  color: var(--maroon);         /* Color granate */
  text-decoration: none;        /* Sin subrayado */
  font-size: 0.85rem;          /* Tamaño de fuente */
  font-weight: 500;            /* Grosor de fuente */
  background-color: var(--white); /* Fondo blanco */
  padding: 0.2rem 0.4rem;      /* Espaciado interno */
  border: 1px solid var(--maroon); /* Borde granate */
  border-radius: 3px;          /* Bordes redondeados */
  margin-left: 0.5rem;         /* Margen izquierdo */
  transition: background-color 0.3s, color 0.3s; /* Transiciones suaves */
}

.pdf-link:hover {
  background-color: var(--maroon); /* Fondo granate al pasar mouse */
  color: var(--white);          /* Texto blanco al pasar mouse */
}

/* -----------------------------
 Breadcrumb
----------------------------- */
.breadcrumb {
  font-size: 16px;
  padding: 12px 20px;
  background-color: #f8f9fa;
  border-radius: 5px;
  display: inline-block;
  margin-left: 30px; /* Sangría hacia la izquierda */
}

.breadcrumb a {
  text-decoration: none;
  color: #007bff;
  font-weight: 500;
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: #0056b3;
}

.breadcrumb .current {
  font-weight: bold;
  color: #343a40;
  pointer-events: none;
}


/* -----------------------------
 SIDEBAR
----------------------------- */
.sidebar {
  display: flex;               /* Flexbox para disposición */
  flex-direction: column;      /* Elementos en columna */
  gap: 1rem;                   /* Espacio entre widgets */
}

/* Contenedor general del widget */
.widget {
  background-color: #fdfdfd; /* Fondo clarito */
  border: 1px solid #ddd;    /* Borde sutil */
  padding: 1rem;            
  border-radius: 6px;        /* Bordes redondeados */
  margin-bottom: 1rem;
  margin-top: -7.5%;
}

/* Título del widget */
.widget h4 {
  font-size: 1.1rem;
  color: #5A1236; /* Granate */
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Formulario de login */
.mi-formulario-login {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Espacio vertical entre elementos */
  max-width: 250px; /* Controla el ancho si lo deseas */
}

/* Label general */
.mi-formulario-login label {
  font-weight: 500;
  color: #333;
  margin-bottom: 0.3rem;
}

/* Inputs de texto y password */
.mi-formulario-login input[type="text"],
.mi-formulario-login input[type="password"] {
  padding: 0.5rem;
  border: 1px solid #CCC;
  border-radius: 4px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.mi-formulario-login input[type="text"]:focus,
.mi-formulario-login input[type="password"]:focus {
  border-color: #5A1236; /* Color al enfocar */
}

/* Checkbox y texto "Recordarme" */
.mi-formulario-login label input[type="checkbox"] {
  margin-right: 0.4rem;
}

/* Botón de enviar */
.mi-formulario-login button[type="submit"] {
  background-color: #5A1236; /* Granate */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

/* Efecto hover en el botón */
.mi-formulario-login button[type="submit"]:hover {
  background-color: #50102f; /* Un poco más oscuro */
}

.widget label {
  display: block;        /* Ponerlo en su propia línea */
  margin-bottom: 0.2rem;
  font-weight: 500;
}

/* Campo de texto */
.widget input[type="text"] {
  width: 100%;
  border: 1px solid #444;   /* Borde oscuro para parecerse al original */
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.5rem;    /* Espacio inferior */
  font-size: 0.9rem;
}

/* Select desplegable */
.widget select {
  width: 100%;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.3rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem; 
}

/* Botón de búsqueda */
.widget button[type="submit"] {
  background-color: #fff;
  color: #444;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

/* Efecto hover en el botón */
.widget button[type="submit"]:hover {
  background-color: #444;
  color: #fff;
}

.widget ul {
  list-style: none;           /* Sin viñetas */
  padding: 0;
}

.widget ul li {
  margin-bottom: 0.3rem;      /* Margen inferior */
}

.widget a {
  color: var(--accent-blue);  /* Color azul */
  text-decoration: none;      /* Sin subrayado */
  display: inline-block;      /* Permite margen */
  margin-bottom: 0.3rem;      /* Margen inferior */
}

.widget a:hover {
  text-decoration: underline; /* Subrayado al pasar mouse */
}



/* -----------------------------
 NAVEGACIÓN PRINCIPAL (ALTERNATIVA)
----------------------------- */
.main-nav {
  position: relative;
  background-color: #333;     /* Fondo oscuro */
  color: #fff;                /* Texto blanco */
  display: flex;              /* Flexbox */
  flex-direction: column;     /* Elementos en columna */
  align-items: center;        /* Centrado horizontal */
  padding: 3fr;  
}

.main-nav ul {
  list-style: none;          /* Sin viñetas */
  display: flex;             /* Elementos en fila */
  gap: 1rem;                 /* Espacio entre elementos */
  margin-bottom: 0.5rem;     /* Margen inferior */
}

.main-nav li a {
  text-decoration: none;     /* Sin subrayado */
  color: #fff;               /* Texto blanco */
  padding: 0.75rem 1rem;     /* Espaciado interno */
  font-weight: 500;          /* Grosor de fuente */
  transition: background-color 0.3s ease; /* Transición suave */
}

.main-nav li a:hover {
  background-color: #5A1236; /* Fondo granate al pasar mouse */
}

.nav-title {
  font-size: 1.2rem;        /* Tamaño de fuente */
  font-weight: bold;        /* Grosor de fuente */
  text-align: center;       /* Texto centrado */
  margin-bottom: 0.5rem;    /* Margen inferior */
}

/* -----------------------------
 FOOTER
----------------------------- */
footer {
  display: flex;                   /* Flexbox */
  justify-content: space-between;  /* Espacio uniforme entre columnas */
  align-items: flex-start;         /* Alineación arriba */
  background-color: #5A1236;       /* Fondo verde oscuro */
  color: white;                   /* Texto blanco */
  padding: 50px;                  /* Espaciado interno */
}

footer img {
  max-width: 15%;                /* Ancho máximo para logo */
  height: auto;                  /* Altura automática */
}

footer article {
  flex: 1;                      /* Mismo espacio para cada columna */
  margin: 0 85px;               /* Margen entre columnas */
}

footer ul {
  list-style: none;             /* Sin viñetas */
  padding: 0;
}

footer a {
  color: white;                 /* Texto blanco */
}

footer h2 {
  margin-bottom: 10px;          /* Margen inferior */
}

/* -----------------------------
 MEDIA QUERIES (RESPONSIVE)
----------------------------- */
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
}

@media (max-width: 992px) {
  /* Ajustes para tablets */
  .hero {
      height: 250px;            /* Reduce altura del hero */
  }
  .hero-content h2 {
      font-size: 1.5rem;       /* Reduce tamaño de fuente */
  }
}

@media (max-width: 768px) {
  /* Ajustes para móviles */
  nav ul {
      flex-direction: column;   /* Navegación en columna */
      padding: 1rem;           /* Mayor espaciado */
  }
  .main-container {
      grid-template-columns: 1fr; /* Una sola columna */
  }
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Arial', sans-serif;
  padding: 10px 0;
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

.pagination-info {
  font-size: 14px;
  color: #333;
}

.pagination-links {
  display: flex;
  gap: 8px;
}

.pagination-link {
  padding: 5px 10px;
  text-decoration: none;
  color: #0074d9;
  border: 1px solid #0074d9;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.2s, color 0.2s;
}

.pagination-link:hover {
  background-color: #0074d9;
  color: white;
}

.pagination-link.active {
  background-color: #0074d9;
  color: white;
  font-weight: bold;
}

/* -----------------------------
   CINTILLO IPN (igual que footer)
----------------------------- */
.cintilloEducacionP {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #333333; /* Mismo color que el footer */
  color: white;
  padding: 50px;
}

.imagenEducacionPublica img {
  max-width: 300px;
  height: auto;
}

.textoDireccionP {
  flex: 1;
  margin-left: 40px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* -----------------------------
   MENÚ DESPLEGABLE 
----------------------------- */

.main-nav li.dropdown {
  position: relative;
}

.main-nav ul.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 9999;
  width: max-content;
}


.main-nav ul.submenu li a {
  display: block;
  padding: 6px 14px;
  background-color: #fff;   
  color: #333;             
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav ul.submenu li a:hover {
  background-color: #f2f2f2;
  color: #000;
}

.main-nav li:hover > ul.submenu {
  display: block;
}




/* Barra negra con texto centrado */
.rcs-bar {
  background-color: #000;
  text-align: center;
  padding: 12px 0;
  position: relative;
  z-index: 1; 
}

.rcs-text {
  color: #fff;          
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none !important;  
  cursor: default;      
}

.rcs-text:hover {
  text-decoration: none !important;  
}


.rcs-text:hover {
  text-decoration: underline;
}

/* Banderín flotante enganchado al menú */
.rcs-banderin {
  position: absolute;
  bottom: -39px;   
  left: 355px;      
  z-index: 10;
}


.rcs-banderin a::after {
  content: "";
  position: absolute;
  bottom: -12px; 
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 12px solid #fff;
}

.rcs-logo {
  height: 85px; 
  width: auto;
}