/* NAVSTAR · tema de marca sobre Bootstrap 5.3 (logo Órbita) */
:root {
  --nav-noche: #1D2D3D;
  --nav-noche-2: #263b50;
  --nav-acero: #416180;
  --nav-acero-osc: #36516b;
  --nav-senal: #597EA3;
  --nav-cielo: #94BCE3;
  --nav-tinta: #1D1F20;
  --nav-papel: #F2F2F3;
  --nav-linea: #e1e5ea;
  --nav-titulos: "Barlow Condensed", system-ui, sans-serif;
  --nav-texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bs-primary: var(--nav-acero);
  --bs-primary-rgb: 65, 97, 128;
  --bs-primary-text-emphasis: #2a4157;
  --bs-primary-bg-subtle: #e3ebf3;
  --bs-primary-border-subtle: #b9cbdd;
  --bs-link-color: var(--nav-acero);
  --bs-link-color-rgb: 65, 97, 128;
  --bs-link-hover-color: var(--nav-noche);
  --bs-link-hover-color-rgb: 29, 45, 61;
  --bs-body-font-family: var(--nav-texto);
  --bs-body-color: var(--nav-tinta);
  --bs-body-bg: #fff;              /* fondo de tarjetas, campos y listas */
  --bs-border-color: var(--nav-linea);
  --bs-border-radius: .55rem;
  --bs-border-radius-lg: .8rem;
  --bs-focus-ring-color: rgba(89, 126, 163, .3);
}

