/* ==========================================================================
   SIIE v2 — Hoja de estilos del sitio público
   Identidad gráfica: "Solicitud de identidad gráfica para el SIIE"
   Lineamientos: "Propuesta para la Maquetación del SIIEv2" (WCAG AA)
   ========================================================================== */

:root {
	/* Paleta institucional del SIIE */
	--siie-marino:   #000023;  /* logotipo, fondos oscuros */
	--siie-petroleo: #002E3F;
	--siie-verde:    #002A20;
	--siie-gris:     #5A5A5B;
	--siie-guinda:   #612145;  /* acento y botones de acción */
	--siie-lavanda:  #E4E4F4;
	--siie-fondo:    #F5F5F7;
	--siie-blanco:   #FFFFFF;
	--siie-texto:    #1E1E24;
	--siie-borde:    #DCDCE6;
	--siie-foco:     #FFD700;  /* resalte de foco del teclado */
	--gobmx-guinda:  #611232;  /* barra del Gobierno de México */

	--siie-guinda-oscuro: #4A1934;
	--siie-sombra: 0 6px 24px rgba(0, 0, 35, .08);
	--siie-radio: 14px;

	--fuente-texto: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--fuente-titulos: 'Montserrat', 'Roboto', system-ui, sans-serif;

	/* Bootstrap */
	--bs-body-font-family: var(--fuente-texto);
	--bs-body-color: var(--siie-texto);
	--bs-body-bg: var(--siie-blanco);
	--bs-link-color: var(--siie-guinda);
	--bs-link-color-rgb: 97, 33, 69;
	--bs-link-hover-color: var(--siie-guinda-oscuro);
	--bs-link-hover-color-rgb: 74, 25, 52;
	--bs-primary: var(--siie-marino);
	--bs-primary-rgb: 0, 0, 35;
	--bs-border-color: var(--siie-borde);
}

/* Tamaño de texto ajustable (botones A− / A / A+) */
html                       { font-size: 100%; }
html[data-texto="-1"]      { font-size: 90%; }
html[data-texto="1"]       { font-size: 112.5%; }
html[data-texto="2"]       { font-size: 125%; }
html[data-texto="3"]       { font-size: 140%; }

body {
	background: var(--siie-blanco);
	color: var(--siie-texto);
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6, .navbar, .btn, .nav-tabs, .breadcrumb {
	font-family: var(--fuente-titulos);
}
h1, h2, h3 { color: var(--siie-marino); font-weight: 700; }

/* Foco visible para navegación con teclado */
:focus-visible {
	outline: 3px solid var(--siie-foco) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--siie-marino) !important;
}

.salto-contenido {
	position: absolute; top: .5rem; left: .5rem; z-index: 2000;
	background: var(--siie-marino); color: #fff; padding: .75rem 1rem; border-radius: 8px;
}
main:focus { outline: none; }

/* --------------------------------------------------------------------------
   Barra del Gobierno de México, franja institucional y accesibilidad
   -------------------------------------------------------------------------- */
