@charset "UTF-8";
/* PALETA DE COLORES BASE - NESPRA */
:root {
  /* BASE COLORS */
  --white: #ffffff;
  --black: #000000;
  /* BLUE SCALE */
  --blue-0: #99A7E6;
  --blue-1: #8A97D8;
  --blue-2: #6B79BC;
  --blue-3: #4B5AA1;
  --blue-4: #2C3C85;
  --blue-5: #0D1D69;
  --blue-6: #0A1754;
  --blue-7: #08113F;
  --blue-8: #050C2A;
  --blue-9: #030615;
  /* CYAN SCALE */
  --cyan-0: #ebfdff;
  --cyan-1: #a2f1ff;
  --cyan-2: #63e4fd;
  --cyan-3: #1ccef4;
  --cyan-4: #00b9e4;
  --cyan-5: #038cb7;
  --cyan-6: #0a7094;
  --cyan-7: #125b78;
  --cyan-8: #144c65;
  --cyan-9: #063146;
  /* SUCCESS SCALE */
  --success-50: #f2fbf3;
  --success-100: #e2f6e4;
  --success-200: #c6ecca;
  --success-300: #98dda1;
  --success-400: #74ca80;
  --success-500: #3fa84e;
  --success-600: #2f8a3c;
  --success-700: #286d32;
  --success-800: #24572c;
  --success-900: #1f4826;
  --success-950: #0c2711;
  /* WARNING SCALE */
  --warning-50: #fefbec;
  --warning-100: #fcf5c9;
  --warning-200: #f8e98f;
  --warning-300: #f5d754;
  --warning-400: #f3ca3e;
  --warning-500: #eba615;
  --warning-600: #d0800f;
  --warning-700: #ad5c10;
  --warning-800: #8c4714;
  --warning-900: #743b13;
  --warning-950: #421e06;
  /* ERROR SCALE */
  --error-50: #fef2f2;
  --error-100: #fde3e3;
  --error-200: #fccccd;
  --error-300: #f9a8a9;
  --error-400: #f37678;
  --error-500: #ea5658;
  --error-600: #d52d2f;
  --error-700: #b32224;
  --error-800: #942022;
  --error-900: #7b2122;
  --error-950: #430c0d;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: none;
  background-clip: border-box;
  word-wrap: break-word;
  overflow: visible !important;
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--table-glass-border);
}

.card-body {
  flex: 1 1 auto;
  border-radius: 16px;
  width: 100%;
  padding: 1.25rem;
}

.card_lte_info {
  padding: 0px !important;
  border: 1px solid var(--table-glass-border);
  box-shadow: var(--card-shadow);
  border-radius: 16px;
  margin: 0;
}

.card-widget {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--bg-card) !important;
}

.card-widget .card-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: auto;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
}

.card_shadow {
  box-shadow: var(--card-shadow);
}

.widget-header {
  padding: 10px;
  border: 0;
  background-color: var(--bg-card);
  min-height: 48px;
}

.title_widget {
  font-weight: 600;
  font-size: 1rem;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card_shadow {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.card-body-tabs {
  padding: 0 !important;
}

/* CARD HEADER — BASE */
.card-header {
  padding: 12px 16px;
  margin-bottom: 0;
  background: transparent;
  border-bottom: 1px solid var(--card-border-soft);
  border-radius: 16px 16px 0 0 !important;
  border-bottom: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.column-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 5px;
}

.row-table-fix {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1px !important;
  padding-right: 0 !important;
}

.row-table-fix > [class*=col] {
  padding-left: 0;
  padding-right: 0;
}

.row-table-fix:has(> [class*=col] > .card) {
  padding-left: 0 !important;
}

.padding_card_icon_battery {
  width: 50px;
  height: 50px;
  gap: 8px;
  align-items: center;
  display: flex;
  padding-right: 20px;
}

.padding_card_icon {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row_nesgate_info {
  padding-bottom: 20px;
}

.card_nesgate_info,
.map_nesgate_info {
  background: var(--surface-glass-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 16px !important;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  margin-top: 5px;
}

.zones,
.parents {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background-color: var(--bg-main);
  border: 4px solid var(--black);
  width: 90%;
  max-width: 700px;
  min-height: 75px;
  max-height: 350px;
  overflow-y: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.zones[diselect],
.parents[diselect] {
  opacity: 0;
  visibility: hidden;
}

/* Labels e inputs */
#deviceAssigned h1 {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 20px;
}

#deviceAssigned input[type=radio],
#deviceAssigned input[type=checkbox] {
  display: none;
}

#deviceAssigned label {
  display: inline-block;
  padding: 10px;
  width: 90px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease;
}

#deviceAssigned label:hover,
#deviceAssigned input[type=radio]:checked + label,
#deviceAssigned input[type=checkbox]:checked + label {
  background: var(--bg-selected);
  border-radius: 20%;
}

.card-footer {
  padding: 0.75rem 1.25rem;
}

/* Espaciado */
.no_right_padding {
  padding-right: 10px !important;
}

.no_left_padding {
  padding-left: 6px !important;
}

.align-card-left {
  padding-left: 1rem;
}

.smallest_blue_text_nesmote_info {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  padding-left: 0;
}

.card-group {
  padding-right: 10px;
  margin-top: 10px;
  gap: 0;
}

.card-group {
  gap: 0;
}

.card-body-tab-nesgates {
  margin-top: 8px;
  padding-left: 10px;
}

.table-wrapper {
  overflow-x: auto;
  width: 100%;
}

.table-wrapper--bordered {
  border: 1px solid var(--table-glass-border);
  border-radius: 12px;
}
.table-wrapper--bordered tbody tr:last-child > td {
  border-bottom: 0;
}
.table-wrapper--bordered > table > :first-child > tr:first-child > * {
  border-top: 0;
}

/* Responsive media queries */
@media (max-width: 768px) {
  .card_nesgate_info,
  .nesmotes_nesgate_info_card,
  .map_nesgate_info {
    padding: 1rem;
    margin: 1rem 0;
    height: auto;
  }
  .map_nesgate_info {
    height: min(400px, 45dvh);
  }
  .zones,
  .parents {
    width: 95%;
  }
}
.dropdown_sensor_configuration_options_text:hover {
  color: var(--text-link-hover);
  font-weight: 600;
  background: var(--sidebar-bg-active);
}

.grid-stack {
  border: 1px solid var(--border-gridstack);
  border-radius: 5px;
}

.grid-stack-item-content {
  float: left;
  background-position: center center;
  background-size: cover;
  border-radius: 16px !important;
  box-shadow: var(--card-shadow);
  background: var(--card-bg) !important;
  overflow: hidden;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
  border-radius: 8px;
  margin: 0;
  position: absolute;
  width: auto;
}

.grid-stack-item-content > .card-widget > .card-header {
  background: transparent !important;
  border: 1px solid transparent;
}

.grid-stack-item-content > .card-widget > .card-header:hover {
  background: var(--bg-header-widget) !important;
  border: 1px solid transparent;
}

/* Card-group estilos */
.card-group .card {
  border-radius: 16px !important;
}

.custom-card-group .card:not(.card-keep-radius):not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.custom-card-group .card:not(.card-keep-radius):not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.highcharts-a11y-proxy-button {
  padding-top: 10px;
}

.other_values_graph {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding-left: 13px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  text-align: center;
}

.nesmote_name_information {
  cursor: pointer;
  width: 100%;
  border: 0px;
  border-color: var(--blue-5) !important;
  border-radius: 8px;
}

.note_network_info {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  display: block;
}

.tab-licenses {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.nesmote-icon {
  height: 40px !important;
  margin-left: -8px;
  justify-content: center;
}

.battery-icon {
  height: 38px !important;
  justify-content: center;
}

.equal-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ping_results_box {
  border: 1px solid var(--input-border-filled);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 12px;
  overflow-y: auto;
  min-height: 480px;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
}

.ping_results_box:active {
  transform: scale(0.995);
}

.padding_card_columns .nesmote-name-wrapper {
  max-width: 100% !important;
  flex-grow: 1;
}

.device-uptime-block {
  margin-bottom: 16px;
}

/* Fecha Información*/
.device-uptime-block .col-12 {
  width: 100%;
  padding: 0;
  margin: 0;
  float: none;
}

.device-uptime-block span {
  display: block;
}

/* Etiqueta */
.device-uptime-block .title_network_info,
.device-uptime-block .title_inactive_since {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Valor */
.device-uptime-block .ip_network_info {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
  word-break: break-word;
}

.form-row {
  margin: 5px;
}

/* MODAL — base, tamaños y móvil: components/_modal.scss (contrato único, F3). */
/* Inputs */
.ns-modal .form-control {
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--ns-fs-14);
}

.ns-modal .form-control::-moz-placeholder {
  color: var(--text-muted);
}

.ns-modal .form-control::placeholder {
  color: var(--text-muted);
}

/* LEGACY LABEL  */
/* MODAL FORM LABEL — SYSTEM */
.modal_form_label {
  font-family: var(--ns-font);
  letter-spacing: 0.4px;
  word-wrap: break-word;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.2px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.label_actuation {
  display: block;
  padding-left: 0;
  color: var(--text-primary);
  font-size: var(--ns-label-size);
  font-family: var(--ns-font);
  font-weight: var(--ns-label-weight);
  line-height: var(--ns-label-line);
  letter-spacing: var(--ns-label-ls);
  word-wrap: break-word;
}

/* NEW SYSTEM*/
.ns-modal .ns-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ns-modal .ns-field__label {
  color: var(--text-primary);
}

.ns-modal .ns-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* CARD-BODY CENTRAR CNTENIDO */
.ns-card-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ns-card-centered {
  min-height: 100%;
}

.card-no-shadow {
  box-shadow: none !important;
}

.card-group-spacing {
  gap: 1rem;
}

.card-highcharts {
  background-color: var(--bg-highcharts);
}

.card-content,
.modal-content.card-content {
  background-color: var(--bg-surface) !important;
}

.modal-content.card-content {
  border: 0;
}

.card-col-md-12 .card_smaller_margin_bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border: none !important;
  border-radius: 0.25rem;
}

table.dataTable {
  background-color: var(--bg-card) !important;
  width: auto;
  table-layout: auto;
  margin: 0 auto;
  border-spacing: 0;
  padding-left: 3px;
  padding-right: 3px;
  white-space: nowrap;
}

/* Asegura ancho al 100% */
#maintenance_provisioning_table {
  width: 100% !important;
}

#acc_ftd_table_wrapper,
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

#networks_table {
  width: 100% !important;
  min-width: 600px;
}

#networks_table_wrapper th.table-header-text-centered {
  width: 124px;
  max-width: 124px;
  min-width: 124px;
  overflow: hidden;
}
#networks_table_wrapper th.table-header-text-centered .dt-column-header {
  min-width: 0;
}
#networks_table_wrapper th.table-header-text-centered .dt-column-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#networks_table_wrapper th.table-header-text-centered .dt-column-order,
#networks_table_wrapper th.table-header-text-centered .dtcc {
  flex-shrink: 0;
}

/*table_body_actuation */
#table_actuation {
  table-layout: auto;
  width: 100%;
  word-break: break-word;
}

#table_actuation td {
  white-space: normal;
  word-break: break-word;
}

#table_actuation th {
  white-space: nowrap;
}

#table_inputs td,
#table_outputs td,
#table_actuation td {
  white-space: normal;
  line-height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#table_inputs th,
#table_outputs th {
  white-space: normal;
  line-height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: middle;
}

#table_inputs td.table-body-cell-right,
#table_outputs td.table-body-cell-right,
#table_actuation td.table-body-cell-right {
  width: 1%;
  white-space: nowrap;
}

.card-maintenances {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px !important;
}

.dt-container .col-sm-12 {
  width: 100% !important;
  padding-right: 0;
}

.dt-container .row {
  margin-right: -16px !important;
  margin-left: -16px !important;
  border-radius: 0px 0px 8px 8px;
}

.padding-for-card .dt-container .col-sm-12 {
  padding-right: 16px;
  padding-left: 16px;
}
.padding-for-card .dt-container .dt-scroll {
  padding-right: 1px;
}

.title_text_inventory {
  font-family: var(--ns-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 10px;
}

.text_inventory {
  font-family: var(--ns-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 10px;
}

.table-wrapper-rounded {
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
}

.table-header-overview {
  background: var(--surface-header-bg);
}

table.dataTable thead th,
th.table-header-text-centered,
th.dt-center,
th.dt-head-center {
  text-align: left !important;
}

.tr-table-overview,
.table-header-overview {
  border-radius: 0;
  border: none !important;
  outline: none;
  box-shadow: none;
  padding: 0px !important;
}

.tr-table-overview {
  line-height: 40px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.1px;
  word-wrap: break-word;
  border: 0px;
  border-style: solid;
  border-color: var(--bg-selected);
  margin: 0 !important;
  padding: 0px !important;
}

.dt-container .dt-empty-footer {
  width: 100% !important;
  table-layout: auto;
  /* o fixed si necesitas alinear tamaños */
}

.table-header-overview .table {
  background: rgba(210, 213, 226, 0.15) !important;
  padding: 12px 24px;
  border-radius: 0;
  border: none !important;
  outline: none;
  box-shadow: none;
}

.table-header-overview .dt-column-title {
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--ns-font);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.1px;
  word-wrap: break-word;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: none !important;
  color: var(--text-primary);
}

th,
td {
  border: none;
}

.dt-scroll {
  padding: 1px;
  padding-right: 16px;
  overflow-x: auto;
  width: 100%;
}

.dt-scroll-body {
  border-radius: 0px 0px 8px 8px;
  overflow-x: auto;
  max-width: 100%;
}

.icon-column {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.icon-column button,
.icon-column i {
  min-width: auto;
  width: auto;
  padding: 4px;
  margin: 0 2px;
}

.dt-info {
  color: var(--text-muted) !important;
  font-size: 12px;
  font-family: var(--ns-font) !important;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.4px;
  word-wrap: break-word;
  padding-left: 24px !important;
  margin-bottom: 20px;
}

.col-sm-4 .dt-info {
  color: var(--text-muted) !important;
  font-size: 12px;
  font-family: var(--ns-font) !important;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.4px;
  word-wrap: break-word;
  padding-left: 24px !important;
}

table.dataTable th.dt-empty,
table.dataTable td.dt-empty,
tfoot.ns-table-empty td.dt-empty {
  text-align: center;
  vertical-align: top;
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--ns-font);
  font-weight: 400;
}

tfoot.ns-table-empty td.dt-empty {
  padding: 8px 10px;
  border-top: 0;
}

table:not(:has(> tbody > tr)) > tfoot.ns-table-empty[hidden] {
  display: table-footer-group !important;
}

.table-responsive > .dt-container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.table-responsive > .dt-container > .row > [class*=col] {
  padding-left: 0;
  padding-right: 0;
}
.table-responsive > .dt-container > .row .dt-scroll {
  padding-right: 1px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  white-space: nowrap;
}

/* Contenedor de la paginación */
.dataTables_wrapper .dataTables_paginate {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  font-family: "Inter", sans-serif;
}

.dt-paging {
  color: var(--color-primary);
  font-size: 12px;
  font-family: var(--ns-font);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.4px;
  word-wrap: break-word;
  float: right;
  margin-top: 1%;
  margin-bottom: 1rem;
}

/* Asegura que los encabezados puedan posicionar las flechas */
table.dataTable thead th {
  position: relative;
  overflow: hidden;
}

table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc {
  padding-right: 28px;
}

/* ESTILO BASE */
table.dataTable thead th.dt-orderable-asc::after,
table.dataTable thead th.dt-orderable-desc::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("../icons/arrowboth.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 8px;
  top: 50%;
  margin-left: 10px;
  transform: translateY(-50%);
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

table.dataTable thead th.dt-orderable-asc:hover::after,
table.dataTable thead th.dt-orderable-desc:hover::after {
  opacity: 1;
  filter: var(--blue-5);
}

/* ORDEN ACTIVO ASCENDENTE */
table.dataTable thead th.dt-ordering-asc::after {
  background-image: url("../icons/flechaup.svg");
  opacity: 1;
  filter: none;
}

/* ORDEN ACTIVO DESCENDENTE */
table.dataTable thead th.dt-ordering-desc::after {
  background-image: url("../icons/flechadown.svg");
  opacity: 1;
  filter: none;
}

.max_width_nesmotes_info {
  max-width: none;
  width: 100%;
}

.table_info {
  border: none !important;
  border-style: solid;
  border: 1px solid var(--card-border);
  border-radius: 16px !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0px;
}

.tabs-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.tabs-scroll-container::-webkit-scrollbar {
  display: none;
}

.ul_device_tabs {
  display: flex;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ul_device_tabs::-webkit-scrollbar {
  display: none;
}

.li_device_tab {
  flex: 0 0 auto;
}

#reports_tabs {
  overflow-x: visible;
}
#reports_tabs::after {
  display: none;
}
#reports_tabs {
  border-bottom: 1px solid var(--device-tab-border);
}
#reports_tabs .li_device_tab {
  display: flex;
}
#reports_tabs .device_navigation_tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
#reports_tabs .device_navigation_tabs__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  #reports_tabs .li_device_tab {
    flex: 1 1 0;
    min-width: 0;
  }
}
#reports_tabs .count-badge {
  flex: 0 0 auto;
}

.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 9999px;
  z-index: 10;
  cursor: pointer;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.tabs-wrapper.is-overflowing .scroll-button {
  display: flex;
}
.tabs-wrapper.is-at-start .scroll-button.left, .tabs-wrapper.is-at-end .scroll-button.right {
  visibility: hidden;
}
.scroll-button span {
  width: 28px;
  height: 28px;
  background-color: var(--bg-scroll-button);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.scroll-button span::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--icon-color);
  -webkit-mask: var(--scroll-arrow) center/contain no-repeat;
  mask: var(--scroll-arrow) center/contain no-repeat;
  transition: background-color 0.15s ease;
}
.scroll-button.left {
  left: 6px;
  --scroll-arrow: url(../../assets/icons/previous.svg);
}
.scroll-button.right {
  right: 3px;
  --scroll-arrow: url(../../assets/icons/next.svg);
}
.scroll-button:hover span {
  background-color: var(--bg-scroll-button-hover);
}
.scroll-button:hover span::before {
  background-color: var(--icon-hover);
}
.scroll-button:focus, .scroll-button:active {
  outline: none;
  box-shadow: none;
}

.table-body-cell a {
  color: var(--text-link);
  text-decoration: underline !important;
}
.table-body-cell a:hover {
  color: var(--text-link-hover) !important;
}

#nesgate_signal_quality_info_table {
  margin-top: 16px !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
#nesgate_signal_quality_info_table thead th:first-child {
  border-top-left-radius: 8px;
}
#nesgate_signal_quality_info_table thead th:last-child {
  border-top-right-radius: 8px;
}
#nesgate_signal_quality_info_table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
#nesgate_signal_quality_info_table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* Descripción y Notas */
.notifications_description,
.connection_disconnection_notification_description {
  font-size: var(--ns-fs-12);
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  transition: all 0.2s ease;
  cursor: text;
  color: var(--text-primary);
}

/* Hover */
.notifications_description:hover,
.connection_disconnection_notification_description:hover {
  background: var(--bg-main);
  border-color: var(--bg-selected);
}

/* Focus */
.notifications_description:focus,
.connection_disconnection_notification_description:focus {
  outline: none !important;
  background: var(--bg-main);
  border-color: var(--input-border-focus) !important;
}

td .notifications_description,
td .connection_disconnection_notification_description {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (any-pointer: coarse) {
  .notifications_description,
  .connection_disconnection_notification_description {
    border-color: var(--input-border-default);
  }
}
.table-body-cell-no-wrap {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table_nesmotes_nesgates {
  width: 100%;
  table-layout: auto;
}

.table {
  background-color: var(--surface-glass-bg);
  border-radius: 0;
  width: 100%;
  margin: 0px !important;
}

.table-inventory {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.table-inventory th,
.table-inventory td {
  padding-left: 8px;
  padding-right: 8px;
}

.card .table-inventory {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.table-lorawan {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg-main);
  border-radius: 16px !important;
}

#opcua_servers_table {
  width: 100%;
  height: 100%;
  border-right: none;
  border-bottom: none;
  margin: 0px -4px -20px 10px;
  padding: 0px !important;
}
#opcua_servers_table tbody tr td,
#opcua_servers_table thead tr th {
  border-right: none !important;
  border-bottom: none !important;
}
#opcua_servers_table tr:last-child td {
  border-bottom: none !important;
}

.calendar-column {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1.5rem;
}

.calendar-label {
  margin-bottom: 1;
  font-weight: 500;
  font-size: 14px;
}

.dt-search {
  padding: 10px;
  justify-content: flex-end;
}

/* Columnas de íconos en DataTables */
td.icon-col,
th.icon-col,
td.only-icon,
td.icon-fav {
  width: 56px;
  padding: 4px 6px !important;
  vertical-align: middle;
  white-space: nowrap;
}
td.icon-col a,
td.icon-col button,
td.icon-col span,
th.icon-col a,
th.icon-col button,
th.icon-col span,
td.only-icon a,
td.only-icon button,
td.only-icon span,
td.icon-fav a,
td.icon-fav button,
td.icon-fav span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
td.icon-col .dropdown,
th.icon-col .dropdown,
td.only-icon .dropdown,
td.icon-fav .dropdown {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
td.icon-col .dropdown img.app-icon,
th.icon-col .dropdown img.app-icon,
td.only-icon .dropdown img.app-icon,
td.icon-fav .dropdown img.app-icon {
  width: 20px;
  height: 20px;
}

td.only-icon {
  min-width: 32px;
  max-width: 40px;
  padding: 4px !important;
}

td.icon-fav {
  max-width: 56px;
  padding: 0 !important;
}
td.icon-fav img {
  display: block;
}

/* Fila de íconos (horizontal) */
.icon-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.icon-col {
  text-align: center;
  padding: 0 !important;
  white-space: nowrap;
}

table.dataTable {
  width: 100%;
  margin: 0px auto;
  border-spacing: 0;
  padding-left: 3px;
  padding-right: 3px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-main);
}

table.dataTable th,
table.dataTable td,
.table_nesmotes_nesgates th,
.table_nesmotes_nesgates td {
  white-space: nowrap;
}

table.dataTable td,
.table_nesmotes_nesgates td {
  overflow: hidden;
  text-overflow: ellipsis;
}

table.dataTable:not(.ns-table-view) td:nth-child(5),
table.dataTable:not(.ns-table-view) td:nth-child(7) {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status {
  width: 56px;
}

th.table-header-text-centered,
td.table-header-text-centered {
  width: 100px;
  max-width: 100px;
  min-width: 100px;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

.status-mod {
  width: 100px;
}

.nesgate_info_table_wrapper {
  overflow-x: hidden;
  padding-right: 0 !important;
}

/* Oculta el texto solo dentro de la tabla, no del filtro */
#networks_table td .disconnected-text,
#networks_table td .connected-text,
#nesgates_table td .disconnected-text,
#nesgates_table td .connected-text,
#nesmotes_table td .disconnected-text,
#nesmotes_table td .connected-text {
  position: absolute;
  left: -9999px;
}

#notifications_table td:nth-child(1),
#notifications_table th:nth-child(1) {
  text-align: center;
}

#inventoryTable th:nth-child(1),
#inventoryTable td:nth-child(1) {
  width: 36px !important;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.table-header {
  background-color: var(--bg-card);
}

#nesgate_info_table tr td {
  padding: 0px;
  border: 0px;
  vertical-align: middle;
  padding-left: 10px;
}

.tr-table-overview {
  line-height: 40px;
  border: 1px;
  border-style: solid;
  border-color: var(--divider-color);
}

.tr-table-popup-leaflet {
  border: 0px !important;
  border-style: solid;
  border-color: var(--divider-color);
  line-height: 20px;
}

