/*! Monitor Legislativo · © 2026 Fabián Belmar — C22, Centro de Estudios Públicos. Todos los derechos reservados (ver LICENSE). Huella: c22mon-4f8a2c71 */
/* Monitor Legislativo · ajustes elegidos parte por parte (octubre 2026)
   Va al final del <head>, después de c22-componentes.css. */

/* 1 · Cabecera de las páginas internas: título de 40 px con la barra verde,
       como las páginas del C22, sin cinta de colores. */
.c22-ceja ~ h1 {
  font: 700 40px/44px 'DM Sans', sans-serif !important; letter-spacing: normal !important;
  display: inline-block !important; border-bottom: 7px solid var(--acento) !important; padding-bottom: 2px !important;
  margin: 0 0 12px !important; max-width: none !important;
}
.c22-ceja ~ h1 ~ p.c22-bajada, .c22-ceja ~ h1 + p.lead { font: 400 16px/24.8px 'DM Sans', sans-serif !important; color: #41454A !important; }

/* 3 · Tarjetas de las herramientas: como las de Publicaciones del C22. Bajo la
       foto, sin caja, con la etiqueta sobre la imagen y un filete entre una y otra. */
.hero-fila { margin-top: 28px !important; }
.hero .inner { padding-bottom: 56px !important; }
.hero-fila .card { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; position: relative; transform: none !important; }
.hero-fila .card + .card::before { content: ''; position: absolute; left: -9px; top: 0; bottom: 0; border-left: 1px solid rgba(101, 125, 129, .25); }
.hero-fila .ct-mini { border-radius: 6px !important; }
.hero-fila .ct-cuerpo { padding: 12px 0 0 !important; position: static !important; }
.hero-fila .ct-tag { position: absolute !important; top: 10px; left: 10px; margin: 0 !important; }
.hero-fila h3 { font-size: 17px !important; }
@media (max-width: 760px) { .hero-fila .card + .card::before { display: none; } }

/* 5 · Cifras: las mismas cajas, agrupadas por tema y alineadas en columnas. */
.facts-grid.facts-grupos { display: block !important; }
.facts-grupo + .facts-grupo { margin-top: 24px; }
.facts-grupo-tit { margin: 0 0 10px; font: 700 12px/1 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #566C70; }
.facts-fila { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .facts-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* cajas del mismo tamaño, con el fondo suave del color de su tema */
.facts-fila .fact { height: 150px !important; box-sizing: border-box; display: flex !important; flex-direction: column; justify-content: flex-start; padding-top: 30px !important; overflow: hidden; border: 0 !important; background: var(--gs) !important; }
.facts-fila .fact-desglose { display: none !important; }
.facts-fila .fnum { color: var(--gx) !important; }
.facts-grupo:nth-child(1) { --g: #4CCAA5; --gt: #1B1C1E; --gs: #E4F7F1; --gx: #16765C; }
.facts-grupo:nth-child(2) { --g: #FFB923; --gt: #1B1C1E; --gs: #FFF4DC; --gx: #8A5D00; }
.facts-grupo:nth-child(3) { --g: #A10856; --gt: #fff; --gs: #F6E3EC; --gx: #A10856; }
.facts-grupo-tit { display: inline-block; padding: 3px 7px; border-radius: 2.5px; background: var(--g); color: var(--gt) !important; }

/* 6 · Votos que llaman la atención: las mismas tarjetas, todas del mismo alto;
       el resultado y la fecha siempre al pie. */
.rar-grid { grid-auto-rows: 1fr !important; align-items: stretch !important; }
.rar { display: flex !important; flex-direction: column; height: 100%; box-sizing: border-box; }
.rar .que { flex: 1; }
.rar .marcador { margin-top: auto !important; }
.rar-grid.rar-plegado > .rar.rar-fuera { display: none !important; }

/* 2 · Últimas votaciones como un mazo de cartas de papel: tres cartas enteras,
       apiladas y apenas giradas. Al pasar, la de arriba sale hacia un lado y la de
       abajo sube a su lugar (el JS pone carta-sale, carta-sube y carta-avanza). */
#cardVivo.panel.mazo { position: relative; isolation: isolate; }
#cardVivo.panel.mazo .carta { transition: transform .5s cubic-bezier(.2, .7, .25, 1), opacity .5s ease, box-shadow .5s ease; }
#cardVivo.panel.mazo .carta:not(.atras) { position: relative; z-index: 3; transform-origin: 30% 120%; }
#cardVivo.panel.mazo .carta.atras {
  position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important;
  display: flex !important; flex-direction: column; overflow: hidden;
  background: #fff !important; border: 1px solid rgba(27, 28, 30, .08) !important; border-radius: 16px !important;
  padding: 26px 26px 22px !important; box-shadow: 0 8px 20px rgba(27, 28, 30, .22) !important; transform-origin: 30% 120%;
}
#cardVivo.panel.mazo .carta.atras > * { display: block !important; visibility: visible !important; opacity: 1 !important; }
#cardVivo.panel.mazo .carta.atras > .vivo-bar { display: flex !important; }
#cardVivo.panel.mazo .carta.atras > .vivo-link { margin-top: auto; }
#cardVivo.panel.mazo .carta.atras > .car-prog { display: none !important; }
#cardVivo.panel.mazo .carta.atras-1 { z-index: 2 !important; transform: translate(9px, 9px) rotate(1.6deg) !important; }
#cardVivo.panel.mazo .carta.atras-2 { z-index: 1 !important; transform: translate(18px, 17px) rotate(3.2deg) !important; }
/* el cambio */
#cardVivo.panel.mazo .carta.carta-sale { transform: translate(-118%, -26px) rotate(-14deg) !important; opacity: 0; box-shadow: 0 30px 60px rgba(27, 28, 30, .3); transition: transform .52s cubic-bezier(.55, 0, .7, .4), opacity .45s ease-in .1s; }
#cardVivo.panel.mazo .carta.carta-sale-der { transform: translate(60%, -30px) rotate(12deg) !important; opacity: 0; transition: transform .52s cubic-bezier(.55, 0, .7, .4), opacity .4s ease-in .1s; }
#cardVivo.panel.mazo .carta.atras-1.carta-sube { transform: none !important; box-shadow: 0 20px 55px rgba(27, 28, 30, .16) !important; }
#cardVivo.panel.mazo .carta.atras-2.carta-avanza { transform: translate(9px, 9px) rotate(1.6deg) !important; }
#cardVivo.panel.mazo .carta.carta-aparece { opacity: 0; transform: translateY(12px); transition: none; }
@media (prefers-reduced-motion: reduce) { #cardVivo.panel.mazo .carta { transition: none !important; } }

/* la foto termina poco después del buscador; las tarjetas alineadas con la foto */
section.hero { min-height: 0 !important; height: auto !important; padding-bottom: 0 !important; }
.hero .inner { padding-bottom: 44px !important; }
.hero-fila { padding-left: 0 !important; padding-right: 0 !important; }
.hero-fila-in { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* 7 · Sobre el proyecto: todo en una caja blanca, como el mapa de partidos;
       «Cómo citar» destacado y sin la lista «En qué estamos». */
section.about > .inner { background: #fff !important; border: 1px solid rgba(27, 28, 30, .08) !important; border-radius: 16px !important; padding: 32px 34px !important; }
.about .roadmap-col { display: none !important; }
.about .cita, .about blockquote, .about .cita-txt { background: #EEF4F3 !important; border-left: 4px solid var(--acento) !important; padding: 12px 14px !important; border-radius: 4px !important; }

/* Revisión de pestañas (octubre 2026) */
/* Rankings: las secciones con el mismo margen que la cabecera (antes pegadas al borde) */
section.ranking-dip, section.rankings-sec {
  padding-left: max(5%, calc((100% - var(--banda, 1160px)) / 2)) !important;
  padding-right: max(5%, calc((100% - var(--banda, 1160px)) / 2)) !important;
}
/* Discurso: «Cómo funciona» a la altura de las demás pestañas, junto a la bajada */
header.site-header > .top { align-items: flex-end !important; }

/* ── Carril de fechas del mazo (portada): la última fecha se desvanece en vez
   de cortarse, y las flechas se ven sobre la foto ── */
.hero .car-track {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  padding-right: 24px;
}
.hero .car-nav button {
  background: rgba(27, 28, 30, .78);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.hero .car-nav button:hover { background: #1B1C1E; border-color: var(--acento); color: #fff; }

/* En pantallas angostas la pastilla del menú ocupa todo el ancho y tapaba la
   ceja («Monitor legislativo / …») de las páginas interiores. */
@media (max-width: 900px) {
  .c22-cabecera .c22-ceja { margin-top: 16px; }
}

/* Una sola familia, como el resto de c22cepchile.cl: lo que iba en
   IBM Plex Mono (ejes de fecha, cifras de píldoras, nombres de paquetes)
   pasa a DM Sans, con cifras de ancho fijo para que las columnas sigan alineadas. */
:root { --mono: 'DM Sans', sans-serif !important; }
code, kbd, samp, pre, tt,
[style*="Plex Mono"], [style*="monospace"],
svg text { font-family: 'DM Sans', sans-serif !important; }
body { font-variant-numeric: tabular-nums; }

/* Votaciones: tres vistas como botones en una fila, como en Discurso */
.c22-vistas-grupos { border-bottom: 0 !important; }
.c22-vistas-grupos #tabs { gap: 8px !important; }
.c22-vistas-grupos #tabs .tab-group { display: contents !important; }
.c22-vistas-grupos #tabs .tab-group-label { display: none !important; }
.c22-vistas-grupos #tabs .tab {
  border: 1px solid var(--border) !important; border-radius: 50px !important;
  padding: 10px 18px !important; margin: 0 !important; background: var(--bg-white) !important;
  font-size: 12px !important; letter-spacing: 1px; color: var(--text) !important;
}
.c22-vistas-grupos #tabs .tab:hover { border-color: var(--text-2) !important; }
.c22-vistas-grupos #tabs .tab.active { background: var(--dark) !important; color: #fff !important; border-color: var(--dark) !important; }

/* Un solo ancho dentro de c22cepchile.cl para todas las pestañas */
html.c22-embed { --banda: 100%; }
/* El ancho lo manda la portada de c22cepchile.cl: 1248 px centrados */
html.c22-embed body { max-width: 1248px; margin-left: auto !important; margin-right: auto !important; }
html.c22-embed section.ranking-dip, html.c22-embed section.rankings-sec,
html.c22-embed .c22-banda { padding-left: 0 !important; padding-right: 0 !important; }

/* Mismo fondo gris en todas las pestañas (Rankings tenía la cabecera y la lista en blanco) */
body:has(section.rankings-sec) { background: var(--bg) !important; }
section.rankings-sec, section.ranking-dip { background: transparent !important; }
/* Título a la misma altura en todas las pestañas (Discurso y Legisladores quedaban más arriba) */
header.site-header { padding-top: 48px !important; }
section.tope { padding-top: 48px !important; }
/* Bajada del mismo ancho en todas las pestañas */
section.tope .lead { max-width: 76ch !important; }
/* Discurso: cifras en negro, como en Votaciones; el color no significaba nada */
.metric .val[id^="m-"] { color: var(--dark) !important; }

/* Discurso: carril de fechas y metodología al mismo ancho que en las demás pestañas */
#navTemporalSlot { max-width: none !important; }
section#methodology { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Portada: cada fila de cifras llena el ancho (antes quedaban huecos a la derecha) */
@media (min-width: 901px) {
  .facts-fila { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
/* Votaciones: el botón activo ya dice qué vista es */
#viewContext { display: none !important; }
@media (max-width: 560px) { .c22-ceja ~ h1 { font-size: 30px !important; line-height: 34px !important; } }

/* Dentro de c22cepchile.cl el fondo es el de la página: así se ven sus círculos rayados en los márgenes */
html.c22-embed, html.c22-embed body { background: transparent !important; }

/* Simplificación (oct 2026): Discurso sale del Monitor (queda en discurso/, sin enlaces) */
.c22skin-sub a[href$="discurso/"], .c22skin-nav a[href$="discurso/"],
a.card[href$="discurso/"], .c22skin-foot a[href$="discurso/"], li:has(> a[href$="discurso/"]) { display: none !important; }
/* sin Discurso, las tres tarjetas llenan la fila */
@media (min-width: 761px) { .products .cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* Hemiciclo simplificado: solo el hemiciclo, por voto o por coalición, con «Qué se votó» y «Quién ganó y quién perdió» */
#mainTabs, #modeOrder, #modeInesp, #votoLectura .c22-inesp, #votoLectura .c22-proyecto,
#partidosLeyenda, #bancadas { display: none !important; }

/* Portada: el borde redondeado de la grilla recortaba los rótulos «La Sala», «Quiénes votan»… */
.facts-grid.facts-grupos { overflow: visible !important; border-radius: 0 !important; }
/* Rankings: el selector Diputados/Partidos en su propia línea, bajo el título */
.inner > h2.sec-title + .rank-toggle { display: flex !important; width: max-content; margin: 4px 0 18px !important; }
.rank-desc { margin: 4px 0 22px; font: 400 14px/1.55 var(--mont); color: var(--text-2); max-width: 80ch; }

/* Rankings: dos extremos lado a lado y la lista completa a pedido, todo con el mismo diseño */
.rk-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; }
.rk-tit { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font: 700 12px/1.3 var(--mont); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text); }
.rk-meta { display: flex; align-items: center; gap: 8px; }
.rk-barra { position: relative; display: block; width: 100%; max-width: none; height: 5px; margin-top: 3px; border-radius: 3px; background: var(--border-light); overflow: hidden; }
.rk-barra i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.rk-barra.pos::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--text-m); }
.rk-todos-wrap { margin-top: 24px; text-align: center; }
.rk-ver { font: 600 13px/1 var(--mont); padding: 12px 22px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg-white); color: var(--dark); cursor: pointer; }
.rk-ver:hover { border-color: var(--text-2); }
.rk-todos { margin-top: 26px; text-align: left; }
.rk-todos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: 0 40px; }
@media (max-width: 760px) { .rk-cols, .rk-todos-grid { grid-template-columns: 1fr; } }
.rk-col .rank-top-info, .rk-todos .rank-top-info { align-self: stretch; justify-content: center; }
.rk-acciones { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.rk-busca { font: 400 13px/1 var(--mont); padding: 11px 16px; width: 240px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg-white); color: var(--dark); }
.rk-busca:focus { outline: none; border-color: var(--acento); }
.rk-hallado { font: 600 12px/1.3 var(--mont); color: var(--text-2); }
.rank-top-item.rk-hit { background: var(--acento-suave, rgba(13,115,214,.14)); }
/* Rankings: un solo título (el de la página); el selector va bajo la bajada */
section.rankings-sec { padding-top: 8px !important; }
section.rankings-sec .inner > .sec-label, section.rankings-sec .inner > h2.sec-title { display: none !important; }

/* Móvil: el selector de votación con sus dos flechas en una sola línea; la ruta sin partirse */
.nav-temp__row { flex-wrap: nowrap !important; }
.nav-temp__row .nav-temp__select { flex: 1 1 auto; min-width: 0 !important; width: auto !important; }
@media (max-width: 560px) {
  .c22-ceja { flex-wrap: wrap; gap: 6px 8px !important; letter-spacing: 1.2px !important; font-size: 10px !important; }
  .c22-ceja::before { flex-basis: 18px !important; }
}

/* 6b · Votos que llaman la atención: titular y bajada de la nota de prensa de la
        Cámara arriba, quién se salió de la fila al medio, enlaces al pie. */
.rar-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; gap: 16px !important; }
.rar > .marcador { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; }
.rar-tit { font-family: var(--dm); font-size: 19px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.2px; color: var(--dark); margin: 0 0 8px; }
.rar-baj { font-family: var(--mont); font-size: 14px; line-height: 1.5; color: var(--text-2);
  margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rar-quienes { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-light); }
.rar-quienes .quien:last-child { margin-bottom: 0; }
.rar-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border-light); font-family: var(--mont); font-size: 12px; font-weight: 700; }
.rar-links a { color: var(--acento-txt, #0A5CAB); text-decoration: none; }
.rar-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rar .rar-quienes .quien { border: 0 !important; background: none !important; border-radius: 0 !important;
  padding: 0 !important; margin-bottom: 14px; }
@media (max-width: 700px) { .rar-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; } }

/* 3b · Portada: cuatro tarjetas, una por pestaña del menú. Miniatura 2:1, nombre de
        la pestaña y la primera frase de esa pestaña; sin espacio vacío. */
@media (min-width: 1101px) { #tourCards { grid-auto-flow: row !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; overflow: visible !important; } }
@media (min-width: 761px) and (max-width: 1100px) { #tourCards { grid-auto-flow: row !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; row-gap: 28px !important; } .hero-fila .vot-nav { display: none !important; } }
#tourCards .card { display: flex !important; flex-direction: column; }
#tourCards .ct-mini { width: 100% !important; height: auto !important; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 0 !important; background: #fff; }
#tourCards .ct-cuerpo { gap: 6px !important; flex: 1; }
#tourCards h3 { margin: 0 !important; }
#tourCards .ct-desc { font-family: var(--mont); font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#tourCards .ct-pie { justify-content: flex-start !important; margin-top: auto; padding-top: 4px !important; }
#tourCards .card { border: 0 !important; }
#tourCards h3 { min-height: 0 !important; }
@media (min-width: 761px) { #tourCards { -webkit-mask-image: none !important; mask-image: none !important; } }

/* Carril de fechas del mazo: una flecha a cada lado de las fechas, para que
   ninguna fecha quede tapada. */
.car-rail { gap: 8px !important; }
.car-rail .car-flecha { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; padding: 0;
  border: 1px solid var(--border); background: var(--bg-white); color: var(--text-2);
  font-family: var(--mont); font-size: 16px; line-height: 1; cursor: pointer; }
.hero .car-rail .car-flecha { background: rgba(27, 28, 30, .78); border-color: rgba(255, 255, 255, .35); color: #fff; }
.hero .car-rail .car-flecha:hover { background: #1B1C1E; border-color: var(--acento); color: #fff; }
.hero .car-track { padding-right: 18px !important; }
@media (max-width: 760px) { .car-rail .car-flecha { width: 34px; height: 34px; } }
.hero .car-rail { position: relative; z-index: 5; }

/* Hemiciclo: cabecera con titular y bajada de la nota de la Cámara. En pantallas
   angostas la caja crece para que el titular no quede en una sola línea. */
@media (max-width: 700px) {
  .c22-proyecto-cab { height: auto !important; }
  .c22-nota-titular { -webkit-line-clamp: 3 !important; }
  .c22-nota-bajada { -webkit-line-clamp: 3 !important; }
}

/* Hemiciclo: etiquetas de partido en tres bloques, como el dibujo (oposición,
   otros, oficialismo), en dos filas cada uno. El color dice cómo votó la mayoría
   del partido; la leyenda va arriba. En el celular cada bloque se desliza de lado. */
#voteSummary { display: block !important; }
.c22-chips-ley { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  font-family: var(--mont); font-size: 12px; color: var(--text-m); margin: 0 0 14px; }
.c22-ley { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 600; }
.c22-ley::before { content: ''; width: 18px; height: 11px; border-radius: 6px; border: 1px solid; box-sizing: border-box; }
.c22-ley-si::before { background: rgba(76, 202, 165, .32); border-color: rgba(76, 202, 165, .7); }
.c22-ley-no::before { background: rgba(242, 2, 49, .28); border-color: rgba(242, 2, 49, .65); }
.c22-ley-mix::before { background: rgba(101, 125, 129, .18); border-color: rgba(101, 125, 129, .4); }
.c22-pbloques { display: flex; justify-content: center; align-items: flex-start; }
.c22-pbloque { padding: 0 18px; }
.c22-pbloque + .c22-pbloque { border-left: 1px dashed var(--border); }
.c22-pbloque-lab { font-family: var(--mont); font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-m); text-align: center; margin-bottom: 8px; }
.c22-pbloque .c22-chips-g { display: grid; grid-template-columns: repeat(var(--cols, 2), 100px); gap: 6px; }
.c22-chips-g .coal-chip { width: 100px !important; min-width: 0 !important; box-sizing: border-box; }
@media (max-width: 700px) {
  .c22-chips-ley { justify-content: flex-start; font-size: 11px; }
  .c22-pbloques { flex-direction: column; align-items: stretch; gap: 10px; }
  .c22-pbloque { padding: 0; }
  .c22-pbloque + .c22-pbloque { border-left: 0; }
  .c22-pbloque-lab { text-align: left; margin-bottom: 4px; }
  .c22-pbloque .c22-chips-g { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .c22-pbloque .c22-chips-g::-webkit-scrollbar { display: none; }
  .c22-chips-g .coal-chip { flex: 0 0 auto; width: auto !important; min-width: 62px !important; }
}

/* Votaciones, mapa: etiquetas de partido en los mismos tres bloques del hemiciclo. */
.c22-vchips { margin-bottom: 16px; }
.c22-vchips-coal { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.c22-vchips-coal .coal-chip { width: auto !important; min-width: 120px !important; }

/* Rankings, vista Partidos: logo, sigla y nombre del partido en cada fila. */
.rank-barras .rank-fila { padding: 6px 12px; }
.rank-barras .rank-nom { width: 300px; display: flex; align-items: center; gap: 9px; }
.rank-barras .rank-nom b { font-weight: 700; color: var(--dark); flex: 0 0 auto; }
.rank-barras .rank-nom-l { color: var(--text-m); font-family: var(--mont); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.rank-logo { width: 26px; height: 26px; border-radius: 50%; background: #fff; flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--border-light); }
.rank-logo img { width: 78%; height: 78%; object-fit: contain; }
@media (max-width: 700px) { .rank-barras .rank-nom { width: 120px; } .rank-barras .rank-nom-l { display: none; } }
.rk-empate { font-family: var(--mont); font-size: 13px; color: var(--text-2); margin: -6px 0 14px; }

/* Hemiciclo: buscador de votaciones por tema o boletín. */
.c22-busca-vot { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.c22-busca-vot-rot { font-family: var(--mont); font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-m); white-space: nowrap; }
.c22-busca-vot-caja { position: relative; flex: 1; }
.c22-busca-vot-caja input { width: 100%; box-sizing: border-box; padding: 12px 18px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-white); font-family: var(--mont); font-size: 14px; color: var(--text); }
.c22-busca-vot-caja input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave, rgba(13,115,214,.14)); }
.c22-busca-vot-res { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--bg-white);
  border: 1px solid var(--border-light); border-radius: 14px; box-shadow: 0 14px 34px rgba(27,28,30,.14); padding: 6px; max-height: 420px; overflow-y: auto; }
.c22-busca-vot-res button { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%;
  text-align: left; background: none; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; font-family: var(--mont); }
.c22-busca-vot-res button:hover { background: var(--bg); }
.bv-f { font-size: 12px; color: var(--text-m); }
.bv-t { font-family: var(--dm); font-size: 14px; font-weight: 600; color: var(--dark); line-height: 1.3; }
.bv-r { font-size: 12px; font-weight: 700; white-space: nowrap; }
.bv-r.si { color: var(--green-txt, #0E7A5F); } .bv-r.no { color: #C4022A; }
.c22-busca-vot-nada { font-family: var(--mont); font-size: 12px; color: var(--text-m); margin: 6px 10px; }
@media (max-width: 700px) {
  .c22-busca-vot { flex-direction: column; align-items: stretch; gap: 6px; }
  .c22-busca-vot-res button { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.bv-t small { display: block; font-family: var(--mont); font-size: 12px; font-weight: 500; color: var(--text-m); margin-top: 2px; }
.c22-busca-vot-res .bv-grupo { background: var(--bg); margin-bottom: 4px; }
.c22-busca-vot-res .bv-grupo:hover { background: var(--border-light); }
.bv-r.bv-ver { color: var(--acento-txt, #0A5CAB); }
.c22-busca-vot-res .bv-volver { display: block; width: auto; font-size: 12px; font-weight: 700; color: var(--acento-txt, #0A5CAB); padding: 6px 10px; }
.c22-busca-vot-proy { font-family: var(--dm); font-size: 15px; font-weight: 700; color: var(--dark); margin: 4px 10px 8px; line-height: 1.3; }
.c22-busca-vot-proy span { display: block; font-family: var(--mont); font-size: 12px; font-weight: 500; color: var(--text-m); margin-top: 2px; }
.c22-busca-vot-res { max-height: min(560px, 70vh); }
.bv-sec { font-family: var(--mont); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-m);
  margin: 14px 10px 4px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.c22-busca-vot-res .bv-clave { background: var(--acento-suave, rgba(13,115,214,.10)); }
.c22-busca-vot-res .bv-clave .bv-t { font-weight: 700; }
.c22-busca-vot-res.en-grupo .bv-t { font-weight: 500; }
.c22-busca-vot-res.en-grupo .bv-clave .bv-t { font-weight: 700; }
/* «Quién ganó y quién perdió»: cinco pactos en la Cámara, dos bloques en el Senado */
.c22-bloques { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
@media (max-width: 1000px) { .c22-bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .c22-bloques { grid-template-columns: 1fr; } }
/* «Cómo citar» (assets/c22-citar.js): al pie de cada pestaña y botón en la portada */
.c22-citar { max-width: 1248px; margin: 48px auto 32px; padding: 22px 0 0; border-top: 1px solid var(--border-light, #E2E8E8); box-sizing: content-box; }
@media (max-width: 1300px) { .c22-citar { margin-left: 16px; margin-right: 16px; } }
.c22-citar-lab { display: block; font-family: var(--mont, 'Montserrat', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-m, #657D81); }
.c22-citar-txt { font-family: var(--mont, 'Montserrat', sans-serif); font-size: 14px; line-height: 1.5; color: #566C70; margin: 10px 0 12px; padding-left: 14px; border-left: 3px solid var(--acento, #0D73D6); max-width: 860px; }
.c22-citar-nota { font-family: var(--mont, 'Montserrat', sans-serif); font-size: 12px; line-height: 1.45; color: #7C9095; margin: 12px 0 0; max-width: 860px; }
.c22-citar-btn { font-family: var(--mont, 'Montserrat', sans-serif); font-size: 12px; font-weight: 700; color: var(--acento-txt, #0A5CAB); background: var(--bg-white, #fff); border: 1px solid var(--border, #CDD6D7); border-radius: 999px; padding: 6px 14px; cursor: pointer; margin: 0 0 4px; }
.c22-citar-btn:hover { border-color: var(--acento, #0D73D6); }
.citar-col .c22-citar-btn { margin: 0 0 12px; }
/* Marca del Monitor en tarjetas dibujadas con HTML (assets/c22-marca.js) */
.c22-marca-html { text-align: right; font-family: var(--mont, 'Montserrat', sans-serif); font-size: 10.5px; font-weight: 600; color: #7D8F92; margin-top: 8px; pointer-events: none; }