:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #1EA3BF;
  --primary-weak: rgba(30, 163, 191, 0.14);
  --danger: #dc2626;
  --success: #16a34a;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: inherit; }






/*se der merda remover inicio*/


/* Avatar com foto + fallback para letra */
.mai-avatar-wrap{
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.mai-avatar-wrap .mai-avatar,
.mai-avatar-wrap .mai-avatar--placeholder{
  position: absolute;
  inset: 0;
}

.mai-avatar-wrap.loaded .mai-avatar--placeholder{
  display: none;
}


/*se der merda remover Fim*/









.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

/* Topbar */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
}

.topbar-inner {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.brand-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.topbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.pill {
  border: 1px solid var(--border);
  background: #f9fafb;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}

/* Status */
.api-status {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: #f9fafb;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}

.status-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
}

.status-indicator.offline { background: var(--danger); }

/* Tabs */
.tabs-container {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  gap: 22px;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 14px 0 12px;
  font-size: 15px;
  color: #475569;
  cursor: pointer;
  position: relative;
}

.tab:hover { color: var(--text); }

.tab.active {
  color: var(--primary);
  font-weight: 700;
}

.tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

/* Tabs content */
.tab-content { display: none; }
.tab-content.active { display: block; }

.tab-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 18px;
}

.tab-header h2 {
  margin: 0;
}

.page-title h2 {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.page-subtitle {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
  color: #475569;
}


.comparison-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.comparison-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.comparison-btn:active { transform: translateY(1px); }

.comparison-btn.active {
  border-color: rgba(90, 161, 10, 0.35);
  background: var(--primary-weak);
  color: var(--primary);
  font-weight: 600;
}

/* Selectors */
.territory-selectors {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.selectors-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Layout do separador Nacional (como MAI): mapa à esquerda, resultados à direita */
.national-layout{
  display:grid;
  grid-template-columns: minmax(360px, 520px) 1fr;
  gap: 16px;
  align-items:start;
}

.national-left .selectors-grid{
  grid-template-columns: 1fr;
}

.national-right .results-container{
  margin-top: 0;
}

@media (max-width: 980px){
  .national-layout{ grid-template-columns: 1fr; }
}

.selector-group label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
}

.selector-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 14px;
}

.selector-group select:disabled {
  background: #f9fafb;
  color: var(--muted);
}

.selector-info {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Results layout */
.results-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

.results-container.comparison-mode {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow-x: hidden;
}

.results-box{ min-width: 0; }

.results-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* 2021 em cinzento (comparação) */
#global-results-2021,
#national-results-2021,
#foreign-results-2021{
  background: #f3f4f6;
  border-color: #e5e7eb;
}
#global-results-2021 .results-title,
#national-results-2021 .results-title,
#foreign-results-2021 .results-title{
  color: #334155;
}
#global-results-2021 .mai-row--winner,
#national-results-2021 .mai-row--winner,
#foreign-results-2021 .mai-row--winner{
  background: rgba(148,163,184,0.18);
}

.results-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.results-grid {
  display: block;
}


/* Results list — estilo MAI */
.mai-results {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7f9fb;
}

.mai-results-list {
  padding: 22px 18px;
  background: #f3f6f8;
}

.mai-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

.mai-row--winner {
  background: rgba(30, 163, 191, 0.10);
  padding: 10px 12px;
  margin: 0 -12px;
}

