/* Paleta inspirada en fipeco.fr: azul marino + rojo sobre blanco/gris muy
   claro, en vez del "papel crema" que tenía antes -- pedido explícito del
   usuario. Merriweather/Inter reemplazan a Source Serif 4/Source Sans 3
   (ver el <link> de Google Fonts en _quarto.yml). */
:root {
  --lf-ink: #111827;
  --lf-red: #dc2626;
  --lf-blue: #1e3a8a;
  --lf-cream: #f3f4f6;
  --lf-border: #e5e7eb;
  --lf-muted: #6b7280;
  --lf-body: #374151;
  /* único verde del sitio -- semántico, solo para "aprobado"/"a favor" en
     una votación (leyes.qmd); en cualquier otro contexto el sitio no usa
     verde a propósito (ver docstring de la paleta arriba). */
  --lf-green: #15803d;
  /* Margen lateral único de todo el sitio (antes 44px fijo repetido en
     ~60 lugares, incluidos estilos inline de los .qmd) -- fluido para que
     baje solo en pantallas chicas en vez de un salto brusco en el
     breakpoint móvil. */
  --lf-pad-x: clamp(18px, 2.4vw, 48px);
}

body {
  margin: 0;
  background: #fff;
  color: var(--lf-ink);
  font-family: "Merriweather", serif;
  /* Red de seguridad: un tooltip con position:absolute (ver
     .lf-topbar-item, .lf-rank-item[data-tooltip]) puede quedar más
     ancho que su disparador y, si el disparador está pegado a un borde
     angosto, empujar el scrollWidth de toda la página -- pasó de
     verdad en la barra superior a ancho de celular. Esto no lo
     "arregla" (el tooltip se puede seguir viendo cortado en un caso
     extremo), pero evita que la PÁGINA entera quede con scroll
     horizontal por su culpa. */
  overflow-x: hidden;
}
* { box-sizing: border-box; }

.lf-sans { font-family: "Inter", sans-serif; }

/* --- barra superior --- */
.lf-topbar {
  background: var(--lf-ink);
  color: #d1d5db;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 7px var(--lf-pad-x);
  display: flex;
  align-items: center;
  gap: 22px;
}
/* Ticker: la fecha queda fija a la izquierda y los indicadores se
   desplazan de derecha a izquierda detrás de ella. .lf-topbar-marquee
   recorta lo que se sale de su caja (overflow:hidden) y nav.js le suma
   .lf-topbar-anim: clona el grupo las veces que haga falta para que no
   queden huecos y activa la animación y el desvanecido de los bordes
   (así los indicadores "se pierden" al llegar a la fecha). Sin JS queda
   una línea estática, sin animación ni máscara. */
.lf-topbar-fecha { flex: none; white-space: nowrap; }
.lf-topbar-marquee { flex: 1 1 0; min-width: 0; overflow: hidden; }
.lf-topbar-track { display: flex; width: max-content; }
.lf-topbar-grupo { flex: none; white-space: nowrap; padding-right: 44px; }
.lf-topbar-anim .lf-topbar-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 24px), transparent 100%);
}
.lf-topbar-anim .lf-topbar-track {
  animation: lf-marquee var(--lf-marquee-dur, 30s) linear infinite;
}
/* al pasar el mouse (o tocar) se detiene, así se puede leer y el tooltip
   queda anclado al indicador. */
.lf-topbar-anim .lf-topbar-marquee:hover .lf-topbar-track { animation-play-state: paused; }
@keyframes lf-marquee {
  to { transform: translateX(calc(-1 * var(--lf-marquee-shift, 0px))); }
}
/* Quien pide menos movimiento (prefers-reduced-motion) no recibe la
   animación: nav.js ni siquiera la activa -- la línea se puede desplazar
   a mano. */
@media (prefers-reduced-motion: reduce) {
  .lf-topbar-marquee { overflow-x: auto; scrollbar-width: none; }
  .lf-topbar-marquee::-webkit-scrollbar { display: none; }
}
/* UF/Dólar/IPC: el valor de hoy a la vista, el detalle (mes pasado, cierre
   2025) al pasar el mouse. El tooltip lo arma nav.js con position:fixed --
   antes era un ::after de CSS, pero el ticker recorta con overflow:hidden
   todo lo que se salga de su caja y ese tooltip abre hacia abajo. Fondo
   claro (a diferencia del tooltip oscuro de .lf-rank-item) porque la barra
   de donde sale ya es oscura. */
.lf-topbar-item { border-bottom: 1px dotted #9ca3af; cursor: help; color: #fff; }
.lf-topbar-tooltip {
  position: fixed;
  z-index: 60;
  background: #fff;
  color: var(--lf-ink);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-line;
  padding: 10px 13px;
  /* min()/vw en vez de un ancho fijo: en un celular angosto un tooltip de
     300px empujaba el scrollWidth de la página entera. */
  min-width: min(220px, 90vw);
  max-width: min(300px, 90vw);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* --- nav --- */
.lf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--lf-pad-x);
  border-bottom: 3px solid var(--lf-ink);
  flex-wrap: wrap;
  gap: 10px;
}
.lf-logo {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.01em;
}
.lf-logo a { color: inherit; text-decoration: none; }
.lf-logo-accent { color: var(--lf-blue); }
.lf-navlinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.lf-navlinks a { color: var(--lf-ink); text-decoration: none; }
.lf-navlinks a.lf-nav-activo { color: var(--lf-red); border-bottom: 2px solid var(--lf-red); padding-bottom: 2px; }
.lf-subscribe {
  background: var(--lf-red);
  color: #fff !important;
  padding: 8px 16px;
}

