/* =============================================================
   mapa.css  –  Mapa interactivo
   Complementa lugares.css (modal reutilizado)
   ============================================================= */

/* ── Selector de piso ── */
.mapa-select-wrap {
    position: relative;
}

.mapa-select-label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.25rem;
    font-family: var(--font-condensed, 'Barlow Condensed', 'Arial Narrow', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mapa-select {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1.5px solid #ddd;
    border-radius: 0.5rem;
    font-family: var(--font-condensed, 'Barlow Condensed', 'Arial Narrow', sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: #111;
    background: #fff;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.mapa-select:focus {
    outline: none;
    border-color: #e53d3d;
}

/* ── SVG container ── */
#mapa-svg-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* ── Paths clickeables ── */
.mapa-path {
    cursor: pointer;
    transition: fill 0.18s ease;
}

.mapa-path:hover {
    fill: #e53d3d;
}

/* ── Tooltip ── */
.mapa-tooltip {
    display: none;
    position: fixed;
    z-index: 9000;
    pointer-events: none;
    /* El JS pone left/top con coordenadas del cursor.
       transform centra horizontalmente y sube el tooltip sobre el cursor. */
    transform: translate(-50%, -100%);
    margin-top: -8px;

    background: #111;
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 0.4rem;
    font-family: var(--font-condensed, 'Barlow Condensed', 'Arial Narrow', sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}