/**
 * Ajustes propios de WordPress/Bricks (se carga después de main.css).
 * main.css es GENERADO desde los prototipos: los cambios del sistema se hacen allá y se regeneran
 * con `node prototypes/_compartido/build-tema-css.js`. Aquí solo lo que no existe en los prototipos.
 */

/* Contenido escrito en el editor (objeto de convocatorias y proyectos, cuerpo de noticias) */
.fom-prosa > :first-child { margin-top: 0; }
.fom-prosa > :last-child { margin-bottom: 0; }

/* ═══ Encabezado fijo (comportamiento de E-DESARROLLO) · components/layout/encabezado.php + assets/js/encabezado.js ═══ */
#brx-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; }
html.fom-enc-fijo #brx-header { position: fixed; left: 0; right: 0; }
html.fom-enc-fijo body { padding-top: var(--fom-alto-encabezado, 0px); }
html.fom-enc-fijo body:has(.pg-portada) { padding-top: 0; }   /* portada: la foto empieza arriba, debajo del encabezado */

#brx-header .pg-mast { transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
#brx-header .pg-mast__fila { transition: padding var(--dur-short) var(--ease-out); }

/* Sobre la foto de la portada: transparente (como .pg-mast--foto del prototipo) */
body:has(.pg-portada) #brx-header:not(.is-scrolled) .pg-mast { background: transparent; }

/* Al bajar: negro FOM translúcido con desenfoque y sombra, más compacto */
#brx-header.is-scrolled .pg-mast {
  background: color-mix(in oklch, var(--color-base-900) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px oklch(17% 0.004 40 / 0.28);
}
#brx-header.is-scrolled .pg-mast__fila { padding-block: var(--space-xs); }

/* Columna lateral de las fichas e índice: pegados justo debajo del encabezado (normal o compacto), no detrás.
 * Los saltos a anclas también dejan ese espacio. --fom-alto-visible lo actualiza encabezado.js. */
html.fom-enc-fijo { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--fom-alto-visible, var(--fom-alto-encabezado, 0px)) + var(--space-md)); }
html.fom-enc-fijo .pg-aside,
html.fom-enc-fijo .pg-indice {
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--fom-alto-visible, var(--fom-alto-encabezado, 0px)) + var(--space-lg));
  transition: top var(--dur-short) var(--ease-out);
}
/* Más alto que el espacio visible (lo marca encabezado.js): se desplaza con la página */
html.fom-enc-fijo .pg-aside.no-cabe,
html.fom-enc-fijo .pg-indice.no-cabe { position: static; }

/* Menú móvil abierto: que no se salga de la pantalla con el encabezado fijo */
#brx-header .pg-nav.is-open .pg-nav__lista { max-height: calc(100dvh - var(--fom-alto-encabezado, 200px)); overflow-y: auto; background: var(--color-base-900); }

/* El conmutador del encabezado es un enlace tel: */
.pg-llamada { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  #brx-header .pg-mast, #brx-header .pg-mast__fila, html.fom-enc-fijo .pg-aside, html.fom-enc-fijo .pg-indice { transition: none; }
}

/* Dentro del builder de Bricks, los componentes se ven igual que en el sitio */
.fom-componente-vacio {
  padding: var(--space-lg); border: 1.5px dashed var(--color-rule); color: var(--color-muted); font: var(--text-sm)/1.4 var(--font-sans);
}

/* ═══ Convocatorias y proyectos · components/{convocatorias,proyecto,cards,partes} ═══ */
/* Título de ficha: el objeto es largo, va a escala h2 aunque sea el h1 */
.pg-titulo-ficha { max-width: 40ch; margin-block: var(--space-sm) 0; }
.pg-cabecera-plana .pg-codigo { color: var(--color-base-700); }
.fom-cabecera .pg-codigo { color: var(--color-acento); }
.pg-objeto > :first-child { margin-top: 0; }
.pg-objeto > :last-child { margin-bottom: 0; }

