/* ============================================================
 * Plantilla — Detalle de trámite (single-tramites.php)
 *
 * También la carga «Denuncias Externas» (template-denuncias.php), que es este
 * mismo formato sin chips, sin aviso y sin tarjeta de ayuda: una hoja para las
 * dos, para que no puedan divergir. Lo único propio de esa página es el
 * modificador `.mbn-tramite--sin-chips` del bloque xl.
 *
 * Maquetas: Figma 169:3365 (desktop 1440; contenido de 1120 en una rejilla
 * de 3 columnas con gap 16: el detalle ocupa 2 y la columna lateral 1),
 * 672:8558 (tablet 834) y 442:28694 (mobile 402).
 *
 * Tablet y mobile son la MISMA composición en una columna, con tres cambios
 * de escala respecto del desktop: el título baja a 24px (Heading/Slab/Medium),
 * el botón del portal a 16px con relleno 8x16 (Button/Body Small • Bold) y las
 * migas a 14px (ver breadcrumbs.css). El resto —chips, acordeón, aviso y
 * tarjeta de ayuda— mide igual en los tres anchos.
 *
 * El layout es el grid de Bootstrap (`row` + `col-xl-8` / `col-xl-4`, §7.2);
 * este archivo solo aporta el andamiaje y las piezas que no son componentes:
 * los chips de tipo, el título, el cuerpo, el botón del portal y la tarjeta
 * de ayuda. El acordeón y el aviso «Importante» son componentes globales y
 * traen su propia hoja.
 *
 * Ojo con base.css (el Base Kit de Siigsa): `main p` fija color, tamaño y un
 * `font-weight: 400 !important`, y `h1` fuerza familia y peso. Donde hace
 * falta !important para ganarle está anotado.
 * ============================================================ */

