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

.bdw-orr {
  /* Brand tokens (local fallbacks so it works outside Elementor) */
  --orr-magenta: #DD1367;
  --orr-magenta-dark: #C00F58;
  --orr-navy: #19486A;
  --orr-navy-dark: #0F2D42;
  --orr-yellow: #FCC30B;
  --orr-blue: #0A97D9;

  /* Compliance semaphore (4 levels) */
  --orr-green: #4C9F38;
  --orr-yellow-c: #FCC30B;
  --orr-orange: #FD6925;
  --orr-red: #E5243B;
  --orr-none: #D7DBE0;

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

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

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

  --orr-shadow-sm: 0 2px 10px rgba(15, 45, 66, 0.07);
  --orr-shadow-md: 0 6px 24px rgba(15, 45, 66, 0.10);

  --orr-t: 200ms cubic-bezier(0.22, 1, 0.36, 1);

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

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

.bdw-orr h1, .bdw-orr h2, .bdw-orr h3, .bdw-orr h4 {
  font-family: var(--orr-font-display);
  color: var(--orr-navy);
  line-height: 1.15;
  margin: 0 0 .4em;
}

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

/* ───────────────────────── Toolbar / fields ───────────────────────── */
.bdw-orr-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  background: var(--orr-white);
  border: 1px solid var(--orr-border);
  border-radius: var(--orr-r-md);
  padding: 14px;
  box-shadow: var(--orr-shadow-sm);
  margin-bottom: 12px;
}
.bdw-orr-field { display: flex; flex-direction: column; gap: 5px; min-width: 140px; position: relative; }
.bdw-orr-field-grow { flex: 1 1 260px; }
/* The ODS/Demografía switch needs more room than a plain select; without this
   it can get squeezed below its own content width by the toolbar's flex-shrink
   and the buttons spill outside the pill background. */
.bdw-orr-field[data-role="type-wrap"] { min-width: 230px; flex-shrink: 0; }
.bdw-orr-field label,
.bdw-orr-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--orr-text-light);
}
.bdw-orr select,
.bdw-orr input[type="text"] {
  font-family: var(--orr-font-body);
  font-size: .95rem;
  color: var(--orr-text);
  background: var(--orr-white);
  border: 1px solid var(--orr-border);
  border-radius: var(--orr-r-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color var(--orr-t), box-shadow var(--orr-t);
  appearance: none;
}
.bdw-orr select:focus,
.bdw-orr input[type="text"]:focus {
  outline: none;
  border-color: var(--orr-magenta);
  box-shadow: 0 0 0 3px rgba(221, 19, 103, .14);
}
.bdw-orr select:disabled {
  cursor: wait;
  opacity: .6;
  background-color: var(--orr-bg);
}
.bdw-orr select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2319486A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

/* ───────────────────────── ODS / Demo switch ───────────────────────── */
.bdw-orr-switch {
  display: inline-flex;
  background: var(--orr-bg);
  border: 1px solid var(--orr-border);
  border-radius: var(--orr-r-pill);
  padding: 3px;
  gap: 2px;
}
.bdw-orr-switch-btn {
  border: none;
  background: transparent;
  color: var(--orr-navy);
  font-family: var(--orr-font-body);
  font-weight: 800;
  font-size: .9rem;
  padding: 8px 18px;
  border-radius: var(--orr-r-pill);
  cursor: pointer;
  transition: all var(--orr-t);
  white-space: nowrap;
}
.bdw-orr-switch-btn:hover { color: var(--orr-magenta); }
.bdw-orr-switch-btn.is-active {
  background: var(--orr-magenta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(221, 19, 103, .30);
}
.bdw-orr-switch-btn:focus-visible { outline: 3px solid var(--orr-yellow); outline-offset: 2px; }

/* ───────────────────────── Sub bar (search + export) ───────────────────────── */
.bdw-orr-subbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bdw-orr-search { flex: 1 1 240px; max-width: 360px; position: relative; }
.bdw-orr-search-input { width: 100%; padding-right: 34px; }
.bdw-orr-search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--orr-text-light);
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--orr-t), color var(--orr-t);
}
.bdw-orr-search-clear:hover { background: var(--orr-bg); color: var(--orr-magenta); }
.bdw-orr-search-clear:focus-visible { outline: 3px solid var(--orr-yellow); outline-offset: 1px; }
.bdw-orr-search-clear.is-hidden { display: none; }

.bdw-orr-field.is-hidden { display: none !important; }