.table-header-text-leaflet {
  font-size: 14px;
  font-family: "Inter", sans-serif !important;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  border: 0px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.table-body-cell-leaflet {
  font-size: 12px;
  font-weight: 400;
  border: 0px !important;
  white-space: nowrap;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.table-body-cell-leaflet-nesgate {
  font-size: 12px;
  font-weight: 400;
  border-left: 0px !important;
  border-top: 0px !important;
  border-bottom: 0px !important;
  white-space: nowrap;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.map_widget_num_sensors_tooltip {
  font-size: 14px;
  font-family: "Inter", sans-serif !important;
  font-weight: 600;
  color: var(--color-primary);
  border: 0px !important;
  white-space: normal;
  word-wrap: break-word;
  padding-left: 10px !important;
  padding-bottom: 4px !important;
  font-variant-numeric: tabular-nums;
}

.map_widget_num_sensors_for_state_tooltip {
  font-size: 12px;
  font-family: "Inter", sans-serif !important;
  font-weight: 600;
  border: 0px !important;
  white-space: normal;
  word-wrap: break-word;
  padding-left: 10px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-variant-numeric: tabular-nums;
}

.map_widget_device_name {
  font-size: 14px;
  font-family: "Inter" !important;
  font-weight: 500;
  border: 0px !important;
}

.map_widget_timestamp {
  font-size: 12px;
  font-family: "Inter" !important;
  font-weight: 400;
  border: 0px !important;
  white-space: nowrap;
}

.map_widget_sensor_type {
  font-size: 14px;
  font-family: "Inter" !important;
  font-weight: 400;
  border: 0px !important;
}

.map_widget_map_status_text {
  font-size: 14px;
  padding-left: 8px;
  font-family: "Inter" !important;
  font-weight: 400;
  border: 0px !important;
  color: var(--text-secondary);
}

.map_widget_bold_text {
  font-size: 14px;
  font-family: "Inter" !important;
  font-weight: 600;
  border: 0px !important;
}

.tr-table-without-border {
  line-height: 40px;
}

.table thead tr {
  border: 0px;
}

.table tr td {
  padding: 0px;
  vertical-align: middle;
  padding-left: 10px;
}

.table {
  margin-bottom: 0px;
}

.table-header-overview {
  border: 1px solid var(--card-border);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.table-header-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.table-header-small-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.table-header-smaller-text-with-wrap {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.table-header-text-centered {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
  white-space: nowrap;
}

.table-header-text-no-border-blue {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  border: 0px !important;
}

.table-header-text-no-border-blue-centered {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  border: 0px !important;
  text-align: center;
}

.table-header-text-no-border-black {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  border: 0px !important;
}

.table-header-text-no-border-black-centered {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  border: 0px !important;
}

.table-body-cell {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
}

.table-body-cell > .badge {
  vertical-align: middle;
}

.table-body-cell-no-wrap {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
}

.table-body-cell-centered {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  text-align: center !important;
}

.table-body-cell-right {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  text-align: right;
}

.table-body-cell-edit-user-networks {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  text-align: right;
  padding-right: 20px !important;
}

.table-body-cell-highlighted {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
}

.max_width_nesmotes_info {
  max-width: 745px;
}

.license_status_end {
  background-color: var(--row-license-expired-bg) !important;
}

.license_status_30_days_left {
  background-color: var(--row-license-30-bg) !important;
}

.license_status_60_days_left {
  background-color: var(--row-license-60-bg) !important;
}

.license_status_end > td:first-child {
  box-shadow: inset 3px 0 0 var(--row-license-expired-stripe);
}

.license_status_30_days_left > td:first-child {
  box-shadow: inset 3px 0 0 var(--row-license-30-stripe);
}

.license_status_60_days_left > td:first-child {
  box-shadow: inset 3px 0 0 var(--row-license-60-stripe);
}

.table tr td {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* TABLES / DATATABLES  */
.card.padding-for-card {
  background: var(--surface-glass-bg);
  border-radius: var(--table-radius);
  border: 1px solid var(--table-glass-border);
  overflow: hidden;
}

.dt-container {
  box-sizing: border-box;
}

.barra-titulo {
  background: var(--card-bg);
  border-bottom: 1px solid var(--table-border-soft);
  padding: var(--table-header-padding);
  border-radius: 12px 12px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.barra-titulo__izquierda {
  display: flex;
  align-items: center;
}

.barra-titulo__derecha {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* TB-04: por debajo de 768 la cabecera salta de línea si no cabe (antes solo en las 4 vistas con
   `--wrap`; en las otras ~33, título y buscador se apretaban en una fila). El buscador cede y,
   si no cabe junto al título, pasa a su propia línea a todo el ancho. En escritorio, igual. */
@media (max-width: 767.98px) {
  .barra-titulo {
    flex-wrap: wrap;
  }
  .barra-titulo__derecha {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }
  .barra-titulo__derecha .buscador {
    flex: 1 1 200px;
    min-width: 0;
  }
}
/* Cabecera de tabla con acción: en móvil el botón salta a una segunda fila */
@media (max-width: 576px) {
  .barra-titulo--wrap {
    flex-wrap: wrap;
  }
  .barra-titulo--wrap .barra-titulo__derecha {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .barra-titulo--wrap .barra-titulo__derecha .buscador {
    flex: 1 1 auto;
  }
  .barra-titulo--wrap .barra-titulo__derecha .btn {
    flex: 0 0 100%;
  }
}
.barra-titulo .titulo {
  font-family: var(--ns-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  line-height: 24px;
  letter-spacing: 0.15px;
  word-wrap: break-word;
}

.buscador {
  background: var(--table-search-bg);
  border-radius: var(--table-search-radius);
  border: 1px solid transparent;
  padding: var(--table-search-padding);
  display: flex;
  height: 40px;
  align-items: center;
  gap: var(--table-search-gap);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.buscador:hover {
  border-color: var(--input-border-hover) !important;
}

.buscador:focus-within {
  border-color: var(--input-border-focus) !important;
}

.buscador input:-webkit-autofill,
.buscador input:-webkit-autofill:hover,
.buscador input:-webkit-autofill:focus,
.buscador input:-webkit-autofill:active,
.buscador-panel input:-webkit-autofill,
.buscador-panel input:-webkit-autofill:hover,
.buscador-panel input:-webkit-autofill:focus,
.buscador-panel input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--input-text) !important;
  caret-color: var(--primary);
  -webkit-transition: background-color 9999s ease-in-out 0s;
  transition: background-color 9999s ease-in-out 0s;
}

/* Lupa: gris (--icon-secondary) en reposo y, mientras se escribe, el color de
   foco del propio input (--input-border-focus: light #0D1D69, dark cyan), a
   juego con su borde. El SVG se incluye en línea (assets/icons/search.svg) con
   fill="#0D1D69" fijo, que anulaba este `color`: el relleno pasa a currentColor. */
.buscador svg {
  color: var(--icon-secondary);
  transition: color 0.2s ease;
}
.buscador svg [fill]:not([fill=none]) {
  fill: currentColor;
}

.buscador:focus-within svg {
  color: var(--input-border-focus);
}

.buscador input[type=search]::-webkit-search-cancel-button,
.buscador input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.buscador input.form-control {
  background: transparent !important;
  border: none;
  box-shadow: none;
  color: var(--text-primary);
}

.table.dataTable {
  background: transparent;
  border-spacing: 0 var(--table-row-gap);
}

.table.dataTable tbody tr.selected {
  background: var(--table-row-bg-selected) !important;
}

/* DATATABLES – PAGINATION  */
div.dt-container .dt-paging {
  color: var(--text-primary);
  float: right;
  margin-top: 12px;
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-end;
  padding-right: 6px;
}
div.dt-container .dt-info {
  margin-top: 1rem;
}
div.dt-container .dt-paging nav {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--table-pagination-bg);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--table-pagination-border);
}
div.dt-container .dt-paging-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--dt-pagination-radius);
  color: var(--dt-pagination-text) !important;
  font-weight: 500;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
div.dt-container .dt-paging nav .ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 6px;
  line-height: 1;
  color: var(--dt-pagination-text);
  opacity: 0.6;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
div.dt-container .dt-paging-button img.app-icon {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
div.dt-container .dt-paging-button:not(.disabled):not(.current):hover {
  background: var(--dt-pagination-hover-bg) !important;
  color: var(--dt-pagination-active-text) !important;
  font-weight: 600;
  transform: translateY(-1px);
}
div.dt-container .dt-paging-button.current {
  color: var(--dt-pagination-active-text) !important;
  font-weight: 600;
  border-radius: var(--dt-pagination-radius);
}
div.dt-container .dt-paging-button.current:hover {
  background: var(--dt-pagination-active-bg) !important;
  border-color: var(--dt-pagination-border) !important;
  border-radius: var(--dt-pagination-radius);
}
div.dt-container .dt-paging-button:active {
  background: var(--dt-pagination-hover-bg) !important;
  transform: none;
}
div.dt-container .dt-paging-button.current:active {
  background: var(--dt-pagination-active-bg) !important;
}
div.dt-container .dt-paging-button.disabled,
div.dt-container .dt-paging-button.disabled:hover,
div.dt-container .dt-paging-button.disabled:active {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent !important;
  color: var(--text-muted) !important;
  transform: none;
  box-shadow: none;
}
div.dt-container .dt-paging-button:focus {
  outline: none;
}
div.dt-container .dt-paging-button:focus-visible {
  outline: 1px solid var(--dt-pagination-border);
  outline-offset: 1px;
}
div.dt-container {
  /* Móvil: con muchas páginas (Anterior + 7 números + Siguiente) la barra medía más que la
     pantalla y se salía por la derecha. Se centra, se compactan los botones y Anterior/
     Siguiente quedan solo con la flecha (el aria-label de DataTables sigue nombrándolos),
     así caben todos los números en una línea.
     ⚠️ DataTables 2 (`_pagingDraw`) da la barra por partida en dos líneas si su altura es
     >= 2 × (altura del PRIMER botón) − 10, y entonces se redibuja con dos números menos hasta
     que cabe. Dos cosas lo disparaban y acababan enseñando un solo número:
     - flex-wrap: la barra en dos líneas de verdad → no permitirlo;
     - Anterior sin texto (font-size: 0) medía 22px frente a los 34px de los números, y con él
       como primer botón el umbral bajaba a 34px → todos los botones llevan la misma altura fija.
     El overflow-x es solo la red de seguridad para pantallas aún más estrechas: desliza la
     barra en vez de romper el layout. */
}
@media (max-width: 576px) {
  div.dt-container .dt-paging {
    float: none;
    justify-content: center;
    padding-right: 0;
    max-width: 100%;
    overflow-x: auto;
  }
  div.dt-container .dt-paging nav {
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px;
  }
  div.dt-container .dt-paging-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 28px;
    padding: 0 6px;
  }
  div.dt-container .dt-paging nav .ellipsis {
    padding: 0 2px;
  }
  div.dt-container .dt-paging-button.previous,
  div.dt-container .dt-paging-button.next {
    font-size: 0;
    gap: 0;
  }
}

/* Scroll DataTables */
.dt-scroll-body,
.dataTables_scrollBody {
  overflow: auto;
}
.dt-scroll-body::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.dt-scroll-body::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
.dt-scroll-body::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 8px;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
}
.dt-scroll-body::-webkit-scrollbar-thumb:hover, .dt-scroll-body::-webkit-scrollbar-thumb:active,
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.dataTables_scrollBody::-webkit-scrollbar-thumb:active {
  background-color: var(--scroll-thumb-hover);
}

/* Iconos de acciones en tablas*/
.table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--icon-default);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.table-action i,
.table-action svg,
.table-action img {
  width: 18px;
  height: 18px;
  transition: inherit;
}
.table-action:hover {
  color: var(--icon-hover);
  opacity: 0.75;
  transform: scale(1.08);
}
.table-action:active {
  transform: scale(0.95);
}
.table-action.active {
  color: var(--icon-primary);
}
.table-action.disabled {
  color: var(--icon-disabled);
  opacity: 0.4;
  pointer-events: none;
}
.table-action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* TB-13: info («Mostrando 1 a 10…») y paginación apiladas y centradas por debajo de 768. DataTables
   las pone en `col-sm-4` / `col-sm-8`: entre 576 y 767 la paginación no cabía en su 67 %. */
@media (max-width: 767.98px) {
  .dt-container .row > [class*=col-]:has(> .dt-info),
  .dt-container .row > [class*=col-]:has(> .dt-paging) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .dt-container .dt-info {
    text-align: center;
  }
  .dt-container .dt-paging {
    display: flex;
    justify-content: center;
  }
}
/* TB-02: pista de scroll horizontal. Las ~37 tablas con `scrollX` no avisaban de que había más
   columnas: a 360 se veían una o dos y nada sugería desplazar. components/ns_scroll_hints.js marca
   el contenedor (`.dt-scroll`, o el padre de un `.table-responsive`) con `ns-scroll-x--right` /
   `--left` cuando queda contenido por ese lado. Solo se pinta el degradado del borde izquierdo:
   el del derecho se quitó en revisión (2026-10-13), así que `--right` ya no tiene efecto. No
   captura el ratón (`pointer-events: none`). */
.ns-scroll-x {
  position: relative;
}
.ns-scroll-x::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(to right, var(--scroll-hint-shadow), transparent);
}
.ns-scroll-x.ns-scroll-x--left::before {
  opacity: 1;
}

.widget-type {
  padding: 12px 16px;
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table_widget_panel {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  table-layout: auto !important;
  border-collapse: collapse !important;
  font-family: "Inter", sans-serif;
  border-top: none !important;
  border-bottom: none;
  margin: 0 !important;
}
.table_widget_panel thead tr {
  background: var(--surface-header-bg);
}

.table_widget_panel th,
.table_widget_panel td {
  white-space: nowrap;
  padding: 8px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.table_widget_panel thead th:focus,
.table_widget_panel thead th:active,
.table_widget_panel thead th {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Encabezados */
.table_widget_panel thead,
.table_widget_panel thead tr,
.table_widget_panel thead th,
.table_widget_panel .dt-column-header {
  border-top: none !important;
  border-bottom: none;
  box-shadow: none !important;
}

/* DataTables scroll */
.dataTables_scroll {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

.dataTables_wrapper {
  width: 100%;
  height: auto !important;
  transition: none !important;
}

.dataTables_scrollBody {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
}

.dataTables_scrollBody table,
.dataTables_scrollHeadInner table {
  table-layout: auto !important;
}

/* Forzar ancho total en scroll */
.dt-scroll-headInner,
.dataTables_scrollBody table {
  min-width: 100% !important;
}

/* Contenedor principal del header */
.dt-column-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0px;
  width: 100%;
  min-width: -moz-max-content;
  min-width: max-content;
}

.dtcc-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--text-muted);
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}

.dtcc-button-icon:hover {
  background-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  outline: none !important;
  box-shadow: none !important;
}

table.dataTable span.dtcc button.dtcc-button,
table.dataTable span.dtcc button.dtcc-button:focus,
table.dataTable span.dtcc button.dtcc-button:active,
table.dataTable span.dtcc button.dtcc-button:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

button.dtcc-button-icon:focus-visible,
button.dtcc-button-icon::-moz-focus-inner,
.dtcc-button-icon:active {
  color: var(--color-primary);
  outline: none !important;
  box-shadow: none !important;
}

.dtcc-button {
  font-size: 12px;
  font-family: var(--ns-font);
}

/* botón search*/
.dtcc-dropdown,
.dtcc-search_active {
  position: relative !important;
  z-index: 1000;
  background: var(--bg-main);
  border-radius: 10px;
  padding: 12px;
  min-width: 220px;
  transition: none !important;
}

.dtcc-search_active input,
.dtcc-search_active select {
  border: 1px solid var(--input-border-default);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px;
  width: 100%;
  max-width: 100%;
}

.dtcc-force-visible {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Dropdown de filtro */
.dtcc-dropdown {
  position: absolute !important;
  z-index: var(--z-dropdown-floating);
  max-width: 300px;
  width: -moz-max-content;
  width: max-content;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 12px;
  transition: none !important;
}

/* Contenedor del th */
.table_widget_panel th {
  padding: 0 8px;
  white-space: nowrap;
}

/* botón de ffiltro a la derecha */
.column-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Oculta íconos de order en la tabla */
.dtcc-button_order {
  display: none !important;
}

div.dtcc-dropdown {
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  z-index: 1000;
  border: none;
}

.dtcc-button-text {
  color: var(--text-primary);
}

div.dtcc-dropdown button.dtcc-button:hover {
  background-color: var(--sidebar-bg-active);
}

/*Table widget Config */
#grouping_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Drag column */
#grouping_table td.reorder {
  cursor: move;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}

.drag-handle {
  cursor: grab;
  color: var(--color-primary);
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  width: 30px;
  min-width: 30px;
  max-width: 35px;
  opacity: 0.6;
}

tr:hover .drag-handle {
  opacity: 1;
}

/* Column widths */
/* Orden */
#grouping_table th.col-order,
#grouping_table td.col-order {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  text-align: center;
}

.col-order {
  width: 1%;
  white-space: nowrap;
}

/* Sensor */
#grouping_table th.col-sensor,
#grouping_table td.col-sensor {
  width: 80px;
  max-width: 80px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#grouping_table select {
  width: 100%;
  max-width: 90px;
}

#grouping_table input {
  width: 100%;
  max-width: 110px;
}

#grouping_table th,
#grouping_table td {
  padding: 6px 8px;
}

.table-hover {
  color: var(--text-link-hover);
}

.col-type {
  width: 120px;
}

.col-name {
  width: 140px;
}

/* Table typography */
#grouping_table th {
  font-weight: 600;
  font-size: 13px;
}

#grouping_table td {
  vertical-align: middle;
}

/* Inputs */
#grouping_table select {
  width: 100%;
  max-width: 110px;
}

#grouping_table input {
  width: 100%;
  max-width: 120px;
}

/* ===== Card header ===== */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  padding-bottom: 12px;
}

.grouping-title {
  display: flex;
  flex-direction: column;
}

.grouping-title span {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== Dropdown selector ===== */
.grouping-selector {
  background-color: transparent !important;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.grouping-selector::after {
  border: 1px solid var(--icon-color);
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  margin-left: 8px;
  flex-shrink: 0;
}

.grouping-selector:hover,
.grouping-selector:focus,
.grouping-selector:active {
  text-decoration: none;
  color: var(--color-primary);
  box-shadow: none;
}

.dropdown-menu {
  min-width: 220px;
}

.dropdown-item {
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: var(--bg-selected);
}

#grouping_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Compact spacing */
#grouping_table th,
#grouping_table td {
  padding: 6px 8px;
  vertical-align: middle;
}

/* Order column */
#grouping_table th.col-order,
#grouping_table td.col-order {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  text-align: center;
}

/* Sensor column */
#grouping_table th.col-sensor,
#grouping_table td.col-sensor {
  width: 100px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn.dropdown-toggle::after {
  border: 1px solid var(--icon-color);
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-left: 2%;
}

#grouping_table_wrapper {
  padding-right: 0 !important;
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * {
  border-bottom: none;
}

.grouping-option {
  font-size: 14px;
}

.reorder {
  color: var(--icon-color);
}

/* Agrupación fila */
#grouping_table tbody tr.grouping-main-row > td {
  background: var(--chip-email-bg);
  color: var(--text-bluedark);
  font-weight: 600;
}

#grouping_table tbody tr.grouping-main-row > td:first-child {
  border-left: 4px solid var(--icon-active);
}

/* BOTÓN TABLA WIDGET */
/* CONTENEDOR DEL DROPDOWN */
.widget-type .table-actions .dropdown {
  position: relative; /* 🔥 CLAVE */
}

/* DROPDOWN */
.widget-type .table-actions .dropdown-menu {
  position: absolute !important;
  top: 100% !important; /* debajo del botón */
  right: 0 !important; /* alineado a la derecha */
  left: auto !important;
  min-width: auto;
  transform: none !important;
  margin-top: 6px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: var(--z-dropdown-floating);
}

.widget-type .dt-scroll {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  background: var(--bg-surface, #fff);
  padding-right: 1px;
}
.widget-type .table-actions {
  position: static;
  top: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.widget-type .btn-hamburger {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: var(--icon-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-type .btn-hamburger:hover {
  background: var(--bg-hover, #f5f5f5);
  border-color: var(--color-primary);
  color: var(--text-link-hover);
}
.widget-type .dropdown-menu {
  font-size: 14px;
  font-weight: 400;
  right: 0 !important;
  left: auto !important;
  margin-top: 6px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}
.widget-type .dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-link-hover);
  font-weight: 600;
}
.widget-type .row {
  margin-left: 0;
  margin-right: 0;
}
.widget-type [class*=col-] {
  padding-left: 0;
  padding-right: 0;
}
.widget-type .table-actions {
  flex: 0 0 auto;
  margin-bottom: 8px;
}
.widget-type .table_widget_panel {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  overflow: auto;
}
.widget-type .dt-container {
  width: 100%;
  max-width: 100%;
}
.widget-type table.dataTable {
  margin: 0;
  width: 100%;
}
.widget-type .table_widget_panel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bg-surface);
  background-image: linear-gradient(var(--surface-header-bg), var(--surface-header-bg));
}

/* Estado vacío del widget de tabla (widget_type_16 sin datos).
   Un único mensaje centrado, sin DataTables ni scroll horizontal. */
.widget-table-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
  padding: 16px;
  text-align: center;
}
.widget-table-empty span {
  color: var(--text-muted);
  font-family: var(--ns-font);
  font-size: 14px;
}

.widget-type .dataTables_info,
.widget-type .dt-info {
  white-space: nowrap;
  text-align: left;
  padding-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* =====================================================
   HEADER RESPONSIVE DEL WIDGET DE TABLA
   ===================================================== */
.widget-type {
  /* La cabecera no debe ocultar los botones */
}
.widget-type .table_widget_panel thead th {
  min-width: 104px;
  overflow: visible;
}
.widget-type {
  /* Contenedor interno creado por DataTables */
}
.widget-type .table_widget_panel .dt-column-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.widget-type {
  /* Solo el título puede reducirse */
}
.widget-type .table_widget_panel .dt-column-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-type {
  /* Los botones nunca deben reducirse ni desaparecer */
}
.widget-type .table_widget_panel .dt-column-header > :not(.dt-column-title),
.widget-type .table_widget_panel .dt-column-order,
.widget-type .table_widget_panel .dtcc,
.widget-type .table_widget_panel .column-actions,
.widget-type .table_widget_panel .dtcc-button-icon {
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* Re diseño*/
.ns-daterangepicker {
  margin: 8px;
  background-color: var(--bg-main);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

.ns-daterangepicker .drp-calendar,
.ns-daterangepicker .drp-calendar.left,
.ns-daterangepicker .drp-calendar.right {
  background: transparent;
}

.ns-daterangepicker .calendar-table,
.ns-daterangepicker .calendar-time,
.ns-daterangepicker .ranges {
  background: transparent !important;
}

.ns-daterangepicker .ranges li:hover {
  background: var(--surface-row-bg-hover);
}

.ns-daterangepicker td.in-range::before {
  background: var(--bg-selected);
}

.ns-daterangepicker .drp-calendar.left {
  border-left: none;
}

.ns-daterangepicker .drp-calendar.right {
  border-left: none;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.1px;
  text-align: center;
  vertical-align: middle;
  min-width: 30px;
  width: 30px;
  cursor: pointer;
  border-radius: 0;
}

.daterangepicker .ranges li.active {
  background: var(--surface-row-bg-hover);
  color: var(--text-link-hover);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: var(--surface-row-bg-hover);
  color: var(--color-accent);
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  padding: 2px;
  font-size: 12px;
  outline: 0;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border-default);
  color: var(--input-text);
}

.daterangepicker select.hourselect:hover,
.daterangepicker select.minuteselect:hover,
.daterangepicker select.secondselect:hover,
.daterangepicker select.ampmselect:hover {
  border-color: var(--input-border-hover);
}

.daterangepicker select.hourselect:focus,
.daterangepicker select.minuteselect:focus,
.daterangepicker select.secondselect:focus,
.daterangepicker select.ampmselect:focus {
  border-color: var(--input-border-focus);
  box-shadow: none;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: var(--text-white);
  border: solid var(--icon-active);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-time select.disabled {
  color: var(--input-text-disabled);
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-buttons button {
  padding: 3px 6px;
  margin-left: 8px;
}

/* Responsive: Apply/Cancel siempre en la misma fila (no se apilan al estrechar).
   Sobrescribe el display:block del vendor con flex-row sin wrap. */
.daterangepicker.show-calendar .drp-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.daterangepicker.show-ranges .drp-calendar.left {
  border-left: 1px solid var(--table-glass-border);
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker .ranges ul {
  list-style: none;
  padding: 0 !important;
  width: 100%;
}

.daterangepicker .ranges li {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.1px;
  word-wrap: break-word;
  padding: 8px 12px;
  cursor: pointer;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }
  .daterangepicker.single .ranges ul {
    width: 100%;
  }
  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }
  .daterangepicker.single.ltr .ranges,
  .daterangepicker.single.ltr .drp-calendar {
    float: left;
  }
  .daterangepicker.single.rtl .ranges,
  .daterangepicker.single.rtl .drp-calendar {
    float: right;
  }
  .daterangepicker.ltr {
    direction: ltr;
    text-align: left;
  }
  .daterangepicker.ltr .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }
}
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }
  .daterangepicker.ltr .ranges {
    float: left;
  }
  .daterangepicker.rtl .ranges {
    float: right;
  }
  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}
/* BASE CELDAS (Figma) */
.daterangepicker td {
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  line-height: 24px;
  font-size: 12px;
  padding: 0;
  text-align: center;
  position: relative;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 1;
}

.daterangepicker td span {
  position: relative;
  z-index: 1;
}

/* Eliminar fondos legacy */
.daterangepicker td.in-range,
.daterangepicker td.active {
  background: transparent !important;
  border-radius: 0 !important;
}

.daterangepicker td.in-range::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  background: var(--bg-selected);
  z-index: -3;
  pointer-events: none;
}

/* Inicio del rango */
.daterangepicker td.start-date.in-range::before {
  left: 50%;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

/* Fin del rango */
.daterangepicker td.end-date.in-range::before {
  right: 50%;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.daterangepicker td.start-date::after,
.daterangepicker td.end-date::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--btn-primary-bg);
  color: var(--text-white);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
  color: var(--btn-primary-text) !important;
}

/* HOY (BORDE) */
.daterangepicker td.today::after {
  content: "";
  position: absolute;
  border: 1px solid var(--color-accent);
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
  word-wrap: break-word;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
}

.daterangepicker td.end-date::before {
  z-index: -2;
}

.daterangepicker {
  transform: none !important;
}

.daterangepicker td.available:hover {
  border-radius: 20px;
}

.daterangepicker select {
  margin: 0 auto;
  height: 30px;
  width: 30px;
  background-color: var(--bg-main);
  border: 1px solid var(--card-border);
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker tr td.in-range:first-child::before {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.daterangepicker tr td.in-range:last-child::before {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Continuacion select */
.daterangepicker td.start-date::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  right: -3px;
  background: var(--bg-selected);
  z-index: -2;
}

.daterangepicker td.end-date::before {
  content: "";
  position: absolute;
  top: 14%;
  bottom: 4px;
  left: -3px;
  right: 50%;
  background: var(--bg-selected);
  z-index: -2;
}

/* --- Móvil (< 768): hoja inferior (CP-18) -----------------------------------
 * Con «Rango personalizado» el calendario apila los rangos y dos meses: a 360px medía ~976px de
 * alto en una pantalla de 740, colgado de su botón (`absolute`), y Cancelar/Aplicar quedaban muy
 * por debajo: había que desplazar la página entera para llegar. Ahora es una hoja fija abajo, con
 * el contenido desplazándose dentro y los botones siempre visibles. Se mantienen los dos meses: el
 * plugin solo pinta la flecha de «mes siguiente» en el segundo. `!important` para ganar al
 * `top`/`left` en línea con que el plugin lo coloca. */
@media (max-width: 767.98px) {
  .daterangepicker {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    max-height: calc(100vh - var(--ns-header-h, 60px) - 16px);
    max-height: calc(100dvh - var(--ns-header-h, 60px) - 16px);
    margin: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px;
  }
  .daterangepicker::before, .daterangepicker::after {
    display: none !important;
  }
  .daterangepicker .ranges,
  .daterangepicker .ranges ul,
  .daterangepicker .drp-calendar {
    float: none !important;
    width: 100%;
    max-width: none;
  }
  .daterangepicker .drp-calendar .calendar-table {
    width: 100%;
  }
  .daterangepicker .drp-calendar table {
    width: 100%;
  }
  .daterangepicker .drp-buttons {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: var(--bg-main);
  }
}
@media (any-pointer: coarse) and (max-width: 767.98px) {
  .daterangepicker td,
  .daterangepicker th {
    height: 40px;
    line-height: 40px;
  }
}
:root {
  --ns-font: 'Inter', sans-serif;
  /* Escala de capas (SH-11). La de Bootstrap 4, con nombre: a partir de aquí ningún z-index
     nuevo con número suelto. Los 9999 que quedan (.dropdown-menu, .dtcc-dropdown…) se migran
     en F3 con el posicionador de paneles flotantes: bajarlos sin más dejaría detrás del modal
     los desplegables que se montan en <body>. */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-header: 1030;
  --z-sidebar: 1035;
  --z-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-dropdown-floating: 1065;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

.icon {
  color: var(--icon-color) !important;
}

html,
body {
  background-color: var(--bg-surface);
  min-height: 100vh;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img {
  vertical-align: middle;
  border-style: none;
}

.h2 {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary);
  margin: 10px;
}

#fullscreen_div::backdrop {
  background-color: var(--bg-fullscreen);
}

/* Hover scrollbar*/
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover);
}

/*ICON CLOSE */
.icon-close-modal {
  width: 20px;
  height: 20px;
  opacity: 0.7;
  cursor: pointer;
}

.dismiss_modal:hover .icon-close-modal {
  color: var(--icon-color);
  opacity: 1;
  transform: scale(1.1) rotate(90deg);
}

.dismiss_modal:active .icon-close-modal {
  transform: scale(0.9) rotate(90deg);
  color: var(--icon-color);
  opacity: 0.8;
}

.dismiss_modal:focus {
  outline: none;
}

.dismiss_modal:focus .icon-close-modal {
  border-radius: 50%;
}

/* EVERYTHING HERE IS USED IN THE NEW STYLE */
a {
  color: var(--text-link);
}

a:hover {
  color: var(--text-link-hover);
}

