/* ============================================================================
   [B] ODS Datos Abiertos — Front-end styles
   Aligned with ODS Local · Manual de Identidad Visual v2.0
   Mobile-first. All rules scoped under .bdw-oda to avoid theme collisions.
   ========================================================================== */

.bdw-oda {
  /* Brand tokens (local fallbacks so it works outside Elementor) */
  --oda-magenta: #DD1367;
  --oda-magenta-dark: #C00F58;
  --oda-navy: #19486A;
  --oda-navy-dark: #0F2D42;
  --oda-yellow: #FCC30B;
  --oda-blue: #0A97D9;
  --oda-green: #56C02B;
  --oda-orange: #FD6925;
  --oda-red: #E5243B;

  --oda-good: #4C9F38;
  --oda-mid: #FCC30B;
  --oda-bad: #E5243B;
  --oda-none: #D7DBE0;

  --oda-white: #FFFFFF;
  --oda-off-white: #F5F5F2;
  --oda-bg: #F7F8FA;
  --oda-border: rgba(15, 45, 66, 0.10);
  --oda-text: #1A1A1A;
  --oda-text-mid: #4A4A4A;
  --oda-text-light: #7A8694;

  --oda-font-display: 'Tilt Warp', 'Nunito', system-ui, sans-serif;
  --oda-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --oda-r-sm: 8px;
  --oda-r-md: 14px;
  --oda-r-lg: 20px;
  --oda-r-pill: 100px;

  --oda-shadow-sm: 0 2px 10px rgba(15, 45, 66, 0.07);
  --oda-shadow-md: 0 6px 24px rgba(15, 45, 66, 0.10);
  --oda-shadow-lg: 0 14px 50px rgba(15, 45, 66, 0.16);

  --oda-t: 220ms cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--oda-font-body);
  color: var(--oda-text);
  background: var(--oda-bg);
  border-radius: var(--oda-r-lg);
  padding: clamp(12px, 2vw, 20px);
  box-sizing: border-box;
  line-height: 1.6;
  container-type: inline-size;
}

.bdw-oda *,
.bdw-oda *::before,
.bdw-oda *::after { box-sizing: border-box; }

/* Scoped to this plugin's own headings (print header, map head, legend and the
 * legacy municipality hero) instead of a blanket ".bdw-oda h1…h4": since 1.4.0
 * the "Buscar municipio" tab embeds b-ods-display's ficha inside .bdw-oda, and
 * a generic rule would restyle its <h1>/<h2> — the ficha must look exactly like
 * it does on the municipio CPT page. Same for the select/input rules below. */
.bdw-oda-print-header h1,
.bdw-oda-muni-hero h2,
.bdw-oda-map-head h3,
.bdw-oda-legend h4 {
  font-family: var(--oda-font-display);
  color: var(--oda-navy);
  line-height: 1.15;
  margin: 0 0 .4em;
}

/* ───────────────────────── Tabs ───────────────────────── */
.bdw-oda-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.bdw-oda-tabs::-webkit-scrollbar { display: none; }

.bdw-oda button.bdw-oda-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--oda-border);
  background: var(--oda-white);
  color: var(--oda-navy);
  font-family: var(--oda-font-body);
  font-weight: 700;
  font-size: .92rem;
  padding: 11px 18px;
  border-radius: var(--oda-r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--oda-t);
}
.bdw-oda button.bdw-oda-tab:hover { border-color: var(--oda-magenta); color: var(--oda-magenta); }
.bdw-oda button.bdw-oda-tab[aria-selected="true"] {
  background: var(--oda-magenta);
  border-color: var(--oda-magenta);
  color: #fff;
  box-shadow: 0 6px 18px rgba(221, 19, 103, .28);
}
.bdw-oda-tab-ico { font-size: 1.05em; line-height: 1; }
.bdw-oda button.bdw-oda-tab:focus-visible { outline: 3px solid var(--oda-yellow); outline-offset: 2px; }

/* ───────────────────────── Panels ───────────────────────── */
.bdw-oda-panel { display: none; animation: bdw-oda-fade var(--oda-t); }
.bdw-oda-panel.is-active { display: block; }
@keyframes bdw-oda-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bdw-oda-noscript {
  background: #fff3cd; color: #7a5b00; border: 1px solid #ffe69c;
  padding: 12px 16px; border-radius: var(--oda-r-sm); margin-bottom: 12px;
}

