/* ================================================================== */
/* Atlas Studio V6 — tipos de mapa, motor ráster y cartografía fina    */
/* ================================================================== */
.type-gallery { display: grid; gap: 4px; }
.type-group-title { display: block; margin: 10px 0 5px; color: var(--muted-2); font: 700 9px Manrope, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.type-group-title:first-child { margin-top: 0; }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.type-card { min-width: 0; padding: 6px 4px 7px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: #c3d3da; border-radius: 10px; display: grid; justify-items: center; gap: 5px; cursor: pointer; font-size: 10.5px; font-weight: 700; transition: .18s ease; }
.type-card:hover { border-color: var(--line-strong); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.type-card.active { color: #fff; border-color: rgba(73,214,197,.6); background: rgba(73,214,197,.1); box-shadow: 0 0 0 1px rgba(73,214,197,.25), 0 8px 20px rgba(0,0,0,.25); }
.type-thumb { width: 100%; height: 34px; border-radius: 7px; display: grid; place-items: center; color: rgba(255,255,255,.95); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.type-thumb svg { width: 17px; height: 17px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.type-political { background: linear-gradient(135deg,#f6c1b1 0 33%,#c9dcef 33% 66%,#d9e7b0 66%); }
.type-physical { background: linear-gradient(135deg,#2c68a8 0%,#86c2e6 30%,#6ba56d 42%,#e7d99b 62%,#b27347 82%,#fff 100%); }
.type-relief { background: radial-gradient(circle at 30% 30%,#fff 0,#e6e0d6 30%,#8c8a88 75%,#5b5e66); }
.type-topographic { background: repeating-radial-gradient(circle at 60% 60%,#f3ecd9 0 5px,#b98f5d 5px 6px); }
.type-hypsometric { background: linear-gradient(90deg,#5a9a62 0 20%,#c5d38b 20% 40%,#ecdc9a 40% 60%,#d49b5b 60% 80%,#99706a 80%); }
.type-bathymetric { background: linear-gradient(180deg,#c3e7f6,#4a95cc 45%,#0b2248); }
.type-geological { background: linear-gradient(135deg,#f2a3b5 0 25%,#a6d67c 25% 50%,#77b8e0 50% 75%,#f7d66a 75%); }
.type-seismic { background: radial-gradient(circle at 40% 55%,#ff5b4a 0 12%,rgba(255,91,74,.2) 13% 30%,transparent 31%),#243038; }
.type-hydrographic { background: linear-gradient(160deg,#dfe7ea,#b9cfd8 60%,#65b8e0); }
.type-climatic { background: linear-gradient(180deg,#9ec3ef,#9fd38b 35%,#f6cf6a 65%,#d9543a); }
.type-meteorological { background: linear-gradient(135deg,#3b6fb6,#62b6c8 40%,#f0b44b 75%,#d9543a); }
.type-ecosystems { background: linear-gradient(135deg,#0b6e2e 0 30%,#79b95b 30% 55%,#e6d17c 55% 80%,#f5f0e6 80%); }
.type-biogeographic { background: linear-gradient(135deg,#f3e5b6,#9bca5b 45%,#1f7a3a); }
.type-population { background: radial-gradient(circle at 60% 40%,#fff6a8 0 8%,#f28e2b 9% 22%,transparent 23%),#1f2a33; }
.type-demographic { background: linear-gradient(90deg,#fff2bd 0 25%,#f47f4b 25% 50%,#cb3f63 50% 75%,#692d67 75%); }
.type-satellite { background: linear-gradient(135deg,#1c3b57,#3b6b3a 45%,#8a7b55 70%,#e8e2d0); }
.type-globe { background: radial-gradient(circle at 38% 35%,#8fd3ff 0,#2c68a8 45%,#0a2146 70%,#02060d 72%); }
.relief-options { margin-top: 4px; padding-top: 2px; }
.relief-options[hidden], #satelliteOptions[hidden] { display: none; }

#mapSvg { touch-action: none; }
.sphere-outline { fill: none; stroke: rgba(160, 210, 228, .32); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.focus-mask { fill: rgba(4, 13, 21, .52); pointer-events: none; }
svg[data-tone="light"] .focus-mask { fill: rgba(6, 18, 28, .5); }
svg[data-tone="light"] .graticule { stroke: rgba(40, 60, 80, .16); }
.header-card { fill: url(#headerFade); stroke: rgba(160, 210, 228, .16); stroke-width: 1; }
#svgMapTitle { font-size: 27px; }
.map-credit { fill: rgba(170, 196, 208, .75); font-size: 8.5px; paint-order: stroke; stroke: rgba(4, 12, 20, .8); stroke-width: 2.5px; }

.region.outline { transition: none; }
.region.outline:hover { fill-opacity: .12 !important; fill: #fff !important; filter: none; }
.region.outline.selected { stroke: #ffd15d !important; stroke-width: 2.4 !important; fill-opacity: .1 !important; fill: #ffd15d !important; filter: drop-shadow(0 0 6px rgba(255, 209, 93, .7)); }

/* Curvas de nivel */
.contours path.contour { fill: none; stroke: #8a5a2e; stroke-opacity: .62; stroke-width: .6; vector-effect: non-scaling-stroke; pointer-events: none; }
.contours path.contour.index { stroke: #6b3d17; stroke-opacity: .9; stroke-width: 1.15; }
.contours path.contour.isobath { stroke: #1f5f9a; stroke-opacity: .5; }
.contours path.contour.isobath.index { stroke: #0f3c6e; stroke-opacity: .75; }
.contour-label { fill: #6a3d18; font: 700 8px "DM Sans", sans-serif; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(246, 240, 225, .95); stroke-width: 2.6px; stroke-linejoin: round; pointer-events: none; }
.contour-label.isobath { fill: #0f3c6e; stroke: rgba(220, 238, 248, .95); }

/* Hidrografía resaltada */
svg.hydro-emphasis .physical-river { stroke: #1d8fd8; stroke-opacity: 1; stroke-width: 1.6; }
svg.hydro-emphasis .physical-river.rank-0, svg.hydro-emphasis .physical-river.rank-1 { stroke-width: 2.6; }
svg.hydro-emphasis .physical-river.rank-2, svg.hydro-emphasis .physical-river.rank-3 { stroke-width: 2; }
svg.hydro-emphasis .physical-lake { fill: #3aa6e6; stroke: #0f6fae; }
svg.hydro-emphasis .local-line.river { stroke: #0f7cc6; stroke-width: 2.4; filter: none; }

/* Tono claro: textos oscuros con halo blanco sobre fondos ráster claros */
svg[data-tone="light"] .physical-river { stroke: #2a8fd0; stroke-opacity: .9; }
svg[data-tone="light"] .physical-lake { fill: #6cc0ec; stroke: #2a8fd0; }
svg[data-tone="light"] .physical-name.water-name { fill: #0b5fa0; stroke: rgba(245, 250, 252, .92); }
svg[data-tone="light"] .physical-name { fill: #5a3517; stroke: rgba(250, 246, 236, .9); }
svg[data-tone="light"] .place-label, svg[data-tone="light"] .physical-label { fill: #1b242b; stroke: rgba(255, 255, 255, .92); }
svg[data-tone="light"] .map-label { fill: #20303a; stroke: rgba(255, 255, 255, .9); }
svg[data-tone="light"] .place-halo { fill: rgba(255,255,255,.75); stroke: rgba(20,30,40,.55); }
svg[data-tone="light"] .place.capital .place-dot { fill: #d8344e; stroke: #fff; }
svg[data-tone="light"] .place.city .place-dot { fill: #1b242b; }
svg[data-tone="light"] .local-line.range { stroke: #8a4b1c; filter: none; }
svg[data-tone="light"] .landform { fill-opacity: .35; }
svg.on-imagery .place-label { fill: #fff; stroke: rgba(0,0,0,.85); }
svg.on-imagery .region.outline { stroke: rgba(255, 236, 160, .78) !important; }

/* Leyendas */
.legend-card { fill: rgba(5, 18, 29, .84); stroke: rgba(160, 210, 228, .2); stroke-width: 1; }
.legend-title { fill: #cfe2ea; font: 800 9.5px Manrope, sans-serif; letter-spacing: .1em; }
.legend-value { fill: #c6d6dd; font: 500 9.5px "DM Sans", sans-serif; }
.legend-note { fill: #8fa8b5; font: italic 500 9px "DM Sans", sans-serif; }
.legend-swatch { stroke: rgba(255,255,255,.35); stroke-width: .6; }
.legend-bar { stroke: rgba(255,255,255,.3); stroke-width: .6; }

/* Estado del motor ráster */
.raster-status { position: absolute; left: 50%; top: 16px; transform: translate(-50%, -8px); z-index: 7; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(73,214,197,.28); background: rgba(5,20,31,.86); backdrop-filter: blur(10px); color: #cfe1e7; font-size: 11px; opacity: 0; pointer-events: none; transition: .2s ease; }
.raster-status.show { opacity: 1; transform: translate(-50%, 0); }
.raster-status.error { border-color: rgba(255,123,123,.5); color: #ffc7c7; }
.mini-spinner { width: 12px; height: 12px; border: 2px solid rgba(73,214,197,.25); border-top-color: var(--aqua); border-radius: 50%; animation: spin .8s linear infinite; }
.active-layers span.primary { border-color: rgba(73,214,197,.5); color: #fff; background: rgba(8, 48, 52, .82); }

.selected-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.04); font-size: 11px; color: var(--muted); }
.selected-meta strong { color: var(--gold); font: 800 13px Manrope, sans-serif; }
.toast.error svg { color: var(--danger); }
.export-menu { width: 250px; }

@media (max-width: 760px) {
  .raster-status { top: 8px; font-size: 10px; }
}

/* ── Nomenclátor y nombres de ríos (convenciones cartográficas) ─────────── */
#gazetteerLayer .gaz { cursor: help; }
.gaz-label { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 10px; paint-order: stroke; stroke: rgba(5,18,29,.9); stroke-width: 3px; stroke-linejoin: round; fill: #f3ead6; font-size: 11.5px; }
.gaz-elev { font-size: 9.5px; font-weight: 600; fill: #ffd98a; }
.gaz-symbol { fill: #f7ecd2; stroke: #5c3a1c; stroke-width: 1.1px; }
.gaz-volcano .gaz-symbol { fill: #ef5b43; stroke: #fff2e6; }
.gaz-volcano .gaz-label { fill: #ffd2c4; }
.gaz-waterfall .gaz-symbol, .gaz-cape .gaz-symbol { fill: #7fd6ff; stroke: #0b3a55; }
.gaz-range .gaz-label, .gaz-paramo .gaz-label { font-family: Manrope, sans-serif; font-weight: 800; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; fill: #f0cf9a; font-size: 10.5px; }
.gaz-paramo .gaz-label { fill: #bfe3b0; letter-spacing: .12em; font-size: 8.5px; }
.gaz-region .gaz-label, .gaz-plain .gaz-label, .gaz-plateau .gaz-label, .gaz-desert .gaz-label, .gaz-peninsula .gaz-label { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; fill: rgba(250,240,215,.8); font-size: 11px; }
.gaz-region.gaz-rank-1 .gaz-label { font-size: 15px; letter-spacing: .45em; fill: rgba(250,240,215,.62); }
.gaz-lake .gaz-label, .gaz-reservoir .gaz-label, .gaz-waterfall .gaz-label { font-style: italic; fill: #a8e6ff; font-weight: 600; }
.gaz-sea .gaz-label, .gaz-ocean .gaz-label, .gaz-gulf .gaz-label, .gaz-strait .gaz-label, .gaz-marine .gaz-label { font-style: italic; font-weight: 600; fill: #9fdcff; letter-spacing: .18em; }
.gaz-ocean .gaz-label { font-size: 16px; letter-spacing: .5em; text-transform: uppercase; fill: rgba(170,222,255,.8); }
.gaz-sea .gaz-label { font-size: 13px; letter-spacing: .35em; text-transform: uppercase; fill: rgba(170,222,255,.85); }
.gaz-island .gaz-label { font-weight: 700; fill: #fff3d6; }
.physical-river.detailed { stroke-linecap: round; stroke-linejoin: round; }
.river-name { font-weight: 700 !important; letter-spacing: .06em; }

/* sobre fondos claros (físico, relieve, topográfico…) los colores se oscurecen */
svg[data-tone="light"] .gaz-label { fill: #3b2a1c; stroke: rgba(252,248,238,.92); }
svg[data-tone="light"] .gaz-elev { fill: #7a4a14; }
svg[data-tone="light"] .gaz-range .gaz-label { fill: #6b3d17; }
svg[data-tone="light"] .gaz-paramo .gaz-label { fill: #2f6a2a; }
svg[data-tone="light"] .gaz-region .gaz-label, svg[data-tone="light"] .gaz-plain .gaz-label, svg[data-tone="light"] .gaz-plateau .gaz-label, svg[data-tone="light"] .gaz-desert .gaz-label, svg[data-tone="light"] .gaz-peninsula .gaz-label { fill: rgba(70,45,25,.72); }
svg[data-tone="light"] .gaz-lake .gaz-label, svg[data-tone="light"] .gaz-reservoir .gaz-label, svg[data-tone="light"] .gaz-waterfall .gaz-label,
svg[data-tone="light"] .gaz-sea .gaz-label, svg[data-tone="light"] .gaz-ocean .gaz-label, svg[data-tone="light"] .gaz-gulf .gaz-label, svg[data-tone="light"] .gaz-strait .gaz-label, svg[data-tone="light"] .gaz-marine .gaz-label { fill: #0a5d97; }
svg[data-tone="light"] .gaz-volcano .gaz-label { fill: #8e2414; }
svg[data-tone="light"] .gaz-island .gaz-label { fill: #3b2a1c; }