/* NAV */
ol.breadcrumb {
  display: flex;
  align-items: center;
}

/* OTHERS */
/* BOOTSTRAP TOGGLE CUSTOM STYLE */
.toggle {
  border-color: var(--bg-selected);
}

.toggle-on {
  background-color: var(--toggle-on-bg);
}

.nespra_logo_in_card {
  justify-content: center;
  margin-bottom: 5%;
}

.form-inline-navbar {
  margin-bottom: 0px;
}

/* MEDIA QUERY FOR COMMON LAPTOPS */
@media (max-width: 1600px) {
  .other_values_graph {
    font-size: 12px;
  }
  .padding_card_icon {
    padding-right: 10px;
  }
  .status_nesgate_info {
    font-size: 13px;
  }
  .smallest_blue_text_nesmote_info {
    font-size: 10px;
  }
  .small_blue_text_nesmote_info {
    font-size: 16px;
  }
  .smaller_last_value_graph {
    font-size: 16px;
  }
  .smallest_last_value_graph {
    font-size: 10px;
  }
  .smaller_other_values_graph {
    font-size: 8px;
  }
  .smallest_other_values_graph {
    font-size: 10px;
  }
  .total_value_graph {
    font-size: 20px;
  }
  .units_graph {
    font-size: 10px;
  }
  .deveui_text {
    font-size: 14px;
  }
  .title_inactive_since {
    font-size: 12px;
  }
  #button_row_sim_nesgate {
    margin-top: 180px !important;
  }
  #max_alert, #min_alert, #max_alarm, #min_alarm, #alarm_input_email, #alert_input_email,
  #alarm_input_phone, #alert_input_phone, #alert_add_email_button, #alert_add_phone_button,
  #alarm_add_email_button, #alarm_add_phone_button {
    font-size: 12px;
  }
}
/* MEDIA QUERY FOR TABLETS */
@media (max-width: 769px) {
  /* menú lateral, header y contenido → layout/_layout.scss y components/_navbar.scss (F2) */
  #row_donuts {
    top: 560px;
  }
  .footer_text {
    font-size: 12px;
  }
}
/* MEDIA QUERY FOR MOBILES */
@media (max-width: 500px) {
  .mobile_image_logo_nespra_office {
    max-width: 325px;
    display: block !important;
  }
  .big_image_logo_nespra_office {
    display: none;
  }
}
/* MEDIA QUERY FOR MOBILES */
@media (max-width: 450px) {
  .form-inline-org {
    margin-left: auto;
  }
  .form-inline-user {
    margin-left: auto;
  }
  #mobile_test_element {
    display: none;
  }
  #go_fullscreen {
    display: none;
  }
  #fullscreen_div {
    margin-bottom: 25%;
  }
  .last_date_title_control_panel {
    font-size: 14px !important;
  }
}
body {
  background: var(--bg-surface);
  min-height: 100vh;
}

.text-uppercase {
  letter-spacing: 0.1em;
}

.welcome_close_button {
  height: 50px;
}

.close_text_welcome_message {
  font-size: 14px;
  vertical-align: middle;
}

.nespra_img_big {
  height: 25px;
}

.cursor-pointer {
  cursor: pointer;
}

.dot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  position: absolute;
  background: var(--state-error);
  top: -8px;
  left: 20px;
  display: none;
}

.mobile_image_logo_nespra_office {
  display: none;
}

.big_image_logo_nespra_office {
  max-width: 250px;
}

.font_size_widget_value {
  color: var(--action-primary);
}

.tooltip-inner {
  justify-content: left !important;
  max-width: min(350px, 100vw - 32px) !important;
  width: auto !important;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: var(--ns-fs-12);
  line-height: 1.4;
  text-align: left;
  color: var(--tooltip-text) !important;
  background-color: var(--tooltip-bg) !important;
  border: 0;
}
.tooltip-inner * {
  color: inherit !important;
}

.tooltip.show {
  opacity: 1;
}

.arrow {
  display: none !important;
}

/* dynamic bootstrap cols */
.dynamic-col {
  padding: 0;
}

/* Ocultar Flechas Widget */
.grid-stack-item .ui-resizable-handle {
  display: none !important;
  /* Por encima de los controles Leaflet (z-index 1000) para que el tirador
     de redimensionar no quede bloqueado en widgets con mapa (geolocalización, mapa). */
  z-index: 1001;
}

.grid-stack-item:hover .ui-resizable-handle {
  display: block !important;
}

.highcharts-tooltip {
  white-space: normal !important;
}

.highcharts-tooltip strong {
  white-space: nowrap !important;
}

/* Solo flechas del acordeón*/
#accordionDonuts .card-header .icon-chevron {
  display: inline-block;
  transition: transform 0.25s ease;
  transform: rotate(0deg);
}

#accordionDonuts .card-header .icon-chevron.rotated {
  transform: rotate(180deg);
}

.image-preview-container {
  width: 100%;
  max-width: 853px;
  height: min(680px, 70vh);
  padding: 0;
  box-sizing: border-box;
}

.upload-image-container {
  width: 100%;
  max-width: 100%;
  height: min(680px, 70vh);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed var(--glass-border);
  border-radius: 5px;
}
.upload-image-container.upload-error {
  border-color: var(--btn-danger-border);
}

.ns-upload-box {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
}

.ns-dropzone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--dropzone-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ns-dropzone--dragover {
  border-color: var(--action-primary);
  background-color: var(--bg-surface);
}

.ns-divider {
  border: 0;
  border-top: 1px solid var(--card-border);
  margin: 0;
}

.ns-link-btn {
  color: var(--text-link);
  text-decoration: underline;
  cursor: pointer;
  margin: 0;
}
.ns-link-btn:hover {
  color: var(--text-link-hover);
}

.ns-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 13px;
}
.ns-chip::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--text-secondary);
  -webkit-mask: url("../../assets/icons/check.svg") no-repeat center/contain;
  mask: url("../../assets/icons/check.svg") no-repeat center/contain;
}
.ns-chip.is-ok::before {
  background-color: var(--cyan-4);
  color: var(--cyan-4);
}
.ns-chip.is-fail {
  color: var(--state-error);
}
.ns-chip.is-fail::before {
  background-color: var(--state-error);
  -webkit-mask-image: url("../../assets/icons/close.svg");
  mask-image: url("../../assets/icons/close.svg");
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.modal:focus-visible,
[tabindex="-1"]:focus-visible {
  outline: none;
}

:root {
  color-scheme: light;
}

body.dark-mode {
  color-scheme: dark;
}

:root:has(> body.dark-mode) {
  color-scheme: dark;
  background-color: #15181D;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (any-pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}
.dark-mode .org_logo {
  border-radius: 5px;
}

.dark-mode .org_logo img {
  filter: none;
}

/* ============================================================
   BASE/_themes.scss — Tokens semánticos de tema (light / dark)
   ------------------------------------------------------------
   Reglas:
   - Los componentes consumen estos tokens, NUNCA literales.
   - Light (:root) y Dark (body.dark-mode) mantienen el MISMO
     orden de secciones y el MISMO juego de variables.
   - Todo color vive en una variable. Para cambiar un color en
     toda la app → cambiar el token aquí.
   ============================================================ */
/* =========================== LIGHT =========================== */
:root {
  /* ---------- TYPOGRAPHY ---------- */
  --ns-font: 'Inter', sans-serif;
  /* ---------- BRAND / ACTIONS ---------- */
  --color-primary: #0d1d69;
  --color-accent: #00b9e4;
  --action-primary: #00b9e4;
  --action-secondary: #1ccef4;
  /* ---------- TEXT ---------- */
  --text-primary: #030615;
  --text-secondary: #696d80;
  --text-muted: #8991b4;
  --text-white: #ffffff;
  --text-bluedark: #45508a;
  --text-heading: #0d1d69;
  --text-link: #0d1d69;
  --text-link-hover: rgba(75, 90, 161, 1);
  --chart-center-text: var(--text-heading);
  /* ---------- ICONS ---------- */
  --icon-color: #0d1d69;
  --icon-secondary: #6b7280;
  --icon-active: #0d1d69;
  --icon-disabled: #6b7280;
  --icon-hover: #4b5aa1;
  --icon-active-soft: #00b9e4;
  --icon-favorite-off: #8991B4;
  --icon-favorite-active: #F3CA3E;
  /* ---------- STEPS ---------- */
  --step-done: #0d1d69;
  --step-active: #45508a;
  --step-pending: #afafaf;
  --step-disabled: #cbd5e1;
  --step-hover: rgba(255, 255, 255, 0.50);
  /* ---------- BACKGROUNDS ---------- */
  --bg-main: #ffffff;
  --bg-login: #f2f3f8;
  --bg-surface: #f3f3f3;
  --bg-selected: #d2d5e2;
  --selection-bg: color-mix(in srgb, var(--btn-primary-bg) 10%, var(--bg-main));
  --progress-track: var(--card-border);
  --bg-header-widget: rgba(238.07, 238.25, 239.06, 0.95);
  --bg-fullscreen: #ffffff;
  --bg-breadcrumb: #f3f3f3;
  /* ---------- SEPARADORES ---------- */
  --divider-color: rgba(16, 24, 40, 0.08);
  /* ---------- STATES ---------- */
  --state-success: #74ca80;
  --state-sucess-border: #2F8A3C;
  --state-warning: #f9d762;
  --state-warning-border: #f9b55d;
  --state-error: #EA5658;
  --state-error-border: #f23336;
  --state-info: #1CCEF4;
  --state-info-border: #00B9E4;
  --state-offline: #8991b4;
  --status-error: lightcoral;
  --status-warning: #EBA615;
  /* ---------- ALERTS ---------- */
  --alert-info-bg: #EBFDFF;
  --alert-info-border: rgba(3, 140, 183, 0.6);
  --alert-info-text: #038CB7;
  --alert-info-icon: #038CB7;
  --alert-warning-bg: #FFF7DB;
  --alert-warning-border: rgba(173, 92, 16, 0.6);
  --alert-warning-text: #AD5C10;
  --alert-warning-icon: #AD5C10;
  --alert-error-bg: #FDECEC;
  --alert-error-border: rgba(179, 34, 36, 0.6);
  --alert-error-text: #B32224;
  --alert-error-icon: #B32224;
  --alert-success-bg: #EAF8EE;
  --alert-success-border: rgba(36, 87, 44, 0.6);
  --alert-success-text: #24572C;
  --alert-success-icon: #24572C;
  --alert-danger-bg: rgba(100, 116, 139, 0.12);
  --alert-danger-border: rgba(100, 116, 139, 0.35);
  --alert-danger-text: #475569;
  --alert-danger-icon: #64748B;
  /* ---------- BORDERS ---------- */
  --border-input: var(--color-primary);
  --border-default: rgba(75, 90, 161, 0.6);
  --border-gridstack: #E0ECFF;
  /* ---------- INPUTS ---------- */
  --input-bg: #ffffff;
  --input-text: #030615;
  --text-placeholder: #9aa0a6;
  --input-placeholder: #8991B4;
  --input-border-default: #dcdddf;
  --input-border-hover: #0D1D69;
  --input-border-focus: #0D1D69;
  /* Foco por teclado (auditoría responsive CP-09). `--focus-ring` es el contorno de la regla base
     `:focus-visible` (base/_global.scss); `--btn-focus-ring`, el halo que usan los componentes que
     pintan el foco con box-shadow. Antes ninguno de los dos estaba definido y todo caía a un
     respaldo azul marino al 25 % que en dark no se veía. */
  --focus-ring: #0D1D69;
  --modal-border: rgba(0, 0, 0, 0.2);
  /* Degradado que avisa de columnas fuera de la vista en una tabla con scroll horizontal (TB-02). */
  --scroll-hint-shadow: rgba(13, 29, 105, 0.14);
  --btn-focus-ring: rgba(13, 29, 105, 0.35);
  --input-border-filled: #8991B4;
  --input-border-error: #B32224;
  --input-bg-disabled: #F5F7FA;
  --input-text-disabled: #8991B4;
  --input-border-disabled: #D9DFEA;
  /* ---------- CHECKBOX (.ns-check) ---------- */
  /* Spec Figma: control 18px en frame 24px, gap 8px, sin sombras.
     Default navy · hover/active cyan · disabled #D2D5D2 al 50%. */
  --check-border: #8991B4; /* borde sin-marcar / relleno marcado (navy) */
  --check-fill: #0D1D69; /* fondo al marcar */
  --check-hover: #4B5AA1; /* hover / active (azul de hover) */
  --check-mark: #FFFFFF; /* marca de verificación */
  --check-disabled: #D2D5D2; /* deshabilitado (se aplica con opacity .5) */
  /* ---------- BUTTONS ---------- */
  /* Scroll (flechas de las barras de pestañas); la flecha usa --icon-color / --icon-hover */
  --bg-scroll-button: #ffffff;
  --bg-scroll-button-hover: #e8eaf1; /* = --sidebar-bg-hover sobre blanco, pero opaco: la flecha flota sobre las pestañas */
  /* Primary blue */
  --btn-primary-bg: #0D1D69;
  --btn-primary-bg-hover: #4B5AA1;
  --btn-primary-bg-pressed: #0A1754;
  --btn-primary-bg-disabled: #C7CCDF;
  --btn-primary-text: #FEFEFE;
  /* Primary white */
  --btn-primary-white-bg: #FFFFFF;
  --btn-primary-white-bg-hover: #F3F3F3;
  --btn-primary-white-bg-pressed: rgba(210, 213, 226, 0.08);
  --btn-primary-white-text: #0D1D69;
  --btn-primary-white-border: #0A1754;
  /* Secondary */
  --btn-secondary-bg: rgba(255, 255, 255, 0.50);
  --btn-secondary-bg-hover: #DCE0EB;
  --btn-secondary-bg-pressed: #C5CADB;
  --btn-secondary-text: #0D1D69;
  --btn-secondary-text-hover: #4B5AA1;
  --btn-secondary-border: rgba(13, 29, 105, 0.20);
  --btn-primary-white-border: #0D1D69;
  /* Text / ghost */
  --btn-text-bg: transparent;
  --btn-text-bg-hover: #F3F3F3;
  --btn-text-bg-pressed: rgba(210, 213, 226, 0.50);
  --btn-text-color: #0D1D69;
  /* BUTTON DANGER (destructivo) — antes hardcoded lightcoral en .modal_delete_button.
     Definido por tema: aqui light (#EA5658); dark lo redefine (#f87171) mas abajo. */
  --btn-danger-text: #EA5658;
  --btn-danger-border: #EA5658;
  --btn-danger-bg-hover: #EA5658;
  /* BUTTON GLASS (sobre paneles oscuros) — antes hardcoded en .more-info-button.
     Pensado para fondos oscuros → constante en ambos temas. */
  --btn-glass-bg: rgba(5, 12, 42, 0.22);
  --btn-glass-text: #EBFDFF;
  --btn-glass-border: #EBFDFF;
  --btn-glass-bg-hover: rgba(0, 185, 228, 0.08);
  --btn-glass-text-hover: #63E4FD;
  --btn-glass-border-hover: rgba(99, 228, 253, 0.45);
  --btn-glass-shadow-hover: rgba(99, 228, 253, 0.10);
  /* Multistep */
  --bg-step-circle: #696d80;
  /* User-change-password button group */
  --ucp-btn-bg: #ffffff;
  --ucp-btn-bg-hover: rgba(238, 239, 246, 1);
  --ucp-btn-bg-selected: rgba(210, 213, 226, 0.5);
  --ucp-btn-text: rgba(13, 29, 105, 1);
  --ucp-btn-border: rgba(13, 29, 105, 1);
  /* BUTTON TOGGLE / SEGMENTED (componente .ns-toggle-group) — Figma toggle_button */
  --btn-toggle-text: #0D1D69;
  --btn-toggle-border: #0D1D69;
  --btn-toggle-active: rgba(210, 213, 226, 0.5);
  --btn-toggle-hover: rgba(210, 213, 226, 0.25); /* preview más suave que el activo */
  /* ---------- CARDS ---------- */
  --bg-card: #ffffff;
  --bg-hover: #d2d5e2;
  --bg-cardpaneles: #d2d5e2;
  --bg-card-widget: #ffffff;
  --bg-highcharts: #ffffff;
  --border-header-widget: #ffffff;
  --geo-preview-bg: #f8f9fa;
  --geo-label-bg: rgba(255, 255, 255, 0.92);
  --geo-label-text: var(--text-heading);
  --card-border: rgba(0, 0, 0, 0.08);
  --card-border-soft: rgba(0, 0, 0, 0.06);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
  --card-shadow-active: 0 4px 10px rgba(0, 0, 0, 0.1);
  --card-separator: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.14);
  /* ---------- GLASS / SURFACE ---------- */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.04);
  --glass-border-soft: rgba(0, 0, 0, 0.03);
  --glass-blur: 20px;
  --glass-saturate: 160%;
  --glass-shadow:
    0 8px 24px rgb(153 153 153 / 50%),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  --modal-header-glass-bg: rgba(245, 246, 248, 0.75);
  --modal-header-glass-border: rgba(0, 0, 0, 0.08);
  --card-bg: var(--bg-card);
  --card-bg-hover: var(--bg-hover);
  /* ---------- WIDGETS ---------- */
  --widget-icon-arc-primary: #c7d2fe;
  --widget-icon-arc-secondary: #00b9e4;
  --widget-icon-text: #6b7280;
  --widget-icon-needle: #00b9e4;
  --widget-geolocation-grid: #d1d5db;
  --widget-bg-hover: rgba(13, 29, 105, 0.08);
  --widget-bg-active: #ffffff;
  --widget-border-hover: #0d1d69;
  --widget-border-active: #0d1d69;
  /* ---------- RADIO BUTTON ---------- */
  --radio-button: #0d1d69;
  /* ---------- SIDEBAR ---------- */
  --sidebar-text-primary: var(--color-primary);
  --sidebar-text-secondary: #a4a9c5;
  --sidebar-text-muted: #8991b4;
  --sidebar-text-backend: lightcoral;
  --sidebar-bg-main: var(--bg-main);
  --sidebar-bg-surface: var(--bg-surface);
  --sidebar-bg-hover: rgba(210, 213, 226, 0.50);
  --sidebar-bg-active: rgba(210, 213, 226, 0.5);
  --sidebar-accent-primary: #00B9E4;
  --sidebar-accent-hover: #99E3F4;
  --sidebar-border: rgba(0, 0, 0, 0.06);
  --sidebar-shadow-sm: 0 0 2px rgba(0, 0, 0, 0.2);
  --sidebar-shadow-md: 3px 3px 10px rgba(0, 0, 0, 0.1);
  /* ---------- BADGES / TAGS ---------- */
  /* Paneles */
  --badge-editor-bg: rgba(124, 58, 237, 0.12);
  --badge-editor-border: rgba(124, 58, 237, 0.35);
  --badge-editor-text: #5B21B6;
  --badge-only-read-bg: rgba(34, 197, 94, 0.12);
  --badge-only-read-border: rgba(34, 197, 94, 0.35);
  --badge-only-read-text: #15803D;
  --badge-propietary-bg: rgba(6, 182, 212, 0.12);
  --badge-propietary-border: rgba(6, 182, 212, 0.35);
  --badge-propietary-text: #0E7490;
  --badge-external-bg: rgba(245, 158, 11, 0.12);
  --badge-external-border: rgba(245, 158, 11, 0.35);
  --badge-external-text: #B45309;
  /* Estado del informe (reports/my_reports.php, plan §5.1) */
  --badge-active-bg: rgba(34, 197, 94, 0.12);
  --badge-active-border: rgba(34, 197, 94, 0.35);
  --badge-active-text: #15803D;
  /* Pastilla «switch» (.badge--switch, «Verificado» de los dominios en organisation/sso):
     fondo y trazo propios del diseño; icono y texto reutilizan --badge-active-text. */
  --badge-switch-bg: #F2FBF3;
  --badge-switch-border: #B7E4CA;
  --badge-no-schedule-bg: var(--bg-breadcrumb);
  --badge-no-schedule-border: rgba(105, 109, 128, 0.45);
  --badge-no-schedule-text: var(--text-secondary);
  /* Logs */
  --badge-device-bg: rgba(34, 197, 94, 0.12);
  --badge-device-border: rgba(34, 197, 94, 0.35);
  --badge-device-text: #15803D;
  --badge-org-bg: rgba(6, 182, 212, 0.10);
  --badge-org-border: rgba(6, 182, 212, 0.35);
  --badge-org-text: #0E7490;
  --badge-networks-bg: rgba(124, 58, 237, 0.10);
  --badge-networks-border: rgba(124, 58, 237, 0.35);
  --badge-networks-text: #5B21B6;
  --badge-licenses-bg: rgba(245, 158, 11, 0.10);
  --badge-licenses-border: rgba(245, 158, 11, 0.35);
  --badge-licenses-text: #B45309;
  --badge-panel-bg: rgba(59, 130, 246, 0.10);
  --badge-panel-border: rgba(59, 130, 246, 0.35);
  --badge-panel-text: #1D4ED8;
  --badge-public_page-bg: rgba(244, 63, 94, 0.10);
  --badge-public_page-border: rgba(244, 63, 94, 0.35);
  --badge-public_page-text: #B91C1C;
  --badge-reports-bg: rgba(234, 179, 8, 0.10);
  --badge-reports-border: rgba(234, 179, 8, 0.35);
  --badge-reports-text: #A16207;
  --badge-users-bg: #F0F9FF;
  --badge-users-border: #BAE6FD;
  --badge-users-text: #0369A1;
  /* Turnos de trabajo */
  --shift-color-0-bg: #EBFDFF;
  --shift-color-0-border: #00B9E4;
  --shift-color-0-text: #00B9E4;
  --shift-color-1-bg: #FFFBEB;
  --shift-color-1-border: #FDE68A;
  --shift-color-1-text: #D0800F;
  --shift-color-2-bg: rgba(124, 58, 237, 0.10);
  --shift-color-2-border: rgba(124, 58, 237, 0.35);
  --shift-color-2-text: #5B21B6;
  --shift-color-3-bg: rgba(34, 197, 94, 0.12);
  --shift-color-3-border: rgba(34, 197, 94, 0.35);
  --shift-color-3-text: #15803D;
  --shift-color-4-bg: #FEF2F2;
  --shift-color-4-border: #F37678;
  --shift-color-4-text: #F37678;
  --shift-color-5-bg: rgba(6, 182, 212, 0.10);
  --shift-color-5-border: rgba(6, 182, 212, 0.35);
  --shift-color-5-text: #0E7490;
  /* Tags */
  --tag-count-bg: #EBFDFF;
  --tag-count-text: #038CB7;
  --tag-periodic-bg: #FCF5C9;
  --tag-periodic-text: #D0800F;
  /* Chip de entidad (emails) */
  --chip-email-bg: rgba(210, 213, 226, 0.5);
  --chip-email-border: rgba(13, 29, 105, 1);
  --chip-email-text: rgba(13, 29, 105, 1);
  /* ---------- DEVICE TABS ---------- */
  --device-tab-text: rgba(105, 109, 128, 1);
  --device-tab-text-active: rgba(13, 29, 105, 1);
  --device-tab-bg: rgba(255, 255, 255, 0.80);
  --device-tab-bg-inactive: rgba(255, 255, 255, 0.80);
  --device-tab-hover: rgba(210, 213, 226, 0.5);
  --device-tab-bg-active: rgba(243, 243, 243, 1);
  --device-tab-border: rgba(13, 29, 105, 1);
  --device-tab-border-bottom-active: rgba(243, 243, 243, 1);
  /* ---------- TABLES ---------- */
  --surface-glass-bg: #ffffff;
  --surface-glass-border: rgba(0, 0, 0, 0.08);
  --surface-glass-border-soft: rgba(0, 0, 0, 0.06);
  --surface-glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --surface-search-bg: transparent;
  --surface-header-bg: rgba(0, 0, 0, 0.03);
  --surface-divider: rgba(0, 0, 0, 0.08);
  --surface-row-bg: #ffffff;
  --surface-row-bg-hover: #f3f3f3;
  --surface-row-bg-selected: rgba(0, 185, 228, 0.15);
  /* Filas de estado de licencia (backend/license_status) */
  --row-license-expired-bg: rgba(234, 86, 88, 0.15);
  --row-license-30-bg: rgba(255, 153, 0, 0.15);
  --row-license-60-bg: rgba(249, 215, 98, 0.18);
  --row-license-expired-stripe: #EA5658;
  --row-license-30-stripe: #ff9900;
  --row-license-60-stripe: #f9d762;
  /* Pagination */
  --table-pagination-bg: rgba(0, 0, 0, 0.04);
  --table-pagination-border: rgba(0, 0, 0, 0.08);
  --table-pagination-hover-bg: rgba(0, 0, 0, 0.08);
  --table-pagination-active-bg: rgba(0, 185, 228, 0.18);
  --dt-pagination-text: rgba(13, 29, 105, 1);
  --dt-pagination-border: rgba(13, 29, 105, 1);
  --dt-pagination-hover-bg: rgba(238, 239, 246, 1);
  --dt-pagination-active-bg: rgba(13, 29, 105, 0.18);
  --dt-pagination-active-text: rgba(13, 29, 105, 1);
  --dt-pagination-radius: 20px;
  /* ---------- SCROLLBAR ---------- */
  --scroll-track: #f1f3f6;
  --scroll-thumb: #c5c9cf;
  --scroll-thumb-hover: #aeb4bc;
  --scrollbarBG: var(--scroll-track);
  --thumbBG: var(--scroll-thumb);
  /* ---------- HIGHCHARTS ---------- */
  --highcharts-background-color: transparent;
  --highcharts-neutral-color-100: #0f172a;
  --highcharts-neutral-color-60: #667085;
  --highcharts-tooltip-bg: rgba(210, 213, 226, 0.8);
  --chart-tooltip-border: rgba(13, 29, 105, 0.12);
  --highcharts-tooltip-border: var(--chart-tooltip-border);
  /* Salud de radio LoRaWAN (lorawan-radio-health-plan.md): marcas de los grados A–D en gráficas y
     tablas. Ordenados también por luminosidad para distinguirse sin el tono; validados con el
     validador de paletas (CVD) sobre blanco. El de C no llega a 3:1 de contraste: siempre lleva
     la letra al lado. */
  --radio-grade-a: #15803D;
  --radio-grade-b: #038CB7;
  --radio-grade-c: #D98A0B;
  --radio-grade-d: #A3181B;
  --radio-loss-bar: #038CB7;
  --radio-line: #030615;
  --radio-window-bg: rgba(13, 29, 105, 0.05);
  /* ---------- COMPONENT TOKENS ---------- */
  /* Toggle (Bootstrap Toggle / Switch) */
  --toggle-on-bg: #0D1D69;
  --toggle-off-bg: #8991B4;
  --toggle-knob: var(--bg-main);
  /* Tokenizado desde estilos inline de vistas */
  --col-highlight-bg: #00B9E440;
  /* resalte columnas (saas_metrics) */
  --icon-info: #58b9e1;
  /* tooltip informativo (Bootstrap .tooltip-inner, icono «i») */
  --tooltip-bg: var(--btn-primary-bg);
  --tooltip-text: var(--btn-primary-text);
  /* icono info / tooltip */
  --dropzone-border: #a4a9c5;
  /* borde zona de subida */
  --plane-tooltip-border: #000000;
  /* borde tooltip de sensor sobre el sinóptico */
  --plane-tooltip-text-muted: rgba(1, 3, 11, 0.6);
  /* texto secundario del tooltip de sensor sobre el sinóptico */
  --plane-tag-bg: rgba(255, 255, 255, 0.85);
  /* fondo del tag del sinóptico SIN conocimiento experto asignado (o sin banda definida) */
  --plane-tag-border: #0d1d69;
  /* borde del tag del sinóptico SIN conocimiento experto asignado (o sin banda definida) */
}

