/* Estilo de la web local del mapa de Mushoku: mesa de cartógrafo (tinta azul-verde sobre papel claro, modo oscuro
   pizarra), mapa con fondo de pergamino de Antique Atlas, fichas de región en rejilla y cajón lateral de detalle.
   Bajo 700px el mapa ocupa la pantalla y el panel lateral pasa a hoja inferior; mira y barra del colocador de pines,
   controles flotantes del mapa (pantalla completa, Atlas/Biomas, filtro de región) y modo body.mapfull. */
:root {
  --bg: #eef1ee; --panel: #fbfcfa; --ink: #18232b; --muted: #5d6b72; --line: #cfd8d6;
  --accent: #1d6f6a; --accent-ink: #ffffff; --chip: #e2ece9; --warn: #9a5b13; --ok: #2f7a3a; --idea: #6b5aa6;
  --bad: #b3261e; --parchment: #ead9ac; --shadow: 0 1px 2px rgba(24,35,43,.08), 0 6px 18px rgba(24,35,43,.06);
  --f-display: "Alegreya SC", "Palatino Linotype", Georgia, serif;
  --f-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #11181d; --panel: #18222a; --ink: #e4ebe9; --muted: #93a3a8; --line: #2b3a42;
  --accent: #4fb3a9; --accent-ink: #0d1417; --chip: #22323a; --warn: #e0a250; --ok: #74c47f; --idea: #ab9cf0;
  --bad: #ff6b5e; --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark } }
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--f-body); padding: 14px 16px 40px }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; margin: 0; text-wrap: balance }
h1 { font-size: 1.9rem }
h2 { font-size: 1.4rem }
h3 { font: 700 .78rem var(--f-body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted) }
button, select, input { font: inherit; color: inherit }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; max-width: 1600px; margin: 0 auto 14px }
.brand p { margin: 2px 0 0; color: var(--muted) }
.tabs { display: flex; gap: 4px; flex-wrap: wrap }
.tabs button { border: 1px solid var(--line); background: var(--panel); padding: 6px 16px; border-radius: 999px; cursor: pointer; font-weight: 500 }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
main { max-width: 1600px; margin: 0 auto }
.mapview { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start }
@media (max-width: 1000px) { .mapview { grid-template-columns: 1fr } }
.stage { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: var(--shadow); display: grid; gap: 8px; min-width: 0 }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.toolbar button, .toolbar select { border: 1px solid var(--line); background: var(--bg); border-radius: 6px; padding: 5px 10px; cursor: pointer; min-height: 32px }
.sel, .chk { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem }
.sel select { color: var(--ink) }
.readout { margin-left: auto; font: .78rem var(--f-mono); color: var(--muted) }
.canvaswrap { position: relative; height: min(76vh, 900px); min-height: 360px; border-radius: 6px; overflow: hidden; background: var(--parchment) }
#mc { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
#mc.dragging { cursor: grabbing }
#mc.measuring { cursor: crosshair }
.toolbar button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.rulerout { font: .82rem var(--f-mono); color: var(--ink) }
.markers { display: flex; flex-wrap: wrap; gap: 4px }
.mk { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg); border-radius: 6px; padding: 2px 8px 2px 3px; font-size: .82rem; cursor: pointer }
.mk img { width: 22px; height: 22px; image-rendering: pixelated; background: var(--parchment); border-radius: 4px }
.mk b { font: .72rem var(--f-mono); color: var(--muted) }
.mk[aria-pressed="false"] { opacity: .45 }
.side { display: grid; gap: 12px; min-width: 0; align-content: start }
.card, .sidebody > section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; box-shadow: var(--shadow); min-width: 0 }
.sidebody > section { display: grid; gap: 10px }
.sidebody { display: grid; gap: 12px; min-width: 0; align-content: start }
.grip { display: none }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px }
.filters > * { flex: 1 1 170px; min-width: 0 }
.filters > input[type=search] { flex: 3 1 280px }
.filters input, .filters select { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel) }
.count { color: var(--muted); font-size: .9rem; margin: 0 0 8px }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.cards.biomes { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) }
.rcard { display: grid; gap: 10px; cursor: pointer; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 0; overflow: hidden; box-shadow: var(--shadow) }
.rcard:hover { border-color: var(--accent) }
.rcard .body { padding: 0 14px 14px; display: grid; gap: 8px }
.rcard .crumb, .crumb { font: .76rem var(--f-mono); color: var(--muted) }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 130px; background: var(--chip); overflow: hidden }
.mosaic img, .mosaic div { width: 100%; height: 130px; object-fit: cover; display: block; min-width: 0 }
.tilerow { display: flex; flex-wrap: wrap; gap: 3px }
.tileimg { width: 26px; height: 26px; image-rendering: pixelated; background: var(--parchment); border-radius: 3px; flex: none }
.stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font: .78rem var(--f-mono); color: var(--muted) }
.stats b { color: var(--ink) }
.pill { display: inline-block; font: 700 .68rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor }
.pill.idea { color: var(--idea) } .pill.decidido { color: var(--warn) } .pill.listo { color: var(--ok) }
.pill.hostil { color: var(--bad) } .pill.pacifica { color: var(--ok) } .pill.sin_datos { color: var(--muted) }
.pill.aceptado { color: var(--ok) } .pill.quiza, .pill.propuesto { color: var(--warn) } .pill.descartado { color: var(--bad) } .pill.sin_revisar { color: var(--muted) }
.desc { margin: 0; color: var(--muted); font-size: .92rem; max-width: 70ch }
.bcard { display: grid; gap: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow) }
.bcard .photo { height: 150px; background: var(--chip); display: grid; place-items: center; position: relative; cursor: zoom-in; overflow: hidden }
.bcard .photo img.pic { width: 100%; height: 150px; object-fit: cover; display: block }
.bcard .photo.modpic img.pic { opacity: .6 }
.bcard .photo .badge { position: absolute; left: 6px; bottom: 6px; background: rgba(12,20,26,.75); color: #fff; font: .7rem var(--f-body); padding: 1px 6px; border-radius: 4px }
.bcard .photo.none { cursor: default }
.swatches { display: flex; gap: 3px }
.swatches i { width: 14px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.15) }
.bcard .body { padding: 0 12px 12px; display: grid; gap: 6px }
.bcard h2 { font-size: 1.1rem }
.chips { display: flex; flex-wrap: wrap; gap: 4px }
.chip { background: var(--chip); border-radius: 5px; padding: 1px 7px; font-size: .8rem; border: 0; cursor: pointer }
.chip.plain { cursor: default }
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px }
table { border-collapse: collapse; width: 100%; font-size: .9rem }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
th { font: 700 .74rem var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); position: sticky; top: 0; background: var(--panel) }
td.mono, .mono { font: .8rem var(--f-mono) }
.thumb { width: 92px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; cursor: zoom-in; display: block }
.mkicon { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: -5px; margin-right: 5px; background: var(--parchment); border-radius: 3px }
.link { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0; text-align: left; font-weight: 500 }
.drawer { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: 1fr minmax(0, 760px) }
.drawer-back { background: rgba(8,12,16,.45) }
.drawer-panel { background: var(--bg); overflow-y: auto; padding: 20px; display: grid; gap: 16px; align-content: start; box-shadow: -8px 0 30px rgba(0,0,0,.2) }
@media (max-width: 800px) { .drawer { grid-template-columns: 0 1fr } }
.drawer-panel header { display: grid; gap: 6px }
.close { justify-self: end; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 4px 10px; cursor: pointer }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px }
.cols ul { margin: 4px 0 0; padding-left: 18px }
.mini { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line) }
.mini img.pic { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; cursor: zoom-in }
.mini .noimg { width: 64px; height: 40px; display: grid; place-items: center; background: var(--chip); border-radius: 4px }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(8,12,16,.9); display: grid; place-items: center; padding: 24px }
.lightbox figure { margin: 0; display: grid; gap: 8px; justify-items: center }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 6px }
.lightbox figcaption { color: #e4ebe9 }
.empty { color: var(--muted); padding: 20px; text-align: center; border: 1px dashed var(--line); border-radius: 10px }
.assignbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: -4px 0 10px }
.assignbar select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink) }
.savestate { font: .8rem var(--f-mono); color: var(--muted) }
.savestate.ok { color: var(--ok) } .savestate.bad { color: var(--bad) }
.cards.mobs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }
.ocard { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow) }
.ocard .photo { height: 210px; background: radial-gradient(ellipse at 50% 60%, var(--chip), var(--bg)); display: grid; place-items: center }
.mobpic { width: 100%; height: 210px; object-fit: contain; cursor: zoom-in; display: block }
.ocard .body { padding: 10px 12px 12px; display: grid; gap: 6px; align-content: start }
.ocard h2 { font-size: 1.15rem }
.pill.kind-dragon { color: var(--bad) } .pill.kind-monstruo { color: var(--warn) } .pill.kind-criatura { color: var(--ok) } .pill.kind-npc { color: var(--idea) }
.variants { display: flex; flex-wrap: wrap; gap: 4px }
.var { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); cursor: pointer; overflow: hidden }
.var img { width: 100%; height: 100%; object-fit: contain; display: block }
.var[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) }
.chip.assigned { display: inline-flex; align-items: center; cursor: default }
.chip.assigned .link { font-size: .8rem }
.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.btn { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: .88rem; min-height: 32px }
.btn.ghost { background: transparent; color: var(--accent) }
.mobmini .pic { object-fit: contain; background: var(--chip) }
.mobmini img.pic { height: 64px }
.vsel, .drawer-panel section > select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); max-width: 100% }
.drawer-panel section > select { margin-top: 8px }
.ocard .photo { position: relative }
.ocard .photo .badge { position: absolute; left: 6px; bottom: 6px; background: rgba(12,20,26,.75); color: #fff; font: .7rem var(--f-body); padding: 1px 6px; border-radius: 4px }
.pill.kind-jefe { color: var(--bad); border-style: double; border-width: 3px } .pill.kind-acuatico { color: var(--accent) }
.btn.more { grid-column: 1 / -1; justify-self: center; padding: 8px 18px }
.ocard .photo { position: relative }
.ocard .photo .badge { position: absolute; left: 6px; bottom: 6px; background: rgba(12,20,26,.75); color: #fff; font: .7rem var(--f-body); padding: 1px 6px; border-radius: 4px }
.pill.kind-jefe { color: var(--bad); border-style: double; border-width: 3px } .pill.kind-acuatico { color: var(--accent) }
.btn.more { grid-column: 1 / -1; justify-self: center; padding: 8px 18px }
.filters > .chk { flex: 0 1 auto; white-space: nowrap }
.top #editstate { margin: 2px 0 0 }
.chip.assigned .link.x { margin-left: 4px; color: var(--muted); font-size: .95rem; line-height: 1 }
.chip.assigned .link.x:hover { color: var(--bad) }
.pinedit { display: grid; gap: 8px; margin: 10px 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px }
.pinedit .row { display: flex; flex-wrap: wrap; gap: 8px }
.pinedit .sel { display: grid; gap: 2px; font-size: .8rem; color: var(--muted) }
.pinedit input, .pinedit select, .picker input { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; min-width: 0 }
.pinedit input[type=number] { width: 92px }
.picker { margin-top: 10px }
.picker input { width: 100%; max-width: 420px }
.bdist .blist { display: grid; gap: 2px; max-height: min(52vh, 560px); overflow-y: auto; margin-top: 6px }
.brow { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; text-align: left; border: 1px solid transparent; background: transparent; color: var(--ink); border-radius: 6px; padding: 3px 6px; cursor: pointer; font: inherit }
.brow[aria-pressed=true] { border-color: var(--accent); background: var(--chip) }
.brow > i { width: 14px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.3) }
.brow .bname { min-width: 0; font-size: .86rem; overflow: hidden; text-overflow: ellipsis }
.brow .bar { display: block; height: 4px; background: var(--line); border-radius: 2px; margin-top: 2px; overflow: hidden }
.brow .bar b { display: block; height: 100% }
.brow .mono { font-size: .78rem; text-align: right; white-space: nowrap }
.brow .mono small { display: block; color: var(--muted); font-size: .7rem }

.cavlayout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; margin-top: 12px }
.cavhead p { margin: 4px 0 0; max-width: 72ch }
.cavstage iframe { width: 100%; height: min(72vh, 820px); min-height: 360px; border: 0; border-radius: 6px; background: #14171c }
.cavside { align-content: start }
.cavlist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: .92rem }
.cavtitle { margin: 18px 0 8px }
.cavlairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px }
.cavlairs figure { margin: 0 }
.cavlairs img { width: 100%; border-radius: 6px; display: block; background: #2a2e36 }
.cavlairs figcaption { font-size: .9rem; color: var(--muted) }
@media (max-width: 900px) { .cavlayout { grid-template-columns: 1fr } }

.maptip { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); font: .78rem var(--f-mono); color: #fff; background: rgba(9,16,20,.62); border-radius: 6px; padding: 3px 8px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.maptip:empty { display: none }
#mc.placing { cursor: crosshair }
.crosshair { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(9,16,20,.8), inset 0 0 0 2px #ffd166 }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #ffd166; box-shadow: 0 0 0 1px rgba(9,16,20,.8) }
.crosshair::before { left: 50%; top: -10px; bottom: -10px; width: 2px; margin-left: -1px }
.crosshair::after { top: 50%; left: -10px; right: -10px; height: 2px; margin-top: -1px }
.placebar { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); display: flex; gap: 8px; padding: 6px; border-radius: 12px; background: rgba(9,16,20,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
.placebar .btn { min-height: 44px; padding: 8px 16px; font-size: 1rem; font-weight: 700 }
.placebar .btn.ghost { color: #fff; border-color: rgba(255,255,255,.6) }
.placeform { display: grid; gap: 8px }
.placeform select, .placeform input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; min-width: 0 }
.placeform .sel { display: grid; gap: 2px; font-size: .8rem }
.toolbar button[aria-pressed="true"]#m-place { background: #b8860b; border-color: #b8860b; color: #fff }

@media (max-width: 700px) {
  body { padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)) }
  input, select, textarea { font-size: 16px !important }
  .top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 8px }
  .top h1 { font-size: 1.25rem; flex: none; white-space: nowrap }
  .brand { display: flex; align-items: baseline; gap: 10px; min-width: 0 }
  .brand #summary { display: none }
  .top #editstate { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px }
  .tabs::-webkit-scrollbar { display: none }
  .tabs button { flex: none; padding: 7px 14px; min-height: 38px }
  .filters > * { flex-basis: 140px }
  .filters > input[type=search] { flex-basis: 100% }
  .cards, .cards.biomes, .cards.mobs { grid-template-columns: 1fr }
  .drawer-panel { padding: calc(14px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)) }
  .close { min-height: 40px; padding: 6px 14px }
  .lightbox { padding: 8px }

  body.maptab { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; overscroll-behavior: none }
  body.maptab main { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; margin: 0 }
  body.maptab .mapview { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0 calc(-10px - env(safe-area-inset-right)) 0 calc(-10px - env(safe-area-inset-left)) }
  .mapview .stage { flex: 1; min-height: 0; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent }
  .mapview .toolbar, .mapview .markers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 10px; flex: none }
  .mapview .toolbar::-webkit-scrollbar, .mapview .markers::-webkit-scrollbar { display: none }
  .mapview .toolbar > * { flex: none; white-space: nowrap }
  .mapview .toolbar button, .mapview .toolbar select { min-height: 40px; padding: 6px 12px }
  .mapview .toolbar #m-in, .mapview .toolbar #m-out { min-width: 44px; font-size: 1.15rem }
  .mapview .readout { display: none }
  .mapview .rulerout:empty { display: none }
  .mapview .markers { order: 3; padding-bottom: 2px }
  .mk { flex: none; min-height: 34px; padding-right: 10px }
  .mapview .canvaswrap { flex: 1; height: auto; min-height: 0; border-radius: 0 }

  .mapview .side { flex: none; display: flex; flex-direction: column; gap: 0; height: var(--sheet-h, 64px); max-height: calc(100dvh - 140px); background: var(--panel); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.14); position: relative; z-index: 2; transition: height .22s cubic-bezier(.2,.8,.2,1) }
  .mapview .side.resizing { transition: none }
  .mapview .side[data-state="peek"] { --sheet-h: calc(64px + env(safe-area-inset-bottom)) }
  .mapview .side[data-state="half"] { --sheet-h: 46dvh }
  .mapview .side[data-state="full"] { --sheet-h: calc(100dvh - 150px) }
  .grip { display: grid; justify-items: center; gap: 6px; flex: none; width: 100%; border: 0; background: transparent; padding: 8px 16px 10px; cursor: grab; touch-action: none; color: var(--ink); font: 600 .95rem var(--f-body) }
  .grip i { width: 40px; height: 5px; border-radius: 3px; background: var(--line) }
  .grip span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .sidebody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 10px calc(16px + env(safe-area-inset-bottom)) }
  .sidebody > section { box-shadow: none; padding: 12px }
  .side[data-state="peek"] .sidebody { visibility: hidden }
  .bdist .blist { max-height: none }
  .brow { padding: 7px 6px; min-height: 44px }
  .chip { padding: 5px 10px; font-size: .9rem }
  .pinedit input[type=number] { width: 100px }
  .placebar { top: 40px; bottom: auto }
}
body.readonly #m-place, body.readonly .assignbar, body.readonly #view-estructuras th:last-child, body.readonly #view-estructuras td:last-child { display: none }