/* ───────────────────────── Toolbar / fields ───────────────────────── */
.bdw-oda-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  background: var(--oda-white);
  border: 1px solid var(--oda-border);
  border-radius: var(--oda-r-md);
  padding: 14px;
  box-shadow: var(--oda-shadow-sm);
  margin-bottom: 14px;
}
.bdw-oda-field { display: flex; flex-direction: column; gap: 5px; min-width: 140px; position: relative; }
.bdw-oda-field-grow { flex: 1 1 220px; }

/* ── ODS / Demografía switch (map indicator picker) ─────────────────── */
.bdw-oda-switch {
  display: inline-flex;
  background: var(--oda-bg);
  border: 1px solid var(--oda-border);
  border-radius: var(--oda-r-pill);
  padding: 3px;
  gap: 2px;
}
.bdw-oda button.bdw-oda-switch-btn {
  border: none;
  background: transparent;
  color: var(--oda-navy);
  font-family: var(--oda-font-body);
  font-weight: 800;
  font-size: .85rem;
  padding: 7px 16px;
  border-radius: var(--oda-r-pill);
  cursor: pointer;
  transition: all var(--oda-t);
  white-space: nowrap;
}
.bdw-oda button.bdw-oda-switch-btn:hover { color: var(--oda-magenta); }
.bdw-oda button.bdw-oda-switch-btn.is-active {
  background: var(--oda-magenta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(221, 19, 103, .30);
}
.bdw-oda button.bdw-oda-switch-btn:focus-visible { outline: 3px solid var(--oda-yellow); outline-offset: 2px; }
.bdw-oda-field label,
.bdw-oda-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--oda-text-light);
}
/* Keep the switch from being squeezed by the toolbar's flex-wrap so its
 * buttons don't spill outside the pill background on narrow layouts. */
.bdw-oda-field[data-role="map-type-wrap"],
.bdw-oda-field[data-role="cmp-type-wrap"],
.bdw-oda-field[data-role="ser-type-wrap"] { min-width: 230px; flex-shrink: 0; }
.bdw-oda-field select,
.bdw-oda-field input[type="text"],
.bdw-oda-map-search input[type="text"] {
  font-family: var(--oda-font-body);
  font-size: .95rem;
  color: var(--oda-text);
  background: var(--oda-white);
  border: 1.5px solid var(--oda-border);
  border-radius: var(--oda-r-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color var(--oda-t), box-shadow var(--oda-t);
}
.bdw-oda-field select:focus,
.bdw-oda-field input[type="text"]:focus,
.bdw-oda-map-search input[type="text"]:focus {
  outline: none;
  border-color: var(--oda-magenta);
  box-shadow: 0 0 0 3px rgba(221, 19, 103, .14);
}
.bdw-oda-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; color: var(--oda-navy);
  cursor: pointer; padding-bottom: 8px;
}
.bdw-oda-check input { width: 18px; height: 18px; accent-color: var(--oda-magenta); }

/* ───────────────────────── Autocomplete ───────────────────────── */
.bdw-oda-autocomplete { position: relative; }
.bdw-oda-ac-results,
.bdw-oda-map-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--oda-border);
  border-radius: var(--oda-r-sm);
  box-shadow: var(--oda-shadow-md);
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.bdw-oda-ac-results.is-visible,
.bdw-oda-map-search-results.is-visible { display: block; }
.bdw-oda button.bdw-oda-ac-item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 10px 14px; font-family: var(--oda-font-body); font-size: .92rem;
  border-bottom: 1px solid var(--oda-border); color: var(--oda-text);
}
.bdw-oda button.bdw-oda-ac-item:last-child { border-bottom: 0; }
.bdw-oda button.bdw-oda-ac-item:hover,
.bdw-oda button.bdw-oda-ac-item.is-keyfocus { background: rgba(221, 19, 103, .08); }
.bdw-oda button.bdw-oda-ac-item strong { color: var(--oda-navy); }
.bdw-oda button.bdw-oda-ac-item span { color: var(--oda-text-light); font-size: .85em; }
.bdw-oda button.bdw-oda-ac-item.is-empty { color: var(--oda-text-light); cursor: default; }

