/* =====================================================================================
   Tema UNT — web institucional unitru.edu.pe (ticket WEB-001, 2026-11-12)

   Todo lo visual propio de la UNT vive acá. Orden de carga en SiteWeb.Master:
     plantilla (bootstrap, style-main…) -> colors/theme-skin-unt.css -> ESTE ARCHIVO -> <style>
     de cada página (cphCabeceraWeb).

   Para cambiar un color institucional: cambiar SOLO la variable de :root (y su versión -rgb).
   Al modificar este archivo, subir el ?v= de su <link> en SiteWeb.Master (caché de 7 días).

   Secciones:
     1. Paleta institucional
     2. Heredado: el <style> que estaba dentro de SiteWeb.Master, sin cambios de diseño
     3. Rediseño: componentes (tarjetas, botones, títulos, paginador, cabecera, accesibilidad)
   ===================================================================================== */

/* 1. Paleta institucional ------------------------------------------------------------- */
:root {
	--unt-azul: #12377B;          /* barra del menú, fondos principales */
	--unt-azul-rgb: 18, 55, 123;
	--unt-azul-oscuro: #092c6c;   /* franjas, hover de fondos azules */
	--unt-dorado: #E6AD09;        /* acentos: opción activa del menú, títulos, líneas */
	--unt-dorado-rgb: 230, 173, 9;
	--unt-dorado-oscuro: #BD8E07; /* hover de elementos dorados */
	--unt-negro: #1B1811;         /* barra superior y pie */
	--unt-texto: #222222;
	--unt-texto-suave: #5f6670;
	--unt-borde: #e3e6ea;
	--unt-fondo-suave: #f5f7fa;
	--unt-radio: 8px;
	--unt-sombra: 0 2px 10px rgba(0, 0, 0, .08);
	--unt-sombra-hover: 0 8px 24px rgba(var(--unt-azul-rgb), .18);
}

