/* HN Control UI Theme (2026 refresh)
   - Azul moderno + cards suaves + sidebar estilo app
   - Diseñado para Bootstrap 5 + Razor Pages
*/
:root{
  --hn-bg: #f6f8ff;
  --hn-card: #ffffff;
  --hn-text: #0b1220;
  --hn-muted: #64748b;
  --hn-border: rgba(15,23,42,.08);

  --hn-blue: #2563eb;
  --hn-blue-dark: #1e40af;
  --hn-cyan: #06b6d4;
  --hn-green: #22c55e;
  --hn-purple: #7c3aed;
  --hn-amber: #f59e0b;

  --hn-radius: 18px;
}

html, body { height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--hn-text);
  background:
    radial-gradient(1100px 600px at 15% 8%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(900px 520px at 85% 18%, rgba(6,182,212,.12), transparent 58%),
    radial-gradient(900px 560px at 50% 95%, rgba(124,58,237,.10), transparent 60%),
    var(--hn-bg);
}

a { color: var(--hn-blue); text-decoration: none; }
a:hover { color: var(--hn-blue-dark); text-decoration: underline; }

/* ===== App shell (Sidebar + Content) ===== */
.hn-app{
  min-height: 100vh;
  display: flex;
}

.hn-sidebar{
  width: 284px;
  flex: 0 0 auto;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: auto;
  padding: 18px 14px 14px;
  background: linear-gradient(180deg, #0b1a3a 0%, #0b1f45 40%, #1e3a8a 100%);
  color: rgba(255,255,255,.92);
}

.hn-sidebar::-webkit-scrollbar{ width: 8px; }
.hn-sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; }

.hn-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 16px;
  color: rgba(255,255,255,.96);
  text-decoration:none;
}
.hn-brand:hover{ text-decoration:none; background: rgba(255,255,255,.06); }

.hn-brand-mark{
  width: 40px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  font-weight: 900;
  letter-spacing: -.03em;
}
.hn-brand-name{
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.hn-brand-sub{
  font-size:.78rem;
  color: rgba(255,255,255,.70);
  margin-top: 2px;
}

.hn-side-section{
  margin-top: 14px;
}
.hn-side-title{
  padding: 10px 12px 6px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}

.hn-side-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  margin: 4px 0;
  border-radius: 14px;
  color: rgba(255,255,255,.88);
  text-decoration:none;
  transition: transform .12s ease, background .12s ease;
}
.hn-side-link:hover{
  text-decoration:none;
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.hn-side-link.active{
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.hn-side-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.hn-side-link.active .hn-side-icon{
  background: rgba(255,255,255,.16);
}
.hn-side-text{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 650;
  letter-spacing: -.01em;
}
.hn-side-badge{
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}

.hn-side-footer{
  margin-top: 16px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.hn-side-user{
  font-weight: 750;
  font-size: .92rem;
  color: rgba(255,255,255,.92);
}
.hn-side-user-sub{
  font-size: .78rem;
  color: rgba(255,255,255,.70);
}

/* Offcanvas (móvil) */
.hn-offcanvas .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hn-offcanvas{
  background: linear-gradient(180deg, #0b1a3a 0%, #0b1f45 40%, #1e3a8a 100%);
  color: rgba(255,255,255,.92);
}

/* ===== Content ===== */
.hn-content{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction: column;
}

.hn-topbar{
  height: 66px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hn-border);
}

.hn-topbar .hn-page-title{
  font-weight: 900;
  letter-spacing: -.03em;
  margin: 0;
  font-size: 1.08rem;
}
.hn-topbar .hn-page-sub{
  font-size:.82rem;
  color: var(--hn-muted);
  margin-top: 2px;
}

.hn-user{
  font-weight: 650;
  color: var(--hn-text);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hn-main{
  flex: 1 1 auto;
  padding: 22px 18px 34px;
}

.hn-footer{
  padding: 14px 18px;
  color: var(--hn-muted);
  border-top: 1px solid var(--hn-border);
  background: rgba(255,255,255,.55);
}

/* ===== Bootstrap refinements ===== */
.card, .hn-card{
  border: 1px solid var(--hn-border) !important;
  border-radius: var(--hn-radius) !important;
  background: var(--hn-card);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}
.card-header{
  padding: 14px 18px;
  background: transparent;
  border-bottom: 1px solid rgba(15,23,42,.06);
  font-weight: 800;
  letter-spacing: -.01em;
}
.card-body{ padding: 18px; }

.shadow-soft{
  box-shadow: 0 14px 40px rgba(2,6,23,.06) !important;
}

.hn-hover{ transition: transform .12s ease, box-shadow .12s ease; }
.hn-hover:hover{ transform: translateY(-2px); box-shadow: 0 18px 52px rgba(2,6,23,.10) !important; }

/* Buttons */
.btn{
  border-radius: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.btn-primary{
  border: 0;
  background: linear-gradient(135deg, var(--hn-blue) 0%, var(--hn-blue-dark) 100%);
  box-shadow: 0 12px 26px rgba(37,99,235,.22);
}
.btn-primary:hover{ filter: brightness(.98); }
.btn-outline-primary{
  border-color: rgba(37,99,235,.35);
  color: var(--hn-blue);
}
.btn-outline-primary:hover{
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.45);
  color: var(--hn-blue-dark);
}
.btn-outline-secondary{
  border-color: rgba(100,116,139,.30);
}
.btn-outline-secondary:hover{
  background: rgba(100,116,139,.08);
}

.hn-navbtn-danger, .btn-danger{
  border: 0;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 12px 26px rgba(239,68,68,.18);
}

/* Forms */
.form-label{ font-weight: 650; color: rgba(15,23,42,.86); }
.form-control, .form-select{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.86);
}
.form-control::placeholder{ color: rgba(100,116,139,.75); }
.form-control:focus, .form-select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.15);
}
.form-floating > label{
  color: rgba(100,116,139,.90);
}

/* Tables */
.table{
  --bs-table-bg: transparent;
  margin-bottom: 0;
}
.table thead th{
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(71,85,105,.92);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.table tbody td{
  border-top: 1px solid rgba(15,23,42,.06);
}
.table tbody tr:hover{
  background: rgba(37,99,235,.04);
}
.table-responsive{ border-radius: 16px; }

/* Links used across pages */
.hn-link{ color: var(--hn-blue); font-weight: 650; text-decoration: none; }
.hn-link:hover{ color: var(--hn-blue-dark); text-decoration: underline; }

/* Badges (mejor contraste que text-bg-light default) */
.badge.text-bg-light{
  background: rgba(37,99,235,.10) !important;
  color: rgba(30,64,175,.98) !important;
  border: 1px solid rgba(37,99,235,.18);
}

.hn-badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .58rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: .78rem;
  border: 1px solid rgba(15,23,42,.10);
}
.hn-badge-soft{ background: rgba(255,255,255,.78); }
.hn-badge-blue{ background: rgba(37,99,235,.10); color: rgba(30,64,175,.98); border-color: rgba(37,99,235,.20); }
.hn-badge-green{ background: rgba(34,197,94,.10); color: rgba(22,101,52,.98); border-color: rgba(34,197,94,.20); }
.hn-badge-amber{ background: rgba(245,158,11,.12); color: rgba(146,64,14,.98); border-color: rgba(245,158,11,.22); }
.hn-badge-slate{ background: rgba(100,116,139,.10); color: rgba(51,65,85,.98); border-color: rgba(100,116,139,.20); }

/* Module cards (Carriers, etc.) */
.hn-module{
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
}
.hn-module{ --hn-accent: var(--hn-blue); }
.hn-module::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--hn-accent), rgba(255,255,255,.2));
}
.hn-module::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 240px at 18% 15%, color-mix(in srgb, var(--hn-accent) 22%, transparent), transparent 60%),
    radial-gradient(520px 220px at 88% 0%, rgba(6,182,212,.12), transparent 55%);
  opacity: .65;
  pointer-events: none;
}
.hn-module .card-body{ position: relative; z-index: 1; }
.hn-module-title{ font-weight: 900; letter-spacing: -.02em; }
.accent-blue{ --hn-accent: var(--hn-blue); }
.accent-cyan{ --hn-accent: var(--hn-cyan); }
.accent-purple{ --hn-accent: var(--hn-purple); }
.accent-green{ --hn-accent: var(--hn-green); }
.accent-amber{ --hn-accent: var(--hn-amber); }