/* --- botón hamburguesa (solo celular, ver @media más abajo) -- ícono de
   3 barras dibujado en CSS (no depende de una fuente de emoji, que puede
   no existir/verse distinto según el dispositivo). display:none acá,
   display:block bajo el breakpoint móvil. */
.lf-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--lf-ink);
  width: 38px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.lf-nav-toggle-icon,
.lf-nav-toggle-icon::before,
.lf-nav-toggle-icon::after {
  content: "";
  position: absolute;
  /* left/right SOLO en .lf-nav-toggle-icon (inset respecto del botón) --
     ::before/::after quedan relativos al icono mismo (18px de ancho ya
     angosto), así que repetirles el mismo 9px los dejaba con ancho 0 (18 -
     9 - 9): no se veían dos de las tres barras. */
  left: 0;
  right: 0;
  height: 2px;
  background: var(--lf-ink);
  transition: transform .15s ease, top .15s ease, opacity .15s ease;
}
.lf-nav-toggle-icon { left: 9px; right: 9px; top: 16px; }
.lf-nav-toggle-icon::before { top: -7px; }
.lf-nav-toggle-icon::after { top: 7px; }
.lf-nav-toggle[aria-expanded="true"] .lf-nav-toggle-icon { background: transparent; }
.lf-nav-toggle[aria-expanded="true"] .lf-nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.lf-nav-toggle[aria-expanded="true"] .lf-nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }

/* --- hero --- */
.lf-hero { padding: 34px var(--lf-pad-x) 0; }
.lf-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lf-red);
  font-weight: 700;
  margin-bottom: 12px;
}
.lf-headline {
  font-size: clamp(26px, 1.2vw + 18px, 42px);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 14px;
  max-width: 820px;
}
.lf-dek {
  font-family: "Inter", sans-serif;
  font-size: clamp(15px, 0.35vw + 10px, 17px);
  line-height: 1.6;
  color: var(--lf-body);
  margin: 0 0 26px;
  max-width: 640px;
}

/* --- hero con layout de dos columnas en portada (titular + carrusel de noticias) --- */
.lf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  margin-bottom: 28px;
}
.lf-hero-col-main {
  min-width: 0;
}
.lf-hero-col-main .lf-headline {
  max-width: 100%;
}
.lf-hero-col-main .lf-dek {
  max-width: 100%;
  margin-bottom: 0;
}
.lf-hero-col-carousel {
  min-width: 0;
}

/* --- carrusel de noticias oficiales (portada) --- */
.lf-carousel {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--lf-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lf-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--lf-cream);
  border-bottom: 1px solid var(--lf-border);
  font-family: "Inter", sans-serif;
}

.lf-carousel-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lf-ink);
}

.lf-carousel-pulse {
  width: 7px;
  height: 7px;
  background-color: var(--lf-red);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: lf-pulse 2s infinite;
}

@keyframes lf-pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.lf-carousel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lf-carousel-counter {
  font-size: 11.5px;
  color: var(--lf-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lf-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--lf-border);
  background: #ffffff;
  color: var(--lf-ink);
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s ease;
  padding: 0;
}

.lf-carousel-btn:hover {
  background: var(--lf-ink);
  color: #ffffff;
  border-color: var(--lf-ink);
}

.lf-carousel-slides {
  position: relative;
  width: 100%;
}

.lf-carousel-slide {
  display: none;
  animation: lf-fade .35s ease;
}

.lf-carousel-slide.active {
  display: block;
}

@keyframes lf-fade {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

.lf-carousel-img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.lf-carousel-img-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.lf-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lf-carousel-img-link:hover .lf-carousel-img {
  transform: scale(1.04);
}

.lf-carousel-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(17, 24, 39, 0.88);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.lf-carousel-overlay-cta {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(220, 38, 38, 0.92);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.9;
  transform: translateY(0);
  transition: all .2s ease;
  z-index: 2;
}

.lf-carousel-img-link:hover .lf-carousel-overlay-cta {
  opacity: 1;
  background: #dc2626;
  transform: scale(1.02);
}

.lf-carousel-content {
  padding: 14px 16px 12px;
  background: #ffffff;
}

.lf-carousel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: var(--lf-muted);
  margin-bottom: 6px;
}

.lf-carousel-source {
  font-weight: 600;
  color: var(--lf-red);
}

.lf-carousel-title {
  font-family: "Merriweather", serif;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 6px;
}

.lf-carousel-title a {
  color: var(--lf-ink);
  text-decoration: none;
  transition: color .15s ease;
}

.lf-carousel-title a:hover {
  color: var(--lf-red);
  text-decoration: underline;
}

.lf-carousel-desc {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--lf-body);
  margin: 0 0 10px;
}

.lf-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px 10px;
  background: #ffffff;
  border-top: 1px solid #f3f4f6;
}

.lf-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .2s ease;
}

.lf-carousel-dot:hover {
  background: var(--lf-muted);
}

.lf-carousel-dot.active {
  background: var(--lf-red);
  width: 20px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .lf-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* --- fila de preguntas-gancho debajo del titular (portada) -- invitan a
   explorar el resto del sitio en vez de mostrar un número suelto --- */
.lf-hooks-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--lf-ink);
  border-bottom: 1px solid var(--lf-ink);
}
.lf-hook-card {
  display: block;
  padding: 16px 20px;
  border-right: 1px solid var(--lf-ink);
  text-decoration: none;
  color: inherit;
}
.lf-hook-card:last-child { border-right: none; }
.lf-hook-card:hover { background: var(--lf-cream); }
.lf-hook-q {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.lf-hook-cta {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--lf-red);
}