.barra-gobmx { background: var(--gobmx-guinda); color: #fff; min-height: 50px; display: flex; align-items: center; }
.gobmx-logo img { height: 36px; width: auto; display: block; }
.gobmx-enlaces { list-style: none; display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; }
.gobmx-enlaces a { color: #fff; text-decoration: none; font-size: .95rem; }
.gobmx-enlaces a:hover { text-decoration: underline; }
.gobmx-enlaces .bi-search { font-size: 1.05rem; }
@media (max-width: 575.98px) {
	.gobmx-logo img { height: 30px; }
	.gobmx-enlaces { gap: 1rem; }
	.gobmx-enlaces a { font-size: .85rem; }
}

.barra-institucional {
	background: #fff;
	color: var(--siie-texto);
	font-size: .8125rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--siie-borde);
}
.barra-ipn { color: var(--siie-texto); text-decoration: none; display: inline-flex; align-items: center; gap: .65rem; line-height: 1.25; }
.barra-ipn strong { font-family: var(--fuente-titulos); font-size: .875rem; color: #3B3B3B; }
.barra-ipn > span > span { font-size: .75rem; color: var(--siie-gris); }
.barra-ipn img { height: 40px; width: auto; }
.barra-ipn:hover strong { color: var(--gobmx-guinda); text-decoration: underline; }

.herramientas-a11y { display: flex; gap: .25rem; }
.btn-a11y {
	background: transparent; color: #3B3B3B;
	border: 1px solid var(--siie-borde); border-radius: 6px;
	min-width: 2.25rem; min-height: 2rem; padding: 0 .5rem;
	font-weight: 600; line-height: 1;
}
.btn-a11y:hover, .btn-a11y[aria-pressed="true"] { background: var(--gobmx-guinda); border-color: var(--gobmx-guinda); color: #fff; }

/* --------------------------------------------------------------------------
   Encabezado y menú principal
   -------------------------------------------------------------------------- */
.encabezado {
	background: var(--siie-blanco);
	border-bottom: 3px solid var(--siie-guinda);
	box-shadow: 0 2px 12px rgba(0, 0, 35, .06);
}
.encabezado .navbar { padding: .5rem 0; }
.navbar-brand img { height: 56px; width: auto; }

.navbar-toggler { border: 2px solid var(--siie-marino); font-size: 1.5rem; color: var(--siie-marino); padding: .15rem .6rem; }

.encabezado .nav-link {
	color: var(--siie-marino);
	font-weight: 600;
	font-size: .9rem;
	padding: .75rem .6rem !important;
	border-radius: 8px;
	white-space: nowrap;
}
.encabezado .nav-link:hover,
.encabezado .nav-link:focus-visible { background: var(--siie-lavanda); color: var(--siie-marino); }
.encabezado .nav-link.active {
	color: var(--siie-guinda);
	box-shadow: inset 0 -3px 0 var(--siie-guinda);
	border-radius: 8px 8px 0 0;
}
.encabezado .nav-restringido { color: var(--siie-guinda); }

.encabezado .dropdown-menu {
	border: 1px solid var(--siie-borde);
	border-top: 3px solid var(--siie-guinda);
	border-radius: 0 0 10px 10px;
	box-shadow: var(--siie-sombra);
	padding: .4rem;
	min-width: 17rem;
}
.encabezado .dropdown-item { border-radius: 6px; padding: .5rem .75rem; white-space: normal; }
.encabezado .dropdown-item:hover,
.encabezado .dropdown-item:focus { background: var(--siie-lavanda); color: var(--siie-marino); }

.btn-acceso {
	background: var(--siie-marino); color: #fff; font-weight: 600;
	border-radius: 999px; padding: .5rem 1.1rem; white-space: nowrap;
}
.btn-acceso:hover, .btn-acceso:focus, .btn-acceso.show { background: var(--siie-petroleo); color: #fff; }
.nombre-usuario { display: inline-block; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

@media (max-width: 1199.98px) {
	.encabezado .navbar-collapse { padding: .75rem 0 1rem; max-height: calc(100vh - 80px); overflow-y: auto; }
	.encabezado .nav-link.active { box-shadow: inset 3px 0 0 var(--siie-guinda); border-radius: 0 8px 8px 0; }
	.encabezado .dropdown-menu { border-top-width: 1px; box-shadow: none; border-radius: 10px; }
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-cta {
	background: var(--siie-guinda); color: #fff; border: 2px solid var(--siie-guinda);
}
.btn-cta:hover, .btn-cta:focus { background: var(--siie-guinda-oscuro); border-color: var(--siie-guinda-oscuro); color: #fff; }
.btn-outline-primario { border: 2px solid var(--siie-marino); color: var(--siie-marino); background: transparent; }
.btn-outline-primario:hover, .btn-outline-primario:focus { background: var(--siie-marino); color: #fff; }

/* --------------------------------------------------------------------------
   Inicio
   -------------------------------------------------------------------------- */
.hero {
	background:
		linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 55%, rgba(255,255,255,.35) 100%),
		url("../img/identidad/fondo-cuadricula.webp") center / cover no-repeat,
		var(--siie-fondo);
	padding: clamp(2.5rem, 6vw, 5rem) 0;
	border-bottom: 1px solid var(--siie-borde);
}
.hero-antetitulo {
	font-family: var(--fuente-titulos); font-weight: 600;
	color: var(--siie-guinda); letter-spacing: .04em; text-transform: uppercase; font-size: .8rem;
	margin-bottom: .75rem;
}
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.15; margin-bottom: 1rem; }
.hero-texto { font-size: 1.125rem; color: var(--siie-gris); max-width: 36rem; margin-bottom: 1.75rem; }
.hero-imagen { max-height: 320px; width: auto; }

.seccion { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.seccion-gris { background: var(--siie-fondo); }

.titulo-seccion {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-bottom: 1.25rem;
	position: relative; padding-bottom: .6rem;
}
.titulo-seccion::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 56px; height: 4px; border-radius: 2px; background: var(--siie-guinda);
}

.mas-texto summary {
	cursor: pointer; color: var(--siie-guinda); font-weight: 600; font-family: var(--fuente-titulos);
	margin-bottom: .75rem; display: inline-block;
}

.tarjeta-guia {
	background: var(--siie-fondo); border-radius: var(--siie-radio);
	padding: 1.75rem; border: 1px solid var(--siie-borde);
}
.tarjeta-guia h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.lista-guia { list-style: none; padding: 0; margin: 0; }
.lista-guia li { display: flex; gap: .85rem; padding: .6rem 0; border-top: 1px solid var(--siie-borde); }
.lista-guia li:first-child { border-top: 0; }
.lista-guia i { color: var(--siie-guinda); font-size: 1.25rem; line-height: 1.4; }
.lista-guia a { font-weight: 600; color: var(--siie-marino); text-decoration: none; display: block; }
.lista-guia a:hover { color: var(--siie-guinda); text-decoration: underline; }
.lista-guia span { font-size: .875rem; color: var(--siie-gris); }

/* Carrusel de secciones (desplazamiento horizontal accesible) */
.carrusel {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 1.25rem) / 3);
	gap: 1.25rem; margin: 0; padding: .25rem .25rem 1rem;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: thin;
}
@media (max-width: 991.98px) { .carrusel { grid-auto-columns: calc((100% - 1.25rem) / 2); } }
@media (max-width: 575.98px) { .carrusel { grid-auto-columns: 85%; } }
@media (prefers-reduced-motion: reduce) { .carrusel { scroll-behavior: auto; } }
.carrusel-item { scroll-snap-align: start; display: flex; }

.btn-carrusel {
	width: 2.75rem; height: 2.75rem; border-radius: 50%;
	border: 2px solid var(--siie-marino); background: #fff; color: var(--siie-marino); font-size: 1.1rem;
}
.btn-carrusel:hover { background: var(--siie-marino); color: #fff; }
.btn-carrusel:disabled { opacity: .35; }
.carrusel-controles { display: flex; gap: .5rem; flex-shrink: 0; }

.tarjeta-seccion {
	display: flex; flex-direction: column; width: 100%;
	background: #fff; border: 1px solid var(--siie-borde); border-radius: var(--siie-radio);
	padding: 1.5rem; text-decoration: none; color: var(--siie-texto);
	box-shadow: var(--siie-sombra);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tarjeta-seccion:hover, .tarjeta-seccion:focus-visible {
	transform: translateY(-4px); border-color: var(--siie-guinda);
	box-shadow: 0 12px 28px rgba(0, 0, 35, .14); color: var(--siie-texto);
}
@media (prefers-reduced-motion: reduce) { .tarjeta-seccion { transition: none; } .tarjeta-seccion:hover { transform: none; } }
.tarjeta-icono {
	width: 3.25rem; height: 3.25rem; border-radius: 12px; margin-bottom: 1rem;
	display: grid; place-items: center; font-size: 1.5rem;
	background: var(--siie-marino); color: #fff;
}
.tarjeta-seccion h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.tarjeta-seccion p { font-size: .925rem; color: var(--siie-gris); flex-grow: 1; }
.tarjeta-enlace { color: var(--siie-guinda); font-weight: 600; font-family: var(--fuente-titulos); font-size: .9rem; }

/* Cifras */
.cifras {
	background: linear-gradient(180deg, rgba(228,228,244,.85), rgba(228,228,244,.85)),
		url("../img/identidad/fondo-cuadricula.webp") center / cover no-repeat, var(--siie-lavanda);
}
.cifra {
	background: #fff; border: 1px solid var(--siie-borde);
	border-radius: var(--siie-radio); padding: 1.5rem; text-align: center; height: 100%;
}
.cifra i { font-size: 1.75rem; color: var(--siie-guinda); }
.cifra strong { display: block; font-family: var(--fuente-titulos); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; margin: .35rem 0; color: var(--siie-marino); }
.cifra span { font-size: .9rem; color: var(--siie-gris); }

/* --------------------------------------------------------------------------
   Páginas de sección
   -------------------------------------------------------------------------- */
.cabecera-seccion {
	background:
		linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(245,245,250,.9) 55%, rgba(228,228,244,.75) 100%),
		url("../img/identidad/fondo-cuadricula.webp") center / cover no-repeat,
		var(--siie-lavanda);
	color: var(--siie-texto);
	padding: 2rem 0 2.5rem;
	border-bottom: 1px solid var(--siie-borde);
}
.cabecera-seccion h1 { color: var(--siie-marino); font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 0; }
.cabecera-resumen { color: var(--siie-gris); font-size: 1.1rem; max-width: 46rem; margin: 1rem 0 0; }
.cabecera-icono {
	flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 14px;
	display: grid; place-items: center; font-size: 1.6rem;
	background: var(--siie-guinda); color: #fff;
}
.cabecera-seccion .breadcrumb, .cabecera-panel .breadcrumb { --bs-breadcrumb-divider-color: var(--siie-gris); font-size: .85rem; margin-bottom: 1.25rem; }
.cabecera-seccion .breadcrumb a, .cabecera-panel .breadcrumb a { color: var(--siie-guinda); }
.cabecera-seccion .breadcrumb-item.active, .cabecera-panel .breadcrumb-item.active { color: var(--siie-gris); }

.descripcion-seccion { margin-bottom: 2rem; }

.pestanas-contenedor { overflow-x: auto; scrollbar-width: thin; }
.pestanas { flex-wrap: nowrap; border-bottom: 2px solid var(--siie-borde); }
@media (min-width: 992px) { .pestanas { flex-wrap: wrap; } }
.pestanas-contenedor, .tab-pane, [id^="titulo-"] { scroll-margin-top: 110px; }
.pestanas .nav-link {
	white-space: nowrap; color: var(--siie-gris); font-weight: 600; font-size: .95rem;
	border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
	padding: .85rem 1.1rem; border-radius: 8px 8px 0 0;
}
.pestanas .nav-link:hover { color: var(--siie-marino); background: var(--siie-fondo); }
.pestanas .nav-link.active { color: var(--siie-guinda); border-bottom-color: var(--siie-guinda); background: transparent; }
.panel-pestanas { padding: 2rem 0 1rem; }
.panel-pestanas .tab-pane { min-height: 16rem; }
.titulo-pestana { font-size: 1.4rem; margin-bottom: 1rem; }

.aviso-pendiente {
	display: flex; gap: 1rem; align-items: flex-start;
	background: var(--siie-lavanda); border-left: 4px solid var(--siie-guinda);
	border-radius: 0 10px 10px 0; padding: 1rem 1.25rem; color: var(--siie-marino);
}
.aviso-pendiente i { font-size: 1.4rem; color: var(--siie-guinda); }
.aviso-pendiente strong, .aviso-pendiente span { display: block; }
.aviso-pendiente span { color: #3a3a46; }

.fecha-actualizacion { margin: 2rem 0 0; font-size: .85rem; color: var(--siie-gris); }

/* Evaluación (acceso) */
.pasos { padding-left: 1.25rem; }
.pasos li { margin-bottom: .6rem; padding-left: .25rem; }
.pasos li::marker { color: var(--siie-guinda); font-weight: 700; font-family: var(--fuente-titulos); }
.lista-roles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lista-roles li {
	background: var(--siie-fondo); border: 1px solid var(--siie-borde); border-radius: 999px;
	padding: .4rem .9rem; font-size: .9rem; display: inline-flex; gap: .4rem; align-items: center;
}
.lista-roles i { color: var(--siie-guinda); }
.tarjeta-acceso {
	background: #fff; border: 1px solid var(--siie-borde); border-top: 4px solid var(--siie-guinda);
	border-radius: var(--siie-radio); box-shadow: var(--siie-sombra); padding: 2rem;
}
.form-control:focus { border-color: var(--siie-marino); box-shadow: 0 0 0 .2rem rgba(0, 0, 35, .15); }

/* --------------------------------------------------------------------------
   Paneles internos (Administración, Enlace, Evaluación, Dirección)
   -------------------------------------------------------------------------- */
.cabecera-panel {
	background: #fff;
	color: var(--siie-texto);
	padding: 1.5rem 0 0;
	border-bottom: 1px solid var(--siie-borde);
}
.cabecera-panel h1 { color: var(--siie-marino); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; }
.cabecera-panel .breadcrumb { margin-bottom: .75rem; }
.panel-usuario { color: var(--siie-gris); font-size: .9rem; }
.panel-usuario .badge { background: var(--siie-guinda); font-weight: 500; margin-left: .25rem; }

.menu-panel { margin-top: 1.25rem; overflow-x: auto; scrollbar-width: thin; }
.menu-panel .nav { flex-wrap: nowrap; gap: .25rem; }
.menu-panel .nav-link {
	color: var(--siie-gris); white-space: nowrap; font-family: var(--fuente-titulos);
	font-weight: 600; font-size: .875rem; padding: .7rem 1rem; border-radius: 10px 10px 0 0;
}
.menu-panel .nav-link:hover { color: var(--siie-marino); background: var(--siie-fondo); }
.menu-panel .nav-link.active {
	background: var(--siie-fondo); color: var(--siie-guinda);
	box-shadow: inset 0 3px 0 var(--siie-guinda); margin-bottom: -1px;
}

.panel-contenido { background: var(--siie-fondo); padding-top: 2rem; min-height: 50vh; }
.intro-panel { color: var(--siie-gris); }

.bloque-panel {
	background: #fff; border: 1px solid var(--siie-borde); border-radius: var(--siie-radio);
	padding: 1.5rem;
}
.bloque-destacado { border-left: 4px solid var(--siie-guinda); }

.tarjeta-panel {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--siie-borde); border-radius: var(--siie-radio);
	padding: 1.35rem; text-decoration: none; color: var(--siie-texto);
	transition: border-color .2s ease, box-shadow .2s ease;
}
a.tarjeta-panel:hover { border-color: var(--siie-guinda); box-shadow: var(--siie-sombra); color: var(--siie-texto); }
.tarjeta-panel .tarjeta-icono { margin-bottom: .75rem; }
.tarjeta-numero { font-family: var(--fuente-titulos); font-size: 2rem; line-height: 1.1; color: var(--siie-marino); }
.tarjeta-titulo { font-family: var(--fuente-titulos); font-weight: 700; color: var(--siie-marino); }
.tarjeta-texto { font-size: .875rem; color: var(--siie-gris); margin-top: .25rem; }
.tarjeta-panel.deshabilitada { opacity: .6; }

.progress-bar { background: var(--siie-guinda); }

/* Tablas */
.barra-herramientas {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: .75rem; margin-bottom: 1rem;
}
.buscador-tabla { position: relative; flex: 1 1 18rem; max-width: 28rem; }
.buscador-tabla i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--siie-gris); }
.buscador-tabla .form-control { padding-left: 2.4rem; border-radius: 999px; }
.leyenda { display: flex; flex-wrap: wrap; gap: .35rem; }

.tabla-panel {
	background: #fff; border: 1px solid var(--siie-borde); border-radius: var(--siie-radio); overflow: hidden;
}
.tabla-panel .table { --bs-table-bg: transparent; }
.tabla-panel thead th {
	background: var(--siie-lavanda); color: var(--siie-marino);
	font-family: var(--fuente-titulos); font-size: .8rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
	border-bottom: 0; padding: .85rem 1rem;
}
.tabla-panel td { padding: .85rem 1rem; }
.tabla-panel code { color: var(--siie-guinda); font-size: .85rem; }
.tabla-panel .badge { font-weight: 500; font-size: .8rem; }
.tabla-seleccion { max-height: 60vh; overflow-y: auto; }
.tabla-seleccion thead th { position: sticky; top: 0; z-index: 1; }
.tabla-seleccion tr:has(input:checked) { background: var(--siie-lavanda); }
.texto-resumen { font-size: .9rem; color: #3a3a46; min-width: 18rem; }
.tabla-vacia { padding: 2rem 1rem; text-align: center; color: var(--siie-gris); margin: 0; }
.tabla-conteo { font-size: .85rem; color: var(--siie-gris); margin: .75rem 0 0; }
.enlace-accion { font-size: .85rem; font-weight: 600; margin-top: .25rem; }
.btn-sm { border-radius: 8px; }

/* Formularios */
.formulario-panel fieldset + fieldset { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--siie-borde); }
.formulario-panel legend, .reactivo legend {
	font-family: var(--fuente-titulos); font-weight: 700; color: var(--siie-marino); font-size: 1.05rem; margin-bottom: 1rem;
}
.form-label { font-weight: 500; }
.obligatorio { color: var(--siie-guinda); }
.acciones-formulario { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.75rem; }
.form-select:focus { border-color: var(--siie-marino); box-shadow: 0 0 0 .2rem rgba(0, 0, 35, .15); }

.opciones-rol, .categorias-director { display: flex; flex-wrap: wrap; gap: .5rem; }
.categorias-director { margin-bottom: 1rem; }
.btn-opcion {
	border: 2px solid var(--siie-borde); background: #fff; color: var(--siie-marino);
	font-weight: 600; border-radius: 999px; padding: .5rem 1rem;
}
.btn-opcion:hover { border-color: var(--siie-marino); }
.btn-check:checked + .btn-opcion, .btn-opcion.active {
	background: var(--siie-marino); border-color: var(--siie-marino); color: #fff;
}

/* Formulario por pasos */
.indicador-pasos { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.indicador-pasos li { display: flex; align-items: center; gap: .5rem; color: var(--siie-gris); font-family: var(--fuente-titulos); font-weight: 600; font-size: .9rem; }
.indicador-pasos span {
	width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
	border: 2px solid var(--siie-borde); background: #fff;
}
.indicador-pasos li.activo { color: var(--siie-marino); }
.indicador-pasos li.activo span { background: var(--siie-guinda); border-color: var(--siie-guinda); color: #fff; }
.indicador-pasos li.hecho span { background: var(--siie-marino); border-color: var(--siie-marino); color: #fff; }
.js-pasos .paso:not(.paso-activo) { display: none; }
.paso + .paso { margin-top: 1.5rem; }
.js-pasos .paso + .paso { margin-top: 0; }

/* Rúbrica */
.instrucciones summary { cursor: pointer; font-family: var(--fuente-titulos); font-weight: 700; color: var(--siie-marino); }
.avance-rubrica {
	position: sticky; top: 76px; z-index: 5;
	background: #fff; border: 1px solid var(--siie-borde); border-radius: var(--siie-radio);
	padding: .85rem 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--siie-sombra);
}
.dimension-rubrica {
	font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--siie-guinda);
	margin: 2rem 0 .75rem;
}
.reactivo { margin-bottom: 1rem; scroll-margin-top: 170px; }
.reactivo legend { font-size: 1rem; line-height: 1.5; display: flex; gap: .75rem; }
.numero-reactivo {
	flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 8px;
	display: grid; place-items: center; background: var(--siie-marino); color: #fff; font-size: .9rem;
}
.opciones-reactivo { display: grid; gap: .5rem; }
.opcion-reactivo { position: relative; }
.opcion-reactivo input { position: absolute; left: 1rem; top: 1.05rem; margin: 0; }
.opcion-reactivo label {
	display: block; cursor: pointer; padding: .85rem 1rem .85rem 2.75rem;
	border: 1px solid var(--siie-borde); border-radius: 10px; font-size: .925rem;
}
.opcion-reactivo label:hover { border-color: var(--siie-marino); }
.opcion-reactivo input:checked + label { border-color: var(--siie-guinda); background: #F7EEF3; }
.nivel-reactivo {
	display: inline-block; font-family: var(--fuente-titulos); font-weight: 700; font-size: .75rem;
	color: var(--siie-guinda); margin-right: .35rem;
}
.reactivo.no-respondido { border-color: var(--bs-danger); }
.reactivo.no-respondido .invalid-feedback { display: block; }
.form-check-input:checked { background-color: var(--siie-guinda); border-color: var(--siie-guinda); }

#tablas { display: none; }

/* --------------------------------------------------------------------------
   Contenidos de las secciones
   -------------------------------------------------------------------------- */
.contenido { max-width: 75ch; }
.contenido p, .lista-contenido li { text-align: left; }
.subtitulo-contenido { font-size: 1.15rem; color: var(--siie-marino); margin: 1.5rem 0 .75rem; }
.subtitulo-contenido:first-child { margin-top: 0; }
.lista-contenido { padding-left: 1.25rem; }
.lista-contenido li { margin-bottom: .5rem; }
.lista-contenido li::marker { color: var(--siie-guinda); font-weight: 700; }
.text-guinda { color: var(--siie-guinda); }
.cita-destacada {
	border-left: 4px solid var(--siie-guinda); background: var(--siie-lavanda);
	border-radius: 0 10px 10px 0; padding: 1.25rem 1.5rem; margin: 1.25rem 0;
	font-family: var(--fuente-titulos); font-weight: 500; color: var(--siie-marino); font-size: 1.05rem;
}
.video-responsivo, .mapa-responsivo {
	position: relative; aspect-ratio: 16 / 9; border-radius: var(--siie-radio); overflow: hidden;
	background: var(--siie-fondo); border: 1px solid var(--siie-borde);
}
.mapa-responsivo { aspect-ratio: 4 / 3; }
.video-responsivo iframe, .mapa-responsivo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tarjeta-documento {
	display: flex; gap: 1rem; align-items: flex-start; height: 100%;
	background: #fff; border: 1px solid var(--siie-borde); border-left: 4px solid var(--siie-guinda);
	border-radius: var(--siie-radio); padding: 1.25rem;
}
.tarjeta-documento img { width: 72px; height: auto; flex-shrink: 0; }
.tarjeta-documento h3 { font-size: 1rem; margin-bottom: .35rem; }
.tarjeta-documento p { font-size: .9rem; color: var(--siie-gris); margin-bottom: .75rem; }
.tarjeta-documento-icono { font-size: 2.5rem; color: var(--siie-guinda); line-height: 1; }

.figura-contenido { margin: 0; text-align: center; }
.figura-contenido img { max-width: 100%; height: auto; border-radius: var(--siie-radio); border: 1px solid var(--siie-borde); }
.figura-contenido figcaption { margin-top: .5rem; font-family: var(--fuente-titulos); font-weight: 600; color: var(--siie-marino); }

.tarjeta-enlace-externo {
	display: flex; align-items: center; gap: 1.25rem; max-width: 40rem;
	background: #fff; border: 1px solid var(--siie-borde); border-radius: var(--siie-radio);
	padding: .75rem; text-decoration: none; color: var(--siie-marino);
}
.tarjeta-enlace-externo:hover { border-color: var(--siie-guinda); box-shadow: var(--siie-sombra); color: var(--siie-marino); }
.tarjeta-enlace-externo img { width: 160px; height: auto; border-radius: 8px; }
.tarjeta-enlace-externo strong { display: block; font-family: var(--fuente-titulos); }
.tarjeta-enlace-externo span span { color: var(--siie-guinda); font-size: .9rem; }

.filtros-tarjetas { background: var(--siie-fondo); border-radius: var(--siie-radio); padding: 1rem 1.25rem .25rem; margin-bottom: 1.25rem; }
.tarjeta-pifie {
	display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--siie-texto);
	background: #fff; border: 1px solid var(--siie-borde); border-radius: var(--siie-radio); overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.tarjeta-pifie:hover { border-color: var(--siie-guinda); box-shadow: var(--siie-sombra); color: var(--siie-texto); }
.tarjeta-pifie img { width: 100%; height: auto; aspect-ratio: 300 / 388; object-fit: cover; border-bottom: 1px solid var(--siie-borde); }
.tarjeta-pifie-texto { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; padding: .85rem 1rem 1rem; }
.tarjeta-pifie-texto strong { font-size: .9rem; line-height: 1.35; color: var(--siie-marino); }

.acordeon-practicas { display: grid; gap: .5rem; }
.practica-identificada { background: #fff; border: 1px solid var(--siie-borde); border-radius: 10px; }
.practica-identificada summary {
	cursor: pointer; padding: .85rem 1.1rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem;
	justify-content: space-between; align-items: baseline;
}
.practica-identificada summary strong { color: var(--siie-marino); font-family: var(--fuente-titulos); font-size: .95rem; }
.practica-identificada summary span { font-size: .8rem; color: var(--siie-gris); }
.practica-identificada[open] { border-color: var(--siie-guinda); }
.practica-identificada p { padding: 0 1.1rem 1rem; margin: 0; font-size: .925rem; }

.lista-equipo { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lista-equipo li { background: var(--siie-fondo); border: 1px solid var(--siie-borde); border-radius: 999px; padding: .35rem .9rem; }
.lista-equipo i { color: var(--siie-guinda); }
.tarjeta-contacto { display: flex; flex-direction: column; gap: .35rem; }
.tarjeta-contacto strong { font-family: var(--fuente-titulos); color: var(--siie-marino); }
.redes li { margin-bottom: .75rem; }
.redes i { font-size: 1.4rem; color: var(--siie-guinda); margin-right: .35rem; vertical-align: middle; }
.pie-redes { display: flex; gap: .75rem; margin-top: 1rem; }
.pie-redes a { font-size: 1.4rem; }

html[data-contraste="alto"] .cita-destacada, html[data-contraste="alto"] .tarjeta-documento,
html[data-contraste="alto"] .tarjeta-pifie, html[data-contraste="alto"] .practica-identificada,
html[data-contraste="alto"] .filtros-tarjetas, html[data-contraste="alto"] .lista-equipo li,
html[data-contraste="alto"] .tarjeta-enlace-externo {
	background: #000 !important; color: #fff !important; border-color: #fff !important;
}
html[data-contraste="alto"] .tarjeta-pifie-texto strong, html[data-contraste="alto"] .practica-identificada summary *,
html[data-contraste="alto"] .tarjeta-contacto strong, html[data-contraste="alto"] .subtitulo-contenido,
html[data-contraste="alto"] .tarjeta-documento p, html[data-contraste="alto"] .figura-contenido figcaption { color: #fff !important; }

/* --------------------------------------------------------------------------
   Menú secundario y pie de página
   -------------------------------------------------------------------------- */
.menu-secundario { background: var(--siie-lavanda); padding: 2rem 0; }
.acceso-secundario {
	display: flex; align-items: center; gap: 1rem; height: 100%;
	background: #fff; border-radius: var(--siie-radio); padding: 1rem 1.15rem;
	text-decoration: none; color: var(--siie-marino);
	border: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
.acceso-secundario:hover, .acceso-secundario.active {
	border-color: var(--siie-guinda); box-shadow: var(--siie-sombra); color: var(--siie-marino);
}
.acceso-icono {
	flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.35rem;
	background: var(--siie-guinda); color: #fff;
}
.acceso-texto strong { font-family: var(--fuente-titulos); display: block; }
.acceso-texto small { color: var(--siie-gris); line-height: 1.35; margin-top: .15rem; }

.pie { background: var(--siie-guinda); color: #F3E6EC; padding: 3rem 0 1.5rem; font-size: .925rem; }
.pie a { color: #fff; }
.pie a:hover { color: #F3E6EC; }
.pie hr { border-color: rgba(255, 255, 255, .2); opacity: 1; margin: 2rem 0 1.25rem; }
.pie-logo { background: #fff; border-radius: 12px; padding: .4rem; width: 64px; height: auto; margin-bottom: 1rem; }
.pie-titulo { font-family: var(--fuente-titulos); font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: .35rem; }
.pie-encabezado { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.pie-enlaces li { margin-bottom: .5rem; }
.pie-enlaces i { margin-right: .35rem; }
.columnas-2 { columns: 2; column-gap: 1.5rem; }
.pie-legal { font-size: .8rem; color: rgba(243, 230, 236, .85); }

/* --------------------------------------------------------------------------
   Modo de alto contraste
   -------------------------------------------------------------------------- */
html[data-contraste="alto"] {
	--siie-texto: #FFFFFF;
	--siie-gris: #FFFFFF;
	--siie-fondo: #000000;
	--siie-lavanda: #000000;
	--siie-borde: #FFFFFF;
	--siie-guinda: #FFD700;
	--siie-guinda-oscuro: #FFD700;
	--bs-body-color: #FFFFFF;
	--bs-body-bg: #000000;
	--bs-link-color: #FFD700;
	--bs-link-color-rgb: 255, 215, 0;
	--bs-link-hover-color: #FFFFFF;
	--bs-link-hover-color-rgb: 255, 255, 255;
	--bs-secondary-color: #FFFFFF;
	--bs-tertiary-color: #FFFFFF;
}
html[data-contraste="alto"] body,
html[data-contraste="alto"] .encabezado,
html[data-contraste="alto"] .hero,
html[data-contraste="alto"] .cabecera-seccion,
html[data-contraste="alto"] .cifras,
html[data-contraste="alto"] .tarjeta-seccion,
html[data-contraste="alto"] .tarjeta-acceso,
html[data-contraste="alto"] .acceso-secundario,
html[data-contraste="alto"] .dropdown-menu,
html[data-contraste="alto"] .btn-carrusel,
html[data-contraste="alto"] .pie,
html[data-contraste="alto"] .barra-gobmx,
html[data-contraste="alto"] .barra-institucional {
	background: #000 !important; color: #fff !important; border-color: #fff !important;
}
html[data-contraste="alto"] h1, html[data-contraste="alto"] h2, html[data-contraste="alto"] h3,
html[data-contraste="alto"] .nav-link, html[data-contraste="alto"] .dropdown-item,
html[data-contraste="alto"] .lista-guia a, html[data-contraste="alto"] .acceso-secundario,
html[data-contraste="alto"] .breadcrumb-item.active, html[data-contraste="alto"] .cabecera-resumen,
html[data-contraste="alto"] .cifra span, html[data-contraste="alto"] .aviso-pendiente,
html[data-contraste="alto"] .aviso-pendiente span, html[data-contraste="alto"] .text-body-secondary {
	color: #fff !important;
}
html[data-contraste="alto"] a:not(.btn) { color: #FFD700; text-decoration: underline; }
html[data-contraste="alto"] .nav-link.active, html[data-contraste="alto"] .tarjeta-enlace { color: #FFD700 !important; }
html[data-contraste="alto"] .btn-cta, html[data-contraste="alto"] .btn-acceso,
html[data-contraste="alto"] .tarjeta-icono, html[data-contraste="alto"] .acceso-icono,
html[data-contraste="alto"] .cabecera-icono {
	background: #FFD700 !important; color: #000 !important; border-color: #FFD700 !important;
}
html[data-contraste="alto"] .btn-outline-primario, html[data-contraste="alto"] .btn-a11y,
html[data-contraste="alto"] .navbar-toggler, html[data-contraste="alto"] .btn-carrusel {
	color: #fff !important; border-color: #fff !important;
}
html[data-contraste="alto"] .btn-a11y[aria-pressed="true"] { background: #FFD700 !important; color: #000 !important; }
html[data-contraste="alto"] .nav-link:hover, html[data-contraste="alto"] .dropdown-item:hover,
html[data-contraste="alto"] .dropdown-item:focus { background: #333 !important; }
html[data-contraste="alto"] .navbar-brand img, html[data-contraste="alto"] .hero-imagen {
	filter: grayscale(1) invert(1) brightness(1.6);
}
html[data-contraste="alto"] .form-control { background: #000; color: #fff; border-color: #fff; }
html[data-contraste="alto"] .aviso-pendiente { border-left-color: #FFD700; border: 1px solid #fff; }

/* Alto contraste en paneles internos */
html[data-contraste="alto"] .cabecera-panel,
html[data-contraste="alto"] .panel-contenido,
html[data-contraste="alto"] .bloque-panel,
html[data-contraste="alto"] .tabla-panel,
html[data-contraste="alto"] .tarjeta-panel,
html[data-contraste="alto"] .avance-rubrica,
html[data-contraste="alto"] .tabla-panel thead th,
html[data-contraste="alto"] .opcion-reactivo label,
html[data-contraste="alto"] .btn-opcion,
html[data-contraste="alto"] .indicador-pasos span,
html[data-contraste="alto"] .modal-content,
html[data-contraste="alto"] .form-select {
	background: #000 !important; color: #fff !important; border-color: #fff !important;
}
html[data-contraste="alto"] .menu-panel .nav-link,
html[data-contraste="alto"] .panel-usuario,
html[data-contraste="alto"] .tarjeta-titulo, html[data-contraste="alto"] .tarjeta-numero,
html[data-contraste="alto"] .tarjeta-texto, html[data-contraste="alto"] .form-text,
html[data-contraste="alto"] .tabla-conteo, html[data-contraste="alto"] .tabla-vacia,
html[data-contraste="alto"] .texto-resumen, html[data-contraste="alto"] .table {
	color: #fff !important; --bs-table-color: #fff; --bs-table-hover-color: #fff; --bs-table-hover-bg: #222;
}
html[data-contraste="alto"] .menu-panel .nav-link.active,
html[data-contraste="alto"] .btn-check:checked + .btn-opcion, html[data-contraste="alto"] .btn-opcion.active,
html[data-contraste="alto"] .opcion-reactivo input:checked + label,
html[data-contraste="alto"] .indicador-pasos li.activo span, html[data-contraste="alto"] .numero-reactivo,
html[data-contraste="alto"] .progress-bar {
	background: #FFD700 !important; color: #000 !important; border-color: #FFD700 !important;
}
html[data-contraste="alto"] .tabla-panel code, html[data-contraste="alto"] .nivel-reactivo,
html[data-contraste="alto"] .dimension-rubrica { color: #FFD700 !important; }

/* --------------------------------------------------------------------------
   Instrumento de Documentación 2024 (registro de PE) y consulta
   -------------------------------------------------------------------------- */
.opciones-proceso { display: grid; gap: .5rem; }
@media (min-width: 992px) { .opciones-proceso { grid-template-columns: repeat(3, 1fr); } }
.opciones-proceso .opcion-reactivo label { height: 100%; }
.bloque-condicional {
	margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--siie-radio);
	background: var(--siie-fondo); border: 1px dashed var(--siie-borde);
}
.pregunta-doc { padding: 1.25rem 0; border-top: 1px solid var(--siie-borde); }
.pregunta-doc:first-of-type { border-top: 0; padding-top: .25rem; }
.pregunta-doc .form-label { display: flex; gap: .75rem; font-weight: 600; color: var(--siie-marino); font-family: var(--fuente-titulos); line-height: 1.45; }
.ayuda-doc {
	font-size: .875rem; color: #55555F; background: var(--siie-fondo);
	border-left: 3px solid var(--siie-borde); border-radius: 0 8px 8px 0;
	padding: .6rem .85rem; margin: 0 0 .6rem 2.75rem;
}
.pregunta-doc textarea { margin-left: 2.75rem; width: calc(100% - 2.75rem); }
.pregunta-doc .invalid-feedback, .pregunta-doc .contador-palabras { margin-left: 2.75rem; }
@media (max-width: 575.98px) {
	.ayuda-doc, .pregunta-doc textarea, .pregunta-doc .invalid-feedback { margin-left: 0; width: 100%; }
}
.indicador-pasos li { font-size: .8rem; }

/* Ficha de consulta de la documentación */
.ficha-datos { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
.ficha-datos dt { font-weight: 600; color: var(--siie-gris); font-size: .875rem; }
.ficha-datos dd { margin: 0; }
@media (max-width: 575.98px) { .ficha-datos { grid-template-columns: 1fr; } .ficha-datos dd { margin-bottom: .5rem; } }
.respuesta-doc { padding: 1rem 0; border-top: 1px solid var(--siie-borde); }
.respuesta-doc:first-of-type { border-top: 0; }
.respuesta-doc h3 { font-size: .95rem; display: flex; gap: .75rem; line-height: 1.45; margin-bottom: .5rem; }
.respuesta-doc .texto-respuesta { margin-left: 2.75rem; white-space: pre-line; }
.respuesta-doc .sin-respuesta { margin-left: 2.75rem; color: var(--siie-gris); font-style: italic; }
@media (max-width: 575.98px) { .respuesta-doc .texto-respuesta, .respuesta-doc .sin-respuesta { margin-left: 0; } }
.indice-doc { position: sticky; top: 90px; }
.indice-doc a { display: block; padding: .3rem 0; text-decoration: none; font-size: .9rem; }

/* Rúbrica: definición del criterio */
.criterio-rubrica { background: var(--siie-lavanda); border-radius: var(--siie-radio); padding: .9rem 1.15rem; margin: 2rem 0 .75rem; }
.criterio-rubrica h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--siie-guinda); margin: 0; }
.criterio-rubrica details { margin-top: .35rem; font-size: .875rem; }
.criterio-rubrica summary { cursor: pointer; color: var(--siie-marino); font-weight: 600; }
.criterio-rubrica p { margin: .5rem 0 0; }
.indicadores-reactivo { font-size: .8rem; color: var(--siie-gris); margin: -.35rem 0 .85rem 2.75rem; }

html[data-contraste="alto"] .bloque-condicional, html[data-contraste="alto"] .ayuda-doc,
html[data-contraste="alto"] .criterio-rubrica { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html[data-contraste="alto"] .pregunta-doc .form-label, html[data-contraste="alto"] .criterio-rubrica h2,
html[data-contraste="alto"] .indicadores-reactivo, html[data-contraste="alto"] .ficha-datos dt { color: #fff !important; }
.enlace-practica { color: var(--siie-marino); text-decoration: none; }
.enlace-practica:hover { color: var(--siie-guinda); text-decoration: underline; }

/* Diagrama del proceso de documentación (PEI) */
.etapas-proceso { list-style: none; padding: 0; margin: 1.5rem 0 0; position: relative; }
.etapa { position: relative; display: flex; gap: 1rem; padding-bottom: 1.75rem; }
.etapa:not(:last-child)::before {
	content: ""; position: absolute; left: 1.25rem; top: 2.5rem; bottom: 0; width: 2px;
	background: var(--siie-borde); transform: translateX(-1px);
}
.etapa-numero {
	flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	display: grid; place-items: center; font-family: var(--fuente-titulos); font-weight: 700;
	background: var(--siie-marino); color: #fff;
}
.etapa > div { flex: 1; min-width: 0; padding-top: .35rem; }
.etapa h4 { font-size: 1.1rem; font-weight: 700; color: var(--siie-marino); margin-bottom: .5rem; }
.vias-proceso { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.vias-proceso li {
	background: #fff; border: 1px solid var(--siie-borde); border-radius: var(--siie-radio);
	padding: 1rem; display: flex; flex-direction: column; gap: .25rem;
}
.vias-proceso i { font-size: 1.4rem; color: var(--siie-guinda); }
.vias-proceso strong { font-family: var(--fuente-titulos); color: var(--siie-marino); font-size: .95rem; }
.vias-proceso span { font-size: .875rem; color: var(--siie-gris); }
.resultados-proceso { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: .75rem; }
.resultado { border-radius: var(--siie-radio); padding: 1rem 1.15rem; }
.resultado strong { display: flex; gap: .5rem; align-items: baseline; font-family: var(--fuente-titulos); }
.resultado p { margin: .4rem 0 0; font-size: .925rem; }
.resultado-si { background: #E8F6EE; color: #17583A; }
.resultado-no { background: #FDECEC; color: #8A1A20; }
.banda-acompanamiento {
	margin: 0; text-align: center; padding: .75rem 1rem; border-radius: 999px;
	background: var(--siie-lavanda); color: var(--siie-marino); font-family: var(--fuente-titulos); font-weight: 600;
}
html[data-contraste="alto"] .vias-proceso li, html[data-contraste="alto"] .resultado, html[data-contraste="alto"] .banda-acompanamiento {
	background: #000 !important; color: #fff !important; border: 1px solid #fff;
}
html[data-contraste="alto"] .vias-proceso strong, html[data-contraste="alto"] .vias-proceso span, html[data-contraste="alto"] .etapa h4 { color: #fff; }
html.tema-moderno:not([data-contraste="alto"]) .vias-proceso li { border: 0; box-shadow: var(--m-sombra-1); border-radius: var(--m-radio); }
html.tema-moderno:not([data-contraste="alto"]) .etapa-numero { background: var(--m-grad-marino); }