/* ================ ICONO + TEXTO CLICABLE: HOVER (light y dark) ================
   Mismo patrón en los dos temas: icono y texto en reposo con el color base del
   tema (light #0d1d69 · dark blanco) y, al pasar el ratón, en --icon-hover
   (light #4b5aa1 · dark cyan #63e4fd). Un <img> no tiene `color`, así que el
   icono se tiñe con un filtro que lleva el negro hasta ese color exacto
   (calculado, error < 1/255). Las listas se comparten entre los dos bloques. */
/* =========================== LIGHT ===========================
   Solo lo que cambia respecto al CSS base de cada componente. Scope explícito
   (body sin .dark-mode) para que nada de esto toque el tema oscuro. */
body:not(.dark-mode) {
  /* Icono dentro de algo clicable → #4b5aa1 al pasar el ratón. En reposo no
     lleva filtro: los SVG del set ya vienen en #0D1D69. */
}
body:not(.dark-mode) :where(:is(button, a, [type=button], [role=button]):not(:disabled, .disabled, .btn--primary, .ns-icon-btn--primary, .navbar-brand, .navbar-brand-mobile):hover) :is(img[src*="/icons/"], img.app-icon):not(img[src*=point], img[src*=-blue], img[src*=-red], img[src*=-yellow], img[src*=white], img[src*=favicon], img[src*=star], img[src*="activity.svg"], img[src*=goodsignal], img[src*=checkblue], img[src*=circlealert], img[src*="error.svg"], img[src*=wrong], img[src*=warning-inverse], img[src*=fluentwarning], img[src*="fluentcellulardata.svg"], img[src*=fluentcellulardata324], img[src*=fluentcellularoff], img[src*=stateon], img[src*=stateorange], img[src*=darkmode], img[src*=lightmode], img[src*=toggleon], img[src*=toggleoff], img[src*=batteryplugred], img[src*=stepupcoming], .spinner-sun-img) {
  filter: brightness(0) saturate(100%) invert(34%) sepia(22%) saturate(1343%) hue-rotate(192deg) brightness(98%) contrast(93%);
}
body:not(.dark-mode) {
  /* Lupas <img>: gris en reposo, #0d1d69 (foco del input) al escribir. */
}
body:not(.dark-mode) .dds__search .dds__search-icon,
body:not(.dark-mode) .geo_search_wrapper .geo_search_icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(4%) saturate(5221%) hue-rotate(187deg) brightness(51%) contrast(37%);
  opacity: 1;
}
body:not(.dark-mode) .dds__search:focus-within .dds__search-icon,
body:not(.dark-mode) .geo_search_wrapper:focus-within .geo_search_icon {
  filter: brightness(0) saturate(100%) invert(4%) sepia(77%) saturate(5346%) hue-rotate(235deg) brightness(137%) contrast(97%);
}
body:not(.dark-mode) {
  /* Reposo: estos clicables salían en --text-primary (#030615, casi negro) en
     vez del #0d1d69 de sus iconos. --text-primary es el texto de toda la app, así
     que se fija --color-primary solo aquí; el hover lo pone cada componente
     (--text-link-hover / --icon-hover, ambos #4b5aa1). */
}
body:not(.dark-mode) .dropdown_edit_user_settings_link:not(:hover),
body:not(.dark-mode) .ns-type-card:not(:hover) .ns-type-card__title {
  color: var(--color-primary);
}
body:not(.dark-mode) .bootstrap-select:not(.show) > .dropdown-toggle.dropdown_navbar:not(:hover, :focus, :focus-visible, :active) {
  color: var(--color-primary) !important;
}
body:not(.dark-mode) {
  /* Botón de texto (.btn--text): --btn-text-color (#0D1D69) también en hover;
     aquí el hover pasa a --icon-hover. */
}
body:not(.dark-mode) .btn--text:not(:disabled):is(:hover, :focus-visible, :active) {
  color: var(--icon-hover);
}
body:not(.dark-mode) {
  /* Tarjetas de tipo (wizard de informes): título a juego con el icono. */
}
body:not(.dark-mode) .ns-type-card:not(:disabled):hover .ns-type-card__title {
  color: var(--icon-hover);
}
body:not(.dark-mode) {
  /* Tarjetas del popup de clúster del mapa (dashboard / nesgate_info): al pasar
     el ratón por la tarjeta, título e icono de la cabecera juntos a #4b5aa1. La
     tarjeta no es un enlace ni un botón, así que la regla genérica de iconos no
     la alcanza. El contador conserva su píldora. */
}
body:not(.dark-mode) .map-popup__grid-card:hover .map-popup__grid-header {
  color: var(--icon-hover);
}
body:not(.dark-mode) .map-popup__grid-card:hover .map-popup__grid-header .map-popup__icon {
  filter: brightness(0) saturate(100%) invert(34%) sepia(22%) saturate(1343%) hue-rotate(192deg) brightness(98%) contrast(93%);
}
body:not(.dark-mode) {
  /* Sidebar (vertical-nav): icono y texto juntos a #4b5aa1 al pasar el ratón,
     en todos los ítems — primer nivel, submenús (también los de backend, rojos
     en reposo) y paneles favoritos —, como en dark. Antes solo cambiaba el
     icono (regla genérica) y el texto se quedaba en #0d1d69. No se usa
     --sidebar-accent-hover: en light es el cian suave del borde de submenú
     (#99E3F4) y como texto apenas se lee. */
}
body:not(.dark-mode) .vertical-nav .nav-link:hover {
  color: var(--icon-hover);
}
body:not(.dark-mode) .vertical-nav .nav-link:hover > span,
body:not(.dark-mode) .vertical-nav .nav-link:hover > p {
  color: var(--icon-hover);
}
body:not(.dark-mode) .vertical-nav .nav-link:hover > img:not(img[src*=point], img[src*=-blue], img[src*=-red], img[src*=-yellow], img[src*=white], img[src*=favicon], img[src*=star], img[src*="activity.svg"], img[src*=goodsignal], img[src*=checkblue], img[src*=circlealert], img[src*="error.svg"], img[src*=wrong], img[src*=warning-inverse], img[src*=fluentwarning], img[src*="fluentcellulardata.svg"], img[src*=fluentcellulardata324], img[src*=fluentcellularoff], img[src*=stateon], img[src*=stateorange], img[src*=darkmode], img[src*=lightmode], img[src*=toggleon], img[src*=toggleoff], img[src*=batteryplugred], img[src*=stepupcoming]) {
  filter: brightness(0) saturate(100%) invert(34%) sepia(22%) saturate(1343%) hue-rotate(192deg) brightness(98%) contrast(93%);
}
body:not(.dark-mode) {
  /* Selector de organización: el texto ya cambia a --text-link-hover en hover;
     la flecha (chevron de bordes, `.btn.dropdown-toggle::after`) tenía su color
     fijo (--color-primary) y no lo seguía. */
}
body:not(.dark-mode) .bootstrap-select .dropdown-toggle.dropdown_navbar::after {
  border-color: currentColor;
}

/* =========================== DARK =========================== */
body.dark-mode {
  /* ---------- TYPOGRAPHY ---------- */
  --ns-font: 'Inter', sans-serif;
  /* ---------- BRAND / ACTIONS ---------- */
  --color-primary: #e6e9ef;
  --color-accent: var(--cyan-4);
  --action-primary: var(--cyan-2);
  --action-secondary: #1ccef4;
  /* ---------- TEXT ---------- */
  --text-primary: #E6E8EB;
  --text-secondary: #A1A7B3;
  --text-muted: #6B7280;
  --text-white: #ffffff;
  --text-bluedark: #00b9e4;
  --text-heading: #A2F1FF;
  --text-link: var(--cyan-4);
  --text-link-hover: var(--cyan-2);
  --chart-center-text: var(--text-white);
  /* ---------- ICONS ---------- */
  --icon-color: #ffffff;
  --icon-secondary: #94a3b8;
  --icon-active: var(--cyan-3);
  --icon-disabled: #7b8797;
  --icon-hover: var(--cyan-2);
  --icon-active-soft: var(--cyan-2);
  --icon-favorite-off: #8991B4;
  --icon-favorite-active: #F3CA3E;
  /* ---------- STEPS ---------- */
  --step-done: var(--cyan-3);
  --step-active: var(--cyan-3);
  --step-pending: #64748b;
  --step-disabled: #475569;
  --step-hover: rgba(255, 255, 255, 0.06);
  /* ---------- BACKGROUNDS ---------- */
  --bg-main: #1B1B1F;
  --bg-login: #1B1B1F;
  --bg-surface: #15181D;
  --bg-selected: #1e3a5f;
  --selection-bg: var(--sidebar-bg-active);
  --progress-track: var(--card-border);
  --bg-header-widget: rgba(255, 255, 255, 0.06);
  --bg-fullscreen: #1B1B1F;
  --bg-breadcrumb: rgba(0, 0, 0, 0.08);
  /* ---------- SEPARADORES ---------- */
  --divider-color: rgba(255, 255, 255, 0.08);
  /* ---------- STATES (anclados a la escala del design system) ---------- */
  --state-success: var(--success-400);
  --state-sucess-border: var(--success-400);
  --state-warning: var(--warning-400);
  --state-warning-border: var(--warning-500);
  --state-error: var(--error-400);
  --state-error-border: var(--error-500);
  --state-info: var(--cyan-4);
  --state-info-border: var(--cyan-3);
  --state-offline: #8991b4;
  --status-error: var(--error-400);
  --status-warning: var(--warning-300);
  /* ---------- ALERTS ---------- */
  /* info → escala cyan */
  --alert-info-bg: rgba(0, 185, 228, 0.12);
  --alert-info-border: rgba(0, 185, 228, 0.35);
  --alert-info-text: var(--cyan-1);
  --alert-info-icon: var(--cyan-2);
  /* warning → escala warning */
  --alert-warning-bg: rgba(243, 202, 62, 0.12);
  --alert-warning-border: rgba(243, 202, 62, 0.35);
  --alert-warning-text: var(--warning-200);
  --alert-warning-icon: var(--warning-400);
  /* error → escala error */
  --alert-error-bg: rgba(243, 118, 120, 0.12);
  --alert-error-border: rgba(243, 118, 120, 0.35);
  --alert-error-text: var(--error-200);
  --alert-error-icon: var(--error-400);
  /* success → escala success (verde real, no turquesa) */
  --alert-success-bg: rgba(116, 202, 128, 0.12);
  --alert-success-border: rgba(116, 202, 128, 0.35);
  --alert-success-text: var(--success-300);
  --alert-success-icon: var(--success-400);
  --alert-danger-bg: rgba(148, 163, 184, 0.12);
  --alert-danger-border: rgba(148, 163, 184, 0.30);
  --alert-danger-text: #CBD5F5;
  --alert-danger-icon: #94A3B8;
  /* ---------- BORDERS ---------- */
  --border-input: #ffffff;
  --border-default: #ffffff;
  --border-gridstack: rgba(255, 255, 255, 0.08);
  /* ---------- INPUTS ---------- */
  --input-bg: #1B1B1F;
  --input-text: #e6e9ef;
  --text-placeholder: #8b949e;
  --input-placeholder: #8b949e;
  --input-border-default: rgba(255, 255, 255, 0.08);
  --input-border-hover: rgba(255, 255, 255, 0.14);
  --input-border-focus: var(--cyan-4);
  --focus-ring: var(--cyan-4);
  --modal-border: rgba(255, 255, 255, 0.12);
  --scroll-hint-shadow: rgba(0, 0, 0, 0.55);
  --btn-focus-ring: rgba(0, 185, 228, 0.45);
  --input-border-filled: rgba(255, 255, 255, 0.18);
  --input-border-error: #f87171;
  --input-bg-disabled: #141417;
  --input-text-disabled: #6B7280;
  --input-border-disabled: rgba(255, 255, 255, 0.06);
  /* ---------- CHECKBOX (.ns-check) ---------- */
  /* Dark: el checkbox es cyan #00b9e4 (--cyan-4); hover en cyan más claro
     (--cyan-2) para dar feedback. Marca blanca, como el resto de la app. */
  --check-border: #6B7280;
  --check-fill: var(--cyan-4);
  --check-hover: var(--cyan-2);
  --check-mark: #FFFFFF;
  --check-disabled: #6B7280;
  /* ---------- BUTTONS ---------- */
  /* Scroll (flechas de las barras de pestañas): superficie elevada oscura, no el
     gris claro de antes, con la flecha blanca → cyan de los iconos (--icon-*) */
  --bg-scroll-button: #2B2F36;
  --bg-scroll-button-hover: #343a43;
  /* Primary blue */
  --btn-primary-bg: var(--cyan-4);
  --btn-primary-bg-hover: var(--cyan-2);
  --btn-primary-bg-pressed: #1e88c7;
  --btn-primary-bg-disabled: #1c3f55;
  --btn-primary-text: #ffffff;
  /* Primary white */
  --btn-primary-white-bg: var(--cyan-4);
  --btn-primary-white-bg-hover: var(--cyan-2);
  --btn-primary-white-bg-pressed: rgba(210, 213, 226, 0.08);
  --btn-primary-white-text: #e6e9ef;
  --btn-primary-white-border: #D6E4FF;
  /* Secondary */
  --btn-secondary-bg: #161c24;
  --btn-secondary-bg-hover: #304958;
  --btn-secondary-bg-pressed: #38586A;
  --btn-secondary-text: #e6e9ef;
  --btn-secondary-text-hover: #A2F1FF;
  --btn-secondary-border: rgba(255, 255, 255, 0.12);
  /* Text / ghost */
  --btn-text-bg: transparent;
  --btn-text-bg-hover: rgba(0, 185, 228, 0.08);
  --btn-text-bg-pressed: rgba(0, 185, 228, 0.16);
  --btn-text-color: #2bb0ed;
  /* BUTTON DANGER — error-500 de la paleta, el mismo rojo que en light */
  --btn-danger-text: var(--error-500);
  --btn-danger-border: var(--error-500);
  --btn-danger-bg-hover: var(--error-500);
  /* Multistep */
  --bg-step-circle: #9AA1B8;
  /* User-change-password button group */
  --ucp-btn-bg: rgba(255, 255, 255, 0.04);
  --ucp-btn-bg-hover: rgba(13, 29, 105, 0.18);
  --ucp-btn-bg-selected: rgba(13, 29, 105, 0.28);
  --ucp-btn-text: #e6e9ef;
  --ucp-btn-border: #A2F1FF;
  /* BUTTON TOGGLE / SEGMENTED (componente .ns-toggle-group) — Figma toggle_button */
  --btn-toggle-text: #e6e9ef;
  --btn-toggle-border: #A2F1FF;
  --btn-toggle-active: rgba(162, 241, 255, 0.18);
  --btn-toggle-hover: rgba(162, 241, 255, 0.08); /* preview más suave que el activo */
  /* ---------- CARDS ---------- */
  --bg-card: transparent;
  --bg-hover: #FFFFFF1A;
  --bg-cardpaneles: #FFFFFF1A;
  --bg-card-widget: rgba(255, 255, 255, 0.04);
  --bg-highcharts: #141414;
  --border-header-widget: rgba(255, 255, 255, 0.12);
  --geo-preview-bg: transparent;
  --geo-label-bg: rgba(20, 22, 30, 0.82);
  --geo-label-text: var(--text-body);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-border-soft: rgba(255, 255, 255, 0.06);
  --card-shadow:
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.28);
  --card-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.65);
  --card-shadow-active:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.5);
  --card-separator: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
  --shadow-elevated:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.65);
  /* ---------- GLASS / SURFACE ---------- */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-soft: rgba(255, 255, 255, 0.05);
  --glass-blur: 16px;
  --glass-saturate: 160%;
  --glass-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --modal-header-glass-bg: rgba(28, 30, 36, 0.72);
  --modal-header-glass-border: rgba(255, 255, 255, 0.08);
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-bg-hover: rgba(255, 255, 255, 0.08);
  /* ---------- WIDGETS ---------- */
  --widget-icon-arc-primary: #334155;
  --widget-icon-arc-secondary: #475569;
  --widget-icon-text: #cbd5e1;
  --widget-icon-needle: #ffffff;
  --widget-geolocation-grid: #475569;
  --widget-bg-hover: rgba(255, 255, 255, 0.06);
  --widget-bg-active: #1e293b;
  --widget-border-hover: var(--cyan-3);
  --widget-border-active: rgba(0, 185, 228, .9);
  /* ---------- RADIO BUTTON ---------- */
  --radio-button: var(--cyan-4);
  /* ---------- SIDEBAR ---------- */
  --sidebar-text-primary: #e6e9ef;
  --sidebar-text-secondary: #9aa4b2;
  --sidebar-text-muted: #6b7280;
  --sidebar-text-backend: #e58c8c;
  --sidebar-bg-main: #1B1B1F;
  --sidebar-bg-surface: #1B1B1F;
  --sidebar-bg-hover: rgba(255, 255, 255, 0.06);
  --sidebar-bg-active: rgba(255, 255, 255, 0.10);
  --sidebar-accent-primary: var(--cyan-4);
  --sidebar-accent-hover: var(--cyan-2);
  --sidebar-border: rgba(255, 255, 255, 0.05);
  --sidebar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.65);
  --sidebar-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.6);
  /* ---------- BADGES / TAGS ---------- */
  /* Paneles */
  --badge-editor-bg: rgba(124, 58, 237, 0.18);
  --badge-editor-border: rgba(167, 139, 250, 0.45);
  --badge-editor-text: #C4B5FD;
  --badge-only-read-bg: rgba(34, 197, 94, 0.16);
  --badge-only-read-border: rgba(134, 239, 172, 0.40);
  --badge-only-read-text: #86EFAC;
  --badge-propietary-bg: rgba(6, 182, 212, 0.16);
  --badge-propietary-border: rgba(103, 232, 249, 0.40);
  --badge-propietary-text: #67E8F9;
  --badge-external-bg: rgba(245, 158, 11, 0.16);
  --badge-external-border: rgba(253, 230, 138, 0.35);
  --badge-external-text: #FDE68A;
  /* Estado del informe (reports/my_reports.php, plan §5.1) — --badge-no-schedule-* no
     necesita bloque propio aquí: ya reutiliza tokens theme-aware (--bg-breadcrumb/
     --text-secondary/--text-primary), definidos arriba en este mismo bloque oscuro. */
  --badge-active-bg: rgba(34, 197, 94, 0.16);
  --badge-active-border: rgba(134, 239, 172, 0.40);
  --badge-active-text: #86EFAC;
  /* Pastilla «switch»: mismo verde que --badge-active en oscuro, con el trazo algo más
     presente para que el contorno se siga leyendo sobre el fondo oscuro. */
  --badge-switch-bg: rgba(34, 197, 94, 0.12);
  --badge-switch-border: rgba(134, 239, 172, 0.45);
  --badge-no-schedule-bg: rgba(255, 255, 255, 0.06);
  --badge-no-schedule-border: #696D80;
  --badge-no-schedule-text: #E6E9EF;
  /* Logs */
  --badge-device-bg: rgba(34, 197, 94, 0.16);
  --badge-device-border: rgba(134, 239, 172, 0.40);
  --badge-device-text: #86EFAC;
  --badge-org-bg: rgba(6, 182, 212, 0.16);
  --badge-org-border: rgba(103, 232, 249, 0.40);
  --badge-org-text: #67E8F9;
  --badge-networks-bg: rgba(124, 58, 237, 0.18);
  --badge-networks-border: rgba(167, 139, 250, 0.45);
  --badge-networks-text: #C4B5FD;
  --badge-licenses-bg: rgba(245, 158, 11, 0.16);
  --badge-licenses-border: rgba(253, 230, 138, 0.35);
  --badge-licenses-text: #FDE68A;
  --badge-panel-bg: rgba(59, 130, 246, 0.16);
  --badge-panel-border: rgba(147, 197, 253, 0.40);
  --badge-panel-text: #93C5FD;
  --badge-public_page-bg: rgba(244, 63, 94, 0.18);
  --badge-public_page-border: rgba(253, 164, 175, 0.35);
  --badge-public_page-text: #FDA4AF;
  --badge-reports-bg: rgba(234, 179, 8, 0.18);
  --badge-reports-border: rgba(253, 230, 138, 0.35);
  --badge-reports-text: #FDE68A;
  --badge-users-bg: rgba(59, 130, 246, 0.14);
  --badge-users-border: rgba(147, 197, 253, 0.35);
  --badge-users-text: #93C5FD;
  /* Turnos de trabajo */
  --shift-color-0-bg: rgba(0, 185, 228, 0.16);
  --shift-color-0-border: rgba(99, 228, 253, 0.40);
  --shift-color-0-text: #63E4FD;
  --shift-color-1-bg: rgba(245, 158, 11, 0.16);
  --shift-color-1-border: rgba(253, 230, 138, 0.35);
  --shift-color-1-text: #FDE68A;
  --shift-color-2-bg: rgba(124, 58, 237, 0.18);
  --shift-color-2-border: rgba(167, 139, 250, 0.45);
  --shift-color-2-text: #C4B5FD;
  --shift-color-3-bg: rgba(34, 197, 94, 0.16);
  --shift-color-3-border: rgba(134, 239, 172, 0.40);
  --shift-color-3-text: #86EFAC;
  /* Rojo/coral — mismo tono que --btn-danger-text en oscuro (#F87171), aquí como token propio
     del turno. */
  --shift-color-4-bg: rgba(248, 113, 113, 0.16);
  --shift-color-4-border: #F87171;
  --shift-color-4-text: #F87171;
  --shift-color-5-bg: rgba(6, 182, 212, 0.16);
  --shift-color-5-border: rgba(103, 232, 249, 0.40);
  --shift-color-5-text: #67E8F9;
  /* Tags */
  --tag-count-bg: rgba(255, 255, 255, 0.06);
  --tag-count-text: #8FD8FF;
  --tag-periodic-bg: rgba(255, 255, 255, 0.06);
  --tag-periodic-text: #F2C27B;
  /* Chip de entidad (emails) */
  --chip-email-bg: rgba(13, 29, 105, 0.12);
  --chip-email-border: #D6E4FF;
  --chip-email-text: #D6E4FF;
  /* ---------- DEVICE TABS ---------- */
  --device-tab-text: #e6e9ef;
  --device-tab-text-active: #A2F1FF;
  --device-tab-bg: #434343;
  --device-tab-bg-inactive: rgba(0, 185, 228, 0.12);
  --device-tab-hover: rgba(0, 185, 228, 0.12);
  --device-tab-bg-active: #243041;
  --device-tab-border: #A2F1FF;
  --device-tab-border-bottom-active: var(--cyan-4);
  /* ---------- TABLES ---------- */
  --surface-glass-bg: rgba(255, 255, 255, 0.04);
  --surface-glass-border: rgba(255, 255, 255, 0.12);
  --surface-glass-border-soft: rgba(255, 255, 255, 0.08);
  --surface-glass-shadow:
    0 8px 24px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  --surface-search-bg: rgba(255, 255, 255, 0.08);
  --surface-header-bg: rgba(255, 255, 255, 0.06);
  --surface-divider: rgba(255, 255, 255, 0.08);
  --surface-row-bg: rgba(255, 255, 255, 0.04);
  --surface-row-bg-hover: rgba(255, 255, 255, 0.08);
  --surface-row-bg-selected: rgba(0, 185, 228, 0.25);
  /* Alias de tokens/_tables.scss: un var() declarado en :root se resuelve con el valor
     light, así que en dark hay que redeclararlos aquí para que hereden el par oscuro. */
  --table-glass-bg: rgba(255, 255, 255, 0.06);
  --table-glass-border: var(--surface-glass-border);
  --table-border-soft: var(--surface-glass-border-soft);
  /* Filas de estado de licencia (backend/license_status) — tintes suaves */
  --row-license-expired-bg: rgba(234, 86, 88, 0.18);
  --row-license-30-bg: rgba(255, 153, 0, 0.16);
  --row-license-60-bg: rgba(249, 215, 98, 0.14);
  --row-license-expired-stripe: #EA5658;
  --row-license-30-stripe: #ff9900;
  --row-license-60-stripe: #f9d762;
  /* Pagination */
  --table-pagination-bg: rgba(255, 255, 255, 0.04);
  --table-pagination-border: rgba(255, 255, 255, 0.08);
  --table-pagination-hover-bg: rgba(255, 255, 255, 0.10);
  --table-pagination-active-bg: rgba(0, 185, 228, 0.25);
  --dt-pagination-text: var(--text-secondary);
  --dt-pagination-border: var(--cyan-4);
  --dt-pagination-hover-bg: rgba(255, 255, 255, 0.08);
  --dt-pagination-active-bg: transparent;
  --dt-pagination-active-text: var(--cyan-4);
  --dt-pagination-radius: 20px;
  /* ---------- SCROLLBAR ---------- */
  --scroll-track: #1c2430;
  --scroll-thumb: #3a3f46;
  --scroll-thumb-hover: #4a5058;
  --scrollbarBG: var(--scroll-track);
  --thumbBG: var(--scroll-thumb);
  /* ---------- HIGHCHARTS ---------- */
  --highcharts-background-color: transparent;
  --highcharts-neutral-color-100: #e6e9ef;
  --highcharts-neutral-color-60: #9aa4b2;
  --highcharts-tooltip-bg: #2B2F36;
  --chart-tooltip-border: rgba(255, 255, 255, 0.12);
  --highcharts-tooltip-border: var(--chart-tooltip-border);
  /* Salud de radio LoRaWAN: los mismos grados, con pasos propios validados sobre el fondo oscuro. */
  --radio-grade-a: #1FA855;
  --radio-grade-b: #0AA3CC;
  --radio-grade-c: #BC7F0E;
  --radio-grade-d: #E2577A;
  --radio-loss-bar: #1CCEF4;
  --radio-line: #E6E8EB;
  --radio-window-bg: rgba(255, 255, 255, 0.05);
  /* ---------- COMPONENT TOKENS ---------- */
  /* Toggle (Bootstrap Toggle / Switch) */
  --toggle-on-bg: var(--cyan-4);
  --toggle-off-bg: #696D80;
  --toggle-knob: #F6F7F9;
  /* Tokenizado desde estilos inline de vistas (adaptado a dark) */
  --col-highlight-bg: rgba(0, 185, 228, 0.18);
  --icon-info: var(--cyan-2);
  /* tooltip informativo: cyan con el texto oscuro de light (#030615), más legible que blanco sobre cyan */
  --tooltip-bg: var(--btn-primary-bg);
  --tooltip-text: #030615;
  --dropzone-border: rgba(255, 255, 255, 0.14);
  --plane-tooltip-border: rgba(255, 255, 255, 0.2);
  --plane-tooltip-text-muted: rgba(230, 232, 235, 0.6);
  --plane-tag-bg: rgba(27, 27, 31, 0.85);
  --plane-tag-border: #e6e9ef;
  /* ============================================================
     COMPONENT OVERRIDES — solo reglas que el dark necesita
     reescribir (no se pueden resolver solo con tokens).
     ============================================================ */
  /* ---------- ICON & SVG NORMALIZATION ----------
     Los iconos del set propio son monocromos (#0D1D69) y en dark
     quedarían invisibles → se invierten a blanco. Las EXCEPCIONES
     de abajo conservan los iconos con color semántico o ya claros
     (puntos de estado, señales, *-blue/-red/-yellow, *white, etc.). */
  /* Logo */
}
body.dark-mode img[src*="logotipo.svg"] {
  filter: brightness(0) invert(1);
}
body.dark-mode .public-panels img[src*="logotipo.svg"] {
  filter: none;
}
body.dark-mode {
  /* Iconos monocromos → blanco (img del set propio + clases/SVG inline) */
}
body.dark-mode img[src*="/icons/"],
body.dark-mode .app-icon,
body.dark-mode .table-action,
body.dark-mode .arrow-icon,
body.dark-mode .nav-link img,
body.dark-mode .custom-select-arrow,
body.dark-mode .bootstrap-select .dropdown-toggle,
body.dark-mode .bootstrap-select .dropdown-toggle::after,
body.dark-mode .selectpicker,
body.dark-mode .ui-resizable-handle {
  filter: brightness(0) invert(1);
}
body.dark-mode {
  /* Hover cyan (--cyan-2 #63e4fd) en iconos <img> dentro de algo clicable.
     Un <img> no tiene `color`: el filtro tiñe el negro hasta #63e4fd (calculado,
     error < 1/255). Va ANTES de las excepciones a propósito: con el :hover
     dentro del :where() la especificidad queda igual que la de ellas, así que
     un icono con color propio (puntos, *-red, *white, darkmode/lightmode…)
     sigue ganando y no se tiñe. Fuera los botones rellenos cyan, donde un
     icono cyan desaparecería.
     Cubre lo mismo que la regla de blanco de arriba: el set de /icons/ y los
     .app-icon servidos desde /imgs/ (campana, ayuda, ticket…), que si no se
     quedaban en blanco. Lo clicable incluye [type=button]/[role=button] (el
     icono de menú móvil es un <i type="button">). Los logos no se tiñen.
     :is(img[src], img.app-icon) pesa (0,1,1), igual que las excepciones. */
}
body.dark-mode :where(:is(button, a, [type=button], [role=button]):not(:disabled, .disabled, .btn--primary, .ns-icon-btn--primary, .navbar-brand, .navbar-brand-mobile):hover) :is(img[src*="/icons/"], img.app-icon) {
  filter: brightness(0) saturate(100%) invert(77%) sepia(10%) saturate(2354%) hue-rotate(154deg) brightness(104%) contrast(98%);
}
body.dark-mode {
  /* Spinner de carga (spinner-sun.svg, monocromo #0D1D69) → cyan --cyan-4
     #00b9e4, el mismo --color-accent que ya usan los .spinner-border de
     Bootstrap. Antes se invertía a blanco con el resto de iconos. Va DESPUÉS
     del hover de arriba para ganarle en empate: un spinner dentro de un
     enlace no se aclara al pasar el ratón. Dentro de un botón relleno cyan
     sigue en blanco, que es lo único que se ve sobre ese fondo. */
}
body.dark-mode img.spinner-sun-img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(40%) saturate(6963%) hue-rotate(154deg) brightness(99%) contrast(101%);
}
body.dark-mode .btn--primary img.spinner-sun-img {
  filter: brightness(0) invert(1);
}
body.dark-mode {
  /* Excepciones: color semántico o ya claros → conservar tal cual
     (lista compartida con light: $icon-keep-color, arriba del todo) */
}
body.dark-mode img[src*=point], body.dark-mode img[src*=-blue], body.dark-mode img[src*=-red], body.dark-mode img[src*=-yellow], body.dark-mode img[src*=white], body.dark-mode img[src*=favicon], body.dark-mode img[src*=star], body.dark-mode img[src*="activity.svg"], body.dark-mode img[src*=goodsignal], body.dark-mode img[src*=checkblue], body.dark-mode img[src*=circlealert], body.dark-mode img[src*="error.svg"], body.dark-mode img[src*=wrong], body.dark-mode img[src*=warning-inverse], body.dark-mode img[src*=fluentwarning], body.dark-mode img[src*="fluentcellulardata.svg"], body.dark-mode img[src*=fluentcellulardata324], body.dark-mode img[src*=fluentcellularoff], body.dark-mode img[src*=stateon], body.dark-mode img[src*=stateorange], body.dark-mode img[src*=darkmode], body.dark-mode img[src*=lightmode], body.dark-mode img[src*=toggleon], body.dark-mode img[src*=toggleoff], body.dark-mode img[src*=batteryplugred], body.dark-mode img[src*=stepupcoming] {
  filter: none;
}
body.dark-mode {
  /* El .dropdown-toggle del selector de estado del mapa muestra en el valor
     seleccionado un punto de color (redpoint/yellowpoint/bluepoint). El filter:invert
     de arriba se aplica al toggle ENTERO y blanquea ese punto: el filtro del padre
     afecta a todo su subárbol y el filter:none del <img> (excepción de arriba) no lo
     revierte. Lo neutralizamos solo en este selector; el caret conserva su propio
     filtro vía .dropdown-toggle::after (regla de arriba). */
}
body.dark-mode .sensor_map_controls .bootstrap-select > .dropdown-toggle {
  filter: none;
}
body.dark-mode {
  /* Botón de texto (.btn--text, p. ej. Actualizar / Exportar datos de la ficha
     del nesmote): blanco en reposo y cyan al pasar el ratón, igual que el resto
     de iconos+texto clicables. --btn-text-color (#2bb0ed) no se toca: lo usan
     otros 9 componentes. El icono ya lo resuelven las reglas de .app-icon. */
}
body.dark-mode .btn--text:not(:disabled) {
  color: var(--text-primary);
}
body.dark-mode .btn--text:not(:disabled):hover, body.dark-mode .btn--text:not(:disabled):focus-visible, body.dark-mode .btn--text:not(:disabled):active {
  color: var(--icon-hover);
}
body.dark-mode {
  /* Buscadores: lupa gris (#94a3b8, --icon-secondary) en reposo y cyan
     (#00b9e4, --input-border-focus, el borde del input) al escribir. La de
     .buscador es SVG en línea y va por `color` (_table.scss): aquí solo se le
     quita el filtro de blanco. Las <img> (DropdownSelector, geolocalización)
     van por filtro; el selector pesa más que el blanco de .app-icon. */
}
body.dark-mode .buscador svg {
  filter: none;
}
body.dark-mode .dds__search .dds__search-icon,
body.dark-mode .geo_search_wrapper .geo_search_icon {
  filter: brightness(0) saturate(100%) invert(79%) sepia(32%) saturate(249%) hue-rotate(177deg) brightness(82%) contrast(69%);
  opacity: 1;
}
body.dark-mode .dds__search:focus-within .dds__search-icon,
body.dark-mode .geo_search_wrapper:focus-within .geo_search_icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(57%) saturate(2050%) hue-rotate(155deg) brightness(101%) contrast(101%);
}
body.dark-mode {
  /* Selector de organización de la barra superior (bootstrap-select, data-style
     "dropdown_navbar"). La regla de iconos de arriba aplica brightness(0)
     invert(1) a TODO .bootstrap-select .dropdown-toggle y a su ::after, y eso
     pintaba de blanco el texto y la flecha aunque el hover ya pone
     color: --text-link-hover (cyan). Aquí no hay icono que invertir: se quita
     el filtro y la flecha (chevron de bordes) sigue a `color`, así el texto y la
     flecha se ponen cyan juntos al pasar el ratón o con el desplegable abierto. */
}
body.dark-mode .bootstrap-select .dropdown-toggle.dropdown_navbar {
  filter: none;
}
body.dark-mode .bootstrap-select .dropdown-toggle.dropdown_navbar::after {
  filter: none;
  border-color: currentColor;
}
body.dark-mode {
  /* Tarjetas de tipo (.ns-type-card, wizard de informes): al pasar el ratón el
     título se pone cyan a juego con el icono, que ya lo tiñe la regla de hover
     de iconos. La descripción se queda en secundario. */
}
body.dark-mode .ns-type-card:not(:disabled):hover .ns-type-card__title {
  color: var(--icon-hover);
}
body.dark-mode {
  /* Tarjeta elegida: --bg-selected en dark es azul marino (#1e3a5f) y el borde
     izquierdo usaba --color-primary, que aquí es casi blanco — no se leía como
     "seleccionado". Mismo tinte cyan tenue que la fila seleccionada de
     ns_table_view (más abajo), con el acento cyan en borde, icono y título. */
  /* Opción elegida del modal de perfil de radio (_radio-health.scss): mismo tinte. */
}
body.dark-mode .radio-profile-option.custom-control.custom-radio .custom-control-input:checked + .custom-control-label {
  background: color-mix(in srgb, var(--cyan-4) 12%, transparent);
  border-color: var(--cyan-4);
}
body.dark-mode .ns-type-card.is-active {
  background: color-mix(in srgb, var(--cyan-4) 12%, transparent);
  border-color: color-mix(in srgb, var(--cyan-4) 40%, transparent);
  border-left-color: var(--cyan-4);
}
body.dark-mode .ns-type-card.is-active .ns-type-card__title {
  color: var(--icon-hover);
}
body.dark-mode .ns-type-card.is-active .ns-type-card__icon img {
  filter: brightness(0) saturate(100%) invert(77%) sepia(10%) saturate(2354%) hue-rotate(154deg) brightness(104%) contrast(98%);
}
body.dark-mode {
  /* ---------- BOTONES DE ICONO (.ns-icon-btn) ----------
     Icono blanco en reposo y cyan (--icon-hover) al pasar por encima. En light
     el hover solo pone fondo; aquí además cambia el icono. El botón base tomaba
     --btn-text-color (azul) en vez de --icon-color: en dark salía azulado.
     Quedan fuera los que tienen color propio: --primary (relleno), --favorite
     (gris/dorado) y el estado .active (relleno cyan). */
}
body.dark-mode .ns-icon-btn:not(.ns-icon-btn--primary, .ns-icon-btn--favorite, .ns-icon-btn--danger, .active),
body.dark-mode .ns-icon-btn--edit,
body.dark-mode .ns-icon-btn--copy,
body.dark-mode .ns-icon-btn--send,
body.dark-mode .ns-icon-btn--download,
body.dark-mode .ns-icon-btn--pause,
body.dark-mode .ns-icon-btn--history,
body.dark-mode .ns-icon-btn--secondary,
body.dark-mode .ns-icon-btn--bare {
  color: var(--icon-color);
}
body.dark-mode .ns-icon-btn:not(.ns-icon-btn--primary, .ns-icon-btn--favorite, .ns-icon-btn--danger, .active):not(:disabled, .disabled):hover, body.dark-mode .ns-icon-btn:not(.ns-icon-btn--primary, .ns-icon-btn--favorite, .ns-icon-btn--danger, .active):not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--edit:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--edit:not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--copy:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--copy:not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--send:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--send:not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--download:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--download:not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--pause:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--pause:not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--history:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--history:not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--secondary:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--secondary:not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--bare:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--bare:not(:disabled, .disabled):active {
  color: var(--icon-hover);
}
body.dark-mode {
  /* Eliminar: rojo error-500 siempre, no solo en hover. El hover añade el
     fondo rojo tenue de las alertas de error en lugar del gris azulado. */
}
body.dark-mode .ns-icon-btn--delete,
body.dark-mode .ns-icon-btn--danger {
  color: var(--btn-danger-text);
}
body.dark-mode .ns-icon-btn--delete:not(:disabled, .disabled):hover, body.dark-mode .ns-icon-btn--delete:not(:disabled, .disabled):active,
body.dark-mode .ns-icon-btn--danger:not(:disabled, .disabled):hover,
body.dark-mode .ns-icon-btn--danger:not(:disabled, .disabled):active {
  color: var(--btn-danger-text);
  background-color: var(--alert-error-bg);
}
body.dark-mode {
  /* ---------- SIDEBAR (vertical-nav) ----------
     Hover: icono + texto en cyan (--sidebar-accent-hover = --cyan-2), en todos
     los ítems — primer nivel, submenús (también los de backend, que en reposo
     van en rojo) y paneles favoritos. La regla genérica de arriba no alcanza
     a los iconos de assets/imgs/ (vnav_*, flechas nespra_*_arrow) ni toca el
     texto. Todos esos SVG son monocromos (#0D1D69), así que el filtro da el
     mismo cyan que el texto. */
}
body.dark-mode .vertical-nav .nav-link:hover {
  color: var(--sidebar-accent-hover);
}
body.dark-mode .vertical-nav .nav-link:hover > span,
body.dark-mode .vertical-nav .nav-link:hover > p {
  color: var(--sidebar-accent-hover);
}
body.dark-mode .vertical-nav .nav-link:hover > img {
  filter: brightness(0) saturate(100%) invert(77%) sepia(10%) saturate(2354%) hue-rotate(154deg) brightness(104%) contrast(98%);
}
body.dark-mode {
  /* ---------- VISTA DE TARJETAS (ns_table_view) ----------
     En light la tarjeta va en --bg-main (blanco) sobre la .card; en dark
     --bg-main (#1B1B1F) queda MÁS OSCURO que esa .card (4% de blanco sobre
     #15181D) y la tarjeta parece hundida. Aquí, un velo blanco del 6% sobre el
     contenedor: un paso más clara que la superficie que la contiene, como una
     superficie elevada. Fuera la fila de "sin datos", que sigue transparente, y
     la seleccionada, que conserva su tinte cyan (regla de abajo): el :has() de
     este :not() sube la especificidad por encima de la suya. */
}
body.dark-mode table.ns-table-view--cards tbody tr:not(.ns-table-view__row--empty, .ns-table-view__row--selected, :has(> td.dt-empty, > td.dataTables_empty)) {
  background-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode table.ns-table-view--cards tbody tr:not(.ns-table-view__row--empty, .ns-table-view__row--selected, :has(> td.dt-empty, > td.dataTables_empty)):hover, body.dark-mode table.ns-table-view--cards tbody tr:not(.ns-table-view__row--empty, .ns-table-view__row--selected, :has(> td.dt-empty, > td.dataTables_empty)):focus-within {
  background-color: rgba(255, 255, 255, 0.09);
}
body.dark-mode {
  /* ---------- FILA SELECCIONADA (ns_table_view) ----------
     --bg-selected en dark es un azul marino (#1e3a5f) que choca con el acento
     cyan del tema. Aquí, tinte cyan tenue en su lugar — solo para esta regla,
     el token lo comparten otros 20 sitios. Un punto más con hover para que la
     fila marcada siga respondiendo al ratón. */
}
body.dark-mode table.ns-table-view tbody tr.ns-table-view__row--selected {
  background-color: color-mix(in srgb, var(--cyan-4) 12%, transparent);
}
body.dark-mode table.ns-table-view tbody tr.ns-table-view__row--selected:hover {
  background-color: color-mix(in srgb, var(--cyan-4) 18%, transparent);
}
body.dark-mode {
  /* ---------- DATATABLES ---------- */
}
body.dark-mode table.dataTable thead th.dt-orderable-asc::after,
body.dark-mode table.dataTable thead th.dt-orderable-desc::after {
  filter: brightness(0) invert(1);
  opacity: 0.6;
}
body.dark-mode {
  /* ---------- HISTÓRICO DE DOWNLINKS (nesmote_config_dynamic) ----------
     La tabla se genera por JS con `.table` de Bootstrap (color de texto oscuro
     fijo) → invisible sobre el fondo dark. Forzar texto claro. */
}
body.dark-mode #downlink_history_table,
body.dark-mode #downlink_history_table th,
body.dark-mode #downlink_history_table td {
  color: var(--text-white);
}
body.dark-mode {
  /* ---------- LEAFLET (mapa — sin cambios, tal como estaba guardado) ---------- */
}
body.dark-mode .leaflet-popup-content-wrapper {
  background: rgba(20, 24, 30, 0.82);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.dark-mode .leaflet-popup-tip {
  background: rgba(20, 24, 30, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body.dark-mode {
  /* "×" de cerrar el popup: leaflet.css la pinta #0D1D69 en reposo y en hover,
     casi invisible sobre el fondo oscuro del popup. Blanco → cyan, como el
     resto de iconos. */
}
body.dark-mode .leaflet-container a.leaflet-popup-close-button {
  color: var(--icon-color);
}
body.dark-mode .leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--icon-hover);
}
body.dark-mode {
  /* Tarjetas del popup de clúster (dashboard / nesgate_info): la cabecera en
     hover tomaba --bg-selected, el azul marino #1e3a5f que choca con el acento
     cyan. Mismo tinte cyan tenue que la fila seleccionada de las tablas. */
}
body.dark-mode .map-popup__grid-card:hover .map-popup__grid-header {
  background: color-mix(in srgb, var(--cyan-4) 12%, transparent);
  color: var(--icon-hover);
}
body.dark-mode .map-popup__grid-card:hover .map-popup__grid-header .map-popup__icon {
  filter: brightness(0) saturate(100%) invert(77%) sepia(10%) saturate(2354%) hue-rotate(154deg) brightness(104%) contrast(98%);
}
body.dark-mode .map_overview .leaflet-tile-pane {
  filter: brightness(1.25) contrast(1.15) saturate(0.85);
}
body.dark-mode .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(85%) grayscale(30%) saturate(20%) grayscale(50%);
}
body.dark-mode {
  /* ---------- FORM CONTROLS ---------- */
}
body.dark-mode select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  background-color: var(--input-bg);
  background-image: url("../../assets/icons/directiondownwhite.svg");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px 18px;
  cursor: pointer;
}
body.dark-mode {
  /* Selectpicker / bootstrap-select: la flecha de fondo (directiondown.svg) no
     la alcanza la inversión global de <img>, así que se cambia a la variante
     blanca en dark (cerrado ⌄ y abierto ⌃). */
}
body.dark-mode .selectpicker,
body.dark-mode .bootstrap-select .dropdown-toggle {
  background-image: url("../../assets/icons/directiondownwhite.svg");
}
body.dark-mode .bootstrap-select.show > .dropdown-toggle {
  background-image: url("../../assets/icons/directionupwhite.svg");
}
body.dark-mode {
  /* Filter-multi-select (checkboxes): misma flecha de fondo sin swap al abrir. */
}
body.dark-mode .viewbar.dropdown-toggle {
  background-image: url("../../assets/icons/directiondownwhite.svg");
}
body.dark-mode {
  /* SelectBox / overSelect (multiselect con checkboxes, p.ej. users): flecha
     de fondo con swap al abrir (⌄ → ⌃) → variantes blancas en dark. */
}
body.dark-mode .overSelect {
  background-image: url("../../assets/icons/directiondownwhite.svg");
}
body.dark-mode .selectBox.is-open .overSelect {
  background-image: url("../../assets/icons/directionupwhite.svg");
}
body.dark-mode {
  /* ---------- DATERANGEPICKER ----------
     Relleno del rango seleccionado → tinte cian (coherente con los
     extremos cian). Solo dark; en light mantiene --bg-selected. */
}
body.dark-mode .daterangepicker td.in-range::before,
body.dark-mode .ns-daterangepicker td.in-range::before {
  background: rgba(0, 185, 228, 0.18);
}

