/* =========================================================================
 * Transparencia — ajustes de UX (tamaño de título + móvil).
 * TODO scoped a .sdd .sdd-transparencia → solo afecta las páginas de
 * Transparencia, nunca el sitio principal (son dos páginas distintas).
 * Se carga solo cuando la página usa la plantilla "Transparencia SDD".
 * ========================================================================= */

/* Título de la página: tamaño controlado (evita el h1 gigante), consistente
 * con el resto del sitio. */
.sdd .sdd-transparencia .breadcrumbs-bar h1,
.sdd .breadcrumbs-bar h1 {
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	line-height: 1.15;
	margin-top: 8px;
}

/* Botón para abrir/cerrar el menú lateral — oculto en escritorio. */
.sdd-transp-nav-toggle { display: none; }

/* --- UX móvil: menú lateral colapsable para que el contenido quede arriba --- */
@media (max-width: 768px) {
	.sdd .sdd-transparencia .sdd-transp-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 8px;
		margin: 0 0 14px;
		padding: 12px 16px;
		background: var(--sdd-blue, #003876);
		color: #fff;
		border: 0;
		border-radius: var(--sdd-radius, 8px);
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
	}
	.sdd .sdd-transparencia .sdd-transp-nav-toggle::after {
		content: "\25BE"; /* ▾ */
		transition: transform .2s ease;
	}
	.sdd .sdd-transparencia .sdd-transp-nav-toggle[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}
	/* Menú oculto por defecto en móvil; se muestra al abrir el toggle.
	 * El contenido (procesos/documentos) queda arriba, accesible sin scroll. */
	.sdd .sdd-transparencia .list-submenu { display: none; }
	.sdd .sdd-transparencia.sdd-transp-nav-open .list-submenu { display: block; }

	/* Aire entre columnas al apilar. */
	.sdd .sdd-transparencia .breadcrumbs-bar { padding: 24px 0 16px; }
}

/* Oculta el menú principal del header SOLO en Transparencia (este CSS solo
 * se carga en las páginas del subsitio Transparencia). El portal tiene su
 * propio menú lateral, así que el menú superior sobra aquí. */
.sdd .main-menu,
.sdd .header-light .main-menu { display: none !important; }
/* En Transparencia no hay menú principal, así que el hamburger (que lo abría)
 * sobra y quedaría roto en móvil. Se oculta. */
.sdd .hamburger-menu { display: none !important; }

/* El indicador del ítem activo (fondo y línea) está diseñado para desbordarse;
 * lo contenemos dentro de la caja redondeada del menú lateral. */
.sdd .sdd-transparencia .list-submenu { overflow: hidden; }

/* (Tipografía: se usa la del SDD, no se sobreescribe.) */

/* Botones de compartir del encabezado de Transparencia. */
.sdd .sdd-transparencia .rtd-share {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid #e6e8eb;
	margin-bottom: 18px;
}
.sdd .sdd-transparencia .rtd-share a {
	color: #1761c3;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: color .15s ease;
}
.sdd .sdd-transparencia .rtd-share a:hover { color: #003876; }

/* Bienvenida / contenido del Inicio (más legible, como el portal de referencia). */
.sdd .sdd-transparencia .entry-content > h2 {
	text-align: center;
	color: #003876;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.3;
	margin: 8px 0 24px;
}
.sdd .sdd-transparencia .entry-content > p {
	font-size: 16px;
	line-height: 1.75;
	color: #333;
	margin-bottom: 16px;
	text-align: justify;
}
.sdd .sdd-transparencia .entry-content > p strong { color: #1f2937; }

/* Texto introductorio de una sección (ej. OAI), antes de la tabla de documentos. */
.sdd .sdd-transparencia .rtd-section-intro { margin: 0 0 22px; }
.sdd .sdd-transparencia .rtd-section-intro p {
	font-size: 15px;
	line-height: 1.7;
	color: #4a5563;
	margin-bottom: 12px;
	text-align: justify;
}