/*
 * Estilos del header y footer comunes. Se cargan después de los del tema y van acotados a .edeeste-comun para que
 * las reglas propias de cada portal (p. ej. el menú lateral vertical .menu-principal de Transparencia) no cambien
 * el aspecto del menú principal.
 */

/* Menú principal horizontal (mismo aspecto que el Portal Institucional) */
.edeeste-comun .menu-principal {
	padding-bottom: 0;
}
.edeeste-comun .menu-principal .menu {
	margin: 0;
	padding: 0;
}
.edeeste-comun .menu-principal .menu > li {
	list-style: none;
	display: inline-block;
	margin: 0 -3px 0 0;
	border-bottom: 0;
}
.edeeste-comun .menu-principal .menu > li:last-child {
	margin: 0;
}
.edeeste-comun .menu-principal .menu > li,
.edeeste-comun .menu-principal .menu > li a {
	color: #003670;
	font-family: inherit;
	font-weight: inherit;
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
}
/* Primer nivel del menú en negrita y con espaciado, para que se lea con la misma fuerza que el nombre. */
.edeeste-comun .menu-principal .menu > li > a {
	font-weight: 600;
	letter-spacing: .9px;
}
.edeeste-comun .menu-principal .menu > li a {
	display: block;
	padding: 14px 14px;
}
.edeeste-comun .menu-principal .menu > li.current-menu-item a,
.edeeste-comun .menu-principal .menu > li:hover a,
.edeeste-comun .menu-principal .menu > li.is-open a,
.edeeste-comun .menu-principal .menu > li.current-menu-parent a {
	border-bottom: solid #FFDA03 1px;
	padding-bottom: 12px;
	transition: background .3s;
}
.edeeste-comun .menu-principal .menu > li > a:hover,
.edeeste-comun .menu-principal .menu > li > ul > li > a:hover {
	color: rgb(220, 5, 45);
	background: none;
}
.edeeste-comun .menu-principal .menu > li.menu-item-has-children > a:after {
	content: " +";
	float: none;
	padding-left: 0;
	font-size: inherit;
	transform: none !important;
}
.edeeste-comun .menu-principal .menu > li > ul {
	background-color: #fff !important;
	width: 250px;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.3s, opacity 0.3s linear;
	position: absolute;
	left: auto;
	padding: 0;
	margin: 0;
	z-index: 5;
}
.edeeste-comun .menu-principal .menu > li > ul > li {
	list-style: none;
	display: block;
}
.edeeste-comun .menu-principal .menu > li > ul > li > a {
	border-top-width: 1px;
}
.edeeste-comun .menu-principal .menu > li:hover > ul,
.edeeste-comun .menu-principal .menu > li.is-open > ul {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/*
 * NORTIC A2:2023, 3.01.b.vii y 2.02.b.i: la cabecera y el menú quedan fijos arriba. El identificador oficial
 * (<official-header>) está fuera de <header> y se va con el desplazamiento, como pide la norma.
 */
header.edeeste-comun {
	position: sticky;
	top: 0;
	z-index: 1020;
	background: #fff;
}

/* NORTIC A2:2023, 3.02.b: la marca mide 40 px de alto (el máximo en escritorio) y el nombre del organismo va
   como texto al lado, con el separador del SDD (.logo-icon / .logo-text). */
.edeeste-comun .topbar .logo {
	text-decoration: none;
}
.edeeste-comun .topbar .logo-icon img.edeeste-marca {
	content: normal !important;
	height: 40px;
	width: auto;
	max-width: none;
}
.edeeste-comun .topbar .logo-icon:before {
	top: -5px;
	height: 50px;
	background-color: #d3d3d3;
}
.edeeste-comun .topbar .logo-text {
	color: #003876;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: .2px;
	text-transform: uppercase;
}

/* NORTIC A2:2023, 3.02.f: íconos de redes sociales oficiales, a todo color y de 16 px. */
.edeeste-comun .follow-icons i,
.edeeste-comun .follow-icons svg {
	font-size: 16px;
	line-height: 1;
	vertical-align: middle;
}
.edeeste-comun .follow-icons .red-facebook {
	color: #0866FF;
}
.edeeste-comun .follow-icons .red-youtube {
	color: #FF0000;
}
.edeeste-comun .follow-icons .red-x {
	color: #000;
}
.edeeste-comun .follow-icons .red-instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/*
 * Buscador compacto (lupa) en pantallas medianas y móviles. La librería del SDD oculta el campo pero no trae el
 * script que lo muestra; la lupa es el <label> del campo, así que al tocarla el campo recibe el foco y se muestra.
 * También se muestra al llegar con el teclado.
 */
@media screen and (max-width: 1024px) {
	/* Los temas ocultan #searchMain en móvil (visibility: hidden; width: 1px), lo que deja la lupa sin efecto. */
	.edeeste-comun .search-bar #searchMain {
		visibility: visible;
		width: min(80vw, 300px) !important;
	}
	.edeeste-comun .search-bar:focus-within input {
		bottom: -48px;
		opacity: 1;
		pointer-events: all;
	}
}
/* La librería expande el buscador por debajo de 429 px y no deja espacio para el menú hamburguesa de 42 px. */
@media screen and (max-width: 428px) {
	.edeeste-comun .search-bar {
		flex-grow: 0;
	}
	.edeeste-comun .search-bar-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.edeeste-comun .search-bar input {
		position: absolute;
		right: 0;
		bottom: 0;
		width: min(80vw, 300px) !important;
		opacity: 0;
		pointer-events: none;
	}
	.edeeste-comun .search-bar button {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	/* NORTIC A2:2023, 3.04.a.i: en móvil, buscador de 28 × 28 px y menú hamburguesa de 42 × 44 px. */
	.edeeste-comun .search-bar-toggle {
		width: 28px;
		height: 28px;
		line-height: 28px;
	}
	.edeeste-comun .search-bar-toggle i {
		font-size: 14px;
	}
	.edeeste-comun .hamburger-menu > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 44px;
	}
	/* NORTIC A2:2023, 3.04.a.i: en móvil el logo puede llegar a 44 px; se deja en 32 para que quepa el nombre. */
	.edeeste-comun .topbar .logo-icon {
		margin-right: 12px;
	}
	.edeeste-comun .topbar .logo-icon:before {
		right: -6px;
	}
	.edeeste-comun .topbar .logo-icon img.edeeste-marca {
		height: 32px;
	}
	.edeeste-comun .topbar .logo-icon:before {
		top: -4px;
		height: 40px;
	}
	.edeeste-comun .topbar .logo-text br {
		display: none;
	}
	.edeeste-comun .topbar .logo-text {
		text-wrap: balance;
		font-size: 11px;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: none;
	}
	/* Menos margen entre la lupa y el menú para dejarle espacio al nombre. */
	.edeeste-comun .topbar-right > .search-bar,
	.edeeste-comun .topbar-right > .hamburger-menu {
		margin-left: 8px;
		margin-right: 8px;
	}
	.edeeste-comun .topbar-right > .hamburger-menu {
		margin-right: 0;
	}
	.edeeste-comun .main-menu-cont .menu .menu-item {
		justify-content: space-between;
	}
}

