/* Estilos para la página del mapa interactivo */

/* ¡NUEVO! Estilos para los controles de zoom */
.map-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.map-controls button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.map-controls button:hover { background-color: #e0e0e0; }
.map-controls button:active { transform: scale(0.9); }

.mapa-header {
    text-align: center;
    margin-bottom: 30px;
}

.mapa-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Contenedor del mapa SVG */
#map-container {
    width: 100%;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden; /* ¡NUEVO! Evita que el canvas se desborde durante el reajuste */
}

/* ¡MODIFICADO! Ahora el contenedor del canvas tiene una clase para el cursor */
.panning-cursor {
    cursor: grab;
}

/* ¡MODIFICADO! El canvas debe tener un tamaño definido */
/* ¡MODIFICADO! El canvas ahora se ajustará por JavaScript, pero el contenedor debe ser flexible */
.canvas-container { /* Fabric.js crea este contenedor automáticamente */
    width: 100% !important;
    height: auto !important;
}

/* Estilos para las áreas de las playas en el SVG */
.beach-area {
    fill: #aed9e0; /* Color base de las playas */
    stroke: #5e8b9e; /* Borde de las playas */
    stroke-width: 2;
    cursor: pointer;
    transition: fill 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Efecto al pasar el cursor por encima (para escritorio) */
.beach-area:hover {
    fill: #ffc107; /* Color amarillo al pasar el cursor */
    transform: scale(1.02);
}

/* Clase que se añadirá con JavaScript al hacer clic */
.beach-area.active {
    fill: #f5a623; /* Naranja más oscuro para la playa activa */
    stroke: #b77c1c;
    stroke-width: 3;
}

/* Caja de información */
#beach-info-box {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

#beach-info-box h3 {
    margin-top: 0;
    font-size: 1.8rem;
    color: #005c97;
}

/* Media Query para pantallas más grandes */
@media (min-width: 992px) {
    .mapa-layout {
        flex-direction: row;
        align-items: flex-start;
    }
    #map-container {
        flex: 2; /* El mapa ocupa 2/3 del espacio */
    }
    #beach-info-box {
        flex: 1; /* La caja de info ocupa 1/3 */
        position: sticky;
        top: 20px; /* Se queda fija al hacer scroll */
    }
}