/* ═══════════════════════════════════════
   MODALS — Search Modal + Lightbox + Admin Overlay
   ═══════════════════════════════════════ */

/* ─── SEARCH MODAL ─── */
.search-modal { display: none; position: fixed; inset: 0; background: rgba(4,9,15,0.78); backdrop-filter: blur(14px); z-index: 1000; align-items: center; justify-content: center; }
.search-modal.active { display: flex; }

.search-modal-content { background: var(--glass-bg); backdrop-filter: blur(32px) saturate(1.4); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); padding: 28px; width: 90%; max-width: 580px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04); animation: slideUpModal .3s var(--ease-spring) both; }
@keyframes slideUpModal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

.search-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.search-modal-title { font-size: 18px; font-weight: 700; background: linear-gradient(120deg, var(--accent-sky), var(--accent-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.search-modal-close { background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 20px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.search-modal-close:hover { color: var(--accent-sky); background: rgba(56,189,248,0.1); border-color: var(--border-accent); transform: rotate(90deg); }

.search-widget-container { margin-bottom: 18px; }

/* ─── LOADING ─── */
.loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 1000; background: var(--glass-bg); backdrop-filter: blur(32px); padding: 56px 72px; border-radius: var(--radius-2xl); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); }
.loading-spinner { width: 56px; height: 56px; border: 3px solid rgba(56,189,248,0.1); border-top: 3px solid var(--accent-sky); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 0 auto 24px; box-shadow: 0 0 28px rgba(56,189,248,0.3); }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; font-weight: 700; background: linear-gradient(120deg, var(--accent-sky), var(--accent-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.06em; }

/* ─── LIGHTBOX ─── */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(4,9,15,.96); z-index: 9999; display: none; align-items: center; justify-content: center; flex-direction: column; padding: 20px; box-sizing: border-box; }
.lightbox-overlay.active { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 72vh; border-radius: var(--radius-md); object-fit: contain; box-shadow: var(--shadow-lg); }
.lightbox-caption { color: var(--text-secondary); margin-top: 12px; font-size: 13px; text-align: center; max-width: 600px; }
.lightbox-date { font-size: 11px; color: rgba(56,189,248,0.65); margin-top: 3px; font-variant-numeric: tabular-nums; }
.lightbox-close { position: absolute; top: 16px; right: 20px; font-size: 26px; cursor: pointer; color: var(--text-secondary); background: none; border: none; line-height: 1; }
.lightbox-close:hover { color: var(--text-primary); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 22px; cursor: pointer; color: var(--text-secondary); background: rgba(255,255,255,0.07); border: 1px solid var(--border-default); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.lightbox-nav:hover { background: rgba(56,189,248,0.15); border-color: var(--border-accent); color: var(--accent-sky); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-counter { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ─── ADMIN OVERLAY ─── */
.admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 8500; display: none; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.admin-overlay.active { display: flex; }
.admin-box { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); width: min(520px,100%); max-height: 88vh; overflow-y: auto; padding: 22px; box-shadow: var(--shadow-md); }
.admin-hdr { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.admin-title { font-size: 15px; font-weight: 700; color: var(--accent-sky); font-family: 'Inter', sans-serif; }
.admin-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-family: 'Inter', sans-serif; }
.admin-x { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 0; transition: color .15s; }
.admin-x:hover { color: var(--text-primary); }
.admin-lock { text-align: center; padding: 28px 0; }
.admin-lock-icon { font-size: 42px; margin-bottom: 14px; }
.admin-lock-lbl { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; font-family: 'Inter', sans-serif; }
.admin-pin { text-align: center; letter-spacing: 6px; font-size: 22px; font-family: monospace; width: 150px; padding: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); display: block; margin: 0 auto; }
.admin-pin:focus { outline: none; border-color: var(--border-accent); box-shadow: 0 0 0 3px rgba(56,189,248,0.10); }
.admin-pin-btn { margin: 10px auto 0; display: block; padding: 8px 24px; background: rgba(56,189,248,0.10); border: 1px solid var(--border-accent); color: var(--accent-sky); border-radius: var(--radius-md); font-weight: 700; font-size: 12px; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .18s; }
.admin-pin-btn:hover { background: rgba(56,189,248,0.18); }
.admin-err { font-size: 11px; color: #f87171; margin-top: 8px; min-height: 16px; text-align: center; font-family: 'Inter', sans-serif; }
.admin-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border-ghost); }
.admin-tab { padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .2s; font-family: 'Inter', sans-serif; }
.admin-tab.active { color: var(--accent-sky); border-bottom-color: var(--accent-sky); }
.admin-f { margin-bottom: 12px; }
.admin-f label { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; font-family: 'Inter', sans-serif; }
.admin-f input, .admin-f textarea, .admin-f select { width: 100%; padding: 8px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 12px; box-sizing: border-box; }
.admin-f input:focus, .admin-f textarea:focus, .admin-f select:focus { outline: none; border-color: var(--border-accent); box-shadow: 0 0 0 2px rgba(56,189,248,0.10); }
.admin-f textarea { resize: vertical; min-height: 58px; }
.admin-f select option { background: var(--bg-surface); }
.admin-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.admin-btn { padding: 8px 18px; border-radius: var(--radius-md); border: none; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; transition: all .18s; }
.admin-btn-p { background: var(--accent-sky); color: #000; }
.admin-btn-p:hover { background: #7dd3fc; }
.admin-btn-s { background: rgba(255,255,255,.06); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.admin-btn-s:hover { background: rgba(255,255,255,.11); }
.admin-msg { font-size: 11px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-sm); margin-bottom: 12px; display: none; font-family: 'Inter', sans-serif; }
.admin-msg.ok { background: rgba(52,211,153,.10); color: var(--accent-emerald); border: 1px solid rgba(52,211,153,.22); }
.admin-msg.err { background: rgba(248,113,113,.10); color: #f87171; border: 1px solid rgba(248,113,113,.20); }
.admin-obra-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.admin-obra-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,.02); border: 1px solid var(--border-ghost); border-radius: var(--radius-sm); gap: 10px; }
.admin-obra-nm { font-size: 12px; color: var(--text-secondary); flex: 1; line-height: 1.3; font-family: 'Inter', sans-serif; }
.admin-obra-btns { display: flex; gap: 6px; flex-shrink: 0; }
.admin-mini { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; cursor: pointer; border: 1px solid; font-family: 'Inter', sans-serif; transition: all .15s; }
.admin-edit { background: rgba(56,189,248,.08); color: var(--accent-sky); border-color: rgba(56,189,248,.22); }
.admin-edit:hover { background: rgba(56,189,248,.16); }
.admin-del { background: rgba(248,113,113,.07); color: #f87171; border-color: rgba(248,113,113,.18); }
.admin-del:hover { background: rgba(248,113,113,.14); }

/* ── Add-Layer Manager ── */
.al-preview-box { background:rgba(56,189,248,.04); border:1px solid rgba(56,189,248,.18); border-radius:8px; padding:12px; margin-top:8px; animation:fadeIn .2s ease; }
.al-geom-icon { width:28px; height:28px; background:rgba(56,189,248,.12); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.al-step2-divider { display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.al-custom-item { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:6px; gap:8px; }
.al-custom-nm { font-size:11px; color:rgba(255,255,255,.65); flex:1; font-family:Inter,sans-serif; }
.al-custom-badge { font-size:9px; color:rgba(56,189,248,.7); background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.18); border-radius:4px; padding:2px 6px; font-family:Inter,sans-serif; white-space:nowrap; }
.al-cor-swatch { width:14px; height:14px; border-radius:3px; flex-shrink:0; border:1px solid rgba(255,255,255,.15); }