/* Teléfonos muy angostos (320 px): marca y nombre un poco más chicos para que no se desborde la cabecera. */
@media screen and (max-width: 359px) {
	.edeeste-comun .topbar .logo-icon img.edeeste-marca {
		height: 26px;
	}
	.edeeste-comun .topbar .logo-icon {
		margin-right: 8px;
	}
	.edeeste-comun .topbar .logo-icon:before {
		right: -4px;
		top: -2px;
		height: 30px;
	}
	.edeeste-comun .topbar .logo-text {
		font-size: 10px;
	}
}

/* ---------- Un solo diseño en los dos portales ----------
 * Transparencia carga al final el Bootstrap 4 de WP File Download, que cambia la fuente, el ancho del contenedor y
 * los títulos que define el Sistema de Diseño Dominicano. Estas reglas tienen más especificidad para que los dos
 * portales se vean iguales sin importar el orden de carga. */
html body {
	font-family: Poppins, sans-serif;
}
@media (min-width: 1200px) {
	html body .container {
		max-width: 1330px;
	}
}
html body .content-area h1.entry-title {
	font-size: 1.6em;
}
html body header.edeeste-comun,
html body footer.edeeste-comun {
	line-height: 1;
}
html body .edeeste-comun .dropdown-toggle::after {
	display: none;
}
/* Reinicio de Bootstrap 4 que no aplica en la cabecera ni en el pie: alineación de imágenes y márgenes e
   interlineado de títulos y listas, con los valores del SSD. */