/* ───────────────────────── Map ───────────────────────── */
.bdw-oda-map-search { position: relative; margin-bottom: 12px; max-width: 420px; }
/* Specificity must beat the generic ".bdw-oda-map-search input[type="text"]"
 * rule above (class + element + attribute = 0,2,1), otherwise its shorthand
 * "padding: 10px 12px" wins and collapses padding-left back to 12px — right
 * where the 🔎 icon sits, making it overlap the placeholder text. */
.bdw-oda input[type="text"].bdw-oda-map-search-input { padding-left: 38px; background-image: none; }
.bdw-oda-map-search::before {
  content: "🔎"; position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); font-size: .95rem; opacity: .6; z-index: 2;
}
.bdw-oda-map-wrap { position: relative; }
.bdw-oda-map-canvas {
  width: 100%;
  height: 64vh;
  min-height: 420px;
  border-radius: var(--oda-r-md);
  overflow: hidden;
  background: #e8edf2;
  border: 1px solid var(--oda-border);
  z-index: 1;
}
.bdw-oda-map-loader {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(247, 248, 250, .85); color: var(--oda-navy); font-weight: 700;
  border-radius: var(--oda-r-md); z-index: 5;
}
.bdw-oda-map-loader.is-hidden { display: none; }
.bdw-oda-map-head { margin-bottom: 10px; }
.bdw-oda-map-head h3 { margin: 0; font-size: 1.15rem; }
.bdw-oda-map-head p { margin: 2px 0 0; color: var(--oda-text-light); font-size: .85rem; }

.leaflet-container.bdw-oda-leaflet { font-family: var(--oda-font-body); }
.bdw-oda-scroll-hint .bdw-oda-map-canvas::after {
  content: attr(data-hint);
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(15, 45, 66, .9); color: #fff; padding: 7px 14px;
  border-radius: var(--oda-r-pill); font-size: .8rem; z-index: 6; pointer-events: none;
}

/* Legend */
.bdw-oda-legend {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--oda-border);
  border-radius: var(--oda-r-sm);
  box-shadow: var(--oda-shadow-sm);
  padding: 10px 12px; font-size: .78rem; max-width: 220px;
}
.bdw-oda-legend h4 { font-family: var(--oda-font-body); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--oda-text-light); margin: 0 0 6px; }
.bdw-oda-legend-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; color: var(--oda-text-mid); }
.bdw-oda-legend-swatch { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.12); }
.bdw-oda-legend-gradient { height: 12px; border-radius: 6px; margin: 4px 0 6px; }
.bdw-oda-legend-scale { display: flex; justify-content: space-between; color: var(--oda-text-light); font-size: .72rem; }

/* hover popup */
.bdw-oda-pop { font-family: var(--oda-font-body); }
.bdw-oda-pop strong { color: var(--oda-navy); }

/* ───────────────────────── Cards / generic ───────────────────────── */
.bdw-oda-capture { background: transparent; }
.bdw-oda-empty {
  text-align: center; color: var(--oda-text-light);
  padding: 48px 20px; background: var(--oda-white);
  border: 1px dashed var(--oda-border); border-radius: var(--oda-r-md);
}
.bdw-oda-card {
  background: var(--oda-white);
  border: 1px solid var(--oda-border);
  border-radius: var(--oda-r-md);
  box-shadow: var(--oda-shadow-sm);
  padding: 18px;
  margin-bottom: 14px;
}

/* Embedded b-ods-display ficha (ficha mode, since 1.4.0). Deliberately style
 * free: the ficha must render exactly as it does on the municipio CPT page,
 * so this only gives it breathing room inside the tab panel. */
.bdw-oda-ficha { margin-top: 4px; }

/* Municipality fact-sheet (legacy fallback when b-ods-display is inactive) */
.bdw-oda-muni-hero {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--oda-navy), var(--oda-navy-dark));
  color: #fff; border-radius: var(--oda-r-md); padding: 22px;
}
.bdw-oda-muni-hero h2 { color: #fff; margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.bdw-oda-muni-hero .bdw-oda-muni-loc { opacity: .85; font-size: .9rem; margin-top: 4px; }
.bdw-oda-score-badge {
  text-align: center; background: rgba(255, 255, 255, .12);
  border-radius: var(--oda-r-md); padding: 12px 20px; min-width: 120px;
}
.bdw-oda-score-badge .num { font-family: var(--oda-font-display); font-size: 2.4rem; line-height: 1; }
.bdw-oda-score-badge .num small { font-size: 1rem; }
.bdw-oda-score-badge .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }

.bdw-oda-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.bdw-oda-stat {
  background: var(--oda-white); border: 1px solid var(--oda-border);
  border-radius: var(--oda-r-sm); padding: 14px;
}
.bdw-oda-stat .lbl { font-size: .72rem; color: var(--oda-text-light); font-weight: 700; }
.bdw-oda-stat .val { font-family: var(--oda-font-display); font-size: 1.35rem; color: var(--oda-navy); }
.bdw-oda-stat .yr { font-size: .7rem; color: var(--oda-text-light); }

.bdw-oda-section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 12px; font-size: 1.1rem; color: var(--oda-navy);
  font-family: var(--oda-font-display);
}

/* ODS goal cards */
.bdw-oda-goals { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bdw-oda-goal {
  border-left: 6px solid var(--g, #64748b);
  background: var(--oda-white); border-radius: var(--oda-r-sm);
  border: 1px solid var(--oda-border); border-left-width: 6px; padding: 12px 14px;
}
.bdw-oda-goal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bdw-oda-goal-badge {
  font-family: var(--oda-font-display); font-size: .85rem; color: #fff;
  background: var(--g, #64748b); border-radius: 6px; padding: 3px 8px;
}
.bdw-oda-goal-name { font-weight: 700; color: var(--oda-navy); font-size: .9rem; flex: 1; }
.bdw-oda-goal-score { font-family: var(--oda-font-display); font-size: 1.3rem; color: var(--oda-navy); }
.bdw-oda-goal-bar { height: 8px; border-radius: 4px; background: var(--oda-off-white); margin-top: 8px; overflow: hidden; }
.bdw-oda-goal-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--g, #64748b); transition: width .6s var(--oda-t); }
.bdw-oda-goal-counts { display: flex; gap: 10px; margin-top: 8px; font-size: .76rem; color: var(--oda-text-mid); }
.bdw-oda-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }

/* Tables */
.bdw-oda-table-wrap { overflow-x: auto; border-radius: var(--oda-r-sm); border: 1px solid var(--oda-border); }
.bdw-oda-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .88rem; min-width: 480px; }
.bdw-oda-table th, .bdw-oda-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--oda-border); }
.bdw-oda-table th { background: var(--oda-navy); color: #fff; font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; }
.bdw-oda-table tbody tr:nth-child(even) { background: var(--oda-off-white); }
.bdw-oda-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bdw-oda-pill {
  display: inline-block; padding: 2px 9px; border-radius: var(--oda-r-pill);
  font-size: .72rem; font-weight: 700; color: #fff;
}
.bdw-oda-pill.green { background: var(--oda-good); }
.bdw-oda-pill.yellow { background: var(--oda-mid); color: #5a4500; }
.bdw-oda-pill.orange { background: #fd7e14; }
.bdw-oda-pill.red { background: var(--oda-bad); }
.bdw-oda-pill.none { background: var(--oda-none); color: #555; }
.bdw-oda-pill.data { background: var(--oda-blue); }

.bdw-oda-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  color: var(--oda-magenta); font-weight: 700; text-decoration: none;
}
.bdw-oda-link:hover { text-decoration: underline; }

/* Comparator chips */
.bdw-oda-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bdw-oda-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--oda-white); border: 1px solid var(--oda-border);
  border-radius: var(--oda-r-pill); padding: 6px 8px 6px 14px;
  font-weight: 700; color: var(--oda-navy); font-size: .85rem;
}
.bdw-oda-chip button,
.bdw-oda .bdw-oda-chip button {
  /* Vistoria 2026-09-16 (A9): el reset global de <button> del tema Hello
   * Elementor (reset.css: padding 8px 16px, border-radius 3px, display:block…)
   * pisaba estas reglas y la "×" salía de la cápsula. Dimensiones explícitas,
   * padding 0 y selector con más especificidad que el reset del tema. */
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-sizing: border-box; padding: 0; margin: 0; min-width: 0; min-height: 0;
  border: 0; background: var(--oda-off-white); color: var(--oda-text-mid);
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; line-height: 1;
  font-size: .9rem; font-weight: 700; transition: all var(--oda-t);
}
.bdw-oda-chip button:hover,
.bdw-oda .bdw-oda-chip button:hover { background: var(--oda-red); color: #fff; }

/* Charts (SVG) */
.bdw-oda-chart { width: 100%; overflow: visible; background: #fff; border-radius: var(--oda-r-sm); }
.bdw-oda-chart-wrap { background: #fff; border: 1px solid var(--oda-border); border-radius: var(--oda-r-md); padding: 16px; box-shadow: var(--oda-shadow-sm); margin-bottom: 14px; }
.bdw-oda-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: .82rem; }
.bdw-oda-chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--oda-text-mid); }
.bdw-oda-chart-legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }

