:root {
    --sidebar-w: 230px;
    --header-h:  52px;
    --surface:   #1f293700;
    --border:    #374151;
    --text-muted:#6b7280;
    --accent: #000000;
}

.maplibregl-ctrl-bottom-right {
    display: none !important;
}

.maplibregl-ctrl-bottom-left  {
    display: none !important;
}
/* ── Header ── */
header2 {
    height: var(--header-h);
    background: var(--surface);
    display: flex;
    flex-shrink: 0;
    z-index: 700;
    right:50px;
    min-width:120px;
    position:absolute;
}
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-icon {
    width:32px; height:32px;
    background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
    border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-title { font-size:0.82rem; font-weight:600; color:var(--text); white-space:nowrap; }
.logo-sub   { font-size:0.65rem; color:var(--text-muted); white-space:nowrap; }

.search-wrap { display:flex; align-items:center; gap:8px; flex:1; max-width:460px; margin-left:auto; }
.search-input-wrap { flex:1; position:relative; background: aliceblue;}
.search-input-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.search-wrap input {
    width:100%; padding:7px 12px 7px 34px;
    border-radius:8px; border:1px solid var(--border);
    background:var(--bg); color:var(--text);
    font-family:'DM Sans',sans-serif; font-size:0.82rem; outline:none;
    transition:border-color .15s;
}
.search-wrap input:focus { border-color:var(--accent); }
.search-wrap input::placeholder { color:var(--text-muted); }
.btn-buscar {
    padding:7px 16px; background:var(--accent); color:#fff;
    border:none; border-radius:8px; cursor:pointer;
    font-family:'DM Sans',sans-serif; font-size:0.82rem; font-weight:500;
    transition:background .15s, transform .1s; white-space:nowrap;
    background: #1d3d8f96;
}
.btn-buscar:hover  { background:#2563eb; }
.btn-buscar:active { transform:scale(.97); }

/* ── Layout ── */
/*
 * El div contenedor ya tiene height inline en el HTML:
 *   style="height: calc(100vh - 104px)"
 * Necesitamos que esa altura se propague hacia abajo por la cadena flex.
 * NO redefinimos el height acá para no pisarlo ni generar overflow.
 */
html, body {
    height: 100%;
    overflow: hidden;   /* evita scroll de página; el scroll queda solo en el mapa */
}

/* El div inline del HTML (el que tiene height:calc(100vh-104px)) necesita
   propagar su altura a sus hijos. Como está dentro de varios wrappers de
   Webflow, forzamos la cadena completa: */
.page-wrapper,
.page-wrapper > div,
.page-wrapper > div > .wrapper,
.page-wrapper > div > .wrapper > .w-layout-grid,
.page-wrapper > div > .wrapper > .w-layout-grid > div {
    height: 100%;
    overflow: hidden;
}

.main-container {
    display: flex;
    overflow: hidden;
    position: relative;
    height: calc(100% - 1px);
    padding-top: 5px;
}

/* ── Sidebar ── */
.sidebar {
    width:var(--sidebar-w); background:#fbf9f7;
    border-right:1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 0 10px 0 0;
    display:flex; flex-direction:column; flex-shrink:0;
    transition:width .25s cubic-bezier(.4,0,.2,1), opacity .2s;
    overflow:hidden; z-index:500;
}
.sidebar.collapsed { width:0; opacity:0; }
.sidebar-section-title {
    padding:8px 8px 8px;
    font-size:0.85rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.2em; color:var(--text-muted);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    font-family: Lato;
}
.sidebar-close {
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    padding:2px 4px; border-radius:4px; font-size:.8rem; transition:color .15s;
}
.sidebar-close:hover { color:var(--text); }

.layer-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 16px; cursor:pointer;
    transition:background .12s; user-select:none;
}
.layer-item:hover { background:rgba(255,255,255,.04); }
.layer-check {
    width:16px; height:16px; border:2px solid var(--border);
    border-radius:4px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:background .12s, border-color .12s;
}
.layer-check.on { background:var(--accent); border-color:var(--accent); }
.layer-check.on::after {
    content:''; width:8px; height:5px;
    border-left:2px solid #fff; border-bottom:2px solid #fff;
    transform:rotate(-45deg) translateY(-1px); display:block;
}
.layer-swatch { width:10px; height:10px; border-radius:3px; border:1px solid rgba(255,255,255,.12); flex-shrink:0; }
.layer-info  { flex:1; min-width:0; }
.layer-name  { font-size:.8rem; color:var(--text); white-space:nowrap; }
.layer-hint  { font-size:.65rem; color:var(--text-muted); margin-top:1px; font-family:'DM Mono',monospace; }
.zoom-alert  {
    margin:8px 12px; padding:8px 10px;
    background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25);
    border-radius:6px; font-size:.7rem; color:#000; display:none; line-height:1.4;
}