html body .edeeste-comun img {
	vertical-align: baseline;
}
html body .edeeste-comun :is(h1, h2, h3, h4, h5, h6, label, ul, ol) {
	margin-bottom: 0;
}
html body .edeeste-comun :is(h1, h2, h3, h4, h5, h6) {
	line-height: inherit;
}
html body .edeeste-comun hr {
	height: auto;
}
html body .edeeste-comun .dropdown-menu {
	margin-top: 0;
}

/* ---------- Rastro de navegación: barra de ancho completo bajo el menú (2.01.b.iii, 3.02.e.i) ---------- */
.rastro_navegacion.edeeste-rastro-barra {
	margin: 0 0 30px;
	padding: 10px 0;
	border-bottom: 5px solid #cf142b;
	background-color: #6c757d;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}
.rastro_navegacion.edeeste-rastro-barra a {
	color: #fff;
	text-decoration: underline;
}
.rastro_navegacion.edeeste-rastro-barra a:hover,
.rastro_navegacion.edeeste-rastro-barra a:focus-visible {
	text-decoration: none;
}

/* ---------- Herramientas de la página (2.01.e) ---------- */
.edeeste-barra-pagina {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 8px;
	font-size: 14px;
}
.edeeste-herramientas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.edeeste-herramientas a,
.edeeste-herramientas button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 4px 10px;
	border: 1px solid #002272;
	border-radius: 4px;
	background: #fff;
	color: #002272;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
.edeeste-herramientas a:hover,
.edeeste-herramientas a:focus-visible,
.edeeste-herramientas button:hover,
.edeeste-herramientas button:focus-visible {
	background: #002272;
	color: #fff;
}

/* ---------- Panel derecho: navegación de la sección (3.02.e.iii.b) ---------- */
.edeeste-seccion {
	margin-bottom: 24px;
	border-left: 3px solid #cf142b;
	padding-left: 16px;
}
.edeeste-seccion h2 {
	font-size: 18px;
	color: #002272;
	margin: 0 0 8px;
}
.edeeste-seccion ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.edeeste-seccion li a {
	display: block;
	padding: 6px 0;
	color: #4a4a4a;
	text-decoration: none;
}
.edeeste-seccion li a:hover {
	color: #cf142b;
	text-decoration: underline;
}
.edeeste-seccion li.current-menu-item > a {
	color: #cf142b;
	font-weight: 500;
}

/* ---------- Página 404 (2.01.b.xii) ---------- */
.edeeste-404 {
	max-width: 820px;
	margin: 24px auto 48px;
	color: #4a4a4a;
}
.edeeste-404 h1 {
	color: #002272;
}
.edeeste-404 h2 {
	font-size: 20px;
	color: #002272;
	margin-top: 24px;
}
.edeeste-404-imagen {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 16px 0;
}
.edeeste-404-pasos > li {
	margin-bottom: 12px;
}
.edeeste-404-busqueda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}
.edeeste-404-busqueda input {
	flex: 1 1 220px;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid #6c757d;
	border-radius: 4px;
}
.edeeste-404-busqueda button {
	min-height: 40px;
	padding: 6px 16px;
	border: 0;
	border-radius: 4px;
	background: #002272;
	color: #fff;
}

/* ---------- Impresión y PDF: solo el contenido ---------- */
@media print {
	official-header,
	header.edeeste-comun,
	footer.edeeste-comun,
	.edeeste-herramientas,
	.list-submenu,
	#secondary,
	.printfriendly,
	.skip-link {
		display: none !important;
	}
	.edeeste-barra-pagina {
		border: 0;
	}
}

/* Correos y direcciones largas del pie se parten en pantallas angostas en vez de desbordarse. */
footer.edeeste-comun a,
footer.edeeste-comun p {
	overflow-wrap: anywhere;
}

