/* ═══════════════════════════════════════════════════════════════════════
   Glubus — mapa a pantalla completa (MapLibre). Plafons "de vidre" a sobre del mapa.
   ═══════════════════════════════════════════════════════════════════════ */

body.gx-fullmap { overflow: hidden; overscroll-behavior: none; }
body.gx-fullmap .gx-seg { display: none; } /* Llista | Mapa: ara és el xip "☰ Llista" */

.gxm {
    --glass: rgba(255, 255, 255, 0.86);
    --glass-b: rgba(255, 255, 255, 0.7);
    --glass-sh: 0 6px 24px rgba(28, 22, 34, 0.16), 0 1px 3px rgba(28, 22, 34, 0.1);
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--gx-top-h, 56px) + env(safe-area-inset-top, 0px));
    bottom: 0;
    z-index: 50;
    background: #EDE6D8;
    font-family: var(--g-font, 'Nunito', system-ui, sans-serif);
    color: var(--g-text, #2C2420);
    overflow: hidden;
}
@media (max-width: 768px) {
    .gxm { top: env(safe-area-inset-top, 0px); bottom: calc(var(--gx-tab-h, 62px) + env(safe-area-inset-bottom, 0px)); }
}
.gxm-map { position: absolute; inset: 0; }
.gxm .maplibregl-canvas { outline: none; }

.gxm-glass, .gxm-search, .gxm-chip, .gxm-tool, .gxm-layers, .gxm-pill, .gxm-sheet, .gxm-list, .gxm-results {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: var(--glass-sh);
    border: 1px solid var(--glass-b);
}

