.glf-widget{
  --bg:#07070b;
  --panel:#0e0e16;
  --line:#20202c;
  --text:#f2f2f5;
  --muted:#9797a8;
  --land:#152339;

  --accent:#0000FF;
  --accent-glow:#5c5cff;
  --accent-10:rgba(0,0,255,.10);
  --accent-20:rgba(0,0,255,.20);
  --accent-35:rgba(0,0,255,.35);
  --accent-55:rgba(0,0,255,.55);
  --accent-70:rgba(0,0,255,.70);

  --dot-fill:#3c70c5;
  --dot-stroke:#ffffff;

  --font-main:"Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  box-sizing:border-box;
  background:var(--bg); color:var(--text); font-family:var(--font-main);
  border-radius:10px; overflow:hidden;
  /* Alto por defecto: 80% de la altura de la ventana, para que funcione
     "solo" sin necesitar que definas nada en Elementor. Si prefieres que
     el widget llene exactamente el contenedor donde lo pones (por ejemplo
     una sección con una altura fija que tú definiste), agrega este CSS
     personalizado en Elementor apuntando a ese contenedor:
       .tu-clase-de-contenedor .glf-widget{ height:100% !important; }
  */
  display:flex; flex-direction:column;
  width:100%; height:80vh; min-height:480px; max-height:900px;
}
.glf-widget *{box-sizing:border-box;}
.glf-widget header{padding:22px 28px 16px; border-bottom:1px solid var(--line); flex-shrink:0;}
.glf-widget header h1{margin:0; font-size:23px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;}
.glf-widget .glf-tabs{display:flex; gap:22px; padding:14px 28px; border-bottom:1px solid var(--line); font-size:14px; letter-spacing:.03em; flex-wrap:wrap; flex-shrink:0;}
.glf-widget .glf-tab{color:var(--muted); cursor:pointer; padding-bottom:8px; border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none; font-family:var(--font-main); font-size:14px;}
.glf-widget .glf-tab.active{color:var(--text); border-bottom-color:var(--accent);}
.glf-widget .glf-tab:hover{color:var(--text);}

.glf-widget .glf-layout{display:flex; flex-direction:row; position:relative; overflow:hidden; flex:1; min-height:0; height:100%;}
.glf-widget .glf-layout.sidebar-closed{}

/* --- Sidebar plegable --- */
.glf-widget .glf-sidebar{
  flex:0 0 340px; width:340px; min-width:0; height:100%;
  border-right:1px solid var(--line); overflow-y:auto; overflow-x:hidden; padding:16px;
  transition:flex-basis .25s ease, width .25s ease, opacity .2s ease, padding .25s ease;
}
.glf-widget .glf-layout.sidebar-closed .glf-sidebar{flex-basis:0; width:0; padding-left:0; padding-right:0; opacity:0; pointer-events:none; border-right:none;}