/* ── Export: single dropdown button + menu ── */
.bdw-orr-export { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.bdw-orr-export-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 230px;
  background: var(--orr-white);
  border: 1px solid var(--orr-border);
  border-radius: var(--orr-r-md);
  box-shadow: var(--orr-shadow-md);
  padding: 6px;
  display: none;
  animation: bdw-orr-pop var(--orr-t);
}
.bdw-orr-export-menu.is-open { display: block; }
@keyframes bdw-orr-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bdw-orr-export-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--orr-navy);
  font-family: var(--orr-font-body);
  font-weight: 700;
  font-size: .9rem;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--orr-r-sm);
  cursor: pointer;
  transition: background var(--orr-t);
}
.bdw-orr-export-item:hover { background: var(--orr-bg); }
.bdw-orr-export-item .bdw-orr-export-ico {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--orr-r-sm);
  background: rgba(221, 19, 103, .10);
  font-size: 1rem;
}
.bdw-orr-export-item small { display: block; font-weight: 600; color: var(--orr-text-light); font-size: .74rem; }
.bdw-orr-export-item b { display: block; font-weight: 800; }
.bdw-orr-export-scope {
  padding: 8px 12px 4px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--orr-text-light);
  border-top: 1px solid var(--orr-border);
  margin-top: 4px;
}
.bdw-orr-caret { transition: transform var(--orr-t); }
.bdw-orr-btn[aria-expanded="true"] .bdw-orr-caret { transform: rotate(180deg); }

.bdw-orr-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--orr-border);
  background: var(--orr-white);
  color: var(--orr-navy);
  font-family: var(--orr-font-body);
  font-weight: 700;
  font-size: .88rem;
  padding: 9px 15px;
  border-radius: var(--orr-r-pill);
  cursor: pointer;
  transition: all var(--orr-t);
  white-space: nowrap;
}
.bdw-orr-btn:hover:not(:disabled) { border-color: var(--orr-magenta); color: var(--orr-magenta); transform: translateY(-1px); }
.bdw-orr-btn:disabled { opacity: .45; cursor: not-allowed; }
.bdw-orr-btn.primary {
  background: var(--orr-magenta);
  border-color: var(--orr-magenta);
  color: #fff;
}
.bdw-orr-btn.primary:hover:not(:disabled) { background: var(--orr-magenta-dark); color: #fff; }
.bdw-orr-btn:focus-visible { outline: 3px solid var(--orr-yellow); outline-offset: 2px; }

/* ───────────────────────── Capture area (head + table) ───────────────────────── */
.bdw-orr-capture {
  background: var(--orr-white);
  border: 1px solid var(--orr-border);
  border-radius: var(--orr-r-md);
  box-shadow: var(--orr-shadow-sm);
  overflow: hidden;
}

.bdw-orr-head {
  display: none;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--orr-navy) 0%, var(--orr-navy-dark) 100%);
  color: #fff;
}
.bdw-orr-head.is-visible { display: block; }
.bdw-orr-head h2 { color: #fff; font-size: clamp(1.1rem, 3cqw, 1.5rem); margin: 0; }
.bdw-orr-head .bdw-orr-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
  font-size: .85rem;
  color: rgba(255,255,255,.85);
}
.bdw-orr-head .bdw-orr-goal-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: var(--orr-r-pill);
  color: #fff;
  font-size: .8rem;
}
.bdw-orr-head-count { font-weight: 800; }

