/* Atlas Studio V6 — módulo «Globo 3D» */

/* ---------- Mapa ---------- */
#mapSvg.globe-grab { cursor: grab; }
#mapSvg.globe-grab .region { cursor: inherit; }
#mapSvg.globe-grabbing, #mapSvg.globe-grabbing * { cursor: grabbing !important; }
#mapSvg.globe-grabbing .region { transition: none; }

.globe-atmosphere, .globe-module, .globe-space { pointer-events: none; }
.globe-halo-outer { fill: none; stroke: rgba(160, 232, 255, .42); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.globe-night path { fill: #020a18; stroke: none; }

.globe-star-tw { animation: globe-twinkle 5s ease-in-out infinite; }
@keyframes globe-twinkle {
  0%, 100% { opacity: .9; }
  50% { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .globe-star-tw { animation: none; }
}

/* ---------- Panel ---------- */
.globe-panel {
  margin-top: 16px;
  padding: 13px 13px 14px;
  border: 1px solid rgba(73, 214, 197, .18);
  border-radius: 13px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(73, 214, 197, .09), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(242, 184, 75, .06), transparent 60%),
    rgba(255, 255, 255, .02);
}
.globe-panel-head { display: flex; align-items: center; gap: 10px; }
.globe-panel-icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  color: var(--aqua, #49d6c5);
  background: radial-gradient(circle at 35% 30%, rgba(126, 227, 255, .28), rgba(73, 214, 197, .08) 70%);
  border: 1px solid rgba(73, 214, 197, .3);
  box-shadow: 0 0 18px rgba(73, 214, 197, .18);
}
.globe-panel-icon svg { width: 18px; height: 18px; }
.globe-panel-title { display: grid; gap: 1px; min-width: 0; }
.globe-panel-title strong { font-size: 13px; }
.globe-panel-title small { color: var(--muted-2, #617887); font-size: 10.5px; }

.globe-center-readout {
  margin-top: 11px; display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border-radius: 8px; background: rgba(0, 0, 0, .18);
  border: 1px solid var(--line, rgba(157, 190, 205, .14));
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink, #eaf3f7);
}
.globe-center-readout svg { width: 14px; height: 14px; color: var(--gold, #f2b84b); flex: none; }

.globe-panel > label { display: block; color: var(--muted, #91a6b4); font-size: 12px; font-weight: 600; margin: 13px 0 7px; }

.globe-speed { transition: opacity .2s ease; }
.globe-speed.is-disabled { opacity: .45; }
.globe-speed .row-control { margin-top: 10px; }

.globe-sun-info {
  margin: 7px 0 0; padding-left: 9px; border-left: 2px solid rgba(242, 184, 75, .55);
  color: var(--muted, #91a6b4); font-size: 10.5px; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.globe-sun-info[hidden] { display: none; }

.globe-goto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; container-type: inline-size; }
.globe-goto.btn {
  min-height: 34px; padding: 0 9px; gap: 7px; justify-content: flex-start;
  font-size: 11.5px; font-weight: 700; color: var(--muted, #91a6b4); border-radius: 9px;
  white-space: nowrap; overflow: hidden;
}
.globe-goto.btn svg { width: 15px; height: 15px; flex: none; }
.globe-goto.btn span { overflow: hidden; text-overflow: ellipsis; }
.globe-goto.btn:hover { color: var(--ink, #eaf3f7); }
.globe-goto.btn.active { color: var(--aqua, #49d6c5); background: rgba(73, 214, 197, .08); border-color: rgba(73, 214, 197, .38); }
@container (max-width: 200px) {
  .globe-goto.btn { justify-content: center; padding: 0 4px; font-size: 11px; }
  .globe-goto.btn svg { display: none; }
}
.globe-goto.btn:focus-visible { outline: 2px solid var(--aqua, #49d6c5); outline-offset: 1px; }