/*------------------Altimeter------------------*/

.alt-ctrl{
    position: relative;
    display: inline-block;
    user-select: none;
  }

  /* SVG del dial se ajusta al 100% del contenedor */
  .alt-ctrl svg{
    width: 100%;
    height: 100%;
    display:block;
  }

  /* Agujas */
  .alt-needle{
    position:absolute;
    left:50%;
    bottom:50%;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg);
    transition: transform 0.05s linear;
  }

  .alt-needle-100{
    width: 1%;
    background:#f0f0f0;
    box-shadow: 0 0 6px rgba(255,255,255,.4);
    border-radius: 2px;
  }

  .alt-needle-1000{
    width: 1.4%;
    background:#ffffff;
    border-radius: 2px;
  }


.alt-needle-10000{
  width: 0.6%;
  background:rgba(255,255,255,0.5);
  box-shadow: 0 0 6px rgba(255,255,255,.4);
  border-radius: 3px;
  position:absolute;
}

/* Triángulo invertido en la punta */
.alt-needle-10000:after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -100%) translateY(1px);

  width:0;
  height:0;

  border-left:  var(--tri-w, 10px) solid transparent;
  border-right: var(--tri-w, 10px) solid transparent;
  border-top:   var(--tri-h, 16px) solid rgba(255,255,255,0.5);
}
  /* Centro */
  .alt-hub{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#DDD;
    border: 0.7% solid #aaa;
    box-sizing:border-box;
  }

  /* “Vidrio” */
  .alt-glass{
    position:absolute;
    inset: 0;
    border-radius:50%;
    background: radial-gradient(circle at 25% 20%,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.05) 35%,
      rgba(255,255,255,0) 55%);
    pointer-events:none;
  }

  /* Display */
  .alt-display{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    /*background:rgba(0,26,20,0.8);*/
    /*border: 1px solid #00e0a0;*/
    color:#5AE32F;
    font-family: Segoe UI, monospace;
    letter-spacing: 2px;
    box-sizing: border-box;
    white-space: nowrap;
    font-weight:bold;
  }








/*------------------Brujula------------------*/
.cmp-ctrl{
    position:relative;
    display:inline-block;
    user-select:none;
}

.cmp-ctrl svg{ 
    width:100%; height:100%; display:block; 

}

/* Anillo exterior / look “instrumento” */
.cmp-frame{
    position:absolute;
    inset:0;
    border-radius:50%;
    box-shadow:
    0 0 0 2px rgba(0,0,0,.55) inset,
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 16px 32px rgba(0,0,0,.45);
    pointer-events:none;
}

/* Vidrio */
.cmp-glass{
    position:absolute;
    inset:0;
    border-radius:50%;
    background: radial-gradient(circle at 25% 20%,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.06) 35%,
    rgba(255,255,255,0) 58%);
    pointer-events:none;
}

/* Avión fijo (overlay) */
.cmp-airplane{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}