/* ===========================
   map.css (refactor 1: compatible)
   - Manté l'app funcionant sense tocar HTML
   - Fa el fitxer més “map-specific”
   - Manté variables --glass-* però ara les fa de pont amb el core (styles.css)
   =========================== */

/* ---------------------------
   Bridge tokens (NO “design system” aquí)
   Si styles.css ja defineix tokens globals, aquí només els mapegem.
   --------------------------- */
:root{
  /* surfaces */
  --glass-bg: var(--bg-glass-30, rgba(0, 0, 0, 0.30));
  --glass-bg-strong: var(--bg-glass-40, rgba(0, 0, 0, 0.45));

  /* borders */
  --glass-border: var(--border-soft, rgba(255,255,255,0.07));
  --glass-border-strong: var(--border-mid, rgba(255,255,255,0.15));
  --glass-sep: var(--border-mid, rgba(255,255,255,0.10));
  --glass-sep-soft: var(--border-soft, rgba(255,255,255,0.06));

  /* text */
  --glass-text: var(--text, #f1f5f9);
  --glass-title: #ffffff;
  --muted-light: rgba(255,255,255,0.75);

  /* radius / shadow / blur */
  --glass-radius: var(--radius-md, 0.5rem);
  --glass-blur: 10px;
  --glass-shadow: 0 20px 40px rgba(0,0,0,0.8);
  --glass-shadow-compact: 0 8px 24px rgba(0,0,0,0.6);

  /* padding presets */
  --glass-pad: 1rem 1rem 0.75rem;
  --glass-pad-compact: 0.5rem 0.75rem;

  /* panels */
  --glass-panel-bg: var(--bg-glass-20, rgba(0,0,0,0.22));
  --glass-panel-border: var(--border-soft, rgba(255,255,255,0.08));

  /* focus / controls */
  --glass-focus-border: var(--border-focus, rgba(255,255,255,0.45));
  --glass-control-bg: var(--bg-glass-30, rgba(0,0,0,0.30));
  --glass-control-bg-focus: var(--bg-glass-40, rgba(0,0,0,0.45));
  --glass-control-border: var(--border-strong, rgba(255,255,255,0.20));

  /* loader */
  --loader-dim: rgba(15, 23, 42, 0.25);
}

/* ---------------------------
   Glass Card (map reutilitza aquesta classe)
   Nota: quan vulguis, això pot anar a styles.css, però ara el deixem aquí per compatibilitat.
   --------------------------- */
.glass-card{
  background-color: var(--glass-bg);
  color: var(--glass-text);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);

  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));

  box-shadow: var(--glass-shadow);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.4;
}
.glass-card--modal{ padding: var(--glass-pad); }
.glass-card--compact{
  padding: var(--glass-pad-compact);
  box-shadow: var(--glass-shadow-compact);
}

/* ===========================
   Map container
   =========================== */
#map_eina{
  width: 100%;
  height: 480px;
  flex: 1 1 auto;
  min-height: 360px;
}
.leaflet-container{ position: relative; }

/* ===========================
   Legend (glass, coherent)
   =========================== */
