/* ======================================================================
   V21.8 — Mapa das Origens unificado
   Objetivo: corrigir cards cortados no mapa e remover ícones/emoji fora do padrão.
   Esta camada carrega depois do CSS principal, home-unified e profile-unified.
   ====================================================================== */

/* Topo/resumo do Mapa das Origens: troca emojis por máscaras do padrão UI */
html[data-theme] body[data-active-view="originsMap"] #originsSummary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 12px 16px !important;
  overflow: hidden !important;
}

html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat::before {
  content: '' !important;
  flex-shrink: 0 !important;
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  color: var(--home-gold, #c4953a) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 18px 18px !important;
  mask-size: 18px 18px !important;
}

html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat:nth-child(1)::before {
  -webkit-mask-image: var(--icon-map) !important;
  mask-image: var(--icon-map) !important;
}
html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat:nth-child(2)::before {
  -webkit-mask-image: var(--icon-document) !important;
  mask-image: var(--icon-document) !important;
}
html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat:nth-child(3)::before {
  -webkit-mask-image: var(--icon-tree) !important;
  mask-image: var(--icon-tree) !important;
}

html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat strong,
html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat span {
  grid-column: unset !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat strong {
  display: block !important;
  font-size: 1.35rem !important;
  line-height: 1.1 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat span {
  display: block !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
}

/* Mapa principal: não deixa cards de país escapar/cortar nas bordas */
html[data-theme] body[data-active-view="originsMap"] .memorial-world-stage {
  overflow: hidden !important;
  min-height: clamp(420px, 47vw, 620px) !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin {
  z-index: 20 !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-dot {
  width: 22px !important;
  height: 22px !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-card {
  width: clamp(132px, 15vw, 190px) !important;
  min-height: auto !important;
  max-width: min(190px, 42vw) !important;
  padding: 12px 14px !important;
  top: -44px !important;
  left: 28px !important;
  right: auto !important;
  gap: 3px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.pin-edge-right .pin-card {
  left: auto !important;
  right: 28px !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.pin-edge-top .pin-card {
  top: 24px !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.pin-edge-bottom .pin-card {
  top: auto !important;
  bottom: 24px !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-br .pin-card,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-ar .pin-card {
  top: -30px !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-title strong,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-card small,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-card em {
  display: block !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-title strong {
  font-size: .98rem !important;
  line-height: 1.15 !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-card small {
  color: var(--home-gold, #c4953a) !important;
  font-weight: 900 !important;
  font-size: .78rem !important;
  line-height: 1.15 !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-card em {
  font-style: normal !important;
  font-size: .84rem !important;
  line-height: 1.2 !important;
  color: var(--home-text, currentColor) !important;
}

/* Bandeiras dentro dos pins ficam como pequenos marcadores, não como ícones principais do sistema */
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .flag-wave,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .flag-icon {
  flex: 0 0 auto !important;
  width: 1.55rem !important;
  height: 1.05rem !important;
  border-radius: .24rem !important;
}


/* V21.8 — evita sobreposição Espanha/Japão e outros países europeus próximos.
   Esses pins abrem o card para a esquerda, enquanto Japão/Rússia também ficam para a esquerda
   por estarem na borda direita do mapa. */
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-es .pin-card,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-pt .pin-card,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-it .pin-card,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-fr .pin-card,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-de .pin-card,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-gb .pin-card,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-uk .pin-card {
  left: auto !important;
  right: 28px !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-es .pin-card {
  top: -52px !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin.country-jp .pin-card {
  top: -28px !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin:focus-visible .pin-card,
html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin:hover .pin-card {
  z-index: 40 !important;
}

/* Linha do tempo do mapa: mantém legível e sem cortar textos grandes */
html[data-theme] body[data-active-view="originsMap"] .memorial-world-timeline {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}

html[data-theme] body[data-active-view="originsMap"] .memorial-world-timeline span {
  min-width: 0 !important;
  text-align: center !important;
}

@media (max-width: 1180px) {
  html[data-theme] body[data-active-view="originsMap"] #originsSummary {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  html[data-theme] body[data-active-view="originsMap"] .memorial-world-stage {
    min-height: 330px !important;
  }

  html[data-theme] body[data-active-view="originsMap"] .memorial-map-pin .pin-card {
    display: none !important;
  }

  html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat {
    min-height: 86px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    padding: 14px !important;
  }
}


/* =============================================================================
   V22 — MAPA DAS ORIGENS: redesign visual dos origin-cards e seção de lista
   Substituição do visual pergaminho genérico por cards premium por tema.
   ============================================================================= */

/* ── Layout da lista de cards ── */
html[data-theme] body[data-active-view="originsMap"] #originsList {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* ── Card premium base ── */
html[data-theme] body[data-active-view="originsMap"] .origin-card-premium {
  display: grid !important;
  grid-template-columns: 6.5rem 1fr !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(166,112,47,.22) !important;
  background: linear-gradient(135deg, rgba(255,252,241,.98), rgba(248,230,190,.86)) !important;
  box-shadow: 0 8px 24px rgba(80,50,14,.10), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition: box-shadow 140ms ease, transform 140ms ease !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-card-premium:hover {
  box-shadow: 0 14px 32px rgba(80,50,14,.15), inset 0 1px 0 rgba(255,255,255,.7) !important;
  transform: translateY(-1px) !important;
}

/* ── Coluna de bandeiras (jornada) ── */
html[data-theme] body[data-active-view="originsMap"] .origin-journey-premium {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  padding: 1.25rem .75rem !important;
  background: linear-gradient(180deg, rgba(166,112,47,.12), rgba(166,112,47,.06)) !important;
  border-right: 1px solid rgba(166,112,47,.18) !important;
  min-height: 7rem !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-big-flag-wave {
  width: 4.4rem !important;
  height: 2.9rem !important;
  border-radius: .7rem !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 4px 12px rgba(80,50,14,.14), inset 0 0 0 1px rgba(166,112,47,.14) !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-big-flag-wave .flag-icon {
  width: 2.9rem !important;
  height: 1.9rem !important;
  border-radius: .22rem !important;
  box-shadow: 0 2px 6px rgba(58,32,11,.20) !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-journey-arrow {
  font-size: 1.1rem !important;
  color: rgba(140,84,28,.7) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* ── Corpo do card ── */
html[data-theme] body[data-active-view="originsMap"] .origin-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 1rem 1.1rem !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: .75rem !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-top strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #2e1a08 !important;
  line-height: 1.25 !important;
  flex: 1 !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-top span {
  flex-shrink: 0 !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  color: #7a4b1a !important;
  background: rgba(255,243,210,.9) !important;
  border: 1px solid rgba(166,112,47,.24) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-route-premium {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 2px 0 !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-route-premium .country-badge,
html[data-theme] body[data-active-view="originsMap"] .origin-location-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(255,248,224,.88) !important;
  border: 1px solid rgba(166,112,47,.22) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  color: #5a380e !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-route-arrow {
  font-size: .9rem !important;
  font-weight: 900 !important;
  color: rgba(140,84,28,.7) !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-body > p {
  font-size: .87rem !important;
  color: #4a2e10 !important;
  line-height: 1.55 !important;
  margin: 2px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 4px !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-tags span {
  font-size: .74rem !important;
  font-weight: 800 !important;
  color: #5a380e !important;
  background: rgba(166,112,47,.10) !important;
  border: 1px solid rgba(166,112,47,.18) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

html[data-theme] body[data-active-view="originsMap"] .origin-actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

/* ── TEMA ESCURO ── */
html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-card-premium {
  background: linear-gradient(135deg, rgba(18,30,42,.98), rgba(12,22,32,.96)) !important;
  border-color: rgba(196,149,58,.22) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-journey-premium {
  background: linear-gradient(180deg, rgba(196,149,58,.12), rgba(196,149,58,.06)) !important;
  border-right-color: rgba(196,149,58,.18) !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-big-flag-wave {
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 0 0 1px rgba(196,149,58,.16) !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-journey-arrow {
  color: rgba(196,149,58,.7) !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-top strong {
  color: #fff4dc !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-top span {
  color: #c4953a !important;
  background: rgba(196,149,58,.12) !important;
  border-color: rgba(196,149,58,.26) !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-route-premium .country-badge,
html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-location-pill {
  background: rgba(196,149,58,.10) !important;
  border-color: rgba(196,149,58,.22) !important;
  color: #e0bd72 !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-route-arrow {
  color: rgba(196,149,58,.7) !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-body > p {
  color: rgba(248,234,208,.82) !important;
}

html[data-theme="escuro"] body[data-active-view="originsMap"] .origin-tags span {
  color: #c4953a !important;
  background: rgba(196,149,58,.08) !important;
  border-color: rgba(196,149,58,.16) !important;
}

/* ── TEMA PERGAMINHO ── */
html[data-theme="pergaminho"] body[data-active-view="originsMap"] .origin-card-premium {
  background: linear-gradient(135deg, rgba(255,248,225,.98), rgba(240,220,175,.88)) !important;
  border-color: rgba(118,69,30,.22) !important;
}

html[data-theme="pergaminho"] body[data-active-view="originsMap"] .origin-journey-premium {
  background: linear-gradient(180deg, rgba(118,69,30,.10), rgba(118,69,30,.05)) !important;
  border-right-color: rgba(118,69,30,.16) !important;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  html[data-theme] body[data-active-view="originsMap"] .origin-card-premium {
    grid-template-columns: 1fr !important;
  }
  html[data-theme] body[data-active-view="originsMap"] .origin-journey-premium {
    flex-direction: row !important;
    min-height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(166,112,47,.18) !important;
    padding: .75rem 1rem !important;
    justify-content: flex-start !important;
  }
}


/* V22 — stat cards compactos: reduzir tamanho do terceiro card (Mapa familiar) */
html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat.wide strong {
  font-size: .9rem !important;
  line-height: 1.5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

/* cada país fica em linha com flag + nome */
html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat.wide strong > * {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat.wide .flag-icon {
  width: 1.4rem !important;
  height: .9rem !important;
  border-radius: .18rem !important;
  flex-shrink: 0 !important;
}

/* responsive: 1 coluna em telas menores */
@media (max-width: 640px) {
  html[data-theme] body[data-active-view="originsMap"] #originsSummary {
    grid-template-columns: 1fr 1fr !important;
  }
  html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat.wide {
    grid-column: span 2 !important;
  }
}

@media (max-width: 400px) {
  html[data-theme] body[data-active-view="originsMap"] #originsSummary {
    grid-template-columns: 1fr !important;
  }
  html[data-theme] body[data-active-view="originsMap"] #originsSummary .origin-stat.wide {
    grid-column: span 1 !important;
  }
}

/* V22.6 — camada de pontos (mapa fantasma) removida: o mapa realista é a única base */
.family-world-dots,
.memorial-world-dots {
  display: none !important;
}