/* ── A dalt: cerca i filtres ───────────────────────────────────────────── */
.gxm-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 560px; }
.gxm-top > * { pointer-events: auto; }
.gxm-search { position: relative; z-index: 3; display: flex; align-items: center; height: 50px; border-radius: 16px; padding: 0 8px 0 14px; }
.gxm-search-ico { color: var(--g-text-3, #766C64); flex-shrink: 0; }
.gxm-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 10px !important; font-family: inherit; font-size: 16px !important; font-weight: 700; color: var(--g-text); outline: none; -webkit-appearance: none; }
.gxm-search input::-webkit-search-cancel-button { display: none; }
.gxm-clear { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(44, 36, 32, 0.08); color: var(--g-text-2); cursor: pointer; font-size: 0.8rem; }
.gxm-clear[hidden] { display: none; }
.gxm-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; border-radius: 16px; max-height: min(60vh, 420px); overflow-y: auto; z-index: 6; }
.gxm-results[hidden] { display: none; }
.gxm-results button, .gxm-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; font-family: inherit; color: var(--g-text); }
.gxm-results button:hover, .gxm-list button:hover { background: rgba(44, 36, 32, 0.06); }
.gxm-r-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gxm-r-t b { font-weight: 900; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gxm-r-t span { font-size: 0.78rem; font-weight: 700; color: var(--g-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gxm-r-empty { padding: 12px; font-weight: 700; color: var(--g-text-3); font-size: 0.88rem; }
.gxm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,0.2); background: #FF4D4E; }
.gxm-dot.d { background: #1E9E57; } .gxm-dot.f { background: #F2B01E; } .gxm-dot.t { background: #FF4D4E; }

.gxm-chips { position: relative; z-index: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.gxm-chips::-webkit-scrollbar { display: none; }
.gxm-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 50px; font-family: inherit; font-weight: 800; font-size: 0.84rem; color: var(--g-text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.gxm-chip:hover { color: var(--g-text); background: #fff; }
.gxm-chip.is-on { background: var(--g-text, #2C2420); color: #fff; border-color: var(--g-text); }
.gxm-chip .gxm-dot { width: 9px; height: 9px; box-shadow: 0 0 0 1.5px #fff; }
.gxm-chip-list { background: #fff; }
@media (min-width: 769px) { .gxm-chip-list { display: none; } }

/* ── A la dreta: eines ─────────────────────────────────────────────────── */
.gxm-tools { position: absolute; right: 12px; top: 12px; z-index: 5; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
@media (max-width: 768px) { .gxm-tools { top: 112px; } }
.gxm-tool { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; color: var(--g-text); font-family: inherit; font-weight: 900; font-size: 0.92rem; padding: 0; transition: transform 0.12s, background 0.15s; }
.gxm-tool:hover { background: #fff; }
.gxm-tool:active { transform: scale(0.94); }
.gxm-tool.is-on { background: var(--g-red, #FF4D4E); color: #fff; border-color: var(--g-red); }
.gxm-tool.is-busy svg { animation: gxmSpin 1s linear infinite; }
.gxm-tool[hidden] { display: none; }
@keyframes gxmSpin { to { transform: rotate(360deg); } }
.gxm-compass svg { transition: transform 0.1s linear; }
.gxm-zoom { display: flex; flex-direction: column; gap: 8px; }
@media (hover: none) { .gxm-zoom { display: none; } }
.gxm-layers { position: absolute; right: 56px; top: 0; display: grid; grid-template-columns: repeat(2, 104px); gap: 8px; padding: 10px; border-radius: 18px; }
.gxm-layers[hidden] { display: none; }
.gxm-layers button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border: 2px solid transparent; border-radius: 14px; background: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 0.76rem; color: var(--g-text); }
.gxm-layers button.is-on { border-color: var(--g-red); }
.gxm-sw { display: block; width: 88px; height: 58px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); background-size: cover; }
.sw-topo { background: repeating-radial-gradient(ellipse at 60% 45%, #F3EBD8 0 5px, #D9C8A6 5px 6px), #F3EBD8; }
.sw-orto { background: radial-gradient(circle at 30% 40%, #5E7A45 0 18%, transparent 19%), radial-gradient(circle at 70% 60%, #7A6A4B 0 22%, transparent 23%), linear-gradient(135deg, #4F6B3E, #8C8466 60%, #B4AE9A); }
.sw-otm { background: repeating-linear-gradient(35deg, #D8E6C4 0 7px, #C6D7AE 7px 8px), #D8E6C4; }
.sw-std { background: linear-gradient(90deg, transparent 45%, #FFD27A 45% 52%, transparent 52%), linear-gradient(0deg, transparent 60%, #fff 60% 65%, transparent 65%), #EEF0E8; }

/* ── A baix: a la vista i progrés ──────────────────────────────────────── */
.gxm-bottom { position: absolute; left: 12px; bottom: 14px; z-index: 4; display: flex; gap: 8px; flex-wrap: wrap; transition: opacity 0.2s; }
.gxm.has-sheet .gxm-bottom, .gxm.has-list .gxm-bottom { opacity: 0; pointer-events: none; }
.gxm-pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 50px; font-family: inherit; font-weight: 800; font-size: 0.84rem; color: var(--g-text); cursor: pointer; }
.gxm-pill:hover { background: #fff; }
.gxm-progress { cursor: default; }
.gxm-progress i { --p: 0; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#1E9E57 calc(var(--p) * 1%), rgba(44,36,32,0.12) 0); -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px); }

/* ── Fitxa del cim ─────────────────────────────────────────────────────── */
.gxm-sheet { position: absolute; z-index: 7; left: 12px; bottom: 12px; width: 380px; max-width: calc(100% - 24px); border-radius: 22px; padding: 18px; box-sizing: border-box; animation: gxmUp 0.3s cubic-bezier(.2,1.1,.4,1); }
.gxm-sheet[hidden] { display: none; }
@media (max-width: 768px) { .gxm-sheet { left: 8px; right: 8px; width: auto; max-width: none; bottom: 8px; } }
@keyframes gxmUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.gxm-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(44,36,32,0.08); color: var(--g-text-2); cursor: pointer; font-size: 0.8rem; }
.gxm-sheet-head { display: flex; gap: 14px; align-items: center; padding-right: 30px; }
.gxm-sheet-alt { flex-shrink: 0; width: 76px; height: 76px; border-radius: 18px; background: linear-gradient(160deg, #FF6A55, #E03D3E); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(224, 61, 62, 0.35); }
.gxm-sheet-alt b { font-family: var(--g-font-d, 'Oswald', sans-serif); font-size: 1.35rem; line-height: 1; font-weight: 700; letter-spacing: 0.01em; }
.gxm-sheet-alt span { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.9; margin-top: 3px; }
.gxm-sheet-t { min-width: 0; }
.gxm-sheet-t h2 { margin: 0; font-family: var(--g-font-d, 'Oswald', sans-serif); font-size: 1.45rem; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--g-text); }
.gxm-sheet-t p { margin: 3px 0 6px; font-size: 0.84rem; font-weight: 700; color: var(--g-text-2); }
.gxm-sheet-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.gxm-badge, .gxm-tag { display: inline-block; padding: 2px 9px; border-radius: 50px; font-size: 0.72rem; font-weight: 900; }
.gxm-badge.d { background: #E3F5EA; color: #177A44; } .gxm-badge.f { background: #FFF3D6; color: #8A6300; } .gxm-badge.t { background: #FFE9E9; color: #C8383A; }
.gxm-tag { background: rgba(44,36,32,0.07); color: var(--g-text-2); }
.gxm-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.gxm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 14px; border: 1.5px solid rgba(44,36,32,0.1); background: rgba(255,255,255,0.9); color: var(--g-text); font-family: inherit; font-weight: 800; font-size: 0.86rem; text-decoration: none; cursor: pointer; text-align: center; }
.gxm-btn:hover { background: #fff; color: var(--g-text); border-color: rgba(44,36,32,0.2); }
.gxm-btn-red { background: var(--g-red-ink, #D13A3B); border-color: var(--g-red-ink, #D13A3B); color: #fff; }
.gxm-btn-red:hover { background: var(--g-red-dark, #B53233); color: #fff; }

/* ── Llista "a la vista" ───────────────────────────────────────────────── */
.gxm-list { position: absolute; z-index: 7; left: 12px; bottom: 12px; width: 360px; max-width: calc(100% - 24px); max-height: min(62%, 520px); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; animation: gxmUp 0.3s cubic-bezier(.2,1.1,.4,1); }
.gxm-list[hidden] { display: none; }
@media (max-width: 768px) { .gxm-list { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 58%; } }
.gxm-list-head { position: relative; padding: 16px 50px 10px 18px; border-bottom: 1px solid rgba(44,36,32,0.08); }
.gxm-list-head b { display: block; font-weight: 900; font-size: 1rem; }
.gxm-list-head span { font-size: 0.78rem; font-weight: 700; color: var(--g-text-3); }
.gxm-list ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gxm-list em { font-style: normal; font-weight: 900; font-size: 0.84rem; color: var(--g-text); flex-shrink: 0; }
.gxm-list-more { margin: 0; padding: 8px 16px 14px; font-size: 0.8rem; font-weight: 700; color: var(--g-text-3); }

/* ── Ubicació, avís, càrrega, vol 360° ─────────────────────────────────── */
.gxm-me { width: 18px; height: 18px; border-radius: 50%; background: #2F80ED; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.3); position: relative; }
.gxm-me i { position: absolute; inset: -12px; border-radius: 50%; background: rgba(47, 128, 237, 0.25); animation: gxmPing 2s ease-out infinite; }
@keyframes gxmPing { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.gxm-toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; padding: 10px 16px; border-radius: 14px; background: rgba(28,22,34,0.86); color: #fff; font-weight: 800; font-size: 0.88rem; }
.gxm-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #EDE6D8; transition: opacity 0.35s; pointer-events: none; }
.gxm-loading span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,77,78,0.2); border-top-color: #FF4D4E; animation: gxmSpin 0.8s linear infinite; }
.gxm[data-state="ready"] .gxm-loading { opacity: 0; }
.gxm.is-orbit .gxm-top, .gxm.is-orbit .gxm-tools, .gxm.is-orbit .gxm-bottom { opacity: 0.25; transition: opacity 0.4s; }
.gxm.is-orbit .gxm-sheet { opacity: 0.9; }
.gxm.is-fallback .gxm-tools > :not(.gxm-zoom), .gxm.is-fallback .gxm-top, .gxm.is-fallback .gxm-bottom { display: none; }

/* Controls de MapLibre */
.gxm .maplibregl-ctrl-attrib { font-size: 10px; background: rgba(255,255,255,0.7); }
.gxm .maplibregl-ctrl-bottom-right { bottom: 0; }
.gxm.has-sheet .maplibregl-ctrl-bottom-right, .gxm.has-list .maplibregl-ctrl-bottom-right { opacity: 0; }
.gxm a, .gxm a:hover, .gxm a:focus { text-decoration: none; }
.gxm-list .gxm-x { display: grid; place-items: center; width: 32px; padding: 0; background: rgba(44,36,32,0.08); }