.glf-widget .glf-search{display:flex; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin-bottom:14px; transition:border-color .15s;}
.glf-widget .glf-search:focus-within{border-color:var(--accent-55); box-shadow:0 0 0 3px var(--accent-10);}
.glf-widget .glf-search input{background:transparent; border:none; outline:none; color:var(--text); font-size:14px; width:100%; font-family:var(--font-main);}
.glf-widget .glf-search svg{flex-shrink:0; margin-right:8px; opacity:.5;}
.glf-widget .glf-count{color:var(--muted); font-size:12px; margin:0 2px 10px; letter-spacing:.04em; text-transform:uppercase;}
.glf-widget .glf-entry{padding:12px 10px; border-radius:8px; cursor:pointer; margin-bottom:4px; border:1px solid transparent;}
.glf-widget .glf-entry:hover{background:var(--accent-10);}
.glf-widget .glf-entry.active{background:var(--accent); border-color:var(--accent);}
.glf-widget .glf-entry.active .glf-loc, .glf-widget .glf-entry.active .glf-org{color:#fff;}
.glf-widget .glf-loc{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.glf-widget .glf-entry.active .glf-loc{color:#e2e2ff;}
.glf-widget .glf-org{font-size:14px; font-style:italic; color:var(--muted); margin-top:2px;}

/* --- Mapa --- */
.glf-widget .glf-map-wrap{position:relative; overflow:hidden; background:var(--bg); flex:1; min-width:0; height:100%;}
.glf-widget .glf-map-svg{width:100%; height:100%; display:block; cursor:grab;}
.glf-widget .glf-map-svg.dragging{cursor:grabbing;}
.glf-widget .glf-land{fill:var(--land); stroke:#2a3a55; stroke-width:.4;}
.glf-widget .glf-dot{fill:var(--dot-fill); stroke:var(--dot-stroke); stroke-width:1; cursor:pointer; filter:drop-shadow(0 0 3px var(--accent-70));}
.glf-widget .glf-dot.active{fill:#ffffff; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--accent-70));}

/* Botón de mostrar/ocultar el panel: siempre fijo en la esquina superior
   izquierda DEL MAPA (no del layout), así nunca se desfasa ni se pelea
   con el ancho cambiante del sidebar. */
.glf-widget .glf-sidebar-toggle{
  position:absolute; top:16px; left:16px; z-index:9;
  width:34px; height:34px; border-radius:6px; background:var(--panel); border:1px solid var(--line);
  color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.glf-widget .glf-sidebar-toggle svg{transition:transform .25s ease;}
.glf-widget .glf-layout.sidebar-closed .glf-sidebar-toggle svg{transform:rotate(180deg);}

/* Zoom: esquina inferior derecha */
.glf-widget .glf-zoom-controls{position:absolute; bottom:16px; right:16px; z-index:4; display:flex; flex-direction:column; gap:1px; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.glf-widget .glf-zoom-controls button{width:36px; height:36px; background:transparent; border:none; color:var(--text); font-size:19px; cursor:pointer;}
.glf-widget .glf-zoom-controls button:hover{background:var(--accent-10);}

/* Tarjeta de info: esquina superior derecha */
.glf-widget .glf-info-card{position:absolute; top:16px; right:16px; z-index:5; width:340px; max-width:calc(100% - 32px); background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.6); display:none;}
.glf-widget .glf-info-card.show{display:block; border-color:var(--accent-35);}
.glf-widget .glf-info-card .glf-body{padding:16px;}
.glf-widget .glf-info-card .glf-loc{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.glf-widget .glf-info-card .glf-org{font-size:15px; font-style:italic; color:var(--accent-glow); margin:4px 0 8px;}
.glf-widget .glf-info-card p{font-size:13.5px; line-height:1.6; color:#c7c7d3; margin:0;}
.glf-widget .glf-info-card .glf-close{position:absolute; top:8px; right:10px; z-index:1; background:rgba(0,0,0,.55); border:none; color:#fff; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:15px;}
.glf-widget .glf-card-img{width:100%; height:150px; object-fit:cover; display:block;}

.glf-widget ::-webkit-scrollbar{width:8px;}
.glf-widget ::-webkit-scrollbar-thumb{background:#22222e; border-radius:4px;}

/* --- Breakpoint móvil --- */
@media (max-width: 768px){
  .glf-widget{height:75vh; min-height:420px; max-height:700px;}
  .glf-widget header{padding:16px 16px 12px;}
  .glf-widget header h1{font-size:18px;}
  .glf-widget .glf-tabs{padding:10px 16px; gap:14px; font-size:13px; font-weight:600;}
  .glf-widget .glf-tab{font-size:13px; font-weight:600;}
  .glf-widget .glf-sidebar{
    position:absolute; z-index:6; top:0; left:0; height:100%; width:82%; max-width:300px;
    background:var(--bg); border-right:1px solid var(--line);
    transition:margin-left .25s ease, opacity .2s ease;
  }
  .glf-widget .glf-layout:not(.sidebar-closed) .glf-sidebar{margin-left:0; opacity:1;}
  .glf-widget .glf-layout.sidebar-closed .glf-sidebar{margin-left:-100%;}
  .glf-widget .glf-info-card{width:calc(100% - 32px); top:64px; right:16px;}
}