/* Accesos dentro de los paneles del aside (sin el relleno vertical de la lista de accesos) */
.pg-acceso-plano { padding: 0; }
.pg-acceso-plano + .pg-acceso-plano { margin-top: var(--space-md); }
.pg-acceso-plano .fom-code { font-size: var(--text-sm); }

/* Tarjetas */
.fom-card__numero { font-size: var(--text-xs); color: var(--color-base-700); }
.fom-card__foto--vacia { display: grid; place-items: center; aspect-ratio: 16 / 7; background: var(--color-claro); }
.fom-card__foto--vacia > svg { width: 22%; height: auto; opacity: .35; }

/* Filtros: estados a la izquierda, «Buscar» a la derecha (en el HTML va primero para que Enter lo use a él) */
.pg-herramientas__fila--acciones { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); }
.pg-herramientas__enviar { order: 2; }

/* ═══ Página Gestión · components/paginas/gestion.php ═══ */
.pg-etapa-card { text-decoration: none; color: inherit; }
.pg-etapa-card .fom-card__cuerpo { padding: var(--space-xl); }
.pg-etapa-card .fom-tag { justify-self: start; }
.pg-etapa-card p { margin: 0; color: var(--color-ink-2); font-size: var(--text-base, 1rem); }
.pg-etapa-card.fom-card--linea p, .pg-etapa-card.fom-card--linea .fom-h3 { color: var(--color-on-dark); }
.pg-etapa-card.fom-card--linea .fom-enlace { color: var(--color-acento); }
.pg-etapa-card .pg-etapa-card__cifra { font-size: var(--text-sm); }
.pg-etapa-card__cifra b { font-weight: var(--weight-medium); }
.pg-etapas-hilo { max-width: 40rem; }
.pg-split--sin-foto { grid-template-columns: 1fr !important; }
.pg-split--sin-foto .pg-split__texto { padding-inline: max(1rem, calc((100% - var(--wrap, 75rem)) / 2)); }

/* ═══ Página Qué hacemos · components/paginas/que-hacemos.php ═══ */
.pg-cifras-fuente { padding-block: var(--space-sm); }
.pg-linea .fom-icono { width: 40px; height: 40px; color: var(--color-acento); }
.pg-linea .fom-card__titulo a { color: inherit; text-decoration: none; }
.pg-linea .fom-card__titulo a::after { content: ""; position: absolute; inset: 0; }   /* toda la tarjeta es el enlace */

.pg-linea__cifra { font-size: var(--text-sm); color: var(--color-acento); font-weight: var(--weight-medium); }
.pg-ancho-texto { max-width: 60ch; }
.pg-territorios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-sm); }
.pg-territorios a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-img); background: var(--color-paper); color: var(--color-ink); text-decoration: none; }
.pg-territorios a:hover { border-color: var(--color-base-900); }
.pg-territorios span { font-size: var(--text-sm); color: var(--color-muted); }

/* ═══ Página La Entidad · components/paginas/la-entidad.php ═══ */
.pg-datos--entidad { max-width: 44rem; }
.pg-datos--entidad > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.pg-mision p { margin: var(--space-xs) 0 0; font-size: var(--text-base); color: var(--color-ink); line-height: var(--leading-body, 1.6); }
.pg-deptos a { color: inherit; text-decoration: none; }
.pg-deptos a:hover { text-decoration: underline; }