/* --- fila de tarjetas de indicadores --- */
.lf-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--lf-ink);
}
.lf-stats-row-4 { grid-template-columns: repeat(4, 1fr); }
.lf-stats-row-5 { grid-template-columns: repeat(5, 1fr); }
.lf-stats-row-2 { grid-template-columns: repeat(2, 1fr); }
/* Tarjeta sin <a> envolvente (ej. inflación en index.qmd, que no linkea a
   ninguna página de detalle todavía) -- la regla de sacar el borde derecho
   a la última tarjeta apunta normalmente al <a class="lf-stat-card-link">
   que la envuelve (ver más abajo); esta cubre el caso de una tarjeta
   suelta que además resulta ser la última de la fila. */
.lf-stats-row-4 > .lf-stat-card:last-child,
.lf-stats-row-5 > .lf-stat-card:last-child { border-right: none; }

/* --- mini-ranking dentro de una tarjeta de indicador (ver leyes.qmd) --- */
.lf-ranking-mini { margin-top: 10px; }
.lf-ranking-mini-item { margin-bottom: 8px; }
.lf-ranking-mini-label {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  line-height: 1.3;
  margin-bottom: 3px;
}
.lf-ranking-mini-value { font-weight: 700; flex-shrink: 0; }
.lf-ranking-mini-track { background: var(--lf-border); height: 5px; }
.lf-ranking-mini-fill { height: 5px; background: var(--lf-blue); }
.lf-stat-card {
  background: var(--lf-cream);
  padding: 22px 20px;
  border-right: 1px solid var(--lf-ink);
  position: relative;
  min-height: 215px;
  /* height:100% -- sin esto, cuando una tarjeta de la fila es más alta que
     las demás (ej. "Inflación" con su mini-gráfico, junto a tarjetas
     simples de solo título+número), la grilla SÍ estira parejo el <a>
     contenedor de cada una (comportamiento normal de CSS Grid), pero esta
     tarjeta de adentro se queda en su min-height propio -- se ve como un
     borde/fondo que corta antes de tiempo y deja un tramo de fondo blanco
     de la página, sin nada, hasta el borde real de la fila (reportado con
     captura). */
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Nota chica al pie de una tarjeta de indicador -- se separa del resto
   con margin-top:auto para quedar pegada abajo aunque la tarjeta sea más
   alta que su contenido (ej. las 4 de Leyes, min-height:300px). No todas
   las tarjetas la usan -- las que no, quedan igual que antes. */
.lf-stat-card-caption {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--lf-border);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: var(--lf-muted);
}
/* Cuando la tarjeta también tiene el panel de número grande (posicionado
   absoluto, anclado abajo a la derecha -- ver .lf-stat-panel), el pie de
   la tarjeta (margin-top:auto) queda anclado en esa MISMA franja inferior
   y el panel, al pintarse por encima al ser position:absolute, tapaba el
   texto del pie (visto en leyes.qmd y empleo_publico.qmd a ancho angosto).
   Se le reserva el ancho del panel (140px + 22px de margen) al texto para
   que fluya a su izquierda en vez de quedar debajo. */
.lf-stat-panel + .lf-stat-card-caption { padding-right: 138px; }
.lf-stat-card-link:last-child .lf-stat-card { border-right: none; }
.lf-stat-card-link { text-decoration: none; color: inherit; display: block; }
.lf-stat-card-link:hover .lf-stat-card { background: #e5e7eb; }
.lf-stat-card-link:hover .lf-stat-panel { background: #b91c1c; }
.lf-stat-card-title {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 6px;
}
.lf-stat-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--lf-body);
  line-height: 1.45;
  max-width: 180px;
}
.lf-stat-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 116px;
  min-height: 124px;
  background: var(--lf-red);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
}
/* --- tarjeta de indicador con gráfico embebido (ej. inflación) en vez del
   panel de número grande de las demás -- el contenido fluye normal (no
   position:absolute) porque un gráfico no cabe bien anclado a una esquina
   fija como el número de las otras tarjetas. */
.lf-stat-card-chart {
  display: flex;
  flex-direction: column;
  /* Las otras tarjetas de esta fila anclan su panel de número al fondo con
     position:absolute (que sí ocupa toda la altura estirada por el grid);
     esta, al no tener ese panel, necesita el 100% + space-between para que
     el gráfico/ministats bajen hasta la misma línea y no quede un hueco en
     blanco debajo cuando la fila se estira a la tarjeta más alta. */
  height: 100%;
  justify-content: space-between;
}
.lf-infl-mini-stats { display: flex; gap: 22px; margin-top: 10px; }
.lf-infl-mini-label {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  color: var(--lf-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.lf-infl-mini-value {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--lf-ink);
}
.lf-stat-panel-value {
  font-family: "Merriweather", serif;
  color: #fff;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  line-height: 1.1;
}

.lf-cifra {
  font-family: "Merriweather", serif;
  color: var(--lf-ink);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  margin-top: 6px;
}
.lf-cifra-sub {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--lf-muted);
  margin-top: 4px;
}

/* --- secciones de 2 columnas con borde --- */
.lf-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--lf-ink);
}
.lf-col {
  padding: 30px var(--lf-pad-x);
  border-right: 1px solid var(--lf-ink);
  /* min-width:0 -- un item de grid arranca con min-width:auto, así que una
     tabla ancha adentro (que ya tiene su propio scroll horizontal en
     .lf-tabla-scroll) igual estiraba la columna entera más allá de la
     pantalla en un celular. */
  min-width: 0;
}
.lf-col:last-child { border-right: none; }
.lf-col-center { display: flex; flex-direction: column; justify-content: center; }

/* --- variante de 3 columnas (ranking por parlamentario) -- mismo .lf-col
   de siempre, solo cambia el número de columnas del grid. --- */
.lf-row-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--lf-ink);
}

.lf-section-title {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 4px;
}
.lf-section-title-lg { font-size: 19px; margin-bottom: 12px; }
.lf-chart-meta {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--lf-muted);
  margin-bottom: 14px;
}

