/* Country Initials — visible and styled */
.sp-country-initials {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  font-family: var(--sp-display, 'Poppins', sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sp-accent, #C8D1DB);
  text-shadow: 0 2px 12px rgba(0,0,0,0.38), 0 1px 0 rgba(255,255,255,0.08);
  filter: drop-shadow(0 2px 8px rgba(var(--sp-accent-rgb),.18));
  user-select: none;
  transition: color .2s, text-shadow .2s;
}
/*
 * ═══════════════════════════════════════════════════════════
 *  NEXUS SPACE MAP — Estilos del mapa mundial interactivo
 *  Extracción de space.html para integración modular
 *
 *  Requiere las siguientes variables CSS en :root (o en body):
 *    --sp-accent-rgb : 200,209,219     (RGB del color acento)
 *    --sp-accent     : #C8D1DB         (Color acento en hex)
 *    --sp-display    : 'Poppins'       (Tipografía display)
 *    --sp-body       : 'Poppins'       (Tipografía body)
 *
 *  Define estas vars en tu página antes de cargar este CSS:
 *    <style>
 *      :root {
 *        --sp-accent-rgb: 200,209,219;
 *        --sp-accent: #C8D1DB;
 *        --sp-display: 'Poppins', sans-serif;
 *        --sp-body: 'Poppins', sans-serif;
 *      }
 *    </style>
 * ═══════════════════════════════════════════════════════════
 */
/* ══════════════════════════════════════════════════
   NEXUS SPACE MAP — redesigned premium look
══════════════════════════════════════════════════ */

/* Section wrapper */
#sp-map-section{
  position:relative;
  width:100%;
  height:600px;
  margin:0;
  overflow:hidden;
  background:#000;
}

/* Decorative top border — scanning line */
#sp-map-section::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;z-index:10;
  background:linear-gradient(90deg,transparent,rgba(var(--sp-accent-rgb),.5) 30%,rgba(var(--sp-accent-rgb),.8) 50%,rgba(var(--sp-accent-rgb),.5) 70%,transparent);
}
#sp-map-section::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:1px;z-index:10;
  background:linear-gradient(90deg,transparent,rgba(var(--sp-accent-rgb),.3) 30%,rgba(var(--sp-accent-rgb),.5) 50%,rgba(var(--sp-accent-rgb),.3) 70%,transparent);
}

/* HUD frame decorations */
#sp-map-hud-tl,#sp-map-hud-tr,#sp-map-hud-bl,#sp-map-hud-br{
  position:absolute;z-index:20;width:22px;height:22px;pointer-events:none;
}
#sp-map-hud-tl{top:12px;left:12px;border-top:1.5px solid rgba(var(--sp-accent-rgb),.5);border-left:1.5px solid rgba(var(--sp-accent-rgb),.5);}
#sp-map-hud-tr{top:12px;right:12px;border-top:1.5px solid rgba(var(--sp-accent-rgb),.5);border-right:1.5px solid rgba(var(--sp-accent-rgb),.5);}
#sp-map-hud-bl{bottom:12px;left:12px;border-bottom:1.5px solid rgba(var(--sp-accent-rgb),.5);border-left:1.5px solid rgba(var(--sp-accent-rgb),.5);}
#sp-map-hud-br{bottom:12px;right:12px;border-bottom:1.5px solid rgba(var(--sp-accent-rgb),.5);border-right:1.5px solid rgba(var(--sp-accent-rgb),.5);}

/* HUD title bar */
#sp-map-hud-label{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:10px;
  font-family:var(--sp-body,'Poppins',sans-serif);
  font-size:.5rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(var(--sp-accent-rgb),.55);pointer-events:none;white-space:nowrap;
}
#sp-map-hud-label::before,#sp-map-hud-label::after{
  content:'';display:block;width:32px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--sp-accent-rgb),.4));
}
#sp-map-hud-label::after{transform:rotate(180deg);}
.sp-map-hud-dot{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:rgba(var(--sp-accent-rgb),.8);
  box-shadow:0 0 6px rgba(var(--sp-accent-rgb),.6),0 0 14px rgba(var(--sp-accent-rgb),.3);
  animation:spMapDotPulse 3s ease-in-out infinite;
}
@keyframes spMapDotPulse{
  0%,100%{box-shadow:0 0 6px rgba(var(--sp-accent-rgb),.6),0 0 14px rgba(var(--sp-accent-rgb),.3);}
  50%{box-shadow:0 0 10px rgba(var(--sp-accent-rgb),.9),0 0 28px rgba(var(--sp-accent-rgb),.5);}
}

