:root{
  /* Layout rápido (compacto) */
  --hero-map-height: 300px;  /* alto del mapa */
  --gauge-size: 280px;       /* tamaño del gauge */
  --gauge-v-offset: 0px;     /* ajuste fino vertical del gauge */

  /* Avatar chico */
  --avatar-size-xs: 64px;
  --avatar-size-sm: 72px;
  --avatar-size-lg: 90px;
}

/* ====== Header ====== */
.profile-hero__header{ margin-bottom:.25rem; }
.profile-hero__avatar{
  width:var(--avatar-size-xs); height:var(--avatar-size-xs);
  object-fit:cover; object-position:center; display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
@media (min-width:576px){ .profile-hero__avatar{ width:var(--avatar-size-sm); height:var(--avatar-size-sm);} }
@media (min-width:992px){ .profile-hero__avatar{ width:var(--avatar-size-lg); height:var(--avatar-size-lg);} }

.profile-hero__id{ font-family:Menlo,Consolas,"Courier New",monospace; font-weight:500; }
.profile-hero__topmeta .badge{ margin-left:.25rem; }
.profile-hero__topmeta .small{ line-height:1.15; }

/* ====== Grid principal ====== */
.profile-hero__grid{
  display:grid;
  grid-template-columns: 1fr;         /* móvil: una columna */
  grid-row-gap: .75rem;
  align-items: start;
}

/* md+: dos columnas con proporción 5/7 (compacto) */
@media (min-width: 768px){
  .profile-hero__grid{
    grid-template-columns: 5fr 7fr;   /* Gauge | Map (o viceversa) */
    grid-column-gap: 1rem;
  }
}

/* Orden segun variante */
.hero--gauge-left .grid-gauge{ order: 1; }
.hero--gauge-left .grid-map  { order: 2; }

.hero--gauge-right .grid-gauge{ order: 2; }
.hero--gauge-right .grid-map  { order: 1; }

/* ====== Gauge ====== */
.profile-hero__gauge-box{
  width:var(--gauge-size); height:var(--gauge-size);
  position:relative; display:inline-block;
  margin-top:0;                        /* sin aire extra arriba */
  transform: translateY(var(--gauge-v-offset)); /* ajuste fino */
}
.profile-hero .gauge-center-label{ text-align:center; line-height:1; }
.profile-hero__score-badges .badge{ font-weight:600; }

/* ====== Mapa ====== */
.profile-hero__map-box{
  position:relative; width:100%;
  height:var(--hero-map-height);
  overflow:visible; background:transparent; border-radius:0;
}
.profile-hero__map-box > .datamap,
.profile-hero__map-box svg{ position:absolute; inset:0; }
.profile-hero__zone{ font-size:13px; margin-top:.25rem; }

/* ====== Responsivo ====== */
@media (min-width: 1200px){
  :root{ --hero-map-height: 260px; }
}
@media (max-width: 575.98px){
  :root{ --gauge-size: 280px; }
}