/* --- lista "qué monitoreamos" --- */
.lf-watch-item {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lf-border);
}
.lf-watch-item:last-child { border-bottom: none; }
.lf-watch-num {
  font-family: "Merriweather", serif;
  color: var(--lf-red);
  font-weight: 700;
  font-size: 17px;
}
.lf-watch-text {
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  color: var(--lf-body);
}

/* --- donut + leyenda --- */
.lf-donut-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.lf-donut-legend {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lf-legend-row { display: flex; align-items: center; gap: 9px; }
.lf-legend-swatch { width: 11px; height: 11px; display: inline-block; flex-shrink: 0; }

/* --- tooltip al pasar el mouse por un gráfico de línea/área --- */
/* Los gráficos (graficos_svg.py, empleo_publico.js, municipios.js) son un
   SVG con viewBox fijo (600x260) y width:100% -- se escalan con el ancho de
   la columna, y con ellos los textos de los ejes y el grosor de la línea.
   En una columna a todo lo ancho de un monitor grande quedaban de ~650px de
   alto, con etiquetas de 24px: se perdía la vista de conjunto. El tope deja
   la escala en ~1.4x como máximo (etiquetas de ~13px, alto ~360px). */
.lf-chart-hover { position: relative; max-width: 840px; }
/* mini-gráfico dentro de una tarjeta de indicador (portada): mismo criterio
   con su propio viewBox (260px de ancho), tope a ~1.4x. */
.lf-stat-card-chart .lf-chart-hover { max-width: 360px; }
/* Sección de gráfico a todo lo ancho (título, meta, gráfico, [leyenda], una
   nota): con el gráfico acotado a 840px quedaba media pantalla vacía a la
   derecha y la nota estirada en una línea de más de 1000px. En pantallas
   anchas la nota pasa al costado del gráfico, como anotación; debajo de
   1200px sigue todo en una columna. Las 22 secciones de este tipo tienen
   exactamente esa estructura (un gráfico y una nota, ver macro*.qmd,
   deuda*.qmd, etc.). */
@media (min-width: 1200px) {
  .lf-col[style*="grid-column"]:has(> .lf-chart-hover) {
    display: grid;
    grid-template-columns: minmax(0, 840px) minmax(220px, 340px);
    column-gap: 44px;
    justify-content: start;
    align-items: start;
  }
  .lf-col[style*="grid-column"]:has(> .lf-chart-hover) > :not(.lf-nota) { grid-column: 1; }
  .lf-col[style*="grid-column"]:has(> .lf-chart-hover) > .lf-nota {
    grid-column: 2;
    grid-row: 3 / span 3;
    margin-top: 0;
  }
}
.lf-chart-hover svg { cursor: crosshair; }
.lf-hover-vline, .lf-hover-dot { pointer-events: none; }
.lf-hover-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--lf-ink);
  color: #e5e7eb;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 11px;
  min-width: 110px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.lf-hover-fecha {
  font-weight: 700;
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lf-hover-fila { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lf-hover-fila .lf-hover-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.lf-hover-total { border-top: 1px solid #4b5563; margin-top: 3px; padding-top: 3px; }

/* --- leyenda simple bajo un gráfico de línea con varias series --- */
.lf-chart-legend-inline {
  display: flex;
  gap: 18px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--lf-body);
  margin-top: 6px;
}
.lf-chart-legend-inline .lf-hover-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

/* --- ranking de barras --- */
.lf-rank-item { margin-bottom: 14px; }
.lf-rank-label {
  display: flex;
  justify-content: space-between;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  margin-bottom: 5px;
}
.lf-rank-value { font-weight: 700; }
.lf-rank-etiqueta { font-weight: 400; color: var(--lf-muted); font-size: 12px; }
.lf-rank-track { background: var(--lf-cream); height: 10px; }
.lf-rank-fill { height: 10px; }

/* --- fila de ranking/barra con desglose al pasar el mouse (CSS puro, sin
   JS -- ver filaBarra() en municipios.js) --- */
.lf-rank-info { font-size: 11px; color: var(--lf-muted); }
.lf-rank-item[data-tooltip] { position: relative; cursor: help; }
.lf-rank-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 6px;
  background: var(--lf-ink);
  color: #e5e7eb;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
  padding: 8px 11px;
  /* min()/vw -- mismo motivo que .lf-topbar-item::after: en un celular
     angosto un ancho fijo puede quedar más ancho que la fila que lo
     dispara y empujar el scrollWidth de toda la página. */
  min-width: min(230px, 90vw);
  max-width: min(320px, 90vw);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.lf-rank-item[data-tooltip]:hover::after { opacity: 1; }

/* --- menú desplegable por ítem del nav (ver generar_nav() en comunes.py):
   al pasar el mouse por un ítem con secciones, se despliega una lista de
   anclas dentro de esa página para llegar directo a lo que se busca. --- */
.lf-navitem { position: relative; }
.lf-navitem-top { display: flex; align-items: center; }
.lf-navitem-caret {
  font-size: 9px;
  color: var(--lf-muted);
  margin-left: 3px;
  pointer-events: none;
}
.lf-navdrop {
  display: none;
  position: absolute;
  /* top:100% + un ::before invisible (ver abajo) en vez de margin-top:14px:
     con margin-top el desplegable quedaba flotando con un hueco vacío entre
     .lf-navitem y el borde de arriba de .lf-navdrop -- al bajar el mouse por
     ese hueco para hacer clic en un link de adentro, se perdía el :hover de
     .lf-navitem A MITAD DE CAMINO y el desplegable se cerraba solo antes de
     que el clic llegara (reportado: "lo que me dejaste no es clickeable").
     El ::before rellena ese hueco como parte de .lf-navdrop mismo, así el
     :hover nunca se corta. */
  top: calc(100% + 14px);
  left: 0;
  background: #fff;
  border: 1px solid var(--lf-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  min-width: 260px;
  padding: 6px 0;
  z-index: 20;
}
.lf-navdrop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.lf-navitem:hover .lf-navdrop { display: block; }
.lf-navdrop a {
  display: block;
  padding: 10px 16px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--lf-body);
  white-space: nowrap;
}
.lf-navdrop a:hover { background: var(--lf-cream); color: var(--lf-ink); }
/* Clasificación dentro de un desplegable fusionado (ej. "Deuda",
   "Presupuesto" y "Tributación" dentro de FINANZAS PÚBLICAS) -- el
   encabezado no es un link, y sus páginas (.lf-navdrop-sub) empiezan
   escondidas: se revelan con un clic en el encabezado (nav.js suma
   .lf-nav-open), no al pasar el mouse -- con hover alcanzaba a
   "engancharse" sin querer al recorrer la lista con el cursor. En
   desktop el panel se abre como flyout hacia el lado derecho (no empuja
   el resto de los grupos hacia abajo); nav.js agrega .lf-nav-flip si no
   entra a la derecha, para abrirlo hacia la izquierda en vez de cortarse
   contra el borde de la ventana. En celular (ver @media más abajo) se
   queda como acordeón hacia abajo -- un flyout lateral no cabe en una
   pantalla angosta. La primera clasificación no lleva línea divisoria
   arriba (nada que separar de sí misma); las siguientes sí. */
.lf-navdrop-group { padding-top: 10px; position: relative; }
.lf-navdrop-group:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid var(--lf-border);
}
.lf-navdrop-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px 4px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lf-muted);
  cursor: pointer;
}
.lf-navdrop-group:hover .lf-navdrop-group-label { color: var(--lf-ink); }
.lf-navdrop-group-caret {
  font-size: 9px;
  color: var(--lf-muted);
  transition: transform .15s ease;
}
.lf-navdrop-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
  background: #fff;
  border: 1px solid var(--lf-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  min-width: 240px;
  padding: 6px 0;
  z-index: 21;
}
.lf-navdrop-group.lf-nav-flip .lf-navdrop-sub { left: auto; right: 100%; }
.lf-navdrop-group.lf-nav-open .lf-navdrop-sub { display: block; }
.lf-navdrop-sub a { padding-left: 16px; }
.lf-navdrop-desc {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--lf-muted);
  padding: 6px 16px 10px;
  border-bottom: 1px solid var(--lf-border);
  margin-bottom: 4px;
  white-space: normal;
  max-width: 260px;
}