/* ───────────────────────── Legend ───────────────────────── */
.bdw-orr-legend {
  display: none;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--orr-border);
  background: #fbfcfd;
  font-size: .8rem;
  color: var(--orr-text-mid);
}
.bdw-orr-legend.is-visible { display: flex; }
.bdw-orr-legend-title { font-weight: 800; color: var(--orr-navy); margin-right: 2px; }
.bdw-orr-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 5px 13px 5px 9px;
  border-radius: var(--orr-r-pill);
  border: 1.5px solid var(--orr-border);
  background: var(--orr-white);
  font-family: var(--orr-font-body);
  font-size: .78rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--orr-text-mid);
  transition: all var(--orr-t);
  user-select: none;
}
.bdw-orr-legend-item:focus-visible { outline: 3px solid var(--orr-yellow); outline-offset: 2px; }
.bdw-orr-legend-item:hover { border-color: var(--orr-navy); color: var(--orr-navy); transform: translateY(-1px); }
.bdw-orr-legend-item.is-active {
  color: #fff;
  border-color: transparent;
  box-shadow: var(--orr-shadow-sm);
}
.bdw-orr-legend-item.is-active.green  { background: var(--orr-green); }
.bdw-orr-legend-item.is-active.yellow { background: var(--orr-yellow-c); color: #5c4700; }
.bdw-orr-legend-item.is-active.orange { background: var(--orr-orange); }
.bdw-orr-legend-item.is-active.red    { background: var(--orr-red); }
.bdw-orr-legend-item.is-active.none   { background: var(--orr-navy); }
.bdw-orr-legend-item.is-active.all    { background: var(--orr-navy); }
.bdw-orr-legend.has-filter .bdw-orr-legend-item:not(.is-active) { opacity: .45; }
.bdw-orr-legend-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.bdw-orr-legend-dot.green  { background: var(--orr-green); }
.bdw-orr-legend-dot.yellow { background: var(--orr-yellow-c); }
.bdw-orr-legend-dot.orange { background: var(--orr-orange); }
.bdw-orr-legend-dot.red    { background: var(--orr-red); }
.bdw-orr-legend-dot.none   { background: var(--orr-none); }
.bdw-orr-legend-dot.all {
  background: conic-gradient(var(--orr-green) 0 25%, var(--orr-yellow-c) 0 50%, var(--orr-orange) 0 75%, var(--orr-red) 0);
}
.bdw-orr-legend-count { font-weight: 800; opacity: .75; font-size: .92em; }

/* ───────────────────────── Body / states ───────────────────────── */
.bdw-orr-body { position: relative; min-height: 120px; }
.bdw-orr-empty,
.bdw-orr-loading,
.bdw-orr-error {
  padding: 44px 20px;
  text-align: center;
  color: var(--orr-text-light);
  font-weight: 600;
}
.bdw-orr-error { color: var(--orr-red); }
.bdw-orr-spinner {
  display: inline-block;
  width: 30px; height: 30px;
  border: 3px solid rgba(221,19,103,.2);
  border-top-color: var(--orr-magenta);
  border-radius: 50%;
  animation: bdw-orr-spin .8s linear infinite;
  margin-bottom: 12px;
}
@keyframes bdw-orr-spin { to { transform: rotate(360deg); } }

/* ───────────────────────── Table ───────────────────────── */
.bdw-orr-table-wrap { overflow-x: auto; }
.bdw-orr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.bdw-orr-table thead th {
  position: sticky;
  top: 0;
  background: var(--orr-navy);
  color: #fff;
  font-family: var(--orr-font-body);
  font-weight: 800;
  text-align: left;
  padding: 12px 14px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  z-index: 2;
}
.bdw-orr-table thead th.num { text-align: right; }
.bdw-orr-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--orr-border);
  vertical-align: middle;
}
.bdw-orr-table tbody tr:nth-child(even) { background: #fafbfc; }
.bdw-orr-table tbody tr:hover { background: rgba(221,19,103,.05); }

.bdw-orr-pos {
  font-family: var(--orr-font-display);
  font-weight: 700;
  color: var(--orr-navy);
  width: 64px;
  text-align: center;
}
.bdw-orr-pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 8px;
  border-radius: var(--orr-r-pill);
  background: var(--orr-bg);
  font-size: .85rem;
}
.bdw-orr-table tbody tr:nth-child(1) .bdw-orr-pos-badge { background: #FCC30B; color: #5c4700; }
.bdw-orr-table tbody tr:nth-child(2) .bdw-orr-pos-badge { background: #d7dde3; color: #3a4956; }
.bdw-orr-table tbody tr:nth-child(3) .bdw-orr-pos-badge { background: #e8b578; color: #5c3a10; }

.bdw-orr-muni { font-weight: 700; color: var(--orr-text); }
.bdw-orr-ccaa { color: var(--orr-text-mid); }
.bdw-orr-value { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bdw-orr-value .bdw-orr-unit { font-weight: 600; color: var(--orr-text-light); font-size: .82em; margin-left: 3px; }

.bdw-orr-cell-state { width: auto; white-space: nowrap; }
.bdw-orr-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bdw-orr-state-text { font-weight: 700; font-size: .88em; color: var(--orr-text-mid); }
.bdw-orr-dot {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  vertical-align: middle;
  flex: 0 0 auto;
}
.bdw-orr-dot.green  { background: var(--orr-green); }
.bdw-orr-dot.yellow { background: var(--orr-yellow-c); }
.bdw-orr-dot.orange { background: var(--orr-orange); }
.bdw-orr-dot.red    { background: var(--orr-red); }
.bdw-orr-dot.none,
.bdw-orr-dot.data   { background: var(--orr-none); }

.bdw-orr-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--orr-r-pill);
  font-size: .74rem;
  font-weight: 800;
  color: #fff;
}
.bdw-orr-pill.green  { background: var(--orr-green); }
.bdw-orr-pill.yellow { background: var(--orr-yellow-c); color: #5c4700; }
.bdw-orr-pill.orange { background: var(--orr-orange); }
.bdw-orr-pill.red    { background: var(--orr-red); }
.bdw-orr-pill.none,
.bdw-orr-pill.data   { background: var(--orr-none); color: var(--orr-text-mid); }

/* ───────────────────────── Pager ───────────────────────── */
.bdw-orr-pager {
  display: none;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.bdw-orr-pager.is-visible { display: flex; }
.bdw-orr-pager-info { font-size: .85rem; color: var(--orr-text-mid); font-weight: 600; }
.bdw-orr-pager-info b { color: var(--orr-navy); }
.bdw-orr-pager-nav { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bdw-orr-page-btn {
  min-width: 38px;
  border: 1px solid var(--orr-border);
  background: var(--orr-white);
  color: var(--orr-navy);
  font-family: var(--orr-font-body);
  font-weight: 700;
  font-size: .85rem;
  padding: 8px 12px;
  border-radius: var(--orr-r-sm);
  cursor: pointer;
  transition: all var(--orr-t);
}
.bdw-orr-page-btn:hover:not(:disabled) { border-color: var(--orr-magenta); color: var(--orr-magenta); }
.bdw-orr-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.bdw-orr-page-btn.is-current {
  background: var(--orr-magenta);
  border-color: var(--orr-magenta);
  color: #fff;
}
.bdw-orr-page-ellipsis { padding: 0 4px; color: var(--orr-text-light); }
.bdw-orr-page-btn:focus-visible,
.bdw-orr-switch-btn:focus-visible { outline: 3px solid var(--orr-yellow); outline-offset: 2px; }

/* ───────────────────────── Print header (hidden on screen) ───────────────────────── */
.bdw-orr-print-header { display: none; }

/* ───────────────────────── Responsive ───────────────────────── */
@container (max-width: 640px) {
  .bdw-orr-field { min-width: 100%; }
  .bdw-orr-field-grow { flex-basis: 100%; }
  .bdw-orr-table thead th.hide-sm,
  .bdw-orr-table tbody td.hide-sm { display: none; }
}

/* ───────────────────────── Print / PDF ───────────────────────── */
@media print {
  /* Only while THIS widget is printing (body class set by printView() in
   * ranking.js). It used to be an unguarded "body *", which blanked out every
   * other print of the page — e.g. Ctrl+P on the municipio ficha, which embeds
   * this ranking, printed only empty pages. Same fix as b-ods-datos 1.4.x. */
  body.bdw-orr-printing * { visibility: hidden !important; }
  .bdw-orr.is-printing,
  .bdw-orr.is-printing * { visibility: visible !important; }
  .bdw-orr.is-printing {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    padding: 0;
    background: #fff;
  }
  .bdw-orr.is-printing .bdw-orr-toolbar,
  .bdw-orr.is-printing .bdw-orr-subbar,
  .bdw-orr.is-printing .bdw-orr-pager { display: none !important; }
  .bdw-orr.is-printing .bdw-orr-print-header {
    display: block !important;
    margin-bottom: 14px;
  }
  .bdw-orr.is-printing .bdw-orr-print-header h1 {
    font-size: 18pt;
    color: #19486A;
    margin: 0 0 4px;
  }
  .bdw-orr.is-printing .bdw-orr-print-header p {
    font-size: 10pt;
    color: #555;
    margin: 0;
  }
  .bdw-orr.is-printing .bdw-orr-capture {
    box-shadow: none;
    border: none;
  }
  .bdw-orr.is-printing .bdw-orr-table thead th {
    background: #19486A !important;
    color: #fff !important;
  }
  /* Catch-all instead of a hand-picked class list (dot/pill/goal-pill/head):
   * anything colored — including legend swatches, state pills, etc. — should
   * keep its color on print, not just the few spots enumerated before. */
  .bdw-orr.is-printing,
  .bdw-orr.is-printing * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  @page { size: A4 portrait; margin: 12mm; }
}

/* ───────────────────────── Defensas frente al tema / contenido (1.2.4) ─────────────────────────
 * 1) En producción la página /ranking-de-municipios/ tiene el shortcode
 *    dentro de un párrafo con formato "código" (<p><code>[ods_ranking]</code></p>).
 *    El navegador mete todo el widget dentro de ese <code> y el texto heredaba
 *    la fuente monoespaciada (etiquetas y mensaje vacío en Courier).
 *    Neutralizamos cualquier <code> que envuelva el contenido del widget.
 * 2) El reset de Hello Elementor (button, [type=button] { border:1px solid #c36;
 *    border-radius:3px; color:#c36 }) se carga después y deformaba el botón
 *    inactivo "Demografía" del conmutador. Más especificidad, sin !important. */
.bdw-orr code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  white-space: normal;
  display: contents;
}
.bdw-orr .bdw-orr-switch button.bdw-orr-switch-btn {
  border: 0;
  border-radius: var(--orr-r-pill);
  background: transparent;
  color: var(--orr-navy);
  padding: 8px 18px;
  min-height: 0;
  line-height: 1.4;
}
.bdw-orr .bdw-orr-switch button.bdw-orr-switch-btn:hover { color: var(--orr-magenta); background: transparent; }
.bdw-orr .bdw-orr-switch button.bdw-orr-switch-btn.is-active,
.bdw-orr .bdw-orr-switch button.bdw-orr-switch-btn.is-active:hover {
  background: var(--orr-magenta);
  color: #fff;
}