/*_typography-legacy.scss */
.title_device_info {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-primary);
  padding-left: 0;
}

.data_range_text {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  padding-left: 0;
}

/* MUTED / SECONDARY */
.text-muted {
  color: var(--text-muted);
}

/* LABELS */
.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* TIPOGRAFÍA NESPRA FIGMA */
/* RESET TIPOGRÁFICO GLOBAL */
body {
  font-family: var(--ns-font);
  font-size: var(--ns-b1-size);
  line-height: var(--ns-b1-line);
  font-weight: var(--ns-b1-weight);
  color: var(--text-primary);
}

/* Elementos base */
p {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: inherit;
}

/* BASE TEXT */
.ns-text, .ns-ovl, .ns-cap, .text-muted,
.small, .ns-btn, .ns-body, .ns-b2, .ns-inline-text, .form-check-label, .ns-loading, .ns-b1, .ns-subtitle, .ns-s2, .ns-s1, .title_text_inventory,
.card-title, .ns-section-title, .ns-heading, .ns-h6, .ns-h5, .ns-h4, .ns-h3, .ns-h2, .ns-h1 {
  font-family: var(--ns-font);
  margin: 0;
}

/* Headings */
/* BASE OPCIONAL (RECOMENDADO)*/
.ns-heading, .ns-h6, .ns-h5, .ns-h4, .ns-h3, .ns-h2, .ns-h1 {
  color: var(--text-heading);
}

.ns-h1 {
  font-size: var(--ns-h1-size);
  line-height: var(--ns-h1-line);
  font-weight: var(--ns-h1-weight);
  letter-spacing: var(--ns-h1-ls);
}

.ns-h2 {
  font-size: var(--ns-h2-size);
  line-height: var(--ns-h2-line);
  font-weight: var(--ns-h2-weight);
  letter-spacing: var(--ns-h2-ls);
}

.ns-h3 {
  font-size: var(--ns-h3-size);
  line-height: var(--ns-h3-line);
  font-weight: var(--ns-h3-weight);
  letter-spacing: var(--ns-h3-ls);
}

.ns-h4 {
  font-size: var(--ns-h4-size);
  line-height: var(--ns-h4-line);
  font-weight: var(--ns-h4-weight);
  letter-spacing: var(--ns-h4-ls);
}

.ns-h5 {
  font-size: var(--ns-h5-size);
  line-height: var(--ns-h5-line);
  font-weight: var(--ns-h5-weight);
  letter-spacing: var(--ns-h5-ls);
}

.ns-h6 {
  font-size: var(--ns-h6-size);
  line-height: var(--ns-h6-line);
  font-weight: var(--ns-h6-weight);
  letter-spacing: var(--ns-h6-ls);
  margin-bottom: 5px;
}

/* BASE (opcional recomendado) */
.ns-subtitle, .ns-s2, .ns-s1, .title_text_inventory,
.card-title, .ns-section-title {
  color: var(--color-primary);
}

.ns-s1, .title_text_inventory,
.card-title, .ns-section-title {
  font-size: var(--ns-s1-size);
  line-height: var(--ns-s1-line);
  font-weight: var(--ns-s1-weight);
  letter-spacing: var(--ns-s1-ls);
}

.ns-s2 {
  font-size: var(--ns-s2-size);
  line-height: var(--ns-s2-line);
  font-weight: var(--ns-s2-weight);
  letter-spacing: var(--ns-s2-ls);
}

/* Body */
.ns-body, .ns-b2, .ns-inline-text, .form-check-label, .ns-loading, .ns-b1 {
  color: var(--text-primary);
}

.ns-b1 {
  font-size: var(--ns-b1-size);
  line-height: var(--ns-b1-line);
  font-weight: var(--ns-b1-weight);
  letter-spacing: var(--ns-b1-ls);
}

.ns-b2, .ns-inline-text, .form-check-label, .ns-loading {
  font-size: var(--ns-b2-size);
  line-height: var(--ns-b2-line);
  font-weight: var(--ns-b2-weight);
  letter-spacing: var(--ns-b2-ls);
}

/* BUTTON TEXT */
.ns-btn {
  font-size: var(--ns-btn-size);
  line-height: var(--ns-btn-line);
  font-weight: var(--ns-btn-weight);
  letter-spacing: var(--ns-btn-ls);
  color: var(--btn-primary-text);
  text-transform: none;
}

/* CAPTION */
.ns-cap, .text-muted,
.small {
  font-size: var(--ns-cap-size);
  line-height: var(--ns-cap-line);
  font-weight: var(--ns-cap-weight);
  letter-spacing: var(--ns-cap-ls);
  color: var(--text-secondary);
}