body { font-family: var(--nav-texto); background: var(--nav-papel); color: var(--nav-tinta); -webkit-font-smoothing: antialiased; }
.bg-light { background-color: var(--nav-papel) !important; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .page-title, .navbar-brand, .modal-title {
  font-family: var(--nav-titulos); font-weight: 600; letter-spacing: .01em;
}
.page-title { font-size: 1.85rem; color: var(--nav-noche); line-height: 1.1; }
.page-sub { color: #5d6b78; }

/* Botones */
.btn { --bs-btn-font-weight: 500; border-radius: .55rem; }
.btn-primary {
  --bs-btn-bg: var(--nav-acero); --bs-btn-border-color: var(--nav-acero);
  --bs-btn-hover-bg: var(--nav-acero-osc); --bs-btn-hover-border-color: var(--nav-acero-osc);
  --bs-btn-active-bg: var(--nav-noche); --bs-btn-active-border-color: var(--nav-noche);
  --bs-btn-disabled-bg: var(--nav-senal); --bs-btn-disabled-border-color: var(--nav-senal);
}
.btn-outline-primary {
  --bs-btn-color: var(--nav-acero); --bs-btn-border-color: #b9cbdd;
  --bs-btn-hover-bg: var(--nav-acero); --bs-btn-hover-border-color: var(--nav-acero); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--nav-noche); --bs-btn-active-border-color: var(--nav-noche);
}
.btn-dark { --bs-btn-bg: var(--nav-noche); --bs-btn-border-color: var(--nav-noche); }
.text-primary { color: var(--nav-acero) !important; }
.bg-primary { background-color: var(--nav-acero) !important; }
.form-control, .form-select { border-radius: .55rem; }
.form-control:focus, .form-select:focus { border-color: var(--nav-senal); box-shadow: 0 0 0 .2rem rgba(89, 126, 163, .22); }
.form-check-input:checked { background-color: var(--nav-acero); border-color: var(--nav-acero); }

/* Tarjetas */
.card { border: 1px solid var(--nav-linea); border-radius: .9rem; box-shadow: 0 1px 2px rgba(29, 45, 61, .04) !important; }
.card.shadow-sm { box-shadow: 0 1px 2px rgba(29, 45, 61, .05), 0 6px 18px rgba(29, 45, 61, .05) !important; }
.card-header { background: #fff; border-bottom: 1px solid var(--nav-linea); border-radius: .9rem .9rem 0 0 !important;
  font-family: var(--nav-titulos); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; color: var(--nav-noche); }
.card-header .bi { color: var(--nav-senal); }
.table { --bs-table-color: var(--nav-tinta); }
.table > :not(caption) > * > * { padding: .7rem .8rem; }
.table thead th, .table-light th { background: #f6f7f9 !important; color: #5d6b78; font-weight: 500; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; border-bottom-color: var(--nav-linea); }

/* Barra superior */
.nv-nav { background: var(--nav-noche); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.nv-nav .navbar-brand img { height: 30px; width: auto; display: block; }
.nv-nav .nav-link { color: rgba(242, 242, 243, .78); font-weight: 500; border-radius: .5rem; padding: .45rem .75rem !important; }
.nv-nav .nav-link:hover, .nv-nav .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .06); }
.nv-nav .nav-link.active { color: #fff; background: rgba(148, 188, 227, .16); }
.nv-nav .nav-link .bi { color: var(--nav-cielo); }
.nv-nav .navbar-toggler { border-color: rgba(255, 255, 255, .2); }
.nv-nav .navbar-toggler-icon { filter: invert(1); }
.nv-nav .dropdown-menu { border: 1px solid var(--nav-linea); border-radius: .7rem; padding: .35rem; }
.nv-nav .dropdown-item { border-radius: .45rem; padding: .45rem .7rem; }
.nv-nav .dropdown-item.active, .nv-nav .dropdown-item:active { background: var(--nav-acero); }
.nv-user { line-height: 1.2; }
.nv-user .nv-name { color: #fff; font-weight: 500; }
.nv-user .nv-org { color: var(--nav-cielo); font-size: .8rem; }
.nv-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--nav-acero); color: #fff; display: inline-grid; place-items: center;
  font-family: var(--nav-titulos); font-weight: 600; font-size: 1rem; flex: none; }
.nv-badge-admin { background: var(--nav-cielo); color: var(--nav-noche); font-family: var(--nav-texto); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .25rem .45rem; border-radius: .35rem; }

/* Indicadores (mapa) */
.kpi { border: 1px solid var(--nav-linea); border-radius: .9rem; background: #fff; }
.kpi .kpi-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.kpi .kpi-val { font-family: var(--nav-titulos); font-weight: 600; font-size: 1.8rem; line-height: 1; color: var(--nav-noche); }
.kpi .kpi-lbl { color: #5d6b78; font-size: .82rem; }

/* Mapas y geocercas */
.nv-map { border-radius: .9rem; overflow: hidden; border: 1px solid var(--nav-linea); }
.leaflet-container { font-family: var(--nav-texto); }
.zone-item { cursor: pointer; transition: background .12s; }
.zone-item:hover { background: #f6f8fb; }
.zone-item.is-active { background: var(--bs-primary-bg-subtle); box-shadow: inset 3px 0 0 var(--nav-acero); }
.zone-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.draw-hint { background: var(--nav-noche); color: #fff; border-radius: .6rem; padding: .55rem .8rem; font-size: .9rem; }
.draw-hint b { color: var(--nav-cielo); }

/* Login */
.nv-auth { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, #2c4560 0%, var(--nav-noche) 55%); }
.nv-auth .card { border: 0; border-radius: 1.1rem; box-shadow: 0 30px 60px rgba(0, 0, 0, .35) !important; }

@media (max-width: 575px) {
  .container-fluid { padding-left: 14px; padding-right: 14px; }
  .page-title { font-size: 1.6rem; }
}

/* Modo "ingresar como cliente" */
.nv-imp { background: #f2c14e; color: #1D1F20; text-align: center; }
.nv-imp .btn-dark { --bs-btn-bg: #1D2D3D; }

/* Íconos de activos */
.asset-ico { width: 28px; height: 28px; border-radius: 8px; background: #e3ebf3; color: var(--nav-acero); display: inline-grid; place-items: center; font-size: .95rem; flex: none; }
.icon-picker { max-height: 260px; overflow: auto; border: 1px solid var(--nav-linea); border-radius: .6rem; padding: .5rem; background: #fff; }
.icon-group { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #5d6b78; margin: .35rem .15rem .3rem; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.icon-opt { height: 42px; border: 1px solid var(--nav-linea); border-radius: .5rem; display: grid; place-items: center; font-size: 1.15rem; color: var(--nav-acero); cursor: pointer; margin: 0; transition: background .12s, border-color .12s; }
.icon-opt:hover { background: #f3f6fa; }
.btn-check:checked + .icon-opt { background: var(--nav-acero); border-color: var(--nav-acero); color: #fff; }
.btn-check:focus-visible + .icon-opt { box-shadow: 0 0 0 .2rem rgba(89, 126, 163, .35); }

/* Mi cuenta y ajustes */
.nv-avatar-lg { width: 56px; height: 56px; font-size: 1.45rem; }
.nv-acct-head { background: linear-gradient(120deg, #fff 60%, #eef3f8); }
.nv-acct-head .badge { font-size: .78rem; font-weight: 600; padding: .4rem .7rem; }
.nv-acct-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--nav-linea); border-radius: .9rem; padding: .4rem; }
.nv-acct-nav a { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: .55rem; color: var(--nav-tinta); text-decoration: none; font-weight: 500; }
.nv-acct-nav a .bi { color: var(--nav-senal); width: 1.1rem; text-align: center; }
.nv-acct-nav a:hover { background: #f3f6fa; }
.nv-acct-nav a.is-active { background: var(--bs-primary-bg-subtle); color: var(--nav-noche); box-shadow: inset 3px 0 0 var(--nav-acero); }
.nv-sec { scroll-margin-top: 84px; }
.nv-devices li, .nv-recips li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--nav-linea); }
.nv-devices li:last-child, .nv-recips li:last-child { border-bottom: 0; }
.nv-dev-ico { width: 36px; height: 36px; border-radius: 10px; background: #e3ebf3; color: var(--nav-acero); display: inline-grid; place-items: center; font-size: 1.05rem; flex: none; }
.nv-tip { display: flex; gap: .75rem; align-items: flex-start; background: var(--nav-papel); border-radius: .7rem; padding: .8rem .9rem; }
.row > [class*="col"] > .nv-tip { height: 100%; }
.nv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; background: var(--nav-noche); color: #fff; border-radius: .8rem; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.nv-cta .nv-cta-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(148, 188, 227, .16); color: var(--nav-cielo); display: grid; place-items: center; font-size: 1.35rem; flex: none; }
.nv-cta .nv-cta-sub { color: var(--nav-cielo); font-size: .85rem; }
.nv-cta .btn { --bs-btn-bg: #fff; --bs-btn-color: var(--nav-noche); --bs-btn-border-color: #fff; --bs-btn-hover-bg: var(--nav-cielo); --bs-btn-hover-border-color: var(--nav-cielo); --bs-btn-hover-color: var(--nav-noche); font-weight: 600; }
.nv-tip > .bi { font-size: 1.4rem; color: var(--nav-acero); line-height: 1; }
.nv-savebar { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--nav-papel) 35%); padding: 1rem 0 .25rem; z-index: 5; }
.form-range::-webkit-slider-thumb { background: var(--nav-acero); }
.form-range::-moz-range-thumb { background: var(--nav-acero); }
@media (max-width: 991px) {
  .nv-acct-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: .3rem; }
  .nv-acct-nav::-webkit-scrollbar { display: none; }
  .nv-acct-nav a { white-space: nowrap; flex: none; padding: .45rem .7rem; }
  .nv-acct-nav a.is-active { box-shadow: inset 0 -3px 0 var(--nav-acero); }
  .nv-acct-plan { width: 100%; }
}

/* Ficha del activo */
.nv-pin { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); display: grid; place-items: center; color: #fff; font-size: 15px; }
.nv-pin .bi { line-height: 1; }
.nv-asset-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; flex: none; }
.kpi .kpi-val.kpi-sm { font-size: 1.3rem; }
.nv-asset-head .card-footer { border-top: 1px solid var(--nav-linea); border-radius: 0 0 .9rem .9rem; }

/* Cámaras: cuadros */
.cam-grid { display: grid; gap: 6px; background: #0d1620; padding: 6px; border-radius: .8rem; }
.cam-g1 { grid-template-columns: 1fr; }
.cam-g4 { grid-template-columns: repeat(2, 1fr); }
.cam-g9 { grid-template-columns: repeat(3, 1fr); }
.cam-g16 { grid-template-columns: repeat(4, 1fr); }
.cam-tile { position: relative; aspect-ratio: 16 / 9; background: #16222e; border-radius: .45rem; overflow: hidden; color: #cfd9e3; outline: none; }
.cam-tile:focus-visible { box-shadow: 0 0 0 2px var(--nav-cielo); }
.cam-media, .cam-media video, .cam-media img, .cam-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.cam-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-size: .82rem; gap: .25rem; pointer-events: none; }
.cam-state .bi { font-size: 1.6rem; color: #7d8fa1; }
.cam-state .btn { pointer-events: auto; }
.cam-tile[data-state="live"] .cam-state { display: none; }
.cam-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .45rem; padding: .3rem .5rem; font-size: .78rem; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.cam-live { width: 8px; height: 8px; border-radius: 50%; background: #7d8fa1; flex: none; }
.cam-tile[data-state="live"] .cam-live { background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: nvpulse 2s infinite; }
.cam-name { flex: 1; min-width: 0; }
.cam-full { border: 0; background: transparent; color: #fff; padding: 0 .2rem; opacity: .85; }
.cam-full:hover { opacity: 1; }
.cam-tile.cam-zoom { position: fixed; inset: 0; z-index: 2000; aspect-ratio: auto; border-radius: 0; }
.cam-tile:fullscreen { aspect-ratio: auto; border-radius: 0; }
.cam-empty { aspect-ratio: 16 / 5; min-height: 120px; background: #16222e; color: #9fb0c1; border-radius: .8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; font-size: .9rem; }
.cam-empty .bi { font-size: 1.8rem; }
.cam-slot { position: relative; aspect-ratio: 16 / 9; border-radius: .45rem; background: repeating-linear-gradient(45deg, #121c26, #121c26 10px, #15202b 10px, #15202b 20px);
  color: #55687b; display: grid; place-items: center; font-size: .8rem; }
@keyframes nvpulse { 70% { box-shadow: 0 0 0 8px rgba(47,158,107,0); } 100% { box-shadow: 0 0 0 0 rgba(47,158,107,0); } }
@media (max-width: 767px) {
  .cam-g9, .cam-g16 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablero (Resumen) */
.nv-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 18px; }
.nv-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.nv-bar span { width: 100%; max-width: 38px; background: var(--nav-senal); border-radius: 4px 4px 0 0; min-height: 2px; transition: background .15s; }
.nv-bar:hover span { background: var(--nav-acero); }
.nv-bar.is-today span { background: var(--nav-noche); }
.nv-bar small { position: absolute; top: -16px; font-size: .68rem; color: #5d6b78; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.nv-bar:hover small, .nv-bars.few .nv-bar small { opacity: 1; }
.nv-bar-lbl { display: flex; gap: 4px; font-size: .68rem; color: #5d6b78; margin-top: 4px; }
.nv-bar-lbl span { flex: 1; text-align: center; min-width: 0; overflow: hidden; }
.nv-score { display: inline-grid; place-items: center; min-width: 2.6rem; padding: .15rem .45rem; border-radius: 1rem; font-weight: 700; font-size: .8rem; }
.nv-evrow { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--nav-linea); }
.nv-evrow:last-child { border-bottom: 0; }
.nv-evrow .nv-evbar { flex: 1; height: 6px; background: #eef2f6; border-radius: 3px; overflow: hidden; }
.nv-evrow .nv-evbar i { display: block; height: 100%; background: var(--nav-senal); border-radius: 3px; }
.table-nv th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #5d6b78; font-weight: 600; white-space: nowrap; }
.table-nv td { white-space: nowrap; }
#wall:fullscreen { height: 100vh; align-content: center; border-radius: 0; }
.nv-nav .nav-link { white-space: nowrap; }
.nv-user .nv-name, .nv-user .nv-org { white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) and (max-width: 1299px) {
  .nv-nav .navbar-nav .nav-link { padding-left: .45rem !important; padding-right: .45rem !important; font-size: .92rem; }
  .nv-nav .navbar-brand { margin-right: .75rem !important; }
}
@media (min-width: 992px) and (max-width: 1499px) { .nv-user .small { display: none; } }
@media (min-width: 992px) and (max-width: 1199px) { .nv-nav .nav-link .bi { display: none; } }
.nv-nav .btn { white-space: nowrap; }
@media (max-width: 575px) { .kpi .kpi-val.kpi-sm { font-size: 1.1rem; white-space: normal !important; overflow: visible !important; } }

/* SOS */
.nv-sos { background: #dc2626; color: #fff; position: relative; z-index: 1031; }
.nv-sos[hidden] { display: none; }
.nv-sos-item { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; padding: .55rem 1rem; color: #fff; text-decoration: none; font-size: .92rem; animation: nvSos 1.2s ease-in-out infinite alternate; }
.nv-sos-item + .nv-sos-item { border-top: 1px solid rgba(255,255,255,.25); }
.nv-sos-item:hover { color: #fff; background: #b91c1c; }
.nv-sos-more { background: rgba(0,0,0,.25); border-radius: 999px; padding: .05rem .55rem; font-size: .8rem; font-weight: 600; }
.nv-sos-go { background: #fff; color: #b91c1c; border-radius: 999px; padding: .1rem .7rem; font-weight: 600; font-size: .8rem; }
@keyframes nvSos { from { background: #dc2626; } to { background: #b91c1c; } }
@media (prefers-reduced-motion: reduce) { .nv-sos-item { animation: none; } }
.sos-card { border: 2px solid #dc2626; }
.sos-card .card-header { background: #dc2626; color: #fff; }
.use-opt { border: 1.5px solid var(--nav-linea); border-radius: .75rem; padding: .7rem .8rem; cursor: pointer; display: block; height: 100%; background: #fff; }
.use-opt:has(input:checked) { border-color: var(--nav-senal); background: #eef4fa; box-shadow: 0 0 0 .15rem rgba(65,97,128,.15); }
.use-opt input { position: absolute; opacity: 0; }
.tip-row { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--nav-linea); }
.tip-row:last-child { border-bottom: 0; }
.tip-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 1.05rem; }

/* selector de idioma en páginas públicas (ingresar, crear cuenta) */
.nv-lang-float { position: fixed; top: 12px; right: 12px; z-index: 1050; }
.nv-lang-float .btn { color: #1D2D3D; }
@media print { .nv-lang-float { display: none; } }

/* menú del administrador en pantallas medianas: sin íconos y más compacto para que quepa todo */
@media (min-width: 992px) and (max-width: 1599px) {
  #adminNav .nav-link > .bi { display: none; }
  #adminNav .navbar-nav .nav-link { padding-left: .5rem; padding-right: .5rem; }
}
@media (max-width: 1799px) { .nv-admin-me { display: none !important; } }