/* Hallmark · páginas internas — hereda tokens.css y styles.css (tema v5 "moderno cálido 2026")
 * Todo color y fuente referencia tokens. Ningún valor suelto */

/* ============ encabezado de página interna ============ */
.encabezado { padding-block: var(--space-xl) var(--space-lg); }
.encabezado h1 { font-size: var(--text-3xl); max-width: 20ch; line-height: 1.14; text-wrap: balance; }
/* El titular de una nota lo escribe el equipo y puede ser largo: necesita
 * más renglón que un encabezado de página, que es una frase medida */
.encabezado h1.encabezado__titular { max-width: 26ch; }
.encabezado > p { margin: var(--space-sm) 0 0; color: var(--color-muted); font-size: var(--text-md); max-width: 60ch; }
.miga { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: 0 0 var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.miga li::after { content: "›"; margin-inline-start: var(--space-xs); color: var(--color-neutral); }
.miga li:last-child::after { content: ""; }
.miga a { text-decoration: none; font-weight: 600; white-space: nowrap; }

/* ============ Conóceme ============ */
.bio-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: start; }
.bio-grid > * { min-width: 0; }
.bio__retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.bio__ficha { margin-top: var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-md); padding: var(--space-lg); }
.bio__ficha dl { display: grid; gap: var(--space-sm); margin: 0; }
.bio__ficha dt { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); }
.bio__ficha dd { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.bio__texto p { font-size: var(--text-md); }
.bio__texto p:first-of-type { font-size: var(--text-lg); color: var(--color-ink); }

.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.valor { min-width: 0; background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); }
.valor h3 { font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.valor p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.valor__num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-accent); display: block; line-height: 1; margin-bottom: var(--space-xs); }

/* ============ Gestión parlamentaria ============ */
.comisiones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.comision { min-width: 0; border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--color-paper-2); }
.comision--actual { background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-2) 100%); color: var(--color-accent-ink); }
.comision--actual h3, .comision--actual p, .comision--actual .comision__periodo { color: var(--color-accent-ink); }
.comision__periodo { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); letter-spacing: 0.04em; }
.comision h3 { font-size: var(--text-lg); margin-block: var(--space-2xs) var(--space-xs); }
.comision p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.comision ul { margin: var(--space-sm) 0 0; padding-left: 1.1rem; font-size: var(--text-sm); color: var(--color-ink-2); }
.comision--actual ul { color: var(--color-accent-ink); }

.ficha-contacto { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.ficha-contacto > div { min-width: 0; }
.ficha-contacto dt { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-3xs); }
.ficha-contacto dd { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); overflow-wrap: anywhere; }

/* estado vacío honesto — lo llena el panel de administración */
.vacio {
  border: 2px dashed var(--color-rule); border-radius: var(--radius-lg);
  padding: var(--space-xl); text-align: center; background: var(--color-paper);
}
.vacio h3 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.vacio p { margin: 0 auto; font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }

/* lista de noticias / entradas */
.entradas { display: grid; gap: var(--space-md); }
.entrada {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-lg);
  background: var(--color-paper-2); border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.entrada:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.entrada img, .entrada video { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-paper-3); }
.entrada__cuerpo { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; display: flex; flex-direction: column; gap: var(--space-sm); justify-content: center; min-width: 0; }
.entrada__meta { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); }
/* Interlineado holgado: los titulares de la gestión son largos y con el
 * 1.1 general quedaban pegados renglón contra renglón */
.entrada h3 { font-size: var(--text-lg); line-height: 1.3; text-wrap: balance; }
.entrada__enlace { color: inherit; text-decoration: none; }
.entrada__enlace:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.entrada__enlace:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.entrada p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }

/* ============ la nota completa ============
 * La portada dejó de ser una sola foto: es el carrusel con la portada, el
 * resto de fotografías y los videos que acompañan la nota */
.portada-carrusel { margin-bottom: var(--space-xl); box-shadow: var(--shadow-sm); }
/* «contain» y no «cover»: el motor trae fotografías verticales de Instagram
 * y de Facebook, y recortarlas a 16/10 le cortaba la cabeza y los pies a la
 * persona retratada. El fondo oscuro hace de marco */