/* Stats bar bottom-left */
#sp-map-stats{
  position:absolute;bottom:16px;left:16px;z-index:20;
  display:flex;align-items:center;gap:20px;pointer-events:none;
}
.sp-mstat{display:flex;flex-direction:column;gap:1px;}
.sp-mstat-v{font-family:var(--sp-display,'Poppins',sans-serif);font-size:.85rem;font-weight:700;color:var(--sp-accent);line-height:1;letter-spacing:-.01em;}
.sp-mstat-l{font-size:.45rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3);}
.sp-mstat-div{width:1px;height:28px;background:rgba(var(--sp-accent-rgb),.15);}

/* Scan-line overlay effect */
#sp-map-scanline{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.04) 3px,
    rgba(0,0,0,0.04) 4px
  );
}

/* Map wrap */
#sp-map-wrap{
  position:absolute;inset:0;overflow:hidden;
  background:transparent;
}
#sp-world-svg{
  width:100%;height:100%;display:block;
  cursor:grab;
}
#sp-world-svg:active{cursor:grabbing;}

/* Countries */
.country{
  stroke:rgba(3,15,28,0.9);
  stroke-width:0.6;
  stroke-linejoin:round;
  cursor:pointer;
  transition:filter .25s ease, opacity .25s ease, stroke .2s, stroke-width .2s, fill .3s;
}
.country.nexus-active{
  fill:var(--sp-accent);
  stroke:rgba(var(--sp-accent-rgb),0.2);
}
.country:not(.nexus-active) {
  fill: #000;
}
.country.nexus-active:hover{
  fill:#2D6494;
  filter:brightness(1.45) drop-shadow(0 0 7px rgba(var(--sp-accent-rgb),0.75)) drop-shadow(0 0 18px rgba(var(--sp-accent-rgb),0.4));
  stroke:rgba(var(--sp-accent-rgb),0.85);stroke-width:1;
}
.country:not(.nexus-active):hover {
  fill: #23272e;
  filter: brightness(1.18) drop-shadow(0 0 6px rgba(var(--sp-accent-rgb),0.28));
  stroke: rgba(var(--sp-accent-rgb),0.32);
  stroke-width: 0.9;
}
.country.dim{opacity:0.18 !important;filter:none !important;}
.country.hi{
  fill:#274162;
  filter:brightness(1.42) drop-shadow(0 0 6px rgba(var(--sp-accent-rgb),0.55));
  stroke:rgba(var(--sp-accent-rgb),0.55);stroke-width:1;
}
.country.hi.nexus-active{
  fill:#2D6494;
  filter:brightness(1.5) drop-shadow(0 0 8px rgba(var(--sp-accent-rgb),0.8));
  stroke:rgba(var(--sp-accent-rgb),0.9);stroke-width:1.2;
}
.country.selected{
  fill:#305B80 !important;
  filter:brightness(1.6) drop-shadow(0 0 9px rgba(var(--sp-accent-rgb),0.88)) !important;
  stroke:rgba(var(--sp-accent-rgb),0.92) !important;stroke-width:1.4 !important;opacity:1 !important;
}
.country.selected.nexus-active{
  fill:#3A78B0 !important;
  filter:brightness(1.7) drop-shadow(0 0 10px rgba(var(--sp-accent-rgb),1)) drop-shadow(0 0 24px rgba(var(--sp-accent-rgb),0.5)) !important;
  stroke:var(--sp-accent) !important;stroke-width:1.6 !important;opacity:1 !important;
}

/* ── TOOLTIP — premium contact card ── */
#sp-map-tooltip{
  position:absolute;z-index:300;
  pointer-events:none;
  min-width:260px;max-width:310px;
  transition:opacity .15s ease;
}
.sp-tt-card{
  background:rgba(2,8,18,0.96);
  border:1px solid rgba(var(--sp-accent-rgb),.22);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,.85),
    0 0 0 1px rgba(var(--sp-accent-rgb),.05),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(24px);
}
.sp-tt-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px 12px;
  background:linear-gradient(135deg,rgba(var(--sp-accent-rgb),.06),transparent 60%);
  border-bottom:1px solid rgba(var(--sp-accent-rgb),.1);
}
.sp-tt-flag{
  font-size:2rem;line-height:1;flex-shrink:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.sp-tt-country-info{}
.sp-tt-country{
  font-family:var(--sp-display,'Poppins',sans-serif);
  font-size:.88rem;font-weight:700;
  color:rgba(255,255,255,.95);letter-spacing:.03em;
  line-height:1.2;
}
.sp-tt-region-tag{
  display:inline-flex;align-items:center;
  font-size:.48rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(var(--sp-accent-rgb),.6);
  margin-top:3px;
}
.sp-tt-contact-section{
  padding:12px 16px 14px;
}
.sp-tt-contact-label{
  font-size:.44rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(var(--sp-accent-rgb),.4);margin-bottom:7px;
}
.sp-tt-contact{
  font-size:.78rem;font-weight:700;
  color:var(--sp-accent);
  line-height:1.3;
}
.sp-tt-role{
  font-size:.58rem;font-weight:500;
  color:rgba(255,255,255,.45);
  margin-top:3px;line-height:1.4;
}
.sp-tt-email-row{
  display:flex;align-items:center;gap:6px;
  margin-top:9px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.06);
}
.sp-tt-email-icon{font-size:.7rem;opacity:.4;}
.sp-tt-email{
  font-size:.6rem;color:rgba(255,255,255,.38);
  font-family:'IBM Plex Sans',monospace;letter-spacing:.02em;
}
.sp-tt-no-contact{
  font-size:.7rem;color:rgba(255,255,255,.3);
  font-style:italic;padding:12px 16px 14px;
}