/* Color-mode switch: elegant segmented control (municipality color vs.
 * compliance tramo color) offered above ODS comparison / series charts. */
.bdw-oda-colorswitch { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.bdw-oda-colorswitch-label { font-size: .82rem; font-weight: 600; color: var(--oda-text-mid); }
.bdw-oda-colorswitch-track { display: inline-flex; background: var(--oda-off-white); border: 1px solid var(--oda-border); border-radius: 999px; padding: 3px; gap: 2px; }
.bdw-oda button.bdw-oda-colorswitch-btn { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--oda-text-mid); transition: background .15s ease, color .15s ease, box-shadow .15s ease; white-space: nowrap; }
.bdw-oda button.bdw-oda-colorswitch-btn:hover { color: var(--oda-navy); }
.bdw-oda button.bdw-oda-colorswitch-btn.is-active { background: #fff; color: var(--oda-navy); box-shadow: var(--oda-shadow-sm); }
.bdw-oda button.bdw-oda-colorswitch-btn:focus-visible { outline: 2px solid var(--oda-navy); outline-offset: 2px; }
.bdw-oda-bar-track { fill: var(--oda-off-white); }
.bdw-oda-axis { stroke: var(--oda-border); stroke-width: 1; }
.bdw-oda-axis-label { fill: var(--oda-text-light); font-size: 11px; font-family: var(--oda-font-body); }
.bdw-oda-val-label { fill: var(--oda-navy); font-size: 11px; font-weight: 700; font-family: var(--oda-font-body); }

/* Export bar */
.bdw-oda-export { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 14px 0 4px; }
.bdw-oda button.bdw-oda-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--oda-navy); background: var(--oda-white); color: var(--oda-navy);
  font-family: var(--oda-font-body); font-weight: 700; font-size: .85rem;
  padding: 9px 16px; border-radius: var(--oda-r-pill); cursor: pointer;
  transition: all var(--oda-t);
}
.bdw-oda button.bdw-oda-btn:hover { background: var(--oda-navy); color: #fff; }
.bdw-oda button.bdw-oda-btn.primary { background: var(--oda-magenta); border-color: var(--oda-magenta); color: #fff; }
.bdw-oda button.bdw-oda-btn.primary:hover { background: var(--oda-magenta-dark); border-color: var(--oda-magenta-dark); }
.bdw-oda button.bdw-oda-btn:disabled { opacity: .5; cursor: not-allowed; }

/* API CTA */
.bdw-oda-api-cta { margin-top: 20px; text-align: center; }
.bdw-oda-api-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--oda-navy), var(--oda-blue));
  color: #fff; text-decoration: none; font-weight: 700;
  padding: 12px 24px; border-radius: var(--oda-r-pill);
  box-shadow: var(--oda-shadow-sm); transition: transform var(--oda-t), box-shadow var(--oda-t);
}
.bdw-oda-api-cta a:hover { transform: translateY(-2px); box-shadow: var(--oda-shadow-md); }

/* Spinner */
.bdw-oda-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--oda-border); border-top-color: var(--oda-magenta);
  animation: bdw-oda-spin .8s linear infinite; margin: 30px auto;
}
@keyframes bdw-oda-spin { to { transform: rotate(360deg); } }