.mbn-tramite {
	padding-block: var(--mbn-space-page-top, 24px) var(--mbn-space-section, 36px);
	background: var(--mbn-surface-white, #FFFFFF);
}

.mbn-tramite__container {
	display: flex;
	flex-direction: column;
	/* 24 + los 12 de padding propio de las migas = los 36 (spacing-l) que
	   separan la fila de migas del contenido en la maqueta. */
	gap: 24px;
}

.mbn-tramite__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* ---------- Chips con el tipo de trámite ---------- */

.mbn-tramite__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mbn-tramite__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px;
	border: 1px solid var(--mbn-brand-blue-dark, #00268D);
	border-radius: 4px;
	color: var(--mbn-brand-blue-dark, #00268D);
	font-family: var(--mbn-roboto-body-button-font-family, "Roboto", sans-serif);
	font-weight: 700;
	font-size: var(--mbn-roboto-body-button-font-size, 16px);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color 120ms ease-out, color 120ms ease-out;
}

a.mbn-tramite__chip:hover,
a.mbn-tramite__chip:focus-visible {
	background: var(--mbn-brand-blue-dark, #00268D);
	color: var(--mbn-text-on-primary, #E7ECFF);
}

a.mbn-tramite__chip:focus-visible {
	outline: 3px solid var(--mbn-brand-blue, #0F69C4);
	outline-offset: 2px;
}

/* ---------- Título y cuerpo ---------- */

/* base.css: `h1 { font-weight: 700 !important; font-family: Roboto Slab
   !important }`. La familia coincide con la maqueta (Heading/Slab/Large); el
   peso 500 necesita !important para ganarle. */
.mbn-tramite__title {
	margin: 0;
	font-family: var(--mbn-roboto-slab-large-font-family, "Roboto Slab", serif) !important;
	font-weight: var(--mbn-roboto-slab-large-font-weight, 500) !important;
	/* Heading/Slab/Medium (24px) en tablet y mobile —maquetas 672:8573 y
	   442:28700—; sube a Heading/Slab/Large (36px) en el canvas desktop. */
	font-size: var(--mbn-roboto-slab-medium-font-size, 24px);
	line-height: 1.5;
	color: var(--mbn-text-black, #000000);
}

/* El bloque «título + descripción» es una sola pieza en la maqueta (nodo
   173:1028) y va con gap 8, no con los 24 que separan las secciones. */
.mbn-tramite__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.mbn-tramite__content p,
.mbn-tramite__content li {
	font-family: var(--mbn-roboto-body-small-font-family, "Roboto", sans-serif);
	font-size: var(--mbn-roboto-body-small-font-size, 16px);
	line-height: 1.5;
	color: var(--mbn-text-primary, #333333);
}

/* 32px entre párrafos, no los 24 del detalle de noticia: es lo que declaran los
   tres canvas del trámite (169:3369, 672:8574 y 442:28701). */
.mbn-tramite__content p {
	margin-bottom: 32px;
}

.mbn-tramite__content > :first-child {
	margin-top: 0;
}

.mbn-tramite__content > :last-child {
	margin-bottom: 0;
}

.mbn-tramite__content ul,
.mbn-tramite__content ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.mbn-tramite__content a {
	color: var(--mbn-action-primary, #0046A8);
	text-decoration: underline;
}

.mbn-tramite__content a:hover,
.mbn-tramite__content a:focus-visible {
	color: var(--mbn-brand-blue-dark, #00268D);
}

/* base.css declara familia y peso de h2-h6 con !important, así que los
   subtítulos que el editor escriba se quedan con los del kit; aquí solo se
   ajustan tamaño, color y ritmo vertical. */
.mbn-tramite__content h2,
.mbn-tramite__content h3,
.mbn-tramite__content h4 {
	margin-top: 32px;
	margin-bottom: 16px;
	color: var(--mbn-text-primary, #333333);
}

.mbn-tramite__content h2 {
	font-size: calc(24px * var(--mbn-text-scale, 1));
	line-height: 1.5;
}

.mbn-tramite__content h3 {
	font-size: calc(19px * var(--mbn-text-scale, 1));
	line-height: 1.5;
}

.mbn-tramite__content img {
	max-width: 100%;
	height: auto;
}

/* ---------- Acordeón: la barra del panel abierto en azul ----------
   Decisión del equipo (2026-09-29), por coherencia con el resto del sitio: la
   barra del panel ABIERTO va en `--mbn-brand-blue` con el título en blanco,
   como la barra abierta de «Preguntas Frecuentes» y las cabeceras de tabla de
   «Participación Ciudadana». Solo cambia la barra: el cuerpo sigue blanco con
   su borde gris, y la barra cerrada, blanca con borde.
   Se acota a `.mbn-tramite` —el detalle de trámite y «Denuncias Externas», que
   comparten formato— y no a la variante `default`, porque esa variante la usan
   también los acordeones de `content-tabs`, que siguen en gris. */

.mbn-tramite .mbn-accordion__list {
	--bs-accordion-active-bg: var(--mbn-brand-blue, #0F69C4);
	--bs-accordion-active-color: var(--mbn-text-on-brand-soft, rgba(255, 255, 255, 0.95));
}

/* El chevron de la variante por defecto es un SVG en `#333` servido como
   imagen de fondo, que sobre el azul no se ve y no toma `currentColor`. Se
   pinta con `mask-image`, igual que en la variante `brand`: oscuro en la barra
   cerrada y blanco en la abierta. La rotación sigue siendo la de
   accordion.css. Propiedades largas, no el atajo `mask` (§10). */
.mbn-tramite .mbn-accordion .accordion-button::after {
	background-image: none;
	background-color: currentColor;
	mask-image: var(--mbn-accordion-icon);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: var(--mbn-accordion-icon);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

/* El outline de foco del componente es azul de marca: sobre la barra abierta
   desaparecería. */
.mbn-tramite .mbn-accordion .accordion-button:not(.collapsed):focus-visible {
	outline-color: var(--mbn-surface-white, #FFFFFF);
}

/* ---------- Columna lateral ---------- */

.mbn-tramite__aside {
	display: flex;
	flex-direction: column;
	gap: 25px;
	min-width: 0;
}

/* Botón del portal: `btn` de Bootstrap con las variables del design system
   (§7.3). Ocupa el ancho de la columna, como en la maqueta. */
.mbn-tramite__cta {
	--bs-btn-bg: var(--mbn-action-primary, #0046A8);
	--bs-btn-border-color: var(--mbn-action-primary, #0046A8);
	--bs-btn-color: var(--mbn-text-on-primary, #E7ECFF);
	--bs-btn-hover-bg: var(--mbn-brand-blue-dark, #00268D);
	--bs-btn-hover-border-color: var(--mbn-brand-blue-dark, #00268D);
	--bs-btn-hover-color: var(--mbn-text-on-primary, #E7ECFF);
	--bs-btn-active-bg: var(--mbn-brand-blue-dark, #00268D);
	--bs-btn-active-border-color: var(--mbn-brand-blue-dark, #00268D);
	--bs-btn-active-color: var(--mbn-text-on-primary, #E7ECFF);
	/* Tablet y mobile: Button/Body Small • Bold (16px) con relleno 8x16
	   (672:8582 y 442:28709). El canvas desktop lo sube a 19px con 12x24. */
	--bs-btn-padding-x: 16px;
	--bs-btn-padding-y: 8px;
	--bs-btn-font-family: var(--mbn-roboto-body-button-font-family, "Roboto", sans-serif);
	--bs-btn-font-size: var(--mbn-roboto-body-button-font-size, 16px);
	--bs-btn-font-weight: 700;
	--bs-btn-line-height: 1.5;
	--bs-btn-border-radius: 24px;
	width: 100%;
	text-decoration: none;
}

.mbn-tramite__cta:focus-visible {
	outline: 3px solid var(--mbn-brand-blue, #0F69C4);
	outline-offset: 2px;
	box-shadow: none;
}

/* Tarjeta de ayuda: es la «Cards Verticales» del design system (Figma
   93:4805), pero sin enlace. Por eso NO reutiliza partials/vertical-card.php:
   esa pieza trae el estado hover de una tarjeta clicable —degradado azul y
   texto en blanco— que aquí sería un realce sobre algo que no lleva a ningún
   sitio. El relleno de 32px es la suma de las dos cajas anidadas del Figma
   (16 + 16) en una sola. */
.mbn-tramite__help {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 32px;
	background: var(--mbn-surface-white, #FFFFFF);
	border: 1px solid var(--mbn-border-default, #CCCCCC);
	border-radius: 8px;
}

/* base.css: `main p { font-weight: 400 !important }`, así que el peso 500 del
   estilo Heading/Sans/Medium necesita !important. */
.mbn-tramite__help-title {
	margin: 0;
	font-family: var(--mbn-roboto-sans-medium-font-family, "Roboto", sans-serif);
	font-weight: var(--mbn-roboto-sans-medium-font-weight, 500) !important;
	font-size: var(--mbn-roboto-sans-medium-font-size, 24px);
	line-height: 1.5;
	color: var(--mbn-text-primary, #333333);
}

.mbn-tramite__help-content > :first-child {
	margin-top: 0;
}

.mbn-tramite__help-content > :last-child {
	margin-bottom: 0;
}

.mbn-tramite__help-content p,
.mbn-tramite__help-content li {
	font-family: var(--mbn-roboto-body-small-font-family, "Roboto", sans-serif);
	font-size: var(--mbn-roboto-body-small-font-size, 16px);
	line-height: 1.5;
	color: var(--mbn-text-primary, #333333);
}

.mbn-tramite__help-content p {
	margin-bottom: 16px;
}

.mbn-tramite__help-content a {
	color: var(--mbn-action-primary, #0046A8);
	text-decoration: underline;
}

/* ---------- xl ≥ 1200px (canvas 1440 del Figma) ----------
   Las dos columnas aparecen solo aquí, y ahora con maqueta que lo respalda: la
   de tablet (672:8558) apila el botón y la tarjeta debajo del aviso, igual que
   la de mobile. Por debajo de xl, la columna lateral se apila después del
   detalle, que es donde también la coloca el flujo del DOM. */

@media (min-width: 1200px) {
	.mbn-tramite__title {
		font-size: var(--mbn-roboto-slab-large-font-size, 36px);
	}

	.mbn-tramite__cta {
		--bs-btn-padding-x: 24px;
		--bs-btn-padding-y: 12px;
		--bs-btn-font-family: var(--mbn-roboto-body-button-large-font-family, "Roboto", sans-serif);
		--bs-btn-font-size: var(--mbn-roboto-body-button-large-font-size, 19px);
	}

	/* En la maqueta el botón del portal arranca a la altura del título, no a la
	   del chip: son los 64px que el frame 169:3777 declara como padding
	   superior de la columna. */
	.mbn-tramite__aside {
		padding-top: 64px;
	}

	/* Sin chips —la página «Denuncias Externas», template-denuncias.php— el
	   título abre la columna, así que el botón arranca arriba para seguir a su
	   altura. El descendiente (0,2,0) le gana a la regla de arriba sin depender
	   del orden. */
	.mbn-tramite--sin-chips .mbn-tramite__aside {
		padding-top: 0;
	}
}