/* =========================================================
   niblok UI V4 · sistema visual aprobado
   Capa progresiva sobre Bootstrap 5 y las vistas Flask actuales.
   ========================================================= */

:root {
  --nb-red: #76091c;
  --nb-red-2: #500511;
  --nb-red-hover: #920d24;
  --nb-cyan: #00e5ff;
  --nb-green: #45e39a;
  --nb-amber: #ffc34d;
  --nb-bg: #050608;
  --nb-surface: #0c1015;
  --nb-surface-2: #11161d;
  --nb-border: #252c36;
  --nb-text: #f5f7fb;
  --nb-muted: #919baa;
  --nb-sidebar: 250px;
}

/* =========================================================
   Acciones globales de registro · patrón circular Planning
   Ver / editar / eliminar comparten geometría; cambia el tono.
   Los submit y las confirmaciones de modal conservan texto.
   ========================================================= */
body.is-panel-route .site-main :is(
  a:has(> i.bi-eye),
  a:has(> i.bi-eye-fill),
  a:has(> i.bi-pencil),
  a:has(> i.bi-pencil-square),
  a:has(> i.bi-trash),
  a:has(> i.bi-trash-fill),
  button:not([type="submit"]):has(> i.bi-eye),
  button:not([type="submit"]):has(> i.bi-eye-fill),
  button:not([type="submit"]):has(> i.bi-pencil),
  button:not([type="submit"]):has(> i.bi-pencil-square),
  button:not([type="submit"]):has(> i.bi-trash),
  button:not([type="submit"]):has(> i.bi-trash-fill)
):not(.btn-action--pdf):not(.pdf-action):not(.match-add-row):not(.session-setup-action) {
  display:inline-flex !important;
  flex:0 0 42px !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden !important;
  border:2px solid rgba(91,183,220,.78) !important;
  border-radius:50% !important;
  background:#0e151b !important;
  color:#dff6ff !important;
  font-size:0 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
  box-shadow:0 0 10px rgba(65,166,205,.38),inset 0 0 7px rgba(0,0,0,.58) !important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease !important;
}
body.is-panel-route .site-main :is(
  a:has(> i.bi-eye),a:has(> i.bi-eye-fill),a:has(> i.bi-pencil),a:has(> i.bi-pencil-square),a:has(> i.bi-trash),a:has(> i.bi-trash-fill),
  button:not([type="submit"]):has(> i.bi-eye),button:not([type="submit"]):has(> i.bi-eye-fill),
  button:not([type="submit"]):has(> i.bi-pencil),button:not([type="submit"]):has(> i.bi-pencil-square),
  button:not([type="submit"]):has(> i.bi-trash),button:not([type="submit"]):has(> i.bi-trash-fill)
):not(.btn-action--pdf):not(.pdf-action):not(.match-add-row):not(.session-setup-action) > i {
  margin:0 !important;
  font-size:1.05rem !important;
  line-height:1 !important;
  color:currentColor !important;
}
body.is-panel-route .site-main :is(
  a:has(> i.bi-trash),a:has(> i.bi-trash-fill),button:not([type="submit"]):has(> i.bi-trash),
  button:not([type="submit"]):has(> i.bi-trash-fill)
):not(.match-add-row) {
  border-color:rgba(197,42,70,.92) !important;
  color:#ffdce3 !important;
  background:#170b10 !important;
  box-shadow:0 0 10px rgba(165,28,55,.48),inset 0 0 7px rgba(0,0,0,.62) !important;
}
body.is-panel-route .site-main :is(
  a:has(> i.bi-eye),a:has(> i.bi-eye-fill),a:has(> i.bi-pencil),a:has(> i.bi-pencil-square),a:has(> i.bi-trash),a:has(> i.bi-trash-fill),
  button:not([type="submit"]):has(> i.bi-eye),button:not([type="submit"]):has(> i.bi-eye-fill),
  button:not([type="submit"]):has(> i.bi-pencil),button:not([type="submit"]):has(> i.bi-pencil-square),
  a:has(> i.bi-trash),a:has(> i.bi-trash-fill),button:not([type="submit"]):has(> i.bi-trash),button:not([type="submit"]):has(> i.bi-trash-fill)
):not(.btn-action--pdf):not(.pdf-action):not(.match-add-row):not(.session-setup-action):hover {
  transform:translateY(-1px) scale(1.06) !important;
  border-color:#a9e9ff !important;
  color:#fff !important;
  box-shadow:0 0 16px rgba(65,183,226,.68),inset 0 0 7px rgba(0,0,0,.65) !important;
}
body.is-panel-route .site-main :is(
  a:has(> i.bi-trash),a:has(> i.bi-trash-fill),button:not([type="submit"]):has(> i.bi-trash),button:not([type="submit"]):has(> i.bi-trash-fill)
):hover {
  border-color:#e4687f !important;
  box-shadow:0 0 16px rgba(197,42,70,.72),inset 0 0 7px rgba(0,0,0,.65) !important;
}
@media(max-width:575.98px){
  body.is-panel-route .site-main :is(a,button).btn-round,
  body.is-panel-route .site-main :is(a,button).btn-mobile{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
}

/* Halo de acción reforzado. :has descendiente cubre iconos dentro de spans. */
body.is-panel-route .site-main :is(a,button:not([type="submit"])):has(i:is(.bi-eye,.bi-eye-fill,.bi-pencil,.bi-pencil-square,.bi-trash,.bi-trash-fill)):not(.btn-action--pdf):not(.pdf-action):not(.match-add-row):not(.session-setup-action) {
  display:inline-flex!important;
  flex:0 0 42px!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:50%!important;
  font-size:0!important;
  line-height:1!important;
  text-decoration:none!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
body.is-panel-route .site-main :is(a,button:not([type="submit"])):has(i:is(.bi-eye,.bi-eye-fill)):not(.btn-action--pdf):not(.pdf-action) {
  border:2px solid #35d9f2!important;
  color:#bff8ff!important;
  background:radial-gradient(circle at 50% 42%,rgba(53,217,242,.18),#081116 68%)!important;
  box-shadow:0 0 5px #35d9f2,0 0 15px rgba(53,217,242,.72),0 0 28px rgba(53,217,242,.30),inset 0 0 10px rgba(53,217,242,.13)!important;
}
body.is-panel-route .site-main :is(a,button:not([type="submit"])):has(i:is(.bi-pencil,.bi-pencil-square)):not(.session-setup-action) {
  border:2px solid #69aee8!important;
  color:#d6ecff!important;
  background:radial-gradient(circle at 50% 42%,rgba(105,174,232,.18),#091017 68%)!important;
  box-shadow:0 0 5px #69aee8,0 0 15px rgba(105,174,232,.68),0 0 28px rgba(65,133,196,.30),inset 0 0 10px rgba(105,174,232,.13)!important;
}
body.is-panel-route .site-main :is(a,button:not([type="submit"])):has(i:is(.bi-trash,.bi-trash-fill)) {
  border:2px solid #be2947!important;
  color:#ffd8e0!important;
  background:radial-gradient(circle at 50% 42%,rgba(190,41,71,.22),#16080d 68%)!important;
  box-shadow:0 0 5px #be2947,0 0 15px rgba(190,41,71,.74),0 0 30px rgba(118,9,28,.40),inset 0 0 10px rgba(190,41,71,.16)!important;
}
body.is-panel-route .site-main :is(a,button:not([type="submit"])):has(i:is(.bi-eye,.bi-eye-fill,.bi-pencil,.bi-pencil-square,.bi-trash,.bi-trash-fill)) i {
  margin:0!important;
  color:currentColor!important;
  font-size:1.08rem!important;
  line-height:1!important;
  filter:drop-shadow(0 0 4px currentColor)!important;
}
body.is-panel-route .site-main :is(a,button:not([type="submit"])):has(i:is(.bi-eye,.bi-eye-fill,.bi-pencil,.bi-pencil-square,.bi-trash,.bi-trash-fill)) span:not(:has(i)) {display:none!important}
body.is-panel-route .site-main :is(a,button:not([type="submit"])):has(i:is(.bi-eye,.bi-eye-fill,.bi-pencil,.bi-pencil-square,.bi-trash,.bi-trash-fill)) span:has(i) {font-size:0!important}
body.is-panel-route .site-main :is(a,button:not([type="submit"])):has(i:is(.bi-eye,.bi-eye-fill,.bi-pencil,.bi-pencil-square,.bi-trash,.bi-trash-fill)):hover {
  transform:translateY(-1px) scale(1.08)!important;
  filter:brightness(1.2)!important;
}

/*
 * Acciones semánticas: no dependen de la librería del icono ni del tipo del
 * botón. Así alcanzan también Font Awesome y los submit de eliminación.
 */
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon):is(.btn-view,.btn-performance,.btn-edit,.btn-delete,.btn-pass,.btn-history,.btn-invite,.btn-reinvite) {
  display:inline-flex!important;
  flex:0 0 42px!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:50%!important;
  font-size:0!important;
  line-height:1!important;
  text-decoration:none!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon).btn-view {
  border:2px solid #45e39a!important;
  color:#d9ffed!important;
  background:radial-gradient(circle at 50% 42%,rgba(69,227,154,.22),#07140f 68%)!important;
  box-shadow:0 0 6px rgba(69,227,154,.95),0 0 17px rgba(69,227,154,.64),0 0 30px rgba(69,227,154,.28),inset 0 0 10px rgba(69,227,154,.16)!important;
}
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon).btn-performance {
  border:2px solid #45e39a!important;
  color:#d9ffed!important;
  background:radial-gradient(circle at 50% 42%,rgba(69,227,154,.22),#07140f 68%)!important;
  box-shadow:0 0 6px rgba(69,227,154,.95),0 0 17px rgba(69,227,154,.64),0 0 30px rgba(69,227,154,.28),inset 0 0 10px rgba(69,227,154,.16)!important;
}
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon).btn-edit {
  border:2px solid #ffc34d!important;
  color:#fff1c7!important;
  background:radial-gradient(circle at 50% 42%,rgba(255,195,77,.22),#171105 68%)!important;
  box-shadow:0 0 6px rgba(255,195,77,.95),0 0 17px rgba(255,195,77,.62),0 0 30px rgba(255,170,40,.27),inset 0 0 10px rgba(255,195,77,.15)!important;
}
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon).btn-delete {
  border:2px solid #d63250!important;
  color:#ffe1e7!important;
  background:radial-gradient(circle at 50% 42%,rgba(214,50,80,.25),#19080e 68%)!important;
  box-shadow:0 0 6px rgba(214,50,80,.95),0 0 17px rgba(214,50,80,.68),0 0 31px rgba(118,9,28,.42),inset 0 0 10px rgba(214,50,80,.18)!important;
}
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon):is(.btn-pass,.btn-history,.btn-invite,.btn-reinvite) {
  border:2px solid #42b8ff!important;
  color:#d9f1ff!important;
  background:radial-gradient(circle at 50% 42%,rgba(66,184,255,.23),#07111a 68%)!important;
  box-shadow:0 0 6px rgba(66,184,255,.96),0 0 17px rgba(66,184,255,.67),0 0 30px rgba(22,116,190,.34),inset 0 0 10px rgba(66,184,255,.17)!important;
}
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon):is(.btn-view,.btn-performance,.btn-edit,.btn-delete,.btn-pass,.btn-history,.btn-invite,.btn-reinvite) i {
  margin:0!important;
  color:currentColor!important;
  font-size:1.05rem!important;
  line-height:1!important;
  filter:drop-shadow(0 0 4px currentColor)!important;
}
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon):is(.btn-view,.btn-performance,.btn-edit,.btn-delete,.btn-pass,.btn-history,.btn-invite,.btn-reinvite):not(:disabled):hover {
  transform:translateY(-1px) scale(1.08)!important;
  filter:brightness(1.2)!important;
}

/* Fallback por icono para acciones antiguas que aún no tienen clase semántica. */
body.is-panel-route .site-main :is(a,button):has(i:is(.bi-eye,.bi-eye-fill,.fa-eye,.fa-eye-slash,.bi-graph-up,.fa-chart-line)) {
  --nb-action-color:#45e39a;
  --nb-action-rgb:69,227,154;
}
body.is-panel-route .site-main :is(a,button):has(i:is(.bi-pencil,.bi-pencil-square,.fa-pen,.fa-pencil,.fa-pen-to-square)) {
  --nb-action-color:#ffc34d;
  --nb-action-rgb:255,195,77;
}
body.is-panel-route .site-main :is(a,button):has(i:is(.bi-trash,.bi-trash-fill,.fa-trash,.fa-trash-can,.bi-x-circle,.fa-ban)) {
  --nb-action-color:#d63250;
  --nb-action-rgb:214,50,80;
}
body.is-panel-route .site-main :is(a,button):has(i:is(.bi-key,.fa-key,.bi-clock-history,.fa-clock-rotate-left,.bi-person-plus,.bi-person-plus-fill,.fa-user-plus,.bi-send,.fa-paper-plane,.bi-download,.fa-download,.bi-file-earmark-pdf,.fa-file-pdf)) {
  --nb-action-color:#42b8ff;
  --nb-action-rgb:66,184,255;
}
body.is-panel-route .site-main :is(a,button):is(.btn-round,.btn-mobile,.btn-neon):has(i):not(.btn-view):not(.btn-performance):not(.btn-edit):not(.btn-delete):not(.btn-pass):not(.btn-history):not(.btn-invite):not(.btn-reinvite) {
  border:2px solid var(--nb-action-color,#42b8ff)!important;
  color:#f2f9ff!important;
  background:radial-gradient(circle at 50% 42%,rgba(var(--nb-action-rgb,66,184,255),.23),#07111a 68%)!important;
  box-shadow:0 0 6px rgba(var(--nb-action-rgb,66,184,255),.95),0 0 17px rgba(var(--nb-action-rgb,66,184,255),.64),0 0 30px rgba(var(--nb-action-rgb,66,184,255),.28),inset 0 0 10px rgba(var(--nb-action-rgb,66,184,255),.16)!important;
}

body.is-panel-route {
  color: var(--nb-text) !important;
  background:
    radial-gradient(circle at 78% -8%, rgba(181,18,43,.10), transparent 28rem),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    var(--nb-bg) !important;
  background-size: auto, 42px 42px, 42px 42px, auto !important;
}

body.is-panel-route .niblok-panel-loop-bg,
body.is-panel-route .niblok-panel-loop-grid { display: none !important; }

/* Sidebar de escritorio sobre la navegación real y su RBAC. */
@media (min-width: 992px) {
  body.is-panel-route .panel-main-header {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 6000 !important;
    width: var(--nb-sidebar);
    height: 100vh;
    border: 0 !important;
    border-right: 1px solid var(--nb-border) !important;
    background: rgba(6,7,10,.97) !important;
    box-shadow: none !important;
  }

  body.is-panel-route .panel-main-header .container-fluid,
  body.is-panel-route .panel-main-header .nav-bar {
    width: 100%;
    height: 100%;
    padding: 0 !important;
  }

  body.is-panel-route .panel-main-header .nav-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body.is-panel-route .panel-main-header .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 84px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255,255,255,.045);
    text-decoration: none;
  }

  body.is-panel-route .panel-main-header .brand::after {
    content: "niblok";
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.05em;
  }

  body.is-panel-route .panel-main-header .brand-logo {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px;
    box-shadow: 0 0 26px rgba(255,49,95,.28);
  }

  body.is-panel-route .panel-main-nav {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100%;
    padding: 22px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    overflow-y: auto;
  }

  body.is-panel-route .panel-main-nav::before {
    display: none;
  }

  body.is-panel-route .panel-main-nav .nav-section-label {
    display: block;
    width: 100%;
    margin: 13px 0 2px;
    padding: 0 10px;
    color: #626d7d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  body.is-panel-route .panel-main-nav .nav-section-label:first-child {
    margin-top: 0;
  }

  body.is-panel-route .panel-main-nav .nav-link-electric-red {
    display: flex !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    width: 100% !important;
    min-height: 44px;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #929cab !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.is-panel-route .panel-main-nav form.nav-link-electric-red.d-md-none {
    display: none !important;
  }

  body.is-panel-route .panel-main-nav .nav-link-electric-red:hover {
    color: #fff !important;
    background: #12161d !important;
  }

  body.is-panel-route .panel-main-nav .nav-link-electric-red.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(255,49,95,.18), rgba(255,49,95,.035)) !important;
    box-shadow: inset 3px 0 var(--nb-red) !important;
  }

  body.is-panel-route .panel-main-nav .nav-link-electric-red__icon {
    width: 20px !important;
    margin: 0 !important;
    color: currentColor !important;
    font-size: 18px !important;
    filter: none !important;
  }

  body.is-panel-route .panel-main-nav .nav-link-electric-red__label {
    display: inline !important;
    opacity: 1 !important;
  }

  body.is-panel-route .login-desktop {
    display: flex !important;
    justify-content: stretch;
    margin: auto 14px 18px;
    padding: 0;
    border: 1px solid var(--nb-border);
    border-radius: 16px;
    background: var(--nb-surface);
  }

  body.is-panel-route .login-desktop form { width: 100%; }
  body.is-panel-route .login-desktop button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 14px !important;
    color: #aeb7c4 !important;
    text-decoration: none !important;
  }
  body.is-panel-route .login-desktop button::before { content: "Cerrar sesión"; font-size: 12px; font-weight: 750; }
  body.is-panel-route .login-desktop .bi { font-size: 18px !important; }
  body.is-panel-route .panel-main-header .nav-toggle { display: none !important; }
  /* La especificidad incluye panel-content-shell para ganar a panel_layout.css. */
  body.is-panel-route .site-main.panel-content-shell {
    margin-left: var(--nb-sidebar) !important;
    width: calc(100% - var(--nb-sidebar)) !important;
    max-width: calc(100% - var(--nb-sidebar)) !important;
    overflow-x: hidden !important;
  }
  body.is-panel-route .site-main.panel-content-shell > *,
  body.is-panel-route .site-main.panel-content-shell .panel-bp-shell {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.is-panel-route .panel-flash-shell,
  body.is-panel-route footer { margin-left: var(--nb-sidebar) !important; width: calc(100% - var(--nb-sidebar)) !important; }
}

/* Superficies y controles compartidos. */
body.is-panel-route .site-main .panel-bp-shell {
  max-width: 1580px !important;
  padding-top: 30px !important;
}

body.is-panel-route :is(.card,.dash-card,.chart-card,.metric-card,.dashboard-main-card,.holistic-card) {
  border-color: var(--nb-border) !important;
  background-color: var(--nb-surface) !important;
}

body.is-panel-route :is(.form-control,.form-select,.dash-control) {
  border: 1px solid var(--nb-border) !important;
  border-radius: 12px !important;
  color: #eef2f7 !important;
  background-color: #0c1015 !important;
  box-shadow: none !important;
}

body.is-panel-route :is(.form-control,.form-select,.dash-control):focus {
  border-color: rgba(255,49,95,.7) !important;
  box-shadow: 0 0 0 3px rgba(255,49,95,.11) !important;
}

body.is-panel-route :is(.btn-primary,.btn-action--primary,.dash-btn) {
  border-color: var(--nb-red) !important;
  color: #fff !important;
  background: var(--nb-red) !important;
  box-shadow: 0 0 24px rgba(255,49,95,.18) !important;
}

body.is-panel-route .team-dashboard-wrap { background: transparent !important; }
body.is-panel-route .dashboard-main-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.is-panel-route .dash-filter-panel {
  border-color: var(--nb-border) !important;
  border-radius: 18px !important;
  background: rgba(13,16,21,.88) !important;
}

body.is-panel-route .control-overview-grid { gap: 12px !important; }
body.is-panel-route .control-kpi {
  min-height: 112px !important;
  border-color: var(--nb-border) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #11161d, #0b0e13) !important;
  box-shadow: none !important;
  transition: transform .25s ease, border-color .25s ease;
}
body.is-panel-route .control-kpi:hover { transform: translateY(-3px); border-color: #3b424e !important; }
body.is-panel-route .control-kpi__value { font-size: 1.75rem !important; font-weight: 900 !important; }

body.is-panel-route .performance-summary-head {
  margin-top: 18px !important;
  border: 0 !important;
  border-left: 3px solid var(--nb-red) !important;
  border-radius: 0 14px 14px 0 !important;
  background: linear-gradient(90deg, rgba(255,49,95,.09), transparent) !important;
}

/* CRI real: conserva los datos del backend y adopta el gráfico aprobado. */
body.is-panel-route .holistic-card {
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,229,255,.10), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(255,49,95,.10), transparent 30%),
    linear-gradient(145deg,#11161d,#090c11) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.24) !important;
}
body.is-panel-route .holistic-card::before { display: none !important; }
body.is-panel-route .holistic-layout { grid-template-columns: 240px minmax(0,1fr) 280px !important; }
body.is-panel-route .holistic-orb { width: 196px !important; height: 196px !important; background: conic-gradient(from -90deg,#ff3f68 0%,#ff5d82 36%,#d957a0 52%,#00e5ff calc(var(--h-score,0)*1%),#202936 calc(var(--h-score,0)*1%) 100%) !important; }
body.is-panel-route .holistic-orb::before { inset: 6px !important; opacity: .55 !important; }
body.is-panel-route .holistic-orb::after { width: 132px !important; height: 132px !important; }
body.is-panel-route .holistic-score strong { font-size: 2.55rem !important; text-shadow: 0 0 22px rgba(255,255,255,.10) !important; }
body.is-panel-route .holistic-score span { font-size: .65rem !important; }
body.is-panel-route .holistic-factor { padding: .55rem .65rem !important; border-color: var(--nb-border) !important; }
body.is-panel-route .factor-fill { background: linear-gradient(90deg,var(--nb-cyan),#898cca 52%,var(--nb-red)) !important; }
body.is-panel-route .holistic-mini { border-color: var(--nb-border) !important; background: rgba(255,255,255,.025) !important; }

body.is-panel-route .chart-card,
body.is-panel-route .dash-card,
body.is-panel-route .metric-card {
  border-radius: 18px !important;
  background: linear-gradient(145deg,#11161d,#0a0d12) !important;
  box-shadow: none !important;
}
body.is-panel-route .chart-card::before { opacity: .18 !important; }

@media (max-width: 1200px) {
  body.is-panel-route .holistic-layout { grid-template-columns: 220px 1fr !important; }
  body.is-panel-route .holistic-side { grid-column: 1 / -1; grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 991.98px) {
  html:has(body.is-panel-route), body.is-panel-route { max-width:100%; overflow-x:hidden !important; }
  body.is-panel-route .site-main.panel-content-shell,
  body.is-panel-route .panel-flash-shell,
  body.is-panel-route footer {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.is-panel-route .panel-main-header {
    position: sticky !important;
    top: 0;
    z-index: 6000 !important;
    border-bottom: 1px solid var(--nb-border) !important;
    background: rgba(6,7,10,.96) !important;
    /* Evita que Chrome convierta el menú fixed en una caja ligada a la cabecera. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.is-panel-route .panel-main-header .brand::after { content: "niblok"; margin-left: 8px; color:#fff; font-weight:900; }
  body.is-panel-route .panel-main-nav.open {
    position: fixed !important;
    top: 70px !important;
    bottom: auto !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: auto !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 80px) !important;
    margin-left: auto !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border: 1px solid #303844;
    border-radius: 16px;
    background: rgba(8,11,16,.985) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.72) !important;
    z-index: 7000 !important;
  }
  body.is-panel-route .panel-main-nav.open .nav-section-label {
    flex: 0 0 auto;
    width: 100%;
    margin: 10px 0 2px;
    padding: 0 8px;
    color: #778394;
    font-size: 9px;
  }
  body.is-panel-route .panel-main-nav.open .nav-section-label:first-child { margin-top: 2px; }
  body.is-panel-route .panel-main-nav .nav-link-electric-red {
    display: flex !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: #c7ced8 !important;
    background: transparent !important;
    font-size: 13px !important;
    overflow: visible !important;
  }
  body.is-panel-route .panel-main-nav .nav-link-electric-red__label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }
  body.is-panel-route .panel-main-nav .nav-link-electric-red__icon { color:#b9c6d6 !important; }
  body.is-panel-route .panel-main-nav .nav-link-electric-red.active {
    border-color:rgba(181,18,43,.5) !important; color:#fff !important; background:rgba(118,9,28,.28) !important;
    box-shadow:inset 3px 0 var(--nb-red) !important;
  }
  body.is-panel-route .panel-main-nav .nav-link-electric-red.active .nav-link-electric-red__icon { color:#e23a55 !important; }
  body.is-panel-route .panel-main-nav form.nav-mobile-session {
    flex: none !important;
    margin: 12px 0 0 !important;
    border-top: 1px solid #252c36 !important;
    border-radius: 0 !important;
    padding-top: 8px !important;
  }
  body.is-panel-route.nav-menu-open { overflow: hidden !important; }
  body.is-panel-route .site-main .panel-bp-shell { padding-top: 20px !important; }
}

@media (max-width: 430px) {
  body.is-panel-route .panel-main-nav.open { left:8px !important; right:8px !important; max-width:none !important; }
}

@media (max-width: 767.98px) {
  body.is-panel-route .holistic-layout { grid-template-columns: 1fr !important; }
  body.is-panel-route .holistic-side { grid-template-columns: 1fr 1fr; }
  body.is-panel-route .holistic-orb { width: 180px !important; height: 180px !important; }
  body.is-panel-route .holistic-orb::after { width: 122px !important; height: 122px !important; }
  body.is-panel-route .holistic-score strong { font-size: 2.25rem !important; }
  body.is-panel-route .charts-grid { gap: 12px !important; }
}

@media (max-width: 520px) {
  body.is-panel-route .holistic-side { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-panel-route *, body.is-panel-route *::before, body.is-panel-route *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}