/* --- nav en celular: menú hamburguesa (ver nav.js) --------------------
   .lf-navlinks pasa de fila horizontal con wrap (ilegible en un celular --
   terminaba en 5-6 líneas de puro texto envuelto, reportado por el
   usuario con captura) a lista vertical, oculta hasta que se abre el
   botón. Los ítems con desplegable (.lf-navitem) no tienen :hover en un
   celular, así que el caret pasa a ser un acordeón que nav.js abre/cierra
   con un tap -- separado del link, que sigue navegando directo. */
@media (max-width: 820px) {
  .lf-nav-toggle { display: block; }
  .lf-navlinks {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 4px;
  }
  .lf-navlinks.lf-nav-open { display: flex; }
  .lf-navlinks > a, .lf-navlinks > .lf-navitem {
    border-top: 1px solid var(--lf-border);
  }
  .lf-navlinks > a {
    padding: 14px 2px;
  }
  .lf-navitem-top > a {
    padding: 14px 2px;
    flex: 1;
  }
  .lf-navitem-caret {
    pointer-events: auto;
    font-size: 15px;
    padding: 14px 10px;
    margin-left: auto;
    transition: transform .15s ease;
  }
  .lf-navitem.lf-nav-open .lf-navitem-caret { transform: rotate(180deg); }
  .lf-navdrop {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    min-width: 0;
    width: 100%;
    padding: 0 0 10px 14px;
  }
  .lf-navdrop::before { content: none; }
  .lf-navitem.lf-nav-open .lf-navdrop { display: block; }
  .lf-navdrop a { padding: 10px 0; white-space: normal; }
  .lf-navdrop-desc { max-width: none; padding: 4px 0 10px; }
  /* El encabezado de grupo ya abre al clic en cualquier ancho (ver la
     regla base más arriba) -- pero en celular el panel vuelve a ser un
     acordeón hacia abajo, no un flyout lateral (no cabe en una pantalla
     angosta). Pisa el position:absolute de la regla base. */
  .lf-navdrop-group-label { padding: 0 0 4px; }
  .lf-navdrop-group-caret { font-size: 13px; transition: transform .15s ease; }
  .lf-navdrop-group.lf-nav-open .lf-navdrop-group-caret { transform: rotate(90deg); }
  .lf-navdrop-sub {
    position: static;
    box-shadow: none;
    border: none;
    min-width: 0;
    padding: 0;
  }
  .lf-navdrop-sub a { padding-left: 14px; }
  .lf-subscribe { margin: 14px 2px; text-align: center; }
}

/* --- links "ver más" hacia páginas de detalle --- */
.lf-vermas {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--lf-red);
  text-decoration: none;
}
.lf-vermas:hover { text-decoration: underline; }