.mapctl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 3 }
.mapctl .fab, .mapctl .seg { background: rgba(14,22,27,.78); color: #fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 4px 14px rgba(0,0,0,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.fab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; cursor: pointer; font: 600 .9rem var(--f-body) }
.fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none }
.fab.wide span { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fab .i-off, .fab[aria-pressed="true"] .i-on { display: none }
.fab[aria-pressed="true"] .i-off { display: block }
.fab[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; gap: 2px }
.seg button { border: 0; background: transparent; color: rgba(255,255,255,.75); min-height: 38px; padding: 0 12px; border-radius: 9px; cursor: pointer; font: 600 .9rem var(--f-body) }
.seg button[aria-pressed="true"] { background: #fff; color: #0e161b }
.mapctl button:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px }
.regionpick { position: absolute; right: 10px; top: 168px; width: min(320px, calc(100% - 20px)); max-height: calc(100% - 180px); display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 4 }
.regionpick input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink) }
.rlist { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; min-height: 0 }
.rlist h4 { margin: 8px 6px 2px; font: 700 .7rem var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.ropt { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 42px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 500 .95rem var(--f-body) }
.ropt:hover { background: var(--chip) }
.ropt[aria-current="true"] { background: var(--chip); box-shadow: inset 3px 0 0 var(--accent) }
.ropt i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.25) }
.ropt b { font: .75rem var(--f-mono); color: var(--muted) }

body.mapfull { overflow: hidden }
body.mapfull .mapview .stage { position: fixed; inset: 0; z-index: 45; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-radius: 0; box-shadow: none; background: var(--parchment); display: flex; flex-direction: column; gap: 0; width: auto; max-width: none }
body.mapfull .mapview .canvaswrap { flex: 1; height: auto; min-height: 0; border-radius: 0 }
body.mapfull .mapview .toolbar, body.mapfull .mapview .markers { display: none }
body.mapfull .mapctl { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)) }
body.mapfull .regionpick { top: calc(168px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); max-height: calc(100% - 190px - env(safe-area-inset-top)) }
body.mapfull .maptip { top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); max-width: calc(100% - 200px) }
@media (max-width: 700px) {
  .maptip { max-width: calc(100% - 190px) }
}