/* ── Toggle btn flotante ── */
#btn-sidebar-toggle {
    position:absolute; top:50%; left:var(--sidebar-w);
    transform:translateY(-50%); z-index:600;
    background:#1d3d8f; border:1px solid var(--border); border-left:none;
    color:#fff; width:18px; padding:10px 3px; cursor:pointer;
    border-radius:0 6px 6px 0; font-size:.6rem;
    transition:left .25s cubic-bezier(.4,0,.2,1), color .15s;
    display:flex; align-items:center; justify-content:center;
}
#btn-sidebar-toggle:hover { color:#d3e0dd; }

/* ── Mapa ── */
#map {
    flex: 1;
    min-height: 0;      /* fix crítico: sin esto, flex ignora el height del hijo en algunos browsers */
    height: 100%;       /* necesario para que MapLibre calcule el canvas correctamente */
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-left:5px;
}
.maplibregl-canvas { outline:none; }

/* ── Cursor parcelas ── */
.cursor-pointer { cursor:pointer; }

/* ── Resultados búsqueda ── */
#search-results {
    position:absolute; top:calc(var(--header-h) + 8px); right:16px;
    width:340px; background:#f4f4f4; border:1px solid var(--border);
    border-radius:10px; z-index:3000; max-height:300px; overflow-y:auto;
    display:none; box-shadow:0 8px 32px rgba(0,0,0,.5);
}
#search-results::-webkit-scrollbar { width:4px; }
#search-results::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.result-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .1s; }
.result-item:last-child { border-bottom:none; }
.result-item:hover { background:rgba(59,130,246,.08); }
.result-nomen { font-size:.78rem; font-weight:600; color:var(--accent); font-family:'DM Mono',monospace; }
.result-dir   { font-size:.71rem; color:var(--text-dim); margin-top:2px; }
.result-empty { padding:16px 14px; font-size:.8rem; color:var(--text-muted); text-align:center; }

/* ── Popup MapLibre ── */
.maplibregl-popup-content {
    font-family:'DM Sans',sans-serif;
    border-radius:10px !important;
    padding:0 !important;
    box-shadow:0 4px 24px rgba(0,0,0,.2) !important;
    min-width:240px;
    overflow:hidden;
}
.maplibregl-popup-close-button {
    font-size:1.1rem; padding:4px 8px; color:#64748b;
}
.popup-inner { padding:14px 16px; }
.popup-header { font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; margin-bottom:2px; font-family:'DM Mono',monospace; }
.popup-nomen  { font-size:.95rem; font-weight:700; color:#1e3a5f; border-bottom:2px solid #e2e8f0; padding-bottom:8px; margin-bottom:8px; font-family:'DM Mono',monospace; line-height:1.2; }
.popup-table  { width:100%; border-collapse:collapse; }
.popup-table td { padding:3px 0; vertical-align:top; }
.popup-table td:first-child { font-size:.7rem; color:#94a3b8; padding-right:12px; white-space:nowrap; width:42%; }
.popup-table td:last-child  { font-size:.78rem; font-weight:500; color:#1e293b; }
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:.66rem; font-weight:600; }
.badge-baldio    { background:#d1fae5; color:#065f46; }
.badge-edificado { background:#dbeafe; color:#1e40af; }
.badge-ph        { background:#ede9fe; color:#5b21b6; }
.popup-loading   { font-size:.68rem; color:#94a3b8; margin-top:8px; font-style:italic; }

/* ── Leyenda ── */
.leyenda {
    position:absolute; bottom:28px; right:12px;
    background:rgba(31, 41, 55, 0.06); border:1px solid var(--border);
    border-radius:10px; padding:12px 14px; z-index:1000;
    font-size:.72rem; color:var(--text); min-width:140px;
    backdrop-filter:blur(4px);
}
.leyenda-title { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-bottom:8px; }
.leyenda-row   { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.leyenda-swatch { width:12px; height:12px; border-radius:2px; border:1px solid rgba(255,255,255,.15); flex-shrink:0; }

/* ── Toast loading ── */
#toast-loading {
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    background:rgba(31,41,55,.96); color:var(--accent);
    padding:7px 18px; border-radius:20px; font-size:.75rem; font-weight:500;
    z-index:4000; display:none; border:1px solid var(--border); white-space:nowrap;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE  (≤ 767px)
   - Navbar más baja → ajustar variable
   - Sidebar se superpone al mapa (no lo empuja) para no robarle ancho
   - Sidebar arranca colapsado (lo colapsa mapa.js al init)
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Navbar en mobile suele ser más compacta */
    :root {
        --navbar-h: 52px;
        --footer-h: 40px;
    }

    /* Sidebar flota sobre el mapa en vez de empujarlo */
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 700;
        box-shadow: 4px 0 16px rgba(0,0,0,.4);
        /* El ancho ya está controlado por --sidebar-w y la clase .collapsed */
    }

    /* El botón toggle queda pegado al borde izquierdo cuando el sidebar está cerrado */
    #btn-sidebar-toggle {
        left: 0 !important;  /* cuando .collapsed, el JS pone left:0 */
    }

    /* Leyenda: subirla un poco para no tapar controles del browser */
    .leyenda {
        bottom: 60px;
    }

    /* Toast un poco más arriba */
    #toast-loading {
        bottom: 60px;
    }
}