.ns-ovl {
  font-size: var(--ns-ovl-size);
  line-height: var(--ns-ovl-line);
  font-weight: var(--ns-ovl-weight);
  letter-spacing: var(--ns-ovl-ls);
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Utilidades */
.ns-loading {
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.ns-text-italic {
  font-style: italic;
}

.ns-icon-info {
  margin-left: 10px;
  color: var(--icon-active);
}

/* Form label */
.ns-label, .label-help, .modal_form_label,
.label_actuation {
  font-family: var(--ns-font);
  font-size: var(--ns-label-size);
  line-height: var(--ns-label-line);
  font-weight: var(--ns-label-weight);
  letter-spacing: var(--ns-label-ls);
  color: var(--text-primary);
  display: block;
  margin-bottom: 6px;
}

.ns-helper-text {
  font-family: var(--ns-font);
  font-size: var(--ns-helper-size);
  line-height: var(--ns-helper-line);
  font-weight: var(--ns-helper-weight);
  letter-spacing: var(--ns-helper-ls);
  color: var(--text-secondary);
  margin-top: 4px;
}

.ns-helper-text--warning {
  color: var(--alert-warning-text);
}

/* =========================
   LEGACY → NESPRA BRIDGE
========================= */
.ns-section-title {
  font-size: var(--ns-fs-19);
  font-weight: var(--ns-w-semibold);
  color: var(--color-primary);
  margin: 0;
  padding-bottom: 8px;
}

/* Config de dispositivo (árbol del catálogo): una celda de la tabla de una `list` cuyo
   `visible_when` no se cumple no se puede ocultar sin descuadrar la fila, así que se atenúa. */
.ns-field-hidden {
  opacity: 0.35;
}

/* Labels */
/* Titles */
/* Small text */
/* Checkbox labels */
.label-help {
  color: var(--color-primary);
}

.ns-inline-text {
  padding-left: 8px;
}

/* NESPRA — TYPOGRAPHY TOKENS */
:root {
  /* ---------- Base tokens ---------- */
  /* Font family */
  --ns-font: 'Inter', sans-serif;
  /* Font weights */
  --ns-w-light: 300;
  --ns-w-regular: 400;
  --ns-w-medium: 500;
  --ns-w-semibold: 600;
  /* Font sizes */
  --ns-fs-93: 93px;
  --ns-fs-58: 58px;
  --ns-fs-47: 47px;
  --ns-fs-33: 33px;
  --ns-fs-23: 23px;
  --ns-fs-19: 19px;
  --ns-fs-16: 16px;
  --ns-fs-14: 14px;
  --ns-fs-12: 12px;
  --ns-fs-10: 10px;
  /* Line heights */
  --ns-lh-100: 100px;
  --ns-lh-64: 64px;
  --ns-lh-52: 52px;
  --ns-lh-40: 40px;
  --ns-lh-28: 28px;
  --ns-lh-24: 24px;
  --ns-lh-20: 20px;
  --ns-lh-16: 16px;
  /* Letter spacing */
  --ns-ls-neg-15: -1.5px;
  --ns-ls-neg-05: -0.5px;
  --ns-ls-0: 0;
  --ns-ls-015: 0.15px;
  --ns-ls-025: 0.25px;
  --ns-ls-03: 0.3px;
  --ns-ls-04: 0.4px;
  --ns-ls-125: 1.25px;
  --ns-ls-15: 1.5px;
  /* ---------- Semantic tokens ---------- */
  /* Headings */
  --ns-h1-size: clamp(32px, 5vw, 93px);
  --ns-h1-line: var(--ns-lh-100);
  --ns-h1-weight: var(--ns-w-semibold);
  --ns-h1-ls: var(--ns-ls-neg-15);
  --ns-h2-size: clamp(28px, 4vw, 58px);
  --ns-h2-line: var(--ns-lh-64);
  --ns-h2-weight: var(--ns-w-semibold);
  --ns-h2-ls: var(--ns-ls-neg-05);
  --ns-h3-size: var(--ns-fs-47);
  --ns-h3-line: var(--ns-lh-52);
  --ns-h3-weight: var(--ns-w-semibold);
  --ns-h3-ls: var(--ns-ls-0);
  --ns-h4-size: var(--ns-fs-33);
  --ns-h4-line: var(--ns-lh-40);
  --ns-h4-weight: var(--ns-w-semibold);
  --ns-h4-ls: var(--ns-ls-025);
  --ns-h5-size: var(--ns-fs-23);
  --ns-h5-line: var(--ns-lh-28);
  --ns-h5-weight: var(--ns-w-semibold);
  --ns-h5-ls: var(--ns-ls-0);
  --ns-h6-size: var(--ns-fs-19);
  --ns-h6-line: var(--ns-lh-24);
  --ns-h6-weight: var(--ns-w-semibold);
  --ns-h6-ls: var(--ns-ls-015);
  /* Subtitles */
  --ns-s1-size: var(--ns-fs-16);
  --ns-s1-line: var(--ns-lh-24);
  --ns-s1-weight: var(--ns-w-semibold);
  --ns-s1-ls: var(--ns-ls-015);
  --ns-s2-size: var(--ns-fs-14);
  --ns-s2-line: var(--ns-lh-20);
  --ns-s2-weight: var(--ns-w-semibold);
  --ns-s2-ls: var(--ns-ls-015);
  /* Body */
  --ns-b1-size: var(--ns-fs-16);
  --ns-b1-line: var(--ns-lh-24);
  --ns-b1-weight: var(--ns-w-regular);
  --ns-b1-ls: var(--ns-ls-015);
  --ns-b2-size: var(--ns-fs-14);
  --ns-b2-line: var(--ns-lh-20);
  --ns-b2-weight: var(--ns-w-regular);
  --ns-b2-ls: var(--ns-ls-025);
  /* Button */
  --ns-btn-size: var(--ns-fs-14);
  --ns-btn-line: var(--ns-lh-16);
  --ns-btn-weight: var(--ns-w-medium);
  --ns-btn-ls: var(--ns-ls-03);
  /* Caption / Overline */
  --ns-cap-size: var(--ns-fs-12);
  --ns-cap-line: var(--ns-lh-16);
  --ns-cap-weight: var(--ns-w-regular);
  --ns-cap-ls: var(--ns-ls-04);
  --ns-ovl-size: var(--ns-fs-10);
  --ns-ovl-line: var(--ns-lh-16);
  --ns-ovl-weight: var(--ns-w-regular);
  --ns-ovl-ls: var(--ns-ls-125);
  /* NEW: UI labels */
  --ns-label-size: 13px;
  --ns-label-line: 18px;
  --ns-label-weight: 500;
  --ns-label-ls: 0.3px;
  /* NEW: UI helper text */
  --ns-helper-size: 12px;
  --ns-helper-line: 16px;
  --ns-helper-weight: 400;
  --ns-helper-ls: 0.25px;
}

.modal_cancel_button, .modal_confirm_button, .btn--selector, .btn--danger, .btn--text, .btn--secondary, .btn--primary-white, .btn--primary {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal_cancel_button:focus-visible, .modal_confirm_button:focus-visible, .btn--selector:focus-visible, .btn--danger:focus-visible, .btn--text:focus-visible, .btn--secondary:focus-visible, .btn--primary-white:focus-visible, .btn--primary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}
.modal_cancel_button:disabled, .modal_confirm_button:disabled, .btn--selector:disabled, .btn--danger:disabled, .btn--text:disabled, .btn--secondary:disabled, .btn--primary-white:disabled, .btn--primary:disabled {
  cursor: not-allowed;
}

.modal_confirm_button, .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-width: 2px;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.modal_confirm_button:hover, .btn--primary:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}
.modal_confirm_button:active, .btn--primary:active {
  background-color: var(--btn-primary-bg-pressed);
  border-color: var(--btn-primary-bg-pressed);
}
.modal_confirm_button:disabled, .btn--primary:disabled {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  opacity: 0.4;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: none !important;
}

.modal_cancel_button, .btn--primary-white {
  border-width: 1px;
  background-color: var(--bg-main);
  color: var(--btn-primary-white-text);
  border-color: transparent;
}
.modal_cancel_button:hover, .btn--primary-white:hover {
  background-color: var(--ucp-btn-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-white-text);
}
.modal_cancel_button:active, .btn--primary-white:active {
  background-color: var(--btn-primary-white-bg-pressed);
}
.modal_cancel_button:disabled, .btn--primary-white:disabled {
  opacity: 0.5;
}

.btn--secondary {
  border-width: 1px;
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-primary-white-border);
}
.btn--secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  border-color: var(--btn-primary-white-border);
}
.btn--secondary:active {
  background-color: var(--btn-secondary-bg-pressed);
}
.btn--secondary:disabled {
  opacity: 0.5;
}

.btn--text {
  background-color: var(--btn-text-bg);
  color: var(--btn-text-color);
}
.btn--text:hover {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-primary-white-border);
  color: var(--btn-text-color);
}
.btn--text:active {
  background-color: var(--btn-text-bg-pressed);
  border-color: transparent;
  color: var(--btn-text-color);
}
.btn--text:disabled {
  opacity: 0.5;
}

.btn--danger {
  border-width: 1px;
  background-color: transparent;
  color: var(--btn-danger-text);
  border-color: var(--btn-danger-border);
}
.btn--danger:hover {
  background-color: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-border);
  color: var(--btn-primary-text);
}
.btn--danger:active {
  background-color: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-border);
  color: var(--btn-primary-text);
}
.btn--danger:disabled {
  opacity: 0.5;
}

.btn--selector {
  border-width: 1px;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 500;
  background-color: var(--btn-text-bg);
  color: var(--btn-text-color);
  border-color: transparent;
}
.btn--selector:hover {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-text-color);
}
.btn--selector:active {
  background-color: var(--btn-text-bg-pressed);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-text-color);
}
.btn--selector:disabled {
  opacity: 0.5;
}

.btn:has(.btn__icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.delete_button,
.datasource_button,
.delete_stop {
  padding-left: 3px;
  padding-right: 3px;
}

.button-link--small, .button-link,
.table_link {
  display: inline;
  font-family: var(--ns-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  text-decoration: underline;
  color: var(--btn-text-color);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.button-link--small:hover, .button-link:hover,
.table_link:hover {
  color: var(--btn-primary-bg-hover);
}
.button-link--small:active, .button-link:active,
.table_link:active {
  color: var(--btn-primary-bg-pressed);
}
.button-link--small:focus-visible, .button-link:focus-visible,
.table_link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-focus-ring, rgba(13, 29, 105, 0.25));
  border-radius: 2px;
}
.button-link--small:disabled, .button-link:disabled,
.table_link:disabled, .disabled.button-link--small, .disabled.button-link,
.disabled.table_link {
  color: var(--text-muted);
  cursor: not-allowed;
  text-decoration: underline;
}

.button-link--small {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  font-weight: 400;
}

#add_edit_buttons_modbus {
  margin-top: 12px;
}

.btn-primary {
  background-color: var(--blue-5);
  border-color: var(--blue-5);
}

.btn-primary:hover {
  background-color: var(--blue-3);
  border-color: var(--blue-3);
}

.btn-info,
.btn-info:hover,
.btn-info:active,
.btn-info:visited {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.icon_button {
  font-weight: 600;
  border-width: 1px;
  border-radius: 20px;
  border-color: none !important;
  color: var(--btn-primary-bg);
  background-color: var(--bg-main);
}

.icon_button:hover {
  background-color: var(--sidebar-bg-hover);
}

.btn-group {
  display: inline-flex;
}

.ns-toggle-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
  vertical-align: middle;
}

.ns-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  color: var(--btn-toggle-text);
  background-color: var(--btn-toggle-bg);
  border: 1px solid var(--btn-toggle-border);
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.ns-toggle:hover:not(:disabled) {
  position: relative;
  z-index: 1;
  background-color: var(--btn-toggle-hover);
  color: var(--btn-secondary-text-hover);
}
.ns-toggle.is-active {
  position: relative;
  z-index: 1;
  background-color: var(--btn-toggle-active);
  color: var(--btn-toggle-text);
  font-weight: 600;
}
.ns-toggle:focus-visible {
  position: relative;
  z-index: 2;
  outline: none;
  box-shadow: none;
}
.ns-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (min-width: 576px) {
  .ns-toggle-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .ns-toggle-group {
    display: inline-flex;
    align-items: stretch;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    gap: 0;
    border: 1px solid var(--btn-toggle-border);
    border-radius: 8px;
    overflow: hidden;
  }
  .ns-toggle {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 7px 12px;
    border: 0;
    border-right: 1px solid var(--btn-toggle-border);
    border-radius: 0;
    white-space: normal;
  }
  .ns-toggle:last-child {
    border-right: 0;
  }
}
.ns-weekday-toggle {
  display: flex;
  gap: 8px;
}

.ns-weekday-toggle__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-family: var(--ns-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ns-weekday-toggle__btn:hover {
  border-color: var(--text-muted);
}

.ns-weekday-toggle__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--btn-primary-text);
}

#container_upload_image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.more-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--btn-glass-border);
  background: var(--btn-glass-bg);
  cursor: pointer;
  color: var(--btn-glass-text);
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.25px;
  backdrop-filter: blur(4px);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.more-info-button:hover {
  background: var(--btn-glass-bg-hover);
  border-color: var(--btn-glass-border-hover);
  color: var(--btn-glass-text-hover);
  box-shadow: 0 0 12px var(--btn-glass-shadow-hover);
  transform: translateY(-1px);
}

.ns-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--ns-icon, none) center/contain no-repeat;
  mask: var(--ns-icon, none) center/contain no-repeat;
}

.ns-icon--delete {
  --ns-icon: url("../../assets/icons/delete.svg");
}

.ns-icon--edit {
  --ns-icon: url("../../assets/icons/edit.svg");
}

.ns-icon--copy {
  --ns-icon: url("../../assets/icons/duplicate.svg");
}

.ns-icon--send {
  --ns-icon: url("../../assets/icons/send.svg");
}

.ns-icon--download {
  --ns-icon: url("../../assets/icons/download.svg");
}

.ns-icon--check {
  --ns-icon: url("../../assets/icons/check.svg");
}

.ns-icon--check-circle {
  --ns-icon: url("../../assets/icons/check-circle-filled.svg");
}

.ns-icon--close {
  --ns-icon: url("../../assets/icons/close.svg");
}

.ns-icon--orderlist {
  --ns-icon: url("../../assets/icons/orderlist.svg");
}

.ns-icon--ordercards {
  --ns-icon: url("../../assets/icons/ordercards.svg");
}

.ns-icon--filters {
  --ns-icon: url("../../assets/icons/filters.svg");
}

.ns-icon--add {
  --ns-icon: url("../../assets/icons/addplus.svg");
}

.ns-icon--warning {
  --ns-icon: url("../../assets/icons/fluentwarning.svg");
}

.ns-icon--alert {
  --ns-icon: url("../../assets/icons/fluentwarning.svg");
}

.ns-icon--alarm {
  --ns-icon: url("../../assets/icons/error.svg");
}

.ns-icon--chevron-down {
  --ns-icon: url("../../assets/icons/directiondown.svg");
  transition: transform 0.15s ease;
}

[aria-expanded=true] > .ns-icon--chevron-down {
  transform: rotate(180deg);
}

.ns-icon--clock {
  --ns-icon: url("../../assets/icons/timeclock.svg");
}

.ns-icon.ns-icon--sm,
.ns-icon-btn .ns-icon.ns-icon--sm {
  width: 16px;
  height: 16px;
}

.ns-icon--shield {
  --ns-icon: url("../../assets/icons/shield.svg");
}

.ns-icon--key {
  --ns-icon: url("../../assets/icons/key.svg");
}

.ns-icon--globe {
  --ns-icon: url("../../assets/icons/fluentglobe.svg");
}

.ns-icon--mail-search {
  --ns-icon: url("../../assets/icons/mail-search.svg");
}

.ns-icon--plug {
  --ns-icon: url("../../assets/icons/fluentplugdisconnected.svg");
}

.ns-icon--information {
  --ns-icon: url("../../assets/icons/information.svg");
}

.ns-icon--preferences {
  --ns-icon: url("../../assets/icons/preferences.svg");
}

.ns-icon--editprofile {
  --ns-icon: url("../../assets/icons/editprofile.svg");
}

.ns-icon--building {
  --ns-icon: url("../../assets/icons/fluentbuilding.svg");
}

.ns-icon--lock {
  --ns-icon: url("../../assets/icons/lock.svg");
}

.ns-icon--user {
  --ns-icon: url("../../assets/icons/user.svg");
}

.ns-icon-btn--favorite, .ns-icon-btn--copy,
.ns-icon-btn--send,
.ns-icon-btn--download,
.ns-icon-btn--pause,
.ns-icon-btn--history,
.ns-icon-btn--location, .ns-icon-btn--edit, .ns-icon-btn--delete, .ns-icon-btn--bare, .ns-icon-btn--secondary, .ns-icon-btn--primary, .ns-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--btn-text-color);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ns-icon-btn--favorite .ns-icon, .ns-icon-btn--copy .ns-icon,
.ns-icon-btn--send .ns-icon,
.ns-icon-btn--download .ns-icon,
.ns-icon-btn--pause .ns-icon,
.ns-icon-btn--history .ns-icon,
.ns-icon-btn--location .ns-icon, .ns-icon-btn--edit .ns-icon, .ns-icon-btn--delete .ns-icon, .ns-icon-btn--bare .ns-icon, .ns-icon-btn--secondary .ns-icon, .ns-icon-btn--primary .ns-icon, .ns-icon-btn .ns-icon,
.ns-icon-btn--favorite img,
.ns-icon-btn--copy img,
.ns-icon-btn--send img,
.ns-icon-btn--download img,
.ns-icon-btn--pause img,
.ns-icon-btn--history img,
.ns-icon-btn--location img,
.ns-icon-btn--edit img,
.ns-icon-btn--delete img,
.ns-icon-btn--bare img,
.ns-icon-btn--secondary img,
.ns-icon-btn--primary img,
.ns-icon-btn img,
.ns-icon-btn--favorite svg,
.ns-icon-btn--copy svg,
.ns-icon-btn--send svg,
.ns-icon-btn--download svg,
.ns-icon-btn--pause svg,
.ns-icon-btn--history svg,
.ns-icon-btn--location svg,
.ns-icon-btn--edit svg,
.ns-icon-btn--delete svg,
.ns-icon-btn--bare svg,
.ns-icon-btn--secondary svg,
.ns-icon-btn--primary svg,
.ns-icon-btn svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.ns-icon-btn--favorite:disabled, .ns-icon-btn--copy:disabled,
.ns-icon-btn--send:disabled,
.ns-icon-btn--download:disabled,
.ns-icon-btn--pause:disabled,
.ns-icon-btn--history:disabled,
.ns-icon-btn--location:disabled, .ns-icon-btn--edit:disabled, .ns-icon-btn--delete:disabled, .ns-icon-btn--bare:disabled, .ns-icon-btn--secondary:disabled, .ns-icon-btn--primary:disabled, .ns-icon-btn:disabled, .disabled.ns-icon-btn--favorite, .disabled.ns-icon-btn--copy,
.disabled.ns-icon-btn--send,
.disabled.ns-icon-btn--download,
.disabled.ns-icon-btn--pause,
.disabled.ns-icon-btn--history,
.disabled.ns-icon-btn--location, .disabled.ns-icon-btn--edit, .disabled.ns-icon-btn--delete, .disabled.ns-icon-btn--bare, .disabled.ns-icon-btn--secondary, .disabled.ns-icon-btn--primary, .disabled.ns-icon-btn {
  opacity: 0.4;
  cursor: not-allowed;
}
.ns-icon-btn--favorite:focus-visible, .ns-icon-btn--copy:focus-visible,
.ns-icon-btn--send:focus-visible,
.ns-icon-btn--download:focus-visible,
.ns-icon-btn--pause:focus-visible,
.ns-icon-btn--history:focus-visible,
.ns-icon-btn--location:focus-visible, .ns-icon-btn--edit:focus-visible, .ns-icon-btn--delete:focus-visible, .ns-icon-btn--bare:focus-visible, .ns-icon-btn--secondary:focus-visible, .ns-icon-btn--primary:focus-visible, .ns-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-focus-ring, rgba(13, 29, 105, 0.25));
}

.ns-icon-btn:hover {
  background-color: var(--sidebar-bg-hover);
}
.ns-icon-btn:active {
  background-color: var(--btn-text-bg-pressed);
}
.ns-icon-btn.active {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.ns-icon-btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.ns-icon-btn--primary:hover {
  background-color: var(--btn-primary-bg-hover);
}
.ns-icon-btn--primary:active {
  background-color: var(--btn-primary-bg-pressed);
}
.ns-icon-btn--primary:disabled, .ns-icon-btn--primary.disabled {
  background-color: var(--btn-primary-bg-pressed);
}

.ns-icon-btn--secondary {
  border: 1px solid var(--btn-primary-white-border);
}
.ns-icon-btn--secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}
.ns-icon-btn--secondary:active {
  background-color: var(--btn-text-bg-pressed);
  border-color: var(--btn-primary-bg-pressed);
}

.ns-icon-btn--sm {
  width: 24px;
  height: 24px;
  padding: 3px;
}
.ns-icon-btn--sm::before,
.ns-icon-btn--sm .ns-icon,
.ns-icon-btn--sm img,
.ns-icon-btn--sm svg {
  width: 18px;
  height: 18px;
}

.ns-icon-btn--bare {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 0;
}
.ns-icon-btn--bare:hover, .ns-icon-btn--bare:active {
  background-color: transparent;
}

.ns-icon-btn--delete {
  color: var(--icon-color);
}
.ns-icon-btn--delete::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("../../assets/icons/delete.svg") center/contain no-repeat;
  mask: url("../../assets/icons/delete.svg") center/contain no-repeat;
}
.ns-icon-btn--delete:hover {
  background-color: var(--btn-secondary-bg-hover);
  color: var(--btn-danger-text);
}
.ns-icon-btn--delete:active {
  background-color: var(--btn-text-bg-pressed);
  color: var(--btn-danger-text);
}

.ns-icon-btn--edit {
  color: var(--icon-color);
}
.ns-icon-btn--edit::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("../../assets/icons/edit.svg") center/contain no-repeat;
  mask: url("../../assets/icons/edit.svg") center/contain no-repeat;
}
.ns-icon-btn--edit:hover {
  background-color: var(--btn-secondary-bg-hover);
}
.ns-icon-btn--edit:active {
  background-color: var(--btn-text-bg-pressed);
}

.ns-icon-btn--copy,
.ns-icon-btn--send,
.ns-icon-btn--download,
.ns-icon-btn--pause,
.ns-icon-btn--history,
.ns-icon-btn--location {
  color: var(--icon-color);
}
.ns-icon-btn--copy::before,
.ns-icon-btn--send::before,
.ns-icon-btn--download::before,
.ns-icon-btn--pause::before,
.ns-icon-btn--history::before,
.ns-icon-btn--location::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--ns-icon) center/contain no-repeat;
  mask: var(--ns-icon) center/contain no-repeat;
}
.ns-icon-btn--copy:hover,
.ns-icon-btn--send:hover,
.ns-icon-btn--download:hover,
.ns-icon-btn--pause:hover,
.ns-icon-btn--history:hover,
.ns-icon-btn--location:hover {
  background-color: var(--btn-secondary-bg-hover);
}
.ns-icon-btn--copy:active,
.ns-icon-btn--send:active,
.ns-icon-btn--download:active,
.ns-icon-btn--pause:active,
.ns-icon-btn--history:active,
.ns-icon-btn--location:active {
  background-color: var(--btn-text-bg-pressed);
}

.ns-icon-btn--copy {
  --ns-icon: url("../../assets/icons/duplicate.svg");
}

.ns-icon-btn--send {
  --ns-icon: url("../../assets/icons/send.svg");
}

.ns-icon-btn--download {
  --ns-icon: url("../../assets/icons/download.svg");
}

.ns-icon-btn--pause {
  --ns-icon: url("../../assets/icons/pause.svg");
}

.ns-icon-btn--history {
  --ns-icon: url("../../assets/icons/timeclock.svg");
}

.ns-icon-btn--location {
  --ns-icon: url("../../assets/icons/fluentlocation.svg");
}

.ns-icon-btn--favorite {
  color: var(--icon-favorite-off);
  --ns-icon: url("../../assets/icons/star-outline.svg");
}
.ns-icon-btn--favorite::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--ns-icon) center/contain no-repeat;
  mask: var(--ns-icon) center/contain no-repeat;
}
.ns-icon-btn--favorite:hover {
  background-color: var(--btn-secondary-bg-hover);
}
.ns-icon-btn--favorite:active {
  background-color: var(--btn-text-bg-pressed);
}
.ns-icon-btn--favorite.is-active {
  color: var(--icon-favorite-active);
  --ns-icon: url("../../assets/icons/star-active.svg");
}

.ns-icon-btn--danger {
  color: var(--icon-color);
}
.ns-icon-btn--danger:hover, .ns-icon-btn--danger:active {
  color: var(--btn-danger-text);
}

/*Desym System NESPRA */
.ns-daterangepicker {
  --dp-text: var(--text-primary);
  --dp-text-muted: var(--text-muted);
  --dp-hover: var(--bg-hover);
  --dp-range: var(--bg-selected);
  --dp-primary: var(--btn-primary-bg);
  --dp-primary-hover: var(--btn-primary-bg-hover);
  --dp-primary-text: var(--btn-primary-text);
  --dp-input-bg: var(--input-bg);
  --dp-input-border: var(--input-border-default);
  --dp-input-text: var(--input-text);
  --dp-divider: var(--border-default);
}

.footer_public_page {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--bg-main);
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--divider-color);
  font-size: 12px;
  font-family: var(--ns-font);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 16px;
  letter-spacing: 0.4px;
  word-wrap: break-word;
  z-index: 1000;
}

.footer_public_content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}

.footer_public_content .org_logo {
  height: 22px;
  vertical-align: middle;
}

.footer_public_content span,
.footer_public_content span * {
  font-size: 12px;
  font-family: var(--ns-font);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.4px;
  word-wrap: break-word;
}

.a {
  color: var(--blue-5);
  text-decoration: underline;
}

.footer_public_content span,
.footer_public_content span:not(:has(a)) {
  color: var(--text-muted);
}

.span:has(a) {
  color: var(--blue-5);
}

.titlepanels {
  justify-content: flex-end;
  color: var(--btn-text-color);
}

.logopanels {
  height: 26px;
  max-width: 120px;
  vertical-align: middle;
}

#org_logo_row, #dashboard_name_row {
  font-size: 13px;
  padding: 10px;
  color: var(--text-primary);
  white-space: nowrap;
  background-color: var(--bg-main);
}

body:not(.tv-mode) #org_logo_row, body:not(.tv-mode) #dashboard_name_row {
  white-space: normal;
  overflow-wrap: anywhere;
}

#last_refresh_text,
#last_refresh_time {
  font-size: 12px;
  color: var(--text-muted);
}

#go_fullscreen {
  cursor: pointer;
}

#fullscreen_div::backdrop {
  background-color: var(--bg-fullscreen) !important;
}

.plane-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-widget .card-body.plane-widget {
  overflow: hidden;
}

.plane-frame {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  container-type: size;
}

.plane-stage {
  position: relative;
  margin: auto;
  container-type: size;
  aspect-ratio: var(--img-w, 3)/var(--img-h, 2);
  width: 100%;
  width: min(100cqw, 100cqh * var(--img-w, 3) / var(--img-h, 2));
}

.plane-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.image-preview-container.has-plane {
  position: relative;
  display: flex;
  height: auto;
  border: 2px dashed var(--glass-border);
  border-radius: 5px;
  box-sizing: border-box;
  overflow: visible;
}
.image-preview-container.has-plane.upload-error {
  outline: 2px solid var(--btn-danger-border);
  outline-offset: 2px;
}

.image-preview-container.has-plane .plane-stage {
  width: 100%;
}

.plane-editor:fullscreen {
  width: 100%;
  height: 100%;
  background: var(--bg-fullscreen);
}