.mai-candidate {
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.mai-name {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  text-align: right;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mai-avatar {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  object-fit: cover;
  flex: 0 0 auto;
}

.mai-avatar--placeholder,
.mai-avatar--empty {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #f1f5f9;
}

.mai-avatar--empty {
  border: 0;
  background: transparent;
}

.mai-avatar--placeholder {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  color: #64748b;
}

.mai-bar {
  flex: 1;
  border-left: 1px solid #cbd5e1;
  padding-left: 14px;
}

.mai-track {
  height: 18px;
  background: transparent;
}

.mai-row--winner .mai-track {
  background: rgba(90, 161, 10, 0.16);
}

.mai-fill {
  height: 18px;
  background: var(--candidate-color, var(--primary));
  width: 0%;
  transition: width 850ms ease;
}

.mai-metrics {
  width: 210px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.mai-pct {
  font-size: 18px;
  font-weight: 800;
  color: #475569;
  font-variant-numeric: tabular-nums;
  min-width: 86px;
}

.mai-votes {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.mai-separator {
  height: 14px;
  border-top: 1px solid #e2e8f0;
  margin: 8px 0 2px;
}

.mai-row--extra .mai-name {
  font-weight: 800;
  color: #334155;
}

@media (max-width: 860px) {
  .mai-results-list { padding: 16px 12px; }
  .mai-row { flex-wrap: wrap; gap: 10px; }
  .mai-candidate { width: 100%; justify-content: flex-start; }
  .mai-name { text-align: right; max-width: none; }
  .mai-bar { width: 100%; border-left: 0; padding-left: 0; }
  .mai-metrics { width: 100%; justify-content: flex-start; }
}

/* Stats */
.total-results {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.total-results h3 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.total-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stat-item {
  border: 1px solid var(--border);
  background: #f9fafb;
  border-radius: 12px;
  padding: 10px 12px;
}

.stat-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stat-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* Helpers */
.loading-container {
  padding: 18px 0;
  display: grid;
  gap: 10px;
  justify-items: center;
  color: var(--muted);
}

.spinner {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--primary);
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error-container {
  border: 1px solid rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.06);
  border-radius: 12px;
  padding: 12px;
  color: #7f1d1d;
}

.error-container h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.error-container p {
  margin: 0;
  font-size: 13px;
}

.comparison-note {
  margin-top: 16px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
}

.footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.footer-inner {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.muted { color: var(--muted); }

/* Responsive */
@media (max-width: 1020px) {
  .comparison-mode .results-container,
  .results-container.comparison-mode,
  .compare-on .results-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow-x:hidden; }
  .selectors-grid { grid-template-columns: 1fr; }
  .total-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .topbar-inner { flex-direction: column; align-items: flex-start; }
  .topbar-meta { justify-content: flex-start; }

  .results-row {
    grid-template-columns: 28px 1fr;
    grid-template-areas:
      "rank name"
      "bar bar"
      "votes pct";
  }

  .results-row > .results-rank { grid-area: rank; }
  .results-row > .results-name { grid-area: name; }
  .results-row > .results-bar { grid-area: bar; }
  .results-row > .results-votes { grid-area: votes; text-align: left; }
  .results-row > .results-pct { grid-area: pct; }

  .results-row--head { display: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* =========================
   MAPA — vencedor por zona
========================= */
.map-panel{
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  position: relative;
}

.map-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 10px;
}

.map-subtitle{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.map-tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.map-updated{
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
  background: #f9fafb;
}

.map-refresh{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  cursor:pointer;
}

.map-stack{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.map-insets{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 980px){
  .map-insets{ grid-template-columns: 1fr; }
}

.map-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

.map-box{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f7f9fb;
  padding: 10px;
  position: relative;
}

.map-box-title{
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 6px;
}

.map-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.map-svg{
  width: 100%;
  height: 420px;
  display:block;
}

.map-svg--inset{
  height: 160px;
}

.map-region{
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  cursor:pointer;
  transition: opacity 140ms ease, transform 140ms ease;
}

.map-region:hover{
  opacity: 0.92;
  transform: translateY(-0.5px);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.08));
}

.map-region.is-selected{
  stroke: #111827;
  stroke-width: 2.2;
}

.map-tooltip{
  position: fixed;
  z-index: 9999;
  background: rgba(17,24,39,0.95);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  max-width: 260px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 80ms ease;

  top: 0;
  left: 0;}

.map-tooltip.show{ opacity: 1; }

.map-tooltip .tt-title{
  font-weight: 800;
  margin-bottom: 4px;
}

.map-tooltip .tt-line{
  display:flex;
  align-items:center;
  gap:8px;
}

.tt-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
}

.map-legend{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  max-height: 180px;
  overflow: auto;
}

.map-legend-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 0;
  border-bottom: 1px dashed #e5e7eb;
}

.map-legend-item:last-child{ border-bottom:0; }

.map-legend-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.map-swatch{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex:0 0 auto;
}

.map-legend-name{
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.map-legend-count{
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px){
  .map-grid{ grid-template-columns:1fr; }
  .map-svg{ height: 360px; }
  .map-svg--inset{ height: 160px; }
  .map-legend{ max-height: 260px; }
}


/* Modal: Mapa grande */
.map-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}
.map-modal.is-open{ display: block; }
.map-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.65);
}
.map-modal-content{
  position: absolute;
  inset: 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}
.map-modal-title{
  font-weight: 900;
  color: #0f172a;
}
.map-modal-close{
  border: 1px solid #e5e7eb;
  background: #fff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.map-modal-close:hover{ background:#f8fafc; }
.map-modal-body{
  flex: 1;
  padding: 12px;
  overflow: auto;
  background: #f8fafc;
}

/* Map modal: centrar o mapa em fullscreen e evitar “espaço morto” */
.map-modal-body{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.map-modal-body > .map-panel.fullscreen{
  width: 100%;
  max-width: none;
  margin: 0;
}
body.modal-open{ overflow: hidden; }

/* Ajustes do mapa em fullscreen */
.map-panel.fullscreen .map-svg{ height: 62vh; min-height: 520px; }
.map-panel.fullscreen .map-svg--inset{ height: 240px; }

/* --- National modebar (Mapa / Localidades) --- */
.national-modebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.mode-toggle{
  display:flex;
  gap:8px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
}
.mode-btn{
  padding: 8px 12px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
  font-size: 12px;
  color: #334155;
}
.mode-btn.active{
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.mode-clear{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  font-size: 12px;
}
.mode-clear:hover{ background:#f8fafc; }
.mode-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.mode-openmap{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  font-size: 12px;
  display:none; /* só quando o mapa está oculto */
}
.mode-openmap:hover{ background:#f8fafc; }

/* Mostrar "Abrir mapa" quando estivermos no modo Localidades ou em ecrã pequeno */
#national.local-mode .mode-openmap{ display:inline-flex; }
#national.compact .mode-openmap{ display:inline-flex; }

#national.local-mode #map-panel:not(.fullscreen){ display:none; }

/* --- Nacional: Mapa vs Localidades (estilo MAI) --- */
#national:not(.local-mode) .territory-selectors{ display:none; }
#national.local-mode .territory-selectors{ display:flex; }

/* --- Map loading overlay --- */
.map-panel{ position: relative; }
.map-loading{
  position:absolute;
  left:0; right:0; bottom:0;
  top: 54px; /* abaixo do header do mapa */
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 10px;
  background: rgba(248,250,252,0.86);
  backdrop-filter: blur(2px);
  z-index: 50;
  pointer-events: all;
}
.map-loading.is-active{ display:flex; }
.map-loading-text{ font-weight: 800; color:#334155; font-size: 12px; }

/* Fullscreen: insets ao lado (não em baixo) */
.map-panel.fullscreen .map-stack{
  display:grid !important;
  grid-template-columns: 3fr 1.1fr !important;
  grid-template-rows: 1fr auto !important;
  align-items:start;
}
.map-panel.fullscreen .map-stack > .map-box{ grid-column: 1; grid-row: 1; }
.map-panel.fullscreen .map-stack > .map-insets{ grid-column: 2; grid-row: 1; }
.map-panel.fullscreen .map-stack > .map-legend{ grid-column: 1 / span 2; grid-row: 2; }
.map-panel.fullscreen .map-insets{
  grid-template-columns: 1fr !important;
  display:grid !important;
}


/* --- Atualização do mapa: Portugal (continente + ilhas) num único SVG --- */
.map-insets { display: none !important; }

/* Em fullscreen, sem coluna vazia à direita */
.map-panel.fullscreen .map-stack { grid-template-columns: 1fr !important; }

/* Tooltip sempre acima de tudo */
.map-tooltip { z-index: 99999 !important; }

/* Pequeno toque visual */
.map-region { cursor: pointer; }


.map-hoverbox{
  position: fixed;
  z-index: 99998;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 10px 12px;
  max-width: 340px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  pointer-events: none;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 80ms ease;
  display: none;

  top: 0;
  left: 0;}

.map-hoverbox.show{
  display: block;
  opacity: 1;
}

.map-hoverbox .hb-title{
  font-weight: 800;
  margin-bottom: 4px;
  color: #111827;
}

.map-hoverbox .hb-line{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 12px;
  line-height: 1.2;
}

/* Fullscreen: sem 'insets' */
.map-panel.fullscreen .map-stack{ display:flex !important; flex-direction:column !important; }


/* Compact (móvel): não mostrar o mapa no layout (mantém acesso via botão "Abrir mapa") */
#national.compact #map-panel:not(.is-open){ display:none; }

/* Comparação: usar o ecrã todo (ocultar filtros/mapa) */
#national.compare-on .national-left{ display:none; }
#national.compare-on .national-layout{ grid-template-columns: 1fr; }
#foreign.compare-on .territory-selectors{ display:none; }
#foreign.compare-on .mode-actions{ display:none; }

/* Compact: comparação lado a lado sem barras (estilo MAI “lista”) */
@media (max-width: 720px){
  .compare-on .results-container,
  .results-container.comparison-mode{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow-x:hidden;
  }
  .compare-on .mai-bar{ display:none; }
  .compare-on .mai-row{
    gap: 8px;
    padding: 6px 0;
  }
  .compare-on .mai-candidate{
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .compare-on .mai-name{
    font-size: 12px;
  }
  .compare-on .mai-metrics{
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .compare-on .mai-pct{
    font-size: 12px;
    font-weight: 900;
  }
  .compare-on .mai-votes{
    font-size: 11px;
  }
}



#national.compact #map-panel.is-open{ display:block; }


/* =========================================================
   Tuning “à MAI” — mais espaço para barras e menos desperdício
   (Overrides — colocado no fim para não partir o layout existente)
========================================================= */
.container,
.topbar-inner,
.tabs-container{
  width: min(1400px, calc(100% - 24px));
}

.container{
  padding: 18px 0 34px;
}

/* Território Nacional: mapa mais compacto, resultados mais largos */
.national-layout{
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: 12px;
}

@media (max-width: 980px){
  .national-layout{ grid-template-columns: 1fr; }
}

/* Menos “ar” nos cartões para ganhar largura útil */
.results-container{ gap: 12px; }
.results-box{ padding: 12px; }
.territory-selectors{ padding: 12px; }

.map-panel{
  padding: 12px;
  margin-top: 12px;
}
.map-panel-head{ margin-bottom: 8px; }
.map-box{ padding: 8px; }
.map-box-title{ margin-bottom: 4px; }

/* Lista de resultados: nome à esquerda + barras mais largas */
.mai-results-list{
  padding: 16px 14px;
}

@media (min-width: 861px){
  .mai-row{
    gap: 10px;
  }

  /* Bloco do candidato mais estreito e alinhado à esquerda */
  .mai-candidate{
    width: 240px;
    justify-content: space-between;
  }

  .mai-name{
    text-align: right;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Menos “recuo” antes da barra */
  .mai-bar{
    padding-left: 10px;
  }

  /* Métricas um pouco mais compactas */
  .mai-metrics{
    width: 190px;
    gap: 10px;
  }

  .mai-pct{
    min-width: 78px;
    font-size: 18px;
  }
}

/* Ajuste fino do destaque do vencedor (menos overflow lateral) */
.mai-row--winner{
  margin: 0 -10px;
  padding: 10px 10px;
}