/* ============================================================
   GUÍA DE REGISTRO DE LA PRÁCTICA LABORAL
   Hoja del shortcode [ecotec_guia_practicas].

   La estructura NO es propia: héroe, franjas, rótulos, botones,
   tarjetas, riel de pasos y banda de cierre son los componentes que
   ya declara ECOTEC_Portal (`ecp-hero`, `ecp-sec`, `ecp-rotulo`,
   `ecp-b`, `ecp-dato`, `ecp-riel`, `ecp-cierre`). La primera versión
   de esta guía traía su propio héroe, sus propios títulos y su propia
   escala de grises, y por eso se leía como un documento importado
   dentro del portal en lugar de como una pantalla más.

   Aquí solo se define lo que el portal no tiene:

     - `ecg-ventana`  la captura enmarcada como ventana de navegador
     - `ecg-marco`    el pedestal navy sobre el que flota
     - `ecg-campos`   la tabla campo → qué se escribe en él
     - `ecg-selector` las pestañas de modalidad
     - `ecg-video`    los dos tutoriales
     - `ecg-indice`   el índice pegajoso

   El marco y el pedestal son deliberadamente los de los tutoriales en
   vídeo: misma ventana redondeada, mismo degradado navy, mismo cian.
   Guía y vídeos cuentan lo mismo y ahora se parecen.

   Todo cuelga de `.ecp` porque los tokens (--azul, --n050, --r-caja,
   --sans) se declaran sobre esa clase, que `body_class` solo añade en
   las páginas de ECOTEC_Portal::SLUGS. Sin el slug en esa lista, la
   página sale sin color.
   ============================================================ */

.ecp .ecg {
	/* Lo fija el JS con la altura real de la subcabecera. */
	--ecg-sticky: 50px;
	/* El navy de los tutoriales: el azul institucional oscurecido, no un
	   color nuevo. Se usa solo como pedestal de las capturas. */
	--ecg-plinto: linear-gradient(150deg, #06264f 0%, var(--azul) 62%, #0b57b8 100%);
}

/* ---------- Héroe ----------
   Usa .ecp-hero del portal; aquí solo el ajuste de anchura del titular,
   que con 19ch partía «práctica laboral» en tres líneas. */
.ecp .ecg-hero h1.ecp-h1 { max-width: 26ch; }
.ecp .ecg-hero .ecp-hero__in { padding-bottom: 62px; }

/* ---------- Índice pegajoso ----------
   Por debajo de la subcabecera del portal (z-index 99) y desplazado por
   su altura: las dos son `sticky` a la vez y sin el desplazamiento esta
   se mete debajo de aquella y desaparece. */
.ecp .ecg-indice {
	position: sticky; top: var(--ecg-sticky); z-index: 18;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--n100);
}
.ecp .ecg-indice__caja {
	max-width: 1180px; margin: 0 auto; padding: 0 24px;
	display: flex; align-items: center; gap: 22px;
	/* Igual que en la subcabecera: se desliza en vez de romper en dos
	   filas, y `min-width:0` impide que estire el ancho del documento. */
	overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; min-width: 0;
}
.ecp .ecg-indice__caja::-webkit-scrollbar { display: none; }
.ecp .ecg a.ecg-indice__e {
	flex: 0 0 auto; white-space: nowrap; text-decoration: none;
	padding: 15px 0; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
	color: var(--gris); border-bottom: 2px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}
.ecp .ecg a.ecg-indice__e:hover { color: var(--azul); }
.ecp .ecg a.ecg-indice__e--actual { color: var(--azul); font-weight: 600; border-bottom-color: var(--cian); }
.ecp .ecg a.ecg-indice__e:focus-visible { outline: 2px solid var(--azul); outline-offset: -3px; }

/* ---------- Descarga del PDF, bajo el índice ---------- */
.ecp .ecg-descarga {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--papel); border: 1px solid var(--n100); border-radius: var(--r-caja);
	padding: 18px 22px; box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-descarga__t { font-size: 15px; line-height: 1.55; color: var(--n700); flex: 1 1 260px; margin: 0; }