.portada-carrusel .mini-carrusel__pista { aspect-ratio: 16 / 10; background: var(--color-ink); }
.portada-carrusel .mini-carrusel__pista img,
.portada-carrusel .mini-carrusel__pista video { object-fit: contain; }

.nota__cuerpo { max-width: 68ch; }
.nota__cuerpo p { margin-block: 0 var(--space-md); }
.nota__cuerpo p:last-child { margin-block-end: 0; }
.nota__entradilla { font-weight: 700; }
.nota__fuente { margin-top: var(--space-lg); }
.informe__titulo { font-size: var(--text-md); line-height: 1.28; text-wrap: balance; }
.informe__titulo a { color: inherit; text-decoration: none; }
.informe__titulo a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }

/* ============ entrada ancha (texto + carrusel) ============ */
.entrada-ancha {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl);
  align-items: center; background: var(--color-paper-2); border-radius: var(--radius-lg);
  padding: var(--space-xl); margin-top: var(--space-md);
}
.entrada-ancha + .entrada-ancha { margin-top: var(--space-lg); }
.entrada-ancha__texto { min-width: 0; }
.entrada-ancha h3 { font-size: var(--text-xl); line-height: 1.24; text-wrap: balance; margin-block: var(--space-2xs) var(--space-sm); }
.entrada-ancha p { font-size: var(--text-sm); color: var(--color-ink-2); }
/* Alterna el lado de la foto para que la página no lea como una lista */
.entrada-ancha--invertida { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.entrada-ancha--invertida .entrada-ancha__texto { order: 2; }
.entrada-ancha--invertida .mini-carrusel { order: 1; }

/* ============ foto de la trayectoria ============ */
.trayectoria__foto { margin-bottom: var(--space-xl); }
.trayectoria__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-lg); }
.trayectoria__foto figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ============ enlaces externos ============ */

/* ============ informe destacado ============ */
.informe--nuevo { background: var(--color-accent-soft); border: 2px solid var(--color-accent); }
.informe__etiqueta {
  display: inline-block; align-self: flex-start; padding: 0.2rem 0.65rem; margin-bottom: var(--space-2xs);
  border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink);
  font-size: var(--text-xs); font-weight: 700;
}

/* ============ galería multimedia con pestañas ============ */
.filtros { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.filtros button {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px;
  padding-inline: var(--space-lg); border-radius: var(--radius-pill); cursor: pointer;
  border: 2px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.filtros button:hover { border-color: var(--color-ink); }
.filtros button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.filtros span { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* Filtro por municipio: los que no tienen gestiones quedan inactivos */
.filtros--municipios { margin-bottom: var(--space-sm); }
.filtros--municipios button span {
  min-width: 20px; padding-inline: 5px; border-radius: var(--radius-pill);
  background: var(--color-accent-soft); color: var(--color-accent-deep);
  font-size: var(--text-2xs); font-variant-numeric: tabular-nums; opacity: 1;
}
.filtros--municipios button[aria-pressed="true"] span { background: var(--color-accent-ink); color: var(--color-accent); }
.filtros--municipios button:disabled { opacity: 0.45; cursor: not-allowed; }
.filtros--municipios button:disabled:hover { border-color: var(--color-rule); }
.filtros--municipios button:disabled span { background: var(--color-paper-2); color: var(--color-muted); }

.filtros__aviso { margin: 0 0 var(--space-lg); font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); min-height: 1lh; }

.sin-gestiones {
  border: 2px dashed var(--color-rule); border-radius: var(--radius-lg);
  padding: var(--space-xl); text-align: center; background: var(--color-paper); margin-bottom: var(--space-lg);
}
.sin-gestiones h3 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.sin-gestiones p { margin: 0 auto; font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }

.entrada-ancha[hidden] { display: none; }
.entrada-ancha { scroll-margin-top: 5.5rem; }

.piezas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.pieza { min-width: 0; }
.pieza[hidden] { display: none; }
.pieza button {
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block;
  border-radius: var(--radius-lg); overflow: hidden; position: relative; line-height: 0;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.pieza button:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pieza img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pieza__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, var(--scrim-mid), var(--scrim-none) 60%);
}
.pieza__play span {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-accent-ink); font-size: 22px; padding-left: 4px;
  box-shadow: var(--shadow-md);
}
.pieza__dur {
  position: absolute; inset-block-end: var(--space-xs); inset-inline-end: var(--space-xs);
  padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--scrim-strong); color: var(--color-accent-ink);
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.6;
}
.pieza__pie { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.4; }