/* ───────────────────────── UX/UI polish ───────────────────────── */
/* Visible keyboard focus on interactive controls */
.bdw-oda button.bdw-oda-btn:focus-visible,
.bdw-oda button.bdw-oda-ac-item:focus-visible,
.bdw-oda-chip button:focus-visible,
.bdw-oda button.bdw-oda-chip-clear:focus-visible,
.bdw-oda button.bdw-oda-map-fit:focus-visible {
  outline: 3px solid var(--oda-yellow);
  outline-offset: 2px;
}

/* Map "fit view" control */
.bdw-oda button.bdw-oda-map-fit {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 6;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1;
  background: rgba(255, 255, 255, .96);
  color: var(--oda-navy);
  border: 1px solid var(--oda-border);
  border-radius: var(--oda-r-sm);
  box-shadow: var(--oda-shadow-sm);
  cursor: pointer;
  transition: background var(--oda-t), color var(--oda-t);
}
.bdw-oda button.bdw-oda-map-fit:hover { background: var(--oda-navy); color: #fff; }

/* Tooltip secondary hint */
.bdw-oda-pop-hint {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  color: var(--oda-magenta);
  font-weight: 700;
}

/* Comparator chips: count + clear */
.bdw-oda-chip-count {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 700; color: var(--oda-text-light);
  padding: 0 4px;
}
.bdw-oda button.bdw-oda-chip-clear {
  border: 1px solid var(--oda-border);
  background: var(--oda-white);
  color: var(--oda-magenta);
  font-family: var(--oda-font-body);
  font-weight: 700; font-size: .8rem;
  padding: 6px 14px;
  border-radius: var(--oda-r-pill);
  cursor: pointer;
  transition: all var(--oda-t);
}
.bdw-oda button.bdw-oda-chip-clear:hover { background: var(--oda-magenta); color: #fff; border-color: var(--oda-magenta); }

/* Disabled inputs (e.g. comparator cap reached) */
.bdw-oda-field input[type="text"]:disabled {
  background: var(--oda-off-white);
  color: var(--oda-text-light);
  cursor: not-allowed;
}

/* Table row hover for readability */
.bdw-oda-table tbody tr { transition: background var(--oda-t); }
.bdw-oda-table tbody tr:hover { background: rgba(221, 19, 103, .06); }

/* ───────────────────────── Responsive ───────────────────────── */
@container (max-width: 640px) {
  .bdw-oda-field { min-width: 100%; }
  .bdw-oda-map-canvas { height: 52vh; min-height: 340px; }
}
@media (max-width: 600px) {
  .bdw-oda { padding: 10px; }
  .bdw-oda-export { justify-content: stretch; }
  .bdw-oda button.bdw-oda-btn { flex: 1 1 auto; justify-content: center; }
  .bdw-oda-muni-hero { flex-direction: column; align-items: flex-start; }
}

/* ───────────────────────── Print (A4) ───────────────────────── */
@media print {
  @page { size: A4; margin: 14mm; }
  /* Only while THIS widget is printing (class set by exportPdf() in datos.js).
   * It used to be an unguarded "body *", which blanked out every other print
   * of the page — including the per-section "Imprimir / PDF" buttons of the
   * b-ods-display ficha now embedded in the "Buscar municipio" tab. */
  body.bdw-oda-printing * { visibility: hidden !important; }
  .bdw-oda.is-printing,
  .bdw-oda.is-printing * { visibility: visible !important; }
  .bdw-oda.is-printing {
    position: absolute; left: 0; top: 0; width: 100%;
    background: #fff !important; padding: 0; border-radius: 0;
  }
  /* Chrome/Edge/Safari skip background colors on print by default — without
   * this, every colored badge/pill/bar (bdw-oda-pill, bdw-oda-dot, bdw-oda-goal
   * bars, chart fills) prints as plain black-on-white. */
  .bdw-oda.is-printing,
  .bdw-oda.is-printing * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .bdw-oda.is-printing .bdw-oda-tabs,
  .bdw-oda.is-printing .bdw-oda-export,
  .bdw-oda.is-printing .bdw-oda-toolbar select,
  .bdw-oda.is-printing .bdw-oda-map-search,
  .bdw-oda.is-printing .bdw-oda-api-cta,
  .bdw-oda.is-printing .bdw-oda-map-loader,
  .bdw-oda.is-printing button.bdw-oda-map-fit,
  .bdw-oda.is-printing .leaflet-control-container { display: none !important; }
  .bdw-oda.is-printing .bdw-oda-panel:not(.is-active) { display: none !important; }
  .bdw-oda.is-printing .bdw-oda-card,
  .bdw-oda.is-printing .bdw-oda-chart-wrap,
  .bdw-oda.is-printing .bdw-oda-table-wrap { box-shadow: none !important; break-inside: avoid; }
  .bdw-oda.is-printing .bdw-oda-map-canvas { height: 150mm; min-height: 0; }
  .bdw-oda.is-printing .bdw-oda-print-header { display: block !important; }
}
.bdw-oda-print-header { display: none; text-align: center; margin-bottom: 10mm; }
.bdw-oda-print-header h1 { color: var(--oda-navy); }
.bdw-oda-print-header p { color: var(--oda-text-light); font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE REFINEMENT — Datos Abiertos
 * Pasada de diseño para tablet y móvil. Todo dentro de @media / @container,
 * así que el render de escritorio no cambia.
 * El widget ya declara `container-type: inline-size`, de modo que las
 * @container también corrigen el caso de una columna estrecha de Elementor
 * en pantalla grande (donde una @media no serviría).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Contenedor estrecho (≤760px de ancho del widget) ───────────────────── */
@container (max-width: 760px) {
	/* Cabecera del mapa: jerarquía más compacta. */
	.bdw-oda-map-head h3 { font-size: 1.05rem; }
	.bdw-oda-map-head p  { font-size: .8rem; }

	/* La barra de herramientas se apila con separación clara entre campos. */
	.bdw-oda-toolbar { padding: 12px; gap: 10px; }

	/* El conmutador ODS / Demografía deja de tener un mínimo de 230px que
	 * lo empujaba fuera de la fila; ahora ocupa el ancho y reparte los
	 * botones a partes iguales. */
	.bdw-oda-field[data-role="map-type-wrap"],
	.bdw-oda-field[data-role="cmp-type-wrap"],
	.bdw-oda-field[data-role="ser-type-wrap"] {
		min-width: 0;
		width: 100%;
		flex: 1 1 100%;
	}
	.bdw-oda-switch { width: 100%; }
	.bdw-oda button.bdw-oda-switch-btn { flex: 1 1 0; text-align: center; padding: 9px 10px; }

	.bdw-oda-map-search { max-width: 100%; }

	/* ---------------------------------------------------------------------
	 * LEYENDA: en escritorio flota sobre la esquina inferior derecha del
	 * mapa. En estrecho tapaba una parte importante del territorio y sus
	 * 220px de ancho máximo cortaban los textos. Pasa a ser una banda
	 * estática bajo el mapa, a ancho completo.
	 * ------------------------------------------------------------------- */
	.bdw-oda-legend {
		position: static;
		max-width: 100%;
		margin-top: 10px;
		padding: 10px 12px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 14px;
		box-shadow: none;
		border-radius: var(--oda-r-sm);
	}
	.bdw-oda-legend h4 { flex: 1 1 100%; margin: 0; }
	.bdw-oda-legend-row { margin: 0; }
	.bdw-oda-legend-gradient { flex: 1 1 100%; margin: 2px 0 0; }
	.bdw-oda-legend-scale { flex: 1 1 100%; }

	/* Botón de encuadre con área táctil cómoda. */
	.bdw-oda button.bdw-oda-map-fit { width: 42px; height: 42px; top: 8px; right: 8px; }

	/* Gráficos y tablas: menos relleno, scroll horizontal contenido. */
	.bdw-oda-chart-wrap { padding: 12px; }
	.bdw-oda-table-wrap {
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}
	.bdw-oda-table { font-size: .82rem; }
	.bdw-oda-table th,
	.bdw-oda-table td { padding: 9px 10px; }

	/* Rejilla de datos del municipio (modo de reserva). */
	.bdw-oda-grid  { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
	.bdw-oda-goals { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
}

/* ── Tablet y móvil (≤860px de viewport) ────────────────────────────────── */
@media (max-width: 860px) {
	/* dvh evita el salto al aparecer/ocultarse la barra del navegador.
	 * max-height actúa de tope incluso si el shortcode fija un `height`
	 * en línea (así no hace falta !important). */
	.bdw-oda-map-canvas {
		height: 58vh;
		height: 58dvh;
		min-height: 360px;
		max-height: 560px;
	}

	/* Pestañas: altura táctil y aviso visual de que hay más a la derecha. */
	.bdw-oda-tabs { gap: 6px; padding-bottom: 6px; }
	.bdw-oda button.bdw-oda-tab { padding: 11px 16px; min-height: 44px; }

	/* Botonera de exportación a ancho completo. */
	.bdw-oda-export { justify-content: stretch; gap: 8px; }
	.bdw-oda button.bdw-oda-btn { flex: 1 1 auto; justify-content: center; min-height: 42px; }

	/* Chips del comparador: no se estrujan al acumularse. */
	.bdw-oda-chips { gap: 6px; }
	.bdw-oda-chip { font-size: .8rem; padding: 6px 8px 6px 12px; }
	.bdw-oda-chip button,
	.bdw-oda .bdw-oda-chip button { width: 26px; height: 26px; }
	.bdw-oda button.bdw-oda-chip-clear { min-height: 38px; }

	/* Conmutador de color: etiqueta encima del control cuando no cabe. */
	.bdw-oda-colorswitch { gap: 8px; }
	.bdw-oda-colorswitch-track { flex: 1 1 auto; }
	.bdw-oda button.bdw-oda-colorswitch-btn { flex: 1 1 0; text-align: center; min-height: 38px; }

	/* La ficha embebida (b-ods-display) ya trae su propio responsive; aquí
	 * sólo se le quita el doble relleno del panel que la envuelve. */
	.bdw-oda-ficha { margin-top: 0; }
}

/* ── Móvil (≤600px) ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.bdw-oda { padding: 10px; border-radius: var(--oda-r-md); }

	.bdw-oda-map-canvas {
		height: 54vh;
		height: 54dvh;
		min-height: 320px;
		max-height: 480px;
	}

	.bdw-oda button.bdw-oda-tab { padding: 10px 14px; font-size: .86rem; }
	.bdw-oda-tab-ico { font-size: 1em; }

	.bdw-oda-card { padding: 14px; }
	.bdw-oda-chart-wrap { padding: 12px 10px; }
	.bdw-oda-chart-legend { gap: 8px 12px; font-size: .78rem; }

	.bdw-oda-section-title { font-size: 1rem; margin: 18px 0 10px; }

	/* Hero del municipio (modo de reserva): la nota deja de ser una
	 * tarjeta descolgada y se alinea con el título. */
	.bdw-oda-muni-hero { padding: 18px 16px; gap: 12px; }
	.bdw-oda-score-badge {
		min-width: 0;
		width: 100%;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 16px;
		text-align: left;
	}
	.bdw-oda-score-badge .num { font-size: 2rem; }

	.bdw-oda-empty { padding: 32px 16px; }
	.bdw-oda-api-cta a { width: 100%; justify-content: center; }
}

/* ── Móvil estrecho (≤400px) ────────────────────────────────────────────── */
@media (max-width: 400px) {
	.bdw-oda { padding: 8px; }
	.bdw-oda-map-canvas { min-height: 300px; }
	.bdw-oda button.bdw-oda-tab { padding: 10px 12px; font-size: .82rem; }
	.bdw-oda-table { font-size: .78rem; min-width: 420px; }
	.bdw-oda-grid { grid-template-columns: 1fr 1fr; }
	.bdw-oda-goals { grid-template-columns: 1fr; }
	.bdw-oda button.bdw-oda-btn { font-size: .8rem; padding: 9px 12px; }
}

/* ── Táctil: sin hovers residuales tras el tap ──────────────────────────── */
@media (hover: none) {
	.bdw-oda-api-cta a:hover { transform: none; box-shadow: var(--oda-shadow-sm); }
	.bdw-oda button.bdw-oda-tab:hover { border-color: var(--oda-border); color: var(--oda-navy); }
	.bdw-oda button.bdw-oda-tab[aria-selected="true"]:hover { border-color: var(--oda-magenta); color: #fff; }
	.bdw-oda-table tbody tr:hover { background: transparent; }
	.bdw-oda-table tbody tr:nth-child(even):hover { background: var(--oda-off-white); }
}