.ecp .ecg-descarga__t b { color: var(--azul); font-weight: 600; }

/* ============================================================
   LA CAPTURA COMO VENTANA DE NAVEGADOR
   ============================================================ */
.ecp .ecg-marco {
	margin: 0; padding: 26px; border-radius: var(--r-caja);
	background: var(--ecg-plinto);
	box-shadow: 0 10px 30px rgba(0, 41, 92, .18);
}
.ecp .ecg-marco--fino { padding: 18px; }
.ecp .ecg-ventana {
	position: relative; background: var(--papel);
	border-radius: 8px; overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.ecp .ecg-ventana__barra {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 14px; background: #f4f7fb; border-bottom: 1px solid var(--n100);
}
/* Los tres botones de la ventana. Decoración pura: van en un solo
   elemento con sombras laterales en vez de tres `span` vacíos. */
.ecp .ecg-ventana__puntos {
	flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--n300);
	box-shadow: 15px 0 0 var(--n300), 30px 0 0 var(--n300); margin-right: 30px;
}
.ecp .ecg-ventana__url {
	flex: 1 1 auto; min-width: 0; background: var(--papel);
	border: 1px solid var(--n100); border-radius: 999px;
	padding: 5px 14px; font-size: 12px; color: var(--gris);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecp .ecg-ventana__lienzo { position: relative; }
.ecp .ecg-ventana img { display: block; width: 100%; height: auto; }
.ecp .ecg-marco--mini { max-width: 420px; }
.ecp .ecg-marco--corto { max-width: 700px; }

/* Puntos numerados sobre la captura. La posición va en el HTML porque
   depende de cada imagen, no del componente. */
.ecp .ecg-punto {
	position: absolute; transform: translate(-50%, -50%);
	width: 27px; height: 27px; border-radius: 999px;
	background: var(--cian); color: var(--azul); font-size: 13px; font-weight: 700;
	font-variant-numeric: tabular-nums;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 4px rgba(43, 186, 226, .35), 0 2px 6px rgba(0, 0, 0, .25);
}

/* Leyenda numerada que acompaña a una captura con puntos. */
.ecp .ecg-leyenda { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.ecp .ecg-leyenda li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: var(--n700); }
.ecp .ecg-leyenda li::before {
	content: counter(list-item); flex: none; margin-top: 1px;
	width: 25px; height: 25px; border-radius: 999px;
	background: var(--papel); box-shadow: inset 0 0 0 2px var(--cian);
	color: var(--azul); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums;
	display: flex; align-items: center; justify-content: center;
}
.ecp .ecg-pie { font-size: 13.5px; line-height: 1.6; color: var(--gris); margin: 12px 0 0; }

/* ---------- Avisos ----------
   No hay componente propio: los avisos son `.ecp-nota` del portal, que
   ya es exactamente esto —filete cian a la izquierda, rótulo en
   versalitas—. Solo se ajusta el margen superior, pensado para separar
   la nota del bloque anterior de una sección y aquí demasiado grande
   dentro de un paso. */
.ecp .ecg .ecp-nota { margin-top: 0; }
.ecp .ecg .ecp-nota + .ecp-nota { margin-top: 14px; }

/* ---------- Tarjetas de requisito ----------
   `.ecp-dato` del portal como contenedor: su `dt`/`dd` sirven para un
   dato de expediente (rótulo + valor), no para un título con párrafo. */
.ecp .ecg-req__t { display: block; font-size: 14px; font-weight: 700; color: var(--azul); margin-bottom: 8px; line-height: 1.35; }
.ecp .ecg-req p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gris); }
.ecp .ecg-req p strong { color: var(--azul); font-weight: 600; }

/* ============================================================
   COMPARATIVO DE RUTAS
   ============================================================ */