.visor video { width: 100%; max-height: 78svh; background: var(--color-ink); display: block; }

/* ============ carrusel dentro de una entrada ============ */
.mini-carrusel { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper-3); }
.mini-carrusel__pista { position: relative; aspect-ratio: 3 / 2; }
/* Las láminas ocultas siguen ahí, apiladas y transparentes: sin anular el
 * puntero, la última del montón se comería los clics de los mandos del
 * video que sí se está viendo */
.mini-carrusel figure {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-long) var(--ease-in-out), visibility 0s linear var(--dur-long);
}
/* «visibility» y no solo «opacity»: desde que las piezas pueden ser videos
 * con mandos, una lámina invisible seguía estando en el orden de tabulación
 * y el foco se perdía en mandos que nadie ve */
.mini-carrusel figure[data-activa="true"] { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mini-carrusel img, .mini-carrusel video { width: 100%; height: 100%; object-fit: cover; }
.mini-carrusel video { background: var(--color-ink); }
/* El pie y el contador van encima de la pieza y, con un video, caían justo
 * sobre la barra de mandos: no se podía dar play ni mover la reproducción */
.mini-carrusel figcaption, .mini-carrusel__cuenta { pointer-events: none; }
.mini-carrusel figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top, var(--scrim-strong), var(--scrim-none));
  color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 600;
}
.mini-carrusel__mandos {
  position: absolute; inset-block-start: var(--space-sm); inset-inline-end: var(--space-sm);
  display: flex; gap: var(--space-2xs); padding: var(--space-3xs);
  background: var(--glass); backdrop-filter: blur(10px); border-radius: var(--radius-pill);
}
.mini-carrusel__btn {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 0; background: none; border-radius: 50%; color: var(--color-ink);
  font-size: var(--text-md); font-weight: 700; line-height: 1;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.mini-carrusel__btn:hover { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.mini-carrusel__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.mini-carrusel__cuenta {
  position: absolute; inset-block-end: var(--space-sm); inset-inline-end: var(--space-sm);
  padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--glass); backdrop-filter: blur(10px);
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink);
}
.mini-carrusel__tiras { display: flex; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-paper-2); overflow-x: auto; }
.mini-carrusel__tiras button { flex: none; padding: 0; border: 2px solid transparent; background: none; border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; line-height: 0; }
.mini-carrusel__tiras img, .mini-carrusel__tiras video { width: 84px; height: 56px; object-fit: cover; }
/* El video de la tira es una miniatura, no un reproductor: el clic tiene
 * que llegar al botón que hay debajo */
.mini-carrusel__tiras video { pointer-events: none; background: var(--color-ink); }
.mini-carrusel__tiras button[aria-selected="true"] { border-color: var(--color-accent); }

/* ============ ley sancionada ============ */
.ley { background: var(--color-paper-2); border-radius: var(--radius-xl); padding: var(--space-xl); }
.ley__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: start; }
.ley__col { min-width: 0; }
.ley__numero {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.03em;
  color: var(--color-accent-ink); background: var(--color-accent);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md);
}
.ley__fecha { display: block; margin-top: var(--space-sm); font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
.ley h3 { font-size: var(--text-2xl); margin-top: var(--space-2xs); }
.ley__sumario { margin: var(--space-sm) 0 var(--space-lg); font-size: var(--text-md); color: var(--color-ink-2); border-left: 3px solid var(--color-accent); padding-left: var(--space-md); }
.ley__cuerpo p { font-size: var(--text-sm); color: var(--color-ink-2); }
.ley__cuerpo strong { color: var(--color-ink); }
.ley__foto { min-width: 0; }
.ley__foto img { width: 100%; border-radius: var(--radius-lg); }
.ley__foto figcaption { margin-top: var(--space-sm); font-size: var(--text-xs); font-style: italic; color: var(--color-muted); }
.ley__galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); border-top: 1px solid var(--color-rule); padding-top: var(--space-xl); scroll-margin-top: 6rem; }
.ley__galeria figure { min-width: 0; }
.ley__galeria img { width: 100%; border-radius: var(--radius-md); background: var(--color-paper); }
.ley__galeria figcaption { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }

/* ============ galería ============ */
.galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.galeria button {
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-md);
  overflow: hidden; display: block; min-width: 0;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.galeria button:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.visor { border: 0; padding: 0; background: none; max-width: 100%; max-height: 100%; width: min(96vw, 68rem); }
.visor::backdrop { background: oklch(16% 0.02 27 / 0.88); backdrop-filter: blur(4px); }
.visor__caja { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-ink); }
.visor img { width: 100%; height: auto; max-height: 78svh; object-fit: contain; }
.visor__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md); background: var(--color-paper); flex-wrap: wrap;
}
.visor__texto { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.visor__mandos { display: flex; gap: var(--space-xs); }
.visor__btn {
  min-width: 44px; min-height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper);
  color: var(--color-ink); font-size: var(--text-md); font-weight: 700; line-height: 1;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.visor__btn:hover { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-deep); }
.visor__btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ============ formularios ============ */
.form-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: start; }
.form-grid > * { min-width: 0; }
.formulario { background: var(--color-paper-2); border-radius: var(--radius-xl); padding: var(--space-xl); }
.campo { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.campo label { font-size: var(--text-sm); font-weight: 700; }
.campo .opcional { font-weight: 400; color: var(--color-muted); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); outline: 2px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.campo textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--color-neutral); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--color-neutral); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-rule); }
.campo input:disabled, .campo select:disabled, .campo textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.campo__ayuda { font-size: var(--text-xs); color: var(--color-muted); min-height: 1lh; margin: 0; }
.campo__ayuda[data-error="true"] { color: var(--color-accent-deep); font-weight: 700; }
.campo--fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }

.consentimiento { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; background: var(--color-paper); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); }
.consentimiento input { width: 22px; height: 22px; min-height: 22px; accent-color: var(--color-accent); margin-top: 2px; }
.consentimiento label { font-size: var(--text-sm); color: var(--color-ink-2); font-weight: 400; }

.aviso {
  border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md);
  background: var(--color-accent-soft); color: var(--color-accent-deep); font-size: var(--text-sm); font-weight: 600;
  display: none;
}
.aviso[data-visible="true"] { display: block; }
.aviso b { display: block; font-size: var(--text-md); margin-bottom: var(--space-3xs); }

.lateral { display: grid; gap: var(--space-md); }
.lateral__caja { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); }
.lateral__caja h2 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.lateral__caja p, .lateral__caja li { font-size: var(--text-sm); color: var(--color-ink-2); }
.lateral__caja ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-2xs); }
.lateral__caja .btn { margin-top: var(--space-sm); }
.dato { display: grid; gap: var(--space-3xs); margin-bottom: var(--space-md); }
.dato:last-child { margin-bottom: 0; }
.dato dt { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent); }
.dato dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }

/* consulta de radicado */
.radicado-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.radicado-form input { flex: 1; min-width: 12rem; }

/* ============ redes ============ */
.redes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.red {
  min-width: 0; border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--color-paper-2);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center;
  text-decoration: none; border: 2px solid transparent;
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.red:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); color: inherit; }
.red__icono {
  width: 62px; height: 62px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--color-paper); box-shadow: var(--shadow-sm);
}
.red__texto { min-width: 0; }
.red h3 { font-size: var(--text-md); }
.red__cuenta { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-accent-deep); overflow-wrap: anywhere; }
.red__desc { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.red__flecha { font-size: var(--text-lg); color: var(--color-neutral); transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.red:hover .red__flecha { transform: translateX(4px); color: var(--color-accent); }

/* cada marca aporta su propio color al pasar por encima */
.red--instagram:hover { border-color: oklch(60% 0.22 350); }
.red--facebook:hover  { border-color: oklch(58% 0.20 260); }
.red--x:hover         { border-color: var(--color-ink); }
.red--tiktok:hover    { border-color: oklch(62% 0.24 15); }

/* ============ logotipos oficiales de las redes ============ */
.logo-red { width: 34px; height: 34px; display: block; }
.logo-red--pie { width: 18px; height: 18px; }

.embed-caja { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); }
.embed-caja h2 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }

/* ============ documento legal ============ */
.legal-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); align-items: start; }
.legal-grid > * { min-width: 0; }
.legal__indice { position: sticky; top: 5.5rem; background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); }
.legal__indice h2 { font-size: var(--text-md); margin-bottom: var(--space-sm); }
.legal__indice ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.legal__indice a { text-decoration: none; color: var(--color-ink-2); }
.legal__indice a:hover { color: var(--color-accent); }
.legal__texto h2 { font-size: var(--text-xl); margin-block: var(--space-xl) var(--space-sm); scroll-margin-top: 5.5rem; }
.legal__texto h2:first-child { margin-top: 0; }
.legal__texto h3 { font-size: var(--text-md); margin-block: var(--space-lg) var(--space-xs); }
.legal__texto p, .legal__texto li { font-size: var(--text-sm); color: var(--color-ink-2); }
.legal__texto ul, .legal__texto ol { padding-left: 1.2rem; display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.legal__texto dl { display: grid; gap: var(--space-sm); margin: 0 0 var(--space-md); }
.legal__texto dt { font-weight: 700; font-size: var(--text-sm); }
.legal__texto dd { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.legal__nota { background: var(--color-accent-soft); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); color: var(--color-accent-deep); }
.legal__nota p { color: inherit; margin: 0; }

/* ============ responsive ============ */
@media (max-width: 64rem) {
  .bio-grid, .form-grid, .legal-grid, .mapa-grid { grid-template-columns: minmax(0, 1fr); }
  .legal__indice { position: static; }
  .valores, .comisiones, .redes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-contacto { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ley__grid, .entrada-ancha, .entrada-ancha--invertida { grid-template-columns: minmax(0, 1fr); }
  /* En una sola columna el texto siempre va primero */
  .entrada-ancha--invertida .entrada-ancha__texto { order: 1; }
  .entrada-ancha--invertida .mini-carrusel { order: 2; }
  .piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .encabezado h1 { font-size: var(--text-2xl); }
  /* Un titular de 150 caracteres a 36 px son once renglones en un celular:
   * a 29 px son ocho, y se sigue leyendo como titular */
  .encabezado h1.encabezado__titular { font-size: var(--text-xl); }
  .valores, .comisiones, .redes-grid { grid-template-columns: minmax(0, 1fr); }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada__cuerpo { padding: var(--space-md); }
  .entrada img, .entrada video { aspect-ratio: 16 / 9; }
  .formulario { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .campo--fila { grid-template-columns: minmax(0, 1fr); }
  .radicado-form .btn { width: 100%; }
  .visor__pie { justify-content: center; }
  .ley { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .ley__galeria { grid-template-columns: minmax(0, 1fr); }
  .ley h3, .ley__numero { font-size: var(--text-xl); }
  .entrada-ancha { padding: var(--space-lg); }
  .piezas { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .filtros button { flex: 1; justify-content: center; padding-inline: var(--space-md); }
  .mini-carrusel__tiras img, .mini-carrusel__tiras video { width: 68px; height: 46px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Gestión legislativa · Autorías y Ponencias
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Cifras del encabezado ── */
.leg-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); }
.leg-cifra { min-width: 0; background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); }
.leg-cifra--fuerte { background: var(--color-accent-soft); }
.leg-cifra__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); }
.leg-cifra p { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── Pestañas de sección ── */
.leg-pestanas { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.leg-pestanas a {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 44px; padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-ink-2);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.leg-pestanas a:hover { border-color: var(--color-ink); color: var(--color-ink); }
.leg-pestanas a[aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.leg-pestanas span { font-variant-numeric: tabular-nums; opacity: 0.75; }
.leg-pestanas--sub { margin-top: var(--space-md); margin-bottom: 0; }

/* ── Buscador · lo usan el pórtico y Autorías y Ponencias, así que vive aquí
       y no en portico.css: esa hoja solo la carga la página del pórtico ── */
.buscador { display: block; position: relative; margin-top: var(--space-md); }
.buscador input {
  width: 100%; min-height: 46px; padding: var(--space-sm) var(--space-md) var(--space-sm) 2.7rem;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper-2); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink);
}
.buscador input::placeholder { color: var(--color-neutral); }
.buscador input:hover { border-color: var(--color-neutral); }
.buscador input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.buscador input::-webkit-search-cancel-button { cursor: pointer; }
.buscador svg { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: var(--color-muted); pointer-events: none; }

/* Texto atenuado — estaba solo en panel.css y las fichas también lo usan */
.muted { color: var(--color-muted); }

/* ── Buscador de la página ── */
.leg-busca { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
.leg-busca__linea { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.leg-busca .buscador { flex: 1 1 22rem; margin-top: 0; }

/* ── Los filtros: selectores que se aplican solos al elegir ── */
.leg-filtros { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.leg-filtros label { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.leg-filtros span { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.leg-filtros select {
  min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2);
  cursor: pointer; max-width: 15rem;
}
.leg-filtros select:hover { border-color: var(--color-neutral); }
.leg-filtros select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.leg-filtros select[data-activo="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.leg-filtros noscript button { min-height: 40px; }

/* ── Rejilla de tarjetas ── */
.leg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.leg-grid > .vacio { grid-column: 1 / -1; }
.leg-tarjeta {
  min-width: 0; display: flex; flex-direction: column; gap: var(--space-2xs);
  background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg);
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.leg-tarjeta:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.leg-tarjeta h3 { font-size: var(--text-md); line-height: 1.3; margin: var(--space-2xs) 0 0; }
.leg-tarjeta h3 a { text-decoration: none; color: inherit; }
.leg-tarjeta h3 a:hover { color: var(--color-accent-deep); }
.leg-tarjeta__alto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.leg-tarjeta__anio { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.leg-tarjeta__texto { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); flex: 1; }
.leg-tarjeta__datos { margin: var(--space-sm) 0 0; display: grid; gap: var(--space-2xs); }
.leg-tarjeta__datos > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-xs); }
.leg-tarjeta__datos dt { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.leg-tarjeta__datos dd { margin: 0; font-size: var(--text-xs); color: var(--color-ink-2); overflow-wrap: anywhere; }

/* ── La marca de esquina: tipo, estado o número de ley ── */
.leg-marca {
  display: inline-flex; align-items: center;
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--color-paper-3); color: var(--color-ink-2);
  padding: 0.15rem 0.55rem; border-radius: var(--radius-pill);
}
.leg-marca[data-ley="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.leg-marca[data-vacio="true"] { background: transparent; color: var(--color-muted); border: var(--rule-hair) dashed var(--color-rule); }
.leg-marca--rol { background: var(--color-accent-soft); color: var(--color-accent-deep); }

/* ── Ficha de una iniciativa o de un debate ── */
.leg-titulo-oficial { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-muted); max-width: 74ch; line-height: 1.55; }
.leg-ficha-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-xl); align-items: start; }
.leg-ficha-grid > * { min-width: 0; }
.leg-cuerpo p { margin: 0 0 var(--space-md); font-size: var(--text-base); line-height: 1.7; color: var(--color-ink-2); max-width: 68ch; }
.vacio--suave { border-style: solid; border-color: var(--color-rule); background: var(--color-paper-2); text-align: start; padding: var(--space-lg); }
.vacio--suave p { margin: 0; max-width: 68ch; }

.leg-lateral { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); position: sticky; top: 5.5rem; }
.leg-lateral .btn { margin-top: var(--space-md); }
.leg-lateral__fuente { margin: var(--space-xs) 0 0; font-size: var(--text-2xs); color: var(--color-muted); }
.ficha-contacto--apretada { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: 0; background: transparent; }

.leg-bloque { margin-top: var(--space-xl); }
.leg-bloque h2 { font-size: var(--text-lg); }
.leg-bloque__pie { margin: var(--space-2xs) 0 var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }

/* ── El trámite: una línea de tiempo sobria ── */
.leg-tramite { list-style: none; margin: 0; padding: 0 0 0 var(--space-lg); display: grid; gap: var(--space-md); position: relative; }
.leg-tramite::before { content: ""; position: absolute; inset-block: 0.55rem 0.55rem; inset-inline-start: 4px; width: 2px; background: var(--color-rule); }
.leg-tramite li { position: relative; }
.leg-tramite li::before {
  content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-lg) + 1px); top: 0.45rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-neutral);
}
.leg-tramite li:first-child::before { background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.leg-tramite__fecha { display: block; font-size: var(--text-2xs); font-weight: 700; color: var(--color-muted); }
.leg-tramite__estado { display: block; font-size: var(--text-sm); font-weight: 700; line-height: 1.35; }
.leg-tramite__meta { display: block; font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }

/* ── Ponencias, citados, documentos, coautores ── */
.leg-ponencias, .leg-citados, .leg-documentos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.leg-ponencias li, .leg-citados li {
  background: var(--color-paper-2); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
}
.leg-ponencias__meta, .leg-citados__nombre { font-size: var(--text-sm); color: var(--color-ink-2); }
.leg-citados__nombre { font-weight: 700; flex: 1; }
.leg-ponencias__nota { flex-basis: 100%; margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.leg-documentos li { font-size: var(--text-sm); }

.leg-coautores summary { cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: var(--color-accent-deep); }
.leg-coautores ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-md); }
.leg-coautores li { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── La declaración de conflictos de interés ── */
.leg-declaracion { display: grid; gap: var(--space-md); }
.leg-categoria { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); scroll-margin-top: 6rem; }
.leg-categoria__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.leg-categoria__head h3 { font-size: var(--text-md); margin: 0; }
.leg-categoria__vacia { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.leg-declarado { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.leg-declarado h4 { font-size: var(--text-sm); margin: 0 0 var(--space-2xs); }
.leg-declarado p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.leg-declarado__pie { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xs) !important; font-size: var(--text-xs) !important; color: var(--color-muted) !important; }

/* ── El pie de fuente, que hace verificable todo lo anterior ── */
.leg-fuente {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
  background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg);
}
.leg-fuente p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 80ch; }

