/* TrailLab v274 · pantalla de navegación guiada.
   Va a pantalla completa por encima de todo: navegando no hay nada más que mirar, y en la mano,
   corriendo, cualquier cosa alrededor sobra. */

.navg-shell{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  /* Móviles con muesca y barra de gestos. */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.navg-open{ overflow:hidden; }

.navg-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.navg-title{ display:flex; flex-direction:column; min-width:0; flex:1; }
.navg-title small{
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--lime);
}
.navg-title b{
  font-size:1.02rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.navg-exit{
  width:38px;
  height:38px;
  border-radius:11px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-size:1.1rem;
  cursor:pointer;
  flex:0 0 auto;
}
.navg-exit:hover{ border-color:var(--orange, #ff6b35); color:var(--orange, #ff6b35); }

/* El aviso es lo único que puede interrumpir: ocupa el ancho entero y no se puede confundir con
   un dato más. */
.navg-alert{
  margin:10px 14px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:.86rem;
  line-height:1.35;
}
.navg-alert.bad{
  border-color:var(--orange, #ff6b35);
  background:color-mix(in srgb, var(--orange, #ff6b35) 12%, transparent);
}
.navg-alert.ok{
  border-color:var(--lime);
  background:color-mix(in srgb, var(--lime) 12%, transparent);
}

.navg-map{
  flex:1;
  min-height:200px;
  margin:10px 14px 0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
}

.navg-bar{
  height:6px;
  margin:10px 14px 0;
  border-radius:999px;
  background:var(--surface2);
  overflow:hidden;
}
.navg-bar i{
  display:block;
  height:100%;
  width:0;
  background:var(--lime);
  transition:width .4s ease;
}

/* Cuatro datos y no más. Corriendo, con el móvil en la mano y frío, no se leen ocho. */
.navg-tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:10px 14px 0;
}
.navg-tiles > div{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 6px;
  text-align:center;
  min-width:0;
}
.navg-tiles b{
  display:block;
  font-size:1.25rem;
  line-height:1.15;
  white-space:nowrap;
}
.navg-tiles span{
  font-size:.68rem;
  color:var(--muted);
}

.navg-foot{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px 14px;
}
.navg-btn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:999px;
  padding:7px 14px;
  font-size:.8rem;
  cursor:pointer;
}
/* `.on` = el usuario ha movido el mapa y ya no se le sigue: el botón se enciende para que se vea
   que hay algo que recuperar. */
.navg-btn.on{ border-color:var(--lime); color:var(--lime); font-weight:700; }
.navg-hint{ font-size:.76rem; color:var(--muted); }

@media (max-width:520px){
  .navg-tiles{ grid-template-columns:repeat(2,1fr); }
  .navg-tiles b{ font-size:1.35rem; }
  .navg-map{ min-height:160px; }
}