.ecp .ecg-rutas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.ecp .ecg-ruta {
	background: var(--papel); border: 1px solid var(--n100); border-radius: var(--r-caja);
	overflow: hidden; display: grid; align-content: start;
	box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-ruta__cab { padding: 24px 26px 20px; background: var(--azul); color: #fff; }
.ecp .ecg-ruta--b .ecg-ruta__cab { background: #06264f; }
.ecp .ecg-ruta__cab .ecg-clave {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--cian); margin-bottom: 8px;
}
.ecp .ecg-ruta__cab .ecg-clave::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--cian); }
.ecp .ecg-ruta__cab h3 { margin: 0; font-size: 21px; font-weight: 600; color: #fff; line-height: 1.25; letter-spacing: -.2px; }
.ecp .ecg-ruta__cuerpo { padding: 22px 26px 26px; display: grid; gap: 16px; }
.ecp .ecg-ruta__cuerpo p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gris); }
.ecp .ecg-ruta__cuerpo p strong { color: var(--azul); font-weight: 600; }
.ecp .ecg-modalidades { margin: 0; padding: 16px 0 0; list-style: none; display: grid; gap: 10px; border-top: 1px solid var(--n100); }
.ecp .ecg-modalidades .ecg-titulillo { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.ecp .ecg-modalidades li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--n700); }
.ecp .ecg-modalidades li b {
	flex: none; min-width: 34px; color: var(--azul); font-weight: 700;
	font-variant-numeric: tabular-nums; font-size: 13.5px;
}

/* ============================================================
   TUTORIALES EN VÍDEO
   ============================================================ */
.ecp .ecg-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }
.ecp .ecg-video {
	background: var(--papel); border: 1px solid var(--n100); border-radius: var(--r-caja);
	overflow: hidden; box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
	display: grid; align-content: start;
}
.ecp .ecg-video video {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
	background: #06264f; border-bottom: 1px solid var(--n100);
}
.ecp .ecg-video__pie { padding: 20px 22px; display: grid; gap: 7px; }
.ecp .ecg-video__pie h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--azul); }
.ecp .ecg-video__pie p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gris); }
.ecp .ecg-video__meta {
	display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px;
	font-size: 12.5px; color: var(--gris); font-variant-numeric: tabular-nums;
}
.ecp .ecg-video__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ecp .ecg-video__meta span::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--cian); }

/* ============================================================
   SELECTOR DE MODALIDAD
   ============================================================ */