.plane-editor:fullscreen .image-preview-container {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.plane-editor:fullscreen .image-preview-container.has-plane {
  container-type: size;
}
.plane-editor:fullscreen .image-preview-container.has-plane .plane-stage {
  width: min(100cqw, 100cqh * var(--img-w, 3) / var(--img-h, 2));
}

.plane-tooltip {
  position: relative;
  background-color: var(--bg-main);
  border: 1px solid var(--plane-tooltip-border);
}

.plane-tooltip__title {
  color: var(--text-primary);
}

.plane-tooltip__label {
  color: var(--text-secondary);
}

.plane-tooltip__muted {
  color: var(--plane-tooltip-text-muted);
}

.plane-item {
  position: absolute;
  left: calc(var(--x, 0) * 100%);
  top: calc(var(--y, 0) * 100%);
  --tag-scale: 1;
  display: inline-block;
  border-radius: 1.5em;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 14px;
  font-size: clamp(8px, 1.8cqw * var(--tag-scale), 26px);
}
.plane-item--big {
  --tag-scale: 1.25;
}
.plane-item--small {
  --tag-scale: 0.8;
}

.card-widget {
  background: var(--surface-glass-bg);
  container-type: inline-size;
  display: flex;
  width: 100%;
  min-width: 0;
  block-size: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.widget {
  container-type: size;
  container-name: widget;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  overflow: hidden;
  inline-size: 100%;
  block-size: 100%;
  min-width: 0;
}

.widget_value_units_row {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  white-space: nowrap;
  min-width: 0;
}

.widget_value_units_row {
  white-space: normal;
}

/* VALOR */
@supports (font-size: 1cqw) {
  .widget_small_font_size {
    font-size: clamp(22px, 4cqmin, 28px);
  }
  .widget_medium_font_size {
    font-size: clamp(28px, 6cqmin, 54px);
  }
  .widget_big_font_size {
    font-size: clamp(34px, 8cqmin, 94px);
  }
}
/* UNIDADES */
@supports (font-size: 1cqw) {
  .widget_units_small {
    font-size: clamp(14px, 1.4cqmin, 18px);
  }
  .widget_units_medium {
    font-size: clamp(18px, 1.8cqmin, 24px);
  }
  .widget_units_big {
    font-size: clamp(22px, 2.8cqmin, 64px);
  }
}
@supports not (font-size: 1cqw) {
  .widget_small_font_size {
    font-size: clamp(22px, 1.2em, 28px);
  }
  .widget_medium_font_size {
    font-size: clamp(28px, 1.8em, 54px);
  }
  .widget_big_font_size {
    font-size: clamp(34px, 2.4em, 94px);
  }
  /* UNIDADES */
  .widget_units_small {
    font-size: clamp(14px, 0.66em, 18px);
  }
  .widget_units_medium {
    font-size: clamp(18px, 1em, 24px);
  }
  .widget_units_big {
    font-size: clamp(22px, 1.3em, 64px);
  }
}
.widget_big_font_size,
.widget_medium_font_size,
.widget_small_font_size {
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-accent);
  text-overflow: ellipsis;
  overflow: hidden;
}

.widget_units_big,
.widget_units_medium,
.widget_units_small {
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.9;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.widget_units_small {
  line-height: 1.1;
  font-weight: 500;
}

[id^=time_range_widget_] {
  font-size: 12px !important;
  padding-left: 20px;
  font-weight: 400;
  color: var(--text-secondary);
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  display: block;
  overflow: visible;
  word-break: break-word;
}

.custom-select-wrapper {
  margin: 0px 18px;
  cursor: pointer;
}

/* Menú personalizado widgets */
.custom-select-menu {
  display: none;
  position: absolute;
  top: 22px;
  left: 0;
  min-width: 140px;
  padding: 6px 0;
  background: var(--bg-main);
  border: 1px solid var(--table-glass-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  z-index: 999;
  max-height: none;
  overflow-y: hidden;
}
.custom-select-menu.is-open {
  display: block;
}

.custom-select-item {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
  color: var(--text-primary);
}
.custom-select-item:hover {
  background: var(--ucp-btn-bg-selected);
  color: var(--text-link-hover);
  font-weight: 500;
}

.custom-select-menu {
  position: absolute;
  display: none;
  z-index: 999;
}

.custom-select-menu.is-open {
  display: block;
}

.ns-value-card {
  container: value-card/size;
  width: 100%;
  height: 100%;
  min-width: 0;
  --ns-value-size: clamp(34px, 18cqmin, 72px);
  --ns-value-unit-size: clamp(18px, 8cqmin, 32px);
  --ns-value-scale: 1;
  --ns-value-room: calc(100cqi - 32px);
}

.ns-value-card__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 0 16px 12px;
  overflow: auto;
}

.ns-value-card__inner--solo {
  --ns-value-size: clamp(32px, 26cqmin, 56px);
  --ns-value-unit-size: clamp(16px, 11cqmin, 24px);
}
.ns-value-card__inner--solo .ns-value-card__primary {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
  min-height: 0;
  margin-top: 0;
}
.ns-value-card__inner--solo .ns-value-card__main {
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.ns-value-card__inner--solo .ns-value-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  min-width: 0;
}
.ns-value-card__inner--solo .ns-value-card__meta > .ns-value-card__context {
  margin: 0;
  white-space: nowrap;
}

.ns-value-card__label {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.ns-value-card__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.25em;
  min-width: 0;
}

.ns-value-card__value {
  font-size: max(16px, min(var(--ns-value-size) * var(--ns-value-scale), var(--ns-value-room) / (var(--ns-value-chars, 4) * 0.6)));
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ns-value-card__unit {
  font-size: calc(var(--ns-value-unit-size) * var(--ns-value-scale));
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ns-value-card--size-big {
  --ns-value-scale: 1.35;
}

.ns-value-card--size-medium {
  --ns-value-scale: 0.8;
}

.ns-value-card--size-small {
  --ns-value-scale: 0.6;
}

.ns-value-card--legacy-big,
.ns-value-card--legacy-big .ns-value-card__inner--solo {
  --ns-value-size: clamp(34px, 8cqi, 94px);
  --ns-value-unit-size: clamp(22px, 2.8cqi, 64px);
}

.ns-value-card--legacy-medium,
.ns-value-card--legacy-medium .ns-value-card__inner--solo {
  --ns-value-size: clamp(28px, 6cqi, 54px);
  --ns-value-unit-size: clamp(18px, 1.8cqi, 24px);
}

.ns-value-card--legacy-small,
.ns-value-card--legacy-small .ns-value-card__inner--solo {
  --ns-value-size: clamp(22px, 4cqi, 28px);
  --ns-value-unit-size: clamp(14px, 1.4cqi, 18px);
}

.ns-value-card__context {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.ns-value-card__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ns-value-card__primary {
  margin-top: auto;
}

.ns-value-card__details,
.ns-value-card__primary:has(+ .ns-value-card__events) {
  margin-bottom: auto;
}

.ns-value-card__stats,
.ns-value-card__cumulative {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--divider-color);
}

.ns-value-card__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ns-value-card__stat dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}
.ns-value-card__stat dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.ns-icon.ns-value-card__stat-icon {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.ns-value-card__events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--divider-color);
  line-height: 1.4;
}

.ns-value-card__events-label {
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ns-value-card__events-counts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
}

.ns-value-card__event {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-primary);
}

.ns-value-card__event-icon.ns-icon {
  width: 16px;
  height: 16px;
}

.ns-value-card__event--zero .ns-value-card__event-icon.ns-icon,
.ns-value-card__event--unset .ns-value-card__event-icon.ns-icon {
  color: var(--text-muted);
}

.ns-value-card__event--zero .ns-value-card__event-count {
  font-weight: 400;
  color: var(--text-secondary);
}

.ns-value-card__event-state {
  min-width: 0;
}

.ns-value-card__event-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ns-value-card__event-count {
  flex: 0 0 auto;
  font-weight: 600;
}

.ns-value-card__event-last {
  display: none;
  font-size: 12px;
  color: var(--text-secondary);
}

.ns-value-card__empty {
  margin: auto;
  font-size: 18px;
  color: var(--text-muted);
}

.ns-value-card__state {
  --ns-value-state-color: var(--text-secondary);
  flex: 0 4 auto;
  min-width: 0;
  max-width: 100%;
  padding: 2px 8px;
  overflow: hidden;
  border: 1px solid var(--ns-value-state-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ns-value-state-color) 12%, transparent);
  color: color-mix(in srgb, var(--ns-value-state-color) 75%, var(--text-primary));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-widget.ns-value-card-host > .card-header > .ns-value-card__state {
  align-self: center;
}
.card-widget.ns-value-card-host > .card-header > .title_widget {
  flex: 1 1 auto;
  width: auto;
  min-width: 4em;
}
.card-widget.ns-value-card-host > .card-header.ns-value-card__header--empty:has(> .datasource_button, > .delete_button) > .title_widget {
  visibility: hidden;
}
.card-widget.ns-value-card-host > .card-header.ns-value-card__header--empty:has(> .datasource_button, > .delete_button) > .title_widget::before {
  content: "​";
}
.card-widget.ns-value-card-host > .card-header.ns-value-card__header--empty:not(:has(> .datasource_button, > .delete_button)) {
  padding-bottom: 0;
}
.card-widget.ns-value-card-host > .card-header.ns-value-card__header--empty:not(:has(> .datasource_button, > .delete_button)) > .title_widget {
  display: none;
}

.card-widget.ns-value-card-host--state {
  border: 1px solid var(--ns-value-state-color);
  border-left-width: 4px;
}
.card-widget.ns-value-card-host--state .ns-value-card__value {
  color: color-mix(in srgb, var(--ns-value-state-color) 75%, var(--text-primary));
}

.card-widget.ns-value-card-host {
  container: value-host/inline-size;
}

@container value-card (min-width: 200px) {
  .ns-value-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .ns-value-card__stat {
    display: block;
  }
}
@container value-card (min-width: 340px) {
  .ns-value-card__stats {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
  }
  .ns-value-card__stats dt {
    justify-content: center;
  }
  .ns-value-card__stat--start {
    text-align: left;
  }
}
@container value-card (max-width: 239px) {
  .ns-value-card__event-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
@container value-card (min-width: 480px) {
  .ns-value-card__event-last {
    display: inline;
  }
}
@container value-card (min-width: 520px) and (max-height: 320px) {
  .ns-value-card__inner:not(.ns-value-card__inner--solo) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    -moz-column-gap: 24px;
         column-gap: 24px;
    --ns-value-room: calc((100cqi - 56px) / 2);
  }
  .ns-value-card__inner:not(.ns-value-card__inner--solo) > .ns-value-card__primary {
    grid-column: 1;
    grid-row: 1/3;
    align-self: center;
    margin-block: 0;
  }
  .ns-value-card__details {
    margin-block: 0;
    grid-column: 2;
    grid-row: 1/3;
    align-self: center;
    padding-left: 24px;
    border-left: 1px solid var(--divider-color);
  }
  .ns-value-card__stats,
  .ns-value-card__cumulative {
    padding-top: 0;
    border-top: none;
  }
  .ns-value-card__events {
    grid-column: 1/-1;
  }
}
@container value-card (max-height: 300px) {
  .ns-value-card__inner:not(.ns-value-card__inner--solo) {
    gap: 6px;
    padding-bottom: 8px;
  }
  .ns-value-card__context {
    margin-bottom: 2px;
  }
  .ns-value-card__details {
    gap: 6px;
  }
  .ns-value-card__stats {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 4px 12px;
    text-align: left;
  }
  .ns-value-card__stats,
  .ns-value-card__cumulative,
  .ns-value-card__events {
    padding-top: 6px;
  }
  .ns-value-card__stat {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ns-value-card__stat--icon .ns-value-card__stat-name,
  .ns-value-card__events-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .ns-value-card__events {
    gap: 0;
  }
}
@container value-card (max-height: 180px) {
  .ns-value-card__inner:not(.ns-value-card__inner--solo) {
    --ns-value-size: clamp(20px, 22cqh, 40px);
    --ns-value-unit-size: clamp(12px, 10cqh, 18px);
  }
  .ns-value-card--size-big .ns-value-card__inner:not(.ns-value-card__inner--solo) {
    --ns-value-scale: 1;
  }
  .ns-value-card__event-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .ns-value-card__event-last {
    display: none;
  }
}
@container value-card (min-width: 280px) and (max-height: 180px) {
  .ns-value-card__inner:not(.ns-value-card__inner--solo) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    -moz-column-gap: 16px;
         column-gap: 16px;
    --ns-value-room: calc((100cqi - 48px) / 2);
  }
  .ns-value-card__inner:not(.ns-value-card__inner--solo) > .ns-value-card__primary {
    grid-column: 1;
    grid-row: 1/-1;
    align-self: center;
    margin-block: 0;
  }
  .ns-value-card__inner:not(.ns-value-card__inner--solo) > .ns-value-card__details,
  .ns-value-card__inner:not(.ns-value-card__inner--solo) > .ns-value-card__events {
    grid-column: 2;
    margin-block: 0;
    padding-left: 16px;
    border-left: 1px solid var(--divider-color);
  }
  .ns-value-card__inner:not(.ns-value-card__inner--solo) > .ns-value-card__primary + .ns-value-card__events {
    grid-row: 1/-1;
    align-self: center;
  }
  .ns-value-card__stats {
    justify-content: flex-start;
  }
  .ns-value-card__stats,
  .ns-value-card__cumulative {
    padding-top: 0;
    border-top: none;
  }
  .ns-value-card__details + .ns-value-card__events {
    padding-top: 4px;
  }
  .ns-value-card__primary + .ns-value-card__events {
    padding-top: 0;
    border-top: none;
  }
}
@container value-card (max-width: 279px) and (max-height: 120px) {
  .ns-value-card__inner:not(.ns-value-card__inner--solo) > .ns-value-card__details,
  .ns-value-card__inner:not(.ns-value-card__inner--solo) > .ns-value-card__events {
    display: none;
  }
  .ns-value-card__inner:not(.ns-value-card__inner--solo) > .ns-value-card__primary {
    margin-block: auto;
  }
}
#container_widget_info:has(#value_secondary_values) .modal_form_label {
  color: var(--text-primary);
}

#value_secondary_values .value-secondary__list {
  margin-top: 8px;
}

#value_secondary_values .ns-check {
  align-items: center;
}

#value_secondary_values .ns-check__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#value_advanced_options {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--divider-color);
}

#value_advanced_toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ns-label-size);
  font-weight: var(--ns-w-semibold);
  line-height: 20px;
  color: var(--text-heading);
  text-decoration: none;
}
#value_advanced_toggle:hover {
  color: var(--btn-primary-bg-hover);
}
#value_advanced_toggle:focus-visible {
  outline: 2px solid var(--btn-primary-bg);
  outline-offset: 2px;
  border-radius: 4px;
}

.value-advanced__chevron {
  transition: transform 0.15s ease;
}

#value_advanced_toggle[aria-expanded=false] .value-advanced__chevron {
  transform: rotate(-90deg);
}

#value_advanced_body .row > .col-8 > label {
  margin-bottom: 0;
  font-size: var(--ns-label-size);
  font-weight: var(--ns-label-weight);
  color: var(--text-primary);
}

#value_advanced_body .row > .col-8 > .widget-form-description {
  margin: 2px 0 0;
}

:is(#widget_datatype_container, #widget_time_range_container):has(> .ns-helper-text) {
  padding-bottom: 16px;
}
:is(#widget_datatype_container, #widget_time_range_container):has(> .ns-helper-text) > .form-control {
  margin-bottom: 0;
}

#value_secondary_values {
  padding-bottom: 16px;
}

#value_advanced_body .row > .col-4 {
  justify-content: flex-end;
}

.value-advanced__child .col-8 {
  padding-left: 31px;
}

.card-widget.ns-value-card-host [id^=title_widget_] > .row {
  margin: 0 0 8px !important;
}
.card-widget.ns-value-card-host [id^=title_widget_] > .row > .col-12 {
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 0 16px;
}
.card-widget.ns-value-card-host [id^=title_widget_] .custom-select-wrapper {
  margin: 0;
}
.card-widget.ns-value-card-host [id^=title_widget_] .custom-select-toggle {
  white-space: nowrap;
}
.card-widget.ns-value-card-host [id^=title_widget_] [id^=time_range_widget_] {
  padding-left: 0;
  margin-left: 0 !important;
  font-size: 12px !important;
  color: var(--text-secondary);
}

@container value-host (max-width: 339px) {
  .card-widget.ns-value-card-host [id^=title_widget_] [id^=time_range_widget_] {
    flex-basis: 100%;
  }
  .card-widget.ns-value-card-host > .card-header {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .card-widget.ns-value-card-host > .card-header::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }
  .card-widget.ns-value-card-host > .card-header > .ns-value-card__state {
    order: 2;
    align-self: flex-start;
  }
}
.value-advanced__chevron {
  margin-left: 4px;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

[aria-expanded=false] > .value-advanced__chevron {
  transform: none;
}

.ns-severity-icon.ns-icon--alert {
  color: var(--alert-warning-icon);
}

.ns-severity-icon.ns-icon--alarm {
  color: var(--alert-error-icon);
}

.ns-severity-icon.ns-severity-icon--off {
  color: var(--text-muted);
}

.ns-event-count {
  --ns-event-color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-primary);
  text-decoration: none;
}
.ns-event-count .ns-icon {
  width: 18px;
  height: 18px;
  color: var(--ns-event-color);
}

.ns-event-count__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ns-event-count__label {
  color: var(--text-secondary);
  white-space: nowrap;
}

.ns-event-count--alert {
  --ns-event-color: var(--alert-warning-icon);
}

.ns-event-count--alarm {
  --ns-event-color: var(--alert-error-icon);
}

.ns-event-count--zero {
  --ns-event-color: var(--text-muted);
}
.ns-event-count--zero .ns-event-count__value {
  font-weight: 400;
  color: var(--text-secondary);
}

a.ns-event-count:hover,
a.ns-event-count:focus-visible {
  color: var(--text-primary);
  text-decoration: none;
}
a.ns-event-count:hover .ns-event-count__label,
a.ns-event-count:focus-visible .ns-event-count__label {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.badge.ns-severity {
  display: inline-flex;
  gap: 4px;
}

/*  CONTENEDOR DEL MENÚ  */
.highcharts-contextmenu {
  margin-right: 10px;
  min-width: 180px;
  background-color: var(--bg-main);
  border: 1px solid var(--table-glass-border);
  background-clip: padding-box;
  border-radius: 16px !important;
  padding: 0 !important;
}

.highcharts-menu-item {
  display: flex;
  align-items: center;
  margin: 2px 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-primary);
  border-radius: 10px;
}

/* Hover moderno tipo SaaS */
.highcharts-menu-item:hover {
  background: var(--surface-row-bg-hover) !important;
  color: var(--text-link-hover) !important;
  font-weight: 500;
}

.highcharts-menu-item:active {
  transform: scale(0.98);
}

/* widget_body en overflow:visible para que el menú de exportación de Highcharts
   se despliegue sin generar scroll dentro del widget. */
[id^=widget_body_],
.highcharts-figure,
.chart-container,
.highcharts-container {
  overflow: visible !important;
  position: relative !important;
}

.highcharts-root {
  overflow: hidden;
}

/* El widget Expert Knowledge es muy bajo: el botón de exportación (☰) y
.exp-know-widget la añade widget_type_9.js al #widget_body_. */
.exp-know-widget .highcharts-root {
  overflow: visible !important;
}

.highcharts-menu {
  list-style: none;
  margin: 0px;
  box-shadow: none;
  border: none;
  border-radius: 16px !important;
  background: var(--bg-main);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

.highcharts-menu-item {
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
  color: var(--text-primary);
}
.highcharts-menu-item:hover {
  background: var(--surface-row-bg-hover);
  color: var(--text-link-hover);
  font-weight: 500;
}

.card-header,
.widget-header,
.widget-toolbar {
  flex: 0 0 auto;
  z-index: 20;
}

/* Menu widgets image */
/* CONTENEDOR */
#container_image_preview {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.image-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 3em;
  border: 2px solid transparent;
  background-color: transparent;
  color: var(--icon-color);
}
.image-menu-btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("../icons/more.svg") no-repeat center/contain;
  mask: url("../icons/more.svg") no-repeat center/contain;
}

.image-menu-btn {
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-menu-btn:hover {
  transform: scale(1.05);
  background-color: var(--sidebar-bg-hover);
}

/* image-menu-dropdown */
.image-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  padding: 8px 0px;
  min-width: 180px;
  background: var(--bg-main);
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: all 0.2s ease;
}

/* estado activo */
.image-menu-dropdown.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ICONOS */
.menu-icon {
  height: 14px;
  width: 14px;
  -o-object-fit: contain;
     object-fit: contain;
}

.image-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.image-menu-item:hover {
  background-color: var(--surface-row-bg-hover);
  color: var(--text-link-hover);
}

/* PANTALLA COMPLETA DE UNA GRÁFICA — opción "Ver en pantalla completa" del menú ☰
   Highcharts pone en pantalla completa el div `renderTo` (en los widgets del panel,
   `#widget_body_{id}`), que es transparente: el color de fondo lo pone la tarjeta del
   widget, que se queda fuera. Sin fondo propio, lo que se ve detrás es el `::backdrop`
   del navegador, negro por defecto. Le damos el mismo fondo que al resto de pantallas
   completas de la app (`--bg-fullscreen`: blanco en claro, #1B1B1F en oscuro).

   El SVG de la gráfica no sirve para esto: su `backgroundColor` es
   `--highcharts-background-color`, transparente a propósito (vendors/_highcharts.scss)
   para que el widget herede el color de su tarjeta. */
:fullscreen > .highcharts-container {
  background-color: var(--bg-fullscreen);
}

/* Y el propio elemento en pantalla completa, para cubrir el hueco mientras Highcharts
   rehace el tamaño del contenedor tras el `fullscreenchange`. Regla aparte: si el
   navegador no entiende `:has()` solo se pierde este refuerzo, no la de arriba. */
:fullscreen:has(> .highcharts-container) {
  background-color: var(--bg-fullscreen);
}

:fullscreen:has(> .highcharts-container)::backdrop {
  background-color: var(--bg-fullscreen);
}

/* Safari < 16.4 (`:fullscreen` sin prefijo llegó en esa versión). En la misma lista de
   selectores que la regla sin prefijo invalidaría la regla entera, por eso va suelta. */
:-webkit-full-screen > .highcharts-container {
  background-color: var(--bg-fullscreen);
}

/* Títulos izquierda */
.add_new_widget {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 500;
  word-wrap: break-word;
  margin-bottom: 6px;
}

.type_widget {
  color: var(--text-secondary);
  font-size: 14px;
  font-family: Inter;
  font-weight: 400;
  line-height: 18px;
  word-wrap: break-word;
  margin-bottom: 16px;
}

.close.dismiss_modal {
  background: transparent;
  right: 16px;
  border: none;
  outline: none;
  padding: 4px;
  line-height: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.close.dismiss_modal:focus,
.close.dismiss_modal:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.close.dismiss_modal:hover {
  transform: scale(1.1);
}

#edit_datasource_modal .modal-dialog.modal-xl {
  max-width: 1200px;
}

/* Layout columnas */
#edit_datasource_modal .row#modal-two-cols {
  display: flex;
  align-items: stretch !important;
}

#modal-two-cols {
  --bs-gutter-x: 24px;
}

#edit_datasource_modal #col_widgets {
  width: 100%;
  max-width: 100%;
}

/* Tablet (576–991px): columnas apiladas como en móvil — col-sm-5/7 de
   Bootstrap no caben junto a la columna fija de 380px y rompen el layout */
@media (min-width: 576px) and (max-width: 991.98px) {
  #edit_datasource_modal #col_widgets,
  #edit_datasource_modal #modal-two-cols > .col-sm-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Selector compacto y centrado como bloque: títulos y cuadrícula
     comparten ancho y borde izquierdo — nada se descuadra */
  #edit_datasource_modal #col_widgets {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Desktop (≥992px): columna izquierda fija + derecha flexible (nunca desborda) */
@media (min-width: 992px) {
  #edit_datasource_modal #col_widgets {
    flex: 0 0 380px;
    max-width: 380px;
    border-radius: 12px;
    padding-left: 24px;
    padding-right: 24px;
  }
  #edit_datasource_modal #modal-two-cols > .col-sm-7 {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
  }
}
.card-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px !important;
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--surface-glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
}

#edit_datasource_modal #col_widgets .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
}

#edit_datasource_modal #col_widgets .row > [class*=col-] {
  padding-left: 8px;
  padding-right: 8px;
  max-width: none;
  flex: none;
}

/* Imágenes */
#edit_datasource_modal img {
  max-width: 100%;
  height: auto;
}

/* Preview imagen */
#container_upload_image {
  min-height: 360px;
}

#container_widget_info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#edit_datasource_modal .col-12.d-flex.justify-content-end {
  margin-top: auto;
  padding: 16px 24px;
}

.toggle.btn {
  margin-bottom: 5px;
}