.legend.leaflet-control{
  background: var(--glass-bg);
  color: var(--glass-text);
  border: 1px solid var(--glass-border);
  border-radius: 0.5rem;
  padding: 8px 10px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  font: 12px/1.2 system-ui, sans-serif;
}
.legend .title{ font-weight: 700; margin-bottom: 6px; color: #fff; }
.legend .row{ display:flex; align-items:center; gap:6px; margin:3px 0; }
.legend .swatch{
  width:14px;
  height:14px;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:2px;
  display:inline-block;
}
.legend .ticks{ display:flex; justify-content:space-between; font-size:.85em; margin-top:4px; }

.row_llegenda{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
}
.swatch_llegenda{
  width:10px;
  height:10px;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:3px;
}

/* ===========================
   Loading overlay (map)
   =========================== */
.leaflet-loading{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  background: var(--loader-dim);
  pointer-events:none;
}

.leaflet-loading-inner{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.45rem 0.8rem;
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
  font-size:0.8rem;
  color:#111827;
}

.leaflet-spinner{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(148,163,184,0.6);
  border-top-color:#eb2525;
  border-right-color:#eb2525;
  animation: leaflet-spin 0.7s linear infinite;
}
@keyframes leaflet-spin{ to { transform: rotate(360deg); } }

/* ===========================
   Map mode controls (glass)
   =========================== */
.leaflet-control-mapmode{
  background-color: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  padding: 0.25rem;

  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.mapmode-btn{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:0.4rem;
  border:1px solid rgba(255,255,255,0.12);
  background-color: rgba(0,0,0,0.35);
  cursor:pointer;

  box-shadow:0 1px 3px rgba(0,0,0,0.6);
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease;
}

.mapmode-btn:hover{
  background-color: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
}

.mapmode-btn svg{
  width:18px;
  height:18px;
  stroke:white;
  opacity:0.85;
}

.mapmode-btn--active{
  background-color: rgba(56,189,248,0.95);
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 5px 18px rgba(0,0,0,0.7);
}
.mapmode-btn--active svg{
  stroke:#0f172a;
  opacity:1;
}

/* Glow subtil per polígon seleccionat */
.leaflet-interactive.polygon-glow{
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.55))
          drop-shadow(0 0 8px rgba(255,255,255,0.25));
}

/* ===========================
   Text helpers
   =========================== */
.text-muted-light{ color: var(--muted-light) !important; }

/* ===========================
   Winner rows
   =========================== */
.winner-row{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .5rem;
  align-items:baseline;
}

.winner-eleccio{
  color: var(--muted-light);
  font-weight: 500;
}

.winner-party-pill{
  display:inline-flex;
  align-items:center;
  padding:0 .45rem;
  border-radius:999px;
  font-weight:600;
  font-size:.8rem;
  background-color: rgba(15,23,42,0.75);
  border: 1px solid rgba(148,163,184,0.6);
}

.winner-erc{
  font-size:.78rem;
  color: rgba(226,232,240,0.85);
}
.winner-erc span.separator{ color: rgba(148,163,184,0.8); }

/* ===========================
   Fullscreen cards (menu + info)
   =========================== */
.map-fs-menu-card,
.map-fs-info-card{
  background-color: var(--glass-bg);
  color: var(--glass-text);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: var(--glass-shadow-compact);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.4;
}

.map-fs-menu-card{
  position:absolute;
  top:12px;
  left:12px;
  width:360px;
  max-height: calc(100vh - 24px);
  overflow:auto;
  z-index:4000;
  display:none;
  padding: 0.5rem 0.75rem;
}

.map-fs-info-card{
  position:absolute;
  bottom:12px;
  left:12px;
  width:420px;
  max-width: min(92vw, 520px);
  max-height: calc(100vh - 24px);
  overflow:auto;
  z-index:4100;
  display:none;
  padding: 0.5rem 0.75rem;
}

@media (max-width: 600px){
  .map-fs-menu-card{ width: min(92vw, 360px); }
}

/* FS info head */
.map-fs-info-card .fs-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.35rem;
}
.map-fs-info-card .fs-card-title{
  font-size:.75rem;
  font-weight:600;
  margin:0;
}
.map-fs-info-card .fs-card-close{
  background:transparent;
  border:none;
  color:#fff;
  cursor:pointer;
  font-size:.9rem;
  opacity:.75;
}
.map-fs-info-card .fs-card-close:hover{ opacity:1; }

/* ===========================
   Glass form controls (map)
   =========================== */
.glass-label{
  font-size:.7rem;
  font-weight:500;
  color: rgba(255,255,255,.9);
  margin-bottom:.35rem;
}

.glass-select{
  width:100%;
  background-color: var(--glass-control-bg);
  color:#ffffff;

  border:1px solid var(--glass-control-border);
  border-radius: var(--glass-radius);

  padding:0.45rem 2rem 0.45rem 0.6rem;
  font-size:.8rem;
  line-height:1.2;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background-image: url("data:image/svg+xml,%3Csvg fill='white' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.6rem center;
  background-size:0.8rem;

  box-shadow:0 1px 3px rgba(0,0,0,0.4);
}

.glass-select:focus{
  outline:none;
  border-color: var(--glass-focus-border);
  background-color: var(--glass-control-bg-focus);
}

.glass-select:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* ===========================
   Vot trams header + collapse
   =========================== */
.vottrams-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  cursor:pointer;
}

