/* =========================================================
   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);
}

html, body {
  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 { height: calc(100vh - 240px); 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;
}

/* Leyenda Leaflet (unificada) */
.legend {
  background: rgba(255,255,255,.92);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: 0 0 6px rgba(0,0,0,0.03);
  font: 12px/1.2 sans-serif;
}
.legend i {
  width: 12px; height: 12px;
  display: inline-block;
  margin-right: 6px;
  border: 1px solid #666;
}
.legend b,
.legend .legend-title {
  color: var(--ink);
  font-weight: 600;
}

/* Overlays “cargando” y “vacío” */
#loadingOverlay {
    position:absolute; top:80px; right:20px; 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 {
  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;
}

/* Barra de filtros del mapa */
#mapFiltersForm .row { row-gap: .5rem; }
#mapFiltersForm .form-label { margin-bottom: .25rem; font-weight: 600; }
#mapFiltersForm .form-select.form-select-sm,
#mapFiltersForm .form-control.form-control-sm {
  padding: .25rem .5rem;
  height: calc(1.5em + .5rem + 2px);
}
#mapFiltersForm .form-check.form-switch { padding-top: .2rem; }
#mapFiltersForm .form-check-label { white-space: nowrap; margin-left: .25rem; }
#mapFiltersForm .btn { height: calc(1.5em + .5rem + 2px); }

@media (max-width: 768px) {
  #mapFiltersForm .btn { width: 100%; }
}


/* =========================================================
   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; }