/* Ficha de documento (respaldo de [dflip]). */
.edeeste-documento {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	max-width: 560px;
	margin: 16px 0;
	padding: 20px;
	border: 1px solid #d3d3d3;
	border-left: 4px solid #003876;
	background: #fff;
	text-align: left;
}
.edeeste-documento > i {
	font-size: 40px;
	line-height: 1;
	color: #cf142b;
}
.edeeste-documento-titulo {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
	color: #003876;
}
.edeeste-documento-detalle {
	margin: 0 0 12px;
	font-size: 14px;
	color: #4a4a4a;
}
.edeeste-documento-boton {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 4px;
	background: #003876;
	color: #fff !important;
	font-weight: 500;
	text-decoration: none;
}
.edeeste-documento-boton:hover,
.edeeste-documento-boton:focus-visible {
	background: #002272;
}

/* ---------- Texto alineado a la izquierda (NORTIC A2:2023, 7.01; auditoría 001, hallazgo 2) ----------
 * Los dos temas justificaban todo el contenido (.content-area), incluidos los títulos, y en móvil quedaban huecos
 * grandes entre palabras. Donde Elementor justifica a propósito, en móvil lo alinea a la izquierda un script
 * (edeeste-comun.php), porque con CSS no se puede saber qué texto está justificado sin tocar el centrado. */
html body .content-area {
	text-align: left;
	text-justify: auto;
}

/* ---------- Botón de accesibilidad abajo a la izquierda (NORTIC A2:2023, 3.01.b.iii; hallazgo 3) ----------
 * A media altura tapaba texto y el menú lateral de Transparencia. Abajo queda en una esquina sin contenido fijo. */
html body #open_sogoacc.middleleft {
	top: auto;
	bottom: 16px;
	left: 16px;
	border-radius: 4px;
}
@media (max-width: 767px) {
	html body #open_sogoacc.middleleft {
		bottom: 12px;
		left: 12px;
		padding: 6px;
	}
}

/* Íconos del menú principal (los del plugin Menu Icons de cada elemento). */
.edeeste-comun .menu-principal .menu > li > a .edeeste-menu-icono {
	margin-right: .45em;
	font-size: 1.2em;
	vertical-align: middle;
	line-height: 1;
}
.edeeste-comun .menu-principal .menu > li > a .edeeste-menu-icono.dashicons {
	width: auto;
	height: auto;
	font-size: 1.35em;
}

/* El submenú del último elemento (Proyectos) abre hacia la izquierda para no salirse de la pantalla. */
@media (min-width: 1025px) {
	.edeeste-comun .menu-principal .menu > li:last-child {
		position: relative;
	}
	.edeeste-comun .menu-principal .menu > li:last-child > ul {
		right: 0;
	}
}

/* Pantallas medianas: sin íconos y con menos espaciado para que el menú quepa en una línea. */
@media (min-width: 1025px) and (max-width: 1329px) {
	.edeeste-comun .menu-principal .menu > li > a .edeeste-menu-icono {
		display: none;
	}
	.edeeste-comun .menu-principal .menu > li > a {
		letter-spacing: .3px;
		padding-left: 9px;
		padding-right: 9px;
		white-space: nowrap;
	}
}
@media (min-width: 1330px) {
	.edeeste-comun .menu-principal .menu > li > a {
		white-space: nowrap;
	}
}

/* Títulos que eran un segundo h1 dentro del contenido (ver pagina.php): mantienen el tamaño de h1 del SDD. */
html body .edeeste-era-h1 {
	font-family: Poppins, sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.5;
	color: #003876;
}
@media (max-width: 767px) {
	html body .edeeste-era-h1 {
		font-size: 28px;
	}
}
/* Resultados de búsqueda y archivos: cada resultado es un h2 debajo del h1 de la página. */
html body .content-area article h2.entry-title {
	margin: 0 0 8px;
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.3;
	color: #003876;
}

/* ---------- Contraste mínimo de 4.5:1 (NORTIC A2:2023, 7.01; auditoría 001, hallazgo 5) ----------
 * Grises claros de WP File Download, WP Download Manager y la fecha de las noticias de Elementor, y el azul de
 * enlaces de Bootstrap 4 (#007bff, 3.98:1) que carga WP File Download en Transparencia. */