/* --- glosario --- */
.lf-glosario-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding: 18px var(--lf-pad-x);
  border-top: 1px solid var(--lf-ink);
  border-bottom: 1px solid var(--lf-border);
  background: var(--lf-cream);
}
.lf-glosario-nav a {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--lf-red);
  text-decoration: none;
}
.lf-glosario-nav a:hover { text-decoration: underline; }
.lf-glosario-lista { padding: 4px var(--lf-pad-x) 8px; }
.lf-glosario-term {
  padding: 18px 0;
  border-bottom: 1px solid var(--lf-border);
  max-width: 68ch;
}
.lf-glosario-lista .lf-glosario-term:last-child { border-bottom: none; }
.lf-glosario-term h3 {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--lf-ink);
}
.lf-glosario-term p {
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lf-body);
  margin: 0;
}
.lf-glosario-term p b { color: var(--lf-ink); }

/* --- desglose desplegable (clic para expandir) --- */
/* margin horizontal propio -- nunca va anidado dentro de .lf-col/.lf-hero
   (siempre suelto directo en .lf-page, ver leyes.qmd/parlamentarios.qmd),
   a diferencia de .lf-nota y compañía. */
.lf-desglose {
  margin: 16px var(--lf-pad-x) 24px;
  border-top: 1px dashed var(--lf-border);
  padding-top: 12px;
}
.lf-desglose summary {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lf-red);
  cursor: pointer;
  list-style: none;
}
.lf-desglose summary::-webkit-details-marker { display: none; }
.lf-desglose summary::marker { content: ""; }
.lf-desglose summary::after { content: " →"; }
.lf-desglose[open] summary::after { content: " ↑"; }
.lf-desglose[open] summary { margin-bottom: 4px; color: var(--lf-ink); }
.lf-desglose summary:hover { text-decoration: underline; }

/* --- proyectos de ley (leyes.qmd) --- */
/* padding propio -- nunca va anidada dentro de .lf-col/.lf-row-2col (ver
   leyes.qmd), a diferencia de .lf-rank-item y compañía. */
.lf-ley-lista { display: flex; flex-direction: column; gap: 0; padding: 0 var(--lf-pad-x); }
.lf-ley-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--lf-border);
}
.lf-ley-item:last-child { border-bottom: none; }
.lf-ley-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.lf-ley-badge {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 2px 7px;
}
.lf-ley-boletin {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  color: var(--lf-muted);
}
.lf-ley-titulo {
  font-family: "Merriweather", serif;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  margin-bottom: 5px;
}
.lf-ley-meta {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--lf-body);
  line-height: 1.5;
}
.lf-ley-meta b { color: var(--lf-ink); }
.lf-ley-vacio {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  color: var(--lf-muted);
  font-style: italic;
  padding: 10px 0;
}

/* --- votaciones de sala (leyes.qmd, sección "Votaciones recientes") --
   mismo ritmo visual que .lf-ley-item (badge + boletín arriba, título,
   línea de detalle) más una barra de 3 segmentos (a favor/en contra/
   abstenciones) y las cifras derivadas (participación, margen). --- */
.lf-voto-articulo {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--lf-body);
  line-height: 1.45;
  margin-bottom: 8px;
}
.lf-voto-barra { display: flex; height: 10px; background: var(--lf-cream); overflow: hidden; margin-bottom: 6px; }
.lf-voto-seg:first-child { border-right: 1px solid #fff; }
.lf-voto-seg:last-child { border-right: none; }
.lf-voto-favor { background: var(--lf-green); }
.lf-voto-contra { background: var(--lf-red); }
.lf-voto-abst { background: var(--lf-muted); }
.lf-voto-tallies {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--lf-muted);
}
.lf-voto-tallies b { color: var(--lf-ink); font-weight: 700; }
.lf-voto-tallies .lf-voto-num-favor b { color: var(--lf-green); }
.lf-voto-tallies .lf-voto-num-contra b { color: var(--lf-red); }
/* #perfil-comuna/#perfil-ministerio/#perfil-parlamentario quedan sueltos
   directo en .lf-page (sin el padding lateral --lf-pad-x que da .lf-hero):
   mientras muestran solo el texto ".lf-ley-vacio" ("elige un..."/"sin
   datos...") les hace falta ese margen -- pero en cuanto JS los llena con
   el perfil real (que arranca con .lf-row-2col, con su propio padding)
   agregarlo duplicaría el margen. :has() lo resuelve sin tocar el JS: se
   aplica solo mientras NO hay un .lf-row-2col adentro. */
#perfil-comuna:not(:has(.lf-row-2col)),
#perfil-ministerio:not(:has(.lf-row-2col)),
#perfil-parlamentario:not(:has(.lf-row-2col)) {
  padding: 0 var(--lf-pad-x);
}
.lf-ley-autores {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--lf-muted);
  margin-top: 6px;
}
.lf-ley-autor i { font-style: normal; color: var(--lf-muted); }
.lf-ley-autor-sinmatch { font-style: italic; }

/* --- filtros del seguidor legislativo (leyes.qmd) --- */
.lf-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  padding: 20px var(--lf-pad-x);
  background: var(--lf-cream);
  border-top: 1px solid var(--lf-ink);
  border-bottom: 1px solid var(--lf-ink);
}
.lf-filtro-campo { display: flex; flex-direction: column; gap: 5px; min-width: 170px; flex: 1 1 170px; }
.lf-filtro-campo label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lf-muted);
}
.lf-filtro-campo select {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  color: var(--lf-ink);
  background: #fff;
  border: 1px solid var(--lf-border);
  padding: 8px 10px;
}
.lf-filtro-limpiar {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--lf-red);
  background: none;
  border: none;
  border-bottom: 2px solid var(--lf-red);
  padding: 8px 0;
  cursor: pointer;
  height: fit-content;
}
.lf-filtro-limpiar:hover { color: var(--lf-ink); border-color: var(--lf-ink); }

/* --- nota metodológica --- */
.lf-nota {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--lf-muted);
  border-left: 3px solid var(--lf-border);
  padding-left: 12px;
  margin-top: 6px;
  line-height: 1.5;
  max-width: 840px;
}
.lf-nota a { color: var(--lf-muted); }