.vottrams-title{
  font-size:.8rem;
  font-weight:600;
}

.vottrams-sub{ font-size:.7rem; }

.vottrams-toggle{
  background:transparent;
  border:none;
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  line-height:1;
  opacity:.7;
  transition: transform .2s ease, opacity .2s ease;
}
.vottrams-toggle:hover{ opacity:1; }

.vottrams-body{
  overflow:hidden;
  transition: max-height .25s ease, opacity .2s ease, margin-top .2s ease;
  max-height: 600px;
  opacity: 1;
  margin-top: .5rem;
}

.vottrams-card[data-collapsed="1"] .vottrams-body{
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.vottrams-card[data-collapsed="1"] .vottrams-toggle{
  transform: rotate(-90deg);
}

/* ===========================
   Info panel (glass) – utilitats
   =========================== */
.info-glass{ color: var(--glass-text); }

.info-glass .info-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.25rem;
  margin-bottom:.35rem;
}

.info-glass .info-title{
  font-size:.9rem;
  font-weight:700;
  margin:0;
  color:#fff;
}

.info-glass .info-sub{
  font-size:.72rem;
  color: rgba(255,255,255,.7);
  margin:0;
}

.info-glass .info-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.18rem .5rem;
  border-radius:999px;
  font-size:.72rem;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  white-space:nowrap;
}

.info-glass .info-section{
  margin-top:.65rem;
  padding:.5rem .6rem;
  border-radius:.55rem;
  background: var(--glass-panel-bg);
  border: 1px solid var(--glass-panel-border);
}

.info-glass .info-section-title{
  font-size:.72rem;
  font-weight:700;
  margin:0 0 .35rem 0;
  color:#fff;
  letter-spacing:.2px;
}

.info-glass .info-kv{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  padding:.18rem 0;
  font-size:.78rem;
  border-top: 1px solid var(--glass-sep-soft);
}
.info-glass .info-kv:first-child{ border-top:none; }

.info-glass .k{ color: rgba(255,255,255,.70); }
.info-glass .v{ color:#fff; font-weight:600; }

.info-glass .info-note{
  margin-top:.4rem;
  font-size:.72rem;
  color: rgba(255,255,255,.70);
}

.info-glass .info-error{
  margin-top:.5rem;
  padding:.5rem .6rem;
  border-radius:.55rem;
  background: rgba(239,68,68,.14);
  border: 1px solid rgba(239,68,68,.30);
  color: rgba(255,255,255,.9);
  font-size:.78rem;
}

/* guanyadors: aire quan surt dins info */
.info-glass .winner-row{ margin: .25rem 0; }
.info-glass .winner-eleccio{ font-size:.75rem; }

/* ===========================
   Map info: tipografia compacta
   =========================== */
#info-map_eina{
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .80rem;
  line-height: 1.35;
  color: var(--glass-text);
}

#info-map_eina h1,
#info-map_eina h2,
#info-map_eina h3,
#info-map_eina h4,
#info-map_eina h5{
  margin: 0;
  font-size: .90rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
}

#info-map_eina h6{
  margin: 0.2;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
}

#info-map_eina p{ margin: .25rem 0 0 0; }

#info-map_eina small,
#info-map_eina .small{
  font-size: .72rem;
  line-height: 1.25;
  color: rgba(255,255,255,.75);
}

#info-map_eina .text-muted{
  color: rgba(255,255,255,.70) !important;
}

#info-map_eina .alert{
  padding: .45rem .6rem;
  border-radius: .55rem;
  margin: .5rem 0 0 0;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  font-size: .78rem;
}
#info-map_eina .alert-warning{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.25);
}
#info-map_eina .alert-danger{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.30);
}