html body .wpfd-file-content--meta,
html body .wpfd-file-content--meta *,
html body .wpfd-content .wpfd-file-link,
html body .filecontent .file-xinfo,
html body .filecontent .file-xinfo *,
html body .file .openlink,
html body .filecontent h3 a.wpfd_downloadlink,
html body .elementor-post__meta-data,
html body .elementor-post-date,
html body .w3eden a.color-blue {
	color: #595959 !important;
}
html body .wpfd-single-file-button.wpfd-button-preview {
	background-color: #595959;
}
html body .content-area a:not(.btn):not(.elementor-button):not(.edeeste-documento-boton):not([class*="wpfd"]):not(.elementor-toggle-title):not(.elementor-accordion-title):not([class*="elementor-tab"]) {
	color: #0056b3;
}
html body .w3eden .text-danger {
	color: #c4161c !important;
}
html body .ede-card-styled .badge {
	background-color: #c2410c;
}

/* Las imágenes a las que se les agregó ancho y alto (pagina.php) guardan su proporción si una hoja solo fija el ancho.
   :where() deja la regla sin especificidad: cualquier alto que defina un tema o plugin la reemplaza. */
:where(.content-area, .entry-content, .elementor) img:where([width][height]) {
	height: auto;
}

/* De 992 a 1024 px el menú de escritorio no cabe en una fila y desbordaba la página. Se reparte en filas centradas,
   sin íconos. Por debajo de 992 px se usa el menú de hamburguesa (ver ssd/style.css de los temas). */
@media (min-width: 992px) and (max-width: 1024px) {
	.edeeste-comun .main-menu-cont .menu,
	.edeeste-comun .main-menu-cont .menu-principal,
	.edeeste-comun .main-menu-cont .menu-principal .menu {
		max-width: 100%;
	}
	.edeeste-comun .main-menu-cont .menu-principal .menu {
		flex-wrap: wrap;
		justify-content: center;
	}
	.edeeste-comun .menu-principal .menu > li > a {
		padding: 14px 6px;
		letter-spacing: 0;
		white-space: nowrap;
	}
	.edeeste-comun .menu-principal .menu > li > a .edeeste-menu-icono {
		display: none;
	}
}

/* NORTIC A2:2023, 3.04.a.i: menú hamburguesa de 42 × 44 px también en tabletas. */
@media (min-width: 768px) and (max-width: 991px) {
	.edeeste-comun .hamburger-menu > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 44px;
	}
}

/* ---------- Nada más ancho que la pantalla en móvil y tableta (NORTIC A2:2023, 3.01.b.iii y 3.01.b.iv) ---------- */
@media (max-width: 991px) {
	/* El tema da 15 px de margen izquierdo al contenido; sin columna alrededor lo sacaba de la pantalla. */
	html body .content-area {
		margin-left: 0;
	}
	/* Listas y paginación de WP Download Manager. */
	html body .w3eden .media {
		flex-wrap: wrap;
	}
	html body .w3eden .media > *,
	html body .w3eden .media .ml-3 {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
	}
	html body .wpdm-pagination {
		flex-wrap: wrap;
	}
	/* Tablas anchas: se desplazan dentro de su propio recuadro en vez de ensanchar la página. */
	html body .content-area table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
	html body .content-area svg,
	html body .content-area img,
	html body .content-area iframe {
		max-width: 100%;
	}
	html body .content-area a {
		overflow-wrap: anywhere;
	}
	/* Títulos de cajas con ícono de Elementor: las palabras largas se dividen en columnas angostas. */
	html body .elementor-icon-box-title,
	html body .elementor-image-box-title {
		hyphens: auto;
		-webkit-hyphens: auto;
		overflow-wrap: break-word;
	}
	/* Títulos de acordeones y pestañas de Elementor: se parten en varias líneas. */
	html body .elementor-tab-title,
	html body .elementor-toggle-title {
		white-space: normal;
		overflow-wrap: anywhere;
	}
	/* Filas de Bootstrap pegadas en bloques HTML de Elementor, sin contenedor que absorba su margen negativo. */
	html body .elementor-widget-html .row,
	html body .elementor-widget-shortcode .row {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Párrafos vacíos que crea el navegador al corregir HTML de plugins (un <div> dentro de un <p>): sin margen. */
html body .content-area p:empty,
html body .elementor p:empty {
	display: none;
}