@media (max-width: 64rem) {
  .leg-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leg-ficha-grid { grid-template-columns: minmax(0, 1fr); }
  .leg-lateral { position: static; }
}

@media (max-width: 40rem) {
  .leg-cifras { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .leg-cifra { padding: var(--space-md); }
  .leg-grid { grid-template-columns: minmax(0, 1fr); }
  .leg-pestanas { gap: var(--space-2xs); }
  .leg-pestanas a { flex: 1; justify-content: center; padding-inline: var(--space-sm); font-size: var(--text-xs); }
  .leg-busca .btn { flex: 1; }
  .leg-coautores ul { grid-template-columns: minmax(0, 1fr); }
  .leg-tarjeta__datos > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .leg-fuente { padding: var(--space-md); }
}

/* ── Paginación: la escribimos nosotros, en español y con los tokens ── */
.paginacion {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-xs); margin-top: var(--space-xl);
}
.paginacion__paso, .paginacion__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-ink-2);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.paginacion a.paginacion__paso:hover, .paginacion a.paginacion__num:hover { border-color: var(--color-ink); color: var(--color-ink); }
.paginacion [aria-disabled="true"] { opacity: 0.4; }
.paginacion [aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.paginacion__numeros { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; }
.paginacion__hueco { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-xs); color: var(--color-muted); }
.paginacion__cuenta { flex-basis: 100%; text-align: center; margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 40rem) {
  .paginacion__numeros { display: none; }
  .paginacion__paso { flex: 1; }
}

/* ── Justificado en las páginas de la gestión legislativa ── */
.leg-cuerpo p,
.leg-tarjeta__texto,
.leg-declarado p,
.leg-fuente p,
.leg-titulo-oficial,
.leg-ponencias__nota,
.vacio p,
.vacio--suave p,
.sin-gestiones p {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Los estados vacíos van centrados: justificar un texto centrado no tiene sentido */
.vacio p { text-align: center; }
.vacio--suave p { text-align: justify; }

@media (max-width: 26rem) {
  .leg-cuerpo p, .leg-tarjeta__texto, .leg-declarado p, .leg-fuente p,
  .leg-titulo-oficial, .leg-ponencias__nota, .vacio--suave p, .sin-gestiones p { text-align: start; }
}