/* ──────────────────────────────────────────────────────────────────────────
 * Mapa de propiedades (modal "Ver en el mapa") — estilos compartidos.
 * Fuente extraída de welcome2.css para poder reutilizar el MISMO componente
 * (welcome/home/map.blade.php + public/js/home-map.js) en welcome y en las
 * landings de location. Usa los tokens :root que ya define cada página
 * (--surface, --border, --accent #b8860b, --bg, --bg2, --muted, --text, etc.).
 * Se carga DESPUÉS del <style> inline de location para ganar la cascada sobre
 * el CSS del mapa viejo (__geo*), que quedó retirado.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── MAP MODAL ── */
.map-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.map-modal {
    width: 100%; max-width: 1280px; height: 88vh;
    background: var(--surface); border-radius: 24px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 40px 120px rgba(15,23,42,.35);
}
.map-modal-header {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    /* flex-start: anula el justify-content:space-between del mapa viejo (__geo*)
       que todavía vive en el <style> inline de location. */
    justify-content: flex-start;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    background: var(--surface); flex-shrink: 0;
}
.map-modal-title { font-family: var(--ptx-font-display); font-size: 16px; font-weight: 800; flex: 1; min-width: 120px; }
/* Controles del header al estilo de los del hero: blanco, redondeado, ring dorado */
.map-select {
    height: 40px; padding: 0 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 12px;
    background: #fff; font-size: 13px; font-weight: 600; color: var(--text);
    font-family: var(--ptx-font-sans); outline: none; cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.map-select:hover { border-color: rgba(184,134,11,.35); }
.map-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(198,146,10,.12); }
.map-select--active {
    border-color: var(--accent) !important;
    background: rgba(198,146,10,.08) !important;
    color: #8a6807;
}
.map-count-badge {
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: rgba(198,146,10,.10); color: var(--accent);
    border: 1px solid rgba(198,146,10,.24); white-space: nowrap;
}
.map-close {
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border);
    background: none; cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: var(--muted); font-size: 18px;
    transition: background .15s, color .15s; flex-shrink: 0;
}
.map-close:hover { background: var(--bg2); color: var(--text); }

#map-wrap   { flex: 1; min-height: 0; position: relative; }
#map-canvas { width: 100%; height: 100%; display: block; }

.map-modal-footer {
    padding: 10px 18px; border-top: 1px solid var(--border);
    background: var(--bg); flex-shrink: 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.map-footer-text { font-size: 12px; color: var(--muted); }
.map-capped-badge { padding: 3px 10px; background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.3); border-radius: 20px; font-size: 11px; font-weight: 600; color: #ca8a04; }
.map-spinner-wrap { display: flex; align-items: center; gap: 8px; }
.map-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(198,146,10,.2);
    border-top-color: var(--accent);
    animation: map-spin .6s linear infinite; flex-shrink: 0;
}
@keyframes map-spin { to { transform: rotate(360deg); } }

/* ── MAP DRAW BUTTON ── */
.map-btn-draw {
    height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12);
    background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text);
    font-family: var(--ptx-font-sans); transition: all .18s; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.map-btn-draw:hover:not(.active):not(.cancel) { border-color: rgba(184,134,11,.35); background: rgba(198,146,10,.06); }
.map-btn-draw.active  { background: var(--accent); color: #fff; border-color: var(--accent); }
.map-btn-draw.cancel  { background: rgba(239,68,68,.08); color: #ef4444; border-color: rgba(239,68,68,.3); }
.map-polygon-badge {
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: rgba(198,146,10,.12); color: var(--accent);
    border: 1px solid rgba(198,146,10,.30); white-space: nowrap;
}

/* ── Google Maps InfoWindow ── */
.gm-style .gm-style-iw-c { border-radius: 16px !important; box-shadow: 0 16px 48px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.10) !important; padding: 0 !important; overflow: hidden !important; max-height: none !important; }
.gm-style .gm-style-iw-d { overflow: hidden !important; max-height: none !important; }
.gm-style .gm-style-iw-chr { display: none !important; }
.gm-iw-body { position: relative; font-family: var(--ptx-font-sans); width: 260px; }
.gm-iw-media { position: relative; width: 100%; height: 150px; background: var(--bg2); overflow: hidden; }
.gm-iw-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .12s; }
.gm-iw-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 44px; background: linear-gradient(to top, rgba(15,23,42,.35), transparent); pointer-events: none; }
.gm-iw-badge { position: absolute; top: 10px; left: 10px; z-index: 5; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #d6b15f, #b8860b); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(120,85,10,.35); }
.gm-iw-close { position: absolute; top: 10px; right: 10px; z-index: 6; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(15,23,42,.45); backdrop-filter: blur(4px); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.gm-iw-close:hover { background: rgba(15,23,42,.72); }
.gm-iw-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 28px; height: 28px; padding: 0 0 2px; border-radius: 50%; border: none; background: rgba(15,23,42,.40); backdrop-filter: blur(4px); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; transition: background .15s; }
.gm-iw-nav:hover { background: rgba(15,23,42,.65); }
.gm-iw-prev { left: 8px; }
.gm-iw-next { right: 8px; }
.gm-iw-count { position: absolute; bottom: 8px; right: 10px; z-index: 5; background: rgba(15,23,42,.55); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; font-family: var(--ptx-font-sans); }
.gm-iw-content { padding: 12px 14px 14px; }
.gm-iw-price { font-family: var(--ptx-font-display); font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: var(--text); }
.gm-iw-title { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-iw-stats { display: flex; gap: 14px; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(15,23,42,.07); }
.gm-iw-stats span { display: flex; align-items: center; gap: 4px; }
.gm-iw-loc { font-size: 11px; color: var(--muted2); margin-top: 6px; }
.gm-iw-btn { display: block; margin-top: 11px; padding: 9px 14px; background: linear-gradient(135deg, #c6920a, #a97907); color: #fff; border-radius: 10px; font-size: 12.5px; font-weight: 700; text-decoration: none; text-align: center; letter-spacing: .01em; box-shadow: 0 2px 10px rgba(184,134,11,.30); transition: transform .15s, box-shadow .15s; }
.gm-iw-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(184,134,11,.42); }

@media (max-width: 480px) {
    .gm-iw-body { width: 236px; }
    .gm-iw-media { height: 124px; }
    .gm-iw-content { padding: 10px 12px 12px; }
    .gm-iw-price { font-size: 16px; }
    .gm-iw-stats { gap: 12px; margin-top: 7px; padding-top: 7px; }
    .gm-iw-btn { margin-top: 9px; padding: 8px 12px; }
}

@media (max-width: 768px) {
    .map-overlay {
        padding: 0;
        padding-top: max(60px, env(safe-area-inset-top));
        align-items: flex-end;
    }
    .map-modal {
        border-radius: 20px 20px 0 0;
        height: 88vh;
        height: 88svh;
        max-height: calc(100vh - 72px);
        max-width: 100%;
    }
    .map-modal-header { flex-wrap: wrap; gap: 8px; padding: 16px 16px 12px; }
    .map-select { font-size: 12px; padding: 6px 8px; }
    .map-close { width: 44px; height: 44px; font-size: 22px; flex-shrink: 0; }
}