/* ═══ Portada · components/paginas/inicio.php ═══ */
html.fom-enc-fijo .pg-portada .fom-wrap { padding-top: calc(var(--fom-alto-encabezado, 150px) + var(--space-3xl)); }
.pg-portada:not(:has(> img))::before { background: radial-gradient(120% 90% at 85% 10%, var(--color-base-700) 0%, var(--color-base-900) 60%); }
.pg-somos { align-items: center; gap: var(--space-2xl); }
.pg-portada-transparencia { background: var(--color-base-950); }
.pg-numerales { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
/* Accesos bajo la portada: la lista es .fom-wrap, pero «.pg-accesos ul { margin: 0 }» le quitaba el centrado y quedaba
 * pegada a la izquierda de la pantalla. Se centra como el resto del contenido. */
.pg-accesos ul.fom-wrap { margin-inline: auto; }
@media (min-width: 40rem) {
  .pg-accesos .fom-acceso { padding-block: var(--space-xl); }
}

/* ═══ Transparencia · components/paginas/transparencia*.php ═══ */
.pg-titulo-transparencia { max-width: 20ch; }
.pg-buscador-transparencia { max-width: 40rem; }
.pg-numerales--hub { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.pg-lista-accesos { display: grid; }
.pg-lista-accesos .fom-acceso + .fom-acceso { border-top: 1px solid var(--color-claro-2); }
.pg-transparencia { display: grid; gap: var(--space-lg); min-width: 0; }
.pg-transparencia__cuerpo { display: grid; gap: var(--space-md); }
.pg-transparencia__cuerpo > p { margin: 0; }
.pg-no-aplica { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-xs); background: var(--color-claro); }

/* ═══ Atención · components/paginas/atencion*.php (PQRSD por correo) ═══ */
.pg-atencion { display: grid; gap: var(--space-xl); min-width: 0; max-width: 52rem; }
.pg-atencion > section { display: grid; gap: var(--space-md); }
.pg-atencion p { margin: 0; }
.pg-correo { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: center; padding: var(--space-lg); border-radius: var(--radius-img); background: var(--color-base-900); color: var(--color-on-dark); }
.pg-correo > svg { width: 32px; height: 32px; color: var(--color-acento); }
.pg-correo span { display: block; font-size: var(--text-sm); opacity: 0.8; }
.pg-correo__dir { color: inherit; font-size: var(--text-lg); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.pg-correo .fom-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 48rem) { .pg-correo { grid-template-columns: auto 1fr auto; } .pg-correo .fom-btn { grid-column: auto; } }
.pg-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.pg-pasos li { counter-increment: paso; position: relative; padding-left: 3rem; color: var(--color-ink-2); }
.pg-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -0.1em; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-claro); color: var(--color-ink); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.pg-pasos b { color: var(--color-ink); }
.pg-lista { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.pg-linea-dato { display: block; }

/* ═══ Mapa de territorios · components/partes/mapa-territorios.php + assets/js/mapa.js ═══
 * Departamentos: una sola tinta (gris) de claro a oscuro según el número de proyectos; municipios: puntos en oro con
 * anillo del color del papel para separarlos. */
.fom-mapa { --m-0: color-mix(in oklch, var(--color-base-900) 7%, var(--color-claro)); --m-1: color-mix(in oklch, var(--color-base-900) 22%, var(--color-claro));
  --m-2: color-mix(in oklch, var(--color-base-900) 42%, var(--color-claro)); --m-3: color-mix(in oklch, var(--color-base-900) 66%, var(--color-claro));
  --m-4: var(--color-base-900);
  display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .fom-mapa { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.fom-mapa [hidden] { display: none !important; }
.fom-mapa__figura { margin: 0; display: grid; gap: var(--space-md); }
.fom-mapa__lienzo { position: relative; }
.fom-mapa svg { display: block; width: 100%; height: auto; max-height: min(74vh, 42rem); margin-inline: auto; overflow: hidden; }
.fom-mapa__rotulo { font: 11px/1 var(--font-sans); fill: var(--color-muted); }
.fom-mapa.is-acercado .fom-mapa__rotulo, .fom-mapa.is-acercado .fom-mapa__recuadro { display: none; }
.fom-mapa__deptos path[data-codigo="88"][data-tramo="0"] { fill: var(--color-base-500); stroke: var(--color-base-500); stroke-width: 0.6; }
.fom-mapa__recuadro { fill: none; stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fom-mapa__deptos path { fill: var(--m-0); stroke: var(--color-paper); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.fom-mapa [data-tramo="1"] { fill: var(--m-1); background: var(--m-1); }
.fom-mapa [data-tramo="2"] { fill: var(--m-2); background: var(--m-2); }
.fom-mapa [data-tramo="3"] { fill: var(--m-3); background: var(--m-3); }
.fom-mapa [data-tramo="4"] { fill: var(--m-4); background: var(--m-4); }
.fom-mapa.is-activo .fom-mapa__deptos path:not([data-tramo="0"]) { cursor: pointer; }
.fom-mapa.is-activo .fom-mapa__deptos path:not([data-tramo="0"]):hover,
.fom-mapa__deptos path.is-resaltado { stroke: var(--color-acento); stroke-width: 2; }
.fom-mapa.is-acercado .fom-mapa__deptos path:not(.is-elegido) { opacity: 0.45; }
.fom-mapa__deptos path.is-elegido { stroke: var(--color-acento); stroke-width: 2; }
.fom-mapa__puntos circle { fill: var(--color-acento); stroke: var(--color-paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: all; }
.fom-mapa.is-activo .fom-mapa__puntos circle { cursor: pointer; }
.fom-mapa__puntos circle:hover { stroke: var(--color-base-950); }
.fom-mapa__puntos circle.is-fuera { opacity: 0.35; }
.fom-mapa__volver { position: absolute; top: var(--space-sm); right: var(--space-sm); background: var(--color-paper); }
.fom-mapa__tip { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; display: grid; gap: 2px; max-width: 16rem;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-xs); background: var(--color-base-950); color: var(--color-on-dark);
  font-size: var(--text-sm); line-height: 1.3; box-shadow: var(--shadow-lift); }
.fom-mapa__tip span { color: var(--color-on-dark-2); }
.fom-mapa__leyenda { display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.fom-mapa__leyenda-titulo { font-weight: var(--weight-semibold); color: var(--color-ink); }
.fom-mapa__leyenda ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.fom-mapa__leyenda li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.fom-mapa__leyenda i { width: 1rem; height: 0.75rem; border-radius: 2px; }
.fom-mapa__leyenda i.fom-mapa__punto { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-acento); }
.fom-mapa__panel { min-width: 0; }
.fom-mapa__vista { display: grid; gap: var(--space-md); }
.fom-mapa__vista h3 { margin: 0; }
.fom-mapa__vista h3:focus { outline: none; }
.fom-mapa__resumen { margin: 0; color: var(--color-ink-2); }
.fom-mapa__resumen b { color: var(--color-ink); }
.fom-mapa__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.fom-mapa__lista a { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; }
.fom-mapa__lista a:hover .fom-mapa__nombre { text-decoration: underline; }
.fom-mapa__cifra { color: var(--color-ink-2); }
.fom-mapa__barra { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--color-claro); position: relative; overflow: hidden; }
.fom-mapa__barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); min-width: 4px; border-radius: 2px; background: var(--color-base-700); }
.fom-mapa__municipios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0 var(--space-lg); max-height: 26rem; overflow-y: auto; }
.fom-mapa__municipios a { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; }
.fom-mapa__municipios a:hover span:first-child { text-decoration: underline; }
.fom-mapa__municipios .fom-tnum { color: var(--color-ink-2); }
@media (prefers-reduced-motion: reduce) { .fom-mapa__deptos path { transition: none; } }

/* ═══ Revelar al entrar en pantalla · assets/js/revelar.js ([data-fom-revelar]) ═══
 * Los hijos suben y aparecen uno tras otro; los trazos de sus íconos se dibujan. La clase fom-revelar solo existe con JS y
 * sin «reducir movimiento», así que sin ella todo se ve quieto. */
html.fom-revelar [data-fom-revelar] > * { opacity: 0; transform: translateY(24px); }
html.fom-revelar [data-fom-revelar] .fom-icono :is(path, circle, rect, line, polyline) { stroke-dasharray: 160; stroke-dashoffset: 160; }
html.fom-revelar [data-fom-revelar].is-visible > * { opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 160ms); }
html.fom-revelar [data-fom-revelar].is-visible .fom-icono :is(path, circle, rect, line, polyline) { stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 160ms + 250ms); }
[data-fom-revelar] > :nth-child(2) { --i: 1; }
[data-fom-revelar] > :nth-child(3) { --i: 2; }
[data-fom-revelar] > :nth-child(4) { --i: 3; }
[data-fom-revelar] > :nth-child(5) { --i: 4; }
[data-fom-revelar] > :nth-child(6) { --i: 5; }

