/* Mapa nacional: a interação acontece diretamente nos estados. */
:root {
  --radius-md: 14px;
  --radius-lg: 16px;
  --flag-green: #009c3b;
  --flag-yellow: #ffdf00;
  --flag-blue: #002776;
}

.coverage-map-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-color: var(--primary-pale);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--bg-card), var(--bg-light));
  box-shadow: var(--shadow-lift);
}

.coverage-map-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  pointer-events: none;
  background: radial-gradient(circle at 18% 12%, var(--surface-tint), transparent 42%);
  opacity: .74;
}

.coverage-map-card > * {
  position: relative;
  z-index: 1;
}

.coverage-map-heading {
  margin-bottom: 8px;
}

.state-map {
  padding: 12px 18px 4px;
}

.state-map .state-region path:not(.circle) {
  stroke-width: 1.35;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill var(--motion-standard) var(--motion-ease), stroke var(--motion-standard) var(--motion-ease), transform var(--motion-standard) var(--motion-ease), filter var(--motion-standard) var(--motion-ease);
}

.state-map .state-region:hover path:not(.circle),
.state-map .state-region:focus path:not(.circle) {
  filter: drop-shadow(0 6px 10px var(--primary-pale));
  transform: scale(1.025);
}

.state-map .state-region.is-active-state path:not(.circle) {
  fill: var(--primary-light) !important;
  stroke: var(--bg-card) !important;
  stroke-width: 2.2;
  filter: drop-shadow(0 8px 12px var(--primary-pale));
  transform: scale(1.045);
}

.state-map .state-region.is-active-state {
  animation: state-map-selected var(--motion-standard) var(--motion-ease) both;
}

.state-map .state-region.is-active-state .circle {
  fill: var(--bg-card) !important;
  stroke: var(--primary-light) !important;
}

.state-map .state-region.is-active-state text {
  fill: var(--primary-dark) !important;
}

.coverage-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.coverage-panel::before {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  background: radial-gradient(circle at 100% 0, rgba(65, 153, 255, .18), transparent 38%);
}

.coverage-panel > * {
  position: relative;
}

.coverage-panel__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-sm, 8px);
}

.coverage-panel-tag {
  display: inline-flex;
  width: max-content;
  padding: 6px 9px;
  border: 1px solid rgba(147, 197, 253, .3);
  border-radius: var(--radius-pill, 999px);
  background: rgba(15, 79, 158, .18);
}

.coverage-panel-tag::after {
  content: none;
}

.coverage-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c3dcfa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.coverage-panel__status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #75bcff;
  box-shadow: 0 0 0 4px rgba(117, 188, 255, .12);
}

.coverage-panel h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.state-flag {
  display: inline-flex;
  flex: 0 0 auto;
  width: 44px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--primary-pale), 0 5px 12px rgba(0, 0, 0, .16);
}

.state-flag img,
.state-flag svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map-hint {
  margin-top: 10px;
}

@keyframes state-map-selected {
  from { opacity: .72; }
  to { opacity: 1; }
}

@media (max-width: 620px) {
  .coverage-map-card { padding: 20px; }
  .coverage-map-heading { display: block; }
  .coverage-map-heading p { margin-top: 6px; text-align: left; }
  .state-map { padding: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .state-map .state-region,
  .state-map .state-region path:not(.circle) {
    animation: none;
    transition: none;
  }
}