/* INSOR Infografías — estilos aislados bajo .iinf (Salient trae selectores como `.row .col img`
 * que ganan a reglas de dos clases; por eso los elementos van sobrecalificados). Paleta = build.py. */
.iinf {
  --iinf-blue: #0b4a9b; --iinf-red: #b3383c; --iinf-ink: #1d2340; --iinf-card: #fff4ef; --iinf-ribbon: #9a2143;
  font-family: 'Jost', 'Futura', 'Segoe UI', sans-serif; color: var(--iinf-ink); font-size: 15px; line-height: 1.35;
  max-width: 940px; margin: 0 auto;
}
.iinf *, .iinf *::before, .iinf *::after { box-sizing: border-box }
.iinf .iinf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }

/* ---------- barra de filtros */
.iinf .iinf-bar { position: sticky; top: var(--iinf-sticky, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 18px; background: rgba(255,255,255,.96); border-radius: 10px; box-shadow: 0 3px 12px rgba(29,35,64,.12) }
.iinf .iinf-filtros { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 }
.iinf button.iinf-chip, .iinf button.iinf-print { font: inherit; cursor: pointer; border-radius: 999px; margin: 0; text-transform: none; letter-spacing: 0;
  line-height: 1.15; box-shadow: none; transition: background-color .15s, color .15s, border-color .15s }
.iinf button.iinf-chip { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 14px; background: #fff; color: var(--iinf-blue);
  border: 2px solid var(--iinf-blue); font-weight: 600; font-size: 14px }
.iinf button.iinf-chip .iinf-chip-t { font-size: 11.5px; font-weight: 500; opacity: .8 }
.iinf button.iinf-chip:hover { background: #e8eefa }
.iinf button.iinf-chip[hidden] { display: none }
.iinf button.iinf-chip[aria-pressed="true"] { background: var(--iinf-blue); color: #fff }
.iinf button.iinf-print { padding: 9px 16px; background: var(--iinf-red); color: #fff; border: 2px solid var(--iinf-red); font-weight: 600; font-size: 14px }
.iinf button.iinf-print:hover { background: #8f2b2f; border-color: #8f2b2f }
.iinf button.iinf-chip:focus-visible, .iinf button.iinf-print:focus-visible, .iinf button.iinf-go:focus-visible { outline: 3px solid #f7a072; outline-offset: 2px }

/* ---------- lienzo */
.iinf .iinf-body { background: #f4f1ec url(../img/paper.webp) center/cover; border-radius: 10px; padding: 26px 26px 10px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.18) }
.iinf .iinf-body > * { animation: iinf-in .35s ease-out both }
@keyframes iinf-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.iinf .iinf-loading { padding: 60px 0; text-align: center; color: var(--iinf-blue); font-weight: 600 }
.iinf .iinf-head { margin-bottom: 18px }
.iinf .iinf-body a.iinf-pdf { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; padding: 10px 18px;
  min-height: 44px; border-radius: 999px; background: var(--iinf-red); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none;
  box-shadow: 0 2px 6px rgba(29,35,64,.18) }
.iinf .iinf-body a.iinf-pdf:hover { background: #8f2b2f; color: #fff }
.iinf .iinf-body a.iinf-pdf:focus-visible { outline: 3px solid #f7a072; outline-offset: 3px }
.iinf .iinf-body a.iinf-pdf .iinf-pdf-peso { font-weight: 400; font-size: 12.5px; opacity: .92 }
@media print { .iinf .iinf-body a.iinf-pdf { display: none } }
.iinf .iinf-body h2.iinf-title { font-family: inherit; font-weight: 700; font-size: 34px; line-height: 1.12; text-transform: none; letter-spacing: -.3px; margin: 0 0 8px; padding: 0 }
.iinf .iinf-title .t1 { color: var(--iinf-blue); display: block } .iinf .iinf-title .t2 { color: var(--iinf-red); display: block }
.iinf .iinf-body p.iinf-src { font-size: 11px; color: var(--iinf-blue); margin: 0; padding: 0 }
.iinf .iinf-body p.iinf-corte { font-size: 15px; font-weight: 700; color: var(--iinf-blue); margin: 4px 0 2px; padding: 0 }

.iinf .iinf-ribbon { position: relative; height: 34px; margin: 10px 0 34px }
.iinf .iinf-ribbon::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--iinf-ribbon) }
.iinf .iinf-body .iinf-ribbon h2 { position: absolute; left: 0; top: 0; height: 34px; width: 70%; max-width: 100%; background: var(--iinf-ribbon);
  border-radius: 0 9px 0 0; color: #fff; font-family: inherit; font-weight: 600; font-size: 21px; line-height: 34px; text-transform: none; letter-spacing: 0; padding: 0 0 0 22px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.iinf .iinf-ribbon h2::before { content: ''; position: absolute; left: 0; top: 0; border-left: 13px solid #f7a072;
  border-top: 17px solid transparent; border-bottom: 17px solid transparent }

.iinf .iinf-card { position: relative; background: var(--iinf-card); border-radius: 6px; box-shadow: 5px 6px 5px rgba(95,105,170,.55);
  padding: 52px 18px 16px; margin: 0 0 30px; min-width: 0 }
.iinf .iinf-body h3.iinf-brush { position: absolute; left: -6px; top: -14px; height: 50px; min-width: 300px; max-width: calc(100% + 6px); margin: 0;
  padding: 0 60px 0 22px; background: url(../img/brush.webp) left center/100% 100% no-repeat; color: #fff; font-weight: 600; font-size: 21px; line-height: 50px; text-transform: none;
  font-family: inherit; letter-spacing: 1.3px; text-shadow: 1px 1px 2px rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.iinf .small h3.iinf-brush { height: 34px; line-height: 34px; font-size: 15.5px; top: -10px; min-width: 260px }
.iinf .iinf-card.small { padding-top: 36px; padding-bottom: 8px }
.iinf .iinf-row2 { display: flex; gap: 22px }
.iinf .iinf-row2 > .half { flex: 1 1 0 } .iinf .iinf-row2 > .w63 { flex: 0 0 54% } .iinf .iinf-row2 > .w37 { flex: 1 1 0 }
.iinf .iinf-row1c { display: flex; justify-content: center } .iinf .iinf-row1c > .iinf-card { width: 49% }
.iinf .iinf-card.donutcard { display: flex; flex-direction: column; justify-content: center }
.iinf .dc .sx { display: inline-flex; align-items: flex-end; gap: 4px }
.iinf .iinf-body img.iinf-ic:not([srcset]) { display: block; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none }
.iinf .iinf-body p.iinf-foot { font-size: 11px; color: #4a5070; margin: 0 0 16px }

/* ---------- ubicación geográfica */
.iinf .iinf-geo { display: flex; gap: 14px }
.iinf .mapcol { width: 340px; flex: none } .iinf .tabcol { flex: 1; min-width: 0 }
.iinf .mapwrap { position: relative }
.iinf svg.iinf-map { display: block; width: 100%; max-width: 320px; height: auto; overflow: visible }
.iinf svg.iinf-map path[data-code] { transition: opacity .15s }
.iinf svg.iinf-map path[data-code]:hover { opacity: .78 }
.iinf svg.iinf-map path.go { cursor: pointer }
.iinf svg.iinf-map .mi { font-size: 8px; fill: #4a5070 }
.iinf .iinf-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--iinf-ink); color: #fff; font-size: 12.5px; font-weight: 500;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25) }
.iinf .iinf-tip[hidden] { display: none }
.iinf .iinf-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 10.5px; margin: 0 0 0 14px; color: #3a4060 }
.iinf .iinf-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border-radius: 2px }
.iinf .iinf-body p.iinf-note { font-size: 10.5px; color: #3c4aa0; margin: 4px 0 0 14px; padding: 0; line-height: 1.25 }
.iinf .iinf-body table.iinf-dt { width: 100%; border-collapse: collapse; border: 0; margin: -30px 0 0; font-size: 13px; background: none }
.iinf .iinf-dt thead th { background: var(--iinf-blue); color: #fff; font-weight: 600; font-size: 13px; padding: 5px 6px; line-height: 1.05;
  border: 0; border-right: 1px solid #fff; text-align: center }
.iinf .iinf-dt thead th:first-child { font-size: 15px }
.iinf .iinf-dt tbody th, .iinf .iinf-dt tbody td, .iinf .iinf-dt tfoot th, .iinf .iinf-dt tfoot td { padding: 4px 7px; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.7); border-right: 1px solid var(--iinf-ink); background: inherit; color: inherit; font-weight: 400; text-align: left }
.iinf .iinf-dt td { text-align: center !important; width: 88px } .iinf .iinf-dt tr > :last-child { border-right: 0; width: 62px }
.iinf .iinf-dt tfoot th, .iinf .iinf-dt tfoot td { background: #fff; color: var(--iinf-ink); font-weight: 600; border-bottom: 1px solid var(--iinf-ink) }
.iinf button.iinf-go { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-underline-offset: 2px; letter-spacing: 0; text-transform: none; box-shadow: none; line-height: inherit }
.iinf .iinf-kpi { margin-top: 18px; display: flex; gap: 12px; align-items: center; background: #fff; border-left: 5px solid var(--iinf-red); padding: 10px 12px }
.iinf .iinf-kpi .kn { font-size: 30px; font-weight: 700; color: var(--iinf-red); line-height: 1 }
.iinf .iinf-kpi .kt { font-size: 12.5px; line-height: 1.3 } .iinf .iinf-kpi .kt b { color: var(--iinf-blue) }

/* ---------- filas de iconos (etnia, área, género) */
.iinf .iinf-items { display: flex; justify-content: space-evenly; text-align: center }
.iinf .iinf-items .it { flex: 1 1 0; max-width: 170px; display: flex; flex-direction: column; align-items: center; min-width: 0 }
.iinf .iinf-items .il { font-size: 13.5px; line-height: 1.2; height: 70px; display: flex; align-items: flex-end; justify-content: center; padding: 0 2px }
.iinf .iinf-items .ii { height: 130px; display: flex; justify-content: center; margin: 8px 0 10px }
.iinf .iinf-items .iv, .iinf .iinf-items .ip, .iinf .ag .iv, .iinf .ag .ip { font-size: 15px; color: #1f2f7a; font-weight: 600; line-height: 1.35 }
.iinf .etnia .il { height: 62px } .iinf .etnia .ii { height: 116px; margin: 6px 0 } .iinf .etnia { margin-top: -8px }
.iinf .area .il { height: 44px } .iinf .area .ii { height: 70px; margin: 10px 0 14px } .iinf .area .iv, .iinf .area .ip { font-weight: 400 }
.iinf .genero .il { height: 20px } .iinf .genero .ii { height: 84px; margin: 8px 0 } .iinf .genero { margin-top: -10px }
.iinf .genero .iv, .iinf .genero .ip { font-weight: 400; color: var(--iinf-ink) }

/* ---------- sexo */
.iinf .iinf-sexo { display: flex; align-items: flex-end; justify-content: space-between; height: 232px; margin-top: -14px }
.iinf .iinf-sexo .sf, .iinf .iinf-sexo .sm { position: relative; width: 90px; text-align: center; display: flex; justify-content: center }
.iinf .iinf-sexo .sl { font-size: 12.5px; line-height: 1.3; position: absolute; bottom: 0; background: rgba(255,244,239,.75) }
.iinf .iinf-sexo .sl span { color: var(--iinf-ink) } .iinf .iinf-sexo .sl b { font-weight: 500 }
.iinf .iinf-sexo .sf .sl { left: -6px } .iinf .iinf-sexo .sm .sl { right: -6px }
.iinf .iinf-sexo .sf img.iinf-ic, .iinf .iinf-sexo .sm img.iinf-ic { margin-bottom: 52px }
.iinf .iinf-sexo .sc { position: relative; width: 150px; height: 232px; flex: none }
.iinf .iinf-sexo .sc svg.iinf-donut { position: absolute; bottom: 0; left: 0 }
.iinf .iinf-sexo .stops { position: absolute; top: 0; left: -40px; right: -40px; display: flex; justify-content: space-between; z-index: 2 }
.iinf .iinf-sexo .st { font-size: 12px; text-align: center; font-weight: 600; line-height: 1.3 } .iinf .iinf-sexo .stn { color: var(--iinf-ink) }

/* ---------- edad */
.iinf .iinf-ages-scroll { overflow-x: auto }
.iinf .iinf-ages { display: flex; justify-content: space-evenly; padding: 0 4px }
.iinf .ag { width: 66px; text-align: center; display: flex; flex-direction: column; align-items: center }
.iinf .ag .agl { font-size: 12.5px; line-height: 1.2; height: 48px; display: flex; align-items: flex-end }
.iinf .ag .agc { position: relative; width: 44px; height: 150px; background: #fff; margin: 6px 0 8px; display: flex; justify-content: center; align-items: flex-end }
.iinf .ag .agc img.iinf-ic { position: relative; z-index: 1; margin-bottom: 1px }
.iinf .ag .agb { position: absolute; left: 0; right: 0; bottom: 0; background: #ec8a43; transform-origin: bottom; animation: iinf-up .6s ease-out both }
.iinf .ag .iv, .iinf .ag .ip { font-size: 13.5px; font-weight: 400; color: var(--iinf-ink) }
@keyframes iinf-up { from { transform: scaleY(0) } to { transform: none } }

/* ---------- barras */
.iinf .iinf-bars { padding: 6px 4px 0 }
.iinf .iinf-brow { display: flex; align-items: center; gap: 12px; padding: 2px 0 }
.iinf .iinf-brow .bl { text-align: right; font-size: 13px; line-height: 1.12; flex: 0 0 auto }
.iinf .iinf-brow .bt { flex: 1; position: relative; height: 22px; background: #fff; min-width: 60px }
.iinf .iinf-brow .bf { height: 100%; position: relative; transform-origin: left; animation: iinf-grow .6s ease-out both }
.iinf .iinf-brow .bt b { font-size: 12.5px; font-weight: 600; position: absolute; top: 3px; white-space: nowrap; line-height: 1.3 }
.iinf .iinf-brow .bt b.in { right: 5px; color: #fff }
.iinf .iinf-brow .bv { text-align: right; font-size: 13px; font-weight: 700; flex: 0 0 auto }
.iinf .small .iinf-brow .bl { font-size: 11.5px }
.iinf .small .iinf-brow .bt { height: 20px } .iinf .small .iinf-brow .bt b { top: 2px; font-size: 11.5px } .iinf .small .iinf-brow .bv { font-size: 12px }
@keyframes iinf-grow { from { transform: scaleX(0) } to { transform: none } }

/* ---------- donas */
.iinf svg.iinf-donut { display: block; margin: 0 auto; overflow: visible; max-width: 100%; height: auto }
.iinf svg.iinf-donut .dl { font-size: 13px; font-weight: 600 }
.iinf svg.iinf-donut .dv { font-size: 12.5px; font-weight: 700; fill: #fff }
.iinf svg.iinf-donut .dp { font-size: 13px; font-weight: 600 }
.iinf svg.iinf-donut text { font-family: 'Jost', 'Futura', 'Segoe UI', sans-serif }
.iinf .dc { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center }

@media (prefers-reduced-motion: reduce) {
  .iinf .iinf-body > *, .iinf .iinf-brow .bf, .iinf .ag .agb { animation: none }
}

/* ---------- tableta y celular */
@media (max-width: 860px) {
  .iinf .iinf-geo { flex-direction: column; align-items: center }
  .iinf .mapcol { width: 100%; max-width: 340px }
  .iinf .tabcol { width: 100% }
  .iinf .iinf-body table.iinf-dt { margin-top: 10px }
  .iinf .iinf-row2 { flex-direction: column; gap: 0 }
  .iinf .iinf-row2 > .w63, .iinf .iinf-row2 > .half, .iinf .iinf-row2 > .w37 { flex: none }
  .iinf .iinf-row1c > .iinf-card { width: 100% }
  .iinf .etnia { flex-wrap: wrap } .iinf .etnia .it { flex: 0 0 25%; margin-bottom: 14px }
  .iinf .iinf-sexo { max-width: 380px; margin-left: auto; margin-right: auto }
}
@media (max-width: 600px) {
  .iinf .iinf-bar { position: static }
  .iinf .iinf-body { padding: 18px 12px 6px }
  .iinf .iinf-body h2.iinf-title { font-size: 25px }
  .iinf .iinf-body .iinf-ribbon h2 { width: 100%; font-size: 17px }
  .iinf .iinf-body h3.iinf-brush, .iinf .small h3.iinf-brush { min-width: 0; font-size: 17px; letter-spacing: .5px; padding-right: 40px }
  .iinf .iinf-card { padding-left: 10px; padding-right: 10px }
  .iinf .iinf-brow .bl { flex-basis: 38% !important; font-size: 12px }
  .iinf .iinf-brow .bv { flex-basis: auto !important; min-width: 40px }
  /* riel angosto: el % que iba dentro de una barra mediana se escribe a la derecha de la barra */
  .iinf .iinf-brow .bf.tight b.in { right: auto; left: calc(100% + 5px); color: var(--c) }
  .iinf .etnia .it { flex-basis: 50% }
  .iinf .genero, .iinf .area { flex-wrap: wrap } .iinf .genero .it, .iinf .area .it { flex: 0 0 33.33%; margin-bottom: 12px }
  .iinf .area .it { flex-basis: 50% }
}

/* ---------- impresión: solo la infografía */
@media print {
  html.iinf-printing body * { visibility: hidden }
  html.iinf-printing .iinf, html.iinf-printing .iinf * { visibility: visible }
  html.iinf-printing .iinf { position: absolute; left: 0; top: 0; width: 100%; max-width: none }
  html.iinf-printing .iinf .iinf-bar { display: none }
  .iinf .iinf-body { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .iinf .iinf-card, .iinf .iinf-row2, .iinf .iinf-row1c { break-inside: avoid }
  .iinf .iinf-ribbon { break-after: avoid }
  .iinf .iinf-body > *, .iinf .iinf-brow .bf, .iinf .ag .agb { animation: none }
}