/* --- "qué cubre este observatorio", grilla de 9 frentes con numeración
   romana (portada) -- inspirada en la portada de fipeco.fr, adaptada a la
   grilla de líneas finas ya usada en el resto del sitio (lf-hooks-row,
   lf-stats-row) en vez de las tarjetas con sombra del original. Las tres
   sin link (lf-cover-card-pendiente) documentan honestamente lo que falta,
   mismo criterio que "Sobre lo que falta" en parlamentarios.qmd. --- */
.lf-cover-section { padding: 6px 0 28px; }
/* el título y el texto de intro necesitan el margen lateral --lf-pad-x que
   usa el resto del sitio, pero .lf-cover-grid NO -- su borde debe llegar
   de canto a canto igual que .lf-hooks-row/.lf-stats-row (la fila de
   preguntas-gancho y de indicadores de la portada), así que el padding va
   en estos dos selectores puntuales y no en .lf-cover-section completo. */
.lf-cover-section > .lf-section-title-lg { padding: 0 var(--lf-pad-x); }
.lf-cover-intro { max-width: 600px; margin: 8px 0 20px; padding: 0 var(--lf-pad-x); }
.lf-cover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--lf-ink);
  border-left: 1px solid var(--lf-ink);
}
.lf-cover-card {
  display: block;
  padding: 18px 20px;
  border-right: 1px solid var(--lf-ink);
  border-bottom: 1px solid var(--lf-ink);
  text-decoration: none;
  color: inherit;
  min-height: 138px;
}
.lf-cover-card:not(.lf-cover-card-pendiente):hover { background: var(--lf-cream); }
.lf-cover-card-pendiente { color: var(--lf-muted); }
.lf-cover-num {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--lf-red);
  margin-bottom: 8px;
}
.lf-cover-card-pendiente .lf-cover-num { color: var(--lf-muted); }
.lf-cover-title {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.35;
  margin-bottom: 6px;
  color: var(--lf-ink);
}
.lf-cover-card-pendiente .lf-cover-title { color: var(--lf-muted); }
.lf-cover-desc {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lf-body);
}
.lf-cover-card-pendiente .lf-cover-desc { color: var(--lf-muted); }
.lf-cover-tag {
  display: inline-block;
  margin-top: 10px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lf-muted);
  border: 1px dashed var(--lf-border);
  padding: 3px 8px;
}

/* --- mapa mundial de TLC (comercio_exterior.qmd) -- el SVG base no trae
   fill/stroke propio (ver mapa_tlc.py), todo el color sale de acá. Los
   países con acuerdo son un <path> o un <g> con class="lf-mapa-tlc" --
   la variante ".lf-mapa-tlc path" es la que de verdad pinta a los países
   de más de un polígono (islas, etc.), porque un color puesto directo en
   cada <path> le gana a la herencia CSS del <g> que lo envuelve. --- */
/* Achicado a pedido del usuario -- a lo ancho completo del sitio el mapa
   quedaba desproporcionadamente grande en pantallas anchas. */
