/* Vista terrestre inspirada en Earth3D. Identidad, pines y tipografía HexAstra. */
.earth-globe { position: absolute; inset: 0; z-index: 450; overflow: hidden; background: radial-gradient(ellipse at center, var(--hx-noche-2), var(--hx-noche) 72%); }
.earth-globe-mode > .leaflet-pane, .earth-globe-mode > .leaflet-control-container { visibility: hidden; pointer-events: none; }
.earth-globe-mode { cursor: grab; }
.globe-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -4px; }
.globe-canvas:active { cursor: grabbing; }
.globe-pins { position: absolute; inset: 0; pointer-events: none; }
.globe-pin {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.globe-pin > .pin, .globe-pin > .easy-pin { flex: none; }
.globe-pin:hover, .globe-pin:focus-visible { outline: 2px solid var(--hx-cian); outline-offset: 2px; background: var(--color-selected); z-index: 5; }
.globe-pin.is-selected { z-index: 4; }
.globe-guide { position: absolute; left: var(--space-sm); right: var(--space-sm); top: var(--space-sm); text-align: center; font: 400 var(--text-xs)/1.4 var(--font-body); color: var(--color-muted); pointer-events: none; }
.globe-credits { position: absolute; bottom: var(--space-2xs); left: var(--space-xs); right: var(--space-xs); text-align: center; font: 400 0.625rem/1.3 var(--font-body); color: var(--color-muted); }
.globe-credits a { color: var(--color-muted); text-decoration: none; }
.globe-credits a:hover { color: var(--hx-cian); text-decoration: underline; }
.globe-zoom { position: absolute; bottom: var(--space-xl); right: var(--space-xs); display: grid; gap: var(--space-2xs); }
.globe-zoom button { width: 32px; min-height: 32px; padding: 0; font: 600 var(--text-lg)/1 var(--font-body); background: var(--color-sheet); }
.globe-view-switch { position: absolute; bottom: var(--space-xl); left: var(--space-xs); z-index: 500; display: flex; gap: 3px; padding: 3px; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-sheet); }
.globe-view-switch button { min-height: 32px; padding-inline: var(--space-xs); border: 0; font-size: var(--text-xs); }
.globe-view-switch button[aria-pressed="true"] { color: var(--hx-noche); background: var(--hx-cian); }
.easy-map-tools:has([data-view="globe"]) { flex-wrap: wrap; }
.easy-map-tools:has([data-view="globe"]) button { padding-inline: var(--space-xs); font-size: var(--text-xs); }
.map-frame:has(.earth-globe-mode) .map-label { left: var(--space-sm); }
.map-frame:has(.earth-globe-mode) .globe-guide { top: 3.25rem; }

/* Resumen del sitio al tocar un punto: mismos datos que la ficha y el ranking. */
.match-dialog { width: min(58rem, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--space-lg)); margin: auto; padding: var(--space-lg); overflow: auto; color: var(--color-ink); background: var(--color-sheet); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.match-dialog::backdrop { background: var(--color-scrim); }
.match-dialog-close { display: flex; justify-content: flex-end; margin-bottom: var(--space-md); }
.match-card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--hx-cian); border-radius: var(--radius-card); }
.match-card-score { display: grid; align-content: start; gap: var(--space-xs); text-align: right; color: var(--color-muted); font-size: var(--text-sm); }
.match-card-score > .score-color { font: 700 2.75rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.match-card-body { min-width: 0; }
.match-card-body h2 { max-width: none; margin-bottom: var(--space-md); font-size: var(--text-xl); line-height: 1.25; }
.match-card-body > p { font-size: var(--text-md); line-height: 1.6; }
.match-card-body > p + p { margin-top: var(--space-xs); }
.match-card-body strong { color: var(--hx-cian); }
.match-card-body .match-breaks { color: var(--hx-marte); }
.match-card-context { margin-bottom: var(--space-xs); color: var(--hx-cian); font-size: var(--text-sm); }
.match-card-body .easy-missing { margin-top: var(--space-sm); }
.match-source { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); overflow-wrap: anywhere; }
.match-source summary { cursor: pointer; color: var(--hx-cian); }
.match-source p { margin-top: var(--space-xs); }
@media (max-width: 640px) {
  .match-dialog { padding: var(--space-sm); }
  .match-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm); }
  .match-card-score { grid-template-columns: auto 1fr; text-align: left; align-items: baseline; }
  .match-card-score .score-bar { grid-column: 1 / -1; }
  .globe-guide { font-size: 0.625rem; }
}