/* 2. Heredado de SiteWeb.Master ------------------------------------------------------- */
	.widget {
		margin-bottom: 40px;
		color: #c4c2c2;
	}

	.gallery-item {
		background: #ededed;
	}

	/* Logos de la cabecera. Antes: width 250px y height 112px con !important, que forzaba los
	   cinco logos al mismo rectángulo sin importar su proporción (se veían estirados). Ahora el
	   alto manda y el ancho se calcula solo; max-width evita que uno ancho se salga de su columna. */
	.menuzord-brand img {
		max-height: 112px !important;
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
		margin-top: -18px;
		/*margin-left: 600px;*/
	}

	/* Tarjetas: el alto fijo se mantiene para que queden parejas, pero la imagen se recorta
	   (cover) en vez de deformarse. */
	.img-fullwidth {
		width: 100% !important;
		height: 256px; /*285px;*/
		object-fit: cover;
		text-align: center;
	}

	.img-fullwidth3 {
		/*width: 100% !important;*/
		height: 330px;
		object-fit: cover;
		text-align: center;
	}

	/* Imagen principal del detalle de noticia: se ve entera (contain), sin deformarse. */
	.img-fullwidth2 {
		width: 100% !important;
		height: 600px;
		object-fit: contain;
		text-align: center;
	}

	.blog-posts .post .post-thumb {
		text-align: center;
	}

	.mt-5 {
		font-size: 14px;
	}

	.text-theme-colored2 {
		color: var(--unt-dorado) !important;
	}

	.divider, .parallax {
		background: var(--unt-azul-oscuro);
	}

	/*.footer-bottom {
		background: var(--unt-azul-oscuro) !important;
		border-top: 1px solid #ffffff;
	}

	.footer a {
		color: #ccc9c9;
	}*/

	.dark .list-border li {
		border-bottom: 1px dashed #666464;
	}

	body {
		color: #000000;
	}


	.team-block .team-thumb .styled-icons a:hover, .work-gallery .gallery-thumb .styled-icons a:hover, .work-gallery:hover .gallery-bottom-part, .double-line-bottom-theme-colored-2:after, .double-line-bottom-theme-colored-2:before, .double-line-bottom-centered-theme-colored-2:after, .double-line-bottom-centered-theme-colored-2:before, .line-bottom-theme-colored-2:after, .line-bottom-centered::after, .event-block .event-date, .team-social, .event-small .event-date, .portfolio-filter a.active, .title-border::after, .search-menu {
		background: var(--unt-azul);
	}

	.layer-overlay.overlay-dark-8::before {
		background-color: transparent;
	}



	.fondo-logo {
		background-image: url(fondo-logo2.png);
		background-repeat: round;
		background-size: cover;
	}


	.testimonial-content::after, .top-course-thumb .desc-box .off, .breadcrumb.white li.active, .widget .post-title a:hover, .search .search-form button[type="submit"] {
		color: var(--unt-dorado);
	}



	/*PIE DE PAGINA*/
	.widget.dark .widget-title {
		color: var(--unt-dorado);
	}

	.team-block .team-thumb .styled-icons a:hover, .work-gallery .gallery-thumb .styled-icons a:hover, .work-gallery:hover .gallery-bottom-part, .double-line-bottom-theme-colored-2:after, .double-line-bottom-theme-colored-2:before, .double-line-bottom-centered-theme-colored-2:after, .double-line-bottom-centered-theme-colored-2:before, .line-bottom-theme-colored-2:after, .line-bottom-centered::after, .event-block .event-date, .team-social, .event-small .event-date, .portfolio-filter a.active, .title-border::after, .search-menu {
		background: var(--unt-dorado);
	}

	.text-theme-colored2 {
		color: var(--unt-dorado) !important;
	}

	.footer a {
		color: #ffffff;
	}

	/*MENU SUPERIOR*/
	.bg-theme-colored2 {
		background-color: var(--unt-negro) !important;
	}

	.bg-lightest {
		background-color: #fff !important;
	}

	.modern-header.modern-header-white .header-nav .header-nav-wrapper.scroll-to-fixed-fixed {
		background: var(--unt-azul);
	}

	.modern-header .header-nav .header-nav-wrapper.scroll-to-fixed-fixed {
		margin-top: 0;
	}

	@media (min-width: 1200px) {
		.container {
			width: 1170px;
		}
	}

	.menuzord.blue .menuzord-menu > li.active > a, .menuzord.blue .menuzord-menu > li:hover > a, .menuzord.blue .menuzord-menu ul.dropdown li:hover > a {
		background: var(--unt-dorado);
		color: #fff;
	}

	.MsoNormal {
		color: #777777;
	}

	h3 a, h4 a, h5 a, h6 a, .h3 a, .h4 a, .h5 a, .h6 a {
		color: #c2c2c2;
	}

	.menuzord-menu > li > .megamenu .megamenu-row ul li {
		font-size: 10px;
		padding: 0px 0 1px 10px;
		list-style: none;
	}

	.menuzord-menu > li > .megamenu .megamenu-row:first-child {
		margin-top: -26px;
	}

	.menuzord-menu > li > .megamenu .megamenu-row .megamenu-col-title {
		margin-bottom: -4px;
	}

	/* Alinear la 'X' y el texto en la misma altura */
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center; /* Alinea verticalmente el icono y el texto */
	}

	/* Poner el texto en negrita */
	.modal-title {
		font-weight: bold;
	}

	/* Opcional: Estilo adicional para que la 'X' no esté muy cerca del texto */
	.modal-header .close {
		font-size: 1.5rem; /* Ajusta el tamaño de la X */
		padding: 0;
		background: none;
		border: none;
		color: inherit; /* Para heredar el color del texto */
	}
	
	/* Color de los iconos del carrusel */
	.carousel-control .glyphicon {
		color: var(--unt-dorado);
	}


/* 3. Rediseño ------------------------------------------------------------------------- */

body {
	color: var(--unt-texto);
}

/* Cabecera: logos centrados en vertical. En celular, el escudo arriba y los cuatro
   accesos (Transparencia, Reclamaciones, Mesa de Partes, Pago) de a dos por fila, más chicos,
   en vez de cinco logos grandes apilados. */
.header-middle .container > .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.header-middle .header-widget-contact-info-box img {
	transition: transform .2s ease;
}
.header-middle .header-widget-contact-info-box a:hover img {
	transform: translateY(-2px);
}
@media (max-width: 991px) {
	.header-middle .container > .row {
		justify-content: center;
	}
	.header-middle .container > .row > div {
		width: 50%;
		text-align: center;
	}
	.header-middle .container > .row > div:first-child {
		width: 100%;
	}
	.header-middle .menuzord-brand {
		float: none !important;
		display: inline-block;
		margin: 6px 0 !important;
	}
}

/* Accesos de la cabecera (Transparencia, Reclamaciones, Mesa de Partes, Pago): cada logo ocupa
   el ancho de su columna con un alto fijo y se ajusta adentro (contain), así quedan del mismo
   tamaño visual sin deformarse, cualquiera sea la proporción del archivo. */
.header-middle .header-widget-contact-info-box .menuzord-brand {
	float: none !important;
	display: block;
	margin: 0 auto 10px;
	text-align: center;
}
.header-middle .header-widget-contact-info-box .menuzord-brand img {
	width: 100% !important;
	height: 84px !important;
	max-height: none !important;
	object-fit: contain;
	margin-top: 0;
}