.lf-mapa-mundo { width: 100%; max-width: 820px; height: auto; display: block; margin: 0 auto; }
.lf-mapa-mundo path,
.lf-mapa-mundo g { fill: var(--lf-cream); stroke: #fff; stroke-width: 0.5; }
.lf-mapa-mundo .lf-mapa-tlc,
.lf-mapa-mundo .lf-mapa-tlc path { fill: var(--lf-red); cursor: pointer; transition: fill 0.1s ease; }
.lf-mapa-mundo .lf-mapa-tlc:hover,
.lf-mapa-mundo .lf-mapa-tlc:hover path { fill: var(--lf-blue); }
/* País sin TLC vigente pero con inversión extranjera directa registrada
   (ver mapa_tlc.py, ISO_SOLO_IED) -- azul en vez de rojo para no
   implicar un acuerdo comercial que no existe. */
.lf-mapa-mundo .lf-mapa-ied,
.lf-mapa-mundo .lf-mapa-ied path { fill: var(--lf-blue); cursor: pointer; transition: fill 0.1s ease; }
.lf-mapa-mundo .lf-mapa-ied:hover,
.lf-mapa-mundo .lf-mapa-ied:hover path { fill: var(--lf-red); }
/* Tooltip flotante del mapa (ver comercio_exterior.js) -- position:fixed
   porque ::after de CSS puro no se puede posicionar de forma útil sobre
   geometría SVG (a diferencia de .lf-rank-item[data-tooltip], que sí es
   un <div> HTML normal). Mismo look que ese tooltip, para que se sienta
   igual pese a usar un mecanismo distinto por debajo. */
.lf-mapa-tooltip {
  position: fixed;
  z-index: 50;
  background: var(--lf-ink);
  color: #e5e7eb;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
  padding: 8px 11px;
  min-width: 200px;
  max-width: 280px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

/* --- mapa de las 16 regiones (macro_laboral_regional.qmd, ver
   mapa_regiones.py) -- coroplético: a diferencia del mapa mundial, acá
   TODAS las regiones tienen dato, así que el color sale 100% del
   style="fill:..." inline que arma mapa_regiones.py -- esta clase solo
   pone el stroke entre regiones, el hover y el tamaño. Chile es muy
   angosto y alargado (relación de aspecto ~1:6 en este mapa), así que se
   limita por ALTURA, no por ancho como el mapa mundial -- limitarlo por
   ancho lo dejaría absurdamente alto. */
.lf-mapa-regiones-layout { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 8px; }
.lf-mapa-regiones { height: 640px; width: auto; display: block; }
.lf-mapa-regiones path { stroke: #fff; stroke-width: 0.6; cursor: pointer; transition: opacity 0.1s ease; }
.lf-mapa-regiones path:hover { opacity: 0.7; }
/* Línea líder + punto + etiqueta (nombre y valor) por región -- ver
   generar_mapa_etiquetado() en mapa_regiones.py. El texto usa la unidad
   del propio viewBox (grados de longitud/latitud re-proyectados, no
   píxeles), por eso font-size sale inline desde Python en vez de un
   valor en px acá. */
.lf-mapa-regiones-etiquetas line { stroke: var(--lf-muted); stroke-width: 0.045; }
.lf-mapa-regiones-etiquetas circle { fill: #fff; stroke: var(--lf-ink); stroke-width: 0.07; }
.lf-mapa-regiones-etiquetas text { font-family: "Inter", sans-serif; fill: var(--lf-body); }
.lf-mapa-leyenda { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.lf-mapa-leyenda-barra {
  width: 100%;
  max-width: 180px;
  height: 10px;
  background: linear-gradient(to right, var(--lf-cream), var(--lf-red));
  border: 1px solid var(--lf-border);
}
.lf-mapa-leyenda-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 180px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: var(--lf-muted);
  font-variant-numeric: tabular-nums;
}

/* --- tabla de países con TLC + inversión, agrupada por región
   (comercio_exterior.qmd) -- una tabla de verdad, no una lista de <div>,
   porque a partir de ~5 columnas numéricas una lista deja de poder
   alinear nada y se vuelve ilegible. Ancha (7 columnas): scroll propio
   en vez de aplastar el sitio a lo ancho en pantallas chicas. */
.lf-tabla-scroll { overflow-x: auto; padding: 0 var(--lf-pad-x) 8px; }
/* Aviso de que la tabla se puede desplazar hacia el lado -- sin esto, en
   un celular la última columna simplemente se corta en el borde y no hay
   ninguna pista visual de que sigue hacia la derecha (el scroll interno
   funciona, pero nadie lo prueba si no sabe que existe). Solo se muestra
   en el breakpoint móvil -- en desktop la tabla completa entra sin scroll
   la mayoría de las veces. */
.lf-tabla-scroll-hint { display: none; }
.lf-tlc-tabla {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}
.lf-tlc-tabla th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--lf-muted);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--lf-ink);
  white-space: nowrap;
}
.lf-tlc-tabla td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--lf-border);
  white-space: nowrap;
  color: var(--lf-body);
}
.lf-tlc-tabla tbody:last-of-type tr:last-child td { border-bottom: none; }
.lf-tlc-tabla tr:hover td { background: var(--lf-cream); }
.lf-tlc-region-fila td {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--lf-ink);
  background: transparent;
  padding-top: 20px;
}
.lf-tlc-region-fila:first-child td { padding-top: 8px; }
.lf-tlc-region-fila:hover td { background: transparent; }
.lf-tlc-tabla td:first-child { font-weight: 600; color: var(--lf-ink); }
.lf-tlc-num { font-variant-numeric: tabular-nums; text-align: right; }
.lf-tlc-sininfo { color: var(--lf-muted); font-style: italic; }

/* --- footer --- */
.lf-footer {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  color: var(--lf-muted);
  text-align: center;
  padding: 20px var(--lf-pad-x);
  border-top: 1px solid var(--lf-border);
}

@media (max-width: 820px) {
  .lf-topbar { flex-direction: column; align-items: stretch; gap: 3px; }
  .lf-topbar-marquee { flex: none; }
  .lf-stats-row, .lf-stats-row-4, .lf-stats-row-5, .lf-row-2col, .lf-row-3col, .lf-hooks-row, .lf-cover-grid { grid-template-columns: 1fr; }
  .lf-stat-card, .lf-col, .lf-hook-card, .lf-cover-card { border-right: none; border-bottom: 1px solid var(--lf-ink); }
  /* El mapa etiquetado quedó más ancho que alto (~0.8:1, incluye la
     columna de etiquetas) -- limitarlo por altura como en desktop
     desbordaría el ancho de un celular, así que acá se limita por
     ancho en su lugar. */
  .lf-mapa-regiones { height: auto; width: 100%; max-width: 300px; }
  .lf-tabla-scroll { padding: 0 20px 8px; }
  .lf-tabla-scroll-hint {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    color: var(--lf-muted);
    font-style: italic;
    padding: 0 20px 6px;
  }
}

/* Tablet (821-1000px): 4 o 5 tarjetas por fila no caben (cada una reserva
   ~140px para el panel rojo + su pie) y empujaban el ancho de toda la
   página -- se reparten en 2 y 3 columnas. Los bordes: la línea de abajo
   solo en las tarjetas que no están en la última fila. */
@media (min-width: 821px) and (max-width: 1000px) {
  .lf-stats-row-4 { grid-template-columns: repeat(2, 1fr); }
  .lf-stats-row-5 { grid-template-columns: repeat(3, 1fr); }
  .lf-stats-row-4 > .lf-stat-card:nth-child(-n+2),
  .lf-stats-row-4 > .lf-stat-card-link:nth-child(-n+2) .lf-stat-card,
  .lf-stats-row-5 > .lf-stat-card:nth-child(-n+3),
  .lf-stats-row-5 > .lf-stat-card-link:nth-child(-n+3) .lf-stat-card { border-bottom: 1px solid var(--lf-ink); }
  .lf-stats-row-4 > .lf-stat-card:nth-child(2n),
  .lf-stats-row-4 > .lf-stat-card-link:nth-child(2n) .lf-stat-card,
  .lf-stats-row-5 > .lf-stat-card:nth-child(3n),
  .lf-stats-row-5 > .lf-stat-card-link:nth-child(3n) .lf-stat-card { border-right: none; }
}