:root { --bg:#f7f7f8; --fg:#111; --muted:#6b7280; --primary:#c1121f; --card:#fff; --border:#e5e7eb; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
h1 { font-size:18px; margin:0; }
button { background:var(--primary); color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }
button.secondary { background:#e5e7eb; color:#111; }

.layout {
  display:grid;
  grid-template-areas:
    "filters map"
    "table   table";
  grid-template-columns: 40% 1fr; /* filtros izq., mapa dcha. */
  gap:12px; padding:12px;
}

.filters-panel { grid-area:filters; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; }
.filters { display:grid; grid-template-columns:1fr; gap:8px; }
.filter-actions { display:flex; gap:8px; margin-top:8px; }

#map { grid-area:map; height:35vh; background:#ddd; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.tablewrap { grid-area:table; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:auto; }

#pdv-table { width:100%; border-collapse: collapse; }
#pdv-table th, #pdv-table td { border-bottom:1px solid var(--border); padding:8px; font-size:12px; text-align:left; }
#pdv-table thead { position:sticky; top:0; background:#fff; z-index:1; }

.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; padding:8px 12px; }
#pg-info { font-size:12px; color:var(--muted); }

.legend { background:#fff; padding:8px; border-radius:8px; border:1px solid var(--border); font-size:12px; }
.legend h4 { margin:4px 0 8px; font-size:12px; }
.legend .dot { display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; vertical-align:middle; }

#pdv-table tbody tr { cursor:pointer; }
#pdv-table tbody tr:hover { background:#fafafa; }

/* Modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal.hidden { display:none; }
.modal-card { width:min(720px, 95vw); background:#fff; border-radius:12px; border:1px solid var(--border); padding:16px; }
.modal-card h2 { margin-top:0; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid .col-span-2 { grid-column: span 2; }
.grid input, .grid select, .grid textarea { width:100%; border:1px solid var(--border); border-radius:8px; padding:8px; background:#fff; }
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
/* Tipografía moderna + fallback */
body {
  margin: 0;
  font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

/* Inputs estilo “suave” (borde gris, redondeado) */
.filters input[list],
.filters input,
.filters select,
.grid input,
.grid select,
.grid textarea {
  border: 1px solid var(--border);      /* gris claro */
  border-radius: 10px;                  /* más redondeado */
  padding: 10px;
  background: #fff;
  outline: none;
}

.filters input:focus,
.filters select:focus,
.grid input:focus,
.grid select:focus,
.grid textarea:focus {
  border-color: #cbd5e1;                /* gris un poco más marcado al foco */
  box-shadow: 0 0 0 3px rgba(17, 94, 234, .08); /* anillo suave */
}

/* Botones un pelín más suaves */
button {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
}
button.secondary { background: #e5e7eb; color: #111; }

/* Asegura que el modal quede SIEMPRE por encima del mapa y la cabecera */
.modal { z-index: 10000; }              /* por encima de cualquier pane de Leaflet */
#map, .leaflet-container { z-index: 0; }/* mapa por debajo del overlay */

/* Opcional: evita scroll del body cuando el modal está abierto */
body.modal-open { overflow: hidden; }


/* Responsive tweaks */
@media (max-width:640px){
  .layout {
  display:grid;
  grid-template-areas:
    "filters" 
    "map"
    "table";
  grid-template-columns:1fr; /* filtros izq., mapa dcha. */
  gap:12px; padding:12px;
}
}


.main-header {
  width: 100%;
  height: 70px; /* ajusta a tu gusto */
  display: flex;
  align-items: center;
  padding: 0 20px;

  background: linear-gradient(to right, #084474, #f37404);
  color: white;
}

.main-header .logo img {
  height: 50px;  /* ajusta tamaño del logo */
  object-fit: contain;
}


.map-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.map-fab:hover{ filter: brightness(0.97); }