/* ================================================================
   resizer.css — layout principal + divisor drag & drop
   Estructura HTML: body > #hdr + #hero + #cards-section + #vista-mapa
                    #vista-mapa > #vmap-left(toolbar+svgwrap) + #map-resizer + #vmap-right
   ================================================================ */

/* ── BODY: sin scroll ── */
html, body { height: 100%; }

/* Sin scroll solo cuando el mapa está abierto */
body.mapa-activo { overflow: hidden; }

/* ── HEADER fijo ── */
#hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 100;
  /* background ya definido en app.css */
}

/* ── HERO + CARDS: scroll libre bajo el header fijo ── */
/* El body hace scroll — el header fixed se queda arriba */
body {
  overflow-y: auto;
  padding-top: 56px; /* evitar que el header tape el contenido */
}
body.mapa-activo {
  overflow: hidden;
  padding-top: 0;
}

/* ── VISTA MAPA: pantalla completa bajo el header ── */
#vista-mapa {
  display: none;
}
#vista-mapa.open {
  display: grid;
  position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  grid-template-columns: 55% 6px 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  z-index: 50;
}

/* ── PANEL IZQUIERDO ── */
#vmap-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 180px;
  background: var(--bg);
}

/* Toolbar dentro del panel izquierdo */
.vmap-toolbar {
  flex-shrink: 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

/* SVG del mapa */
#vmap-svg-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  cursor: grab;
}
#vmap-svg-wrap:active { cursor: grabbing; }
#vmap-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Botones de zoom del mapa */
.zoom-btns {
  position: absolute;
  bottom: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 3px; z-index: 10;
}

/* ── RESIZER ── */
#map-resizer {
  background: var(--border);
  cursor: col-resize;
  position: relative;
  z-index: 20;
  transition: background .15s;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#map-resizer:hover,
#map-resizer.dragging { background: var(--yellow); }
#map-resizer::after {
  content: '⋮';
  color: var(--text3);
  font-size: .9rem;
  pointer-events: none;
}
#map-resizer:hover::after,
#map-resizer.dragging::after { color: #111; }

/* ── PANEL DERECHO ── */
#vmap-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 220px;
  background: var(--bg2);
}

/* Info del local (cabecera del panel derecho) */
#grafo-local-info {
  flex-shrink: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.gli-name { font-family: 'Syne',sans-serif; font-weight:700; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gli-geo  { font-size:.63rem; color:var(--text3); margin-bottom:4px; }
.gli-stats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.gli-s  { display:flex; flex-direction:column; align-items:center; min-width:38px; }
.gli-n  { font-family:'DM Mono',monospace; font-size:.85rem; font-weight:500; line-height:1.1; }
.gli-l  { font-size:.54rem; color:var(--text3); margin-top:1px; }
.nivel-breadcrumb { font-size:.64rem; display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.bc-activo { color:var(--yellow); font-weight:600; }
.bc-link   { color:var(--text2); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.bc-link:hover { color:var(--yellow); }
.bc-sep    { color:var(--text3); }

/* Bloom: ocupa todo el espacio restante */
#grafo-wrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
#grafo-wrap > svg { width:100%; height:100%; display:block; }

/* Tooltip del bloom */
.grafo-tt-local {
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}

/* Detalle de mesa */
#grafo-detail {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  background: var(--bg3);
  max-height: 200px;
  overflow-y: auto;
}

/* Placeholder */
.right-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  color:var(--text3); gap:8px; padding:2rem; text-align:center;
}
.right-placeholder .ico { font-size:2.5rem; opacity:.25; }
.right-placeholder p    { font-size:.78rem; line-height:1.6; }

/* Durante drag */
body.is-resizing,
body.is-resizing * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: col-resize !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 760px) {
  #vista-mapa.open {
    grid-template-columns: 1fr;
    grid-template-rows: auto 6px 1fr;
  }
  #vmap-left    { min-height: 40vh; }
  #map-resizer  { height: 6px; width: 100%; cursor: row-resize; flex-direction: row; }
  #map-resizer::after { content: '···'; letter-spacing: 3px; }
  body.is-resizing * { cursor: row-resize !important; }
}