/* Monitoring target cards */
.hn-target{
  position: relative;
  padding: 14px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.06);
}
.hn-target::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 240px at 20% 0%, rgba(37,99,235,.10), transparent 58%);
  opacity: .65;
  pointer-events: none;
}
.hn-target > *{ position: relative; z-index: 1; }
.hn-status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(100,116,139,.35);
  box-shadow: 0 0 0 4px rgba(100,116,139,.10);
}
.hn-target[data-status="Up"]{ border-color: rgba(34,197,94,.45) !important; }
.hn-target[data-status="Up"] .hn-status-dot{ background: var(--hn-green); box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.hn-target[data-status="Down"]{ border-color: rgba(239,68,68,.48) !important; }
.hn-target[data-status="Down"] .hn-status-dot{ background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.hn-target[data-status="Unknown"]{ border-color: rgba(100,116,139,.30) !important; }
.hn-target[data-status="Unknown"] .hn-status-dot{ background: rgba(100,116,139,.55); box-shadow: 0 0 0 4px rgba(100,116,139,.10); }

/* Small UI helpers used in pages */
.hn-muted{ color: var(--hn-muted) !important; }
.hn-subtle{ color: rgba(15,23,42,.72); }

.hn-pagehead{
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
}
.hn-hero{
  padding: 18px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(6,182,212,.08));
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 18px 44px rgba(2,6,23,.06);
  margin-bottom: 18px;
}
.hn-hero h1{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -.03em;
}
.hn-hero p{
  margin: 0;
  color: rgba(15,23,42,.72);
  font-weight: 520;
}

/* Signature canvas */
.hn-sig-box{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 18px !important;
}
.hn-sig-canvas{
  border-radius: 16px;
}

/* Legacy top-nav classes (if still referenced somewhere) */
.hn-nav{ background: rgba(255,255,255,.75) !important; backdrop-filter: blur(10px); }
.hn-navbtn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  border-radius: 12px;
  color: rgba(15,23,42,.78);
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}
.hn-navbtn:hover{ text-decoration:none; background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.20); }
.hn-navbtn.active{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.26); color: rgba(15,23,42,.92); }
.hn-sep{ width:1px; height:28px; background: rgba(15,23,42,.10); margin: 0 .25rem; }

/* Responsive */
@media (max-width: 991.98px){
  .hn-sidebar{ display:none; }
  .hn-main{ padding: 18px 14px 26px; }
}
/* Range con fill (azul antes del thumb) */
.hn-range {
    height: .55rem;
    border-radius: 999px;
    background: rgba(15,23,42,.12);
}

    /* Dejamos el track transparente para que se vea el background del input */
    .hn-range::-webkit-slider-runnable-track {
        height: .55rem;
        background: transparent;
        border-radius: 999px;
    }

    .hn-range::-moz-range-track {
        height: .55rem;
        background: transparent;
        border-radius: 999px;
    }