/*OTHERS*/
.col-left-right-paddings {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.widget_description_wrapper {
  line-height: 1.2;
  margin-top: 5px;
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

/* .widget_type_image_selected {
    background-color: white;
} */
.important_hide {
  display: none !important;
}

.title_widget {
  border: 0px;
  width: 100%;
  font-weight: 600;
}

.title_widget:focus {
  outline: none !important;
  box-shadow: 0 0 10px #00B9E4;
}

.ui-resizable-handle {
  opacity: 0.4;
  transition: opacity 0.15s;
}

/* Tirador inferior-derecha/izquierda: más grande y visible, sobre todo en mapas */
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw {
  width: 22px;
  height: 22px;
}

.grid-stack-item:hover > .ui-resizable-handle {
  opacity: 0.9;
}

.date-size-title-0 {
  font-size: 10px;
}

.date-size-title-1 {
  font-size: 14px;
}

.date-size-title-2 {
  font-size: 16px;
}

.date-size-title-3 {
  font-size: 24px;
}

.kpi-size-title-0 {
  font-size: 10px;
}

.kpi-size-title-1 {
  font-size: 11px;
}

.kpi-size-title-2 {
  font-size: 13px;
}

.kpi-size-title-3 {
  font-size: 20px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#list_of_sensors, #list_of_licenses_to_renew {
  list-style-type: none;
  padding-left: 0px !important;
}

.alert_remove_sensor, .remove_license_to_renew {
  font-weight: 600;
  float: right;
  cursor: pointer;
}

.label_notifications_modal {
  font-size: 13px;
  color: var(--text-primary);
  display: block;
  font-weight: 500;
}

.composite_data_keyboard_grey {
  margin-top: 3px;
  width: 80px;
  height: 40px;
  background: var(--bg-surface);
  border: 1px solid var(--btn-primary-white-border);
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  line-height: 20px;
  cursor: pointer;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.composite_data_keyboard_white {
  margin-top: 3px;
  width: 80px;
  height: 40px;
  background: var(--bg-main);
  border: 1px solid var(--btn-secondary-bg-pressed);
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  line-height: 20px;
  cursor: pointer;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.composite_data_keyboard_empty {
  margin-top: 3px;
  width: 80px;
  height: 40px;
  background: var(--bg-main);
  border: 1px solid var(--btn-secondary-bg-pressed);
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  color: var(--icon-color);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.circle_selected {
  outline: none;
  box-shadow: 0px 0px 20px #00b9e4;
}

.leaflet-container .select_sensor_status_map a {
  color: var(--color-primary);
}

.truncate-text-two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5; /* Adjust based on your line height */
  max-height: 3em; /* Should be line-height * number of lines (2 in this case) */
}

.progress-container {
  width: 100%;
  background-color: var(--surface-divider);
  overflow: hidden;
  height: 15px;
  margin: 1% 5% 1% 5%;
}

.progress-bar {
  height: 100%;
  text-align: center;
  line-height: 30px;
  color: white;
  font-weight: bold;
}

/*Customtoggle Widgets*/
.custom-select-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-link);
  font-size: 12px;
}

/* RADIO */
.widget-option__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* CONTENEDOR */
.widget-option {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

/* ICONO BASE */
.widget-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  border-radius: 8px;
  background: transparent;
  /* ÚNICA FUENTE DE COLOR */
  --widget-role: var(--icon-disabled);
  color: var(--widget-role);
  /* DERIVACIONES */
  --widget-icon-arc-primary: color-mix(in srgb, var(--widget-role) 18%, transparent);
  --widget-icon-arc-secondary: color-mix(in srgb, var(--widget-role) 40%, transparent);
  --widget-icon-text: var(--widget-role);
  --widget-icon-needle: var(--widget-role);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

/* TAMAÑOS */
.widget-icon--sm {
  width: 64px;
}

.widget-icon--md {
  width: 96px;
}

.widget-icon--lg {
  width: 128px;
}

/* HOVER */
.widget-option:hover .widget-icon {
  background: var(--widget-bg-hover);
  --widget-role: var(--icon-color);
  --widget-icon-arc-primary:color-mix(in srgb, var(--icon-color) 18%, transparent);
  --widget-icon-arc-secondary:color-mix(in srgb, var(--widget-role) 60%, transparent);
  --widget-icon-text: var(--widget-role);
  --widget-icon-needle: var(--icon-color);
  transform: translateY(-1px);
}

/* ACTIVE */
.widget-option__radio:checked + .widget-icon {
  background: var(--widget-bg-active);
  --widget-role: var(--icon-active);
  color: var(--icon-active);
  --widget-icon-arc-primary: var(--icon-color);
  --widget-icon-arc-secondary: var(--icon-active-soft);
  --widget-icon-text: var(--icon-active);
  --widget-icon-needle: var(--icon-color);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* DISABLED */
.widget-option__radio:disabled + .widget-icon {
  cursor: not-allowed;
  opacity: 0.45;
  --widget-role: var(--icon-disabled);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.widget-cell {
  width: 100%;
  min-width: 0;
}

/* WIDGET 13 PARO ACTUAL */
.widget-label {
  font-size: clamp(14px, 0.45vw + 0.5vh, 18px);
  font-size: calc(13px * var(--widget-scale, 1));
  color: #6b7280;
  font-weight: 500;
}

/* KPI grande */
.widget-kpi {
  font-size: clamp(26px, 1.2vw + 1.4vh, 74px);
  font-size: calc(34px * var(--widget-scale, 1));
  font-weight: 700;
  line-height: 0.92;
}

/* Valores medios */
.widget-value {
  font-size: clamp(16px, 0.7vw + 0.8vh, 30px);
  font-size: calc(18px * var(--widget-scale, 1));
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* Valores pequeños */
.widget-small {
  font-size: clamp(12px, 0.35vw + 0.45vh, 18px);
  font-size: calc(11px * var(--widget-scale, 1));
  color: #9ca3af;
}

/* BODY / LAYOUT */
.widget-type-13 .row {
  margin-right: -16px !important;
  margin-left: -16px !important;
  border-radius: 0px 0px 8px 8px;
}

.card-widget:has(> .widget-type-13) {
  border-color: rgba(255, 255, 255, 0.12);
}

#widget_body_13 {
  letter-spacing: 0.2px;
}

#widget_body_13 .row {
  margin-bottom: clamp(4px, 0.4vw, 8px);
}

.widget-type-13 p {
  margin-bottom: 0 !important;
}

/* Solo widget 13 compact layout */
.widget-type-13 {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  flex: 1 0 auto;
  min-height: 0;
  justify-content: flex-start !important;
  align-items: stretch;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* menos aire entre filas */
.widget-type-13 > .row {
  flex: 0 0 auto;
  margin-bottom: 2px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
}

/* Solo se activa si el widget crece */
.widget-type-13.widget-expanded > .row {
  flex: 1 0 auto;
}

.widget-type-13 .row > div {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* comprimir textos */
.widget-type-13 p,
.widget-type-13 span {
  line-height: 1;
}

/* INTERVAL ROWS / FRANJAS */
.interval-row {
  flex: 1 1 auto;
  min-height: 22px;
  margin-bottom: 0 !important;
}

.interval-label {
  margin: 0;
  padding-left: 12px;
  font-size: clamp(14px, 0.72vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  color: #667085;
  letter-spacing: 0.01em;
}

/* LARGE DASHBOARD */
@media (min-width: 1600px) {
  .interval-label {
    padding-left: 16px;
    font-size: clamp(15px, 0.8vw, 20px);
  }
}
/*  4K MODE*/
@media (min-width: 2560px) {
  #widget_body_13 {
    letter-spacing: 0.4px;
  }
  #widget_body_13 .row {
    margin-bottom: 16px;
  }
  .widget-label {
    opacity: 0.85;
  }
  .widget-small {
    opacity: 0.7;
  }
}
/* TV MODE */
.tv-mode .widget-type-13 {
  font-size: 1.1vw;
}

.tv-mode .widget-type-13 .widget-type-13-inner {
  max-height: 75vh;
  overflow-y: auto;
}

.tv-mode .widget-type-13 .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tv-mode .widget-type-13 .row > div {
  flex: 0 0 auto;
  min-width: 200px;
}

.tv-mode .widget-type-13 .widget-kpi {
  font-size: clamp(32px, 2vw, 72px);
}

.tv-mode .widget-type-13 .widget-value {
  font-size: clamp(24px, 1vw, 28px);
}

.tv-mode .widget-type-13 .widget-kpi,
.tv-mode .widget-type-13 .widget-value {
  white-space: nowrap;
}

.tv-mode .widget-type-13 .widget-value {
  white-space: normal;
}

/* TV interval labels */
.tv-mode .interval-label {
  padding-left: 20px;
  font-size: clamp(18px, 1vw, 24px);
}

/* MOBILE */
@media (max-width: 768px) {
  #widget_body_13 .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }
  #widget_body_13 .col-md-3,
  #widget_body_13 .col-md-9 {
    width: 100%;
    max-width: 100%;
  }
  .widget-kpi {
    font-size: 28px;
  }
  .widget-value {
    font-size: 14px;
    text-align: left;
  }
}
/* Widget mapa de sensores (UI 13 / DB 11 · widget_type_11.js) */
.sensor_map_widget {
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}

.sensor_map_canvas {
  flex: 1 1 auto;
  min-height: 160px;
  width: 100%;
  z-index: 0;
}

.sensor_map_controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--card-bg);
  border-bottom: 1px solid var(--glass-border);
  z-index: 2;
}

.sensor_map_controls__types {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.sensor_map_controls__status {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.sensor_map_controls__status > select.selectpicker,
.sensor_map_controls__status > .bootstrap-select {
  width: auto !important;
}

.sensor_map_controls .btn-group {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
}
.sensor_map_controls .btn-group .map_filter_button,
.sensor_map_controls .btn-group .map_filter_button_active {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid var(--ucp-btn-border);
  border-radius: 0;
  margin: 0;
  background: var(--card-bg);
  color: var(--text-secondary);
  box-shadow: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sensor_map_controls .btn-group > .btn:not(:first-child) {
  margin-left: -1px;
}
.sensor_map_controls .btn-group > .btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.sensor_map_controls .btn-group > .btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.sensor_map_controls .btn-group .map_filter_button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--ucp-btn-border);
}
.sensor_map_controls .btn-group .map_filter_button_active {
  position: relative;
  z-index: 1;
  font-weight: 600;
  background: var(--bg-hover);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-bg);
}
.sensor_map_controls .btn-group.is-wrapped {
  gap: 6px;
}
.sensor_map_controls .btn-group.is-wrapped > .btn,
.sensor_map_controls .btn-group.is-wrapped > .btn:first-child,
.sensor_map_controls .btn-group.is-wrapped > .btn:last-child {
  margin-left: 0;
  border-radius: 8px;
}

.sensor_map_controls .bootstrap-select {
  width: auto !important;
}
.sensor_map_controls .bootstrap-select > .dropdown-toggle {
  font-size: 12px;
  height: 40px;
  padding: 5px 28px 5px 12px;
  border: 1px solid var(--input-border-default);
  border-radius: 8px;
  color: var(--text-primary);
  box-shadow: none;
}
.sensor_map_controls .bootstrap-select > .dropdown-toggle:active {
  border: 1px solid var(--ucp-btn-border);
}
.sensor_map_controls .bootstrap-select > .dropdown-toggle:focus {
  outline: none !important;
  border-color: var(--btn-primary-bg);
}

/* components/_modal.scss — contrato único del modal (auditoría responsive F3, §3.4).
 *
 * Antes las reglas del modal vivían en cuatro sitios: la base en components/_cards.scss, la
 * pantalla completa de móvil en components/_form.scss, los tamaños propios (`modal-l`,
 * `modal-xxl`…) en pages/_widgets.scss y su relleno (`--panel-pad`) en pages/_overview.scss.
 *
 *   ≥ 992px     tamaños de Bootstrap + los propios, centrados.
 *   768-991     los modales grandes ocupan el ancho menos 24px por lado (Bootstrap los dejaba
 *               en 500px hasta 992: en un iPad vertical salían más estrechos que en un móvil).
 *   < 768px     pantalla completa, con el cuerpo desplazable y el pie pegado abajo: Guardar /
 *               Siguiente siempre a mano. Las confirmaciones, en cambio, como tarjeta.
 */
:root {
  --modal-pad: 12px;
  --modal-radius: 8px;
}

/* --- Base ----------------------------------------------------------------- */
.modal-content {
  background: var(--bg-main) !important;
  padding: var(--modal-pad);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--modal-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--modal-radius);
}

.modal-header {
  background: var(--bg-main);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}

.modal-body {
  background-color: var(--bg-main);
  font: var(--ns-b1);
  color: var(--text-primary);
}

.modal-footer {
  border-top: 1px solid var(--glass-border);
}

.ns-modal-title {
  color: var(--text-heading);
  font-size: 18px;
  font-weight: 600;
}

/* --- Tamaños propios (antes en pages/_widgets.scss) -------------------------
 * `width: auto` y no `100%` en `modal-xl` (CP-05): con 100% el modal se pegaba a los bordes de la
 * ventana entre 768 y 1140px; con `auto`, Bootstrap le deja su margen a cada lado. */
.modal-l {
  width: 90%;
  max-width: 750px;
}

.modal-xl {
  width: auto;
  max-width: 1100px;
}

.modal-xxl {
  width: 90%;
  max-width: 1335px;
}

.modal-xxxl {
  width: 90%;
  max-width: 1700px;
}

/* --- Tablet (768-991): sin el hueco de `modal-lg` (CP-04) ----------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .modal-lg,
  .modal-l,
  .modal-xl,
  .modal-xxl,
  .modal-xxxl {
    width: auto;
    max-width: calc(100vw - 48px);
  }
}
/* --- Móvil (< 768): pantalla completa con pie fijo (CP-02) ----------------
 * Antes era `min-height: 100vh` sin más: en un formulario largo (informes, ubicación, turnos,
 * alertas) Guardar o Siguiente quedaba debajo, fuera de la vista, y `100vh` no descuenta la barra
 * del navegador en iOS. El corte era 768px (incluido); ahora 767.98, así que el iPad vertical
 * entra en el tramo de tablet. */
@media (max-width: 767.98px) {
  .modal.show .modal-dialog {
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .modal.show .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
  }
  .modal.show .modal-body {
    padding: 1rem;
    flex: 1 1 auto;
  }
  .modal.show .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--bg-main);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
  .modal.show .modal-dialog-scrollable .modal-content {
    max-height: 100vh;
    max-height: 100dvh;
  }
  .modal[id^=delete_].show .modal-dialog,
  .modal[id^=confirm_].show .modal-dialog {
    width: auto;
    margin: 16px;
  }
  .modal[id^=delete_].show .modal-content,
  .modal[id^=confirm_].show .modal-content {
    min-height: 0;
    border-radius: var(--modal-radius);
  }
  .modal[id^=delete_].show .modal-footer,
  .modal[id^=confirm_].show .modal-footer {
    position: static;
  }
  .modal.show:has(.ns-unsaved-modal) .modal-dialog,
  .modal.show:has(.modal-delete-alert-alarms) .modal-dialog {
    width: auto;
    margin: 16px;
  }
  .modal.show:has(.ns-unsaved-modal) .modal-content,
  .modal.show:has(.modal-delete-alert-alarms) .modal-content {
    min-height: 0;
    border-radius: var(--modal-radius);
  }
  .modal.show:has(.ns-unsaved-modal) .modal-footer,
  .modal.show:has(.modal-delete-alert-alarms) .modal-footer {
    position: static;
  }
}
/* --- Pie en móvil estrecho (< 576): botones a partes iguales (CP-27) -------
 * El pie del wizard de informes juntaba en una fila una nota y tres botones de anchos desiguales.
 * La nota pasa a su propia línea y los botones visibles se reparten el ancho. */
@media (max-width: 575.98px) {
  .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer > .ns-helper-text,
  .modal-footer > .ns-wizard-footer-note {
    flex: 0 0 100%;
    margin: 0;
  }
  .modal-footer .btn {
    flex: 1 1 0;
    min-width: min(140px, 100%);
    margin: 0;
  }
}
.cp-wrapper {
  display: flex;
  justify-content: center;
  background: var(--bg-main);
  padding: 20px;
}

.cp-form {
  width: 100%;
  max-width: 480px;
  padding: 42px;
  border-radius: 20px;
  display: flex;
  background: var(--bg-main);
  flex-direction: column;
  align-items: center;
}

.cp-logo img {
  width: 140px;
  margin-bottom: 26px;
}

.cp-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-family: var(--ns-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.4px;
  overflow-wrap: break-word;
}

.cp-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--input-placeholder);
  border-radius: 20px;
  background: var(--btn-text-bg-hover);
  color: var(--text-primary);
  font-family: var(--ns-font);
  font-size: 15px;
  font-weight: 400;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.cp-input::-moz-placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
  font-weight: 400;
}
.cp-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
  font-weight: 400;
}
.cp-input:hover {
  border-color: #B8C0D9;
}
.cp-input:focus {
  outline: none;
  border-color: #0D1D69;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(13, 29, 105, 0.08);
}

.cp-field {
  width: 100%;
  margin-bottom: 18px;
}

.cp-btn {
  width: 100%;
  height: 44px;
  background: #0D1D69;
  color: white;
  border: none;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
  margin-top: 10px;
}
.cp-btn:hover {
  background: #1a2b80;
}
.cp-btn:active {
  transform: scale(0.98);
}

.cp-btn::-moz-focus-inner {
  border: 0 !important;
}

.cp-alert {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.cp-alert-info {
  background: #EEF4FF;
  color: #0D1D69;
  outline-offset: -1px;
}

.cp-alert-warning {
  background: #fff3d2;
  color: #8a5b00;
}

.cp-alert-error {
  background: #FDECEC;
  color: #B32224;
}

.cp-error {
  color: #c33;
  font-size: 12px;
  margin-top: 3px;
}

@media (max-width: 1024px) {
  #vertical_banner_column {
    background: var(--bg-surface);
  }
  .cp-form {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    padding: 32px 24px;
  }
  .cp-logo img {
    width: 110px;
    margin-top: 20px;
  }
}
.footer_not_logged {
  padding: 10px;
  background-color: transparent;
}

.footer_not_logged_text {
  padding: 10px;
  color: var(--text-secondary);
  margin-bottom: 0px !important;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
}

.cp-logo > #nespra_logo {
  height: 100px;
}

.label-row-reset {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.toggle-password {
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: #0D1D69;
  transition: 0.2s;
}
.toggle-password:hover {
  opacity: 0.7;
}

/* BADGE BASE */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3px;
  font-family: var(--ns-font);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.badge .ns-icon {
  width: 12px;
  height: 12px;
  vertical-align: top;
}

.badge.badge--switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px 1px 1px;
  background-color: var(--badge-switch-bg);
  border: 1px solid var(--badge-switch-border);
  color: var(--badge-active-text);
  font-weight: 600;
  letter-spacing: 0;
}
.badge.badge--switch .badge__icon {
  width: 16px;
  height: 16px;
}

.badge-light,
.badge-editor, .badge-license-ult,
.badge-only-read,
.badge-propietary,
.badge-external,
.badge--success, .badge-active, .badge-sent, .badge-format-xlsx, .badge-license-bas,
.badge--warning, .badge-paused,
.badge--danger, .badge-error, .badge-format-pdf,
.badge--info, .badge-in-progress, .badge-format-csv, .badge-license-enh,
.badge--neutral, .badge-no-schedule, .badge-license-none {
  display: inline-block;
  word-wrap: break-word;
}

/* ESTADOS (API semántica + alias) */
.badge--success, .badge-active, .badge-sent, .badge-format-xlsx, .badge-license-bas {
  background-color: var(--badge-active-bg);
  color: var(--badge-active-text);
  border: 1px solid var(--badge-active-border);
}

.badge--warning, .badge-paused, .badge-external {
  background-color: var(--badge-external-bg);
  color: var(--badge-external-text);
  border: 1px solid var(--badge-external-border);
}

.badge--danger, .badge-error, .badge-format-pdf {
  background-color: var(--alert-error-bg);
  color: var(--alert-error-text);
  border: 1px solid var(--alert-error-border);
}

.badge--info, .badge-in-progress, .badge-format-csv, .badge-license-enh {
  background-color: var(--alert-info-bg);
  color: var(--alert-info-text);
  border: 1px solid var(--alert-info-border);
}

.badge--neutral, .badge-no-schedule, .badge-license-none {
  background-color: var(--badge-no-schedule-bg);
  color: var(--badge-no-schedule-text);
  border: 1px solid var(--badge-no-schedule-border);
}

/* ETIQUETAS (no son estados) */
.badge-light {
  background-color: var(--bg-breadcrumb);
  color: var(--text-primary);
  border: 1px solid var(--text-secondary);
  padding: 0.25rem 0.65rem;
}

.badge-editor, .badge-license-ult {
  background-color: var(--badge-editor-bg);
  color: var(--badge-editor-text);
  border: 1px solid var(--badge-editor-border);
}

.badge-only-read {
  background-color: var(--badge-only-read-bg);
  color: var(--badge-only-read-text);
  border: 1px solid var(--badge-only-read-border);
}

.badge-propietary {
  background-color: var(--badge-propietary-bg);
  color: var(--badge-propietary-text);
  border: 1px solid var(--badge-propietary-border);
}

.ns-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ns-space-3);
  margin-bottom: 20px;
}
.ns-panel-toolbar__add {
  min-width: 0;
}
.ns-panel-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Tabla paneles */
.buscador-panel {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 221px;
  height: 40px;
  background: var(--table-search-bg);
  border-radius: var(--table-search-radius);
  border: 1px solid var(--input-border-default);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.buscador-panel:hover {
  border-color: var(--input-border-hover);
}
.buscador-panel:focus-within {
  border-color: var(--input-border-focus);
}
.buscador-panel svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  fill: var(--input-placeholder);
  pointer-events: none;
}
.buscador-panel input.form-control {
  width: 100%;
  height: 100%;
  padding: 0 12px 0 36px;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 6px;
  font-size: var(--ns-fs-14);
  line-height: 1;
  color: var(--input-text);
}
.buscador-panel input.form-control::-moz-placeholder {
  color: var(--input-placeholder);
}
.buscador-panel input.form-control::placeholder {
  color: var(--input-placeholder);
}

@media (hover: hover) and (pointer: fine) {
  .card-widget .card-header:not(.hover-icons):not(:focus-within) > .datasource_button,
  .card-widget .card-header:not(.hover-icons):not(:focus-within) > .delete_button {
    display: none;
  }
}
.card-widget:not(:has(> .widget-type-13)) > .card-header > .datasource_button,
.card-widget:not(:has(> .widget-type-13)) > .card-header > .delete_button {
  flex: 0 0 auto;
  align-self: center;
  width: 28px;
  height: 28px;
  margin-block: -4px;
  padding: 2px;
}
.card-widget:not(:has(> .widget-type-13)) > .card-header > .title_widget {
  align-self: center;
}

#fullscreen_div:fullscreen .card-widget .card-header > .datasource_button,
#fullscreen_div:fullscreen .card-widget .card-header > .delete_button {
  display: none;
}

#fullscreen_div:-webkit-full-screen .card-widget .card-header > .datasource_button,
#fullscreen_div:-webkit-full-screen .card-widget .card-header > .delete_button {
  display: none;
}

.card-widget .card-header {
  border: none;
  border-radius: 0;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  outline-offset: -1px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.card-widget .card-header:hover {
  background: var(--bg-header-widget);
}

#card_view_paneles .card-dashboard {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
#card_view_paneles .card-dashboard .hover-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 6px 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  background: var(--bg-header-widget);
  border: 1px solid var(--border-header-widget);
  outline-offset: -1px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 2;
}
#card_view_paneles .card-dashboard:hover .hover-icons, #card_view_paneles .card-dashboard:focus-within .hover-icons {
  opacity: 1;
  pointer-events: auto;
}
#card_view_paneles .card-dashboard .icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
#card_view_paneles .card-dashboard .icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s;
  pointer-events: none;
}
#card_view_paneles .card-dashboard .icon-btn:hover::before, #card_view_paneles .card-dashboard .icon-btn:focus-visible::before {
  background: color-mix(in srgb, var(--bg-main) 65%, transparent);
}
#card_view_paneles .card-dashboard .icon-btn img {
  width: 20px;
  height: 20px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  max-width: none !important;
  transform: none !important;
}
@media (hover: none) and (pointer: coarse) {
  #card_view_paneles .card-dashboard .hover-icons {
    opacity: 1;
    pointer-events: auto;
  }
}

#ordenar_privilegios_trigger[hidden] {
  display: none !important;
}

/* Flecha animada según dirección actual */
#ordenar_privilegios_trigger svg {
  transition: transform 0.15s ease;
}

#ordenar_privilegios_trigger[data-dir=desc] svg {
  transform: rotate(0deg);
}

#ordenar_privilegios_trigger[data-dir=asc] svg {
  transform: rotate(180deg);
}

.buscador-con-vista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
}

.buscador-panel {
  flex: 1;
}

.botones-vista {
  flex-shrink: 0;
}

.separador-paneles {
  height: 1px;
  background: transparent;
}

.table-responsive {
  overflow-x: auto;
}

@media (max-width: 767.98px) {
  #control_panels_table td,
  #control_panels_table th {
    padding: 0.5rem 0.625rem;
  }
}
.card-dashboard {
  border: 1px solid var(--card-border);
  border-radius: 16px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-dashboard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(3, 6, 21, 0.06);
}

.card-dashboard .hover-icons {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.card-dashboard .table_link {
  font-weight: 600;
}

/* Estilo general (desktop) */
#ordenar_por_privilegios {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

#ordenar_dir_toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  transition: transform 0.2s ease;
}

@media (max-width: 767.98px) {
  #ordenar_por_privilegios {
    align-self: stretch;
  }
}
@media (max-width: 767.98px) {
  .table_link {
    display: inline-block;
    margin-top: 12px;
  }
}
.show > .btn-light.dropdown-toggle {
  background-color: transparent;
}

.select-card {
  border: none !important;
}

.select-card,
.selectpicker .selectpicker,
.bootstrap-select .dropdown-toggle {
  background-color: transparent !important;
}

.select-card {
  background-color: transparent !important;
}

.dropdown-toggle:active {
  background-color: transparent !important;
}

#ordenar_por_privilegios .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: auto !important;
}

#ordenar_por_privilegios .bootstrap-select > .dropdown-toggle {
  width: auto !important;
}

#ordenar_both .icon-asc,
#ordenar_both .icon-desc,
#ordenar_both .icon-both {
  display: none;
}

#ordenar_both[data-dir=asc] .icon-asc {
  display: inline;
}

#ordenar_both[data-dir=desc] .icon-desc {
  display: inline;
}

#ordenar_both[data-dir=both] .icon-both {
  display: inline;
}

@media (max-width: 767.98px) {
  #search_input_table_panel_settings {
    width: 100% !important;
    max-width: 100%;
  }
}
#ordenar_por_privilegios .bootstrap-select > .dropdown-toggle,
#ordenar_por_privilegios .bootstrap-select > .dropdown-toggle:focus,
#ordenar_por_privilegios .bootstrap-select > .dropdown-toggle:active,
#ordenar_por_privilegios .bootstrap-select.show > .dropdown-toggle {
  box-shadow: none !important;
  font-weight: 500;
  outline: 0 !important;
  border-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
  padding-left: 5px;
}

#ordenar_privilegios_trigger {
  display: flex;
  align-items: center;
}

.text_select {
  padding-right: 3px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
}

/* Elimina el borde superior de la cabecera DataTables */
.dt-scroll-head {
  overflow: hidden !important;
}

.dt-scroll-head thead th {
  border-top: none !important;
}

.tab-panels {
  padding: 0px;
  padding-right: 5px;
}

.cards_panels {
  padding-right: 0px;
}

.badge-row {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 6px !important;
}

.title_cards {
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--ns-font);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.15px;
  word-wrap: break-word;
  cursor: pointer;
  transition: color 0.2s ease;
}

.text_cards {
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--ns-font);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.4px;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .card.card-dashboard {
    padding: 0 !important;
    margin: 0;
    height: auto;
  }
}
.text_cards {
  line-height: 1.5;
}

.text_cards .meta-label {
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--ns-font);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
  word-wrap: break-word;
}

.text_cards .meta-value,
.text_cards .meta-value a,
.text_cards .meta-value a:visited,
.text_cards .meta-value a:hover {
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--ns-font);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
  word-wrap: break-word;
}

.badge-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#ordenar_both {
  padding: 7px !important;
  border: 1px solid transparent;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}

#ordenar_both:hover,
#ordenar_both:focus-visible,
#ordenar_both:active {
  background: var(--sidebar-bg-hover) !important;
  padding: 4px;
}

#ordenar_both img {
  display: block;
  pointer-events: none;
}

@media (max-width: 576px) {
  .card-dashboard .card-body {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title tag" "meta  meta";
    align-items: center;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 12px;
    padding-top: 54px;
  }
  .card-dashboard .title_cards {
    grid-area: title;
    margin-bottom: 0 !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-dashboard .badge-row {
    grid-area: tag;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .card-dashboard .text_cards {
    grid-area: meta;
    margin-top: 8px;
  }
}
.fav-panels-title {
  color: var(--text-secondary);
  padding-left: 15px;
  font-size: 12px;
  font-family: var(--ns-font);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 16px;
  letter-spacing: 0.7px;
  word-wrap: break-word;
}

.ul-favorites {
  margin-top: 5px;
  padding-bottom: 80px;
}

.panels-title {
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.15px;
  word-wrap: break-word;
}

/* CONTROL PANEL OTHERS*/
.tag {
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 10px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.datasource_modal_body {
  background-color: var(--bg-surface);
}

.last_value_control_panel {
  font-weight: 600;
}

.last_value_title_control_panel {
  font-weight: 600;
  color: var(--text-heading);
}

.gauge_title_control_panel {
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 0px;
}

/*Mejora check+texto en create_panel_network_checkboxes */
/* Etiquetas de checkboxes */
#create_panel_network_checkboxes .form-check-label,
#edit_panel_network_checkboxes .form-check-label {
  font-weight: 400;
  margin-top: 0;
  line-height: 1;
}

/* Al marcar el check, la etiqueta de esa red se pone azul */
#create_panel_network_checkboxes .form-check-input:checked + .form-check-label,
#edit_panel_network_checkboxes .form-check-input:checked + .form-check-label {
  color: var(--color-primary);
}

/* Separación vertical entre cada opción de red */
#create_panel_network_checkboxes,
#create_panel_networks,
#edit_panel_network_checkboxes {
  margin-left: 20px !important;
  margin-bottom: 5px;
}

#create_panel_network_checkboxes .form-check,
#edit_panel_network_checkboxes .form-check {
  margin-bottom: 8px;
}

#create_panel_network_checkboxes .form-check:last-child,
#edit_panel_network_checkboxes .form-check:last-child {
  margin-bottom: 0;
}

html,
body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--ns-font);
  background-color: var(--bg-main);
}

a {
  color: var(--text-heading) !important;
  text-decoration: none;
}

a:hover {
  color: var(--text-link-hover) !important;
  text-decoration: none !important;
}

#fullscreen_div::backdrop {
  background-color: var(--bg-fullscreen);
}

#fullscreen_div {
  background-color: var(--bg-surface);
}

.container-value {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 20px;
}

.value-number {
  font-size: clamp(30px, 2.4vw + 18px, 42px);
  font-weight: 600;
}

.value-units {
  font-size: clamp(20px, 1.6vw + 12px, 28px);
  font-weight: 400;
}