/* ======= Estilos generales ======= */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ======= Página de login ======= */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
}
.login-container {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    width: 320px;
}
.login-container h1 {
    margin: 0 0 1.5rem;
    font-size: 1.4rem;
    text-align: center;
}
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.error {
    color: #d9534f;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
button {
    width: 100%;
    padding: 0.6rem;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}
button:hover { background-color: #0069d9; }

/* ======= App: grid sin pestañas ======= */
.app {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "sidebar map";
    height: 100vh;
}
.sidebar  { grid-area: sidebar; overflow:auto; border-right: 1px solid #eee; padding: 1rem; background:#f7f7f7; }
.map-wrap { grid-area: map; position: relative; }
#map      { position:absolute; inset:0; }

/* Secciones de la sidebar */
.sidebar h2 { margin: 1rem 0 .5rem; font-size:1.1rem; }
.sidebar section { margin-bottom: 1.25rem; }
.legend { margin-top: .5rem; }
.legend div { display:flex; align-items:center; margin-bottom:.25rem; }
.legend .color-box { width:16px; height:16px; margin-right:.5rem; border:1px solid #ccc; }

.zone-list { max-height: 260px; overflow-y: auto; }
.zone-item { padding:.25rem 0; border-bottom:1px solid #e0e0e0; cursor:pointer; }
.zone-item:hover { background:#e9ecef; }

/* Buscador en el mapa */
#searchInput {
    position:absolute; top:12px; left:12px; z-index:5; width:280px;
    padding:6px 8px; border:1px solid #ddd; border-radius:6px; background:#fff;
}

/* Botón FAB para móvil */
.fab-add {
    position: absolute;
    right: 16px; bottom: 16px;
    z-index: 10;
    padding: 12px 16px;
    border-radius: 999px;
    background: #1677ff;
    color: #fff;
    border: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    width: auto;
}

/* ======= Modal no bloqueante ======= */
#modal {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.25);
    pointer-events: none; /* ✅ el mapa recibe clics fuera del card */
    z-index: 100;
}
#modalContent {
    background: #fff; max-width: 520px; width: calc(100% - 32px);
    border-radius: 10px; padding: 16px;
    pointer-events: auto; /* ✅ el card sí captura clics */
}

/* ======= Media queries ======= */
@media (max-width: 1024px) {
    .app { grid-template-columns: 300px 1fr; }
}

@media (max-width: 768px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto; /* mapa arriba, sidebar abajo */
        grid-template-areas:
      "map"
      "sidebar";
    }
    .sidebar {
        height: 40vh; /* bottom sheet */
        border-right: 0;
        border-top: 1px solid #eee;
    }
    .legend .color-box { width: 12px; height: 12px; }
    .zone-list { max-height: none; }
    #searchInput { width: calc(100% - 24px); font-size: 16px; } /* evita zoom iOS */
}