:root{
  /* ===== Brand / Dark UI ===== */
  --app-bg: #0b0f14;              /* fondo general */
  --app-surface: #121826;         /* cards */
  --app-surface-2: #151d2e;       /* cards resaltadas */
  --app-border: rgba(255,255,255,.08);

  --app-primary: #ff6a1a;         /* acento naranja */
  --app-primary-2: #ff8a3d;       /* degradado naranja */

  --app-text: #e5e7eb;            /* texto principal */
  --app-muted: #9ca3af;           /* texto secundario */
  --app-muted-2: #6b7280;         /* deshabilitado */
  --app-black: #0b0f14;

  /* Estados */
  --app-success: #22c55e;
  --app-warning: #f59e0b;
  --app-danger:  #ef4444;

  /* Layout */
  --appbar-height: 64px;
  --bottomnav-height: 74px;
  --radius-lg: 18px;
}

/* ===== Base ===== */
.bg-app{
  background: var(--app-bg);
  color: var(--app-text);
}

body{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== AppBar ===== */
.appbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: linear-gradient(180deg, rgba(18,24,38,.95), rgba(18,24,38,.72));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--app-border);
}

.appbar-logo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--app-border);
  color: var(--app-primary);
}

.appbar-brand{
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .2px;
}

.appbar-subtitle{
  font-size: .825rem;
  color: rgba(229,231,235,.75);
}

/* ===== Main spacing for bottom-nav ===== */
.app-main{
  min-height: calc(100vh - var(--appbar-height));
  padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom));
}

/* ===== Surfaces ===== */
.app-card{
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 35px rgba(0,0,0,.35);
}

/* ===== Buttons ===== */
.btn-app-primary{
  background: linear-gradient(90deg, var(--app-primary), var(--app-primary-2));
  border: 0;
  color: #111827;
  font-weight: 700;
}
.btn-app-primary:hover{
  filter: brightness(1.02);
}
.btn-app-ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}
.btn-app-ghost:hover{
  background: rgba(255,255,255,.10);
}

/* ===== Bottom Nav ===== */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: rgba(18,24,38,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--app-border);
  padding: 10px 0 12px;
}

.bottom-nav__item{
  text-decoration: none;
  color: rgba(229,231,235,.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 25%;
  font-size: .72rem;
}

.bottom-nav__item{
  transition: transform .14s ease, color .14s ease;
}

/* Sube TODO (icono + texto) */
.bottom-nav__item.active{
  transform: translateY(-12px);
}

/* ========== ICONOS NORMALES (Ruta/Paradas/Perfil) ========== */
.nav-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.06);
  border: 1px solid var(--app-border);
  color: rgba(229,231,235,.72);

  box-shadow: 0 12px 22px rgba(0,0,0,.22);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease, border-color .14s ease, width .14s ease, height .14s ease;
}

.nav-ico i{
  font-size: 1.25rem;
}

/* ACTIVO: que se vea como el FAB (crece + sube + gradiente) */
.bottom-nav__item.active .nav-ico{
  width: 52px;
  height: 52px;
  border-radius: 18px;

  background: linear-gradient(90deg, var(--app-primary), var(--app-primary-2));
  border: 0;
  color: #111827;

  box-shadow: 0 18px 35px rgba(0,0,0,.45);
  outline: 2px solid rgba(255,255,255,.22);

  /* ya NO sube aquí, porque sube el contenedor */
  transform: none;
}

/* Texto activo */
.bottom-nav__item.active > span{
  color: var(--app-primary);
  font-weight: 700;


}

.bottom-nav__item{
  gap: 6px;
}

.bottom-nav__item.active{
  gap: 4px;
}
/* ========== SCAN (FAB CENTRAL) ========== */
/* Default NO ACTIVO: neutral (para que no parezca seleccionado) */
.scan-btn{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;

  margin-top: -22px;

  background: rgba(255,255,255,.06);
  border: 1px solid var(--app-border);
  color: rgba(229,231,235,.88);

  box-shadow: 0 18px 35px rgba(0,0,0,.30);
}

/* Cuando la pestaña Scan está activa, ahora sí es naranja */
.bottom-nav__scan.active .scan-btn{
  background: linear-gradient(90deg, var(--app-primary), var(--app-primary-2));
  border: 0;
  color: #111827;
  box-shadow: 0 18px 35px rgba(0,0,0,.45);
}

/* Icono scan */
.bottom-nav__scan i{
  font-size: 1.35rem;
}

/* Ring extra si quieres marcar "scan activo" más fuerte */
.scan-btn--active{
  outline: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 35px rgba(0,0,0,.55);
}

/* ===== Inputs base (para pantallas internas) ===== */
.form-control,
.input-group-text{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.form-control::placeholder{
  color: rgba(229,231,235,.40);
}

/* ================================
   Ruta Activa (AppBar pill)
   - Clases aisladas: no afectan otros componentes
   - Se oculta en pantallas muy pequeñas para no romper layout
================================ */

.ac-route-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 14px;

  text-decoration: none;
  color: var(--app-text);

  background: rgba(255,255,255,.06);
  border: 1px solid var(--app-border);

  max-width: 230px;          /* evita empujar acciones */
  overflow: hidden;
}

.ac-route-pill:hover{
  background: rgba(255,255,255,.10);
}

.ac-route-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--app-success);
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  flex: 0 0 auto;
}

.ac-route-text{
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En pantallas muy angostas, ocultamos el pill para no romper el header */
@media (max-width: 380px){
  .ac-route-pill{ display: none !important; }
}

/* Modo compacto en bottom-nav cuando hay ruta activa */
.bottom-nav.bottom-nav--compact{
  padding: 8px 0 10px;
}

.bottom-nav.bottom-nav--compact .bottom-nav__item{
  font-size: .68rem;
  gap: 5px;
}

.bottom-nav.bottom-nav--compact .nav-ico{
  width: 40px;
  height: 40px;
  border-radius: 15px;
}

.bottom-nav.bottom-nav--compact .nav-ico i{
  font-size: 1.15rem;
}

/* Activo: que no suba tanto (reduce “brinco” visual) */
.bottom-nav.bottom-nav--compact .bottom-nav__item.active{
  transform: translateY(-8px);
}

.bottom-nav.bottom-nav--compact .bottom-nav__item.active .nav-ico{
  width: 48px;
  height: 48px;
  border-radius: 17px;
}

@media (max-width: 360px){
  .bottom-nav__item > span:not(.nav-ico){
    display: none;
  }
  .bottom-nav__item{
    gap: 0;
  }
}