/* ===== Base de tarjetas/grades ===== */
:root{
  --tn-gap: 12px;
  --tn-radius: 16px;
  --tn-card-bg: #111827;
  --tn-card-bd: #1f2937;
  --tn-text: #e5e7eb;
  --tn-sub: #9ca3af;
  --tn-accent: #0b3d91;
}
@media (prefers-color-scheme: light){
  :root{
    --tn-card-bg: #ffffff;
    --tn-card-bd: #e5e7eb;
    --tn-text: #111827;
    --tn-sub: #4b5563;
  }
}

.tn-panel{
  background: var(--tn-card-bg);
  border:1px solid var(--tn-card-bd);
  border-radius: var(--tn-radius);
  padding:12px;
  margin:12px 0;
  color: var(--tn-text);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.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: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-input{appearance:none; outline:none; border:1px solid var(--tn-card-bd); background:transparent; color:var(--tn-text); padding:8px 10px; border-radius:10px; min-width:240px}

.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 }

/* ===== 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:calc(50% - 28px);
  width:2px; height:28px; background:var(--tn-text);
  transform-origin: 50% 100%; border-radius:2px; transition: transform 200ms ease-out;
}
.tn-compass-val{ font-weight:700 }

/* ===== Paneles específicos ===== */
.tn-pos-widgets .tn-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.tn-io-grid{ grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }

/* ===== Engrosar líneas de ruta (Leaflet) ===== */
.leaflet-overlay-pane svg path.leaflet-interactive{
  stroke-width: 4px !important;
}