/* Cómo trabajamos (Qué hacemos): tarjetas con línea de oro que crece al aparecer y al pasar el cursor */
.pg-como .fom-acceso { position: relative; padding: var(--space-lg); border-radius: var(--radius-img); background: var(--color-paper);
  transition: box-shadow var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
.pg-como .fom-acceso::before { content: ""; position: absolute; left: var(--space-lg); right: var(--space-lg); top: 0; height: 2px;
  background: var(--color-acento); transform: scaleX(0.25); transform-origin: left; transition: transform 700ms var(--ease-out); }
.pg-como .fom-acceso:hover { box-shadow: var(--shadow-lift); translate: 0 -3px; }
.pg-como .fom-acceso:hover::before,
html:not(.fom-revelar) .pg-como .fom-acceso::before,
.pg-como.is-visible .fom-acceso::before { transform: scaleX(1); }
.pg-como.is-visible .fom-acceso::before { transition-delay: calc(var(--i, 0) * 160ms + 500ms); }
.pg-como .fom-acceso:hover .fom-icono { color: var(--color-acento-ink); }
@media (prefers-reduced-motion: reduce) { .pg-como .fom-acceso, .pg-como .fom-acceso::before { transition: none; } }

/* ═══ Actualidad · components/actualidad/{listado,noticia}.php, cards/noticia.php ═══ */
.pg-actualidad { display: grid; gap: var(--space-xl); }
.fom-filtros a.fom-filtro { text-decoration: none; }
.fom-filtro[aria-current="page"] { background: var(--color-base-900); border-color: var(--color-base-900); color: var(--color-on-dark); }
.pg-noticia-meta { align-items: center; gap: var(--space-sm); }
.pg-noticia-cat { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.pg-noticia-texto { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.fom-card--noticia .fom-card__titulo a::after { content: ""; position: absolute; inset: 0; }   /* toda la tarjeta es el enlace */
.pg-destacada { position: relative; }
.pg-destacada__enlace { color: inherit; text-decoration: none; }
.pg-destacada__enlace::after { content: ""; position: absolute; inset: 0; }
.pg-destacada:hover .pg-destacada__enlace { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.pg-destacada--sin-foto { grid-template-columns: 1fr !important; background: var(--color-claro); border-color: var(--color-claro); }
.pg-titulo-noticia { max-width: 24ch; }
.pg-noticia-foto { margin: 0; display: grid; gap: var(--space-xs); }
.pg-noticia-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-img); }
.pg-noticia-prosa img { max-width: 100%; height: auto; border-radius: var(--radius-img); }
.pg-noticia-prosa a { color: var(--color-acento-ink); }
.pg-otra { display: grid; gap: 2px; color: var(--color-ink); text-decoration: none; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.pg-otra:last-child { border-bottom: 0; padding-bottom: 0; }
.pg-otra:hover span { text-decoration: underline; }
.pg-otra time { font-size: var(--text-2xs); color: var(--color-muted); }
.pg-panel__cuerpo.pg-fila { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ═══ Participa · components/paginas/participa.php ═══ */
.pg-participa { list-style: none; padding-inline-start: 0; }
.pg-participa > li { display: grid; }
.pg-participa .fom-card__cuerpo { gap: var(--space-sm); }
.pg-participa p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.pg-participa__num { font: var(--text-2xl, 2rem)/1 var(--font-voz, serif); color: var(--color-acento-ink); }

/* ═══ Políticas · components/paginas/politica.php ═══ */
.pg-politica { min-width: 0; }
.pg-politica h2 { font-size: var(--text-lg); margin-top: var(--space-xl); }
.pg-politica a { color: var(--color-acento-ink); }
.pg-en-revision { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-img); background: var(--color-aviso-bg); color: var(--color-ink); border-left: 3px solid var(--color-aviso); }