.map-page{
  width:min(1220px,calc(100vw - 44px));
  margin:0 auto 56px;
  color:var(--c-text);
}
.map-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:26px 28px;
  border:1px solid rgba(184,132,30,.45);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(24,17,10,.74),rgba(97,65,10,.46),rgba(24,17,10,.18)),
    url("/static/img/heromap.a979ece7762d.png") center/cover;
  box-shadow:0 12px 30px rgba(91,58,13,.13);
  overflow:hidden;
}
.map-kicker{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  margin-bottom:10px;
  border:1px solid rgba(239,211,130,.55);
  border-radius:999px;
  color:#f7e4a4;
  background:rgba(0,0,0,.22);
  font:700 .66rem/1 var(--font-ui);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.map-hero h1{
  margin:0;
  font-family:'Cinzel',serif;
  font-weight:600;
  letter-spacing:0;
  color:#ffe88e;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  font-size:clamp(1.7rem,3vw,2.6rem);
}
.map-hero p{
  margin:6px 0 0;
  color:rgba(255,247,221,.94);
  font-weight:500;
}
.map-search-panel{
  position:relative;
  z-index:60;
  display:grid;
  grid-template-columns:minmax(280px,440px) 1fr;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(185,128,22,.32);
  border-radius:8px;
  background:color-mix(in srgb,var(--c-surface-hi) 82%,transparent);
  box-shadow:0 8px 22px rgba(91,58,13,.08);
}
.map-search-box{
  position:relative;
  display:flex;
  align-items:center;
  min-height:42px;
  border:1px solid rgba(181,126,24,.38);
  border-radius:7px;
  background:var(--c-surface-hi);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.map-search-box:focus-within{
  border-color:var(--c-line-accent);
  background:var(--c-surface-hi);
  box-shadow:0 0 0 3px rgba(214,165,55,.18),0 8px 18px rgba(91,58,13,.08);
}
.map-search-box > svg{
  width:17px;
  height:17px;
  margin-left:12px;
  color:var(--c-accent-ink);
  flex:0 0 auto;
}
.map-search-box:focus-within > svg{color:var(--c-accent-ink)}
.map-search-box input{
  width:100%;
  height:42px;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent;
  color:var(--c-text);
  padding:0 12px;
  font:700 .92rem/1 var(--font-ui);
  box-shadow:none!important;
  appearance:none;
  -webkit-appearance:none;
}
.map-search-box input:focus,
.map-search-box input:focus-visible{
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.map-search-box input:hover,
.map-search-box input:active{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.map-search-results{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:80;
  display:none;
  max-height:330px;
  overflow:auto;
  border:1px solid rgba(181,126,24,.36);
  border-radius:8px;
  background:var(--c-surface-hi);
  box-shadow:0 16px 34px rgba(47,33,12,.18);
}
.map-search-results.open{display:block}
.map-archi-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:58px;
  padding:8px 10px;
  border:0;
  border-bottom:1px solid rgba(181,126,24,.12);
  background:transparent;
  color:var(--c-text);
  text-align:left;
  font:800 .86rem/1.2 var(--font-ui);
  cursor:pointer;
}
.map-archi-option:hover{background:var(--c-inset)}
.map-archi-option img,.map-archi-ph{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:6px;
  background:var(--c-inset-2);
  object-fit:contain;
}
.map-search-empty{
  padding:12px;
  color:var(--c-text-2);
  font-weight:700;
}
.map-selected-archi{
  min-height:42px;
  display:flex;
  align-items:center;
  color:var(--c-text-2);
  font-weight:700;
}
.map-selected-main{
  display:flex;
  align-items:center;
  gap:10px;
}
.map-selected-main img{
  width:48px;
  height:48px;
  object-fit:contain;
}
.map-selected-main strong{
  display:block;
  color:var(--c-accent-ink);
  font-weight:900;
}
.map-selected-main span{
  display:block;
  color:var(--c-text-2);
  font-size:.84rem;
  font-weight:700;
}
.map-selected-loading{
  width:16px;
  height:16px;
  margin-right:8px;
  border:2px solid rgba(181,126,24,.25);
  border-top-color:#9a650d;
  border-radius:50%;
  animation:mapSpin .8s linear infinite;
}
@keyframes mapSpin{to{transform:rotate(360deg)}}
.map-status{
  min-height:0;
  margin:8px 2px;
  color:var(--c-text-2);
  font-weight:700;
}
.map-status:empty{
  display:none;
  margin:0;
}
.map-stage-shell{
  position:relative;
  margin-top:12px;
}
.map-stage{
  position:relative;
  height:calc(100vh - 292px);
  min-height:520px;
  overflow:auto;
  cursor:grab;
  user-select:none;
  border:1px solid rgba(181,126,24,.38);
  border-radius:8px;
  background:
    linear-gradient(rgba(185,128,22,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(185,128,22,.08) 1px,transparent 1px),
    var(--c-inset);
  background-size:32px 32px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 16px 36px rgba(91,58,13,.11);
  touch-action:none;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.map-stage::-webkit-scrollbar{width:0;height:0;display:none}
.map-stage.is-dragging{cursor:grabbing}
.map-stage-shell > .map-world-panel{
  position:absolute;
  left:14px;
  top:14px;
  z-index:34;
  width:max-content;
  max-width:calc(100% - 28px);
  color:#f7edd4;
  box-sizing:border-box;
}
.map-world-current{
  min-width:210px;
  max-width:min(300px,calc(100vw - 72px));
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px 0 13px;
  border:1px solid rgba(239,211,130,.46);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(60,55,42,.92),rgba(43,41,34,.92));
  color:#f2c84e;
  font:800 .84rem/1.2 var(--font-ui);
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(20,14,8,.2),inset 0 1px 0 rgba(255,255,255,.08);
  appearance:none;
  box-sizing:border-box;
  backdrop-filter:blur(3px);
  transition:border-radius .16s,background .16s,border-color .16s,box-shadow .16s;
}
.map-world-current::after{
  content:"";
  width:7px;
  height:7px;
  margin-left:auto;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.78;
  transition:transform .16s;
}
.map-world-panel.is-open .map-world-current{
  border-color:rgba(239,211,130,.34);
  border-radius:14px 14px 0 0;
  background:rgba(62,61,54,.96);
  box-shadow:0 10px 26px rgba(20,14,8,.22);
}
.map-world-panel.is-open .map-world-current::after{
  transform:rotate(225deg) translate(-2px,-1px);
}
.map-world-current svg{
  width:22px;
  height:22px;
  flex:0 0 auto;
}
.map-world-current span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.map-world-list{
  display:block;
  width:min(280px,calc(100vw - 72px));
  max-height:min(520px,calc(100vh - 260px));
  overflow:auto;
  border:1px solid rgba(30,24,17,.22);
  border-top:0;
  border-radius:0 0 18px 18px;
  background:rgba(62,61,54,.96);
  box-shadow:0 14px 36px rgba(20,14,8,.24);
  scrollbar-width:thin;
  scrollbar-color:var(--c-line-accent) transparent;
  box-sizing:border-box;
}
.map-world-list[hidden]{
  display:none!important;
}
.map-world-option{
  display:block;
  width:100%;
  min-height:48px;
  padding:10px 16px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:transparent;
  color:#f5efe2;
  text-align:left;
  cursor:pointer;
  font:700 .84rem/1.2 var(--font-ui);
  appearance:none;
  box-sizing:border-box;
}
.map-world-option:hover,.map-world-option.active{
  background:rgba(255,255,255,.08);
  color:#f7d662;
}
.map-zone-panel{
  position:absolute;
  left:14px;
  top:72px;
  z-index:32;
  width:min(250px,calc(100% - 28px));
  max-height:min(420px,calc(100% - 86px));
  overflow:hidden;
  border:1px solid rgba(30,24,17,.22);
  border-radius:0 18px 18px 0;
  background:rgba(62,61,54,.94);
  color:#f7edd4;
  box-shadow:0 14px 36px rgba(20,14,8,.24);
  backdrop-filter:blur(2px);
}
.map-zone-panel[hidden]{display:none}
.map-zone-panel-title{
  padding:14px 16px;
  color:#f2c84e;
  background:rgba(122,111,73,.58);
  font:800 .82rem/1.2 var(--font-ui);
}
.map-zone-list{
  max-height:398px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--c-line-accent) transparent;
}
.map-zone-tab{
  width:100%;
  min-height:48px;
  padding:10px 16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:transparent;
  color:#f5efe2;
  text-align:left;
  cursor:pointer;
  font:700 .86rem/1.2 var(--font-ui);
}
.map-zone-tab small{
  color:rgba(245,239,226,.7);
  font-size:.72rem;
  font-weight:700;
}
.map-zone-tab:hover,.map-zone-tab.active{
  background:rgba(255,255,255,.08);
}
.map-zone-tab.active span{
  color:#f7d662;
}
.map-zone-tab.is-disabled{
  cursor:not-allowed;
  opacity:.72;
}
.map-zone-tab.is-disabled:hover{
  background:transparent;
}
.map-zone-tab.is-disabled span{
  color:rgba(245,239,226,.82);
}
.map-zone-tab.is-disabled small:last-child{
  color:rgba(245,205,92,.78);
}
.mini-map-canvas{
  position:relative;
  background:#9bcfc1;
  overflow:hidden;
  transform-origin:0 0;
  will-change:transform;
}
.mini-map-tile{
  position:absolute;
  width:250px;
  height:250px;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.mini-map-grid{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.48) 0 var(--grid-line-size,1px),transparent var(--grid-line-size,1px)),
    linear-gradient(rgba(255,255,255,.48) 0 var(--grid-line-size,1px),transparent var(--grid-line-size,1px));
  background-size:var(--grid-x,14px) var(--grid-y,10px);
  background-position:var(--grid-origin-x,0) var(--grid-origin-y,0);
  mix-blend-mode:screen;
}
.map-zone-cell{
  position:absolute;
  z-index:4;
  pointer-events:none;
  box-sizing:border-box;
}
.map-zone-cell{
  border:2px solid #39ff6a;
  background:rgba(40,255,90,.38);
  box-shadow:0 0 0 1px rgba(0,60,10,.55),0 0 14px rgba(57,255,106,.95),inset 0 0 10px rgba(200,255,210,.35);
}
.mini-map-canvas{cursor:crosshair}
.map-zaap{
  position:absolute;
  z-index:6;
  width:0;
  height:0;
  pointer-events:none;
}
.map-zaap-icon,.map-zaap-label{
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  transform:scale(calc(1 / var(--map-zoom,1))) translate(-50%,-50%);
}
.map-zaap-icon{width:22px;height:22px;pointer-events:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
.map-zaap-icon svg{width:22px;height:22px;display:block}
.map-zaap-label{
  transform:scale(calc(1 / var(--map-zoom,1))) translate(-50%,14px);
  white-space:nowrap;
  padding:3px 7px;
  border-radius:4px;
  background:rgba(24,18,10,.86);
  border:1px solid color-mix(in srgb,var(--c-line-accent) 55%,transparent);
  color:#f6e7bf;
  font:800 11px/1.1 var(--font-ui);
  opacity:0;
  transition:opacity .15s;
}
.show-zaap-names .map-zaap-label,.map-zaap:hover .map-zaap-label{opacity:1}
.map-hover-tip{
  position:absolute;
  z-index:12;
  min-width:max-content;
  padding:7px 10px;
  border-radius:3px;
  background:rgba(24,24,24,.88);
  color:#fff;
  font:800 .72rem/1 var(--font-ui);
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.map-empty{
  position:absolute;
  left:12px;
  top:12px;
  padding:16px 18px;
  border:1px solid rgba(181,126,24,.28);
  border-radius:8px;
  background:color-mix(in srgb,var(--c-surface-hi) 90%,transparent);
  color:var(--c-text-2);
  font-weight:700;
}
.map-console-panel{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(181,126,24,.34);
  border-radius:8px;
  background:#18120c;
  color:#f8e9bd;
  box-shadow:0 12px 26px rgba(31,20,8,.18);
}
.map-console-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.map-console-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.map-console-head strong{
  color:#ffe494;
  font:800 .82rem/1 var(--font-ui);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.map-console-head button{
  height:30px;
  padding:0 10px;
  border:1px solid rgba(239,211,130,.34);
  border-radius:6px;
  color:#f4df9e;
  background:rgba(255,255,255,.06);
  font-weight:800;
  cursor:pointer;
}
.map-progress{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.09);
}
.map-progress div{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#b98522,#ffe08a);
  transition:width .18s;
}
.map-console{
  height:160px;
  margin-top:10px;
  overflow:auto;
  color:#d5c5a4;
  font:500 .78rem/1.45 var(--font-ui);
}
.map-console-line{padding:2px 0}
.map-console-line.ok{color:#aee5a8}
.map-console-line.warn{color:#ffe08a}
.map-console-line.error{color:#ff9d8e}

@media(max-width:760px){
  .map-page{width:calc(100vw - 16px);margin-top:0}
  .map-hero{align-items:flex-start;flex-direction:column;padding:20px}
  .map-search-panel{grid-template-columns:1fr}
  .map-world-panel{left:8px;top:8px;width:min(230px,calc(100% - 16px))}
  .map-zone-panel{left:8px;top:66px;width:min(230px,calc(100% - 16px));max-height:280px}
  .map-stage{height:62vh;min-height:420px}
}

/* --------------------------------------------------------------------------
   Tema moderno (tokens en theme/tokens.css)
   -------------------------------------------------------------------------- */
/* El mapa ocupaba 1220 px fijos y tapaba la barra lateral: ahora llena su columna */
html[data-theme] .page-layout .map-page { width: 100% !important; max-width: 100% !important; }
html[data-theme] .page-layout .map-search-box {
  background: var(--c-field) !important;
  border-color: var(--c-line-strong) !important;
  border-radius: 14px !important;
}
html[data-theme] .page-layout .map-search-box input { color: var(--c-text) !important; }

/* Selector de mundo sobre el mapa: acento del tema en vez de dorado */
html[data-theme] .map-world-current {
  border-color: var(--c-line-accent) !important;
  color: var(--c-accent-ink) !important;
}
html[data-theme] .map-world-current span { color: inherit !important; }
html[data-theme] .page-layout .map-search-box:focus-within {
  border-color: var(--c-line-accent) !important;
  box-shadow: 0 0 0 3px var(--c-accent-soft) !important;
}
html[data-theme] .map-search-box > svg { color: var(--c-text-3); }
html[data-theme] .map-search-box:focus-within > svg { color: var(--c-accent-ink); }

/* Etiqueta sobre el banner: cristal neutro como los botones del banner (antes píldora dorada) */
html[data-theme] .map-kicker {
  border-color: rgba(255, 240, 200, .35);
  background: rgba(0, 0, 0, .34);
  color: #fff7e2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Resultados de búsqueda y estado */
html[data-theme] .map-archi-option { border-bottom-color: var(--c-line); border-radius: 0; }
html[data-theme] .map-archi-option:hover { background: var(--c-inset-2); }
html[data-theme] .map-selected-loading { border-color: var(--c-line-strong); border-top-color: var(--c-accent); }
html[data-theme] .map-empty {
  border-color: var(--c-line);
  border-radius: var(--r-inner);
  background: var(--c-glass);
}

/* Lienzo del mapa: borde y cuadrícula neutros (antes dorados con anillo blanco) */
html[data-theme] .map-stage {
  border-color: var(--c-line-strong);
  border-radius: var(--r-card);
  background:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px),
    var(--c-inset);
  background-size: 32px 32px;
  box-shadow: var(--c-shadow);
}

/* Selector de mundo y panel de zonas: cristal oscuro neutro (antes oliva con texto dorado) */
html[data-theme] .map-stage-shell > .map-world-panel { color: var(--c-text); }
html[data-theme] .map-world-current {
  background: var(--c-glass) !important;
  box-shadow: var(--c-shadow);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
html[data-theme] .map-world-panel.is-open .map-world-current {
  background: var(--c-surface-hi) !important;
  border-color: var(--c-line-strong) !important;
  box-shadow: var(--c-shadow);
}
html[data-theme] :is(.map-world-list, .map-zone-panel) {
  border-color: var(--c-line-strong);
  background: var(--c-surface-hi);
  color: var(--c-text);
  box-shadow: var(--c-shadow);
}
html[data-theme] :is(.map-world-option, .map-zone-tab) {
  border-bottom-color: var(--c-line);
  color: var(--c-text);
  border-radius: 0;
}
html[data-theme] :is(.map-world-option, .map-zone-tab):hover { background: var(--c-inset-2); }
html[data-theme] :is(.map-world-option.active, .map-zone-tab.active) {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}
html[data-theme] .map-zone-tab.active span { color: var(--c-accent-ink); }
html[data-theme] .map-zone-tab small { color: var(--c-text-2); }
html[data-theme] .map-zone-tab.is-disabled span { color: var(--c-text-2); }
html[data-theme] .map-zone-tab.is-disabled small:last-child { color: var(--c-text-3); font-style: italic; }
html[data-theme] .map-zone-panel-title {
  background: var(--c-inset);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
}

/* Nombres de zaap: fondo neutro y texto claro (antes marrón con crema) */
html[data-theme] .map-zaap-label {
  background: rgba(8, 9, 10, .86);
  border-color: var(--c-line-strong);
  color: var(--c-text);
}

/* Consola de carga del mapa (admin): superficies y estados con tokens */
html[data-theme] .map-console-panel {
  border-color: var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  color: var(--c-text-2);
  box-shadow: var(--c-shadow);
}
html[data-theme] .map-console-head strong { color: var(--c-text); letter-spacing: .04em; }
html[data-theme] .map-console-head button {
  border-color: var(--c-line-strong);
  border-radius: var(--r-ctl);
  background: var(--c-inset);
  color: var(--c-text);
}
html[data-theme] .map-console-head button:hover { background: var(--c-inset-2); border-color: var(--c-line-hover); }
html[data-theme] .map-progress { background: var(--c-inset-2); }
html[data-theme] .map-progress div { background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)); }
html[data-theme] .map-console { color: var(--c-text-2); }
html[data-theme] .map-console-line.ok { color: var(--c-green); }
html[data-theme] .map-console-line.warn { color: var(--c-warn); }
html[data-theme] .map-console-line.error { color: var(--c-red); }