:root {
  /* Brand navy */
  --tn-accent: #0b3d91;
  --tn-accent-contrast: #ffffff;

  /* Dark by default */
  --tn-gap: 12px;
  --tn-radius: 12px;
  --tn-card-bg: #111827;
  --tn-card-bd: #1f2937;
  --tn-text: #e5e7eb;
  --tn-sub: #9ca3af;
}
/* Light theme */
@media (prefers-color-scheme: light){
  :root {
    --tn-card-bg: #ffffff;
    --tn-card-bd: #e5e7eb;
    --tn-text: #111827;
    --tn-sub: #4b5563;
  }
}
/* FAB placement (desktop) */
.tn-fab{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  border:none; border-radius:9999px; padding:12px 16px; font-weight:700; cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.25); background:var(--tn-accent); color:var(--tn-accent-contrast);
}
/* Mobile: move up to avoid toolbar overlap */
@media (max-width: 768px){
  .tn-fab{ bottom:88px; right:12px; }
}
/* Panel positioning (leave map attribution link visible) */
.tn-panel{
  position:fixed; right:16px; bottom:calc(16px + 56px);
  z-index:9998; width:min(92vw, 1080px); max-height:80vh; overflow:auto;
  border-radius:16px; padding:14px; background:var(--tn-card-bg); border:1px solid var(--tn-card-bd);
  color:var(--tn-text); box-shadow:0 20px 40px rgba(0,0,0,.35)
}
@media (max-width: 768px){
  .tn-panel{ right:12px; bottom:calc(88px + 56px); width:calc(100vw - 24px); }
}
.tn-header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.tn-title{font-size:16px; font-weight:800; color:var(--tn-accent)}
.tn-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--tn-gap)}
.tn-card{background:var(--tn-card-bg); border:1px solid var(--tn-card-bd); border-radius:var(--tn-radius); padding:12px}
.tn-k{font-weight:600; color:var(--tn-accent); margin-bottom:6px}
.tn-v{font-size:22px; font-weight:800}
.tn-s{font-size:12px; color:var(--tn-sub)}
.tn-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tn-select{appearance:none; border:1px solid var(--tn-card-bd); background:transparent; color:var(--tn-text); padding:8px 10px; border-radius:10px}
.tn-btn{border:1px solid var(--tn-card-bd); background:transparent; color:var(--tn-text); padding:8px 12px; border-radius:10px; cursor:pointer}
.tn-badge{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px}
.tn-ok{background:#065f46; color:#a7f3d0}
.tn-off{background:#7c2d12; color:#fed7aa}

/* Gauges and bars */
.tn-gauge{display:flex; flex-direction:column; align-items:center; gap:6px}
.tn-gauge svg{width:100%; height:auto; max-width:300px; display:block}
.tn-gauge .tn-gv{font-weight:800; font-size:22px}
.tn-bar{height:10px; border-radius:999px; background:var(--tn-card-bd); overflow:hidden}
.tn-bar > span{display:block; height:100%; background:var(--tn-accent)}

/* =========================================================
   Tracknel – separación entre panel (lista) y bottom nav
   ========================================================= */

/* Espacio entre panel y bottom nav */
.tn-gap { height: 12px; }
@media (max-width: 480px){ .tn-gap { height: 10px; } }

/* Bordes / ajustes opcionales */
.tn-panel-rounded { border-radius: 16px !important; overflow: hidden; }
.tn-bottom-rounded { border-radius: 16px !important; overflow: hidden; }

/* Unión AppBar + Panel (quedan como una sola pieza) */
.tn-top-rounded {                   /* AppBar */
  border-radius: 16px 16px 0 0 !important;
}

.tn-panel-union {                   /* Panel de la lista */
  border-radius: 0 0 16px 16px !important;  /* sin radio arriba */
  margin-top: 0 !important;                 /* sin separaciones */
}

/* Opcional: sombras más agradables (solo abajo) */
.tn-top-rounded.MuiPaper-elevation {
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.tn-panel-union.MuiPaper-elevation {
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}

/* Si ves una línea entre ambos, “solápalos” 1px */
.tn-panel-union { margin-top: -1px !important; }



/* ===== Tracknel: solo transparencia (sin blur) ===== */

/* Nivel de opacidad (ajusta a gusto) */
:root{
  --tn-glass-alpha-dark: .90;   /* modo oscuro */
  --tn-glass-alpha-light: .40;  /* modo claro */
  --tn-brd-alpha-dark: .14;
  --tn-brd-alpha-light: .08;
}

/* AppBar arriba y panel de lista */
.tn-top-rounded,
.tn-panel-union,
.tn-bottom-paper {               /* se añade por JS a la barra inferior */
  background: rgba(17,24,39,var(--tn-glass-alpha-dark)) !important; /* #111827 con alpha */
  border: 1px solid rgba(255,255,255,var(--tn-brd-alpha-dark)) !important;
  border-radius: inherit !important;
}

/* Modo claro: más claro y borde suave */
@media (prefers-color-scheme: light){
  .tn-top-rounded,
  .tn-panel-union,
  .tn-bottom-paper{
    background: rgba(255,255,255,var(--tn-glass-alpha-light)) !important;
    border-color: rgba(0,0,0,var(--tn-brd-alpha-light)) !important;
  }
}

/* Detalles: inputs del AppBar mantienen contraste */
.tn-top-rounded .MuiOutlinedInput-root{
  background: rgba(255,255,255,.06);
  border-radius: 12px;
}
.tn-top-rounded .MuiOutlinedInput-notchedOutline{
  border-color: rgba(255,255,255,.18);
}


/* === Tracknel: BottomNav homogéneo con su Paper === */

/* === Bottom nav homogéneo: una sola pieza === */

/* 1) El contenedor (Paper) mantiene un único borde y fondo */
.tn-bottom-paper{
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(17,24,39,0.95) !important;
  border: 1px solid rgba(255,255,255,.14) !important;   /* un solo borde */
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;   /* una sola sombra */
  background-clip: padding-box !important;
}

/* 2) El BottomNavigation hereda el mismo fondo y se "solapa" 1px el borde */
.tn-bottom-paper > .MuiBottomNavigation-root{
  background: inherit !important;
  margin-top: -1px !important;      /* tapa la línea/junta */
  padding-top: 1px !important;      /* compensa visualmente */
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) Cualquier pseudo/overlay que pinte líneas se desactiva */
.tn-bottom-paper::before,
.tn-bottom-paper::after,
.tn-bottom-paper > .MuiBottomNavigation-root::before,
.tn-bottom-paper > .MuiBottomNavigation-root::after{
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
}


/* ===== Position Widgets ===== */
.tn-pos-widgets{
  background: var(--tn-card-bg);
  border:1px solid var(--tn-card-bd);
  border-radius:16px;
  padding:12px;
  margin:12px 0;
  color: var(--tn-text);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.tn-pos-widgets .tn-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px
}
.tn-pos-widgets .tn-title{font-size:16px; font-weight:800; color:var(--tn-accent)}
.tn-pos-widgets .tn-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--tn-gap)
}
.tn-card{
  background:var(--tn-card-bg);
  border:1px solid var(--tn-card-bd);
  border-radius:12px;
  padding:12px;
}
.tn-k{font-weight:600; color:var(--tn-accent); margin-bottom:6px}
.tn-v{font-size:20px; font-weight:800}
.tn-s{font-size:12px; color:var(--tn-sub)}
.tn-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tn-btn{
  border:1px solid var(--tn-card-bd); background:transparent; color:var(--tn-text);
  padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none
}
.tn-btn:hover{ background: rgba(255,255,255,.06) }

.tn-badge{
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px;
  background: rgba(255,255,255,.06); color: var(--tn-text); border:1px solid var(--tn-card-bd)
}
.tn-badge.tn-ok{ background:#065f46; color:#a7f3d0; border-color:#064e3b }
.tn-badge.tn-off{ background:#7c2d12; color:#fed7aa; border-color:#7c2d12 }
.tn-badge.tn-warn{ background:#78350f; color:#fde68a; border-color:#92400e }
.tn-badge.tn-crit{ background:#7f1d1d; color:#fecaca; border-color:#7f1d1d }
.tn-badge.tn-neutral{ background:#1f2937; color:#e5e7eb; border-color:#374151 }

.tn-bar{height:10px; border-radius:999px; background:var(--tn-card-bd); overflow:hidden}
.tn-bar .tn-fill{display:block; height:100%}
.tn-bar .tn-fill.tn-ok{ background: #10b981 }
.tn-bar .tn-fill.tn-warn{ background: #f59e0b }
.tn-bar .tn-fill.tn-crit{ background: #ef4444 }

.tn-gauge .tn-gv{font-weight:800; font-size:18px}

/* Brújula */
.tn-compass-wrap{ display:flex; align-items:center; gap:12px }
.tn-compass-dial{
  position:relative; width:64px; height:64px; border-radius:999px;
  border:1px solid var(--tn-card-bd); background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), transparent)
}
.tn-compass-needle{
  position:absolute; left:50%; top:50%; width:2px; height:28px; background:var(--tn-text);
  transform-origin: bottom center; border-radius:2px
}
.tn-compass-val{ font-weight:700 }