/* En escritorio, el escudo 25% y los cuatro accesos repartidos en partes iguales (antes 2-2-2-3
   columnas: los tres primeros quedaban más chicos que el de Pago). */
@media (min-width: 992px) {
	.header-middle .container > .row > div:first-child {
		width: 25%;
	}
	.header-middle .container > .row > div + div {
		width: 18.75%;
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (max-width: 991px) {
	.header-middle .header-widget-contact-info-box .menuzord-brand img {
		height: 56px !important;
	}
}

/* Títulos de las tarjetas de la portada: venían en gris claro (#c2c2c2) sobre blanco y casi no
   se leían. */
.owl-carousel .post .entry-title a {
	color: var(--unt-azul) !important;
}
.owl-carousel .post .entry-title a:hover {
	color: var(--unt-dorado-oscuro) !important;
}

/* Comunicados: son afiches con texto; se muestran enteros (contain) en vez de recortados. */
img[data-lightbox-gallery] {
	object-fit: contain;
	background: var(--unt-fondo-suave);
}

/* Títulos de sección: la palabra destacada en dorado ya existía; se afina el peso. */
.section-title .title {
	font-weight: 700;
	letter-spacing: .3px;
}

/* Tarjetas (noticias, proyectos, proyección social): esquinas redondeadas, sombra leve y un
   pequeño levantamiento al pasar el mouse. overflow:hidden recorta la foto a las esquinas. */
.owl-carousel .item > article.post,
.blog-posts .post {
	border-radius: var(--unt-radio);
	overflow: hidden;
	box-shadow: var(--unt-sombra);
	transition: box-shadow .2s ease, transform .2s ease;
	background: #fff;
}
.owl-carousel .item > article.post:hover,
.blog-posts .post:hover {
	box-shadow: var(--unt-sombra-hover);
	transform: translateY(-3px);
}
/* owl recorta su contenido: sin este margen se cortaría la sombra y el levantamiento */
.owl-carousel .owl-stage-outer {
	padding: 6px 0 10px;
}
.post .post-thumb img {
	transition: transform .4s ease;
}
.post:hover .post-thumb img {
	transform: scale(1.03);
}
/* Listado de noticias (noticia.aspx): una sola caja (la interna), con borde suave, radio y
   sombra; título legible; sin las viñetas que la regla "ul { list-style }" de la página le ponía
   a la fecha. */
.list-dashed .post {
	margin-bottom: 20px !important;
	padding-bottom: 0 !important;
}
.list-dashed .post .entry-content.border-1px {
	border-color: var(--unt-borde) !important;
	border-radius: var(--unt-radio);
	box-shadow: var(--unt-sombra);
	background: #fff;
	transition: box-shadow .2s ease;
}
.list-dashed .post .entry-content.border-1px:hover {
	box-shadow: var(--unt-sombra-hover);
}
.list-dashed .post .entry-title a {
	color: var(--unt-azul) !important;
}
.list-dashed .post .entry-title a:hover {
	color: var(--unt-dorado-oscuro) !important;
}
.entry-date ul {
	list-style: none !important;
	padding-left: 0;
	margin: 0;
}
.post .entry-date {
	border-radius: 4px;
}

/* Botones: un mismo radio y transición en todo el sitio */
.btn {
	border-radius: 4px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-read-more {
	color: var(--unt-azul);
	font-weight: 600;
}
.btn-read-more:hover {
	color: var(--unt-dorado-oscuro);
}

/* Paginador (noticia.aspx) */
.paging a,
.paging span.current {
	display: inline-block;
	min-width: 36px;
	padding: 6px 10px;
	margin: 0 2px 4px;
	border: 1px solid var(--unt-borde);
	border-radius: 4px;
	text-align: center;
	color: var(--unt-azul);
	background: #fff;
}
.paging a:hover {
	border-color: var(--unt-azul);
	background: var(--unt-fondo-suave);
}
.paging span.current {
	background: var(--unt-azul);
	border-color: var(--unt-azul);
	color: #fff;
	font-weight: 600;
}

/* Menú desplegable: borde superior dorado y sombra, en vez de una caja plana */
.menuzord-menu ul.dropdown,
.menuzord-menu > li > .megamenu {
	border-top: 3px solid var(--unt-dorado);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

/* Contenido de lectura -------------------------------------------------------------------
   El texto de las páginas institucionales (valores, misión, historia, estatuto, bienvenida…) y
   el cuerpo de cada noticia vienen del editor del panel, casi siempre pegados desde Word: traen
   Arial, tamaños fijos, texto justificado, negro forzado con <font color> y párrafos hechos con
   <h2>. Esta clase envuelve ese HTML en las páginas (div.contenido-lectura) y lo normaliza para
   leer cómodo, sin tocar lo guardado en la base. Los !important son a propósito: tienen que
   ganarle a los estilos en línea del editor. */
.contenido-lectura {
	max-width: 760px;          /* ~75 caracteres por línea: más ancho cansa la vista */
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
	color: var(--unt-texto);
}
.contenido-lectura p,
.contenido-lectura li,
.contenido-lectura span,
.contenido-lectura font,
.contenido-lectura b,
.contenido-lectura strong,
.contenido-lectura i,
.contenido-lectura em,
.contenido-lectura u,
.contenido-lectura div {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	letter-spacing: normal !important;
}
/* Justificado abre "ríos" de espacios entre palabras, sobre todo en celular */
.contenido-lectura p,
.contenido-lectura li,
.contenido-lectura [style*="justify"] {
	text-align: left !important;
}
.contenido-lectura p {
	margin: 0 0 1.1em !important;
}
.contenido-lectura h1,
.contenido-lectura h2,
.contenido-lectura h3,
.contenido-lectura h4 {
	font-family: 'Roboto Slab', serif !important;
	font-size: 22px !important;
	line-height: 1.4 !important;
	color: var(--unt-azul) !important;
	margin: 1.4em 0 .6em !important;
	text-transform: none;
}
.contenido-lectura h3,
.contenido-lectura h4 {
	font-size: 19px !important;
}
/* Párrafo que es todo negrita (marcado por unt-lectura.js): subtítulo de sección */
.contenido-lectura .lectura-subtitulo {
	font-family: 'Roboto Slab', serif !important;
	font-size: 20px !important;
	margin: 1.6em 0 .5em !important;
	padding-left: 12px;
	border-left: 4px solid var(--unt-dorado);
	line-height: 1.4 !important;
}
.contenido-lectura .lectura-subtitulo:first-child {
	margin-top: 0 !important;
}
.contenido-lectura .lectura-subtitulo * {
	font-family: inherit !important;
}
.contenido-lectura b,
.contenido-lectura strong {
	color: var(--unt-azul) !important;
}
.contenido-lectura u {
	text-decoration: none;  /* el subrayado se lee como enlace */
}
.contenido-lectura a {
	color: var(--unt-azul) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.contenido-lectura a:hover {
	color: var(--unt-dorado-oscuro) !important;
}
/* Listas: viñeta dorada en vez del punto negro */
.contenido-lectura ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: .4em 0 1.4em !important;
}
.contenido-lectura ul > li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: .5em !important;
}
.contenido-lectura ul > li::before {
	content: "";
	position: absolute;
	left: .3em;
	top: .7em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--unt-dorado);
}
.contenido-lectura ol {
	padding-left: 1.4em;
	margin: .4em 0 1.4em;
}
.contenido-lectura img,
.contenido-lectura iframe,
.contenido-lectura video {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 6px;
}
.contenido-lectura iframe {
	aspect-ratio: 16 / 9;
	width: 100% !important;
}
.contenido-lectura table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
.contenido-lectura blockquote {
	border-left: 4px solid var(--unt-dorado);
	background: var(--unt-fondo-suave);
	padding: 12px 18px;
	margin: 1.2em 0;
}
@media (max-width: 767px) {
	.contenido-lectura {
		font-size: 16px;
	}
}

/* El detalle de noticia no es una tarjeta: sin sombra ni levantamiento */
.blog-posts.single-post .post,
.blog-posts.single-post .post:hover {
	box-shadow: none;
	transform: none;
	background: transparent;
}
/* Detalle de noticia: título legible (venía en gris claro) y la foto con el mismo ancho que el
   texto, centrada. */
.single-post .entry-title,
.single-post .entry-title a {
	color: var(--unt-azul) !important;
	text-transform: none;
	line-height: 1.35;
}
.single-post .entry-meta {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.single-post .post-thumb .img-fullwidth2 {
	border-radius: var(--unt-radio);
	background: var(--unt-fondo-suave);
}

/* Accesibilidad: foco visible al navegar con teclado (no aparece al hacer clic con el mouse) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible {
	outline: 2px solid var(--unt-dorado);
	outline-offset: 2px;
}

/* Quien pidió menos animación en su sistema no ve levantamientos ni zoom */
@media (prefers-reduced-motion: reduce) {
	.owl-carousel .item > article.post,
	.blog-posts .post,
	.post .post-thumb img,
	.header-middle .header-widget-contact-info-box img {
		transition: none;
		transform: none !important;
	}
}