/* =========================================================
   THEME / BASE
   ========================================================= */
:root {
  --brand:  #0d6efd;        /* Bootstrap primary */
  --ink:    #343a40;
  --muted:  #6c757d;
  --bg:     #f8f9fa;
  --paper:  #ffffff;
  --border: #dee2e6;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --leaflet-bottom-offset: 72px; /* Elevar los controles Leaflet por encima del footer */
}

html, body {
  height: 100%;
  background-color: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Espaciado general del contenido */
main.container,
main.container-fluid {
  padding-bottom: 3rem;
}

/* Títulos */
h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 1.25rem 0;
  color: var(--ink);
}

/* Título de página coherente (más marcado) */
.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
}

.page-subtitle {
  color: var(--muted);
  font-size: .95rem;
}

/* Navbar: resalta activo */
.navbar .nav-link.active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Tarjetas “papel” genéricas */
.card-ghost,
.form-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: var(--shadow);
}

/* Footer */
footer {
  font-size: .85rem;
  color: var(--muted);
}


/* =========================================================
   FORMS (estilo suave por defecto)
   Aplica a formularios dentro del contenido (no navbar)
   ========================================================= */
main form {
  background-color: var(--paper);
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}

main form .form-label {
  font-weight: 500;
  margin-bottom: .25rem;
}

main form .form-control,
main form select,
main form .form-select {
  display: inline-block;
  width: auto;
  max-width: 260px;
  margin-right: 1rem;
  margin-bottom: .5rem;
}

main form button {
  margin-top: .25rem;
}

/* Responsive forms */
@media (max-width: 768px) {
  main form .form-control,
  main form select,
  main form .form-select {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }
  main form button {
    width: 100%;
  }
}


/* =========================================================
   HOME (hero / KPIs / cards)
   ========================================================= */
.hero {
  background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(13,110,253,.02));
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.25rem 1.25rem;
  box-shadow: var(--shadow);
}

.kpi-grid .kpi {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: var(--shadow);
  text-align: center;
  padding: .9rem 1rem;
}

.kpi .kpi-label { color: var(--muted); }
.kpi .kpi-value { font-size: 1.85rem; font-weight: 700; }


/* =========================================================
   MAPA (/map)
   ========================================================= */

#map {
  position: relative;
  height: 60vh;
  min-height: 420px;
}


/* Asegura que la capa canvas no tape el tile layer */
#map canvas {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}


.leaflet-bottom {bottom: var(--leaflet-bottom-offset)}

@supports (bottom: calc(1px)) {
  /* Ten en cuenta notch / barras móviles si aplica */
  .leaflet-bottom { bottom: calc(var(--leaflet-bottom-offset) + env(safe-area-inset-bottom, 0px)); }
}

/* Leyenda Leaflet */
.legend {
  background: rgba(255,255,255,.92);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  line-height: 1.15;
  font-size: .9rem;
  max-width: 260px;
  max-height: 45vh;    /* evita overflow en pantallas bajas */
  overflow: auto;      /* scroll interno si hace falta */
}
.legend i {
  width: 12px; height: 12px;
  display: inline-block;
  margin-right: 6px;
  border: 1px solid #666;
  vertical-align: -1px;
}

@media (max-width: 768px) {
  :root { --leaflet-bottom-offset: 88px; }  /* un poco más alto en móvil */
  .legend { max-height: 40vh; }
}

.legend b,
.legend .legend-title {
  color: var(--ink);
  font-weight: 600;
}


/* Overlays */
#loadingOverlay {
  position: absolute;  /* << relativo a #map (por position:relative arriba) */
  top: 12px; right: 12px; z-index: 1000;
  background: rgba(255,255,255,.9);
  padding: .4rem .6rem;
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  display: none;
  align-items: center; gap: .5rem;
}

/* #emptyHint se muestra fijo respecto a la ventana: OK */
#emptyHint {
  display: none;
  position: fixed; right: 12px; top: 80px;
  z-index: 9998;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  font: 14px/1.2 sans-serif;
}

/* ===== Filtros del mapa – versión compacta ===== */
.map-filters--compact {
  background: var(--paper);
  padding: .75rem 1rem;         /* antes 1rem 1.25rem */
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: var(--shadow);
}

.map-filters--compact .row { row-gap: .25rem; }   /* menos aire entre columnas */

.map-filters--compact .form-label {
  margin-bottom: .15rem;         /* etiqueta más pegada al control */
  font-weight: 600;
}

/* Altura y padding de controles (más baja que la genérica) */
.map-filters--compact .form-select,
.map-filters--compact .form-control {
  padding: .25rem .5rem;
  height: 28px;                  /* ~sm real */
  line-height: 1.2;
  max-width: 260px;
}

/* Switch de reservas alineado verticalmente */
.map-filters--compact .form-check.form-switch {
  padding-top: 0;
  display: flex; align-items: center; gap: .4rem;
  min-height: 32px;
}
.map-filters--compact .form-check-label { margin: 0; }

/* Botones “sm” reales y alineados */
.map-filters--compact .btn {
  height: 32px;
  padding: .25rem .6rem;
}

/* Reajuste del grid en pantallas medianas: todo en una línea si hay espacio */
@media (min-width: 992px) {
  .map-filters--compact .col-lg-2,
  .map-filters--compact .col-lg-3 {
    margin-bottom: 0 !important;
  }
}

/* En móvil, 100% ancho y con un poco más de separación vertical */
@media (max-width: 768px) {
  .map-filters--compact .form-select,
  .map-filters--compact .form-control,
  .map-filters--compact .btn {
    width: 100%;
    max-width: 100%;
  }
  .map-filters--compact .row { row-gap: .5rem; }
}



/* =========================================================
   CHARTS (lonja / tallas)
   ========================================================= */
.chart-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.chart-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

#chartCanvas {
  width: 100%;
  height: 56vh;          /* responsive */
  min-height: 320px;     /* altura mínima */
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: .25rem;
  padding: .25rem;
}

@media (max-width: 992px) {
  #chartCanvas { height: 48vh; }
}


/* =========================================================
   UTILIDADES
   ========================================================= */
.text-muted-soft { color: var(--muted); opacity: .95; }