.ecp .ecg-selector {
	background: var(--papel); border: 1px solid var(--n100); border-radius: var(--r-caja);
	padding: 24px; display: grid; gap: 20px; box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-selector__grupo { display: grid; gap: 12px; }
.ecp .ecg-selector__grupo + .ecg-selector__grupo { padding-top: 20px; border-top: 1px solid var(--n100); }
.ecp .ecg-selector__rotulo {
	display: flex; align-items: center; gap: 10px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
}
.ecp .ecg-selector__rotulo::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.ecp .ecg-pastillas { display: flex; flex-wrap: wrap; gap: 10px; }
.ecp .ecg .ecg-pastilla {
	font: inherit; font-size: 14px; font-weight: 600; padding: 11px 19px;
	border: 1px solid var(--n100); border-radius: var(--r-boton);
	background: var(--papel); color: var(--n700); cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ecp .ecg .ecg-pastilla:hover { border-color: var(--cian); color: var(--azul); transform: translateY(-1px); }
.ecp .ecg .ecg-pastilla[aria-selected="true"] {
	background: var(--azul); border-color: var(--azul); color: #fff;
	box-shadow: 0 4px 14px rgba(0, 73, 164, .28);
}
.ecp .ecg .ecg-pastilla:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

/* ---------- Una modalidad ---------- */
.ecp .ecg-modalidad { display: grid; gap: 34px; margin-top: 34px; }
.ecp .ecg-modalidad[hidden] { display: none; }
.ecp .ecg-modalidad__cab {
	display: grid; gap: 11px; padding: 28px 30px;
	background: var(--papel); border: 1px solid var(--n100); border-left: 5px solid var(--azul);
	border-radius: var(--r-caja); box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-modalidad--b .ecg-modalidad__cab { border-left-color: var(--cian); }
.ecp .ecg-modalidad__cab .ecg-clave {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
}
.ecp .ecg-modalidad__cab .ecg-clave::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.ecp .ecg-modalidad__cab h3 { margin: 0; font-size: 26px; font-weight: 600; color: var(--azul); letter-spacing: -.4px; }
.ecp .ecg-modalidad__cab p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--gris); max-width: 62ch; }

/* Los pasos van en el riel indexado del portal (.ecp-riel/.ecp-paso).
   Aquí solo el título, que dentro de una modalidad es h4 y no h3. */
.ecp .ecg .ecp-paso h4 { font-size: 19px; font-weight: 600; color: var(--azul); margin: 11px 0 14px; line-height: 1.3; }
.ecp .ecg .ecp-paso > div { display: grid; gap: 16px; }

/* ============================================================
   TABLA DE CAMPOS
   Es una lista de definiciones, no una tabla: cada fila es «nombre del
   campo» + «qué se escribe en él». Con <dl> el lector de pantalla
   anuncia la relación; con <div> no anunciaba nada.
   ============================================================ */
.ecp .ecg-campos {
	margin: 0; background: var(--papel);
	border: 1px solid var(--n100); border-radius: var(--r-caja); overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-campos > div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; }
.ecp .ecg-campos > div + div { border-top: 1px solid var(--n100); }
.ecp .ecg-campos dt {
	padding: 15px 20px; background: var(--n050);
	font-size: 14px; font-weight: 600; color: var(--azul); line-height: 1.45;
}
.ecp .ecg-campos dd { margin: 0; padding: 15px 20px; font-size: 15px; line-height: 1.6; color: var(--n700); }
.ecp .ecg-campos dd strong { color: var(--azul); font-weight: 600; }

/* ---------- Recuadro de carga ---------- */
.ecp .ecg-carga {
	background: var(--papel); border: 1px solid var(--n100); border-radius: var(--r-caja);
	padding: 24px; display: grid; gap: 15px; box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-carga__t { font-size: 15px; font-weight: 600; color: var(--azul); }
.ecp .ecg-carga p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gris); }
.ecp .ecg-carga__zona {
	border: 2px dashed var(--n100); border-radius: var(--r-caja); background: var(--n050);
	padding: 34px 20px; display: flex; align-items: center; justify-content: center; gap: 11px;
	font-size: 14.5px; font-weight: 600; color: var(--azul);
}
.ecp .ecg-carga__zona svg { flex: none; color: var(--cian); }
.ecp .ecg-carga__reglas { display: grid; gap: 3px; font-size: 12.5px; color: var(--gris); }
.ecp .ecg-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ecp .ecg-ficha {
	background: var(--n050); border: 1px solid var(--n100); border-radius: var(--r-caja);
	padding: 15px 17px; font-size: 14.5px; font-weight: 500; color: var(--n700); line-height: 1.45;
}
.ecp .ecg-ficha span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--gris); }

/* ---------- Documentación por ruta ---------- */
.ecp .ecg-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.ecp .ecg-doc {
	background: var(--papel); border: 1px solid var(--n100); border-top: 4px solid var(--azul);
	border-radius: var(--r-caja); padding: 24px; display: grid; gap: 14px; align-content: start;
	box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-doc--b { border-top-color: var(--cian); }
.ecp .ecg-doc__t { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.ecp .ecg-doc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ecp .ecg-doc li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--n700); }
.ecp .ecg-doc li::before {
	content: ""; flex: none; margin-top: .55em;
	width: 6px; height: 6px; border-radius: 999px; background: var(--cian);
}
.ecp .ecg-doc li.es-clave { font-weight: 600; color: var(--azul); }
.ecp .ecg-doc li.es-clave::before { background: var(--azul); }
.ecp .ecg-doc p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gris); }
.ecp .ecg-doc p.ecg-doc__nota { padding-top: 12px; border-top: 1px solid var(--n100); }

