/* Vista de mapa de los listados públicos.
   Se carga siempre porque son pocos bytes, pero solo hace algo cuando el panel está en
   modo mapa. En modo lista todo esto queda inerte y la grilla se comporta como siempre. */

/* El toggle Lista/Mapa. Va en .pub-section__head, que ya es flex con space-between:
   el título queda a la izquierda y esto a la derecha sin tocar ese layout. */
.pub-modo {
    display: inline-block;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: 0.2s;
}

.pub-modo:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-100);
    border-color: var(--color-accent);
}

/* Con el mapa al lado, la columna de resultados necesita más aire del que da el
   contenedor de 1280px pensado para la grilla sola. */
.pub-listado:has(.pub-listado__panel[data-vista='mapa']) {
    max-width: 1600px;
}

.pub-listado__panel[data-vista='mapa'] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.pub-mapa {
    position: sticky;
    /* El header del sitio no es fijo ni pegajoso (lo verifiqué en header.css), así que
       no hay con qué chocar acá. */
    top: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-divider);
}

#pub-mapa-canvas {
    /* Id propio y no #map: propiedad.css define #map con alto fijo como selector de id,
       y reusarlo traería un conflicto de altura difícil de encontrar. */
    height: calc(100vh - 180px);
    min-height: 420px;
}

.pub-mapa__auto {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    font-size: 13px;
    cursor: pointer;
}

.pub-mapa__aviso {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-top: 1px solid var(--color-divider);
    font-size: 13px;
}

/* Las tarjetas pasan a una sola columna y con scroll propio, para que el mapa quede
   quieto mientras se recorre el listado. */
.pub-listado__panel[data-vista='mapa'] .pub-grid {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.pub-card--activa {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* En pantalla angosta no hay lugar para dos columnas: el mapa va arriba con alto fijo,
   sin sticky (dos zonas con scroll propio en un celular es imposible de usar), y las
   tarjetas debajo se acomodan solas. */
@media (max-width: 900px) {
    .pub-listado__panel[data-vista='mapa'] {
        grid-template-columns: 1fr;
    }

    .pub-mapa {
        position: static;
    }

    #pub-mapa-canvas {
        height: 55vh;
        min-height: 300px;
    }

    .pub-listado__panel[data-vista='mapa'] .pub-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        max-height: none;
        overflow-y: visible;
    }
}