/* Map controls — HUD style */
#sp-map-controls{
  position:absolute;bottom:20px;right:20px;z-index:100;
  display:flex;flex-direction:column;gap:5px;
}
.sp-mz-btn{
  width:34px;height:34px;border-radius:8px;
  background:rgba(2,8,18,.94);
  border:1px solid rgba(var(--sp-accent-rgb),.18);
  color:rgba(255,255,255,.5);font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;backdrop-filter:blur(14px);cursor:pointer;
  font-family:var(--sp-body,'Poppins',sans-serif);
}
.sp-mz-btn:hover{
  background:rgba(var(--sp-accent-rgb),.12);
  border-color:rgba(var(--sp-accent-rgb),.45);
  color:var(--sp-accent);
  box-shadow:0 0 12px rgba(var(--sp-accent-rgb),.2);
}
.sp-mz-reset{font-size:.58rem;font-weight:800;letter-spacing:.04em;}

/* Hint text */
#sp-map-hint{
  position:absolute;bottom:58px;left:50%;transform:translateX(-50%);z-index:20;
  font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.18);pointer-events:none;white-space:nowrap;
  animation:spMapHintFade 6s ease-out 1.5s forwards;
}
@keyframes spMapHintFade{0%{opacity:1}70%{opacity:.6}100%{opacity:0}}

/* CT bottom */
.sp-ct-bottom{
  padding:48px 8vw 72px;
  text-align:center;
}
.eq-line{stroke:rgba(var(--sp-accent-rgb),0.25);stroke-width:1;stroke-dasharray:5,5;fill:none;}
.trop-line{stroke:rgba(255,200,0,0.12);stroke-width:.8;stroke-dasharray:3,7;fill:none;}

/* ── NEXUS MAP EXTRA POLISH ── */

/* Graticule — slightly more visible */
#grat polyline {
  stroke: rgba(60,110,175,0.22);
}

/* Active country subtle pulse on load */
@keyframes spCountryReveal {
  from { opacity:0; }
  to { opacity:1; }
}
.country {
  animation: spCountryReveal 0.4s ease both;
}

/* Search bar inside map */
#sp-map-search-wrap input {
  background:rgba(2,8,18,.92) !important;
  border:1px solid rgba(var(--sp-accent-rgb),.18) !important;
  border-radius:8px !important;
  padding:7px 14px !important;
  color:rgba(255,255,255,.75) !important;
  font-size:.68rem !important;
  font-family:var(--sp-body,'Poppins',sans-serif) !important;
  outline:none !important;
  width:170px !important;
  transition:border-color .2s, box-shadow .2s, width .25s !important;
  backdrop-filter:blur(14px);
}
#sp-map-search-wrap input:focus {
  border-color:rgba(var(--sp-accent-rgb),.45) !important;
  box-shadow:0 0 0 1px rgba(var(--sp-accent-rgb),.2), 0 0 14px rgba(var(--sp-accent-rgb),.1) !important;
  width:200px !important;
  color:rgba(255,255,255,.9) !important;
}
#sp-map-search-wrap input::placeholder {
  color:rgba(255,255,255,.22) !important;
}
#sp-search-results .sr-item {
  padding:9px 14px;font-size:.72rem;color:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;gap:10px;
  transition:background .15s,color .15s;
  cursor:pointer;
}
#sp-search-results .sr-item:hover {
  background:rgba(var(--sp-accent-rgb),.1);
  color:var(--sp-accent);
}
#sp-map-search-wrap{
  position:absolute;top:14px;right:72px;z-index:20;
}