/* ---------- Inconsistencias frecuentes ---------- */
.ecp .ecg-errores {
	margin: 0; background: var(--papel);
	border: 1px solid var(--n100); border-radius: var(--r-caja); overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-errores > div { display: grid; grid-template-columns: 1fr 1fr; }
.ecp .ecg-errores > div + div { border-top: 1px solid var(--n100); }
.ecp .ecg-errores dt { padding: 20px 22px; font-size: 15px; line-height: 1.6; color: var(--n700); font-weight: 400; }
.ecp .ecg-errores dt strong { display: block; margin-bottom: 4px; color: var(--azul); font-weight: 600; }
.ecp .ecg-errores dd { margin: 0; padding: 20px 22px; background: var(--n050); font-size: 14.5px; line-height: 1.6; color: var(--gris); }

/* ---------- Consultas frecuentes ---------- */
.ecp .ecg-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; }
.ecp .ecg-faq__i {
	background: var(--papel); border: 1px solid var(--n100); border-radius: var(--r-caja);
	padding: 24px; display: grid; gap: 9px; align-content: start;
	box-shadow: 0 2px 10px rgba(0, 73, 164, .06);
}
.ecp .ecg-faq__p { font-size: 16px; font-weight: 600; color: var(--azul); line-height: 1.4; }
.ecp .ecg-faq__i p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--gris); }

/* ---------- Banda de cierre ---------- */
.ecp .ecg-correo {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
	font-size: 17px; font-weight: 600; color: #fff; text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 3px;
	overflow-wrap: anywhere; transition: color .18s ease, border-color .18s ease;
}
.ecp .ecg-correo:hover { color: var(--cian); border-color: var(--cian); }

/* ---------- Que nada estire el documento ----------
   Un hijo de rejilla vale `min-width:auto`, y eso significa que se niega
   a encogerse por debajo del ancho mínimo de su contenido: en lugar de
   estrecharse, estira al padre. Medido a 390 px con la guía recién
   rediseñada: el riel de pasos y sus tarjetas interiores sumaban 437 px
   dentro de un hueco de 342 y TODA la página se desbordaba 71 px a la
   derecha. Es la misma trampa que ya documenta la subcabecera del
   portal, y aquí aparece en cuatro niveles anidados de rejilla, así que
   se corta de raíz en todos.
   ---------------------------------------------------- */
.ecp .ecg-modalidad,
.ecp .ecg .ecp-riel,
.ecp .ecg .ecp-paso,
.ecp .ecg .ecp-paso > div,
.ecp .ecg-marco,
.ecp .ecg-ventana,
.ecp .ecg-campos,
.ecp .ecg-campos > div,
.ecp .ecg-carga,
.ecp .ecg-ruta,
.ecp .ecg-video,
.ecp .ecg-doc { min-width: 0; }

/* La barra de la ventana es flex y su URL es texto que no rompe: sin esto
   la ventana entera se ensancha hasta caber el rótulo completo. */
.ecp .ecg-ventana__url { min-width: 0; }

@media (max-width: 860px) {
	.ecp .ecg-errores > div { grid-template-columns: 1fr; }
	.ecp .ecg-errores dd { border-top: 1px solid var(--n100); }
}

@media (max-width: 720px) {
	.ecp .ecg-indice__caja { padding: 0 16px; gap: 18px; }
	.ecp .ecg-marco { padding: 14px; border-radius: var(--r-caja); }
	.ecp .ecg-ventana__barra { padding: 7px 10px; gap: 8px; }
	.ecp .ecg-ventana__url { font-size: 11px; padding: 4px 10px; }
	/* En estrecho las dos columnas no caben: el nombre del campo pasa a
	   ser un rótulo encima de su descripción. */
	.ecp .ecg-campos > div { grid-template-columns: 1fr; }
	.ecp .ecg-campos dd { padding-top: 12px; }
	.ecp .ecg-modalidad__cab { padding: 22px; }
	.ecp .ecg-selector { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.ecp .ecg *,
	.ecp .ecg *::before { transition: none !important; }
}