/* Recursos · Evidencia (/recursos/evidencia/ y sus páginas hermanas, 30-10-2026): el mapa de prevalencia por país y la
   grilla de gráficos para compartir, traídos de fplc.cl/evidencia/. Lo carga org.py solo en esas páginas. Usa los
   tokens de base.css; los seis azules del mapa son la escala de fplc.cl y no tienen token. Hoja de Claude Code:
   Codex puede rehacerla con el diseño. */

.mapa { margin: 1.4rem 0 .8rem; border: 1px solid var(--color-linea); border-radius: var(--radio-control, 6px); padding: 1rem; background: var(--color-superficie); }
.mapa-controles { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.mapa-sexo { display: inline-flex; border: 1px solid var(--color-petroleo); border-radius: var(--radio-control, 6px); overflow: hidden; }
.mapa-sexo button { font: 600 .95rem/1 var(--sans); min-height: 44px; padding: .6rem 1rem; border: 0; background: var(--color-superficie); color: var(--color-petroleo); cursor: pointer; }
.mapa-sexo button[aria-pressed="true"] { background: var(--color-petroleo); color: #fff; }
.mapa-buscar { font-size: .95rem; color: var(--color-texto-secundario); display: flex; gap: .5rem; align-items: center; }
.mapa-buscar select { font: 400 1rem var(--sans); min-height: 44px; padding: .45rem .5rem; border: 1px solid var(--color-borde-control, var(--color-linea)); border-radius: var(--radio-control, 6px); max-width: 15rem; color: var(--color-texto); background: #fff; }
.mapa-lienzo { position: relative; overflow-x: auto; }
.mapa-lienzo svg { width: 100%; min-width: 560px; height: auto; display: block; }
.mapa-lienzo path { stroke: #fff; stroke-width: .5; cursor: pointer; transition: opacity .15s; }
.mapa-lienzo path:hover { opacity: .8; }
.mapa-lienzo path.sel { stroke: var(--color-texto); stroke-width: 1.6; }
.mapa-tip { position: absolute; pointer-events: none; background: var(--color-texto); color: #fff; font-size: .85rem; padding: .3rem .5rem; border-radius: 4px; white-space: nowrap; transform: translate(-50%, -130%); }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .85rem; color: var(--color-texto-secundario); margin: .8rem 0; }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.mapa-leyenda i { display: inline-block; width: 1.1rem; height: .8rem; border-radius: 2px; border: 1px solid var(--color-linea); }
.mapa-leyenda .b0 { background: #dde8f1; } .mapa-leyenda .b1 { background: #b9d0e3; } .mapa-leyenda .b2 { background: #8db3d1; }
.mapa-leyenda .b3 { background: #5f92ba; } .mapa-leyenda .b4 { background: #33709f; } .mapa-leyenda .b5 { background: #1b4f75; }
.mapa-leyenda .nd { background: #eeeeec; }
.mapa-ficha { background: var(--color-fondo); border-radius: var(--radio-control, 6px); padding: 1rem 1.1rem; min-height: 5.5rem; }
.mapa-ficha h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.mapa-ficha p { margin: 0 0 .3rem; font-size: 1rem; }
.mapa-ficha .cifra { font-size: 1.5rem; font-weight: 700; color: var(--color-petroleo); }
.mapa-ficha-vacia { color: var(--color-texto-secundario); }
.nota-fuente { font-size: .9rem; color: var(--color-texto-secundario); }

/* Las referencias son enlaces largos con cursivas dentro: con el inline-flex general de .diseno-codex a, cada cursiva
   caía en una columna aparte. Dentro del texto van en línea, como cualquier enlace de un párrafo. */
.diseno-codex .org-seccion :is(p, li, td) a:not(.boton):not(.descargar) { display: inline; min-width: 0; min-height: 0; }

.org-graficos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.grafico-img { margin: 0; }
.grafico-img img { width: 100%; height: auto; display: block; border: 1px solid var(--color-linea); border-radius: var(--radio-control, 6px); }
.grafico-img figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-top: .6rem; font-size: .95rem; line-height: 1.4; }
.grafico-img .descargar { white-space: nowrap; font-weight: 600; }