:root {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  --radius-sm: 11px;
  --radius: 16px;
  --radius-lg: 24px;
  
  --blur: blur(18px);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --plumb-icon-scale: 1;
  --plumb-accessibility-scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  
  font-family: var(--font);
  
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.bg-glow {
  position: fixed;
  width: 430px;
  height: 430px;
  border-radius: 999px;
  
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
}

.bg-glow-gold {
  
  top: 40px;
  right: -160px;
}

.bg-glow-blue {
  
  bottom: 10px;
  left: -180px;
}

.glass,
.glass-soft {
  
  
  
  
  
}

.glass-soft {
  
  
}

.eyebrow {
  display: inline-block;
  
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.5px;
  
  
  flex: 0 0 auto;
}

.brand-mark-small {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

/* LOGIN */
.login-view {
  min-height: 100vh;
}

.login-layout {
  min-height: calc(100vh - 58px);
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, 0.65fr);
  gap: 18px;
  padding: 18px;
}

.hero-panel {
  position: relative;
  min-height: calc(100vh - 84px);
  overflow: hidden;
  border-radius: 28px;
  
  
  
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  
}

.hero-brand {
  position: absolute;
  top: 28px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 13px;
  z-index: 2;
}

.hero-brand h1 {
  margin: 0;
  font-size: 17px;
  letter-spacing: .04em;
}

.hero-brand span {
  
  font-size: 12px;
}

.hero-copy {
  position: absolute;
  left: 48px;
  bottom: 138px;
  max-width: 760px;
  z-index: 2;
}

.hero-copy h2 {
  margin: 13px 0 14px;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -0.055em;
  font-weight: 650;
}

.hero-copy p {
  max-width: 650px;
  margin: 0;
  
  font-size: 15px;
  line-height: 1.6;
}

.system-strip {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  padding: 15px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.system-strip div {
  padding: 3px 14px;
  
}

.system-strip div:first-child {
  
}

.system-strip span {
  display: block;
  
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.system-strip strong {
  display: block;
  margin-top: 5px;
  
  font-size: 11px;
}

.login-panel {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 84px);
}

.login-card {
  width: min(460px, 100%);
  padding: 34px;
  border-radius: 26px;
}

.login-header h2 {
  margin: 9px 0 8px;
  font-size: 31px;
  letter-spacing: -.04em;
}

.login-header p {
  margin: 0 0 25px;
  
  font-size: 13px;
  line-height: 1.55;
}

.login-form,
.modal-form {
  display: grid;
  gap: 11px;
}

.login-form label,
.modal-form label,
.calculated-field,
.labs-config-grid label,
.manual-range label,
.refresh-block label {
  
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
}

.login-form input,
.modal-form input,
.calculated-field input,
.labs-config-grid select,
.manual-range input,
.refresh-block select {
  width: 100%;
  min-height: 43px;
  margin-top: 6px;
  
  border-radius: 12px;
  
  padding: 0 13px;
  
  
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.login-form input:focus,
.modal-form input:focus,
.calculated-field input:focus,
.labs-config-grid select:focus,
.manual-range input:focus,
.refresh-block select:focus {
  
  
  
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 3px 0 7px;
}

.check-option {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
}

.check-option input {
  width: 15px;
  min-height: 15px;
  margin: 0;
  
}

.text-button {
  
  padding: 0;
  
  
  font-size: 10px;
}

.form-message {
  min-height: 18px;
  
  font-size: 10px;
  line-height: 1.5;
}

.form-message.error {
  
}

.form-message.ok {
  
}

.login-footer {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 10px;
}

/* BUTTONS */
.button {
  min-height: 43px;
  border-radius: 12px;
  
  padding: 0 15px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .03em;
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  
  
  
}

.button-primary:hover {
  
}

.button-secondary {
  
  
  
}

.button-secondary:hover {
  
  
}

.button-danger {
  
  
  
}

.button-compact {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 9px;
}

.icon-button {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  
  
  
  display: grid;
  place-items: center;
}

.mobile-only {
  display: none;
}

/* APP SHELL */
.app-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
}

.sidebar {
  position: fixed;
  inset: 14px auto 14px 14px;
  width: 230px;
  z-index: 40;
  padding: 19px 13px 14px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  transition: transform .24s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px 23px;
}

.sidebar-brand-copy strong {
  display: block;
  font-size: 13px;
  letter-spacing: .1em;
}

.sidebar-brand-copy span {
  display: block;
  margin-top: 4px;
  
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav-label {
  padding: 0 10px 8px;
  
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: grid;
  gap: 5px;
}

.nav-item {
  width: 100%;
  min-height: 43px;
  padding: 0 11px;
  
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  
  
  text-align: left;
  font-size: 10px;
  font-weight: 700;
}

.nav-item:hover {
  
  
}

.nav-item.active {
  
  
  
  
}

.nav-icon {
  width: 20px;
  
  font-size: 16px;
  text-align: center;
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-status {
  padding: 13px;
  
  border-radius: 14px;
  
  display: grid;
  gap: 6px;
}

.sidebar-status div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-status strong {
  font-size: 9px;
}

.sidebar-status span {
  
  font-size: 8px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  
  
  display: inline-block;
}

.app-main {
  min-width: 0;
  grid-column: 2;
}

.app-topbar {
  position: sticky;
  top: 14px;
  z-index: 30;
  min-height: 66px;
  margin: 14px 14px 0 0;
  padding: 11px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-left,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  
  font-size: 9px;
  letter-spacing: .04em;
}

.breadcrumb i {
  font-style: normal;
  
}

.breadcrumb strong {
  
  font-size: 10px;
}

.context-pill {
  height: 35px;
  padding: 0 11px;
  
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  
  font-size: 9px;
  
}

.user-chip {
  height: 38px;
  padding: 0 5px 0 11px;
  
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  
  font-size: 9px;
  
}

.user-chip strong {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  
  
  font-size: 8px;
}

.app-content {
  max-width: 1660px;
  margin: 0 auto;
  padding: 26px 30px 50px 16px;
}

.page-view {
  display: none;
  animation: pageFade .22s ease;
}

.page-view.active {
  display: block;
}

@keyframes pageFade {
  from {
    opacity: .28;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.page-heading {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.page-heading h1 {
  margin: 8px 0 0;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -.045em;
}

.page-heading p {
  max-width: 760px;
  margin: 8px 0 0;
  
  font-size: 11px;
  line-height: 1.55;
}

.plant-context-card {
  min-width: 230px;
  padding: 13px 15px;
  border-radius: 14px;
}

.plant-context-card span {
  display: block;
  
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.plant-context-card strong {
  display: block;
  margin-top: 5px;
  font-size: 10px;
}

.panel {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel-header {
  padding: 17px 18px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.panel-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.panel-header p {
  margin: 5px 0 0;
  
  font-size: 9px;
  line-height: 1.45;
}

.state-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  
  
  
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

.state-live {
  
  
  
}

.text-success {
  
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.summary-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-card {
  min-height: 113px;
  padding: 16px;
  border-radius: var(--radius);
}

.summary-card span {
  display: block;
  
  font-size: 9px;
}

.summary-card strong {
  display: block;
  margin-top: 14px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.035em;
}

.summary-card small {
  display: block;
  margin-top: 7px;
  
  font-size: 8px;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .75fr);
  gap: 18px;
}

.installed-module-card {
  width: calc(100% - 28px);
  margin: 0 14px 15px;
  padding: 17px;
  
  border-radius: 16px;
  
  
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  text-align: left;
  transition: transform .2s, border-color .2s, background .2s;
}

.installed-module-card:hover {
  transform: translateY(-2px);
  
  
}

.installed-module-icon,
.electrical-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  
  
  font-size: 22px;
}

.module-path {
  
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.installed-module-copy h3 {
  margin: 6px 0 5px;
  font-size: 16px;
}

.installed-module-copy p {
  margin: 0;
  
  font-size: 9px;
  line-height: 1.5;
}

.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 11px;
}

.tag-row span {
  padding: 5px 7px;
  
  border-radius: 999px;
  
  
  font-size: 7px;
}

.module-arrow {
  
  font-size: 21px;
}

.ai-home-panel {
  display: flex;
  flex-direction: column;
}

.ai-context-list {
  margin: 0 15px 15px;
  display: grid;
  gap: 7px;
}

.ai-context-list div {
  padding: 11px;
  
  border-radius: 11px;
  
}

.ai-context-list span {
  display: block;
  
  font-size: 8px;
}

.ai-context-list strong {
  display: block;
  margin-top: 5px;
  font-size: 9px;
}

.ai-home-panel>.button {
  margin: auto 15px 15px;
}

/* PLANT */
.plant-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 17px;
  align-items: start;
}

.plant-tree {
  position: sticky;
  top: 96px;
}

.tree-list {
  padding: 0 12px 14px;
  display: grid;
  gap: 3px;
}

.tree-root {
  min-height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  
  font-size: 9px;
  font-weight: 750;
}

.tree-level-1 {
  padding-left: 23px;
}

.tree-level-2 {
  padding-left: 37px;
}

.tree-item {
  min-height: 38px;
  
  border-radius: 10px;
  padding: 0 10px 0 48px;
  
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  text-align: left;
}

.tree-item span {
  
  font-size: 7px;
}

.plant-workspace {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.electrical-module-header {
  overflow: visible;
}

.electrical-title-row {
  padding: 18px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.electrical-title-row h2 {
  margin: 5px 0 4px;
  font-size: 18px;
}

.electrical-title-row p {
  margin: 0;
  
  font-size: 9px;
}

.electrical-tabs {
  padding: 0 15px 14px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.electrical-tab,
.quick-range,
.analysis-mode {
  min-height: 32px;
  padding: 0 11px;
  
  border-radius: 9px;
  
  
  font-size: 8px;
  font-weight: 750;
}

.electrical-tab.active,
.quick-range.active,
.analysis-mode.active {
  
  
  
}

.electrical-view {
  display: none;
}

.electrical-view.active {
  display: block;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr);
  gap: 16px;
}

.variable-grid {
  padding: 0 14px 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.variable-grid span {
  min-height: 38px;
  padding: 0 11px;
  
  border-radius: 10px;
  display: flex;
  align-items: center;
  
  
  font-size: 8px;
}

.action-list {
  padding: 0 14px 15px;
  display: grid;
  gap: 8px;
}

.action-card {
  
  border-radius: 11px;
  padding: 12px;
  
  
  text-align: left;
}

.action-card span {
  display: block;
  
  font-size: 8px;
}

.action-card strong {
  display: block;
  margin-top: 5px;
  font-size: 9px;
}

/* SCHEMATIC */
.diagram-shell {
  width: 100%;
  overflow: hidden;
  
  border-radius: 24px;
  
  
}

.diagram-head {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 16px 19px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  pointer-events: none;
}

.diagram-title {
  
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.diagram-legend {
  display: flex;
  gap: 12px;
  
  font-size: 8px;
}

.diagram-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.diagram-legend i {
  width: 23px;
  height: 2px;
  border-radius: 99px;
  display: inline-block;
}

.l-gold {
  
}

.l-blue {
  
}

.l-green {
  
}

.canvas-viewport {
  --scale: 1;
  position: relative;
  width: 100%;
  height: 1360px;
  overflow: hidden;
  margin-top: 9px;
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1840px;
  height: 1360px;
  transform: scale(var(--scale));
  transform-origin: top left;
}

.wire-layer {
  position: absolute;
  inset: 0;
  width: 1840px;
  height: 1360px;
  z-index: 0;
  pointer-events: none;
}

.wire {
  
  
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wire.live {
  
  
}

.wire.blue {
  
  
}

.wire.green {
  
  
}

.node {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  transition: transform .16s, border-color .16s, box-shadow .16s, background .16s;
}

.node:hover {
  transform: translateY(-2px);
  
  
}

.equip-card {
  width: 176px;
  height: 206px;
  padding: 13px 12px;
  border-radius: 16px;
  
  
  
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.equip-card.green {
  
}

.card-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 7px;
  display: grid;
  place-items: center;
  
}

.card-icon svg {
  width: 56px;
  height: 56px;
  display: block;
}

.equip-card h3 {
  margin: 0 0 7px;
  font-size: 15px;
  line-height: 1.12;
  font-weight: 850;
  white-space: pre-line;
  text-transform: uppercase;
}

.equip-card p {
  margin: 0;
  
  font-size: 11px;
  line-height: 1.38;
  white-space: pre-line;
  font-weight: 600;
}

.integrated-switch {
  width: 100%;
  margin-top: 10px;
  padding: 7px;
  border-radius: 10px;
  
  
  
  font-size: 10px;
  line-height: 1.18;
  white-space: pre-line;
}

.integrated-switch strong {
  display: block;
  
  font-size: 11px;
  margin-bottom: 2px;
}

.switch-card {
  width: 112px;
  height: 86px;
  padding: 10px 8px;
  border-radius: 12px;
  
  
  
  text-align: center;
}

.coupler-card {
  width: 108px;
  height: 72px;
  padding: 8px 7px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.coupler-card strong {
  width: calc(100% - 10px);
  margin: 0 auto 5px;
  padding: 5px;
  border-radius: 8px;
  
  
  font-size: 14px;
}

.coupler-card span {
  
  font-size: 10px;
  line-height: 1.18;
  white-space: pre-line;
}

.bar {
  position: absolute;
  z-index: 2;
  left: 82px;
  width: 1690px;
  height: 72px;
  border-radius: 12px;
  
  padding: 9px 16px 9px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bar-main {
  top: 430px;
  
  
}

.bar-main::before {
  
}

.bar-essential {
  top: 1030px;
  
  
}

.bar-essential::before {
  
}

.bar-copy h2 {
  margin: 0;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.8px;
  text-transform: uppercase;
}

.bar-main .bar-copy h2 {
  
}

.bar-essential .bar-copy h2 {
  
}

.bar-copy p {
  margin: 5px 0 0;
  
  font-size: 11px;
  font-weight: 700;
}

.meter-badge {
  width: 74px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 850;
  
  
}

.load-card {
  width: 144px;
  min-height: 168px;
  padding: 10px 9px;
  border-radius: 11px;
  
  
  
  text-align: center;
}

.load-card.blue {
  
}

.load-card.green {
  
}

.load-card .q-badge {
  width: calc(100% - 10px);
  min-height: 34px;
  margin: 0 auto 9px;
  padding: 6px 7px;
  border-radius: 9px;
  
  
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 850;
}

.load-card h4 {
  display: none;
}

.load-card .name {
  min-height: 44px;
  
  font-size: 11px;
  line-height: 1.18;
  font-weight: 750;
  white-space: pre-line;
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-card .spec {
  margin-top: 8px;
  
  font-size: 10px;
  line-height: 1.25;
  white-space: pre-line;
}

.bolt {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  
  
  
  font-size: 13px;
  z-index: 6;
}

.metric-bolt {
  right: 10px;
  top: 10px;
  width: 27px;
  height: 27px;
}

/* KPI */
.kpi-toolbar {
  padding: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr);
  gap: 13px;
  margin-bottom: 16px;
}

.toolbar-block {
  padding: 13px;
  
  border-radius: 13px;
  
}

.toolbar-label {
  display: block;
  margin-bottom: 8px;
  
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.quick-range-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.manual-range {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}

.refresh-block {
  display: flex;
  align-items: end;
  gap: 8px;
}

.refresh-block label {
  min-width: 135px;
}

.refresh-status {
  min-height: 36px;
  padding: 0 10px;
  
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  
  font-size: 8px;
}

.refresh-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  
}

.refresh-status.active {
  
  
  
}

.refresh-status.active i {
  
}

.active-range {
  grid-column: 1/-1;
  padding: 10px 12px;
  
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 12px;
  
}

.active-range span {
  
  font-size: 8px;
  text-transform: uppercase;
}

.active-range strong {
  font-size: 9px;
}

.grafana-board {
  border-radius: 24px;
  overflow: hidden;
}

.grafana-grid {
  padding: 0 14px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.grafana-quadrant {
  min-width: 0;
  min-height: 355px;
  padding: 10px;
  
  border-radius: 11px;
  
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grafana-quadrant h3 {
  margin: 0;
  padding: 2px 3px;
  font-size: 10px;
  
}

.grafana-pair {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.grafana-pair iframe {
  width: 100%;
  height: 100%;
  min-height: 310px;
  
  border-radius: 5px;
  
}

/* LABS */
.labs-actions {
  display: flex;
  gap: 8px;
}

.labs-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.labs-sources {
  position: sticky;
  top: 96px;
  padding-bottom: 12px;
}

.lab-source {
  width: calc(100% - 22px);
  min-height: 56px;
  margin: 0 11px 7px;
  padding: 9px;
  
  border-radius: 12px;
  
  
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  text-align: left;
}

.lab-source.active {
  
  
}

.lab-source.disabled {
  opacity: .48;
  cursor: not-allowed;
}

.lab-source-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  
  
  font-size: 16px;
}

.lab-source strong {
  display: block;
  font-size: 8px;
}

.lab-source small {
  display: block;
  margin-top: 4px;
  
  font-size: 7px;
}

.lab-source i {
  
  font-style: normal;
}

.labs-workspace {
  min-width: 0;
  display: grid;
  gap: 15px;
}

.labs-variable-grid {
  padding: 0 14px 15px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lab-variable {
  min-height: 48px;
  padding: 9px;
  
  border-radius: 11px;
  
  display: flex;
  align-items: center;
  gap: 8px;
  
  font-size: 8px;
  cursor: pointer;
}

.lab-variable input {
  
}

.lab-variable:has(input:checked) {
  
  
  
}

.labs-config-grid {
  padding: 0 14px 13px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.analysis-mode-row {
  padding: 0 14px 15px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.labs-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 15px;
}

.labs-empty-state {
  min-height: 260px;
  margin: 0 14px 15px;
  padding: 25px;
  
  border-radius: 14px;
  display: grid;
  place-content: center;
  text-align: center;
  
  
}

.labs-empty-state strong {
  
  font-size: 12px;
}

.labs-empty-state span {
  max-width: 560px;
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.55;
}

.workspace-ready {
  margin: 0 14px 15px;
  padding: 14px;
  
  border-radius: 14px;
  
}

.workspace-ready h3 {
  margin: 0;
  font-size: 11px;
}

.workspace-variable-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 11px;
}

.workspace-variable-list span {
  padding: 6px 8px;
  
  border-radius: 999px;
  
  
  font-size: 7px;
}

.workspace-flow {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.workspace-flow div {
  min-height: 63px;
  padding: 10px;
  
  border-radius: 11px;
  
}

.workspace-flow span {
  display: block;
  
  font-size: 7px;
  text-transform: uppercase;
}

.workspace-flow strong {
  display: block;
  margin-top: 6px;
  font-size: 8px;
  line-height: 1.4;
}

.ai-summary-list {
  margin: 0 14px 13px;
  display: grid;
  gap: 7px;
}

.ai-summary-list div {
  padding: 10px;
  
  border-radius: 10px;
  
}

.ai-summary-list span {
  display: block;
  
  font-size: 7px;
}

.ai-summary-list strong {
  display: block;
  margin-top: 5px;
  font-size: 8px;
}

.calculated-field {
  display: block;
  margin: 0 14px 9px;
}

.labs-result-grid aside>.button {
  width: calc(100% - 28px);
  margin: 0 14px 12px;
}

.calculated-list {
  margin: 0 14px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.calculated-item {
  padding: 6px 8px;
  
  border-radius: 999px;
  
  
  font-size: 7px;
  cursor: pointer;
}

/* DASHBOARDS */
.dashboards-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.dashboard-list-panel {
  position: sticky;
  top: 96px;
}

.dashboard-list {
  padding: 0 11px 13px;
  display: grid;
  gap: 7px;
}

.dashboard-list-item {
  
  border-radius: 11px;
  padding: 11px;
  
  
  text-align: left;
}

.dashboard-list-item.active {
  
  
}

.dashboard-list-item strong {
  display: block;
  font-size: 9px;
}

.dashboard-list-item span {
  display: block;
  margin-top: 4px;
  
  font-size: 7px;
}

.dashboard-detail {
  min-width: 0;
  display: grid;
  gap: 15px;
}

.dashboard-detail-header {
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.dashboard-detail-header h2 {
  margin: 6px 0 0;
  font-size: 18px;
}

.dashboard-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.dashboard-meta span {
  padding: 5px 7px;
  
  border-radius: 999px;
  
  font-size: 7px;
}

.dashboard-widget-grid {
  padding: 0 14px 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-widget {
  min-height: 90px;
  padding: 12px;
  
  border-radius: 12px;
  
}

.dashboard-widget span {
  
  font-size: 7px;
}

.dashboard-widget strong {
  display: block;
  margin-top: 10px;
  font-size: 13px;
}

.dashboard-widget small {
  display: block;
  margin-top: 6px;
  
  font-size: 7px;
}

.dashboard-empty {
  min-height: 280px;
  display: grid;
  place-content: center;
  text-align: center;
  
}

.dashboard-empty h3 {
  margin: 0;
  
  font-size: 13px;
}

.dashboard-empty p {
  font-size: 9px;
}

/* LIBRARY */
.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.library-card {
  min-height: 245px;
  padding: 17px;
  
  border-radius: 18px;
  
  display: flex;
  flex-direction: column;
}

.library-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  
  
  font-size: 19px;
}

.library-card .module-path {
  margin-top: 15px;
  
}

.library-card h2 {
  margin: 7px 0 6px;
  font-size: 15px;
}

.library-card p {
  margin: 0;
  
  font-size: 9px;
  line-height: 1.55;
}

.library-card .tag-row {
  margin-bottom: 15px;
}

.library-card .button {
  margin-top: auto;
}

.library-status {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 11px;
  padding: 5px 7px;
  
  border-radius: 999px;
  
  
  font-size: 7px;
}

/* IA */
.ai-dock {
  position: fixed;
  right: 0;
  bottom: 44px;
  z-index: 70;
  min-height: 43px;
  padding: 0 16px 0 12px;
  
  
  border-radius: 14px 0 0 14px;
  
  
  
  display: flex;
  align-items: center;
  gap: 8px;
  
}

.ai-dock span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
}

.ai-window {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 75;
  width: min(410px, calc(100vw - 36px));
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
  display: none;
  grid-template-rows: auto 1fr auto;
}

.ai-window.open {
  display: grid;
}

.ai-window.minimized {
  height: auto;
  grid-template-rows: auto;
}

.ai-window.minimized .ai-messages,
.ai-window.minimized .ai-form {
  display: none;
}

.ai-window-header {
  padding: 14px;
  
  display: flex;
  justify-content: space-between;
  gap: 12px;
  
}

.ai-window-header span {
  display: block;
  
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.ai-window-header strong {
  display: block;
  margin-top: 4px;
  font-size: 10px;
}

.ai-window-header div:last-child {
  display: flex;
  gap: 6px;
}

.ai-window-header button {
  width: 30px;
  height: 30px;
  
  border-radius: 9px;
  
  
}

.ai-messages {
  padding: 14px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  
}

.ai-message {
  max-width: 88%;
  padding: 11px;
  
  border-radius: 13px;
  
}

.ai-message-user {
  justify-self: end;
  
  
}

.ai-message strong {
  display: block;
  font-size: 8px;
}

.ai-message p {
  margin: 6px 0 0;
  
  font-size: 9px;
  line-height: 1.55;
}

.ai-form {
  padding: 11px;
  
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  
}

.ai-form input {
  min-width: 0;
  height: 39px;
  
  border-radius: 10px;
  padding: 0 11px;
  
  
  
}

.ai-form button {
  
  border-radius: 10px;
  padding: 0 13px;
  
  
  font-size: 8px;
  font-weight: 850;
}

/* ==========================================================
   TEMA + IDIOMA
   ========================================================== */

.ui-selector-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ui-selector {
  height: 36px;
  padding: 0 28px 0 11px;
  
  border-radius: 10px;
  
  
  
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
}

.ui-selector:focus {
  
}

html[data-theme="light"] {
  
  
  
  
  

  
  

  
  
  

  
}

html[data-theme="light"] body {
  
  
}

html[data-theme="light"] .glass,
html[data-theme="light"] .glass-soft {
  
  
  
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .app-topbar {
  
}

html[data-theme="light"] .nav-item {
  
}

html[data-theme="light"] .nav-item.active {
  
  
  
}

html[data-theme="light"] .context-pill,
html[data-theme="light"] .user-chip,
html[data-theme="light"] .ui-selector {
  
  
}

html[data-theme="light"] .ui-selector option {
  
  
}

html[data-theme="light"] .plant-module-card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .ai-profile-card {
  
}

html[data-theme="light"] .ai-profile-card.active {
  
}

html[data-theme="light"] .login-form input,
html[data-theme="light"] .modal-form input,
html[data-theme="light"] .calculated-field input,
html[data-theme="light"] .labs-config-grid select,
html[data-theme="light"] .manual-range input,
html[data-theme="light"] .refresh-block select {
  
  
}

html[data-theme="dark"] .plant-map-image {
  
}

html[data-theme="light"] .plant-map-image {
  
}

@media (max-width: 680px) {
  .ui-selector-group {
    gap: 4px;
  }

  .ui-selector {
    width: 62px;
    padding-left: 7px;
  }
}

/* MODALS */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 20px;
  
  
  display: grid;
  place-items: center;
}

.modal-card {
  width: min(570px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 22px;
  padding: 19px;
}

.modal-card-wide {
  width: min(760px, 100%);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.modal-header h2 {
  margin: 7px 0 0;
  font-size: 22px;
  letter-spacing: -.035em;
}

.modal-close {
  width: 36px;
  height: 36px;
  
  border-radius: 10px;
  
  
  font-size: 19px;
}

.modal-footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.two-column,
.context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.detail-modal-grid,
.context-grid {
  display: grid;
  gap: 8px;
}

.detail-modal-grid div,
.context-grid div {
  padding: 11px;
  
  border-radius: 11px;
  
}

.detail-modal-grid span,
.context-grid span {
  display: block;
  
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.detail-modal-grid strong,
.context-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.45;
}

.modal-description {
  
  font-size: 10px;
  line-height: 1.6;
}

.modal-note {
  margin-top: 13px;
  padding: 11px;
  
  border-radius: 11px;
  
  
  font-size: 8px;
  line-height: 1.55;
}

.payload-preview {
  max-height: 470px;
  overflow: auto;
  padding: 14px;
  
  border-radius: 12px;
  
  
  font-size: 9px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 150;
  transform: translate(-50%, 25px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 14px;
  
  border-radius: 999px;
  
  
  
  
  font-size: 9px;
  transition: opacity .22s, transform .22s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1220px) {
  .app-view {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .sidebar {
    width: 68px;
    padding-inline: 8px;
  }

  .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .sidebar-brand-copy,
  .nav-label,
  .nav-item>span:last-child,
  .sidebar-status {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding: 0;
  }

  .app-main {
    grid-column: 2;
  }

  .home-grid,
  .labs-result-grid {
    grid-template-columns: 1fr;
  }

  .labs-variable-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .login-layout {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    min-height: 620px;
  }

  .login-panel {
    min-height: auto;
    padding: 20px 0 35px;
  }

  .app-view {
    display: block;
  }

  .sidebar {
    transform: translateX(-120%);
    width: 230px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-brand-copy,
  .nav-label,
  .nav-item>span:last-child,
  .sidebar-status {
    display: block;
  }

  .nav-item {
    justify-content: flex-start;
    padding: 0 11px;
  }

  .app-main {
    width: 100%;
  }

  .app-topbar {
    margin-left: 14px;
  }

  .mobile-only {
    display: grid;
  }

  .context-pill {
    display: none;
  }

  .plant-layout,
  .labs-layout,
  .dashboards-layout {
    grid-template-columns: 1fr;
  }

  .plant-tree,
  .labs-sources,
  .dashboard-list-panel {
    position: static;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .kpi-toolbar {
    grid-template-columns: 1fr;
  }

  .grafana-grid {
    grid-template-columns: 1fr;
  }

  .library-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .login-layout {
    padding: 10px;
  }

  .hero-panel {
    min-height: 570px;
    border-radius: 20px;
  }

  .hero-copy {
    left: 24px;
    right: 24px;
    bottom: 160px;
  }

  .hero-copy h2 {
    font-size: 38px;
  }

  .system-strip {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .system-strip div {
    
    
    padding: 7px 9px;
  }

  .system-strip div:first-child {
    
  }

  .login-card {
    padding: 24px;
  }

  .app-topbar {
    top: 8px;
    margin: 8px;
  }

  .topbar-actions .user-chip,
  .topbar-actions .button-danger {
    display: none;
  }

  .app-content {
    padding: 18px 11px 36px;
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .summary-grid,
  .summary-grid-three,
  .library-grid,
  .labs-variable-grid,
  .labs-config-grid,
  .dashboard-widget-grid {
    grid-template-columns: 1fr;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .installed-module-card {
    grid-template-columns: 42px 1fr;
  }

  .installed-module-icon {
    width: 42px;
    height: 42px;
  }

  .module-arrow {
    display: none;
  }

  .electrical-title-row {
    grid-template-columns: 42px 1fr;
  }

  .electrical-title-row>.state-badge {
    grid-column: 1/-1;
    justify-self: start;
  }

  .variable-grid {
    grid-template-columns: 1fr;
  }

  .manual-range {
    grid-template-columns: 1fr;
  }

  .refresh-block {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-flow {
    grid-template-columns: 1fr 1fr;
  }

  .grafana-pair {
    grid-template-columns: 1fr;
  }

  .grafana-pair iframe {
    min-height: 300px;
  }

  .two-column,
  .context-grid {
    grid-template-columns: 1fr;
  }

  .ai-window {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }
}


/* ==========================================================
   PLUMB UI · IDENTIDAD Y NAVEGACIÓN CONTEXTUAL
   ========================================================== */
:root {
  
  
  
  
  
}

.plumb-symbol {
  width: 48px;
  height: 48px;
  
  border-radius: 14px;
  display: grid;
  place-items: center;
  
  
  
  flex: 0 0 auto;
}

.plumb-symbol svg {
  width: 31px;
  height: 31px;
}

.sidebar .plumb-symbol {
  width: 50px;
  height: 50px;
  border-radius: 15px;
}

.hero-brand h1 {
  font-size: 20px;
  letter-spacing: .16em;
}

.sidebar-brand {
  align-items: flex-start;
  padding: 10px 14px 38px;
}

.sidebar-brand-copy {
  padding-top: 1px;
}

.sidebar-brand-copy strong {
  font-size: 18px;
  letter-spacing: .16em;
}

.sidebar-brand-copy span {
  margin-top: 8px;
  
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sidebar-brand-copy small {
  display: block;
  margin-top: 6px;
  
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
}


.sidebar-brand-copy .brand-powered {
  
}

.sidebar-brand-copy .brand-sync {
  
  font-style: normal;
  font-weight: 700;
}

.sidebar-brand-copy .brand-subline {
  
}

html[data-theme="light"] .sidebar-brand-copy .brand-powered {
  
}

html[data-theme="light"] .sidebar-brand-copy .brand-subline {
  
}

.app-view {
  grid-template-columns: 286px minmax(0, 1fr);
}

.sidebar {
  inset: 0 auto 0 0;
  width: 270px;
  padding: 28px 18px 20px;
  border-radius: 0;
  
  
  
  
  
}

.app-main {
  grid-column: 2;
}

.nav-label {
  padding: 0 18px 11px;
  
  font-size: 10px;
  letter-spacing: .16em;
}

.nav-label-management {
  margin-top: 34px;
}

.sidebar-nav {
  gap: 7px;
}

.nav-item {
  min-height: 54px;
  padding: 0 17px;
  border-radius: 15px;
  
  font-size: 13px;
  font-weight: 540;
}

.nav-item:hover {
  
}

.nav-item.active {
  
  
  
  
}

.nav-icon {
  width: 25px;
  
  font-size: 20px;
}

.nav-item.active .nav-icon {
  
}

.sidebar-status {
  margin: 0 7px;
  
}

.app-topbar {
  margin-right: 16px;
}

.context-panel-button {
  min-height: 38px;
  padding: 0 12px;
  
  border-radius: 11px;
  
  
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.context-panel-button span {
  font-size: 9px;
  font-weight: 750;
}

.context-panel-button b {
  
  font-size: 16px;
  font-weight: 500;
}

.full-workspace-layout {
  display: block !important;
}

.full-workspace-layout>.plant-workspace,
.full-workspace-layout>.labs-workspace,
.full-workspace-layout>.dashboard-detail {
  width: 100%;
}

.labs-result-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
}

/* Right contextual sidebar */
.context-sidebar {
  position: fixed;
  top: 84px;
  right: 16px;
  bottom: 16px;
  z-index: 65;
  width: min(360px, calc(100vw - 32px));
  border-radius: 24px;
  overflow: hidden;
  transform: translateX(calc(100% + 30px));
  opacity: 0;
  pointer-events: none;
  transition: transform .26s ease, opacity .2s ease;
  
  
}

.context-sidebar.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.context-sidebar-header {
  min-height: 78px;
  padding: 18px;
  
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  
}

.context-sidebar-header h2 {
  margin: 7px 0 0;
  font-size: 17px;
}

.context-sidebar-header button {
  width: 35px;
  height: 35px;
  
  border-radius: 10px;
  
  
  font-size: 19px;
}

.context-sidebar-body {
  height: calc(100% - 78px);
  padding: 14px;
  overflow: auto;
}

.context-route-panel {
  display: none;
  gap: 14px;
}

.context-route-panel.active {
  display: grid;
}

.context-section {
  padding: 15px;
  
  border-radius: 17px;
  
}

.context-label {
  display: block;
  
  font-size: 11px;
  font-weight: 800;
}

.context-help {
  margin: 6px 0 12px;
  
  font-size: 8px;
  line-height: 1.5;
}

.context-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.context-tree {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  
  font-size: 9px;
}

.context-tree>div {
  padding: 8px 10px;
}

.context-tree .level-1 {
  padding-left: 22px;
}

.context-tree .level-2 {
  padding-left: 34px;
}

.context-tree button {
  min-height: 42px;
  
  border-radius: 11px;
  padding: 0 10px;
  
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
}

.context-tree button small {
  
  font-size: 7px;
}

.context-option-list {
  margin-top: 11px;
  display: grid;
  gap: 7px;
}

.context-option {
  min-height: 49px;
  padding: 9px 11px;
  
  border-radius: 12px;
  
  
  text-align: left;
}

.context-option span {
  display: block;
  font-size: 10px;
  font-weight: 750;
}

.context-option small {
  display: block;
  margin-top: 4px;
  
  font-size: 8px;
}

.context-option.active {
  
  
  
}

.context-module-list {
  display: grid;
  gap: 8px;
}

.context-module {
  min-height: 65px;
  padding: 10px;
  
  border-radius: 13px;
  
  
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.context-module.active {
  
  
}

.context-module.disabled {
  opacity: .48;
}

.context-module-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  
  
  font-size: 16px;
}

.context-module strong {
  display: block;
  font-size: 8px;
}

.context-module small {
  display: block;
  margin-top: 4px;
  
  font-size: 7px;
}

.context-module b {
  
  font-size: 14px;
  font-weight: 500;
}

.context-config-grid {
  margin-top: 12px;
  grid-template-columns: 1fr !important;
}

.context-config-grid label {
  font-size: 8px;
}

.context-config-grid select {
  min-height: 39px;
}

.context-dashboard-list {
  margin-top: 12px;
}

.context-sidebar-handle {
  position: fixed;
  right: 0;
  top: 150px;
  z-index: 64;
  width: 39px;
  height: 52px;
  
  
  border-radius: 13px 0 0 13px;
  
  
  
  
}

.context-sidebar-handle[hidden] {
  display: none !important;
}

/* Home AI profiles */
.ai-home-panel {
  grid-column: 1 / -1;
}

.ai-profile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.ai-profile-card {
  position: relative;
  min-height: 142px;
  padding: 14px;
  
  border-radius: 15px;
  
  
  text-align: left;
  transition: transform .18s, border-color .18s, background .18s;
}

.ai-profile-card:hover {
  transform: translateY(-2px);
  
}

.ai-profile-card.active {
  
  
  
}

.ai-profile-card>span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  
  
  font-size: 16px;
}

.ai-profile-card.active>span {
  
  
}

.ai-profile-card strong {
  display: block;
  margin-top: 15px;
  font-size: 9px;
}

.ai-profile-card small {
  display: block;
  margin-top: 7px;
  
  font-size: 8px;
  line-height: 1.5;
}

.ai-profile-card i {
  position: absolute;
  right: 10px;
  top: 10px;
  
  font-size: 6px;
  font-style: normal;
  letter-spacing: .08em;
}

.ai-selected-context {
  margin-top: 12px;
  padding: 12px 14px;
  
  border-radius: 13px;
  
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.ai-selected-context span {
  
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ai-selected-context strong {
  font-size: 9px;
  font-weight: 600;
}

/* Utility pages */
.empty-professional {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.empty-professional .empty-icon {
  width: 52px;
  height: 52px;
  
  border-radius: 16px;
  display: grid;
  place-items: center;
  
  
  font-size: 22px;
}

.empty-professional h2 {
  margin: 16px 0 7px;
  font-size: 15px;
}

.empty-professional p {
  margin: 0;
  
  font-size: 9px;
}

.settings-panel {
  max-width: 900px;
  overflow: hidden;
}

.setting-row:first-child {
  
}

.setting-row .ui-selector {
  min-width: 160px;
}

.setting-row {
  min-height: 76px;
  padding: 14px 18px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.setting-row strong {
  display: block;
  font-size: 10px;
}

.setting-row span {
  display: block;
  margin-top: 5px;
  
  font-size: 8px;
}

.toggle-switch {
  width: 43px;
  height: 25px;
  
  border-radius: 999px;
  
  position: relative;
}

.toggle-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  
  transition: left .2s, background .2s;
}

.toggle-switch.active {
  
}

.toggle-switch.active i {
  left: 21px;
  
}

.ai-dock {
  
}

.ai-dock .status-dot {
  
  
}

.ai-form button,
.button-primary {
  
}

@media (max-width: 1360px) {
  .ai-profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1220px) {
  .app-view {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .sidebar {
    width: 78px;
    padding-inline: 10px;
  }

  .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .sidebar-brand-copy,
  .nav-label,
  .nav-item>span:last-child,
  .sidebar-status {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding: 0;
  }

  .app-main {
    grid-column: 2;
  }
}

@media (max-width: 980px) {
  .app-view {
    display: block;
  }

  .sidebar {
    width: 270px;
    transform: translateX(-110%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-brand-copy,
  .nav-label,
  .nav-item>span:last-child,
  .sidebar-status {
    display: block;
  }

  .nav-item {
    justify-content: flex-start;
    padding: 0 17px;
  }

  .app-main {
    width: 100%;
  }

  .ai-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .labs-result-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .ai-profile-grid {
    grid-template-columns: 1fr;
  }

  .ai-selected-context {
    grid-template-columns: 1fr;
  }

  .context-sidebar {
    top: 72px;
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }

  .context-panel-button span {
    display: none;
  }
}


/* ==========================================================
   VISTA GENERAL · LAYOUT 3/4 + 1/4
   ========================================================== */
.app-topbar {
  
  
  
}

.app-topbar .context-pill,
.app-topbar .icon-button,
.app-topbar .user-chip,
.app-topbar .button-danger,
.app-topbar .context-panel-button {
  
  
  
}

.home-command-grid {
  grid-template-columns: minmax(0, 3fr) minmax(330px, 1fr);
  align-items: stretch;
  gap: 18px;
}

.home-command-grid>.panel {
  min-height: 650px;
  height: 100%;
}

.home-modules-panel {
  display: flex;
  flex-direction: column;
}

.home-module-slots {
  flex: 1;
  min-height: 0;
  padding: 0 15px 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-module-slot {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 20px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-content: center;
}

.reserve-module-card {
  min-width: 0;
  min-height: 0;
  padding: 20px;
  
  border-radius: 16px;
  
  
  display: flex;
  align-items: center;
  gap: 15px;
}

.reserve-module-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  
  border-radius: 14px;
  display: grid;
  place-items: center;
  
  
  font-size: 20px;
}

.reserve-module-card span {
  display: block;
  
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}

.reserve-module-card strong {
  display: block;
  margin-top: 7px;
  
  font-size: 12px;
  font-weight: 650;
}

.reserve-module-card small {
  display: block;
  max-width: 260px;
  margin-top: 7px;
  
  font-size: 8px;
  line-height: 1.5;
}

.ai-home-panel {
  grid-column: auto;
}

.ai-contextual-panel {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  
}

.ai-contextual-header {
  padding: 24px 2px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ai-contextual-header h2 {
  margin: 9px 0 0;
  font-size: 18px;
  letter-spacing: -.025em;
}

.ai-contextual-header p {
  margin: 7px 0 0;
  
  font-size: 10px;
}

.ai-contextual-symbol {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  
  
  font-size: 18px;
}

.home-ai-prompt {
  min-height: 58px;
  padding: 8px 9px;
  
  border-radius: 15px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  
}

.home-ai-prompt-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  
  
}

.home-ai-prompt input {
  min-width: 0;
  
  
  
  
  font-size: 10px;
}

.home-ai-prompt input::placeholder {
  
}

.home-ai-prompt button {
  width: 40px;
  height: 40px;
  
  border-radius: 11px;
  
  
  font-size: 18px;
}

.ai-profile-list {
  flex: 1;
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, minmax(68px, 1fr));
  gap: 9px;
}

.ai-profile-list .ai-profile-card {
  min-height: 0;
  height: 100%;
  padding: 11px 12px;
  border-radius: 13px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  
}

.ai-profile-list .ai-profile-card:hover {
  transform: translateX(2px);
}

.ai-profile-list .ai-profile-card.active {
  
  
  
}

.ai-profile-list .ai-profile-card>span {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 15px;
}

.ai-profile-list .ai-profile-card strong {
  margin: 0;
  font-size: 9px;
}

.ai-profile-list .ai-profile-card small {
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.35;
}

.ai-profile-list .ai-profile-card b {
  
  font-size: 14px;
  font-weight: 500;
}

.ai-profile-list .ai-profile-card i {
  top: 8px;
  right: 10px;
}

.ai-contextual-footer {
  margin-top: 12px;
  grid-template-columns: 1fr;
  gap: 6px;
}

.ai-contextual-footer .state-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.ai-contextual-footer {
  position: relative;
  padding-right: 86px;
}

@media (max-width: 1280px) {
  .home-command-grid {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  }

  .home-module-slots {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(130px, auto));
  }

  .home-command-grid>.panel {
    min-height: 760px;
  }
}

@media (max-width: 1040px) {
  .home-command-grid {
    grid-template-columns: 1fr;
  }

  .home-command-grid>.panel {
    min-height: auto;
  }

  .home-module-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(150px, auto));
  }

  .ai-profile-list {
    grid-template-rows: none;
  }

  .ai-profile-list .ai-profile-card {
    min-height: 74px;
  }
}

@media (max-width: 680px) {
  .home-module-slots {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .home-module-slot {
    grid-template-columns: 42px 1fr;
  }

  .home-module-slot .module-arrow {
    display: none;
  }

  .reserve-module-card {
    min-height: 118px;
  }
}


/* ==========================================================
   ENCABEZADO DINÁMICO EN BARRA SUPERIOR
   Los títulos y descripciones de todas las pestañas se montan
   dentro de la barra flotante al cambiar de ruta.
   ========================================================== */
.app-topbar {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  
}

.topbar-navigation-row {
  min-height: 66px;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-page-slot {
  min-height: 112px;
  padding: 18px 22px 20px;
  
  
}

.topbar-page-slot:empty {
  display: none;
}

.topbar-page-slot .page-heading {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.topbar-page-slot .page-heading>div:first-child {
  min-width: 0;
  flex: 1;
}

.topbar-page-slot .page-heading .eyebrow {
  font-size: 9px;
  letter-spacing: .15em;
}

.topbar-page-slot .page-heading h1 {
  margin: 7px 0 0;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.04em;
}

.topbar-page-slot .page-heading p {
  max-width: 780px;
  margin: 7px 0 0;
  
  font-size: 10px;
  line-height: 1.5;
}

.topbar-page-slot .plant-context-card {
  min-width: 225px;
  flex: 0 0 auto;
  
  
}

.topbar-page-slot .labs-actions {
  flex: 0 0 auto;
  align-self: center;
}

/* Los encabezados dejan de ocupar espacio dentro de cada vista. */
.page-view>.page-heading {
  display: none !important;
}

/* El panel contextual comienza debajo del encabezado expandido. */
.context-sidebar {
  top: 205px;
}

.context-sidebar-handle {
  top: 245px;
}

@media (max-width: 980px) {
  .topbar-navigation-row {
    padding-inline: 13px;
  }

  .topbar-page-slot {
    padding: 16px 18px 18px;
  }

  .context-sidebar {
    top: 190px;
  }
}

@media (max-width: 680px) {
  .app-topbar {
    border-radius: 17px;
  }

  .topbar-navigation-row {
    min-height: 58px;
    padding: 9px 10px;
  }

  .topbar-page-slot {
    min-height: 0;
    padding: 14px;
  }

  .topbar-page-slot .page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .topbar-page-slot .page-heading h1 {
    font-size: 22px;
  }

  .topbar-page-slot .page-heading p {
    font-size: 9px;
  }

  .topbar-page-slot .plant-context-card,
  .topbar-page-slot .labs-actions,
  .topbar-page-slot .state-badge {
    align-self: flex-start;
  }

  .topbar-page-slot .plant-context-card {
    width: 100%;
    min-width: 0;
  }

  .context-sidebar {
    top: 178px;
  }
}


/* ==========================================================
   AJUSTE 2026-07 · TOPBAR COMPACTO + IA PLUMB ÚNICA
   ========================================================== */
.app-topbar {
  border-radius: 18px;
}

.topbar-navigation-row {
  min-height: 52px;
  padding: 7px 12px;
  gap: 12px;
}

.topbar-page-slot {
  min-height: 78px;
  padding: 11px 18px 13px;
}

.topbar-page-slot .page-heading {
  align-items: center;
  gap: 18px;
}

.topbar-page-slot .page-heading .eyebrow {
  font-size: 8px;
  line-height: 1;
}

.topbar-page-slot .page-heading h1 {
  margin-top: 5px;
  font-size: clamp(19px, 1.65vw, 25px);
  line-height: 1.02;
}

.topbar-page-slot .page-heading p {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.35;
}

.topbar-page-slot .plant-context-card {
  min-width: 205px;
  padding: 9px 12px;
}

.topbar-page-slot .plant-context-card span {
  font-size: 7px;
}

.topbar-page-slot .plant-context-card strong {
  margin-top: 4px;
  font-size: 9px;
}

.topbar-actions {
  gap: 7px;
}

.system-status-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
}

.system-status-pill {
  height: 32px;
  min-width: 0;
  padding: 0 9px;
  gap: 6px;
  font-size: 8px;
  letter-spacing: .035em;
}

.system-status-pill .status-dot {
  width: 6px;
  height: 6px;
}

.app-topbar .icon-button,
.app-topbar .user-chip {
  height: 34px;
}

.app-topbar .icon-button {
  width: 34px;
}

.app-topbar .button-compact {
  min-height: 34px;
}

.app-topbar .user-chip {
  padding: 0 12px;
}

.app-topbar .user-chip span {
  
  font-weight: 750;
}

.app-topbar .user-chip strong {
  display: none;
}

/* El panel contextual debe comenzar debajo del topbar compacto. */
.context-sidebar {
  top: 154px;
}

.context-sidebar-handle {
  top: 190px;
}

/* Capacidades futuras: visibles, pero inactivas. */
.ai-profile-list .ai-profile-card.ai-profile-disabled,
.ai-profile-list .ai-profile-card:disabled {
  opacity: .38;
  
  
  
  
  cursor: not-allowed;
  
  transform: none;
}

.ai-profile-list .ai-profile-card.ai-profile-disabled:hover,
.ai-profile-list .ai-profile-card:disabled:hover {
  transform: none;
  
  
}

.ai-profile-list .ai-profile-card.ai-profile-disabled>span,
.ai-profile-list .ai-profile-card:disabled>span {
  
  
}

.ai-profile-list .ai-profile-card.ai-profile-disabled b,
.ai-profile-list .ai-profile-card:disabled b {
  
}

.ai-profile-list .ai-profile-card.ai-profile-global {
  order: -1;
}

@media (max-width: 1180px) {
  .system-status-pill span {
    display: none;
  }

  .system-status-pill {
    width: 30px;
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 980px) {
  .system-status-cluster {
    display: none;
  }

  .topbar-page-slot {
    padding: 10px 15px 12px;
  }

  .context-sidebar {
    top: 142px;
  }
}

@media (max-width: 680px) {
  .topbar-navigation-row {
    min-height: 50px;
    padding: 7px 9px;
  }

  .topbar-page-slot {
    padding: 10px 12px 12px;
  }

  .topbar-page-slot .page-heading {
    gap: 9px;
  }

  .topbar-page-slot .page-heading h1 {
    font-size: 19px;
  }

  .topbar-page-slot .page-heading p {
    font-size: 8px;
  }
}


/* ==========================================================
   AJUSTE PLANTA MODULAR + NAVEGACIÓN SVG + IA FUTURA VISIBLE
   ========================================================== */
.nav-icon {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  
  stroke-width: 1.75;
}

.nav-item-disabled {
  opacity: .64;
  cursor: not-allowed;
}

.nav-item-disabled:hover {
  
  
}

.nav-item-disabled .nav-icon {
  
}

.nav-lock {
  margin-left: auto;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  
}

.nav-lock svg {
  width: 13px;
  height: 13px;
  
  stroke-width: 1.8;
}

/* Las capacidades futuras deben verse con claridad, sin parecer operativas. */
.ai-profile-list .ai-profile-card.ai-profile-disabled,
.ai-profile-list .ai-profile-card:disabled {
  opacity: .72;
  
  
  
  
  cursor: not-allowed;
  
}

.ai-profile-list .ai-profile-card.ai-profile-disabled strong {
  
}

.ai-profile-list .ai-profile-card.ai-profile-disabled small {
  
}

.ai-profile-list .ai-profile-card.ai-profile-disabled>span {
  
  
  
}

.ai-profile-list .ai-profile-card>span svg {
  width: 20px;
  height: 20px;
  
  stroke-width: 1.75;
}

.ai-profile-list .ai-profile-card.ai-profile-disabled b {
  
  font-size: 7px;
  letter-spacing: .08em;
}

.ai-profile-list .ai-profile-card.ai-profile-disabled i {
  position: absolute;
  top: 8px;
  right: 10px;
  
  font-size: 6px;
  letter-spacing: .11em;
}

/* Inicio de Planta: cuatro módulos, uno real y tres futuros. */
.plant-module-launcher {
  margin-bottom: 18px;
}

.plant-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.plant-module-card {
  position: relative;
  min-height: 238px;
  padding: 18px;
  border-radius: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  overflow: hidden;
}

.plant-module-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  
  
  
}

.plant-module-card-icon svg,
.electrical-icon svg {
  width: 23px;
  height: 23px;
  
  stroke-width: 1.75;
}

.plant-module-card h2 {
  margin: 5px 0 7px;
  font-size: 15px;
}

.plant-module-card p {
  margin: 0;
  
  font-size: 9px;
  line-height: 1.5;
}

.plant-module-enabled {
  
  
  
  
  transition: .2s ease;
}

.plant-module-enabled:hover {
  transform: translateY(-3px);
  
}

.plant-module-enabled .plant-module-card-icon {
  
  
  
}

.plant-module-enabled .state-badge {
  position: absolute;
  top: 17px;
  right: 17px;
}

.plant-module-enabled b {
  margin-top: auto;
  
  font-size: 8px;
  letter-spacing: .09em;
}

.plant-module-disabled {
  
  
  
}

.plant-module-disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  
  pointer-events: none;
}

.future-module-state {
  margin-top: auto;
  
  font-size: 7px;
  letter-spacing: .1em;
}

.plant-electrical-expansion {
  display: grid;
  gap: 15px;
}

.plant-electrical-expansion[hidden] {
  display: none !important;
}

.integrated-electrical-header {
  overflow: visible;
}

.module-collapse-button {
  min-height: 35px;
  padding: 0 12px;
  
  border-radius: 10px;
  
  
  font-size: 8px;
}

.module-collapse-button:hover {
  
  
}

.plant-integrated-panel {
  padding: 0 14px 16px;
  display: grid;
  gap: 15px;
}

.integrated-section-heading {
  padding: 18px 5px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.integrated-section-heading h2 {
  margin: 6px 0 5px;
  font-size: 15px;
}

.integrated-section-heading p {
  margin: 0;
  
  font-size: 9px;
}

.plant-integrated-panel .diagram-shell {
  border-radius: 18px;
}

.plant-integrated-kpi {
  display: grid;
  gap: 14px;
  
  padding-top: 4px;
}

.plant-integrated-kpi .integrated-section-heading {
  padding-inline: 5px;
}

/* El panel contextual lateral fue retirado del producto. */
.context-sidebar,
.context-sidebar-handle,
.context-panel-button {
  display: none !important;
}

@media(max-width:1250px) {
  .plant-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:720px) {
  .plant-module-grid {
    grid-template-columns: 1fr;
  }

  .plant-module-card {
    min-height: 190px;
  }

  .integrated-section-heading {
    flex-direction: column;
  }
}


/* ==========================================================
   SPACE NAME + PLANTA ELÉCTRICA EN VISTAS EXCLUSIVAS
   ========================================================== */
.ai-lock-label {
  min-width: 54px;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  
  font-size: 7px !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
}

.ai-lock-label svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  
  stroke-width: 1.8;
}

/* La selección de módulos y el módulo abierto son superficies separadas. */
.plant-module-launcher.panel {
  margin-bottom: 22px;
  padding: 16px;
  border-radius: 24px;
  
}

.plant-module-launcher .plant-module-grid {
  margin: 0;
}

.electrical-workspace-shell {
  margin-top: 24px;
  padding: 15px;
  
  border-radius: 26px;
  
  
}

.electrical-workspace-shell>.integrated-electrical-header,
.electrical-workspace-shell>.plant-integrated-panel {
  
  
}

.electrical-workspace-shell>.integrated-electrical-header {
  margin-bottom: 14px;
}

.electrical-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.electrical-view-toggle {
  min-height: 35px;
  padding: 0 13px;
  
  border-radius: 10px;
  
  
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .055em;
  transition: transform .18s ease, box-shadow .18s ease;
}

.electrical-view-toggle:hover {
  transform: translateY(-1px);
  
}

.electrical-workspace-view {
  min-width: 0;
}

.electrical-workspace-view[hidden] {
  display: none !important;
}

.electrical-workspace-view.active {
  display: block;
  animation: pageFade .2s ease;
}

.plant-integrated-kpi.electrical-workspace-view {
  padding-top: 0;
  
}

/* Configuración conserva el encabezado dinámico, sin contenido. */
#view-settings {
  min-height: 1px;
}

@media (max-width: 820px) {
  .electrical-title-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .electrical-header-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .electrical-header-actions button {
    flex: 1;
  }

  .electrical-workspace-shell {
    padding: 10px;
    border-radius: 20px;
  }
}


/* ==========================================================
   MARCA POWERED BY + MÓDULOS FUTUROS + IA FLOTANTE CENTRADA
   ========================================================== */

/* Los módulos no instanciados se presentan completamente en escala de grises. */
.plant-module-card.plant-module-disabled {
  
  
  
  
  
}

.plant-module-card.plant-module-disabled .plant-module-card-icon {
  
  
  
}

.plant-module-card.plant-module-disabled .module-path,
.plant-module-card.plant-module-disabled h2,
.plant-module-card.plant-module-disabled p,
.plant-module-card.plant-module-disabled .future-module-state {
  
}

.plant-module-card.plant-module-disabled h2 {
  
}

/* El acceso a IA aparece centrado en el margen inferior solamente en Home y Planta. */
.ai-dock {
  left: 50%;
  right: auto;
  bottom: 22px;
  min-height: 46px;
  padding: 0 18px;
  
  border-radius: 999px;
  transform: translateX(-50%);
  
  
  display: none;
}

.ai-dock.route-visible {
  display: flex;
}

.ai-dock:hover {
  
  
  transform: translateX(-50%) translateY(-2px);
}

.ai-dock span {
  font-size: 9px;
  letter-spacing: .08em;
}

/* La ventana de conversación también se abre centrada sobre el acceso flotante. */
.ai-window {
  left: 50%;
  right: auto;
  bottom: 78px;
  width: min(440px, calc(100vw - 30px));
  height: min(540px, calc(100vh - 120px));
  transform: translateX(-50%);
  display: none;
}

.ai-window.route-visible.open {
  display: grid !important;
}

@media (max-width: 700px) {
  .ai-dock {
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }

  .ai-window {
    left: 12px;
    right: 12px;
    bottom: 68px;
    width: auto;
    height: min(520px, calc(100vh - 90px));
    transform: none;
  }
}


/* ==========================================================
   AJUSTE IA FLOTANTE · CENTRADA EN EL ÁREA DE LA PESTAÑA
   ========================================================== */

.ai-profile-informative {
  cursor: default;
}

.ai-profile-informative:hover {
  transform: none;
}

.ai-dock,
.ai-window {
  left: var(--ai-workspace-center-x, calc(50vw + 122px));
}

.ai-dock {
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
}

.ai-dock.route-visible {
  display: flex;
}

.ai-window.route-visible.open {
  display: grid;
}

@media (max-width: 900px) {

  .ai-dock,
  .ai-window {
    left: 50%;
  }
}

@media (max-width: 700px) {
  .ai-window {
    left: 12px;
  }
}


/* ==========================================================
   PLUMB · TEXTURAS DEL SHELL DE APLICACIÓN
   Fondo artístico aplicado a barras laterales y barra superior.
   ========================================================== */
.sidebar,
.context-sidebar {
  
  
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  
}

.app-topbar {
  
  
  background-size: cover !important;
  background-position: center 58% !important;
  background-repeat: no-repeat !important;
  
}

.app-topbar .topbar-navigation-row,
.app-topbar .topbar-page-slot {
  
}

.topbar-page-slot {
  
}

.sidebar::before,
.context-sidebar::before,
.app-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  
  z-index: 0;
}

.sidebar>*,
.context-sidebar>*,
.app-topbar>* {
  position: relative;
  z-index: 1;
}

/* ==========================================================
   VISTA GENERAL · SELECTOR GEOGRÁFICO DE PLANTAS
   ========================================================== */
.home-plant-map-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.plant-map-shell {
  flex: 1;
  min-height: 0;
  margin: 0 15px 15px;
  
  border-radius: 18px;
  overflow: hidden;
  
  
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.plant-map-svg {
  width: 100%;
  height: 100%;
  min-height: 465px;
  display: block;
  
}

.map-land {
  
  
  stroke-width: 2;
}

.map-caba {
  
  
  stroke-width: 2;
  stroke-dasharray: 8 9;
}

.map-riachuelo {
  
  
  stroke-width: 7;
  stroke-linecap: round;
}

.map-corridor {
  
  
  stroke-width: 4;
  stroke-dasharray: 10 12;
  stroke-linecap: round;
}

.map-grid-lines path {
  
  
  stroke-width: 2;
}

.map-area-label,
.map-water-label {
  
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .13em;
}

.map-area-label-small {
  font-size: 13px;
}

.map-water-label {
  
  font-size: 14px;
  transform: rotate(-20deg);
  transform-origin: 830px 145px;
}

.map-plant-point {
  cursor: pointer;
  
}

.map-point-halo {
  
  
  stroke-width: 2;
  transition: fill .18s ease, stroke .18s ease, transform .18s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.map-point-core {
  
  
  stroke-width: 2;
  transition: fill .18s ease, filter .18s ease;
}

.map-point-cross {
  
  stroke-width: 2;
  stroke-linecap: round;
}

.map-plant-point:hover .map-point-halo,
.map-plant-point:focus .map-point-halo,
.map-plant-point.active .map-point-halo {
  
  
  transform: scale(1.12);
}

.map-plant-point.active .map-point-core {
  
  
  
}

.map-plant-point.active .map-point-cross {
  
}

.map-label-box rect {
  
  
  stroke-width: 1.5;
}

.map-plant-point.active .map-label-box rect {
  
  
}

.map-label-box text {
  
  font-size: 12px;
  font-weight: 600;
}

.map-label-box .map-label-title {
  
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .075em;
}

.map-label-box .map-label-status {
  
  font-size: 11px;
}

.map-label-box .map-label-status.muted {
  
}

.plant-map-footer {
  min-height: 76px;
  padding: 12px 14px;
  
  display: grid;
  grid-template-columns: minmax(170px, .7fr) minmax(280px, 1.3fr) auto;
  align-items: center;
  gap: 14px;
  
}

.plant-map-footer span {
  display: block;
  
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
}

.plant-map-footer strong {
  display: block;
  margin-top: 5px;
  
  font-size: 9px;
  line-height: 1.35;
}

#plantElectricalCard:disabled {
  cursor: not-allowed;
  opacity: .48;
}

@media (max-width: 1280px) {
  .plant-map-svg {
    min-height: 520px;
  }

  .plant-map-footer {
    grid-template-columns: 1fr;
  }

  .plant-map-footer .button {
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .plant-map-shell {
    margin-inline: 10px;
  }

  .plant-map-svg {
    min-height: 420px;
  }

  .map-label-box {
    display: none;
  }

  .map-area-label {
    font-size: 13px;
  }

  .map-water-label {
    display: none;
  }
}

/* ==========================================================
   VISTA GENERAL · MAPA ESTÁTICO + CAPA INTERACTIVA PLUMB
   La misma imagen sirve en DARK y LIGHT mediante variables.
   ========================================================== */
:root,
html[data-theme="dark"],
body.theme-dark {
  --plant-map-filter: brightness(.48) saturate(.74) contrast(1.18);
  
  
  
  
  
  
  
}

html[data-theme="light"],
body.theme-light {
  --plant-map-filter: none;
  
  
  
  
  
  
  
}

.plant-map-static-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1373 / 1063;
  overflow: hidden;
  isolation: isolate;
  
}

.plant-map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  
  transform: scale(1.01);
  transition: filter .28s ease, opacity .28s ease;
}

.plant-map-theme-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  
  transition: background .28s ease;
}

.plant-map-hotspot {
  position: absolute;
  z-index: 3;
  width: 42px;
  height: 42px;
  padding: 0;
  
  
  
  overflow: visible;
}

.plant-map-hotspot-almagro {
  left: 40.6%;
  top: 43.0%;
}

.plant-map-hotspot-ubicacion-2 {
  left: 74.8%;
  top: 81.8%;
}

.plant-hotspot-ring {
  position: absolute;
  inset: 1px;
  
  border-radius: 50%;
  
  display: grid;
  place-items: center;
  
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.plant-hotspot-ring i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  
  
  transition: background .18s ease, box-shadow .18s ease;
}

.plant-map-hotspot:hover .plant-hotspot-ring,
.plant-map-hotspot:focus-visible .plant-hotspot-ring,
.plant-map-hotspot.active .plant-hotspot-ring {
  transform: scale(1.08);
  
  
  
}

.plant-map-hotspot.active .plant-hotspot-ring i {
  
  
}

.plant-hotspot-callout {
  position: absolute;
  top: 50%;
  width: 270px;
  min-height: 92px;
  padding: 13px 14px;
  
  border-radius: 14px;
  
  
  
  
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  text-align: left;
  
  transform: translateY(-50%);
  transition: background .28s ease, border-color .18s ease, opacity .18s ease, transform .18s ease;
}

.plant-map-hotspot-almagro .plant-hotspot-callout {
  right: 58px;
}

.plant-map-hotspot-ubicacion-2 .plant-hotspot-callout {
  right: 58px;
}

.plant-hotspot-callout::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 18px;
  height: 1px;
  
}

.plant-hotspot-icon {
  width: 38px;
  height: 38px;
  
  border-radius: 50%;
  display: grid;
  place-items: center;
  
  
  font-size: 15px;
}

.plant-hotspot-copy {
  min-width: 0;
}

.plant-hotspot-copy strong {
  display: block;
  
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
}

.plant-hotspot-copy small {
  display: block;
  margin-top: 6px;
  
  font-size: 9px;
  line-height: 1.35;
}

.plant-hotspot-copy em {
  display: block;
  margin-top: 6px;
  
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.plant-map-hotspot:not(.active) .plant-hotspot-callout {
  opacity: .78;
}

.plant-map-hotspot:not(.active):hover .plant-hotspot-callout,
.plant-map-hotspot:not(.active):focus-visible .plant-hotspot-callout {
  opacity: 1;
  transform: translateY(-50%) translateX(-2px);
}

.plant-map-source {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  padding: 7px 9px;
  
  border-radius: 999px;
  
  
  
  
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .11em;
}

@media (max-width: 1100px) {
  .plant-hotspot-callout {
    width: 230px;
  }

  .plant-map-hotspot-almagro .plant-hotspot-callout,
  .plant-map-hotspot-ubicacion-2 .plant-hotspot-callout {
    right: 54px;
  }
}

@media (max-width: 680px) {
  .plant-map-static-stage {
    min-height: 440px;
  }

  .plant-map-image {
    object-position: 58% center;
  }

  .plant-hotspot-callout {
    display: none;
  }

  .plant-map-hotspot-almagro {
    left: 43%;
    top: 50%;
  }

  .plant-map-hotspot-ubicacion-2 {
    left: 83%;
    top: 84%;
  }

  .plant-map-source {
    top: 10px;
    right: 10px;
  }
}

/* ==========================================================
   CONFIGURACIÓN · SUBMENÚ + ENTORNO + TOPBAR CENTRADO
   ========================================================== */

/* Configuración desplegable en la navegación lateral */
.settings-nav-group {
  position: relative;
  display: grid;
  gap: 5px;
}

.settings-nav-toggle {
  position: relative;
}

.settings-nav-chevron {
  margin-left: auto;
  
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .2s ease, color .2s ease;
}

.settings-nav-group.open .settings-nav-chevron {
  transform: rotate(90deg);
  
}

.settings-submenu {
  margin: 2px 5px 4px 40px;
  padding: 5px 0 5px 10px;
  
  display: grid;
  gap: 5px;
}

.settings-subitem {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  
  
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.settings-subitem:hover {
  
  
  
}

.settings-subitem.active {
  
  
  
}

.settings-subicon {
  width: 18px;
  
  text-align: center;
  font-size: 12px;
}

.settings-subitem.active .settings-subicon {
  
}

html[data-theme="light"] .settings-submenu {
  
}

html[data-theme="light"] .settings-subitem {
  
  
}

html[data-theme="light"] .settings-subitem:hover {
  
  
  
}

html[data-theme="light"] .settings-subitem.active {
  
  
  
}

/* Workspace de configuración */
.settings-workspace {
  width: 100%;
  max-width: 980px;
}

.settings-section {
  display: none;
}

.settings-section.active {
  display: block;
  animation: pageFade .18s ease;
}

.settings-panel {
  width: 100%;
  max-width: 980px;
  overflow: hidden;
}

.settings-panel-header {
  min-height: 104px;
  padding: 20px 20px 17px;
  
  
}

.settings-panel-header h2 {
  margin: 7px 0 0;
  
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -.025em;
}

.settings-panel-header p {
  max-width: 650px;
  margin: 7px 0 0;
  
  font-size: 9px;
  line-height: 1.5;
}

.setting-row:first-of-type {
  
}

.setting-choice-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  
  border-radius: 12px;
  
}

.setting-choice {
  min-width: 92px;
  height: 34px;
  padding: 0 12px;
  
  border-radius: 9px;
  
  
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .055em;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.setting-choice:hover {
  
  
}

.setting-choice.active {
  
  
  
  
}

.settings-value-chip {
  min-width: 120px;
  min-height: 36px;
  padding: 0 13px;
  
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  
  font-size: 9px;
  font-weight: 750;
}

.settings-info-note {
  margin: 0 18px 18px;
  padding: 12px 14px;
  
  border-radius: 12px;
  
  
  font-size: 8px;
  line-height: 1.55;
}

html[data-theme="light"] .settings-panel-header {
  
}

html[data-theme="light"] .setting-choice-group {
  
}

html[data-theme="light"] .setting-choice {
  
}

html[data-theme="light"] .setting-choice:hover {
  
  
}

html[data-theme="light"] .setting-choice.active {
  
}

html[data-theme="light"] .settings-value-chip {
  
  
}

/* Estado COREXD / DATA-LAKE / IA exactamente centrado en la barra */
.topbar-navigation-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.topbar-left {
  min-width: 0;
  justify-self: start;
}

.system-status-cluster {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 7px;
}

@media (min-width: 981px) and (max-width: 1220px) {
  .settings-nav-group {
    position: relative;
  }

  .settings-submenu {
    position: absolute;
    left: 58px;
    bottom: 0;
    z-index: 90;
    width: 205px;
    margin: 0;
    padding: 8px;
    
    border-radius: 14px;
    
    
  }

  html[data-theme="light"] .settings-submenu {
    
    
  }
}

@media (max-width: 980px) {
  .topbar-navigation-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .system-status-cluster {
    display: none;
  }

  .topbar-actions {
    grid-column: 2;
  }

  .settings-submenu {
    margin-left: 40px;
  }
}

@media (max-width: 680px) {
  .setting-row {
    align-items: stretch;
    flex-direction: column;
  }

  .setting-choice-group {
    width: 100%;
  }

  .setting-choice {
    flex: 1;
    min-width: 0;
  }

  .settings-value-chip {
    align-self: flex-start;
  }
}

/* ==========================================================
   PLUMB · NAVEGACIÓN MODULAR + IA CONTEXTUAL + SIDEBAR
   Ajustes 2026-08-08
   ========================================================== */

/* 1) Un módulo no instanciado debe verse igual independientemente de su tipo. */
#plantElectricalCard.plant-module-disabled,
#plantElectricalCard.plant-module-disabled:disabled {
  opacity: 1 !important;
  cursor: pointer;
}

.plant-module-card[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.plant-module-card.module-nav-target {
  
  
}

/* 2) Planta desplegable, con el mismo lenguaje visual que Configuración. */
.plant-nav-group {
  position: relative;
  display: grid;
  gap: 5px;
}

.plant-nav-toggle {
  position: relative;
}

.plant-nav-chevron {
  margin-left: auto;
  
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}

.plant-nav-group.open .plant-nav-chevron {
  transform: rotate(90deg);
  
}

.plant-submenu {
  margin: 2px 5px 4px 40px;
  padding: 5px 0 5px 10px;
  
  display: grid;
  gap: 5px;
}

.plant-subitem {
  width: 100%;
  min-height: 48px;
  padding: 7px 9px;
  
  border-radius: 10px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  
  
  text-align: left;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.plant-subitem:hover {
  
  
  
}

.plant-subitem.active {
  
  
  
}

.plant-subicon {
  width: 18px;
  
  text-align: center;
  font-size: 13px;
}

.plant-subitem.active .plant-subicon {
  
}

.plant-subcopy {
  min-width: 0;
  display: block;
}

.plant-subcopy strong,
.plant-subcopy small {
  display: block;
}

.plant-subcopy strong {
  overflow: hidden;
  
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plant-subcopy small {
  margin-top: 3px;
  overflow: hidden;
  
  font-size: 6.5px;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plant-substate {
  grid-column: 2;
  justify-self: start;
  margin-top: -2px;
  
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .055em;
}

.plant-substate.instantiated {
  
}

html[data-theme="light"] .plant-submenu {
  
}

html[data-theme="light"] .plant-subitem {
  
  
  
}

html[data-theme="light"] .plant-subitem:hover {
  
  
  
}

html[data-theme="light"] .plant-subitem.active {
  
  
  
}

/* 3) Ícono de configuración: tres engranajes superpuestos. */
.multi-gear-icon {
  width: 25px !important;
  height: 25px !important;
  overflow: visible;
}

.multi-gear-icon circle,
.multi-gear-icon path {
  vector-effect: non-scaling-stroke;
  
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.multi-gear-icon .gear-c {
  opacity: .72;
}

/* 4) IA flotante translúcida y con contexto visible. */
.ai-dock {
  min-width: 172px;
  justify-content: center;
  
  
  
}

.ai-dock-copy {
  display: grid;
  gap: 2px;
  text-align: left;
}

.ai-dock-copy strong {
  
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .065em;
}

.ai-dock-copy small {
  
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .055em;
}

.ai-window {
  
  
  
  
  
}

.ai-window-header {
  
}

.ai-window-header b {
  
  font-size: inherit;
  font-weight: 750;
}

.ai-messages {
  
}

.ai-message {
  
  
}

.ai-message-user {
  
}

.ai-form {
  
}

html[data-theme="light"] .ai-dock {
  
}

html[data-theme="light"] .ai-window {
  
  
  
}

html[data-theme="light"] .ai-window-header,
html[data-theme="light"] .ai-form {
  
}

html[data-theme="light"] .ai-messages {
  
}

html[data-theme="light"] .ai-message {
  
}

/* 5) Sidebar ocultable en escritorio. */
.sidebar-collapse-toggle {
  display: grid !important;
  flex: 0 0 auto;
}

.sidebar-collapse-toggle svg {
  width: 18px;
  height: 18px;
  
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-collapse-toggle .sidebar-collapse-arrow {
  
}

@media (min-width: 981px) {
  .app-view.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }

  .app-view.sidebar-collapsed .sidebar {
    transform: translateX(-102%) !important;
    pointer-events: none;
  }

  .app-view.sidebar-collapsed .app-main {
    grid-column: 2 !important;
    width: 100%;
  }

  .app-view.sidebar-collapsed .app-topbar {
    margin-left: 14px;
  }

  .app-view.sidebar-collapsed .sidebar-collapse-arrow {
    transform: rotate(180deg);
    transform-origin: center;
  }
}

/* 6) Pestañas inactivas: delimitadas pero visualmente apagadas. */
.nav-item:not(.active),
.settings-nav-toggle:not(.active),
.plant-nav-toggle:not(.active) {
  
  
  
}

.nav-item.nav-item-disabled {
  
  
}

.electrical-tab:not(.active),
.quick-range:not(.active),
.analysis-mode:not(.active),
.setting-choice:not(.active) {
  
  
}

html[data-theme="light"] .nav-item:not(.active),
html[data-theme="light"] .settings-nav-toggle:not(.active),
html[data-theme="light"] .plant-nav-toggle:not(.active) {
  
  
}

html[data-theme="light"] .electrical-tab:not(.active),
html[data-theme="light"] .quick-range:not(.active),
html[data-theme="light"] .analysis-mode:not(.active),
html[data-theme="light"] .setting-choice:not(.active) {
  
  
}

@media (min-width: 981px) and (max-width: 1220px) {
  .plant-nav-group {
    position: relative;
  }

  .plant-submenu {
    position: absolute;
    left: 58px;
    top: 0;
    z-index: 90;
    width: 245px;
    margin: 0;
    padding: 8px;
    
    border-radius: 14px;
    
    
  }

  html[data-theme="light"] .plant-submenu {
    
    
  }
}

@media (max-width: 980px) {
  .sidebar-collapse-toggle {
    display: grid !important;
  }

  .plant-submenu {
    margin-left: 40px;
  }
}


/* ==========================================================
   PLUMB · CHAT ARRASTRABLE + MÓDULO ÚNICO EN WORKSPACE
   Ajustes 2026-08-08 v2
   ========================================================== */

/* Los módulos se navegan desde la barra lateral; se elimina la grilla duplicada. */
.plant-module-launcher {
  display: none !important;
}

.plant-module-focus {
  min-height: 118px;
  margin-bottom: 18px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  
  
}

.plant-module-focus-icon {
  width: 50px;
  height: 50px;
  
  border-radius: 14px;
  display: grid;
  place-items: center;
  
  
}

.plant-module-focus-icon svg {
  width: 27px;
  height: 27px;
  
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plant-module-focus-copy h2 {
  margin: 5px 0 5px;
  
  font-size: 17px;
  font-weight: 620;
}

.plant-module-focus-copy p {
  margin: 0;
  
  font-size: 9px;
  line-height: 1.5;
}

html[data-theme="light"] .plant-module-focus {
  
  
}

html[data-theme="light"] .plant-module-focus-icon {
  
  
  
}

/* Iconos reales de módulo en la navegación izquierda. */
.plant-subicon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.plant-subicon svg {
  width: 18px;
  height: 18px;
  
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Chat más ancho y arrastrable. */
:root {
  --ai-side-panel-width: 470px;
}

.ai-dock {
  cursor: grab;
  touch-action: none !important;
  z-index: 90;
}

.ai-dock.dragging,
.ai-window.dragging .ai-window-header {
  cursor: grabbing !important;
}

.ai-dock.chat-open {
  visibility: hidden;
  pointer-events: none;
}

.ai-dock.ai-free-position {
  margin: 0 !important;
}

.ai-window {
  width: min(600px, calc(100vw - 32px)) !important;
  height: min(620px, calc(100vh - 36px)) !important;
  max-width: none;
  z-index: 95;
}

.ai-window.ai-free-window {
  margin: 0 !important;
}

.ai-window-header {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.ai-window-header button {
  cursor: pointer;
  touch-action: manipulation;
}

.ai-window-heading {
  min-width: 0;
}

.ai-drag-hint {
  display: block;
  margin-top: 5px;
  
  font-size: 6px !important;
  font-weight: 750;
  letter-spacing: .10em !important;
}

/* Al acercar el chat al borde derecho se transforma en panel lateral completo. */
.ai-window.side-docked {
  left: auto !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--ai-side-panel-width) !important;
  height: 100vh !important;
  max-height: none !important;
  
  
  
  border-radius: 22px 0 0 22px !important;
  transform: none !important;
}

.ai-window.side-docked .ai-drag-hint {
  
}

@media (min-width: 1101px) {
  .app-view .app-main {
    transition: width .22s ease;
  }

  .app-view.ai-side-panel-open .app-main {
    width: calc(100% - var(--ai-side-panel-width));
  }
}

@media (max-width: 1100px) {
  .ai-window.side-docked {
    width: min(470px, 92vw) !important;
  }
}

@media (max-width: 700px) {
  .ai-window,
  .ai-window.side-docked {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    bottom: 8px !important;
    border-radius: 18px !important;
  }

  .ai-drag-hint {
    display: none;
  }
}


/* ==========================================================
   PLUMB · ICONOS DE MÓDULO + IA ANCLADA / SNAP PREVIEW
   Ajustes 2026-08-08 v3
   ========================================================== */

/* Producción: tres cápsulas/pastillas de dos tonos. */
.module-production-pills,
.plant-subicon .module-production-pills,
.plant-module-focus-icon .module-production-pills,
.library-card-icon .module-production-pills {
  display: block;
  width: 24px !important;
  height: 24px !important;
  overflow: visible;
  
}

.module-production-pills *,
.plant-subicon .module-production-pills *,
.plant-module-focus-icon .module-production-pills * {
  
}

.plant-subicon .module-production-pills {
  width: 19px !important;
  height: 19px !important;
}

.plant-module-focus-icon .module-production-pills {
  width: 30px !important;
  height: 30px !important;
}

/* Tratamiento de desechos: símbolo universal de reciclaje. */
.module-recycle-symbol {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.plant-subicon .module-recycle-symbol {
  font-size: 19px;
}

.plant-module-focus-icon .module-recycle-symbol {
  font-size: 31px;
}

.library-card-icon .module-recycle-symbol {
  font-size: 28px;
}

/* Zona visual de acople al acercar el globo/chat al margen derecho. */
.ai-side-snap-preview {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 92;
  width: var(--ai-side-panel-width, 470px);
  pointer-events: none;
  opacity: 0;
  transform: translateX(24px);
  
  
  
  
  
  transition: opacity .15s ease, transform .18s ease;
}

.ai-side-snap-preview::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  
  
}

.ai-side-snap-preview span {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .16em;
  white-space: nowrap;
}

.ai-side-snap-preview.active {
  opacity: 1;
  transform: translateX(0);
}

html[data-theme="light"] .ai-side-snap-preview {
  
  
  
}

/* Globo IA: más compacto/cuadrado, visible y con LED pulsante. */
.ai-dock {
  position: fixed;
  min-width: 142px !important;
  min-height: 58px !important;
  padding: 8px 13px !important;
  
  border-radius: 16px !important;
  
  
  overflow: visible;
  isolation: isolate;
}

.ai-dock::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  
  border-radius: 18px;
  opacity: .38;
  
  animation: aiDockHalo 2.7s ease-in-out infinite;
  pointer-events: none;
}

.ai-dock:hover {
  
  
}

.ai-dock .status-dot {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px;
  
  
  animation: aiDockLed 1.55s ease-in-out infinite;
}

.ai-dock-copy {
  gap: 1px;
}

.ai-dock-copy strong {
  
  font-size: 9px !important;
  letter-spacing: .055em;
}

.ai-dock-copy small {
  margin-top: 3px;
  
  font-size: 6.7px !important;
  letter-spacing: .055em;
}

@keyframes aiDockLed {
  0%, 100% {
    opacity: .72;
    transform: scale(.88);
    
  }
  50% {
    opacity: 1;
    transform: scale(1.16);
    
  }
}

@keyframes aiDockHalo {
  0%, 100% {
    opacity: .22;
    transform: scale(.985);
  }
  50% {
    opacity: .62;
    transform: scale(1.018);
  }
}

html[data-theme="light"] .ai-dock {
  
  
  
}

html[data-theme="light"] .ai-dock-copy strong {
  
}

html[data-theme="light"] .ai-dock-copy small {
  
}

/* Refuerzo del arrastre: la cabecera del chat es el asa, sin romper sus botones. */
.ai-window.dragging {
  
}

@media (max-width: 700px) {
  .ai-side-snap-preview {
    display: none;
  }

  .ai-dock {
    min-width: 130px !important;
    min-height: 54px !important;
  }
}


/* ==========================================================
   PLUMB · AJUSTES VISUALES / IA v4
   2026-08-08
   ========================================================== */

/* 1) Solapa de plegado del menú izquierdo: centrada sobre el canto del sidebar. */
@media (min-width: 981px) {
  .sidebar-collapse-toggle {
    position: fixed !important;
    left: 257px;
    top: 50%;
    z-index: 82;
    width: 28px !important;
    height: 74px !important;
    min-width: 28px;
    padding: 0 !important;
    transform: translateY(-50%);
    border-radius: 0 13px 13px 0 !important;
    
    
    
    
    transition: left .24s ease, background .18s ease, border-color .18s ease;
  }

  .sidebar-collapse-toggle:hover {
    
    
    
  }

  .sidebar-collapse-toggle svg {
    width: 16px;
    height: 16px;
  }

  .app-view.sidebar-collapsed .sidebar-collapse-toggle {
    left: 0;
  }
}

@media (max-width: 980px) {
  .sidebar-collapse-toggle {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    transform: none !important;
    border-radius: 11px !important;
  }
}

html[data-theme="light"] .sidebar-collapse-toggle {
  
  
  
}

/* 2) Colores de los módulos de Planta. */
.plant-subitem[data-plant-nav-module="electrical"] .plant-subicon,
.plant-module-focus[data-module="electrical"] .plant-module-focus-icon,
.module-icon-electric {
  
}

.plant-subitem[data-plant-nav-module="water"] .plant-subicon,
.plant-module-focus[data-module="water"] .plant-module-focus-icon,
.module-icon-water {
  
}

.plant-subitem[data-plant-nav-module="waste"] .plant-subicon,
.plant-module-focus[data-module="waste"] .plant-module-focus-icon,
.plant-subitem[data-plant-nav-module="waste"] .module-recycle-symbol,
.plant-module-focus[data-module="waste"] .module-recycle-symbol {
  
}

/* Vista general: blanco, negro, rojo y azul. */
.overview-color-grid {
  width: 21px;
  height: 21px;
  overflow: visible;
}

.overview-color-grid .overview-tile {
  stroke-width: 1.25;
}

.overview-tile-white {
  
  
}

.overview-tile-black {
  
  
}

.overview-tile-red {
  
  
}

.overview-tile-blue {
  
  
}

/* 3) Analítica Labs en violeta. */
.nav-item[data-route="labs"] .nav-icon {
  
  opacity: .92 !important;
}

.nav-item[data-route="labs"] .nav-icon svg {
  
}

/* 4) Space Name: hoja blanca y barras RGB independientes. */
.space-name-icon {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.space-name-icon .space-sheet {
  
  
  stroke-width: 1.35;
}

.space-name-icon .space-bar {
  
  stroke-width: 2.2;
  stroke-linecap: round;
}

.space-name-icon .space-bar-red {  }
.space-name-icon .space-bar-green {  }
.space-name-icon .space-bar-blue {  }

.nav-item[data-route="dashboards"] .nav-icon {
  opacity: .95 !important;
}

/* 5) Alarmas, Librería y Configuración con identidad cromática. */
.nav-item[data-route="alarms"] .nav-icon {
  
}

.nav-item[data-route="alarms"] .nav-icon svg {
  
}

.nav-item[data-route="library"] .nav-icon {
  
  opacity: .92 !important;
}

.nav-item[data-route="library"] .nav-icon svg {
  
}

.settings-nav-toggle .multi-gear-icon .gear-a {
  
  
}

.settings-nav-toggle .multi-gear-icon .gear-b {
  
  
}

.settings-nav-toggle .multi-gear-icon .gear-c {
  
  
}

.settings-nav-toggle .multi-gear-icon .gear-a *,
.settings-nav-toggle .multi-gear-icon .gear-b *,
.settings-nav-toggle .multi-gear-icon .gear-c * {
  
}

/* Mantener color aunque la sección todavía esté deshabilitada. */
.nav-item.nav-item-disabled .nav-icon {
  
}

/* 6) Chat IA: más ancho, misma altura y ancla inferior-izquierda determinista. */
:root {
  --ai-side-panel-width: 510px;
}

.ai-window {
  width: min(680px, calc(100vw - 32px)) !important;
  height: min(620px, calc(100vh - 36px)) !important;
}

.ai-window.minimized {
  width: min(430px, calc(100vw - 20px)) !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: auto !important;
}

.ai-window.minimized .ai-window-header {
  
}

/* Al minimizar, el globo queda visible debajo de la cabecera plegada. */
.ai-window.minimized + * {
  /* regla intencionalmente vacía: el posicionamiento lo gobierna JS */
}

.ai-window.minimized .ai-drag-hint {
  display: none;
}

/* Un poco más traslúcido sin perder lectura. */
.ai-window.glass {
  
  
  
}

html[data-theme="light"] .ai-window.glass {
  
}

@media (max-width: 700px) {
  .ai-window,
  .ai-window.minimized,
  .ai-window.side-docked {
    width: calc(100vw - 16px) !important;
  }
}

/* ==========================================================
   PLUMB · COLOR DE NAVEGACIÓN + LABS + SONIDO
   Ajustes 2026-08-08 v5
   ========================================================== */

/* Planta: mantiene identidad cromática aun cuando no está seleccionada. */
.plant-nav-toggle .nav-icon {
  opacity: 1 !important;
  
}

.plant-factory-icon {
  width: 21px !important;
  height: 21px !important;
  overflow: visible;
}

.plant-factory-icon .plant-factory-body {
  
  
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.plant-factory-icon .plant-factory-windows {
  
  
  stroke-width: 1.9;
  stroke-linecap: round;
}

.plant-nav-toggle.active .plant-factory-icon .plant-factory-body,
.plant-nav-group.route-active .plant-factory-icon .plant-factory-body {
  
  
}

/* Analítica Labs: recipiente, solución y tres burbujas completamente violetas. */
.nav-item[data-route="labs"] .nav-icon {
  
  opacity: 1 !important;
  
}

.analytics-lab-icon {
  width: 22px !important;
  height: 22px !important;
  overflow: visible;
}

.analytics-lab-icon .analytics-lab-outline {
  
  
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analytics-lab-icon .analytics-lab-solution {
  
  
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.analytics-lab-icon .analytics-lab-bubble {
  
  
  stroke-width: .65;
}

.analytics-lab-icon .bubble-a { opacity: .96; }
.analytics-lab-icon .bubble-b { opacity: .82; }
.analytics-lab-icon .bubble-c { opacity: .72; }

/* Alarmas: campana roja con detalle cálido. */
.alarm-color-icon .alarm-bell {
  
  
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alarm-color-icon .alarm-clapper {
  
  
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* Librería: capas azul/cian y símbolo + en verde PLUMB. */
.library-color-icon .library-layer-top {
  
  
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.library-color-icon .library-layers {
  
  
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.library-color-icon .library-plus {
  
  
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* Los candados mantienen color contextual, pero siguen visualmente secundarios. */
.nav-item[data-route="labs"] .nav-lock {  }
.nav-item[data-route="dashboards"] .nav-lock {  }
.nav-item[data-route="library"] .nav-lock {  }

/* Configuración: subiconos también cromáticos. */
.settings-subicon svg {
  width: 18px;
  height: 18px;
  
  
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-users-icon {
  
}

.settings-env-icon {
  
}

.settings-subitem.active .settings-users-icon {
  
}

.settings-subitem.active .settings-env-icon {
  
}

/* Mantener los colores de navegación aunque una función futura esté bloqueada. */
.nav-item.nav-item-disabled[data-route="labs"] .nav-icon,
.nav-item.nav-item-disabled[data-route="dashboards"] .nav-icon,
.nav-item.nav-item-disabled[data-route="library"] .nav-icon {
  opacity: .94 !important;
  
}

/* El selector de sonido usa el mismo lenguaje visual que Tema e Idioma. */
.setting-choice[data-sound-choice="on"].active {
  
  
  
}

.setting-choice[data-sound-choice="off"].active {
  
  
  
}

html[data-theme="light"] .plant-factory-icon .plant-factory-body {
  
}

html[data-theme="light"] .analytics-lab-icon .analytics-lab-solution {
  
}


/* ==========================================================
   PLUMB · AJUSTES DE NAVEGACIÓN / IA / DISTRIBUCIÓN v6
   ========================================================== */

/* 1) La solapa del menú queda centrada verticalmente en el lateral izquierdo de la pantalla. */
.sidebar-collapse-toggle {
  position: fixed !important;
  left: 0 !important;
  top: 50% !important;
  z-index: 95 !important;
  width: 30px !important;
  height: 78px !important;
  min-width: 30px !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  border-radius: 0 14px 14px 0 !important;
  
  
  
  
}

.sidebar-collapse-toggle:hover {
  
  
  
}

.sidebar-collapse-toggle svg {
  width: 16px !important;
  height: 16px !important;
}

.app-view.sidebar-collapsed .sidebar-collapse-toggle {
  left: 0 !important;
}

@media (max-width: 980px) {
  .sidebar-collapse-toggle {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    width: 30px !important;
    height: 70px !important;
    transform: translateY(-50%) !important;
    border-radius: 0 13px 13px 0 !important;
  }
}

/* 2) El globo IA inicia pegado al margen derecho cuando no existe una posición guardada. */
.ai-dock.ai-default-right {
  border-radius: 16px 0 0 16px !important;
  
  
}

.ai-dock.ai-default-right::before {
  border-radius: 18px 0 0 18px;
}

/* 3) Sistema eléctrico: Distribución Eléctrica como único contenedor del esquemático y KPI. */
.electrical-workspace-shell {
  display: block;
}

.plant-integrated-panel {
  overflow: hidden;
}

.electrical-distribution-header {
  padding: 18px 20px;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  
}

.electrical-distribution-copy h2 {
  margin: 6px 0 5px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.025em;
}

.electrical-distribution-copy p {
  margin: 0;
  max-width: 720px;
  
  font-size: 9px;
  line-height: 1.5;
}

.electrical-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.electrical-workspace-tab {
  min-height: 34px;
  padding: 0 12px;
  
  border-radius: 10px;
  
  
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .055em;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.electrical-workspace-tab:hover {
  
  
  
}

.electrical-workspace-tab.active {
  
  
  
  
}

.electrical-workspace-view {
  padding: 18px;
}

.electrical-workspace-view .diagram-shell,
.electrical-workspace-view .kpi-toolbar,
.electrical-workspace-view .grafana-board {
  margin-left: 0;
  margin-right: 0;
}

html[data-theme="light"] .electrical-distribution-header {
  
}

html[data-theme="light"] .electrical-workspace-tab {
  
}

html[data-theme="light"] .electrical-workspace-tab.active {
  
  
  
}

@media (max-width: 780px) {
  .electrical-distribution-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .electrical-workspace-tabs {
    width: 100%;
  }

  .electrical-workspace-tab {
    flex: 1;
  }

  .electrical-workspace-view {
    padding: 12px;
  }
}

/* ==========================================================
   PLUMB · NAVEGACIÓN / ESTADOS / HABILIDAD IA v7
   ========================================================== */

:root {
  --plumb-sidebar-width: 270px;
}

/* 1) Solapa: pegada al borde real del menú cuando está desplegado y más sutil. */
.sidebar-collapse-toggle {
  left: calc(var(--plumb-sidebar-width) - 12px) !important;
  top: 50% !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 56px !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  border-radius: 8px !important;
  
  
  
  
  opacity: .78;
  transition: left .24s ease, opacity .18s ease, background .18s ease, border-color .18s ease !important;
}

.sidebar-collapse-toggle:hover {
  opacity: 1;
  
  
  
  
}

.sidebar-collapse-toggle svg {
  width: 14px !important;
  height: 14px !important;
}

.sidebar-collapse-toggle svg > path:first-child {
  opacity: .24;
}

.sidebar-collapse-toggle .sidebar-collapse-arrow {
  opacity: .82;
}

.app-view.sidebar-collapsed .sidebar-collapse-toggle {
  left: 0 !important;
  
  border-radius: 0 9px 9px 0 !important;
}

html[data-theme="light"] .sidebar-collapse-toggle {
  
  
  
  
}

@media (max-width: 980px) {
  .sidebar-collapse-toggle {
    left: 0 !important;
    width: 25px !important;
    height: 54px !important;
    
    border-radius: 0 9px 9px 0 !important;
  }
}

/* 2) Estado operativo trasladado al pie del menú. */
.sidebar-status {
  gap: 8px !important;
  padding: 13px !important;
}

.sidebar-platform-state {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  
}

.sidebar-service-statuses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 1px 0 3px;
}

.sidebar-service-state {
  min-height: 24px;
  padding: 0 7px;
  
  border-radius: 8px;
  display: flex !important;
  align-items: center;
  gap: 7px;
  
}

.sidebar-service-state span {
  
  font-size: 7px !important;
  font-weight: 760;
  letter-spacing: .075em;
}

.sidebar-status-dot {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px;
  
  animation: sidebarStatusLedPulse 1.7s ease-in-out infinite;
}

.sidebar-service-state:nth-child(2) .sidebar-status-dot {
  animation-delay: .23s;
}

.sidebar-service-state:nth-child(3) .sidebar-status-dot {
  animation-delay: .46s;
}

@keyframes sidebarStatusLedPulse {
  0%, 100% {
    opacity: .58;
    transform: scale(.84);
    
  }
  50% {
    opacity: 1;
    transform: scale(1.16);
    
  }
}

html[data-theme="light"] .sidebar-platform-state {
  
}

html[data-theme="light"] .sidebar-service-state {
  
  
}

html[data-theme="light"] .sidebar-service-state span {
  
}

/* La barra superior vuelve a quedar limpia: breadcrumb a la izquierda, usuario a la derecha. */
.topbar-navigation-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.topbar-actions {
  grid-column: 2 !important;
}

/* 4) Vista general queda dedicada al mapa/contexto de planta. */
.home-command-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Nueva pestaña Habilidad IA. */
.ai-skills-nav-item .nav-icon {
  opacity: 1 !important;
  
}

.ai-skills-nav-icon {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.ai-skills-nav-icon .ai-skills-star {
  
  
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.ai-skills-nav-icon .ai-skills-orb {
  stroke-width: 1.05;
}

.ai-skills-nav-icon .ai-skills-orb-a {
  
  
}

.ai-skills-nav-icon .ai-skills-orb-b {
  
  
}

.ai-skills-nav-item.active .ai-skills-nav-icon {
  
}

.ai-skills-panel {
  min-height: 0;
}

.ai-skills-panel .ai-profile-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Cada habilidad conserva una identidad cromática propia, incluso bloqueada. */
.ai-skills-panel .ai-profile-card[data-ai-profile="plumb"] > span {
  
  
  
}

.ai-skills-panel .ai-profile-card[data-ai-profile="production"] > span {
  
  
  
}

.ai-skills-panel .ai-profile-card[data-ai-profile="maintenance"] > span {
  
  
  
}

.ai-skills-panel .ai-profile-card[data-ai-profile="audits"] > span {
  
  
  
}

.ai-skills-panel .ai-profile-card[data-ai-profile="management"] > span {
  
  
  
}

.ai-skills-panel .ai-profile-card[data-ai-profile] > span,
.ai-skills-panel .ai-profile-card[data-ai-profile] > span svg {
  opacity: 1 !important;
  
}

.ai-skills-panel .ai-profile-card[data-ai-profile] > span svg {
  
}

.ai-skills-panel .ai-profile-card.ai-profile-disabled,
.ai-skills-panel .ai-profile-card:disabled {
  opacity: .72 !important;
}

.ai-skills-panel .ai-profile-card.ai-profile-global {
  opacity: 1 !important;
}

@media (max-width: 850px) {
  .ai-skills-panel .ai-profile-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   PLUMB · V8 · COLORES DE ÍCONOS TOMADOS DE V5
   Se conserva íntegramente la arquitectura/funcionalidad V7.
   ========================================================== */

/* Vista general · blanco / negro / rojo / azul (V5). */
.overview-color-grid {
  width: 21px;
  height: 21px;
  overflow: visible;
}
.overview-color-grid .overview-tile { stroke-width: 1.25; }
.overview-tile-white {   }
.overview-tile-black {   }
.overview-tile-red {   }
.overview-tile-blue {   }

/* Planta · verde + azul (V5), visible aun inactiva. */
.plant-nav-toggle .nav-icon {
  opacity: 1 !important;
  
}
.plant-factory-icon {
  width: 21px !important;
  height: 21px !important;
  overflow: visible;
}
.plant-factory-icon .plant-factory-body {
  
  
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.plant-factory-icon .plant-factory-windows {
  
  
  stroke-width: 1.9;
  stroke-linecap: round;
}
.plant-nav-toggle.active .plant-factory-icon .plant-factory-body,
.plant-nav-group.route-active .plant-factory-icon .plant-factory-body {
  
  
}

/* Módulos de Planta · colores exactos V5. */
.plant-subitem[data-plant-nav-module="electrical"] .plant-subicon,
.module-icon-electric {  }
.plant-subitem[data-plant-nav-module="water"] .plant-subicon,
.module-icon-water {  }
.plant-subitem[data-plant-nav-module="waste"] .plant-subicon,
.plant-subitem[data-plant-nav-module="waste"] .module-recycle-symbol {  }

/* Analítica Labs · violeta completo + tres burbujas (V5). */
.nav-item[data-route="labs"] .nav-icon {
  
  opacity: 1 !important;
  
}
.analytics-lab-icon {
  width: 22px !important;
  height: 22px !important;
  overflow: visible;
}
.analytics-lab-icon .analytics-lab-outline {
  
  
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.analytics-lab-icon .analytics-lab-solution {
  
  
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.analytics-lab-icon .analytics-lab-bubble {
  
  
  stroke-width: .65;
}
.analytics-lab-icon .bubble-a { opacity: .96; }
.analytics-lab-icon .bubble-b { opacity: .82; }
.analytics-lab-icon .bubble-c { opacity: .72; }

/* Space Name · hoja blanca + RGB (V5). */
.space-name-icon { width: 22px; height: 22px; overflow: visible; }
.space-name-icon .space-sheet {
  
  
  stroke-width: 1.35;
}
.space-name-icon .space-bar {
  
  stroke-width: 2.2;
  stroke-linecap: round;
}
.space-name-icon .space-bar-red {  }
.space-name-icon .space-bar-green {  }
.space-name-icon .space-bar-blue {  }

/* Alarmas · rojo + detalle cálido (V5). */
.alarm-color-icon .alarm-bell {
  
  
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.alarm-color-icon .alarm-clapper {
  
  
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* Librería · azul/cian + verde PLUMB (V5). */
.library-color-icon .library-layer-top {
  
  
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.library-color-icon .library-layers {
  
  
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.library-color-icon .library-plus {
  
  
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* Configuración · engranajes azul / dorado / rojo (V5). */
.settings-nav-toggle .multi-gear-icon .gear-a,
.settings-nav-toggle .multi-gear-icon .gear-a * {
  
  
}
.settings-nav-toggle .multi-gear-icon .gear-b,
.settings-nav-toggle .multi-gear-icon .gear-b * {
  
  
}
.settings-nav-toggle .multi-gear-icon .gear-c,
.settings-nav-toggle .multi-gear-icon .gear-c * {
  
  
}
.settings-subicon svg {
  width: 18px;
  height: 18px;
  
  
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-users-icon {  }
.settings-env-icon {  }
.settings-subitem.active .settings-users-icon {  }
.settings-subitem.active .settings-env-icon {  }

/* Colores siguen visibles en ítems futuros/bloqueados. */
.nav-item.nav-item-disabled[data-route="labs"] .nav-icon,
.nav-item.nav-item-disabled[data-route="dashboards"] .nav-icon,
.nav-item.nav-item-disabled[data-route="library"] .nav-icon {
  opacity: .94 !important;
  
}
.nav-item[data-route="labs"] .nav-lock {  }
.nav-item[data-route="dashboards"] .nav-lock {  }
.nav-item[data-route="library"] .nav-lock {  }

/* Habilidad IA · icono de acceso, usando paleta V5. */
.ai-skills-nav-item .nav-icon { opacity: 1 !important;  }
.ai-skills-nav-icon .ai-skills-star {
  
  
  stroke-width: 1.45;
}
.ai-skills-nav-icon .ai-skills-orb-a {
  
  
  stroke-width: 1.2;
}
.ai-skills-nav-icon .ai-skills-orb-b {
  
  
  stroke-width: 1.2;
}

/* Habilidades IA · iconos multicolor con la misma paleta cromática V5. */
.ai-profile-icon {
  width: 24px !important;
  height: 24px !important;
  overflow: visible;
}
.ai-profile-icon * {
  
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-profile-icon-plumb .ai-icon-primary {  }
.ai-profile-icon-plumb .ai-icon-secondary {  }

.ai-profile-icon-production .ai-icon-primary {
  
  
}
.ai-profile-icon-production .ai-icon-secondary {  }

.ai-profile-icon-maintenance .ai-icon-primary {  }
.ai-profile-icon-maintenance .ai-icon-secondary {  }

.ai-profile-icon-audits .ai-icon-primary {
  
  
}
.ai-profile-icon-audits .ai-icon-secondary {  }
.ai-profile-icon-audits .ai-icon-accent {  }

.ai-profile-icon-management .ai-management-red {  }
.ai-profile-icon-management .ai-management-blue {  }
.ai-profile-icon-management .ai-management-green {  }
.ai-profile-icon-management .ai-management-gold {  }

/* No apagar los colores de IA aunque la habilidad todavía esté bloqueada. */
.ai-skills-panel .ai-profile-card.ai-profile-disabled > span,
.ai-skills-panel .ai-profile-card:disabled > span,
.ai-skills-panel .ai-profile-card.ai-profile-disabled > span svg,
.ai-skills-panel .ai-profile-card:disabled > span svg {
  opacity: 1 !important;
  
}


/* ==========================================================
   PLUMB · V9 · IA EN SUBMENÚ + CHAT LATERAL PLEGABLE + SCROLL
   ========================================================== */

/* 1) Habilidad IA vive exclusivamente en la navegación lateral. */
.ai-skills-nav-group {
  position: relative;
  display: grid;
  gap: 5px;
}

.ai-skills-nav-toggle {
  position: relative;
}

.ai-skills-nav-chevron {
  margin-left: auto;
  
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}

.ai-skills-nav-group.open .ai-skills-nav-chevron {
  transform: rotate(90deg);
  
}

.ai-skills-submenu {
  margin: 2px 5px 4px 40px;
  padding: 5px 0 5px 10px;
  
  display: grid;
  gap: 5px;
}

.ai-skills-subitem {
  width: 100%;
  min-height: 48px;
  padding: 7px 9px;
  
  border-radius: 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  
  
  text-align: left;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ai-skills-subitem:hover {
  
  
  
}

.ai-skills-subitem.active {
  
  
  
  
}

.ai-skills-subicon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.ai-skills-subicon .ai-profile-icon {
  width: 21px !important;
  height: 21px !important;
}

.ai-skills-subcopy,
.ai-skills-subcopy strong,
.ai-skills-subcopy small {
  display: block;
  min-width: 0;
}

.ai-skills-subcopy strong {
  overflow: hidden;
  
  font-size: 9px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-skills-subcopy small {
  margin-top: 3px;
  overflow: hidden;
  
  font-size: 6.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="light"] .ai-skills-submenu {
  
}

html[data-theme="light"] .ai-skills-subitem {
  
  
  
}

html[data-theme="light"] .ai-skills-subitem:hover {
  
  
  
}

html[data-theme="light"] .ai-skills-subitem.active {
  
  
  
}

/* 2) El sidebar genera scroll únicamente cuando su contenido supera la altura útil. */
@media (min-width: 981px) {
  .sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    
    scrollbar-gutter: auto;
  }

  .sidebar::-webkit-scrollbar {
    width: 5px;
  }

  .sidebar::-webkit-scrollbar-track {
    
  }

  .sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    
  }

  .sidebar::-webkit-scrollbar-thumb:hover {
    
  }
}

/* 3) Solapa gemela del menú izquierdo para ocultar el chat cuando está acoplado a la derecha. */
.ai-side-collapse-toggle {
  display: none;
}

@media (min-width: 1101px) {
  .app-view.ai-side-panel-open .ai-side-collapse-toggle {
    position: fixed !important;
    display: grid;
    right: var(--ai-side-panel-width);
    top: 50%;
    z-index: 84;
    width: 28px !important;
    height: 74px !important;
    min-width: 28px;
    padding: 0 !important;
    transform: translateY(-50%);
    border-radius: 13px 0 0 13px !important;
    
    
    
    
    opacity: .78;
    transition: opacity .18s ease, color .18s ease, background .18s ease;
  }

  .app-view.ai-side-panel-open .ai-side-collapse-toggle:hover {
    opacity: 1;
    
    
    
  }

  .ai-side-collapse-toggle svg {
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .app-view.ai-side-panel-open .ai-side-collapse-toggle {
    position: fixed !important;
    display: grid;
    right: min(470px, 92vw);
    top: 50%;
    z-index: 84;
    width: 26px !important;
    height: 66px !important;
    padding: 0 !important;
    transform: translateY(-50%);
    border-radius: 12px 0 0 12px !important;
    
    
    
    opacity: .8;
  }
}

html[data-theme="light"] .app-view.ai-side-panel-open .ai-side-collapse-toggle {
  
  
  
}

@media (max-width: 700px) {
  .ai-side-collapse-toggle {
    display: none !important;
  }
}


/* Ajustes finales V9: estado del desplegable IA y trazo de la solapa derecha. */
.ai-skills-nav-group.open .ai-skills-nav-toggle {
  
  
  
}

.ai-side-collapse-toggle svg {
  
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-side-collapse-toggle svg > path:first-child {
  opacity: .24;
}

.ai-side-collapse-toggle .ai-side-collapse-arrow {
  
  opacity: .82;
}


/* ==========================================================
   PLUMB · V10 · HABILIDADES IA BLOQUEADAS + PANEL LATERAL OCULTABLE
   ========================================================== */

/* Títulos estructurales del sidebar: más jerarquía, sin competir con las pestañas. */
.nav-label {
  position: relative;
  margin: 5px 10px 9px;
  padding: 0 8px 8px !important;
  
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase;
  
  
}

.nav-label::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -1px;
  width: 34px;
  height: 1px;
  border-radius: 99px;
  
  
}

.nav-label-management {
  margin-top: 24px !important;
}

html[data-theme="light"] .nav-label {
  
  
  
}

/* Solamente IA PLUMB es seleccionable. Las demás conservan color pero quedan bloqueadas. */
.ai-skills-subitem:disabled,
.ai-skills-subitem.ai-skill-locked {
  cursor: not-allowed;
  
  
  
  
}

.ai-skills-subitem:disabled:hover,
.ai-skills-subitem.ai-skill-locked:hover {
  
  
  
  transform: none;
}

.ai-skills-subitem:disabled .ai-skills-subcopy,
.ai-skills-subitem.ai-skill-locked .ai-skills-subcopy {
  opacity: .58;
}

.ai-skills-subitem:disabled .ai-skills-subicon,
.ai-skills-subitem.ai-skill-locked .ai-skills-subicon {
  opacity: .92 !important;
  
}

.ai-skills-subitem:disabled .ai-skills-subcopy small::after,
.ai-skills-subitem.ai-skill-locked .ai-skills-subcopy small::after {
  content: " · BLOQUEADA";
  
  letter-spacing: .05em;
}

html[data-theme="light"] .ai-skills-subitem:disabled,
html[data-theme="light"] .ai-skills-subitem.ai-skill-locked {
  
  
  
}

/* Producción IA: mismas tres pastillas de Producción + destellos cognitivos. */
.ai-production-pills {
  width: 23px !important;
  height: 23px !important;
  overflow: visible !important;
}

.ai-production-pills .ai-sparkle-fill,
.ai-profile-icon .ai-sparkle-fill {
  
}

.ai-profile-icon .ai-sparkle-lime {
  
  
}

.ai-profile-icon .ai-sparkle-blue {
  
  
}

/* Mantenimiento IA: llave francesa + martillo + destellos. */
.ai-profile-icon-maintenance .ai-maintenance-wrench {
  
  
}

.ai-profile-icon-maintenance .ai-maintenance-hammer {
  
  
}

/* Auditorías y Gerencia mantienen su identidad y suman brillo IA. */
.ai-profile-icon-audits,
.ai-profile-icon-management,
.ai-profile-icon-maintenance {
  
}

/* Panel lateral derecho: la solapa oculta el panel sin transformarlo en globo. */
.ai-window.side-docked {
  transition: transform .23s ease, opacity .18s ease;
}

.ai-window.side-docked.side-collapsed {
  transform: translateX(100%) !important;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1101px) {
  .app-view.ai-side-panel-open.ai-side-panel-hidden .app-main {
    width: 100% !important;
  }

  .app-view.ai-side-panel-open.ai-side-panel-hidden .ai-side-collapse-toggle {
    right: 0 !important;
    opacity: .72;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .app-view.ai-side-panel-open.ai-side-panel-hidden .ai-side-collapse-toggle {
    right: 0 !important;
  }
}

.ai-side-collapse-toggle {
  transition: right .23s ease, opacity .18s ease, color .18s ease, background .18s ease !important;
}

.ai-side-collapse-toggle.collapsed .ai-side-collapse-arrow {
  transform-origin: 16.5px 12px;
  transform: rotate(180deg);
}

.ai-side-collapse-toggle .ai-side-collapse-arrow {
  transition: transform .2s ease;
}


/* ==========================================================
   PLUMB · V11 · LOCKS GLOBALES + ICONOS IA + SOLAPAS GEMELAS + AUDIO CHAT
   ========================================================== */

/* Candado visual reutilizable para toda función no disponible. */
.availability-lock {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: inline-grid;
  place-items: center;
  
  border-radius: 6px;
  
  
}

.availability-lock svg {
  width: 12px;
  height: 12px;
  
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="light"] .availability-lock {
  
  
  
}

/* Los locks existentes del menú principal se vuelven inequívocos. */
.nav-item-disabled .nav-lock {
  opacity: .9 !important;
  
}

.nav-item-disabled .nav-lock svg {
  stroke-width: 1.8 !important;
}

/* Módulos no instanciados: candado visible sin quitar la navegación informativa. */
.plant-subitem {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
}

.plant-substate {
  grid-column: 2 !important;
}

.plant-sublock {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}

.plant-sublock[hidden] {
  display: none !important;
}

.focus-state-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.focus-state-lock {
  width: 23px;
  height: 23px;
}

.settings-info-note-locked {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
}

.settings-info-note-locked .availability-lock {
  margin-top: 1px;
}

/* Habilidades IA bloqueadas: tres columnas con lock explícito. */
.ai-skills-subitem {
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
}

.ai-skill-lock {
  grid-column: 3;
  justify-self: end;
}

/* Familia de iconos IA V11: simple, técnica y consistente. */
.ai-v11-icon {
  width: 22px !important;
  height: 22px !important;
  overflow: visible;
}

.ai-v11-icon path,
.ai-v11-icon rect,
.ai-v11-icon circle {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-v11-plumb .ai-v11-main {
  
  
  stroke-width: 1.55;
}

.ai-v11-plumb .ai-v11-line {
  
  
  stroke-width: 1.25;
}

.ai-v11-plumb .ai-v11-node {
  
  
  
}

.ai-v11-icon .ai-v11-spark {
  
  
  
}

.ai-v11-production .ai-pill rect {
  
  stroke-width: 1.35;
}

.ai-v11-production .ai-pill path {
  
  stroke-width: 1.15;
}

.ai-v11-production .ai-pill-a rect,
.ai-v11-production .ai-pill-a path {  }
.ai-v11-production .ai-pill-b rect,
.ai-v11-production .ai-pill-b path {  }
.ai-v11-production .ai-pill-c rect,
.ai-v11-production .ai-pill-c path {  }

.ai-v11-maintenance .ai-tool-wrench {
  
  
  stroke-width: 1.45;
}

.ai-v11-maintenance .ai-tool-hammer {
  
  
  stroke-width: 1.45;
}

.ai-v11-audits .ai-doc {
  
  
  stroke-width: 1.45;
}

.ai-v11-audits .ai-doc-fold,
.ai-v11-audits .ai-doc-lines {
  
  
  stroke-width: 1.25;
}

.ai-v11-audits .ai-doc-check {
  
  
  stroke-width: 1.55;
}

.ai-v11-management .ai-chart-axis {
  
  
  stroke-width: 1.2;
}

.ai-v11-management .ai-chart-bar {
  
  stroke-width: 2.2;
}

.ai-v11-management .bar-a {  }
.ai-v11-management .bar-b {  }
.ai-v11-management .bar-c {  }
.ai-v11-management .ai-chart-trend {
  
  
  stroke-width: 1.45;
}

.ai-skills-subitem:disabled .ai-v11-icon {
  opacity: .72;
  
}

/* Solapa izquierda = espejo exacto de la solapa del chat derecho. */
@media (min-width: 981px) {
  .sidebar-collapse-toggle {
    position: fixed !important;
    display: grid !important;
    left: 270px !important;
    right: auto !important;
    top: 50% !important;
    z-index: 84 !important;
    width: 28px !important;
    height: 74px !important;
    min-width: 28px !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 0 13px 13px 0 !important;
    
    
    
    
    opacity: .78;
    transition: left .23s ease, opacity .18s ease, color .18s ease, background .18s ease !important;
  }

  .sidebar-collapse-toggle:hover {
    opacity: 1;
    
    
    
  }

  .sidebar-collapse-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }

  .sidebar-collapse-toggle svg > path:first-child {
    opacity: .24;
  }

  .app-view.sidebar-collapsed .sidebar-collapse-toggle {
    left: 0 !important;
  }
}

html[data-theme="light"] .sidebar-collapse-toggle {
  
  
  
}

/* Separación clara entre navegación operativa y Gestión. */
.nav-label-management {
  margin-top: 42px !important;
}

/* Campana de audio en la cabecera del chat. */
.ai-window-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-sound-toggle svg {
  width: 17px;
  height: 17px;
  overflow: visible;
}

.ai-sound-toggle .ai-sound-bell,
.ai-sound-toggle .ai-sound-clapper {
  
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-sound-toggle .ai-sound-slash {
  
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .16s ease;
}

.ai-sound-toggle:not(.muted) {
  
  
}

.ai-sound-toggle.muted .ai-sound-bell,
.ai-sound-toggle.muted .ai-sound-clapper {
  
}

.ai-sound-toggle.muted .ai-sound-slash {
  opacity: 1;
}

.ai-sound-toggle:hover {
  
}

/* ==========================================================
   V12 · MAPA COMPACTO + PLANTA SELECCIONADA MÁS VISIBLE
   ========================================================== */

/* El mapa queda deliberadamente más compacto para entrar mejor en
   notebooks/pantallas de 15–16 pulgadas sin perder la imagen completa. */
.home-plant-map-panel .plant-map-shell {
  width: min(100%, 720px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.home-plant-map-panel .plant-map-static-stage {
  width: 100%;
  aspect-ratio: 1373 / 1063;
}

.home-plant-map-panel .plant-map-footer {
  min-height: 64px;
  padding: 9px 11px;
  gap: 10px;
}

.home-plant-map-panel .plant-map-footer strong {
  font-size: 8.5px;
}

/* La selección debe leerse de inmediato: punto vivo, halo pulsante y
   tarjeta con mayor contraste. */
.plant-map-hotspot.active {
  z-index: 6;
}

.plant-map-hotspot.active .plant-hotspot-ring {
  transform: scale(1.16);
  
  
  
  animation: plantSelectedPulse 1.8s ease-in-out infinite;
}

.plant-map-hotspot.active .plant-hotspot-ring i {
  width: 12px;
  height: 12px;
  
  
  
  animation: plantSelectedCore 1.8s ease-in-out infinite;
}

.plant-map-hotspot.active .plant-hotspot-callout {
  opacity: 1;
  
  
  
}

.plant-map-hotspot.active .plant-hotspot-icon {
  
  
  
  
}

.plant-map-hotspot.active .plant-hotspot-copy strong {
  
  
}

.plant-map-hotspot.active .plant-hotspot-copy em {
  
  font-weight: 850;
}

@keyframes plantSelectedPulse {
  0%, 100% {
    transform: scale(1.12);
    
  }
  50% {
    transform: scale(1.22);
    
  }
}

@keyframes plantSelectedCore {
  0%, 100% {
    transform: scale(.92);
    
  }
  50% {
    transform: scale(1.14);
    
  }
}

html[data-theme="light"] .plant-map-hotspot.active .plant-hotspot-copy strong {
  
}

html[data-theme="light"] .plant-map-hotspot.active .plant-hotspot-callout {
  
}

/* En 16'' y resoluciones verticales contenidas se compacta un poco más. */
@media (max-height: 900px) and (min-width: 681px) {
  .home-plant-map-panel .plant-map-shell {
    width: min(100%, 640px);
    max-width: 640px;
  }

  .home-plant-map-panel .panel-header {
    padding-top: 13px;
    padding-bottom: 10px;
  }

  .home-plant-map-panel .plant-map-footer {
    min-height: 58px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

@media (max-width: 680px) {
  .home-plant-map-panel .plant-map-shell {
    width: calc(100% - 20px);
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plant-map-hotspot.active .plant-hotspot-ring,
  .plant-map-hotspot.active .plant-hotspot-ring i {
    animation: none;
  }
}

/* ==========================================================
   V13 · MAPA INTEGRADO AL DASHBOARD + SELECCIÓN -10% INTENSIDAD
   ========================================================== */

/* El panel toma cromática del propio mapa como ambientación. El mapa
   principal sigue compacto, pero ya no queda flotando sobre un bloque negro. */
.home-plant-map-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  
}

.home-plant-map-panel::before {
  content: "";
  position: absolute;
  inset: -34px;
  z-index: 0;
  pointer-events: none;
  
  
  transform: scale(1.08);
  opacity: .58;
}

.home-plant-map-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  
}

.home-plant-map-panel > * {
  position: relative;
  z-index: 1;
}

.home-plant-map-panel .plant-map-shell {
  
  
  
  
  
}

.home-plant-map-panel .plant-map-footer {
  
  
  
}

/* La selección conserva la pulsación de V12, reduciendo aproximadamente
   un 10% el brillo/halo para que siga siendo clara pero menos intensa. */
.plant-map-hotspot.active .plant-hotspot-ring {
  
  
  
}

.plant-map-hotspot.active .plant-hotspot-ring i {
  
  
}

.plant-map-hotspot.active .plant-hotspot-callout {
  
  
}

.plant-map-hotspot.active .plant-hotspot-icon {
  
  
  
}

@keyframes plantSelectedPulse {
  0%, 100% {
    transform: scale(1.12);
    
  }
  50% {
    transform: scale(1.22);
    
  }
}

@keyframes plantSelectedCore {
  0%, 100% {
    transform: scale(.92);
    
  }
  50% {
    transform: scale(1.14);
    
  }
}

html[data-theme="light"] .home-plant-map-panel {
  
}

html[data-theme="light"] .home-plant-map-panel::before {
  
  opacity: .34;
}

html[data-theme="light"] .home-plant-map-panel::after {
  
}

html[data-theme="light"] .home-plant-map-panel .plant-map-shell {
  
  
}

html[data-theme="light"] .home-plant-map-panel .plant-map-footer {
  
}


/* ==========================================================
   V14 · ENTORNOS DE PLANTA DEMO · MAPA COMO FONDO INTEGRAL
   ========================================================== */

/* El mismo mapa visible se extiende desenfocado por todo el dashboard.
   Ahora se hace más evidente, con menos capa oscura y más presencia visual. */
.home-plant-map-panel {
  
  
}

.home-plant-map-panel::before {
  inset: -40px;
  
  
  transform: scale(1.09);
  opacity: .92;
}

.home-plant-map-panel::after {
  
}

.home-plant-map-panel .panel-header {
  
  
  
}

.home-plant-map-panel .plant-map-shell {
  
  
  
  
  
}

.home-plant-map-panel .plant-map-footer {
  
  
  
}

html[data-theme="light"] .home-plant-map-panel {
  
}

html[data-theme="light"] .home-plant-map-panel::before {
  
  opacity: .74;
}

html[data-theme="light"] .home-plant-map-panel::after {
  
}

html[data-theme="light"] .home-plant-map-panel .panel-header,
html[data-theme="light"] .home-plant-map-panel .plant-map-shell,
html[data-theme="light"] .home-plant-map-panel .plant-map-footer {
  
  
}

/* ==========================================================
   V19 · PALETA 04 · CARBON + ELECTRIC BLUE
   Enterprise AI · premium · data platform
   ========================================================== */

:root,
html[data-theme="dark"] {
  
  
  
  
  
  
  
  
  
  

  /* Se conservan nombres históricos para no romper componentes. */
  
  
  
  

  
  
  
  
  
  

  
  
}

html[data-theme="dark"] body,
body:not([data-theme="light"]) {
  
}

html[data-theme="dark"] .glass,
html[data-theme="dark"] .glass-soft {
  
  
  
}

html[data-theme="dark"] .sidebar {
  
}

html[data-theme="dark"] .app-topbar {
  
  
}

html[data-theme="dark"] .nav-item {
  
}

html[data-theme="dark"] .nav-item:hover {
  
  
}

html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .settings-nav-toggle.active,
html[data-theme="dark"] .plant-nav-toggle.active,
html[data-theme="dark"] .ai-skills-nav-toggle.active {
  
  
  
  
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .plant-module-card,
html[data-theme="dark"] .setting-row,
html[data-theme="dark"] .dashboard-widget,
html[data-theme="dark"] .library-card {
  
}

html[data-theme="dark"] .context-pill,
html[data-theme="dark"] .user-chip {
  
  
  
}

html[data-theme="light"] {
  
  
  
  
  
  
  
  
  
  

  
  
  
  

  
  
  
  
  
  

  
  
}

html[data-theme="light"] body {
  
}

html[data-theme="light"] .glass,
html[data-theme="light"] .glass-soft {
  
  
  
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .app-topbar {
  
}

html[data-theme="light"] .nav-item {
  
}

html[data-theme="light"] .nav-item:hover {
  
  
}

html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .settings-nav-toggle.active,
html[data-theme="light"] .plant-nav-toggle.active,
html[data-theme="light"] .ai-skills-nav-toggle.active {
  
  
  
  
}

html[data-theme="light"] .context-pill,
html[data-theme="light"] .user-chip,
html[data-theme="light"] .setting-choice,
html[data-theme="light"] .settings-value-chip {
  
  
  
}

.button-primary {
  
  
  
}

.state-live,
.refresh-status.active {
  
  
  
}

html[data-theme="dark"] .ai-window,
html[data-theme="dark"] .ai-window-header,
html[data-theme="dark"] .ai-form {
  
}

html[data-theme="dark"] .ai-window-header,
html[data-theme="dark"] .ai-form {
  
}

html[data-theme="dark"] .ai-messages {
  
}

html[data-theme="light"] .ai-window-header,
html[data-theme="light"] .ai-form {
  
}

html[data-theme="light"] .ai-messages {
  
}

/* El mapa conserva su cromática. El azul eléctrico queda reservado para
   selección, navegación, acciones y detalles de interfaz. */
html[data-theme="dark"] .home-plant-map-panel {
  
}

html[data-theme="dark"] .home-plant-map-panel .plant-map-shell {
  
}

html[data-theme="light"] .home-plant-map-panel {
  
}

/* Acento premium secundario, usado de forma limitada. */
:root {
  
}

/* ==========================================================
   V20 · SELECTOR FINAL DE TEMAS PLUMB
   4 DARK profesionales + LIGHT monocromático gris
   ========================================================== */

/* ---------- DARK 01 · FORGE LIME ---------- */
html[data-theme="dark"][data-dark-theme="forge-lime"] {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* ---------- DARK 02 · GRAPHITE CYAN ---------- */
html[data-theme="dark"][data-dark-theme="graphite-cyan"] {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* ---------- DARK 03 · DEEP NAVY TEAL ---------- */
html[data-theme="dark"][data-dark-theme="deep-navy-teal"] {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* ---------- DARK 04 · CARBON ELECTRIC ---------- */
html[data-theme="dark"][data-dark-theme="carbon-electric"] {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* Lenguaje visual común para los cuatro temas oscuros. */
html[data-theme="dark"] body {
  
}

html[data-theme="dark"] .glass,
html[data-theme="dark"] .glass-soft {
  
  
  
}

html[data-theme="dark"] .sidebar {
  
}

html[data-theme="dark"] .app-topbar {
  
  
}

html[data-theme="dark"] .nav-item {
  
}

html[data-theme="dark"] .nav-item:hover {
  
  
}

html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .settings-nav-toggle.active,
html[data-theme="dark"] .plant-nav-toggle.active,
html[data-theme="dark"] .ai-skills-nav-toggle.active {
  
  
  
  
}

html[data-theme="dark"] .context-pill,
html[data-theme="dark"] .user-chip {
  
  
  
}

html[data-theme="dark"] .ai-window-header,
html[data-theme="dark"] .ai-form {
  
  
}

html[data-theme="dark"] .ai-messages {
  
}

html[data-theme="dark"] .home-plant-map-panel {
  
}

html[data-theme="dark"] .home-plant-map-panel .plant-map-shell {
  
}

/* ---------- LIGHT · SILVER MIST ----------
   Estilo Apple claro, pero más grisáceo y con acento verde oliva. */
html[data-theme="light"] {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

html[data-theme="light"] body {
  
}

html[data-theme="light"] .glass,
html[data-theme="light"] .glass-soft {
  
  
  
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .app-topbar {
  
  
}

html[data-theme="light"] .nav-item {
  
}

html[data-theme="light"] .nav-item:hover {
  
  
}

html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .settings-nav-toggle.active,
html[data-theme="light"] .plant-nav-toggle.active,
html[data-theme="light"] .ai-skills-nav-toggle.active {
  
  
  
  
}

html[data-theme="light"] .context-pill,
html[data-theme="light"] .user-chip,
html[data-theme="light"] .setting-choice,
html[data-theme="light"] .settings-value-chip {
  
  
  
}

html[data-theme="light"] .settings-panel-header {
  
}

html[data-theme="light"] .setting-choice-group {
  
}

html[data-theme="light"] .setting-choice:hover {
  
  
}

html[data-theme="light"] .setting-choice.active {
  
  
  
  
}

html[data-theme="light"] .electrical-tab:not(.active),
html[data-theme="light"] .quick-range:not(.active),
html[data-theme="light"] .analysis-mode:not(.active),
html[data-theme="light"] .setting-choice:not(.active),
html[data-theme="light"] .nav-item:not(.active),
html[data-theme="light"] .settings-nav-toggle:not(.active),
html[data-theme="light"] .plant-nav-toggle:not(.active) {
  
  
}

html[data-theme="light"] .button {
  border-radius: 999px;
}

html[data-theme="light"] .button-primary,
html[data-theme="light"] .ai-form button {
  
  
  
  
}

html[data-theme="light"] .button-primary:hover,
html[data-theme="light"] .ai-form button:hover {
  
  
}

html[data-theme="light"] .button-secondary {
  
  
  
  
}

html[data-theme="light"] .button-secondary:hover {
  
  
}

html[data-theme="light"] .button-danger {
  
  
  
}

html[data-theme="light"] .icon-button {
  
  
  
}

html[data-theme="light"] .ai-window.glass {
  
}

html[data-theme="light"] .ai-window-header,
html[data-theme="light"] .ai-form {
  
  
}

html[data-theme="light"] .ai-messages {
  
}

html[data-theme="light"] .home-plant-map-panel {
  
}

html[data-theme="light"] .home-plant-map-panel .panel-header,
html[data-theme="light"] .home-plant-map-panel .plant-map-shell,
html[data-theme="light"] .home-plant-map-panel .plant-map-footer {
  
  
}

/* ---------- Selector de temas por lista desplegable ---------- */
.theme-select-wrap {
  width: min(100%, 454px);
  padding: 5px;
}

.theme-selector {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  
  
  
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  
}

.theme-selector:focus {
  
  
}

.theme-selector option {
  
  
}

html[data-theme="light"] .theme-selector {
  
  
  
  
}

html[data-theme="light"] .theme-selector:focus {
  
  
}

html[data-theme="light"] .theme-selector option {
  
  
}



/* ==========================================================
   V26 · PANELES REDIMENSIONABLES + CONTROL DE TAMAÑO DE TEXTO
   ========================================================== */
@media (min-width: 981px) {
  .app-view:not(.sidebar-collapsed) {
    grid-template-columns: calc(var(--plumb-sidebar-width) + 16px) minmax(0, 1fr) !important;
  }

  .app-view:not(.sidebar-collapsed) .sidebar {
    width: var(--plumb-sidebar-width) !important;
  }

  .app-view:not(.sidebar-collapsed) .sidebar-collapse-toggle {
    left: var(--plumb-sidebar-width) !important;
  }

  .sidebar-resize-handle {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc(var(--plumb-sidebar-width) - 4px);
    width: 8px;
    z-index: 83;
    cursor: ew-resize;
    touch-action: none;
  }

  .app-view.sidebar-collapsed .sidebar-resize-handle {
    display: none;
  }
}

.ai-window.side-docked {
  width: var(--ai-side-panel-width) !important;
}

.ai-resize-handle {
  display: none;
}

.ai-window.side-docked:not(.side-collapsed) .ai-resize-handle {
  display: block;
  position: absolute;
  left: -5px;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 8;
  cursor: ew-resize;
  touch-action: none;
}

.panel-resize-handle::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 99px;
  
  transition: background .16s ease, box-shadow .16s ease, opacity .16s ease;
  opacity: .45;
}

.sidebar-resize-handle::after { right: 3px; }
.ai-resize-handle::after { left: 4px; }

.panel-resize-handle:hover::after,
.panel-resize-handle.dragging::after {
  
  
  opacity: .9;
}

body.side-panel-resizing,
body.side-panel-resizing * {
  cursor: ew-resize !important;
  user-select: none !important;
}

@media (min-width: 1101px) {
  .app-view.ai-side-panel-open:not(.ai-side-panel-hidden) .app-main {
    width: calc(100% - var(--ai-side-panel-width)) !important;
  }

  .app-view.ai-side-panel-open:not(.ai-side-panel-hidden) .ai-side-collapse-toggle {
    right: var(--ai-side-panel-width) !important;
  }
}

@media (max-width: 980px) {
  .sidebar-resize-handle,
  .ai-resize-handle {
    display: none !important;
  }
}

.font-scale-control {
  width: min(100%, 454px);
  min-height: 48px;
  padding: 7px 9px 7px 12px;
  display: grid;
  grid-template-columns: 18px minmax(130px, 1fr) 24px 48px auto;
  align-items: center;
  gap: 9px;
  
  border-radius: 13px;
  
}

.font-scale-aa {
  
  font-weight: 650;
  line-height: 1;
  text-align: center;
}

.font-scale-aa-small { font-size: 10px; }
.font-scale-aa-large { font-size: 18px; }

.font-scale-range {
  width: 100%;
  
  cursor: pointer;
}

.font-scale-value {
  min-width: 44px;
  
  font-size: 9px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.font-scale-reset {
  min-height: 30px;
  padding: 0 11px;
  
  border-radius: 999px;
  
  
  font-size: 8px;
  font-weight: 650;
  cursor: pointer;
}

.font-scale-reset:hover {
  
  
  
}

html[data-theme="light"] .font-scale-control {
  
  
}

html[data-theme="light"] .font-scale-reset {
  
  
  
  
}

html[data-theme="light"] .font-scale-reset:hover {
  
  
}

@media (max-width: 700px) {
  .font-scale-control {
    grid-template-columns: 16px minmax(100px, 1fr) 22px 44px;
  }

  .font-scale-reset {
    grid-column: 1 / -1;
    justify-self: end;
  }
}


/* ==========================================================
   V29 · ACCESIBILIDAD VISUAL + CONTRASTE + ESCALA ESQUEMÁTICO
   ========================================================== */

/* 1) Los íconos acompañan la escala tipográfica con un máximo de 140%.
   El ancho reservado también crece en los menús para evitar solapamientos. */
.nav-icon {
  width: calc(20px * var(--plumb-icon-scale)) !important;
  min-width: calc(20px * var(--plumb-icon-scale)) !important;
  font-size: calc(16px * var(--plumb-icon-scale)) !important;
}

.nav-icon > svg,
.nav-icon > img,
.settings-subicon > svg,
.plant-subicon > svg,
.ai-skills-subicon > svg,
.icon-button > svg,
.button > svg,
.plant-hotspot-icon > svg,
.plant-module-focus-icon > svg,
.ai-icon-primary > svg,
.ai-icon-secondary > svg,
.empty-icon > svg,
.card-icon > svg {
  scale: var(--plumb-icon-scale);
  transform-origin: center;
  transition: scale .18s ease;
}

.settings-subicon {
  width: calc(18px * var(--plumb-icon-scale)) !important;
  min-width: calc(18px * var(--plumb-icon-scale)) !important;
}

.plant-subitem {
  grid-template-columns: calc(18px * var(--plumb-icon-scale)) minmax(0, 1fr) !important;
}

.plant-subicon {
  width: calc(18px * var(--plumb-icon-scale)) !important;
  min-width: calc(18px * var(--plumb-icon-scale)) !important;
}

.ai-skills-subitem {
  grid-template-columns: calc(22px * var(--plumb-icon-scale)) minmax(0, 1fr) !important;
}

.ai-skills-subicon {
  width: calc(22px * var(--plumb-icon-scale)) !important;
  height: calc(22px * var(--plumb-icon-scale)) !important;
}

/* Conserva área de click estable en botones de ícono; solo crece el pictograma. */
.icon-button > svg {
  max-width: 78%;
  max-height: 78%;
}

/* 2) LIGHT: selección inequívoca. En superficies claras el verde oliva pasa a
   un estado seleccionado sólido y deja de confundirse con el fondo. */
html[data-theme="light"] .setting-choice.active,
html[data-theme="light"] .settings-subitem.active,
html[data-theme="light"] .plant-subitem.active,
html[data-theme="light"] .ai-skills-subitem.active,
html[data-theme="light"] .electrical-workspace-tab.active,
html[data-theme="light"] .electrical-tab.active,
html[data-theme="light"] .quick-range.active,
html[data-theme="light"] .analysis-mode.active {
  
  
  
  
}

html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .settings-nav-toggle.active,
html[data-theme="light"] .plant-nav-toggle.active,
html[data-theme="light"] .ai-skills-nav-toggle.active {
  
  
  
  
}

html[data-theme="light"] .settings-subitem.active .settings-subicon,
html[data-theme="light"] .plant-subitem.active .plant-subicon,
html[data-theme="light"] .ai-skills-subitem.active .ai-skills-subicon {
  
}

html[data-theme="light"] .plant-subitem.active .plant-subcopy small,
html[data-theme="light"] .plant-subitem.active .plant-substate,
html[data-theme="light"] .ai-skills-subitem.active .ai-skills-subcopy small {
  
}

html[data-theme="light"] .plant-map-hotspot.active .plant-hotspot-callout {
  
  
  
}

html[data-theme="light"] .plant-map-hotspot.active .plant-hotspot-copy strong {
  
}

html[data-theme="light"] .plant-map-hotspot.active .plant-hotspot-copy em {
  
}

/* 3) Copy principal del selector de plantas: contraste explícito en todos los temas. */
.home-plant-map-panel .panel-header p {
  opacity: 1 !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .home-plant-map-panel .panel-header p {
  
  
}

html[data-theme="light"] .home-plant-map-panel .panel-header p {
  
  
}

/* 4) El canvas completo se escala desde JS. Permitimos desplazamiento cuando
   el nivel de accesibilidad hace que el gráfico supere el ancho visible. */
.canvas-viewport {
  scrollbar-width: thin;
  
}

.canvas-viewport::-webkit-scrollbar {
  height: 8px;
}

.canvas-viewport::-webkit-scrollbar-thumb {
  border-radius: 99px;
  
}


/* ==========================================================
   V32 · BREADCRUMB OPERATIVO + CONTENEDOR ELÉCTRICO SIMPLIFICADO
   ========================================================== */

/* Ruta operativa: PLANTA DEMO / ALMAGRO / Servicios/Eléctricos / Equipo */
.breadcrumb-equipment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.breadcrumb-equipment strong {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Se elimina únicamente el PRIMER fondo del módulo eléctrico.
   Se conservan el panel DISTRIBUCIÓN ELÉCTRICA y el panel del esquemático. */
.electrical-workspace-shell {
  margin-top: 18px !important;
  padding: 0 !important;
  
  border-radius: 0 !important;
  
  
}

.electrical-workspace-shell > .plant-integrated-panel {
  margin: 0 !important;
}

@media (max-width: 900px) {
  .breadcrumb-equipment strong {
    max-width: 160px;
  }
}


/* ==========================================================
   ESQUEMÁTICO V2 · ESTADO + TELEMETRÍA + DETALLE
   ========================================================== */
.diagram-legends {
  margin-left: auto;
  display: grid;
  justify-items: end;
  gap: 7px;
}

.diagram-status-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  
  font-size: 8px;
}

.diagram-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.status-filter-chip {
  min-height: 27px;
  padding: 4px 8px;
  
  border-radius: 9px;
  
  
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 750;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.status-filter-chip:hover {
  
  
  
}

.status-filter-chip.active,
.status-filter-chip[aria-pressed="true"] {
  
  
  
  
}

/* Filtrado interactivo del esquemático: sin selección se conserva la vista normal. */
.node-card.status-filter-dimmed {
  opacity: .12 !important;
  
  transform: none !important;
  
}

.node-card.status-filter-match {
  opacity: 1 !important;
  
  transform: translateY(-2px) scale(1.018);
  z-index: 5;
}

.node-card.is-unmonitored.status-filter-match {
  opacity: .78 !important;
  
  transform: none;
}

.status-swatch {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  display: inline-block;
  
}

.status-swatch.status-green {  }
.status-swatch.status-yellow {  }
.status-swatch.status-orange {  }
.status-swatch.status-red {  }
.status-swatch.status-offline {  }

.node-card {
  overflow: hidden;
}

.node-card.is-monitored {
  opacity: 1;
}

.node-card.is-unmonitored {
  opacity: .40;
  
  cursor: default;
  
}

.node-card.is-unmonitored:hover {
  transform: none;
  
  
}

.node-card.status-green {
  
  
  
}

.node-card.status-yellow {
  
  
  
}

.node-card.status-orange {
  
  
  
}

.node-card.status-red {
  
  
  
}

.schematic-card-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
  
}

.schematic-card-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.node-card .schematic-card-name {
  min-height: 28px;
  margin: 0 0 5px;
  display: grid;
  place-items: center;
  
  font-size: 10px;
  line-height: 1.08;
  font-weight: 850;
  text-transform: uppercase;
}

.equip-card.node-card {
  height: 206px;
  padding: 8px 9px;
  justify-content: flex-start;
}

.equip-card.node-card .schematic-card-icon {
  width: 42px;
  height: 42px;
  margin-top: 1px;
}

.equip-card.node-card .schematic-card-icon svg {
  width: 40px;
  height: 40px;
}

.equip-card.node-card .schematic-card-name {
  min-height: 31px;
  font-size: 12px;
}

.load-card.node-card {
  min-height: 168px;
  height: 168px;
  padding: 7px 7px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.coupler-card.node-card {
  width: 124px;
  height: 168px;
  padding: 7px;
}

.node-tag-box {
  width: 100%;
  min-height: 34px;
  padding: 5px 6px;
  
  border-radius: 8px;
  
  display: grid;
  align-content: center;
  gap: 2px;
}

.node-tag-box strong {
  
  font-size: 10px;
  line-height: 1;
  font-weight: 620;
}


.node-tag-box span {
  overflow: hidden;
  
  font-size: 7px;
  line-height: 1.15;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.node-metrics {
  width: 100%;
  margin-top: auto;
  padding-top: 5px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.node-metric {
  min-width: 0;
  padding: 5px 3px 4px;
  
  border-radius: 7px;
  
}

.node-metric strong {
  display: block;
  
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.node-metric strong b { font-weight: 850; }
.node-metric strong em {  font-size: 7px; font-style: normal; font-weight: 700; }

.node-metric small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  
  font-size: 5.7px;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.node-metrics-offline {
  opacity: .65;
}

.node-card .bolt {
  right: 5px;
  top: 5px;
  width: 21px;
  height: 21px;
  font-size: 11px;
}

/* Modal de detalle del elemento */
.schematic-detail-modal {
  width: min(980px, 100%);
  max-height: calc(100vh - 28px);
  padding: 18px;
}

.schematic-detail-header {
  margin-bottom: 12px;
}

.schematic-detail-subline {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  
  font-size: 8px;
}

.schematic-detail-subline i {  font-style: normal; }
.schematic-detail-subline strong {  font-size: 8px; }

.detail-section {
  margin-top: 10px;
  padding: 12px;
  
  border-radius: 14px;
  
}

.detail-section-header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-section-header h3 {
  margin: 4px 0 0;
  font-size: 12px;
}

.schematic-status-badge.status-green {    }
.schematic-status-badge.status-yellow {    }
.schematic-status-badge.status-orange {    }
.schematic-status-badge.status-red {    }

.detail-alarm-list {
  display: grid;
  gap: 6px;
}

.detail-alarm-row {
  min-height: 44px;
  padding: 7px 9px;
  
  border-radius: 9px;
  
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.detail-alarm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  
  
}

.alarm-critical .detail-alarm-dot {   }
.alarm-warning .detail-alarm-dot {   }
.alarm-info .detail-alarm-dot {  }
.alarm-ack .detail-alarm-dot {  }

.detail-alarm-row strong {
  display: block;
  
  font-size: 8px;
  line-height: 1.3;
}

.detail-alarm-row small {
  display: block;
  margin-top: 3px;
  
  font-size: 7px;
}

.detail-alarm-row em {
  
  font-size: 6.5px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .06em;
}

.detail-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  
  font-size: 7px;
  font-weight: 800;
}

.detail-live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  
  
}

.detail-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.detail-metric-grid article {
  min-height: 72px;
  padding: 9px;
  
  border-radius: 10px;
  
}

.detail-metric-grid span {
  display: block;
  
  font-size: 7px;
}

.detail-metric-grid strong {
  display: block;
  margin-top: 9px;
  
  font-size: 13px;
  line-height: 1.05;
}

.detail-metric-grid strong b { font-weight: 800; }
.detail-metric-grid strong em {  font-size: 8px; font-style: normal; }

.detail-trend-header {
  align-items: flex-end;
}

.detail-trend-variable-selector {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.detail-trend-variable {
  min-width: 42px;
  height: 29px;
  padding: 0 9px;
  
  border-radius: 8px;
  
  
  font-size: 7px;
  font-weight: 850;
}

.detail-trend-variable.active {
  
  
  
}

.schematic-trend-shell {
  min-height: 220px;
  overflow: hidden;
  
  border-radius: 11px;
  
  background-size: 28px 28px;
}

.schematic-trend-svg {
  width: 100%;
  min-height: 220px;
  display: block;
}

.trend-grid-line {  stroke-width: 1; }
.trend-axis-line {  stroke-width: 1; }
.trend-axis-label, .trend-time-label {  font-size: 9px; font-family: var(--font); }
.schematic-trend-line {   stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;  }
.schematic-trend-last {   stroke-width: 1.2; }

.detail-technical-grid {
  margin-top: 10px;
}

@media (max-width: 820px) {
  .diagram-legends { justify-items: start; margin-left: 0; }
  .diagram-status-legend { justify-content: flex-start; }
  .detail-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .detail-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-alarm-row { grid-template-columns: 8px minmax(0, 1fr); }
  .detail-alarm-row em { grid-column: 2; }
}

/* ==========================================================
   ESQUEMÁTICO V3 · FILTROS OPERATIVOS + JERARQUÍA VISUAL
   ========================================================== */

/* La versión anterior heredaba pointer-events:none desde .diagram-head.
   Los filtros ahora reciben interacción real. */
.diagram-head {
  pointer-events: auto !important;
}

.diagram-status-legend,
.status-filter-chip {
  pointer-events: auto !important;
}

/* Al eliminar el título, la leyenda se mantiene alineada a la derecha. */
.diagram-legends {
  width: 100%;
}

/* Métricas prioritarias: deben ser la primera lectura después del nombre. */
.node-card .node-metrics {
  order: 3;
  margin-top: 1px;
  padding-top: 0;
  gap: 5px;
}

.node-card .node-tag-box {
  order: 4;
  margin-top: 5px;
}

.node-card .schematic-card-icon { order: 1; }
.node-card .schematic-card-name { order: 2; }
.node-card .bolt { order: 0; }

.node-metric {
  min-height: 42px;
  padding: 6px 3px 5px;
  display: grid;
  align-content: center;
  
  
}

.node-metric strong {
  font-size: 15.5px;
  line-height: .95;
  letter-spacing: -.035em;
  font-weight: 900;
}

.node-metric strong b {
  font-weight: 900;
}

.node-metric strong em {
  font-size: 8px;
  margin-left: 1px;
}

.node-metric small {
  margin-top: 5px;
  
  font-size: 6px;
  letter-spacing: .035em;
}

/* El TAG y la descripción quedan deliberadamente en segundo plano. */
.node-tag-box {
  min-height: 30px;
  padding: 4px 6px;
  
}

.node-tag-box strong {
  font-size: 9px;
}

.node-tag-box span {
  
  font-size: 6.4px;
}

/* Amarillo más puro y claramente separado del naranja. */
.status-swatch.status-yellow {
  
  
  
}

.node-card.status-yellow {
  
  
  
}

/* QAN4: estado operacional visible aunque no tenga medición asociada. */
.coupler-card.node-card.is-coupler-active {
  width: 142px;
  height: 168px;
  opacity: .94;
  
  cursor: default;
  
  
  
}

.coupler-card.node-card.is-coupler-active:hover {
  transform: none;
  
  
}

.coupler-card .schematic-card-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
}

.coupler-card .schematic-card-icon svg {
  width: 27px;
  height: 27px;
}

.coupler-card .schematic-card-name {
  min-height: 22px;
  margin-bottom: 3px;
  font-size: 9px;
}

.coupler-operating-state {
  order: 3;
  width: 100%;
  min-height: 53px;
  padding: 7px 5px;
  
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  
}

.coupler-operating-state strong {
  
  font-size: 11px;
  letter-spacing: .06em;
}

.coupler-operating-state span {
  margin-top: 3px;
  
  font-size: 6.8px;
  line-height: 1.18;
  font-weight: 750;
}

.coupler-card .node-tag-box {
  order: 4;
  margin-top: 5px;
}

/* El filtrado debe dominar cualquier opacidad base de tarjeta. */
#nodesLayer .node-card.status-filter-dimmed {
  opacity: .10 !important;
  
}

#nodesLayer .node-card.status-filter-match {
  opacity: 1 !important;
  
  
  outline-offset: 3px;
}

#nodesLayer .node-card.is-unmonitored.status-filter-match {
  opacity: .82 !important;
  
}

/* ==========================================================
   ESQUEMÁTICO V4 · CARGAS SIN ICONO + ESTADOS MÁS LEGIBLES
   ========================================================== */

/* 1) Cargas: TAG arriba, nombre al centro y telemetría como lectura principal. */
.load-card.node-card {
  height: 168px;
  min-height: 168px;
  padding: 8px 7px 7px;
}

.load-card.node-card .load-primary-tag {
  order: 1;
  width: calc(100% - 18px);
  min-height: 40px;
  margin: 1px auto 5px;
  padding: 6px 5px;
  
  
  place-items: center;
}

.load-card.node-card .load-primary-tag strong {
  font-size: 15px;
  line-height: 1;
  letter-spacing: .035em;
  font-weight: 620;
}

.load-card.node-card .schematic-card-name {
  order: 2;
  min-height: 35px;
  margin: 0 2px 4px;
  padding: 0;
  font-size: 10.5px;
  line-height: 1.08;
}

.load-card.node-card .node-metrics {
  order: 3;
  margin-top: auto;
  padding-top: 0;
  gap: 5px;
}

.load-card.node-card .node-metric {
  min-height: 54px;
  padding: 7px 2px 5px;
  
  
}

.load-card.node-card .node-metric strong {
  font-size: 18.5px;
  line-height: .94;
  letter-spacing: -.045em;
}

.load-card.node-card .node-metric strong em {
  font-size: 8px;
}

.load-card.node-card .node-metric small {
  margin-top: 6px;
  font-size: 5.8px;
  letter-spacing: .04em;
}

/* 2) Estados naranja y rojo: cromaticidad más inequívoca. */
.status-swatch.status-orange {
  
  
  
}

.node-card.status-orange {
  
  
  
}

.status-swatch.status-red {
  
  
  
}

.node-card.status-red {
  
  
  
}

/* 3) Sin medición: siguen claramente subordinadas, pero ya no parecen deshabilitadas por completo. */
.node-card.is-unmonitored {
  opacity: .58 !important;
  
  
  
}

.node-card.is-unmonitored .load-primary-tag,
.node-card.is-unmonitored .node-tag-box {
  
  
}

.node-card.is-unmonitored .schematic-card-name {
  
}

/* 4) QAN4: misma geometría y jerarquía que una carga medida. */
.coupler-card.node-card.is-coupler-active {
  width: 144px !important;
  height: 168px !important;
  padding: 8px 7px 7px !important;
  opacity: 1 !important;
  
  
  
  
}

.coupler-card.node-card .coupler-primary-tag {
  order: 1;
  width: calc(100% - 18px);
  min-height: 40px;
  margin: 1px auto 5px;
  padding: 6px 5px;
  display: grid;
  place-items: center;
  
  
}

.coupler-card.node-card .coupler-primary-tag strong {
  font-size: 15px;
  letter-spacing: .035em;
  font-weight: 620;
}

.coupler-card.node-card .schematic-card-name {
  order: 2;
  min-height: 35px;
  margin: 0 2px 4px;
  font-size: 10.5px;
  line-height: 1.08;
}

.coupler-card.node-card .coupler-state-metrics {
  order: 3;
  margin-top: auto;
  padding-top: 0;
  gap: 5px;
}

.coupler-card.node-card .coupler-state-metric {
  min-height: 54px;
  padding: 7px 2px 5px;
  display: grid;
  align-content: center;
  
  
}

.coupler-card.node-card .coupler-state-metric strong {
  
  font-size: 13px;
  line-height: .95;
  letter-spacing: -.02em;
}

.coupler-card.node-card .coupler-state-metric small {
  margin-top: 6px;
  
  font-size: 5.8px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* QAN4 es un estado operativo, no una carga sin medición. */
.node-card.is-operational {
  opacity: 1;
  
  cursor: default;
}

/* 5) Filtrado: lo no seleccionado permanece claramente visible, pero gris. */
#nodesLayer .node-card.status-filter-dimmed {
  opacity: .46 !important;
  
  transform: none !important;
  
  
}

#nodesLayer .node-card.status-filter-dimmed .bolt {
  
  opacity: .55;
}

#nodesLayer .node-card.status-filter-match {
  opacity: 1 !important;
  
  transform: translateY(-2px) scale(1.018);
  
  outline-offset: 3px;
  z-index: 5;
}

#nodesLayer .node-card.is-unmonitored.status-filter-match {
  opacity: .90 !important;
  
  transform: translateY(-1px) scale(1.01);
}

#nodesLayer .node-card.is-operational.status-filter-match {
  opacity: 1 !important;
  
}

/* ==========================================================
   ESQUEMÁTICO V5 · CABLEADO NEUTRO + MÉTRICAS ADAPTATIVAS
   + PARTICIPACIÓN DEL CONSUMO POR ZONA
   ========================================================== */

/* 1) La alimentación previa a las barras se lee de forma monocromática.
      Las derivaciones que salen de MM1/MM2 conservan azul/verde. */
.wire.live {
  
  
}

/* 2) Valores dinámicos: la cifra puede crecer sin invadir la unidad ni
      la tarjeta vecina. JS asigna el nivel de compactación por longitud. */
.node-card .node-metric {
  min-width: 0;
  overflow: hidden;
}

.node-card .node-metric strong {
  width: 100%;
  min-width: 0;
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
}

.node-card .node-metric strong b {
  min-width: 0;
  font-variant-numeric: tabular-nums;
  transition: font-size .18s ease, letter-spacing .18s ease;
}

.load-card.node-card .node-metric.metric-fit-normal strong b {
  font-size: 18.5px;
}

.load-card.node-card .node-metric.metric-fit-medium strong b {
  font-size: 15.5px;
  letter-spacing: -.055em;
}

.load-card.node-card .node-metric.metric-fit-long strong b {
  font-size: 13px;
  letter-spacing: -.065em;
}

.load-card.node-card .node-metric.metric-fit-xlong strong b {
  font-size: 11px;
  letter-spacing: -.075em;
}

.load-card.node-card .node-metric.metric-fit-long strong em,
.load-card.node-card .node-metric.metric-fit-xlong strong em {
  font-size: 6.7px;
}

/* 3) Panel simple de lectura operativa. Se ubica en el hueco superior
      derecho del lienzo, sin interferir con el unifilar. */
.energy-share-panel {
  position: absolute;
  left: 1215px;
  top: 52px;
  z-index: 1;
  width: 555px;
  height: 326px;
  padding: 15px 16px 14px;
  
  border-radius: 16px;
  
  
  pointer-events: auto;
}

.energy-share-panel-head {
  height: 43px;
  padding-bottom: 10px;
  
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.energy-share-panel-head strong {
  display: block;
  
  font-size: 11px;
  letter-spacing: .075em;
}

.energy-share-panel-head span {
  display: block;
  margin-top: 5px;
  
  font-size: 8px;
}

.energy-share-panel-head em {
  padding: 5px 7px;
  
  border-radius: 7px;
  
  
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
}

.energy-share-panel-body {
  height: calc(100% - 43px);
  padding-top: 10px;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.energy-share-donut-wrap {
  position: relative;
  width: 204px;
  height: 204px;
  display: grid;
  place-items: center;
}

.energy-share-chart {
  width: 204px;
  height: 204px;
  overflow: visible;
}

.energy-share-segment {
  cursor: pointer;
  
  stroke-width: 3;
  transition: opacity .16s ease, filter .16s ease, stroke-width .16s ease;
}

.energy-share-segment:hover,
.energy-share-segment.is-active {
  opacity: 1 !important;
  stroke-width: 5;
  
}

.energy-share-chart.has-active .energy-share-segment:not(.is-active) {
  opacity: .35;
}

.energy-share-center {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.energy-share-center span {
  
  font-size: 6.5px;
  font-weight: 850;
  letter-spacing: .06em;
}

.energy-share-center strong {
  margin-top: 5px;
  
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

.energy-share-center small {
  margin-top: 5px;
  
  font-size: 7px;
}

.energy-share-list {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.energy-share-row {
  width: 100%;
  min-height: 29px;
  padding: 4px 6px;
  
  border-radius: 8px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  
  
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}

.energy-share-row:hover,
.energy-share-row.is-active {
  
  
}

.energy-share-list.has-active .energy-share-row:not(.is-active) {
  opacity: .42;
}

.energy-share-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.energy-share-row-copy {
  min-width: 0;
}

.energy-share-row-copy strong {
  display: block;
  overflow: hidden;
  font-size: 7.4px;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.energy-share-row-copy small {
  display: block;
  margin-top: 3px;
  
  font-size: 6.3px;
}

.energy-share-row > strong {
  
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

html[data-theme="light"] .energy-share-panel {
  
  
  
}

html[data-theme="light"] .energy-share-panel-head strong,
html[data-theme="light"] .energy-share-center strong,
html[data-theme="light"] .energy-share-row,
html[data-theme="light"] .energy-share-row > strong {
  
}


/* ==========================================================
   ESQUEMÁTICO V6 · MOTIVO EN HOVER + FILTRO BLOQUEANTE
   + QAN4 ACTIVO + FLUJO MM1 → MM2
   ========================================================== */

/* Tooltip deliberadamente mínimo: solo explica el estado. */
.schematic-reason-tooltip {
  position: absolute;
  z-index: 20;
  max-width: 255px;
  padding: 8px 10px;
  
  border-radius: 9px;
  
  
  
  font-size: 9px;
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: .01em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .1s ease, transform .1s ease;
}

.schematic-reason-tooltip.visible {
  opacity: 1;
  transform: none;
}

/* Una tarjeta excluida por el filtro continúa visible, pero no abre detalle. */
#nodesLayer .node-card.status-filter-blocked {
  cursor: not-allowed !important;
}

#nodesLayer .node-card.status-filter-blocked:hover {
  transform: none !important;
  
}

/* QAN4: un único estado, grande y central. */
.coupler-card.node-card .coupler-state-single {
  display: block;
  width: 100%;
  margin-top: auto;
}

.coupler-card.node-card .coupler-state-single .coupler-state-metric {
  width: 100%;
  min-height: 58px;
}

.coupler-card.node-card .coupler-state-single .coupler-state-metric strong {
  font-size: 18px;
  letter-spacing: .015em;
}

/* Flujo visual MM1 → QAN4 → MM2. El trazo se mueve hacia abajo y
   los chevrones refuerzan la dirección sin agregar texto al acople. */
.qan4-flow-track {
  pointer-events: none;
}

.qan4-flow-dashes {
  
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 4 17;
  animation: qan4CurrentFlow .75s linear infinite;
  opacity: .82;
}

.qan4-flow-dashes-mm1 {
  
}

.qan4-flow-dashes-mm2 {
  
}

@keyframes qan4CurrentFlow {
  to { stroke-dashoffset: -21; }
}

.qan4-flow-arrows {
  position: absolute;
  left: 1695px;
  top: 0;
  z-index: 4;
  width: 24px;
  height: 1030px;
  pointer-events: none;
}

.qan4-flow-arrow {
  position: absolute;
  left: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  
  
  
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  
  animation: qan4ArrowPulse 1s ease-in-out infinite;
}

.qan4-flow-arrow-top {
  top: 676px;
  
}

.qan4-flow-arrow-bottom {
  top: 908px;
  
  animation-delay: .28s;
}

@keyframes qan4ArrowPulse {
  0%, 100% { transform: translateY(-2px); opacity: .72; }
  50% { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .qan4-flow-dashes,
  .qan4-flow-arrow {
    animation: none !important;
  }
}

/* ==========================================================
   ESQUEMÁTICO V7 · TOOLTIP EXPLICATIVO + FLUJO GENERAL
   ========================================================== */

/* Hover: causa + explicación breve, pensado para lectura inmediata. */
.schematic-reason-tooltip {
  min-width: 275px;
  max-width: 365px;
  padding: 14px 16px 15px;
  border-radius: 13px;
  border-width: 1.5px;
  
  
  font-size: 11px;
  line-height: 1.4;
}

.schematic-reason-tooltip small {
  display: block;
  margin-bottom: 5px;
  
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
}

.schematic-reason-tooltip strong {
  display: block;
  
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.schematic-reason-tooltip span {
  display: block;
  margin-top: 7px;
  
  font-size: 10px;
  font-weight: 560;
  line-height: 1.45;
}

.schematic-reason-tooltip[data-status="green"] {  }
.schematic-reason-tooltip[data-status="yellow"] {  }
.schematic-reason-tooltip[data-status="orange"] {  }
.schematic-reason-tooltip[data-status="red"] {  }
.schematic-reason-tooltip[data-status="offline"] {  }

/* Partículas de corriente sobre los conductores existentes. La línea base
   permanece continua; esta capa solo agrega el movimiento. */
.schematic-current-flow {
  pointer-events: none;
}

.current-flow-line {
  
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1 18;
  opacity: .88;
  animation: schematicElectronFlow .72s linear infinite;
}

.current-flow-mono {
  
  
}

.current-flow-blue {
  
  
}

.current-flow-green {
  
  
}

@keyframes schematicElectronFlow {
  to { stroke-dashoffset: -19; }
}

/* Las barras conservan sus colores y reciben un movimiento mucho más sutil,
   para dar continuidad visual al flujo sin convertirlas en una animación dominante. */
.bar::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: .58;
  background-size: 25px 6px;
  background-repeat: repeat-x;
  animation: schematicBusFlow .85s linear infinite;
}

.bar-main::after {
  
}

.bar-essential::after {
  
}

.bar > * {
  position: relative;
  z-index: 1;
}

@keyframes schematicBusFlow {
  to { background-position-x: 25px; }
}

/* Las flechas de V6 se eliminan: el sentido queda expresado solo por el flujo. */
.qan4-flow-arrows,
.qan4-flow-arrow {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .current-flow-line,
  .bar::after {
    animation: none !important;
  }
}

/* ==========================================================
   ESQUEMÁTICO V8 · BARRAS PASIVAS + MÉTRICAS EN DOS FILAS
   ========================================================== */

/* 1) Las barras son elementos estructurales del unifilar: no reaccionan
      al puntero, no cambian borde y no abren ninguna interacción. */
#nodesLayer .bar {
  pointer-events: none !important;
  cursor: default !important;
}

/* 2) Sin partículas/electrones dentro de MM1 ni MM2. El flujo animado
      queda únicamente sobre los conductores que entran/salen de las barras. */
#nodesLayer .bar::after,
.bar-main::after,
.bar-essential::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  
}

/* 3) POTENCIA y ENERGÍA HOY ocupan una fila completa cada una.
      Se conserva el ancho actual de todas las tarjetas. */
#nodesLayer .node-card .node-metrics {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(2, minmax(0, auto));
  gap: 4px !important;
  margin-top: auto;
  padding-top: 0;
}

#nodesLayer .node-card .node-metric {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 7px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
}

/* El rótulo queda a la izquierda y el valor, dominante, a la derecha. */
#nodesLayer .node-card .node-metric small {
  order: -1;
  flex: 0 0 auto;
  margin: 0 !important;
  overflow: visible;
  
  font-size: 6.4px !important;
  font-weight: 850;
  letter-spacing: .045em;
  line-height: 1;
  white-space: nowrap;
  text-overflow: clip;
}

#nodesLayer .node-card .node-metric strong {
  width: auto !important;
  min-width: 0;
  margin-left: auto;
  display: flex !important;
  align-items: baseline;
  justify-content: flex-end !important;
  gap: 3px;
  overflow: hidden;
  
  font-size: 20px !important;
  line-height: .95;
  letter-spacing: -.045em;
  white-space: nowrap;
}

#nodesLayer .node-card .node-metric strong b {
  min-width: 0;
  font-size: 20px !important;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

#nodesLayer .node-card .node-metric strong em {
  flex: 0 0 auto;
  margin-left: 1px;
  
  font-size: 8.5px !important;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0;
}

/* Adaptación por cantidad de dígitos: mantiene las cifras dentro del ancho
   aunque COREXD entregue valores de varios miles o decenas de miles. */
#nodesLayer .node-card .node-metric.metric-fit-normal strong b {
  font-size: 20px !important;
}

#nodesLayer .node-card .node-metric.metric-fit-medium strong b {
  font-size: 18px !important;
  letter-spacing: -.05em;
}

#nodesLayer .node-card .node-metric.metric-fit-long strong b {
  font-size: 15.5px !important;
  letter-spacing: -.06em;
}

#nodesLayer .node-card .node-metric.metric-fit-xlong strong b {
  font-size: 13.5px !important;
  letter-spacing: -.07em;
}

#nodesLayer .node-card .node-metric.metric-fit-long strong em,
#nodesLayer .node-card .node-metric.metric-fit-xlong strong em {
  font-size: 7.5px !important;
}

/* Las cargas crecen solo en alto; el ancho original de 144 px no cambia.
   178 px mantiene la última fila dentro del lienzo actual. */
#nodesLayer .load-card.node-card {
  width: 144px !important;
  min-height: 178px !important;
  height: 178px !important;
}

/* QEN1/QEN2/Generador necesitan algunos píxeles extra por conservar icono. */
#nodesLayer .equip-card.node-card {
  width: 176px !important;
  height: 218px !important;
}

/* QAN4 tiene un único estado; no se fuerza una segunda fila vacía. */
#nodesLayer .coupler-card.node-card .coupler-state-single {
  grid-template-rows: 1fr !important;
}

#nodesLayer .coupler-card.node-card .coupler-state-metric {
  min-height: 58px !important;
  justify-content: center !important;
}

#nodesLayer .coupler-card.node-card .coupler-state-metric strong {
  width: auto !important;
  margin: 0 !important;
  font-size: 20px !important;
}

/* En tarjetas sin medición se conserva la misma jerarquía y geometría. */
#nodesLayer .node-metrics-offline .node-metric strong {
  font-size: 18px !important;
}


/* ==========================================================
   ESQUEMÁTICO V9 · MATRIZ DE ESTADOS + JERARQUÍA TIPOGRÁFICA
   ========================================================== */

/* La cabecera ya no necesita reservar superficie para los filtros. */
.diagram-head-compact {
  min-height: 4px !important;
  padding: 0 !important;
}

/* TAG y descripción bajan de peso visual para que kW/kWh dominen. */
#nodesLayer .node-card .load-primary-tag strong,
#nodesLayer .node-card .node-tag-box strong,
#nodesLayer .node-card .node-tag-box span,
#nodesLayer .node-card .schematic-card-name {
  font-weight: 500 !important;
}

/* QAN4 recupera el símbolo de acople sin alterar el ancho de tarjeta. */
.coupler-card.node-card.is-coupler-active {
  padding-top: 6px !important;
}

.coupler-inline-icon {
  order: 0;
  width: 30px;
  height: 24px;
  margin: 0 auto 2px;
  
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.coupler-inline-icon svg {
  width: 30px;
  height: 24px;
  display: block;
}

.coupler-card.node-card .coupler-primary-tag {
  min-height: 31px !important;
  margin-bottom: 3px !important;
  padding: 4px 5px !important;
}

.coupler-card.node-card .coupler-primary-tag strong {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.coupler-card.node-card .schematic-card-name {
  min-height: 26px !important;
  margin-bottom: 2px !important;
  font-size: 9px !important;
}

.coupler-card.node-card .coupler-state-single .coupler-state-metric {
  min-height: 45px !important;
}

/* Sustituye el donut por una matriz operativa grande y clickeable. */
.schematic-status-panel {
  position: absolute;
  left: 1215px;
  top: 52px;
  z-index: 1;
  width: 555px;
  height: 326px;
  padding: 15px 16px 13px;
  
  border-radius: 16px;
  
  
  pointer-events: auto;
}

.schematic-status-panel-head {
  min-height: 48px;
  padding-bottom: 10px;
  
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.schematic-status-panel-head strong {
  display: block;
  
  font-size: 11px;
  letter-spacing: .075em;
}

.schematic-status-panel-head span {
  display: block;
  margin-top: 5px;
  
  font-size: 8px;
}

.schematic-status-panel-head em {
  padding: 6px 8px;
  
  border-radius: 8px;
  
  
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .055em;
}

.schematic-status-matrix {
  padding-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.status-matrix-cell {
  position: relative;
  min-height: 96px;
  padding: 10px 10px 9px;
  overflow: hidden;
  
  border-radius: 12px;
  
  
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}

.status-matrix-cell:hover {
  transform: translateY(-2px);
  
  
}

.status-matrix-cell[aria-pressed="true"] {
  
  
  
}

.status-matrix-cell .status-swatch {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.status-matrix-cell > strong {
  display: block;
  margin-top: 1px;
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.status-matrix-cell > span {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.status-matrix-cell > small {
  display: block;
  margin-top: 4px;
  
  font-size: 7px;
}

.status-matrix-green {  }
.status-matrix-yellow {  }
.status-matrix-orange {  }
.status-matrix-red {  }
.status-matrix-offline {  }

.schematic-status-panel-foot {
  margin-top: 8px;
  
  font-size: 6.7px;
  line-height: 1.35;
  text-align: right;
}

html[data-theme="light"] .schematic-status-panel {
  
  
  
}

html[data-theme="light"] .schematic-status-panel-head strong,
html[data-theme="light"] .status-matrix-cell {
  
}

html[data-theme="light"] .status-matrix-cell {
  
}


/* V10: jerarquía de TAG secundaria, matriz más fuerte y detalle más operativo */
.detail-alarm-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-alarm-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  
  border-radius: 999px;
  
}

.detail-alarm-nav {
  width: 26px;
  height: 26px;
  
  border-radius: 50%;
  
  
  font-size: 16px;
  font-weight: 800;
}
.detail-alarm-nav:disabled { opacity: .38; cursor: default; }
#detailAlarmPageInfo { font-size: 12px;  min-width: 46px; text-align: center; }

.detail-metric-grid article { cursor: help; }
.detail-metric-grid article small {
  display: block;
  margin-top: 4px;
  
  font-size: 11px;
  font-weight: 700;
}
.detail-metric-grid .detail-metric-combined strong { display: block; }
.detail-metric-grid .detail-metric-combined small {  }

.kwh-insight-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.kwh-insight-strip > div {
  padding: 9px 10px;
  
  border-radius: 10px;
  
}
.kwh-insight-strip span {
  display:block;
  
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 4px;
}
.kwh-insight-strip strong {  font-size:14px; }
.schematic-trend-reference {
  
  
  stroke-width: 2.2;
  stroke-dasharray: 6 5;
}
.trend-legend-inline {
  display:flex;
  gap:16px;
  align-items:center;
  margin-top: 8px;
  
  font-size: 11px;
}
.trend-legend-inline span { display:inline-flex; align-items:center; gap:7px; }
.trend-legend-inline i { width:18px; height:0;  display:inline-block; }
.trend-legend-inline .trend-legend-actual {  }
.trend-legend-inline .trend-legend-reference {  border-top-style:dashed; }

/* Oculta la vía KPI desde esta experiencia del esquemático. */
.electrical-workspace-tab[data-electrical-view-select="kpi"],
#detailOpenKpi { display: none !important; }


/* ==========================================================
   ESQUEMÁTICO V11 · GEOMETRÍA + MODAL DE VARIABLES DIRECTAS
   ========================================================== */

/* QEN1/QEN2: el TAG reemplaza al nombre de cámara y queda jerárquicamente limpio. */
.equip-card.node-card .transformer-entry-tag {
  min-height: auto;
  margin: 4px 0 3px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .045em;
}
.transformer-entry-description {
  
  font-size: 8px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 4px;
}

/* Alarmas: 4 posiciones físicas fijas, independientemente de cuántas queden en la página. */
.detail-alarm-list {
  min-height: 194px;
  grid-template-rows: repeat(4, 44px);
  align-content: start;
}
.detail-alarm-row {
  height: 44px;
  min-height: 44px;
}
.detail-alarm-placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* Las variables son la navegación del trend. */
.detail-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.detail-metric-card {
  min-width: 0;
  min-height: 78px;
  padding: 10px;
  
  border-radius: 10px;
  
  
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.detail-metric-card:hover {
  
  
}
.detail-metric-card.active {
  
  
  
}
.detail-metric-card > span {
  display: block;
  
  font-size: 7px;
  font-weight: 650;
}
.detail-metric-card > strong {
  display: block;
  margin-top: 9px;
  
  font-size: 14px;
  line-height: 1.05;
}
.detail-metric-card > strong em {
  
  font-size: 8px;
  font-style: normal;
}
.detail-metric-card.detail-metric-combined small {
  display: block;
  margin-top: 5px;
  
  font-size: 9px;
  font-weight: 650;
}

.detail-phase-card {
  min-width: 0;
  padding: 10px;
  
  border-radius: 11px;
  
}
.detail-voltage-vector { grid-column: span 3; }
.detail-current-vector { grid-column: span 1; }
.detail-phase-title {
  display: block;
  margin-bottom: 8px;
  
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.phase-vector-horizontal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}
.phase-vector-vertical {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
.phase-variable {
  min-height: 58px;
  padding: 7px 8px;
}
.phase-vector-vertical .phase-variable {
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
}
.phase-vector-vertical .phase-variable > strong { margin-top: 0; }

/* Tooltip propio: aparece inmediatamente y no depende del title nativo del navegador. */
.schematic-detail-modal { position: relative; }
.detail-variable-tooltip {
  position: absolute;
  z-index: 50;
  width: min(350px, calc(100% - 36px));
  padding: 12px 14px;
  
  border-radius: 11px;
  
  
  
  font-size: 10px;
  font-weight: 540;
  line-height: 1.48;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .08s ease, transform .08s ease;
}
.detail-variable-tooltip.visible { opacity: 1; transform: none; }

/* El selector duplicado del trend desaparece: se selecciona directamente desde Variables eléctricas. */
.detail-trend-variable-selector { display: none !important; }

.schematic-peak-reference {
  
  stroke-width: 1.6;
  stroke-dasharray: 7 5;
}
.trend-peak-label {
  
  font-size: 9px;
  font-family: var(--font);
  font-weight: 700;
}

@media (max-width: 820px) {
  .detail-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .detail-voltage-vector, .detail-current-vector { grid-column: span 2; }
}


/* ==========================================================
   ESQUEMÁTICO V12 · MONOCROMÍA DEL UNIFILAR + TREND INDUSTRIAL
   ========================================================== */

/* El filtro "Sin medición" se elimina de la matriz. Cuatro estados = lectura más directa. */
.schematic-status-matrix {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Barras y todos los conductores estructurales adoptan la misma familia neutra
   de la alimentación EDESUR. El estado queda reservado para las tarjetas. */
.bar-main,
.bar-essential {
  
  
}
.bar-main::before,
.bar-essential::before {
  
}
.bar-main .bar-copy h2,
.bar-essential .bar-copy h2 {
  
}
.wire.blue,
.wire.green,
.wire.live {
  
  
}
.current-flow-blue,
.current-flow-green,
.current-flow-mono {
  
  
}

/* Tensiones y corrientes usan exactamente la misma jerarquía visual. */
.detail-voltage-vector,
.detail-current-vector {
  grid-column: span 2 !important;
}
.detail-phase-card {
  padding: 0 !important;
  overflow: hidden;
  
}
.detail-phase-group-selector {
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  
  
  
  
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.detail-phase-group-selector:hover {  }
.detail-phase-group-selector.active {
  
  
}
.detail-phase-group-selector > span {
  
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.detail-phase-group-selector > strong {
  
  font-size: 11px;
  font-weight: 650;
}
.detail-phase-group-selector em {
  
  font-size: 8px;
  font-style: normal;
}
.phase-vector-vertical {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.detail-phase-row {
  width: 100%;
  min-height: 43px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  
  
  
  
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.detail-phase-row:last-child {  }
.detail-phase-row:hover {  }
.detail-phase-row.active {  }
.detail-phase-row > span {
  
  font-size: 9px;
  font-weight: 650;
}
.detail-phase-row > strong {
  margin: 0 !important;
  
  font-size: 13px;
  font-weight: 650;
  text-align: right;
}
.detail-phase-row em {
  
  font-size: 8px;
  font-style: normal;
  font-weight: 550;
}

/* Trend de estilo industrial: superficie limpia, KPIs de contexto, curvas suaves,
   referencias técnicas y leyenda discreta. */
.schematic-trend-shell {
  min-height: 350px !important;
  padding: 0 !important;
  overflow: hidden;
  
  border-radius: 13px !important;
  
}
.professional-trend-header {
  min-height: 66px;
  padding: 11px 14px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  
  
}
.pro-trend-kpis {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
.pro-trend-kpis > div {
  min-width: 0;
  padding-right: 10px;
  
}
.pro-trend-kpis > div:last-child {  }
.pro-trend-kpis span {
  display: block;
  
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.pro-trend-kpis strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pro-trend-live {
  flex: 0 0 auto;
  
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .06em;
}
.pro-trend-live i {
  width: 6px;
  height: 6px;
  margin-right: 5px;
  display: inline-block;
  border-radius: 50%;
  
  
}
.professional-trend-svg {
  width: 100%;
  height: auto;
  min-height: 270px;
  display: block;
  
}
.pro-trend-grid {
  
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pro-trend-axis-line {
  
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pro-trend-axis,
.pro-trend-time,
.pro-trend-reference-label {
  
  font-size: 9px;
  font-family: var(--font);
  font-weight: 560;
}
.pro-trend-reference-label {
  
  font-size: 8.5px;
}
.pro-trend-line {
  
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pro-trend-primary {
  
  
}
.pro-trend-area {
  
  opacity: 0;
}
/* Se usa currentColor para la zona bajo curva sin depender del id dinámico del gradiente. */
.professional-trend-svg .pro-trend-area {
  
  opacity: 1;
}
.pro-trend-last {
  
  
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.pro-trend-reference {
  
  stroke-width: 1.25;
  stroke-dasharray: 6 6;
  vector-effect: non-scaling-stroke;
}
.pro-trend-reference-warn {  }
.pro-trend-reference-series {
  
  stroke-width: 1.8;
  stroke-dasharray: 7 6;
}
.phase-line-l1 {  }
.phase-line-l2 {  }
.phase-line-l3 {  }
.pro-trend-legend {
  padding: 0 14px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 17px;
  
  font-size: 8px;
  font-weight: 650;
}
.pro-trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pro-trend-legend i {
  width: 18px;
  height: 2px;
  display: inline-block;
  border-radius: 4px;
  
}
.legend-l1 {  }
.legend-l2 {  }
.legend-l3 {  }
.legend-primary {  }
.legend-reference {  }
.legend-reference i {  }

@media (max-width: 820px) {
  .detail-voltage-vector,
  .detail-current-vector { grid-column: span 2 !important; }
  .professional-trend-header { align-items: flex-start; flex-direction: column; }
  .pro-trend-kpis { width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* ==========================================================
   ESQUEMÁTICO V13 · AJUSTES FINALES DE TONO Y MODAL
   ========================================================== */

/* Tono más sobrio y técnico para barras y cableado. */
.bar-main,
.bar-essential {
  
  
  
}
.bar-main::before,
.bar-essential::before {
  
}
.bar-main .bar-copy h2,
.bar-essential .bar-copy h2 {
  
}
.wire.blue,
.wire.green,
.wire.live {
  
  stroke-width: 4.2px !important;
}
.current-flow-blue,
.current-flow-green,
.current-flow-mono {
  
  
}

/* Modal con IA lateral dedicada. */
.schematic-detail-modal {
  width: min(1040px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: visible;
  transition: width .18s ease, grid-template-columns .18s ease;
}
.schematic-detail-modal.ai-open {
  width: min(1380px, calc(100vw - 36px));
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
}
.detail-main-stack { min-width: 0; }
.detail-ai-panel {
  min-height: 100%;
  padding: 16px;
  
  border-radius: 18px;
  
  
}
.detail-ai-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.detail-ai-header h3 { margin: 6px 0 0; font-size: 18px; }
.detail-ai-context {
  margin-bottom: 12px;
  padding: 10px 12px;
  
  border-radius: 12px;
  
  
  font-size: 12px;
}
.detail-ai-prompt-field {
  display:block;  font-size:12px; font-weight:700; margin-bottom:12px;
}
.detail-ai-prompt-field textarea {
  width:100%; min-height:88px; margin-top:7px; resize: vertical; border-radius: 12px; 
    padding:10px 12px; font: inherit;
}
.detail-ai-actions { display:flex; gap:10px; margin-bottom:12px; }
.detail-ai-output {
  min-height: 260px; padding: 12px;  border-radius: 14px; 
   font-size: 12px; line-height: 1.5;
}
.detail-ai-output section + section { margin-top: 12px; padding-top: 10px;  }
.detail-ai-output h4 { margin:0 0 6px; font-size:13px;  }
.detail-ai-output p, .detail-ai-output ul { margin:0; }
.detail-ai-output ul { padding-left: 18px; }
.detail-ai-prompt-echo {  }

/* Alarmero con filtros por severidad. */
.detail-alarm-filters {
  display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 12px;
}
.detail-alarm-filter {
  padding: 7px 10px; border-radius: 999px;   
  font-size:11px; font-weight:700;
}
.detail-alarm-filter.active {
    
}

/* Navegación del trend y ejes con unidades explícitas. */
.detail-trend-header { align-items: center; }
.detail-trend-nav { display:flex; gap:8px; align-items:center; }
.detail-trend-nav-btn {
  padding: 7px 10px; border-radius: 10px;    font-size:11px; font-weight:700;
}
.detail-trend-nav-btn:disabled { opacity:.42; cursor:default; }
.pro-trend-axis-title {
  
  font-size: 9px;
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.professional-trend-svg {  }
.pro-trend-primary {   }
.pro-trend-reference-series {  }

/* Ocultamos el detalle técnico en esta experiencia. */
.detail-technical-grid { display:none !important; }

@media (max-width: 1220px) {
  .schematic-detail-modal.ai-open {
    width: min(1040px, calc(100vw - 28px));
    grid-template-columns: 1fr;
  }
  .detail-ai-panel { order: 2; margin-top: 12px; }
}


/* ==========================================================
   ESQUEMÁTICO V13.2 · DETALLE COMPACTO + TREND LATERAL
   ========================================================== */

/* El modal deja de crecer verticalmente: el contenido principal y el gráfico
   se distribuyen horizontalmente cuando el operador selecciona una variable. */
.modal-overlay#detailModal {
  padding: 12px;
}
.schematic-detail-modal {
  width: min(920px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch;
}
.schematic-detail-modal.trend-open {
  width: min(1480px, calc(100vw - 24px)) !important;
  grid-template-columns: minmax(540px, .82fr) minmax(560px, 1.18fr) !important;
}
.schematic-detail-modal.ai-open:not(.trend-open) {
  width: min(1240px, calc(100vw - 24px)) !important;
  grid-template-columns: 310px minmax(0, 1fr) !important;
}
.schematic-detail-modal.ai-open.trend-open {
  width: min(1740px, calc(100vw - 24px)) !important;
  grid-template-columns: 300px minmax(500px, .80fr) minmax(560px, 1fr) !important;
}
.detail-main-stack {
  min-width: 0;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
}
.detail-ai-panel {
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.detail-side-trend {
  min-width: 0;
  height: 100%;
  max-height: calc(100vh - 60px);
  margin-top: 0 !important;
  padding: 14px !important;
  overflow-y: auto;
  align-self: stretch;
  
}
.detail-side-trend[hidden] { display: none !important; }
.detail-trend-header {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -2px -2px 6px;
  padding: 2px 2px 10px;
  
}
.detail-trend-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-trend-close {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.detail-trend-selected {
  margin: 2px 0 10px;
  
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.schematic-trend-shell {
  min-height: 430px !important;
}
.professional-trend-svg {
  min-height: 310px !important;
}

/* Compactamos levemente la columna izquierda sin sacrificar información. */
.detail-alarm-list {
  min-height: 176px !important;
  grid-template-rows: repeat(4, 40px) !important;
}
.detail-alarm-row {
  height: 40px !important;
  min-height: 40px !important;
}
.detail-section {
  margin-top: 8px !important;
  padding: 10px !important;
}
.detail-metric-card {
  min-height: 68px !important;
}
.detail-phase-group-selector {
  min-height: 48px !important;
}
.detail-phase-row {
  min-height: 39px !important;
}

/* En pantallas medianas conservamos dos columnas; si realmente no entran,
   el trend pasa debajo como fallback, manteniendo desplazamiento interno. */
@media (max-width: 1180px) {
  .schematic-detail-modal.trend-open,
  .schematic-detail-modal.ai-open.trend-open {
    width: min(980px, calc(100vw - 20px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .detail-side-trend,
  .detail-ai-panel {
    max-height: none;
  }
  .detail-main-stack {
    max-height: none;
  }
  .schematic-detail-modal {
    overflow-y: auto !important;
  }
}


/* ==========================================================
   ESQUEMÁTICO V13.3 · CHAT IA + MINI DASHBOARD DE TREND
   ========================================================== */

/* Chat 25% más ancho y con composición tipo conversación. */
.schematic-detail-modal.ai-open:not(.trend-open) {
  width: min(1360px, calc(100vw - 24px)) !important;
  grid-template-columns: 390px minmax(0, 1fr) !important;
}
.schematic-detail-modal.ai-open.trend-open {
  width: min(1780px, calc(100vw - 24px)) !important;
  grid-template-columns: 375px minmax(480px, .78fr) minmax(560px, 1fr) !important;
}
.detail-ai-panel {
  height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
.detail-ai-panel[hidden] { display: none !important; }
.detail-ai-header {
  flex: 0 0 auto;
  min-height: 54px;
  margin: 0 !important;
  padding: 12px 14px;
  align-items: center;
  
  
}
.detail-ai-header .eyebrow { margin: 0; }
.detail-ai-output {
  flex: 1 1 auto;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow-y: auto;
  
  border-radius: 0 !important;
  
}
.detail-ai-composer {
  flex: 0 0 auto;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 8px;
  
  
}
.detail-ai-composer textarea {
  width: 100%;
  min-height: 52px;
  max-height: 120px;
  resize: vertical;
  padding: 10px 11px;
  
  border-radius: 11px;
  
  
  font: inherit;
  line-height: 1.35;
}
.detail-ai-composer .button { min-height: 42px; padding-inline: 14px; }
.detail-ai-user-message {
  max-width: 88%;
  margin: 14px 0 8px auto;
  padding: 9px 11px;
  border-radius: 12px 12px 3px 12px;
  
  
  
  font-size: 12px;
  line-height: 1.45;
}
.detail-ai-answer {
  margin: 0 0 14px;
  padding: 0 0 14px;
  
}

/* Al abrir IA desaparece el botón inferior y la columna central recupera ese espacio. */
.schematic-detail-modal.ai-open #detailAskAi { display: none !important; }
.schematic-detail-modal.ai-open .detail-main-stack > .modal-footer:has(#detailAskAi) {
  display: none !important;
}

/* KPI del trend al pie: mini-dashboard fijo y legible. */
.professional-trend-header { display: none !important; }
.trend-mini-dashboard {
  margin: 8px 10px 10px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  
  border-radius: 12px;
  overflow: hidden;
  
}
.trend-mini-dashboard > div {
  min-width: 0;
  padding: 9px 10px;
  
}
.trend-mini-dashboard > div:last-child {  }
.trend-mini-dashboard span {
  display: block;
  
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.trend-mini-dashboard strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.trend-mini-dashboard strong em {
  
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
}
.trend-window-status strong {
  display: flex;
  align-items: center;
  gap: 6px;
}
.trend-window-status strong i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  
  
  animation: trendWindowPulse 1.5s ease-out infinite;
}
@keyframes trendWindowPulse {
  0% {  }
  70% {  }
  100% {  }
}

@media (max-width: 1450px) {
  .trend-mini-dashboard { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .trend-mini-dashboard > div:nth-child(3n) {  }
  .trend-mini-dashboard > div:nth-child(n/**/+4) {  }
}

@media (prefers-reduced-motion: reduce) {
  .trend-window-status strong i { animation: none !important; }
}


/* ==========================================================
   ESQUEMÁTICO V13.4 · MODAL SOLO CON X + TREND RESUMEN CENTRADO
   ========================================================== */

/* La superposición ya no actúa como control de cierre. El único cierre de
   la vista principal es la X del encabezado. */
#detailModal { cursor: default; }
#detailModal .schematic-detail-modal { cursor: default; }

/* Se elimina la navegación temporal manual de la tendencia. */
.detail-trend-nav,
.detail-trend-nav-btn { display: none !important; }
.detail-trend-actions { margin-left: auto; }

/* El resumen se comporta como un subdashboard dentro de Tendencia. */
.trend-summary-dashboard {
  margin: 10px 12px 12px;
  padding: 12px 14px 14px;
  
  border-radius: 14px;
  
}
.trend-summary-dashboard-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.trend-summary-dashboard-title span {
  
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
}
.trend-summary-dashboard-title small {
  
  font-size: 8px;
  font-weight: 560;
}
.trend-mini-dashboard {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 8px !important;
  
  border-radius: 0 !important;
  overflow: visible !important;
  
}
.trend-mini-dashboard > div,
.trend-mini-dashboard .trend-stat-card {
  min-height: 68px;
  padding: 10px 8px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  border-radius: 10px;
  
  text-align: center;
}
.trend-mini-dashboard span {
  
  font-size: 7.5px;
  font-weight: 760;
  letter-spacing: .06em;
}
.trend-mini-dashboard strong {
  width: 100%;
  margin-top: 6px !important;
  
  font-size: 12px !important;
  font-weight: 680;
  text-align: center;
  white-space: normal !important;
  text-overflow: clip !important;
}
.trend-window-status strong {
  justify-content: center !important;
}
.trend-window-status strong i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
}

@media (max-width: 900px) {
  .trend-summary-dashboard-title { align-items: center; flex-direction: column; gap: 3px; }
  .trend-mini-dashboard { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}


/* ==========================================================
   ESQUEMÁTICO V13.5 · ESTADÍSTICAS 3Φ + HOVER DE TREND
   ========================================================== */

/* Chat +15% respecto de V13.4. */
.schematic-detail-modal.ai-open:not(.trend-open) {
  width: min(1430px, calc(100vw - 24px)) !important;
  grid-template-columns: 450px minmax(0, 1fr) !important;
}
.schematic-detail-modal.ai-open.trend-open {
  width: min(1840px, calc(100vw - 20px)) !important;
  grid-template-columns: 435px minmax(450px, .72fr) minmax(590px, 1fr) !important;
}

/* Dashboard trifásico: estadísticas independientes por fase. */
.trend-summary-dashboard-3ph { padding: 13px 14px 14px; }
.trend-phase-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.trend-phase-summary-card {
  min-width: 0;
  overflow: hidden;
  
  border-radius: 11px;
  
}
.trend-phase-summary-card header {
  min-height: 46px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  
}
.trend-phase-summary-card header span {
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .08em;
}
.trend-phase-summary-card header strong {
  
  font-size: 13px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}
.trend-phase-summary-card header em {
  
  font-size: 8px;
  font-style: normal;
  font-weight: 620;
}
.phase-summary-l1 header span {  }
.phase-summary-l2 header span {  }
.phase-summary-l3 header span {  }
.trend-phase-stats {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.trend-phase-stats > div {
  min-width: 0;
  padding: 7px 5px;
  border-radius: 8px;
  
  text-align: center;
}
.trend-phase-stats small {
  display: block;
  
  font-size: 6.8px;
  font-weight: 760;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.trend-phase-stats b {
  display: block;
  margin-top: 4px;
  
  font-size: 10px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}
.trend-phase-summary-footer {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.trend-phase-summary-footer > div {
  min-height: 51px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  border-radius: 9px;
  
  text-align: center;
}
.trend-phase-summary-footer span {
  
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.trend-phase-summary-footer strong {
  margin-top: 5px;
  
  font-size: 11px;
  font-weight: 680;
}

/* Trend más técnico: hover sincronizado, crosshair y globo de valores. */
.schematic-trend-shell { position: relative; }
.professional-trend-svg {
  
}
.pro-trend-grid {  }
.pro-trend-axis-line {  }
.pro-trend-line { stroke-width: 2.15; }
.phase-line-l1,
.phase-line-l2,
.phase-line-l3,
.pro-trend-primary {  }

.trend-hover-guide {
  
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.trend-hover-marker {
  
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.trend-hover-marker-hover-l1 {  }
.trend-hover-marker-hover-l2 {  }
.trend-hover-marker-hover-l3 {  }
.trend-hover-marker-hover-primary {  }
.trend-hover-marker-hover-reference {  }
.trend-hover-tooltip {
  position: absolute;
  z-index: 30;
  width: 230px;
  padding: 10px 11px;
  
  border-radius: 11px;
  
  
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .07s ease, transform .07s ease;
}
.trend-hover-tooltip.visible { opacity: 1; transform: none; }
.trend-hover-time {
  padding-bottom: 7px;
  margin-bottom: 7px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  
}
.trend-hover-time strong {  font-size: 10px; font-weight: 720; }
.trend-hover-time span {  font-size: 9px; font-weight: 650; }
.trend-hover-row {
  min-height: 24px;
  display: grid;
  grid-template-columns: 8px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
}
.trend-hover-row > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  
}
.trend-hover-row > i.hover-l1 {  }
.trend-hover-row > i.hover-l2 {  }
.trend-hover-row > i.hover-l3 {  }
.trend-hover-row > i.hover-reference {  }
.trend-hover-row span {  font-size: 9px; font-weight: 620; }
.trend-hover-row strong {  font-size: 10px; font-weight: 720; font-variant-numeric: tabular-nums; }

@media (max-width: 1500px) {
  .schematic-detail-modal.ai-open.trend-open {
    grid-template-columns: 410px minmax(430px, .72fr) minmax(560px, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .trend-phase-summary-grid { grid-template-columns: 1fr; }
  .trend-phase-summary-footer { grid-template-columns: 1fr; }
}


/* ==========================================================
   V14 · INDUSTRIAL COMMAND CENTER / DIGITAL TWIN
   Mantiene topología, estados y semántica eléctrica.
   El color queda reservado a la condición operativa.
   ========================================================== */

/* 1) Sin flujo/electrones: el unifilar vuelve a ser deliberadamente estático. */
.schematic-current-flow,
.current-flow-line,
.qan4-flow-track,
.qan4-flow-arrows,
.qan4-flow-arrow {
  display: none !important;
  animation: none !important;
}

/* 2) Superficie técnica: retícula de ingeniería muy tenue, sin efecto decorativo dominante. */
.diagram-shell {
  
  border-radius: 12px !important;
  
  
}

.canvas {
  
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px !important;
  background-position: 2px 2px !important;
}

/* 3) Conductores: un único lenguaje visual, similar a un plano CAD/SCADA moderno. */
.wire,
.wire.live,
.wire.blue,
.wire.green {
  
  stroke-width: 3.2px !important;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
  
}

/* 4) Barras: busbars industriales neutros, sin código cromático innecesario. */
.bar,
.bar-main,
.bar-essential {
  
  border-radius: 6px !important;
  
  
}

.bar-main::before,
.bar-essential::before {
  
}

.bar-main::after,
.bar-essential::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: auto !important;
  bottom: 8px !important;
  height: 1px !important;
  opacity: .55 !important;
  
  animation: none !important;
  transform: none !important;
}

.bar-copy h2,
.bar-main .bar-copy h2,
.bar-essential .bar-copy h2 {
  
  font-size: 25px !important;
  font-weight: 590 !important;
  letter-spacing: -.025em !important;
}

.bar-copy p {
  
  font-size: 10px !important;
  font-weight: 540 !important;
  letter-spacing: .025em !important;
}

.meter-badge {
  width: 70px !important;
  height: 34px !important;
  
  border-radius: 5px !important;
  
  
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .06em !important;
}

/* 5) Tarjetas: cuerpo neutral. El estado se comunica por una barra lateral y borde tenue. */
#nodesLayer .node-card {
  position: absolute;
  overflow: hidden;
  
  border-radius: 8px !important;
  
  
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}

#nodesLayer .node-card::before {
  content: "";
  position: absolute;
  z-index: 6;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  
  pointer-events: none;
}

#nodesLayer .node-card.status-green::before,
#nodesLayer .node-card.is-operational.status-green::before {  }
#nodesLayer .node-card.status-yellow::before {  }
#nodesLayer .node-card.status-orange::before {  }
#nodesLayer .node-card.status-red::before {  }
#nodesLayer .node-card.is-unmonitored::before {  }

#nodesLayer .node-card.status-green,
#nodesLayer .node-card.status-yellow,
#nodesLayer .node-card.status-orange,
#nodesLayer .node-card.status-red,
#nodesLayer .coupler-card.node-card.is-coupler-active {
  
}

#nodesLayer .node-card.status-green {  }
#nodesLayer .node-card.status-yellow {  }
#nodesLayer .node-card.status-orange {  }
#nodesLayer .node-card.status-red {  }
#nodesLayer .coupler-card.node-card.is-coupler-active {  }

#nodesLayer .node-card:hover {
  transform: translateY(-1px) !important;
  
  
}

#nodesLayer .node-card.status-filter-match {
  transform: translateY(-1px) !important;
  
  outline-offset: 3px !important;
}

/* 6) Tipografía e instrumentación interna: lectura primero, decoración después. */
#nodesLayer .node-card .schematic-card-name {
  
  font-weight: 500 !important;
  letter-spacing: .015em !important;
}

#nodesLayer .node-tag-box,
#nodesLayer .load-primary-tag,
#nodesLayer .coupler-primary-tag {
  
  border-radius: 5px !important;
  
  
}

#nodesLayer .node-tag-box strong,
#nodesLayer .load-primary-tag strong,
#nodesLayer .coupler-primary-tag strong {
  
  font-weight: 540 !important;
  letter-spacing: .045em !important;
}

#nodesLayer .node-metric {
  
  border-radius: 5px !important;
  
  
}

#nodesLayer .node-metric strong,
#nodesLayer .node-metric strong b {
  
  font-weight: 620 !important;
}

#nodesLayer .node-metric small {
  
  font-weight: 560 !important;
  letter-spacing: .055em !important;
}

#nodesLayer .bolt {
  opacity: .58 !important;
  
}

/* 7) Equipos primarios: apariencia de bloque funcional, no de tarjeta comercial. */
#nodesLayer .equip-card.node-card .schematic-card-icon {
  
  opacity: .86 !important;
}

#nodesLayer .equip-card.node-card .transformer-entry-tag {
  border-radius: 5px !important;
  
  
}

/* 8) Matriz de estados: consola, no infografía. */
.schematic-status-panel {
  
  border-radius: 9px !important;
  
  
}

.schematic-status-panel-head {
  
}

.schematic-status-panel-head strong {
  
  font-weight: 590 !important;
  letter-spacing: .09em !important;
}

.schematic-status-panel-head em {
  border-radius: 4px !important;
  
  
}

.status-matrix-cell {
  
  border-radius: 6px !important;
  
  
}

.status-matrix-cell:hover {
  transform: none !important;
  
  
}

.status-matrix-cell[aria-pressed="true"] {
  
  
  
}

.status-matrix-green {  }
.status-matrix-yellow {  }
.status-matrix-orange {  }
.status-matrix-red {  }

.status-matrix-cell > strong {
  
  font-weight: 580 !important;
}

.status-matrix-cell > span {
  
  font-weight: 560 !important;
}

.status-matrix-cell > small {
  
}

/* 9) QAN4 conserva su estado operativo pero con lenguaje visual idéntico al resto. */
.coupler-inline-icon {
  
}

.coupler-card.node-card .coupler-state-metric {
  border-radius: 5px !important;
  
}

.coupler-card.node-card .coupler-state-metric strong {
  
  font-weight: 600 !important;
}

/* Estado filtrado: el gris sigue siendo claro, sin desaparición de activos. */
#nodesLayer .node-card.status-filter-dimmed {
  opacity: .32 !important;
  
}


/* ==========================================================
   V15 · PLUMB GLOBAL INDUSTRIAL COMMAND CENTER
   Extensión del lenguaje V14 a toda la aplicación.
   Superficies neutras, retícula técnica, geometría contenida,
   color reservado a marca, estado y significado funcional.
   ========================================================== */

/* 1) TOKENS GLOBALES */
:root {
  
  
  
  
  
  
  
  
  
  
  
  --icc-r-sm: 5px;
  --icc-r: 8px;
  --icc-r-lg: 11px;
  
}

body {
  
  
  background-size: 48px 48px, 48px 48px, auto, auto !important;
  
}

.bg-glow { opacity: .035 !important;  }

/* 2) SUPERFICIES DEL SISTEMA */
.glass,
.glass-soft,
.panel,
.login-card,
.plant-context-card,
.dashboard-detail-header,
.grafana-board,
.kpi-toolbar,
.settings-panel,
.modal-card,
.ai-window {
  
  
  
  
  
}

.panel,
.glass-soft,
.login-card,
.plant-context-card,
.settings-panel,
.modal-card,
.grafana-board,
.kpi-toolbar { border-radius: var(--icc-r-lg) !important; }

/* 3) LOGIN */
.hero-panel {
  border-radius: 12px !important;
  
  
}
.hero-overlay {
  
}
.hero-copy h2 { font-weight: 560 !important; letter-spacing: -.045em !important; }
.hero-copy p {  }
.system-strip {
  border-radius: 8px !important;
  
  
  
}
.system-strip strong {  font-weight: 580 !important; }
.login-card { border-radius: 11px !important; padding: 32px !important; }
.login-header h2 { font-weight: 560 !important; }

/* 4) SHELL: SIDEBAR + TOPBAR */
.sidebar {
  border-radius: 10px !important;
  
  
  
}
.sidebar-brand {  margin-bottom: 14px; padding-bottom: 17px !important; }
.sidebar-brand-copy strong { font-weight: 620 !important; letter-spacing: .11em !important; }
.sidebar-brand-copy span,
.sidebar-brand-copy small {  }
.nav-label {  font-weight: 650 !important; }

.nav-item,
.plant-nav-toggle,
.settings-nav-toggle,
.ai-skills-nav-toggle,
.plant-subitem,
.settings-subitem,
.ai-skills-subitem {
  border-radius: 6px !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease !important;
}
.nav-item:hover,
.plant-nav-toggle:hover,
.settings-nav-toggle:hover,
.ai-skills-nav-toggle:hover,
.plant-subitem:hover,
.settings-subitem:hover,
.ai-skills-subitem:hover {
  
}
.nav-item.active,
.plant-nav-toggle.active,
.plant-nav-group.route-active > .plant-nav-toggle,
.settings-nav-toggle.active,
.settings-nav-group.route-active > .settings-nav-toggle,
.ai-skills-nav-toggle.active,
.ai-skills-nav-group.route-active > .ai-skills-nav-toggle {
  
  
  
}
.sidebar-status,
.sidebar-service-state {
  border-radius: 6px !important;
  
  
}

.app-topbar {
  top: 14px !important;
  border-radius: 9px !important;
  
  
  
  
}
.breadcrumb {  }
.breadcrumb strong {  font-weight: 570 !important; }
.context-pill,
.user-chip,
.icon-button {
  border-radius: 6px !important;
  
  
  
}
.user-chip strong { border-radius: 4px !important;  }

/* 5) CABECERAS Y PANELES */
.page-heading {  padding-bottom: 17px; }
.page-heading h1,
.integrated-section-heading h2,
.electrical-distribution-copy h2 {
  
  font-weight: 540 !important;
  letter-spacing: -.035em !important;
}
.page-heading p,
.panel-header p,
.integrated-section-heading p,
.electrical-distribution-copy p {  }
.eyebrow,
.module-path {  font-weight: 680 !important; }
.panel-header,
.settings-panel-header {  }
.panel-header h2,
.settings-panel-header h2 { font-weight: 570 !important; }

/* 6) CARDS DE RESUMEN / MÓDULOS / DASHBOARDS */
.summary-card,
.installed-module-card,
.action-card,
.dashboard-list-item,
.dashboard-widget,
.library-card,
.ai-context-list div,
.ai-summary-list div,
.variable-grid span,
.overview-tile,
.setting-row,
.settings-info-note,
.labs-empty-state,
.labs-result-grid > *,
.labs-variable-grid > * {
  border-radius: 7px !important;
  
  
  
}
.summary-card { min-height: 108px !important; }
.summary-card span,
.dashboard-widget span {  text-transform: uppercase; letter-spacing: .055em; font-weight: 620 !important; }
.summary-card strong,
.dashboard-widget strong {  font-weight: 590 !important; font-variant-numeric: tabular-nums; }

.installed-module-card {
  
  
  border-radius: 8px !important;
}
.installed-module-card:hover,
.library-card:hover,
.action-card:hover,
.dashboard-list-item:hover {
  transform: translateY(-1px) !important;
  
  
  
}
.installed-module-icon,
.electrical-icon,
.library-card-icon {
  border-radius: 6px !important;
  
  
  
}
.tag-row span,
.dashboard-meta span,
.library-status {
  border-radius: 4px !important;
  
  
}
.dashboard-list-item.active {
  
  
  
}

/* 7) PLANTA / MAPA / MÓDULO */
.plant-map-shell,
.plant-map-static-stage,
.plant-integrated-panel,
.plant-module-focus,
.electrical-workspace-shell {
  border-radius: 9px !important;
  
  
}
.plant-hotspot-callout {
  border-radius: 6px !important;
  
  
  
}
.plant-context-card { border-radius: 7px !important; }
.plant-context-card strong { font-weight: 570 !important; }

.electrical-workspace-tabs,
.quick-range-buttons,
.analysis-mode-row {
  gap: 5px !important;
}
.electrical-workspace-tab,
.quick-range,
.analysis-mode,
.electrical-tab {
  border-radius: 5px !important;
  
  
  
}
.electrical-workspace-tab.active,
.quick-range.active,
.analysis-mode.active,
.electrical-tab.active {
  
  
  
  
}

/* 8) FORMULARIOS / CONTROLES */
.login-form input,
.modal-form input,
.calculated-field input,
.labs-config-grid select,
.manual-range input,
.refresh-block select,
.ui-selector,
.theme-selector,
textarea,
select,
input[type="text"],
input[type="password"],
input[type="datetime-local"] {
  border-radius: 6px !important;
  
  
  
  
}
.login-form input:focus,
.modal-form input:focus,
.calculated-field input:focus,
.labs-config-grid select:focus,
.manual-range input:focus,
.refresh-block select:focus,
.ui-selector:focus,
textarea:focus,
input:focus,
select:focus {
  
  
  
}

.button {
  border-radius: 6px !important;
  min-height: 39px;
  font-weight: 680 !important;
  letter-spacing: .025em !important;
  
}
.button:hover { transform: translateY(-1px) !important; }
.button-primary {
  
  
  
}
.button-secondary {
  
  
  
}
.button-secondary:hover {   }
.button-danger { border-radius: 6px !important;   }

/* 9) ESTADOS: COLOR SOLO PARA SIGNIFICADO */
.state-badge,
.settings-value-chip,
.refresh-status,
.future-module-state,
.plant-substate {
  border-radius: 4px !important;
  
  
}
.state-live,
.refresh-status.active {
  
  
  
}

/* 10) ALARMAS */
#view-alarms .panel,
.empty-professional { border-radius: 9px !important; }
.alarm-item,
.alarm-row,
.detail-alarm-row {
  border-radius: 5px !important;
  
}

/* 11) MODALES */
.modal-overlay {
  
  
}
.modal-card {
  border-radius: 10px !important;
  
  
  
}
.modal-header {  padding-bottom: 12px; }
.modal-header h2 { font-weight: 560 !important; }
.modal-close {
  border-radius: 5px !important;
  
  
}
.modal-note,
.payload-preview,
.context-grid > div {
  border-radius: 6px !important;
  
  
}

/* 12) IA GLOBAL */
.ai-dock {
  border-radius: 7px 0 0 7px !important;
  
  
  
}
.ai-window {
  border-radius: 9px !important;
  
  
}
.ai-window-header {
  
  
}
.ai-window-header button { border-radius: 5px !important;  }
.ai-messages {  }
.ai-message {
  border-radius: 7px !important;
  
  
}
.ai-message-user {
  
  
}
.ai-form {   }

/* 13) CONFIGURACIÓN */
.settings-panel { overflow: hidden; }
.setting-choice,
.font-scale-control,
.focus-state-wrap {
  border-radius: 6px !important;
  
  
}
.setting-choice.active,
.setting-choice[aria-pressed="true"] {
  
  
}

/* 14) GRAFANA / EMBEDS: MARCO COHERENTE */
.grafana-pair,
.grafana-quadrant {
  border-radius: 7px !important;
  
  
  overflow: hidden;
}
.grafana-pair iframe,
.grafana-quadrant iframe {  }

/* 15) SCROLLBAR */
* {
  scrollbar-width: thin;
  
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track {  }
*::-webkit-scrollbar-thumb {  border-radius: 5px;  background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover {  background-clip: padding-box; }

/* 16) LIGHT THEME: MISMA GEOMETRÍA INDUSTRIAL, SUPERFICIES CLARAS */
html[data-theme="light"] body {
  
  
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .app-topbar,
html[data-theme="light"] .glass,
html[data-theme="light"] .glass-soft,
html[data-theme="light"] .panel,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .login-card {
  
  
  
}
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .plant-nav-toggle.active,
html[data-theme="light"] .settings-nav-toggle.active,
html[data-theme="light"] .ai-skills-nav-toggle.active {
  
}

/* Responsive: conservar el lenguaje sin sacrificar espacio útil. */
@media (max-width: 900px) {
  .app-topbar { border-radius: 7px !important; }
  .panel, .glass-soft, .modal-card { border-radius: 8px !important; }
}


/* ==========================================================
   V15.1 · TARJETAS POR ESTADO · COLOR OPACO
   ========================================================== */
/* El cuerpo completo de la tarjeta adopta el color de su estado,
   pero con baja saturación y luminancia controlada para conservar
   la estética Industrial Command Center. */
#nodesLayer .node-card.status-green,
#nodesLayer .node-card.is-operational.status-green,
#nodesLayer .coupler-card.node-card.is-coupler-active {
  
  
  
}

#nodesLayer .node-card.status-yellow {
  
  
  
}

#nodesLayer .node-card.status-orange {
  
  
  
}

#nodesLayer .node-card.status-red {
  
  
  
}

/* Mantiene la jerarquía interna legible sobre el fondo de estado. */
#nodesLayer .node-card.status-green .node-metric,
#nodesLayer .node-card.status-yellow .node-metric,
#nodesLayer .node-card.status-orange .node-metric,
#nodesLayer .node-card.status-red .node-metric,
#nodesLayer .node-card.status-green .node-tag-box,
#nodesLayer .node-card.status-yellow .node-tag-box,
#nodesLayer .node-card.status-orange .node-tag-box,
#nodesLayer .node-card.status-red .node-tag-box {
  
  
}

#nodesLayer .node-card.status-green:hover {
  
}
#nodesLayer .node-card.status-yellow:hover {
  
}
#nodesLayer .node-card.status-orange:hover {
  
}
#nodesLayer .node-card.status-red:hover {
  
}


/* ==========================================================
   V15.3 · NORMALIZACIÓN DE TAGS + EVENT MONITOR
   ========================================================== */

/* QEN1 / QEN2: el TAG usa exactamente el lenguaje de las cargas QSx. */
#nodesLayer .equip-card.node-card .transformer-entry-tag {
  width: calc(100% - 18px) !important;
  min-height: 38px !important;
  margin: 2px auto 6px !important;
  padding: 6px 5px !important;
  display: grid !important;
  place-items: center !important;
  
  border-radius: 5px !important;
  
  
}

#nodesLayer .equip-card.node-card .transformer-entry-tag strong {
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 540 !important;
  letter-spacing: .045em !important;
}

#nodesLayer .transformer-entry-description {
  margin: 0 4px 5px !important;
  
  font-weight: 480 !important;
}

/* QEG3 inmediatamente debajo de GENERADOR ELÉCTRICO. */
#nodesLayer .generator-primary-tag {
  width: calc(100% - 18px) !important;
  min-height: 36px !important;
  margin: 0 auto 6px !important;
  padding: 5px !important;
  display: grid !important;
  place-items: center !important;
}

#nodesLayer .generator-primary-tag strong {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 540 !important;
  letter-spacing: .045em !important;
}

/* QAN4: un solo borde por bloque. */
#nodesLayer .coupler-card.node-card .coupler-simple-box {
  width: calc(100% - 18px) !important;
  min-height: 38px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  place-items: center !important;
  
  border-radius: 5px !important;
  
  
  
  font-weight: 560 !important;
  letter-spacing: .045em !important;
}

#nodesLayer .coupler-card.node-card .coupler-tag-simple {
  margin-top: 1px !important;
  margin-bottom: 5px !important;
  font-size: 14px !important;
}

#nodesLayer .coupler-card.node-card .coupler-active-simple {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  min-height: 50px !important;
  font-size: 16px !important;
  
  
  
}

/* Evita que reglas heredadas de versiones anteriores agreguen una segunda caja. */
#nodesLayer .coupler-card.node-card .coupler-state-metrics,
#nodesLayer .coupler-card.node-card .coupler-state-single,
#nodesLayer .coupler-card.node-card .coupler-state-metric {
  
  
  
}

/* Alarmas: icono de monitor de eventos industriales, más cercano a SCADA/IIoT. */
.alarm-event-icon {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.alarm-event-frame {
  
  
  stroke-width: 1.45;
}

.alarm-event-line {
  
  
  stroke-width: 1.35;
  stroke-linecap: round;
}

.alarm-event-dot {  }
.alarm-event-dot-critical {  }
.alarm-event-dot-warning {  }
.alarm-event-dot-info {  }

.nav-item.active .alarm-event-frame {
  
}


/* ==========================================================
   V15.4 · PRIMARIOS COMPACTOS + PREFERENCIAS SIMPLIFICADAS
   ========================================================== */

/* QEN1/QEN2/QEG3: se conserva el centro eléctrico del plano, pero la tarjeta
   reduce ancho/alto y concentra la lectura en icono → TAG → métricas. */
#nodesLayer .equip-card.node-card.entry-transformer-card,
#nodesLayer .equip-card.node-card.generator-equipment-card {
  width: 164px !important;
  height: 194px !important;
  min-height: 194px !important;
  padding: 5px 8px 7px !important;
}

#nodesLayer .equip-card.node-card.entry-transformer-card .schematic-card-icon,
#nodesLayer .equip-card.node-card.generator-equipment-card .schematic-card-icon {
  width: 46px !important;
  height: 46px !important;
  margin: -2px auto 2px !important;
}

#nodesLayer .equip-card.node-card.entry-transformer-card .schematic-card-icon svg,
#nodesLayer .equip-card.node-card.generator-equipment-card .schematic-card-icon svg {
  width: 44px !important;
  height: 44px !important;
}

#nodesLayer .equip-card.node-card.entry-transformer-card .transformer-entry-tag,
#nodesLayer .equip-card.node-card.generator-equipment-card .generator-primary-tag {
  width: calc(100% - 14px) !important;
  min-height: 32px !important;
  margin: 0 auto 5px !important;
  padding: 4px 5px !important;
}

#nodesLayer .equip-card.node-card.entry-transformer-card .transformer-entry-tag strong,
#nodesLayer .equip-card.node-card.generator-equipment-card .generator-primary-tag strong {
  font-size: 14px !important;
  font-weight: 560 !important;
  letter-spacing: .055em !important;
}

/* Las leyendas nominales TR1/TR2 quedan fuera de la tarjeta. */
#nodesLayer .transformer-entry-description {
  display: none !important;
}

/* Selectores de administración: mismo lenguaje visual para tema e idioma. */
.language-select-wrap,
.theme-select-wrap {
  min-width: 220px;
}

.language-selector,
.theme-selector {
  width: 100%;
  min-width: 220px;
}

/* Registro visible como capacidad bloqueada, no como acción disponible. */
.settings-locked-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: not-allowed !important;
  opacity: .52 !important;
  
}

.settings-locked-button .availability-lock {
  width: 14px !important;
  height: 14px !important;
  display: inline-grid !important;
  place-items: center !important;
}

.settings-locked-button .availability-lock svg {
  width: 14px !important;
  height: 14px !important;
  
  stroke-width: 1.7 !important;
}


/* ==========================================================
   V15.5 · MAPA + SOLAPAS GEMELAS + SELECTORES + BREADCRUMB
   ========================================================== */

/* 1) Visor de mapa +20% respecto de V15.4: 720 -> 864 px. */
.home-plant-map-panel .plant-map-shell {
  width: min(100%, 864px) !important;
  max-width: 864px !important;
}

@media (max-height: 900px) and (min-width: 681px) {
  .home-plant-map-panel .plant-map-shell {
    width: min(100%, 768px) !important;
    max-width: 768px !important;
  }
}

@media (max-width: 680px) {
  .home-plant-map-panel .plant-map-shell {
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }
}

/* 2) Solapa del chat = espejo geométrico exacto de la solapa del menú. */
@media (min-width: 981px) {
  .sidebar-collapse-toggle,
  .app-view.ai-side-panel-open .ai-side-collapse-toggle {
    display: grid !important;
    top: 50% !important;
    z-index: 84 !important;
    width: 28px !important;
    height: 74px !important;
    min-width: 28px !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    
    
    opacity: .78 !important;
    
  }

  .sidebar-collapse-toggle {
    border-radius: 0 13px 13px 0 !important;
    
    
  }

  .app-view.ai-side-panel-open .ai-side-collapse-toggle {
    position: fixed !important;
    left: auto !important;
    right: var(--ai-side-panel-width) !important;
    border-radius: 13px 0 0 13px !important;
    
    
    transition: right .23s ease, opacity .18s ease, color .18s ease, background .18s ease !important;
  }

  .sidebar-collapse-toggle:hover,
  .app-view.ai-side-panel-open .ai-side-collapse-toggle:hover {
    opacity: 1 !important;
    
    
    
  }

  .sidebar-collapse-toggle svg,
  .ai-side-collapse-toggle svg {
    width: 16px !important;
    height: 16px !important;
    
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .sidebar-collapse-toggle svg > path:first-child,
  .ai-side-collapse-toggle svg > path:first-child {
    opacity: .24 !important;
  }

  .app-view.ai-side-panel-open.ai-side-panel-hidden .ai-side-collapse-toggle {
    right: 0 !important;
  }
}

html[data-theme="light"] .sidebar-collapse-toggle,
html[data-theme="light"] .app-view.ai-side-panel-open .ai-side-collapse-toggle {
  
  
}

html[data-theme="light"] .sidebar-collapse-toggle {
  
}

html[data-theme="light"] .app-view.ai-side-panel-open .ai-side-collapse-toggle {
  
}

/* 3) Idioma replica exactamente el selector de Tema. */
.language-select-wrap {
  width: min(100%, 454px) !important;
  min-width: 0 !important;
  padding: 5px !important;
}

.language-selector {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  
  
  
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  
}

.language-selector:focus {
  
  
}

.language-selector option {
  
  
}

html[data-theme="light"] .language-selector {
  
  
  
  
}

html[data-theme="light"] .language-selector:focus {
  
  
}

html[data-theme="light"] .language-selector option {
  
  
}

/* 6) El contexto eléctrico deja de resaltarse como breadcrumb activo. */
.breadcrumb #breadcrumbCurrent {
  
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: uppercase;
}

/* ==========================================================
   V16 · PLUMB INDUSTRIAL OS
   Lenguaje visual alternativo: software operativo industrial,
   instrumentación digital y consola de ingeniería.
   Funcionalidad y política semántica de estados sin cambios.
   ========================================================== */

body.industrial-os-v16 {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  --os-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --os-sans: Inter, "Segoe UI", Arial, sans-serif;
  --os-radius: 3px;
  --os-transition: 140ms cubic-bezier(.2,.7,.2,1);

  
  
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px !important;
  font-family: var(--os-sans) !important;
}

body.industrial-os-v16 .bg-glow { display: none !important; }

/* ---------- SISTEMA TIPOGRÁFICO ---------- */
body.industrial-os-v16 .eyebrow,
body.industrial-os-v16 .nav-label,
body.industrial-os-v16 .module-path,
body.industrial-os-v16 .state-badge,
body.industrial-os-v16 .breadcrumb,
body.industrial-os-v16 .toolbar-label,
body.industrial-os-v16 .plant-substate,
body.industrial-os-v16 .future-module-state,
body.industrial-os-v16 .schematic-status-panel,
body.industrial-os-v16 .detail-live-indicator,
body.industrial-os-v16 .detail-status-badge,
body.industrial-os-v16 .refresh-status,
body.industrial-os-v16 .settings-value-chip {
  font-family: var(--os-mono) !important;
  letter-spacing: .075em !important;
}

body.industrial-os-v16 h1,
body.industrial-os-v16 h2,
body.industrial-os-v16 h3,
body.industrial-os-v16 h4 {
  
  font-weight: 560 !important;
  letter-spacing: -.025em !important;
}

body.industrial-os-v16 .page-heading h1 {
  font-size: 28px !important;
  line-height: 1.05 !important;
}

body.industrial-os-v16 .eyebrow {
  
  font-size: 8px !important;
  font-weight: 750 !important;
}

body.industrial-os-v16 .page-heading p,
body.industrial-os-v16 .panel-header p,
body.industrial-os-v16 .electrical-distribution-copy p {
  
}

/* ---------- SHELL: NO FLOATING CARDS ---------- */
body.industrial-os-v16 .app-view {
  
}

@media (min-width: 981px) {
  body.industrial-os-v16 .sidebar {
    inset: 0 auto 0 0 !important;
    height: 100vh !important;
    border-width: 0 1px 0 0 !important;
    border-radius: 0 !important;
    
  }

  body.industrial-os-v16 .app-topbar {
    top: 0 !important;
    min-height: 62px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    border-width: 0 0 1px 0 !important;
    border-radius: 0 !important;
    
  }

  body.industrial-os-v16 .app-content {
    padding-top: 24px !important;
  }
}

body.industrial-os-v16 .sidebar,
body.industrial-os-v16 .app-topbar,
body.industrial-os-v16 .glass,
body.industrial-os-v16 .glass-soft,
body.industrial-os-v16 .panel,
body.industrial-os-v16 .login-card,
body.industrial-os-v16 .plant-context-card,
body.industrial-os-v16 .settings-panel,
body.industrial-os-v16 .modal-card,
body.industrial-os-v16 .ai-window,
body.industrial-os-v16 .grafana-board,
body.industrial-os-v16 .kpi-toolbar {
  
  
  border-radius: var(--os-radius) !important;
  
  
  
}

body.industrial-os-v16 .panel,
body.industrial-os-v16 .summary-card,
body.industrial-os-v16 .library-card,
body.industrial-os-v16 .action-card,
body.industrial-os-v16 .dashboard-widget,
body.industrial-os-v16 .dashboard-list-item,
body.industrial-os-v16 .installed-module-card {
  position: relative;
  overflow: hidden;
}

body.industrial-os-v16 .panel::before,
body.industrial-os-v16 .summary-card::before,
body.industrial-os-v16 .library-card::before,
body.industrial-os-v16 .dashboard-widget::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 1px;
  
  pointer-events: none;
}

/* ---------- SIDEBAR / NAVEGACIÓN ---------- */
body.industrial-os-v16 .sidebar {
  
  padding-top: 17px !important;
}

body.industrial-os-v16 .sidebar-brand {
  
}

body.industrial-os-v16 .sidebar-brand .plumb-symbol {
  border-radius: 2px !important;
  
  
  
}

body.industrial-os-v16 .sidebar-brand-copy strong {
  
  font-family: var(--os-mono) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
}

body.industrial-os-v16 .nav-item,
body.industrial-os-v16 .plant-nav-toggle,
body.industrial-os-v16 .settings-nav-toggle,
body.industrial-os-v16 .ai-skills-nav-toggle {
  min-height: 39px !important;
  
  border-radius: 2px !important;
  
  font-size: 9px !important;
  font-weight: 620 !important;
  transition: color var(--os-transition), background var(--os-transition), border-color var(--os-transition) !important;
}

body.industrial-os-v16 .nav-item:hover,
body.industrial-os-v16 .plant-nav-toggle:hover,
body.industrial-os-v16 .settings-nav-toggle:hover,
body.industrial-os-v16 .ai-skills-nav-toggle:hover {
  
  
  
}

body.industrial-os-v16 .nav-item.active,
body.industrial-os-v16 .plant-nav-group.route-active > .plant-nav-toggle,
body.industrial-os-v16 .settings-nav-group.route-active > .settings-nav-toggle,
body.industrial-os-v16 .ai-skills-nav-group.route-active > .ai-skills-nav-toggle {
  
  
  
  
}

body.industrial-os-v16 .nav-icon {
  
  
}
body.industrial-os-v16 .nav-item.active .nav-icon,
body.industrial-os-v16 .plant-nav-group.route-active > .plant-nav-toggle .nav-icon,
body.industrial-os-v16 .settings-nav-group.route-active > .settings-nav-toggle .nav-icon {
  
  
}

body.industrial-os-v16 .plant-submenu,
body.industrial-os-v16 .settings-submenu,
body.industrial-os-v16 .ai-skills-submenu {
  
  margin-left: 18px !important;
  padding-left: 8px !important;
}

body.industrial-os-v16 .plant-subitem,
body.industrial-os-v16 .settings-subitem,
body.industrial-os-v16 .ai-skills-subitem {
  border-radius: 2px !important;
  
  
}

body.industrial-os-v16 .sidebar-status {
  
  
  border-radius: 2px !important;
}

/* ---------- TOPBAR ---------- */
body.industrial-os-v16 .app-topbar {
  
}

body.industrial-os-v16 .breadcrumb {
  
  font-size: 8px !important;
  font-weight: 620 !important;
}
body.industrial-os-v16 .breadcrumb strong,
body.industrial-os-v16 .breadcrumb span {
  
  font-size: inherit !important;
  font-weight: inherit !important;
}
body.industrial-os-v16 .breadcrumb i {  }

body.industrial-os-v16 .user-chip {
  height: 31px !important;
  
  border-radius: 2px !important;
  
  font-family: var(--os-mono) !important;
  font-size: 8px !important;
}

/* ---------- BUTTONS: CONTROLES DE CONSOLA ---------- */
body.industrial-os-v16 .button,
body.industrial-os-v16 .electrical-workspace-tab,
body.industrial-os-v16 .quick-range,
body.industrial-os-v16 .analysis-mode,
body.industrial-os-v16 .electrical-tab,
body.industrial-os-v16 .setting-choice,
body.industrial-os-v16 .text-button {
  position: relative;
  border-radius: 2px !important;
  font-family: var(--os-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase;
  
  transition: color var(--os-transition), background var(--os-transition), border-color var(--os-transition) !important;
}

body.industrial-os-v16 .button:hover,
body.industrial-os-v16 .quick-range:hover,
body.industrial-os-v16 .electrical-workspace-tab:hover,
body.industrial-os-v16 .analysis-mode:hover {
  transform: none !important;
}

body.industrial-os-v16 .button-primary {
  
  
  
}
body.industrial-os-v16 .button-primary:hover {
  
  
  
}

body.industrial-os-v16 .button-secondary,
body.industrial-os-v16 .quick-range,
body.industrial-os-v16 .analysis-mode,
body.industrial-os-v16 .electrical-workspace-tab,
body.industrial-os-v16 .electrical-tab {
  
  
  
}
body.industrial-os-v16 .button-secondary:hover,
body.industrial-os-v16 .quick-range:hover,
body.industrial-os-v16 .analysis-mode:hover,
body.industrial-os-v16 .electrical-workspace-tab:hover,
body.industrial-os-v16 .electrical-tab:hover {
  
  
  
}
body.industrial-os-v16 .quick-range.active,
body.industrial-os-v16 .analysis-mode.active,
body.industrial-os-v16 .electrical-workspace-tab.active,
body.industrial-os-v16 .electrical-tab.active {
  
  
  
  
}

body.industrial-os-v16 .button-danger {
  
  
  
}
body.industrial-os-v16 .button-danger:hover {
  
  
  
}

/* ---------- INPUTS / SELECTORES ---------- */
body.industrial-os-v16 input,
body.industrial-os-v16 select,
body.industrial-os-v16 textarea,
body.industrial-os-v16 .ui-selector,
body.industrial-os-v16 .theme-selector,
body.industrial-os-v16 .language-selector {
  border-radius: 2px !important;
  
  
  
  font-family: var(--os-mono) !important;
  
}
body.industrial-os-v16 input:focus,
body.industrial-os-v16 select:focus,
body.industrial-os-v16 textarea:focus,
body.industrial-os-v16 .ui-selector:focus {
  
  
  
}
body.industrial-os-v16 select option {
  
  
}

/* ---------- CARDS / KPIs ---------- */
body.industrial-os-v16 .summary-grid { gap: 9px !important; }
body.industrial-os-v16 .summary-card {
  min-height: 104px !important;
  padding: 14px 15px !important;
  
  border-radius: 2px !important;
  
  
}
body.industrial-os-v16 .summary-card span,
body.industrial-os-v16 .summary-card small {
  font-family: var(--os-mono) !important;
  
  font-size: 7px !important;
  letter-spacing: .055em !important;
  text-transform: uppercase;
}
body.industrial-os-v16 .summary-card strong {
  margin-top: 12px !important;
  
  font-family: var(--os-mono) !important;
  font-size: 25px !important;
  font-weight: 520 !important;
  font-variant-numeric: tabular-nums;
}

body.industrial-os-v16 .installed-module-card,
body.industrial-os-v16 .library-card,
body.industrial-os-v16 .action-card,
body.industrial-os-v16 .dashboard-list-item,
body.industrial-os-v16 .dashboard-widget,
body.industrial-os-v16 .variable-grid span,
body.industrial-os-v16 .ai-context-list div,
body.industrial-os-v16 .ai-summary-list div,
body.industrial-os-v16 .workspace-flow div,
body.industrial-os-v16 .lab-variable,
body.industrial-os-v16 .toolbar-block {
  
  border-radius: 2px !important;
  
  
}

body.industrial-os-v16 .installed-module-card:hover,
body.industrial-os-v16 .library-card:hover,
body.industrial-os-v16 .action-card:hover,
body.industrial-os-v16 .dashboard-list-item:hover {
  transform: none !important;
  
  
  
}

body.industrial-os-v16 .installed-module-icon,
body.industrial-os-v16 .electrical-icon,
body.industrial-os-v16 .library-card-icon,
body.industrial-os-v16 .lab-source-icon {
  border-radius: 2px !important;
  
  
  
  
}

body.industrial-os-v16 .tag-row span,
body.industrial-os-v16 .dashboard-meta span,
body.industrial-os-v16 .library-status,
body.industrial-os-v16 .state-badge,
body.industrial-os-v16 .future-module-state,
body.industrial-os-v16 .plant-substate {
  border-radius: 1px !important;
  
  
}

/* ---------- MAPA / PLANTA ---------- */
body.industrial-os-v16 .plant-map-shell,
body.industrial-os-v16 .plant-map-static-stage,
body.industrial-os-v16 .plant-module-focus,
body.industrial-os-v16 .plant-integrated-panel,
body.industrial-os-v16 .electrical-workspace-shell {
  border-radius: 2px !important;
  
  
}
body.industrial-os-v16 .plant-map-static-stage::after {
  content: "GEOSPATIAL / PLANT CONTEXT";
  position: absolute;
  right: 10px;
  top: 9px;
  z-index: 5;
  padding: 4px 6px;
  
  
  
  font: 600 7px/1 var(--os-mono);
  letter-spacing: .08em;
  pointer-events: none;
}
body.industrial-os-v16 .plant-hotspot-callout {
  border-radius: 2px !important;
  
  
  
}
body.industrial-os-v16 .plant-map-footer {
  
  
}
body.industrial-os-v16 .plant-map-footer span,
body.industrial-os-v16 .plant-map-source {
  font-family: var(--os-mono) !important;
}

/* ---------- ESQUEMÁTICO: INSTRUMENTACIÓN ---------- */
body.industrial-os-v16 .diagram-shell {
  
  border-radius: 2px !important;
  
  background-size: 32px 32px !important;
  
}
body.industrial-os-v16 .wire,
body.industrial-os-v16 .wire.live,
body.industrial-os-v16 .wire.blue,
body.industrial-os-v16 .wire.green {
  
  stroke-width: 3.2px !important;
  stroke-linecap: butt !important;
  
}
body.industrial-os-v16 .bar-main,
body.industrial-os-v16 .bar-essential {
  
  border-radius: 1px !important;
  
  
}
body.industrial-os-v16 .bar-main::before,
body.industrial-os-v16 .bar-essential::before { display: none !important; }
body.industrial-os-v16 .bar-copy h2 {
  
  font-family: var(--os-mono) !important;
  font-size: 24px !important;
  font-weight: 460 !important;
  letter-spacing: -.035em !important;
}
body.industrial-os-v16 .bar-copy p,
body.industrial-os-v16 .meter-badge {
  font-family: var(--os-mono) !important;
}
body.industrial-os-v16 .meter-badge {
  
  border-radius: 1px !important;
  
  
}

body.industrial-os-v16 #nodesLayer .node-card {
  border-radius: 3px !important;
  
  transition: border-color var(--os-transition), filter var(--os-transition), background var(--os-transition) !important;
}
body.industrial-os-v16 #nodesLayer .node-card:hover {
  transform: none !important;
  
}

/* Política de estado preservada: fondo completo pero opaco/desaturado. */
body.industrial-os-v16 #nodesLayer .node-card.status-green,
body.industrial-os-v16 #nodesLayer .node-card.is-operational.status-green,
body.industrial-os-v16 #nodesLayer .coupler-card.node-card.is-coupler-active {
  
  
}
body.industrial-os-v16 #nodesLayer .node-card.status-yellow {
  
  
}
body.industrial-os-v16 #nodesLayer .node-card.status-orange {
  
  
}
body.industrial-os-v16 #nodesLayer .node-card.status-red {
  
  
}
body.industrial-os-v16 #nodesLayer .node-card.is-unmonitored {
  
  
}

body.industrial-os-v16 #nodesLayer .node-card::before { display: none !important; }
body.industrial-os-v16 #nodesLayer .schematic-card-name {
  
  font-size: 9px !important;
  font-weight: 560 !important;
  letter-spacing: .015em !important;
}
body.industrial-os-v16 #nodesLayer .node-tag-box,
body.industrial-os-v16 #nodesLayer .coupler-simple-box {
  
  border-radius: 1px !important;
  
  
}
body.industrial-os-v16 #nodesLayer .node-tag-box strong,
body.industrial-os-v16 #nodesLayer .coupler-simple-box {
  
  font-family: var(--os-mono) !important;
  font-weight: 650 !important;
}
body.industrial-os-v16 #nodesLayer .node-metrics {
  gap: 4px !important;
}
body.industrial-os-v16 #nodesLayer .node-metric {
  
  border-radius: 1px !important;
  
}
body.industrial-os-v16 #nodesLayer .node-metric strong,
body.industrial-os-v16 #nodesLayer .node-metric b,
body.industrial-os-v16 #nodesLayer .node-metric em,
body.industrial-os-v16 #nodesLayer .node-metric small {
  font-family: var(--os-mono) !important;
  font-variant-numeric: tabular-nums;
}
body.industrial-os-v16 #nodesLayer .node-metric strong {
  
  font-weight: 540 !important;
}
body.industrial-os-v16 #nodesLayer .node-metric small {
  
  font-size: 5.7px !important;
}
body.industrial-os-v16 #nodesLayer .bolt {
  width: 20px !important;
  height: 20px !important;
  border-radius: 1px !important;
  
  
  
  
  font-size: 10px !important;
}

body.industrial-os-v16 .schematic-status-panel {
  
  border-radius: 2px !important;
  
  
}
body.industrial-os-v16 .status-matrix-cell {
  border-radius: 1px !important;
  
  
}
body.industrial-os-v16 .status-matrix-cell:hover,
body.industrial-os-v16 .status-matrix-cell.active {
  transform: none !important;
  
  
}
body.industrial-os-v16 .status-swatch {
  border-radius: 1px !important;
  
}

/* ---------- MODALES / POPUPS: VENTANA TÉCNICA ---------- */
body.industrial-os-v16 .modal-overlay {
  
  
}
body.industrial-os-v16 .modal-card {
  
  border-radius: 2px !important;
  
  
}
body.industrial-os-v16 .modal-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 86px;
  height: 2px;
  
  z-index: 2;
}
body.industrial-os-v16 .modal-header {
  margin: 0 0 12px !important;
  padding: 0 0 11px !important;
  
}
body.industrial-os-v16 .modal-header h2 {
  font-family: var(--os-mono) !important;
  font-size: 17px !important;
  font-weight: 520 !important;
  letter-spacing: -.02em !important;
}
body.industrial-os-v16 .modal-close {
  width: 30px !important;
  height: 30px !important;
  
  border-radius: 1px !important;
  
  
  font-family: var(--os-mono) !important;
}
body.industrial-os-v16 .modal-close:hover {
  
  
  
}
body.industrial-os-v16 .detail-section,
body.industrial-os-v16 .detail-alarm-row,
body.industrial-os-v16 .detail-metric-card,
body.industrial-os-v16 .detail-phase-card,
body.industrial-os-v16 .detail-phase-row,
body.industrial-os-v16 .trend-summary-dashboard,
body.industrial-os-v16 .trend-phase-summary-card {
  border-radius: 1px !important;
  
}

/* ---------- TENDENCIAS: OSCILOSCOPIO / TREND ENGINE ---------- */
body.industrial-os-v16 .detail-trend-panel {
  
  
}
body.industrial-os-v16 .schematic-trend-shell {
  
  border-radius: 1px !important;
  
  background-size: 36px 36px !important;
  
}
body.industrial-os-v16 .professional-trend-svg,
body.industrial-os-v16 .schematic-trend-svg {
  
  font-family: var(--os-mono) !important;
}
body.industrial-os-v16 .pro-trend-grid,
body.industrial-os-v16 .trend-grid-line {
  
}
body.industrial-os-v16 .pro-trend-primary,
body.industrial-os-v16 .schematic-trend-line {
  
  stroke-width: 1.65px !important;
  
}
body.industrial-os-v16 .phase-line-l1 {   }
body.industrial-os-v16 .phase-line-l2 {   }
body.industrial-os-v16 .phase-line-l3 {   }
body.industrial-os-v16 .trend-hover-guide {
  
  stroke-width: 1px !important;
  stroke-dasharray: 2 3 !important;
}
body.industrial-os-v16 .trend-hover-tooltip,
body.industrial-os-v16 .trend-tooltip {
  border-radius: 1px !important;
  
  
  
  font-family: var(--os-mono) !important;
}
body.industrial-os-v16 .trend-summary-dashboard,
body.industrial-os-v16 .trend-phase-summary-dashboard {
  justify-content: center !important;
  
  
  padding: 7px !important;
}
body.industrial-os-v16 .trend-summary-metric,
body.industrial-os-v16 .trend-phase-stat {
  
  
  border-radius: 0 !important;
  
  text-align: center !important;
}
body.industrial-os-v16 .trend-summary-metric:last-child,
body.industrial-os-v16 .trend-phase-stat:last-child {  }
body.industrial-os-v16 .trend-summary-metric strong,
body.industrial-os-v16 .trend-phase-stat strong {
  font-family: var(--os-mono) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}

/* ---------- ALARMAS: EVENT CONSOLE ---------- */
body.industrial-os-v16 #view-alarms .summary-card {
  
}
body.industrial-os-v16 #view-alarms .summary-card:first-child {  }
body.industrial-os-v16 #view-alarms .summary-card:nth-child(2) {  }
body.industrial-os-v16 .detail-alarm-row,
body.industrial-os-v16 .alarm-row,
body.industrial-os-v16 .alarm-item {
  min-height: 34px !important;
  
  
  border-radius: 0 !important;
  
}
body.industrial-os-v16 .detail-alarm-row:hover,
body.industrial-os-v16 .alarm-row:hover {  }
body.industrial-os-v16 .detail-alarm-row em,
body.industrial-os-v16 .detail-alarm-row small {
  font-family: var(--os-mono) !important;
}
body.industrial-os-v16 .empty-professional {
  
  border-radius: 2px !important;
  
}

/* ---------- IA: ANALYSIS PANE, NO CHAT BUBBLES ---------- */
body.industrial-os-v16 .ai-dock {
  border-radius: 2px 0 0 2px !important;
  
  
  
  font-family: var(--os-mono) !important;
}
body.industrial-os-v16 .ai-window,
body.industrial-os-v16 .detail-ai-panel {
  
  border-radius: 2px !important;
  
  
}
body.industrial-os-v16 .ai-window-header,
body.industrial-os-v16 .detail-ai-header {
  
  
}
body.industrial-os-v16 .ai-window-heading,
body.industrial-os-v16 .detail-ai-header,
body.industrial-os-v16 .detail-ai-context {
  font-family: var(--os-mono) !important;
}
body.industrial-os-v16 .ai-messages,
body.industrial-os-v16 .detail-ai-output {
  
}
body.industrial-os-v16 .ai-message,
body.industrial-os-v16 .ai-message-user {
  max-width: 100% !important;
  width: 100% !important;
  justify-self: stretch !important;
  padding: 10px 8px !important;
  border-width: 0 0 1px 0 !important;
  
  border-radius: 0 !important;
  
}
body.industrial-os-v16 .ai-message-user {
  
  padding-left: 10px !important;
}
body.industrial-os-v16 .ai-message strong,
body.industrial-os-v16 .ai-message p,
body.industrial-os-v16 .detail-ai-output {
  font-family: var(--os-mono) !important;
}
body.industrial-os-v16 .ai-form,
body.industrial-os-v16 .detail-ai-actions,
body.industrial-os-v16 .detail-ai-prompt-field {
  
  
}

/* ---------- SETTINGS ---------- */
body.industrial-os-v16 .settings-panel-header,
body.industrial-os-v16 .setting-row {
  
}
body.industrial-os-v16 .setting-row {
  min-height: 74px !important;
}
body.industrial-os-v16 .setting-row > div:first-child strong {
  
  font-family: var(--os-mono) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}
body.industrial-os-v16 .setting-row > div:first-child span {
  
}
body.industrial-os-v16 .settings-locked-button {
  border-style: dashed !important;
  opacity: .45 !important;
}

/* ---------- LOGIN: TERMINAL DE ACCESO ---------- */
body.industrial-os-v16 .login-layout {
  gap: 0 !important;
  padding: 0 !important;
  min-height: calc(100vh - 36px) !important;
}
body.industrial-os-v16 .hero-panel {
  min-height: calc(100vh - 36px) !important;
  
  
  border-radius: 0 !important;
  
}
body.industrial-os-v16 .hero-overlay {
  
}
body.industrial-os-v16 .hero-copy .eyebrow,
body.industrial-os-v16 .hero-copy h3 {
  
}
body.industrial-os-v16 .hero-copy h3 {
  font-family: var(--os-sans) !important;
  font-weight: 480 !important;
}
body.industrial-os-v16 .login-panel {
  
}
body.industrial-os-v16 .login-card {
  width: min(430px, calc(100% - 32px)) !important;
  border-radius: 2px !important;
  
  padding: 28px !important;
}
body.industrial-os-v16 .login-card::before {
  content: "AUTH / PLUMB INDUSTRIAL OS";
  display: block;
  margin: -8px 0 18px;
  
  font: 600 7px/1 var(--os-mono);
  letter-spacing: .09em;
}
body.industrial-os-v16 .login-footer {
  height: 36px !important;
  
  
  font-family: var(--os-mono) !important;
}

/* ---------- TABS / HEADERS COMO BARRA DE INGENIERÍA ---------- */
body.industrial-os-v16 .panel-header,
body.industrial-os-v16 .electrical-distribution-header,
body.industrial-os-v16 .dashboard-detail-header {
  
  
}
body.industrial-os-v16 .panel-header h2,
body.industrial-os-v16 .electrical-distribution-header h2 {
  font-family: var(--os-mono) !important;
  font-size: 11px !important;
  letter-spacing: .01em !important;
}

/* ---------- RESIZE TABS LATERALES ---------- */
@media (min-width: 981px) {
  body.industrial-os-v16 .sidebar-collapse-toggle,
  body.industrial-os-v16 .app-view.ai-side-panel-open .ai-side-collapse-toggle {
    border-radius: 0 !important;
    
    
    
    
  }
  body.industrial-os-v16 .sidebar-collapse-toggle:hover,
  body.industrial-os-v16 .app-view.ai-side-panel-open .ai-side-collapse-toggle:hover {
    
    
  }
}

/* ---------- LIGHT / SILVER INDUSTRIAL ---------- */
html[data-theme="light"] body.industrial-os-v16 {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

html[data-theme="light"] body.industrial-os-v16 .sidebar,
html[data-theme="light"] body.industrial-os-v16 .app-topbar,
html[data-theme="light"] body.industrial-os-v16 .glass,
html[data-theme="light"] body.industrial-os-v16 .glass-soft,
html[data-theme="light"] body.industrial-os-v16 .panel,
html[data-theme="light"] body.industrial-os-v16 .login-card,
html[data-theme="light"] body.industrial-os-v16 .plant-context-card,
html[data-theme="light"] body.industrial-os-v16 .settings-panel,
html[data-theme="light"] body.industrial-os-v16 .modal-card,
html[data-theme="light"] body.industrial-os-v16 .ai-window,
html[data-theme="light"] body.industrial-os-v16 .grafana-board,
html[data-theme="light"] body.industrial-os-v16 .kpi-toolbar {
  
  
  
  
}
html[data-theme="light"] body.industrial-os-v16 .sidebar {  }
html[data-theme="light"] body.industrial-os-v16 .app-topbar {  }
html[data-theme="light"] body.industrial-os-v16 h1,
html[data-theme="light"] body.industrial-os-v16 h2,
html[data-theme="light"] body.industrial-os-v16 h3,
html[data-theme="light"] body.industrial-os-v16 h4,
html[data-theme="light"] body.industrial-os-v16 .summary-card strong {  }
html[data-theme="light"] body.industrial-os-v16 .summary-card,
html[data-theme="light"] body.industrial-os-v16 .installed-module-card,
html[data-theme="light"] body.industrial-os-v16 .library-card,
html[data-theme="light"] body.industrial-os-v16 .action-card,
html[data-theme="light"] body.industrial-os-v16 .dashboard-widget,
html[data-theme="light"] body.industrial-os-v16 .toolbar-block,
html[data-theme="light"] body.industrial-os-v16 .variable-grid span,
html[data-theme="light"] body.industrial-os-v16 .ai-context-list div,
html[data-theme="light"] body.industrial-os-v16 .ai-summary-list div {
  
  
}
html[data-theme="light"] body.industrial-os-v16 input,
html[data-theme="light"] body.industrial-os-v16 select,
html[data-theme="light"] body.industrial-os-v16 textarea,
html[data-theme="light"] body.industrial-os-v16 .ui-selector,
html[data-theme="light"] body.industrial-os-v16 .theme-selector,
html[data-theme="light"] body.industrial-os-v16 .language-selector {
  
  
  
}
html[data-theme="light"] body.industrial-os-v16 select option {   }
html[data-theme="light"] body.industrial-os-v16 .nav-item,
html[data-theme="light"] body.industrial-os-v16 .plant-nav-toggle,
html[data-theme="light"] body.industrial-os-v16 .settings-nav-toggle,
html[data-theme="light"] body.industrial-os-v16 .ai-skills-nav-toggle {  }
html[data-theme="light"] body.industrial-os-v16 .nav-item:hover {   }
html[data-theme="light"] body.industrial-os-v16 .nav-item.active,
html[data-theme="light"] body.industrial-os-v16 .plant-nav-group.route-active > .plant-nav-toggle,
html[data-theme="light"] body.industrial-os-v16 .settings-nav-group.route-active > .settings-nav-toggle {
  
  
  
  
}
html[data-theme="light"] body.industrial-os-v16 .diagram-shell {
  
  background-size: 32px 32px !important;
  
}
html[data-theme="light"] body.industrial-os-v16 .bar-main,
html[data-theme="light"] body.industrial-os-v16 .bar-essential {
  
  
}
html[data-theme="light"] body.industrial-os-v16 .bar-copy h2 {  }
html[data-theme="light"] body.industrial-os-v16 .schematic-status-panel {
  
  
}
html[data-theme="light"] body.industrial-os-v16 .status-matrix-cell {
  
  
}
html[data-theme="light"] body.industrial-os-v16 .modal-overlay {  }
html[data-theme="light"] body.industrial-os-v16 .modal-card,
html[data-theme="light"] body.industrial-os-v16 .detail-trend-panel,
html[data-theme="light"] body.industrial-os-v16 .ai-window,
html[data-theme="light"] body.industrial-os-v16 .detail-ai-panel {
  
  
}
html[data-theme="light"] body.industrial-os-v16 .schematic-trend-shell {
  
  
}

/* Responsive: industrial OS conserva densidad sin perder legibilidad. */
@media (max-width: 980px) {
  body.industrial-os-v16 .app-topbar { border-radius: 0 !important; }
  body.industrial-os-v16 .sidebar { border-radius: 0 !important; }
  body.industrial-os-v16 .panel,
  body.industrial-os-v16 .modal-card,
  body.industrial-os-v16 .glass-soft { border-radius: 2px !important; }
}

/* ==========================================================
   V16.1 · UNIFIED CONTEXT HEADER
   Breadcrumb + identidad de pantalla + contexto + sesión
   forman una única cabecera. No acompaña el scroll.
   ========================================================== */
body.industrial-os-v16 .app-topbar {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-width: 0 0 1px 0 !important;
  border-radius: 0 !important;
  
  
}

body.industrial-os-v16 .topbar-unified-shell {
  width: 100%;
  min-height: 128px;
  padding: 17px 20px 18px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

body.industrial-os-v16 .topbar-unified-context {
  min-width: 0;
  display: grid;
  gap: 12px;
}

body.industrial-os-v16 .topbar-unified-context .breadcrumb {
  min-height: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--os-mono) !important;
  letter-spacing: .085em !important;
  text-transform: uppercase;
}

body.industrial-os-v16 .topbar-page-slot {
  min-height: 0 !important;
  padding: 0 !important;
  
  
}

body.industrial-os-v16 .topbar-page-slot:empty {
  display: none !important;
}

body.industrial-os-v16 .topbar-page-slot .page-heading {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 28px;
  align-items: end !important;
}

body.industrial-os-v16 .topbar-page-slot .page-heading > div:first-child {
  min-width: 0;
}

body.industrial-os-v16 .topbar-page-slot .page-heading .eyebrow {
  margin: 0 0 8px !important;
  font-family: var(--os-mono) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .10em !important;
}

body.industrial-os-v16 .topbar-page-slot .page-heading h1 {
  margin: 0 !important;
  font-size: clamp(24px, 2.35vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
}

body.industrial-os-v16 .topbar-page-slot .page-heading p {
  max-width: 820px !important;
  margin: 8px 0 0 !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

body.industrial-os-v16 .topbar-page-slot .plant-context-card {
  min-width: 0 !important;
  width: 100%;
  margin: 0 !important;
  padding: 11px 13px !important;
  align-self: end;
  
  
}

body.industrial-os-v16 .topbar-page-slot .plant-context-card span {
  font-family: var(--os-mono) !important;
  font-size: 7px !important;
  letter-spacing: .10em !important;
}

body.industrial-os-v16 .topbar-page-slot .plant-context-card strong {
  margin-top: 7px !important;
  font-size: 11px !important;
}

body.industrial-os-v16 .topbar-unified-actions {
  align-self: stretch;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end;
  gap: 8px !important;
  padding-top: 0;
}

body.industrial-os-v16 .topbar-unified-actions .user-chip,
body.industrial-os-v16 .topbar-unified-actions .button {
  min-height: 40px !important;
  height: 40px !important;
}

body.industrial-os-v16 .topbar-unified-actions .user-chip {
  padding-inline: 14px !important;
  
  font-size: 10px !important;
}

body.industrial-os-v16 .topbar-unified-actions .button {
  padding-inline: 16px !important;
}

/* Ya no hay una barra sticky: al desplazarse, la cabecera sale del viewport. */
@media (min-width: 981px) {
  body.industrial-os-v16 .app-topbar {
    position: relative !important;
    top: auto !important;
  }

  body.industrial-os-v16 .app-content {
    padding-top: 22px !important;
  }
}

@media (max-width: 1100px) {
  body.industrial-os-v16 .topbar-unified-shell {
    padding-inline: 18px;
    gap: 16px;
  }

  body.industrial-os-v16 .topbar-page-slot .page-heading {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    gap: 18px;
  }
}

@media (max-width: 780px) {
  body.industrial-os-v16 .topbar-unified-shell {
    min-height: 0;
    padding: 14px;
    grid-template-columns: 1fr;
    gap: 13px;
  }

  body.industrial-os-v16 .topbar-unified-actions {
    grid-row: 1;
    justify-content: flex-end;
    align-self: auto;
  }

  body.industrial-os-v16 .topbar-unified-context {
    grid-row: 2;
  }

  body.industrial-os-v16 .topbar-page-slot .page-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.industrial-os-v16 .topbar-page-slot .plant-context-card,
  body.industrial-os-v16 .topbar-page-slot .state-badge,
  body.industrial-os-v16 .topbar-page-slot .labs-actions {
    width: 100%;
    max-width: none;
  }
}

html[data-theme="light"] body.industrial-os-v16 .topbar-page-slot .plant-context-card {
  
  
}

/* ==========================================================
   V16.2 · COMPACT UNIFIED TOPBAR
   Una sola barra con la altura de la topbar original.
   Breadcrumb + título de vista + acciones de sesión.
   El resto de la cabecera descriptiva se elimina de esta zona.
   ========================================================== */
body.industrial-os-v16 .app-topbar {
  position: relative !important;
  top: auto !important;
  min-height: 68px !important;
  height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.industrial-os-v16 .topbar-unified-shell {
  width: 100%;
  height: 68px;
  min-height: 68px !important;
  padding: 0 20px 0 26px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
}

body.industrial-os-v16 .topbar-unified-context {
  min-width: 0;
  height: 100%;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

body.industrial-os-v16 .topbar-unified-context .breadcrumb {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 8px !important;
  line-height: 1 !important;
}

body.industrial-os-v16 .topbar-unified-context .breadcrumb::after {
  content: "";
  width: 1px;
  height: 24px;
  margin-left: 8px;
  display: inline-block;
  flex: 0 0 auto;
  
}

body.industrial-os-v16 .topbar-page-slot {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  
  
}

body.industrial-os-v16 .topbar-page-slot .page-heading {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

body.industrial-os-v16 .topbar-page-slot .page-heading > div:first-child {
  min-width: 0;
  display: flex !important;
  align-items: center !important;
}

/* En la barra compacta solo queda la identidad de la pantalla. */
body.industrial-os-v16 .topbar-page-slot .page-heading .eyebrow,
body.industrial-os-v16 .topbar-page-slot .page-heading p,
body.industrial-os-v16 .topbar-page-slot .plant-context-card {
  display: none !important;
}

body.industrial-os-v16 .topbar-page-slot .page-heading h1 {
  margin: 0 !important;
  max-width: min(42vw, 620px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  font-family: var(--os-sans) !important;
  font-size: 15px !important;
  font-weight: 590 !important;
  line-height: 1 !important;
  letter-spacing: -.018em !important;
}

/* Estados/acciones propios de una pantalla pueden convivir en la misma franja. */
body.industrial-os-v16 .topbar-page-slot .state-badge {
  min-height: 25px !important;
  height: 25px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  font-size: 7px !important;
}

body.industrial-os-v16 .topbar-page-slot .labs-actions {
  margin-left: auto !important;
  gap: 6px !important;
}

body.industrial-os-v16 .topbar-page-slot .labs-actions .button {
  min-height: 30px !important;
  height: 30px !important;
}

body.industrial-os-v16 .topbar-unified-actions {
  align-self: center !important;
  height: 100%;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body.industrial-os-v16 .topbar-unified-actions .user-chip,
body.industrial-os-v16 .topbar-unified-actions .button {
  min-height: 38px !important;
  height: 38px !important;
}

@media (min-width: 981px) {
  body.industrial-os-v16 .app-topbar {
    position: relative !important;
    top: auto !important;
  }

  body.industrial-os-v16 .app-content {
    padding-top: 18px !important;
  }
}

@media (max-width: 980px) {
  body.industrial-os-v16 .app-topbar,
  body.industrial-os-v16 .topbar-unified-shell {
    height: 64px !important;
    min-height: 64px !important;
  }

  body.industrial-os-v16 .topbar-unified-shell {
    padding-inline: 12px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  body.industrial-os-v16 .topbar-unified-context {
    gap: 10px !important;
  }

  body.industrial-os-v16 .topbar-unified-context .breadcrumb {
    display: none !important;
  }

  body.industrial-os-v16 .topbar-page-slot .page-heading h1 {
    max-width: 48vw;
    font-size: 14px !important;
  }

  body.industrial-os-v16 .topbar-page-slot .state-badge,
  body.industrial-os-v16 .topbar-page-slot .labs-actions {
    display: none !important;
  }
}

@media (max-width: 680px) {
  body.industrial-os-v16 .topbar-unified-actions .button-danger {
    display: none !important;
  }

  body.industrial-os-v16 .topbar-page-slot .page-heading h1 {
    max-width: 58vw;
  }
}


/* ==========================================================
   V16.3 · CABECERA ELÉCTRICA + PRIMARIOS
   ========================================================== */

/* El módulo eléctrico ya se identifica en la barra superior compacta.
   Se elimina el encabezado interno y se recupera superficie vertical. */
body.industrial-os-v16 #plantElectricalExpansion .plant-integrated-panel {
  padding-top: 0 !important;
}

body.industrial-os-v16 #plantElectricalExpansion .electrical-workspace-view[data-electrical-workspace-view="schematic"] {
  padding: 0 !important;
}

/* QEN1 / QEN2 / QEG3: lectura inequívoca icono -> TAG -> métricas. */
body.industrial-os-v16 #nodesLayer .equip-card.node-card.entry-transformer-card,
body.industrial-os-v16 #nodesLayer .equip-card.node-card.generator-equipment-card {
  justify-content: flex-start !important;
  padding-top: 7px !important;
}

body.industrial-os-v16 #nodesLayer .equip-card.node-card.entry-transformer-card .schematic-card-icon,
body.industrial-os-v16 #nodesLayer .equip-card.node-card.generator-equipment-card .schematic-card-icon {
  order: 1 !important;
  margin: 0 auto 2px !important;
  flex: 0 0 auto !important;
}

body.industrial-os-v16 #nodesLayer .equip-card.node-card.entry-transformer-card .transformer-entry-tag,
body.industrial-os-v16 #nodesLayer .equip-card.node-card.generator-equipment-card .generator-primary-tag {
  order: 2 !important;
  margin: 0 auto 5px !important;
  flex: 0 0 auto !important;
}

body.industrial-os-v16 #nodesLayer .equip-card.node-card.entry-transformer-card .node-metrics,
body.industrial-os-v16 #nodesLayer .equip-card.node-card.generator-equipment-card .node-metrics {
  order: 3 !important;
  margin-top: 0 !important;
}

/* ==========================================================
   V16.4 · TOOLTIP ENGINE + READABILITY PASS + MODULE TOPBAR
   ========================================================== */

/* Todos los globos personalizados se posicionan contra el viewport, no contra
   contenedores con overflow/scale. Así nunca quedan cortados por el plano,
   un modal o el borde de pantalla. */
body.industrial-os-v16 .schematic-reason-tooltip,
body.industrial-os-v16 .detail-variable-tooltip,
body.industrial-os-v16 .trend-hover-tooltip,
body.industrial-os-v16 .smart-hover-tooltip {
  position: fixed !important;
  z-index: 10050 !important;
  max-width: min(380px, calc(100vw - 24px)) !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

body.industrial-os-v16 .smart-hover-tooltip {
  width: max-content;
  min-width: 120px;
  padding: 9px 11px;
  
  border-radius: 2px;
  
  
  
  font-family: var(--os-mono) !important;
  font-size: 10.5px !important;
  font-weight: 560;
  line-height: 1.4;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .07s ease, transform .07s ease;
}
body.industrial-os-v16 .smart-hover-tooltip.visible {
  opacity: 1;
  transform: none;
}

body.industrial-os-v16 .schematic-reason-tooltip {
  min-width: 285px !important;
  max-width: min(390px, calc(100vw - 28px)) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}
body.industrial-os-v16 .schematic-reason-tooltip small {
  font-size: 9.5px !important;
}
body.industrial-os-v16 .schematic-reason-tooltip strong {
  font-size: 13.5px !important;
}
body.industrial-os-v16 .schematic-reason-tooltip span {
  font-size: 11px !important;
  line-height: 1.48 !important;
}

body.industrial-os-v16 .detail-variable-tooltip {
  width: min(360px, calc(100vw - 24px)) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

body.industrial-os-v16 .trend-hover-tooltip {
  width: 250px !important;
  max-width: min(250px, calc(100vw - 24px)) !important;
  font-size: 10.5px !important;
}
body.industrial-os-v16 .trend-hover-time strong { font-size: 11px !important; }
body.industrial-os-v16 .trend-hover-time span { font-size: 10px !important; }
body.industrial-os-v16 .trend-hover-row { min-height: 28px !important; }
body.industrial-os-v16 .trend-hover-row span,
body.industrial-os-v16 .trend-hover-row strong { font-size: 10.5px !important; }

/* Legibilidad global. La V16 introducía tamaños de 5–8 px en varios sectores;
   se elevan los pisos tipográficos sin volver a una UI pesada. */
body.industrial-os-v16 .eyebrow {
  font-size: 9.5px !important;
}

body.industrial-os-v16 .breadcrumb,
body.industrial-os-v16 .topbar-unified-context .breadcrumb {
  font-size: 10px !important;
  line-height: 1.15 !important;
}

body.industrial-os-v16 .topbar-page-slot .page-heading h1 {
  font-size: 16px !important;
  font-weight: 620 !important;
}

body.industrial-os-v16 .nav-item,
body.industrial-os-v16 .plant-nav-toggle,
body.industrial-os-v16 .settings-nav-toggle,
body.industrial-os-v16 .ai-skills-nav-toggle {
  font-size: 10.5px !important;
}

body.industrial-os-v16 .nav-label {
  font-size: 9px !important;
}

body.industrial-os-v16 .plant-subcopy strong,
body.industrial-os-v16 .settings-subitem,
body.industrial-os-v16 .ai-skills-subcopy strong {
  font-size: 10px !important;
}
body.industrial-os-v16 .plant-subcopy small,
body.industrial-os-v16 .ai-skills-subcopy small,
body.industrial-os-v16 .plant-substate {
  font-size: 8.5px !important;
}

body.industrial-os-v16 .button,
body.industrial-os-v16 .electrical-workspace-tab,
body.industrial-os-v16 .quick-range,
body.industrial-os-v16 .analysis-mode,
body.industrial-os-v16 .electrical-tab,
body.industrial-os-v16 .setting-choice,
body.industrial-os-v16 .text-button,
body.industrial-os-v16 .ui-selector,
body.industrial-os-v16 .theme-selector,
body.industrial-os-v16 .language-selector {
  font-size: 9.5px !important;
}

body.industrial-os-v16 .panel-header h2,
body.industrial-os-v16 .electrical-distribution-header h2 {
  font-size: 13px !important;
}
body.industrial-os-v16 .panel-header p,
body.industrial-os-v16 .electrical-distribution-copy p {
  font-size: 10.5px !important;
  line-height: 1.5 !important;
}

body.industrial-os-v16 .summary-card span,
body.industrial-os-v16 .summary-card small {
  font-size: 9px !important;
  line-height: 1.35 !important;
}

body.industrial-os-v16 .state-badge,
body.industrial-os-v16 .topbar-page-slot .state-badge {
  font-size: 8.5px !important;
}

body.industrial-os-v16 .setting-row > div:first-child strong {
  font-size: 10.5px !important;
}
body.industrial-os-v16 .setting-row > div:first-child span,
body.industrial-os-v16 .settings-info-note {
  font-size: 9.5px !important;
  line-height: 1.5 !important;
}

body.industrial-os-v16 .login-form label,
body.industrial-os-v16 .modal-form label,
body.industrial-os-v16 .calculated-field,
body.industrial-os-v16 .labs-config-grid label,
body.industrial-os-v16 .manual-range label,
body.industrial-os-v16 .refresh-block label {
  font-size: 9.5px !important;
}

/* Esquemático: el canvas se reduce para entrar en pantalla; por eso estas
   fuentes necesitan un tamaño lógico mayor antes del escalado. */
body.industrial-os-v16 #nodesLayer .schematic-card-name {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}
body.industrial-os-v16 #nodesLayer .node-tag-box strong,
body.industrial-os-v16 #nodesLayer .load-primary-tag strong,
body.industrial-os-v16 #nodesLayer .coupler-simple-box,
body.industrial-os-v16 #nodesLayer .transformer-entry-tag strong,
body.industrial-os-v16 #nodesLayer .generator-primary-tag strong {
  font-size: 13px !important;
}
body.industrial-os-v16 #nodesLayer .node-metric small {
  font-size: 8.8px !important;
  font-weight: 720 !important;
}
body.industrial-os-v16 #nodesLayer .node-metric strong em {
  font-size: 9.2px !important;
}
body.industrial-os-v16 #nodesLayer .node-metric.metric-fit-long strong em,
body.industrial-os-v16 #nodesLayer .node-metric.metric-fit-xlong strong em {
  font-size: 8.5px !important;
}
body.industrial-os-v16 .bar-copy p,
body.industrial-os-v16 .meter-badge {
  font-size: 10px !important;
}

body.industrial-os-v16 .schematic-status-panel-head strong {
  font-size: 10px !important;
}
body.industrial-os-v16 .schematic-status-panel-head span,
body.industrial-os-v16 .schematic-status-panel-foot,
body.industrial-os-v16 .status-matrix-cell small {
  font-size: 8.5px !important;
}
body.industrial-os-v16 .status-matrix-cell span {
  font-size: 9.5px !important;
}
body.industrial-os-v16 .status-matrix-cell strong {
  font-size: 17px !important;
}

/* Los títulos de la barra superior quedan siempre como identidad de menú/módulo.
   El JS cambia Sistema eléctrico / Agua / Tratamiento / Producción según la
   pestaña seleccionada, sin mostrar nombres de vistas internas. */
body.industrial-os-v16 .topbar-page-slot .page-heading h1 {
  text-transform: uppercase;
}

@media (max-width: 980px) {
  body.industrial-os-v16 .topbar-page-slot .page-heading h1 {
    font-size: 15px !important;
  }
  body.industrial-os-v16 #nodesLayer .node-metric small {
    font-size: 9px !important;
  }
}

/* ==========================================================
   V16.5 · TOPBAR HOME + READABILITY + DETAIL HEADER + TREND
   ========================================================== */

/* Vista general usa exactamente la misma cabecera compacta que el resto. */
body.industrial-os-v16 .topbar-page-slot[data-route="home"] .page-heading {
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.industrial-os-v16 .topbar-page-slot[data-route="home"] .page-heading h1 {
  display: block !important;
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
body.industrial-os-v16 .topbar-page-slot[data-route="home"] .page-heading .eyebrow,
body.industrial-os-v16 .topbar-page-slot[data-route="home"] .page-heading p,
body.industrial-os-v16 .topbar-page-slot[data-route="home"] .plant-context-card {
  display: none !important;
}

/* Segunda pasada de legibilidad. El criterio es que ninguna información
   operativa relevante dependa de tipografías de 6–8 px. */
body.industrial-os-v16 .sidebar-brand-copy strong { font-size: 13px !important; }
body.industrial-os-v16 .sidebar-brand-copy span,
body.industrial-os-v16 .sidebar-brand-copy small,
body.industrial-os-v16 .sidebar-status span { font-size: 9.5px !important; line-height: 1.35 !important; }
body.industrial-os-v16 .sidebar-status strong { font-size: 10.5px !important; }
body.industrial-os-v16 .nav-item,
body.industrial-os-v16 .plant-nav-toggle,
body.industrial-os-v16 .settings-nav-toggle,
body.industrial-os-v16 .ai-skills-nav-toggle { font-size: 11px !important; }
body.industrial-os-v16 .nav-label { font-size: 9.5px !important; }
body.industrial-os-v16 .plant-subcopy strong,
body.industrial-os-v16 .ai-skills-subcopy strong,
body.industrial-os-v16 .settings-subitem { font-size: 10.5px !important; }
body.industrial-os-v16 .plant-subcopy small,
body.industrial-os-v16 .ai-skills-subcopy small,
body.industrial-os-v16 .plant-substate { font-size: 9.2px !important; line-height: 1.3 !important; }

body.industrial-os-v16 .breadcrumb,
body.industrial-os-v16 .topbar-unified-context .breadcrumb { font-size: 10.5px !important; }
body.industrial-os-v16 .topbar-page-slot .page-heading h1 { font-size: 17px !important; }
body.industrial-os-v16 .user-chip,
body.industrial-os-v16 .button,
body.industrial-os-v16 .ui-selector,
body.industrial-os-v16 .theme-selector,
body.industrial-os-v16 .language-selector { font-size: 10px !important; }

body.industrial-os-v16 .summary-card span,
body.industrial-os-v16 .summary-card small,
body.industrial-os-v16 .plant-context-card span,
body.industrial-os-v16 .module-path,
body.industrial-os-v16 .tag-row span,
body.industrial-os-v16 .library-status { font-size: 10px !important; line-height: 1.35 !important; }
body.industrial-os-v16 .panel-header p,
body.industrial-os-v16 .electrical-distribution-copy p,
body.industrial-os-v16 .library-card p,
body.industrial-os-v16 .installed-module-copy p { font-size: 11px !important; line-height: 1.5 !important; }
body.industrial-os-v16 .state-badge { font-size: 9.5px !important; }
body.industrial-os-v16 .plant-map-footer span,
body.industrial-os-v16 .plant-hotspot-copy small,
body.industrial-os-v16 .plant-hotspot-copy em,
body.industrial-os-v16 .plant-map-source { font-size: 9.5px !important; line-height: 1.35 !important; }

body.industrial-os-v16 .setting-row > div:first-child strong { font-size: 11px !important; }
body.industrial-os-v16 .setting-row > div:first-child span,
body.industrial-os-v16 .settings-info-note { font-size: 10px !important; line-height: 1.45 !important; }

/* Esquemático: tipografía lógica mayor para compensar el escalado del canvas. */
body.industrial-os-v16 #nodesLayer .schematic-card-name { font-size: 11.5px !important; line-height: 1.16 !important; }
body.industrial-os-v16 #nodesLayer .node-tag-box strong,
body.industrial-os-v16 #nodesLayer .load-primary-tag strong,
body.industrial-os-v16 #nodesLayer .transformer-entry-tag strong,
body.industrial-os-v16 #nodesLayer .generator-primary-tag strong,
body.industrial-os-v16 #nodesLayer .coupler-simple-box { font-size: 14px !important; }
body.industrial-os-v16 #nodesLayer .node-tag-box span { font-size: 9px !important; }
body.industrial-os-v16 #nodesLayer .node-metric strong { font-size: 16px !important; }
body.industrial-os-v16 #nodesLayer .node-metric strong em,
body.industrial-os-v16 #nodesLayer .node-metric.metric-fit-long strong em,
body.industrial-os-v16 #nodesLayer .node-metric.metric-fit-xlong strong em { font-size: 10px !important; }
body.industrial-os-v16 #nodesLayer .node-metric small {
  min-height: 19px;
  margin-top: 4px !important;
  overflow: visible !important;
  font-size: 9.6px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
body.industrial-os-v16 .bar-copy p,
body.industrial-os-v16 .meter-badge { font-size: 10.5px !important; }
body.industrial-os-v16 .schematic-status-panel-head span,
body.industrial-os-v16 .schematic-status-panel-foot,
body.industrial-os-v16 .status-matrix-cell small { font-size: 9.3px !important; line-height: 1.3 !important; }
body.industrial-os-v16 .status-matrix-cell span { font-size: 10px !important; }

/* Modal de cualquier tarjeta: una sola identidad, sin tres niveles redundantes. */
body.industrial-os-v16 .schematic-detail-header #detailType,
body.industrial-os-v16 .schematic-detail-header .schematic-detail-subline {
  display: none !important;
}
body.industrial-os-v16 .schematic-detail-header {
  min-height: 44px !important;
  margin-bottom: 10px !important;
  align-items: center !important;
}
body.industrial-os-v16 .schematic-detail-header > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
}
body.industrial-os-v16 .schematic-detail-header #detailTitle {
  margin: 0 !important;
  
  font-family: var(--os-sans) !important;
  font-size: 19px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em !important;
}
body.industrial-os-v16 .detail-section-header h3 { font-size: 13px !important; }
body.industrial-os-v16 .detail-alarm-filter,
body.industrial-os-v16 .detail-alarm-nav,
body.industrial-os-v16 .detail-alarm-pager,
body.industrial-os-v16 .detail-live-indicator { font-size: 9.8px !important; }
body.industrial-os-v16 .detail-alarm-row strong { font-size: 10.5px !important; line-height: 1.35 !important; }
body.industrial-os-v16 .detail-alarm-row small,
body.industrial-os-v16 .detail-alarm-row em { font-size: 9.2px !important; }
body.industrial-os-v16 .detail-metric-grid span { font-size: 9.5px !important; line-height: 1.3 !important; }
body.industrial-os-v16 .detail-metric-grid strong { font-size: 14px !important; }
body.industrial-os-v16 .detail-metric-grid strong em { font-size: 10px !important; }
body.industrial-os-v16 .detail-phase-group-selector > span { font-size: 10px !important; }
body.industrial-os-v16 .detail-phase-group-selector > strong { font-size: 12px !important; }
body.industrial-os-v16 .detail-phase-group-selector em,
body.industrial-os-v16 .detail-phase-row > span,
body.industrial-os-v16 .detail-phase-row em { font-size: 9.5px !important; }
body.industrial-os-v16 .detail-phase-row > strong { font-size: 13.5px !important; }

/* Trend: sin indicador de ventana. Las métricas restantes ocupan el ancho
   de forma simétrica y centrada. */
body.industrial-os-v16 .trend-window-status { display: none !important; }
body.industrial-os-v16 .trend-summary-dashboard-title span { font-size: 10px !important; }
body.industrial-os-v16 .trend-summary-dashboard-title small { font-size: 9.5px !important; }
body.industrial-os-v16 .trend-mini-dashboard {
  width: 100% !important;
  max-width: 820px;
  margin: 0 auto !important;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  justify-content: center !important;
}
body.industrial-os-v16 .trend-mini-dashboard:has(> :nth-child(5)) {
  max-width: 980px;
  grid-template-columns: repeat(5, minmax(110px, 1fr)) !important;
}
body.industrial-os-v16 .trend-mini-dashboard span { font-size: 9.5px !important; }
body.industrial-os-v16 .trend-mini-dashboard strong { font-size: 13px !important; }
body.industrial-os-v16 .trend-mini-dashboard strong em { font-size: 10px !important; }
body.industrial-os-v16 .trend-phase-summary-card header span { font-size: 10.5px !important; }
body.industrial-os-v16 .trend-phase-summary-card header strong { font-size: 13.5px !important; }
body.industrial-os-v16 .trend-phase-summary-card header em { font-size: 9.5px !important; }
body.industrial-os-v16 .trend-phase-stats small { font-size: 9px !important; }
body.industrial-os-v16 .trend-phase-stats b { font-size: 11px !important; }
body.industrial-os-v16 .trend-phase-summary-footer {
  grid-template-columns: minmax(220px, 360px) !important;
  justify-content: center !important;
}
body.industrial-os-v16 .trend-phase-summary-footer span { font-size: 9.5px !important; }
body.industrial-os-v16 .trend-phase-summary-footer strong { font-size: 12px !important; }
body.industrial-os-v16 .pro-trend-axis,
body.industrial-os-v16 .pro-trend-time,
body.industrial-os-v16 .pro-trend-reference-label,
body.industrial-os-v16 .pro-trend-axis-title,
body.industrial-os-v16 .pro-trend-legend { font-size: 10px !important; }

body.industrial-os-v16 .ai-message strong,
body.industrial-os-v16 .ai-message p,
body.industrial-os-v16 .detail-ai-output,
body.industrial-os-v16 .detail-ai-composer textarea { font-size: 10.5px !important; line-height: 1.5 !important; }

@media (max-width: 900px) {
  body.industrial-os-v16 .trend-mini-dashboard,
  body.industrial-os-v16 .trend-mini-dashboard:has(> :nth-child(5)) {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
}

/* ==========================================================
   V16.6 · MAPA + ESTADOS + SUBNAVEGACIÓN + GESTIÓN ENERGÉTICA
   ========================================================== */

/* 1) El mapa queda limpio: sin rótulos técnicos superpuestos. */
body.industrial-os-v16 .plant-map-static-stage::after {
  content: none !important;
  display: none !important;
}
body.industrial-os-v16 .plant-map-source { display: none !important; }

/* 2) Los estados de módulos no disponibles deben leerse claramente. */
body.industrial-os-v16 .plant-substate:not(.instantiated),
body.industrial-os-v16 .future-module-state {
  font-weight: 850 !important;
  
}

/* Subbarra interna de Sistema eléctrico */
body.industrial-os-v16 .electrical-module-subnav {
  min-height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: stretch;
  gap: 0;
  
  
}
body.industrial-os-v16 .electrical-module-subnav-item {
  position: relative;
  min-width: 176px;
  min-height: 48px;
  padding: 0 18px;
  
  
  display: flex;
  align-items: center;
  gap: 11px;
  
  
  font-family: var(--os-mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-align: left;
  transition: color var(--os-transition), background var(--os-transition);
}
body.industrial-os-v16 .electrical-module-subnav-item span {
  
  font-size: 9px;
  font-weight: 700;
}
body.industrial-os-v16 .electrical-module-subnav-item strong {
  font-size: 10.5px;
  font-weight: 800;
}
body.industrial-os-v16 .electrical-module-subnav-item:hover {
  
  
}
body.industrial-os-v16 .electrical-module-subnav-item.active {
  
  
}
body.industrial-os-v16 .electrical-module-subnav-item.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  
}

/* Gestión energética */
body.industrial-os-v16 .energy-management-view {
  padding: 0 !important;
  
}
body.industrial-os-v16 .energy-command-shell {
  padding: 22px;
  display: grid;
  gap: 14px;
}
body.industrial-os-v16 .energy-command-header {
  padding: 0 0 18px;
  
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
body.industrial-os-v16 .energy-command-header h2 {
  margin: 6px 0 4px;
  font-size: 24px !important;
  line-height: 1.08;
}
body.industrial-os-v16 .energy-command-header p {
  margin: 0;
  
  font-size: 11.5px;
  line-height: 1.5;
}
body.industrial-os-v16 .energy-demo-badge {
  padding: 7px 9px;
  
  
  
  font: 800 9.5px/1 var(--os-mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
body.industrial-os-v16 .energy-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
body.industrial-os-v16 .energy-kpi-card,
body.industrial-os-v16 .energy-mini-card,
body.industrial-os-v16 .energy-panel {
  
  
  
}
body.industrial-os-v16 .energy-kpi-card {
  min-height: 122px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.industrial-os-v16 .energy-kpi-card > span,
body.industrial-os-v16 .energy-mini-card > span {
  
  font: 750 10.5px/1.25 var(--os-mono);
  letter-spacing: .045em;
  text-transform: uppercase;
}
body.industrial-os-v16 .energy-kpi-card strong {
  margin-top: 12px;
  
  font: 650 30px/1 var(--os-sans);
  letter-spacing: -.045em;
}
body.industrial-os-v16 .energy-kpi-card strong em,
body.industrial-os-v16 .energy-mini-card strong em {
  
  font: 750 11px/1 var(--os-mono);
  font-style: normal;
  letter-spacing: .02em;
}
body.industrial-os-v16 .energy-kpi-card small,
body.industrial-os-v16 .energy-mini-card small {
  margin-top: 9px;
  
  font-size: 10px;
  line-height: 1.35;
}
body.industrial-os-v16 .energy-kpi-primary {  }
body.industrial-os-v16 .energy-kpi-warning {  }

body.industrial-os-v16 .energy-main-grid {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(330px,.75fr);
  gap: 10px;
}
body.industrial-os-v16 .energy-two-column {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
body.industrial-os-v16 .energy-panel {
  padding: 15px;
}
body.industrial-os-v16 .energy-panel > header {
  padding-bottom: 11px;
  margin-bottom: 13px;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.industrial-os-v16 .energy-panel > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
body.industrial-os-v16 .energy-panel h3 {
  margin: 0;
  font-size: 14px !important;
  font-weight: 650 !important;
}
body.industrial-os-v16 .energy-panel > header > small {
  
  font: 700 9px/1 var(--os-mono);
  letter-spacing: .07em;
}
body.industrial-os-v16 .energy-panel-index {
  min-width: 28px;
  height: 25px;
  padding: 0 6px;
  
  display: grid;
  place-items: center;
  
  font: 800 9px/1 var(--os-mono);
}
body.industrial-os-v16 .energy-demand-scale {
  position: relative;
  height: 11px;
  overflow: hidden;
  
  
}
body.industrial-os-v16 .energy-demand-scale::after {
  content: "";
  position: absolute;
  left: 85%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  
}
body.industrial-os-v16 .energy-demand-scale i {
  display: block;
  width: var(--value);
  height: 100%;
  
}
body.industrial-os-v16 .energy-demand-stats {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}
body.industrial-os-v16 .energy-demand-stats > div,
body.industrial-os-v16 .energy-period-grid > div,
body.industrial-os-v16 .energy-base-comparison > div {
  min-height: 74px;
  padding: 10px;
  
  
}
body.industrial-os-v16 .energy-demand-stats span,
body.industrial-os-v16 .energy-period-grid span,
body.industrial-os-v16 .energy-base-comparison span {
  display: block;
  
  font-size: 10px;
}
body.industrial-os-v16 .energy-demand-stats strong,
body.industrial-os-v16 .energy-period-grid strong,
body.industrial-os-v16 .energy-base-comparison strong {
  display: block;
  margin-top: 8px;
  
  font-size: 16px;
  font-weight: 650;
}
body.industrial-os-v16 .energy-demand-stats small,
body.industrial-os-v16 .energy-period-grid small {
  display: block;
  margin-top: 4px;
  
  font-size: 9.5px;
}
body.industrial-os-v16 .energy-ai-panel {   }
body.industrial-os-v16 .energy-ai-statement strong {
  display: block;
  
  font-size: 16px;
  line-height: 1.35;
}
body.industrial-os-v16 .energy-ai-statement p,
body.industrial-os-v16 .energy-context-note,
body.industrial-os-v16 .energy-production-insight p {
  
  font-size: 10.5px;
  line-height: 1.55;
}
body.industrial-os-v16 .energy-ai-action,
body.industrial-os-v16 .energy-production-insight {
  margin-top: 14px;
  padding: 11px;
  
  
}
body.industrial-os-v16 .energy-ai-action span,
body.industrial-os-v16 .energy-production-insight > span {
  display: block;
  margin-bottom: 6px;
  
  font: 800 9px/1 var(--os-mono);
  letter-spacing: .08em;
}
body.industrial-os-v16 .energy-ai-action strong,
body.industrial-os-v16 .energy-production-insight strong {
  
  font-size: 11.5px;
  line-height: 1.45;
}
body.industrial-os-v16 .energy-ranking { display: grid; gap: 7px; }
body.industrial-os-v16 .energy-ranking > div {
  position: relative;
  min-height: 45px;
  padding: 0 8px 8px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 86px 48px;
  align-items: center;
  gap: 8px;
  
}
body.industrial-os-v16 .energy-ranking span {  font-size: 10.5px; }
body.industrial-os-v16 .energy-ranking span b { margin-right: 9px;  font: 700 9px/1 var(--os-mono); }
body.industrial-os-v16 .energy-ranking strong {  font-size: 11px; text-align: right; }
body.industrial-os-v16 .energy-ranking em {  font: 750 10px/1 var(--os-mono); font-style: normal; text-align: right; }
body.industrial-os-v16 .energy-ranking i {
  position: absolute;
  left: 8px;
  bottom: 2px;
  width: var(--share);
  height: 2px;
  
}
body.industrial-os-v16 .energy-period-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body.industrial-os-v16 .energy-efficiency-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
body.industrial-os-v16 .energy-mini-card { min-height: 108px; padding: 12px; }
body.industrial-os-v16 .energy-mini-card strong { display: block; margin-top: 16px;  font-size: 20px; font-weight: 650; }
body.industrial-os-v16 .energy-base-comparison { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
body.industrial-os-v16 .energy-base-comparison .is-alert {  }
body.industrial-os-v16 .energy-base-comparison .is-delta strong {  }
body.industrial-os-v16 .energy-base-breakdown { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
body.industrial-os-v16 .energy-base-breakdown span { padding: 6px 8px;   font-size: 9.5px; }
body.industrial-os-v16 .energy-base-breakdown b {  font-weight: 700; }
body.industrial-os-v16 .energy-event-timeline { display: grid; gap: 3px; }
body.industrial-os-v16 .energy-event-timeline > div { min-height: 42px; display: grid; grid-template-columns: 56px 14px minmax(0,1fr) 72px; align-items: center; gap: 8px; }
body.industrial-os-v16 .energy-event-timeline time {  font: 700 10px/1 var(--os-mono); }
body.industrial-os-v16 .energy-event-timeline i { width: 7px; height: 7px; border-radius: 50%;   }
body.industrial-os-v16 .energy-event-timeline span {  font-size: 10.5px; }
body.industrial-os-v16 .energy-event-timeline strong {  font-size: 10.5px; text-align: right; }
body.industrial-os-v16 .energy-event-timeline .is-peak i {   }
body.industrial-os-v16 .energy-event-timeline .is-peak span,
body.industrial-os-v16 .energy-event-timeline .is-peak strong {  }
body.industrial-os-v16 .energy-production-table {  }
body.industrial-os-v16 .energy-table-row { min-height: 43px; padding: 0 10px; display: grid; grid-template-columns: 1fr 1.15fr 1.1fr 1.1fr .7fr; align-items: center; gap: 10px;   font-size: 10.5px; }
body.industrial-os-v16 .energy-table-row:last-child {  }
body.industrial-os-v16 .energy-table-head { min-height: 36px;   font: 750 9px/1 var(--os-mono); text-transform: uppercase; letter-spacing: .06em; }
body.industrial-os-v16 .energy-table-row strong {  }
body.industrial-os-v16 .energy-table-row em {  font: 750 9.5px/1 var(--os-mono); font-style: normal; }
body.industrial-os-v16 .energy-table-row.is-warning {  }
body.industrial-os-v16 .energy-table-row.is-warning em {  }

/* Tema claro: conservar jerarquía, no invertir el sentido semántico. */
html[data-theme="light"] body.industrial-os-v16 .electrical-module-subnav,
html[data-theme="light"] body.industrial-os-v16 .energy-management-view {  }
html[data-theme="light"] body.industrial-os-v16 .energy-kpi-card,
html[data-theme="light"] body.industrial-os-v16 .energy-mini-card,
html[data-theme="light"] body.industrial-os-v16 .energy-panel {   }
html[data-theme="light"] body.industrial-os-v16 .energy-kpi-card strong,
html[data-theme="light"] body.industrial-os-v16 .energy-mini-card strong,
html[data-theme="light"] body.industrial-os-v16 .energy-panel h3,
html[data-theme="light"] body.industrial-os-v16 .energy-demand-stats strong,
html[data-theme="light"] body.industrial-os-v16 .energy-period-grid strong,
html[data-theme="light"] body.industrial-os-v16 .energy-base-comparison strong,
html[data-theme="light"] body.industrial-os-v16 .energy-table-row strong {  }
html[data-theme="light"] body.industrial-os-v16 .energy-demand-stats > div,
html[data-theme="light"] body.industrial-os-v16 .energy-period-grid > div,
html[data-theme="light"] body.industrial-os-v16 .energy-base-comparison > div {   }
html[data-theme="light"] body.industrial-os-v16 .energy-ai-panel {  }
html[data-theme="light"] body.industrial-os-v16 .energy-ai-statement strong,
html[data-theme="light"] body.industrial-os-v16 .energy-ai-action strong,
html[data-theme="light"] body.industrial-os-v16 .energy-production-insight strong {  }
html[data-theme="light"] body.industrial-os-v16 .energy-table-row {   }

@media (max-width: 1200px) {
  body.industrial-os-v16 .energy-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.industrial-os-v16 .energy-efficiency-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.industrial-os-v16 .energy-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  body.industrial-os-v16 .electrical-module-subnav { overflow-x: auto; padding: 0; }
  body.industrial-os-v16 .electrical-module-subnav-item { min-width: 168px; }
  body.industrial-os-v16 .energy-command-shell { padding: 12px; }
  body.industrial-os-v16 .energy-command-header { align-items: flex-start; flex-direction: column; }
  body.industrial-os-v16 .energy-two-column,
  body.industrial-os-v16 .energy-demand-stats { grid-template-columns: 1fr; }
  body.industrial-os-v16 .energy-efficiency-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.industrial-os-v16 .energy-table-row { grid-template-columns: 1fr 1fr; padding: 9px 10px; }
  body.industrial-os-v16 .energy-table-head { display: none; }
}
body.industrial-os-v16 .energy-efficiency-grid { grid-template-columns: repeat(7,minmax(0,1fr)); }
@media (max-width: 1380px) { body.industrial-os-v16 .energy-efficiency-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 1200px) { body.industrial-os-v16 .energy-efficiency-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 820px) { body.industrial-os-v16 .energy-efficiency-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* ==========================================================
   V16.7 · GESTIÓN ENERGÉTICA / KPIs / FACTURACIÓN
   ========================================================== */
body.industrial-os-v16 .energy-v17-shell {
  padding: 22px;
  display: grid;
  gap: 20px;
}
body.industrial-os-v16 .energy-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 16px;
  
}
body.industrial-os-v16 .energy-section-title-secondary { margin-top: 12px; }
body.industrial-os-v16 .energy-section-title h2 {
  margin: 7px 0 0;
  font-size: clamp(20px, 1.55vw, 27px);
  letter-spacing: -.035em;
  font-weight: 720;
}
body.industrial-os-v16 .energy-section-title p {
  margin: 7px 0 0;
  max-width: 820px;
  
  font-size: 12px;
  line-height: 1.55;
}
body.industrial-os-v16 .energy-state-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
body.industrial-os-v16 .energy-state-card {
  min-height: 166px;
  padding: 16px;
  
  
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
body.industrial-os-v16 .energy-state-card::before {
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:2px;
  
}
body.industrial-os-v16 .energy-state-card.state-accent-orange::before {  }
body.industrial-os-v16 .energy-state-card.state-accent-green::before {  }
body.industrial-os-v16 .energy-state-card.state-accent-yellow::before {  }
body.industrial-os-v16 .energy-state-card-wide { grid-column: span 2; }
body.industrial-os-v16 .energy-card-kicker {
  
  font: 760 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .055em;
}
body.industrial-os-v16 .energy-state-card > strong {
  
  font: 720 clamp(25px,2.1vw,36px)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.055em;
}
body.industrial-os-v16 .energy-state-card > strong em {
  
  font-size: .42em;
  font-style: normal;
  letter-spacing: 0;
}
body.industrial-os-v16 .energy-card-lines { display:grid; gap:6px; margin-top:auto; }
body.industrial-os-v16 .energy-card-lines span,
body.industrial-os-v16 .energy-ratio-row,
body.industrial-os-v16 .energy-period-strip span {
  
  font-size:11px;
}
body.industrial-os-v16 .energy-card-lines b,
body.industrial-os-v16 .energy-period-strip b {  font-weight:700; }
body.industrial-os-v16 .energy-ratio-row { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; margin-top:auto; }
body.industrial-os-v16 .energy-ratio-row > span {  font-weight:800; }
body.industrial-os-v16 .energy-ratio-row i,
body.industrial-os-v16 .energy-consumer-bars i { height:4px;  overflow:hidden; }
body.industrial-os-v16 .energy-ratio-row i b { height:100%; display:block;  }
body.industrial-os-v16 .energy-period-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:auto; }
body.industrial-os-v16 .energy-period-strip span { padding:8px;  display:grid; gap:4px; }
body.industrial-os-v16 .energy-consumer-bars { display:grid; gap:8px; margin-top:auto; }
body.industrial-os-v16 .energy-consumer-bars > div { display:grid; grid-template-columns:145px 1fr 108px; gap:10px; align-items:center; }
body.industrial-os-v16 .energy-consumer-bars span { font-size:11px;  }
body.industrial-os-v16 .energy-consumer-bars strong { font:700 10px ui-monospace,monospace;  text-align:right; }
body.industrial-os-v16 .energy-consumer-bars i b { display:block; height:100%;  }

body.industrial-os-v16 .energy-analysis-list {
  
  
}
body.industrial-os-v16 .energy-analysis-list article {
  min-height:72px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 180px;
  gap:14px;
  align-items:center;
  padding:12px 15px;
  
}
body.industrial-os-v16 .energy-analysis-list article:last-child {  }
body.industrial-os-v16 .energy-analysis-list article > span {
  
  font:800 11px ui-monospace,monospace;
}
body.industrial-os-v16 .energy-analysis-list strong { font-size:13px;  }
body.industrial-os-v16 .energy-analysis-list p { margin:5px 0 0;  font-size:11.5px; line-height:1.4; }
body.industrial-os-v16 .energy-analysis-list em {  font:700 11px ui-monospace,monospace; font-style:normal; text-align:right; }

body.industrial-os-v16 .energy-strategic-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
body.industrial-os-v16 .strategic-kpi-card {
  min-height:330px;
  padding:20px;
  
  
  display:flex;
  flex-direction:column;
}
body.industrial-os-v16 .strategic-kpi-head { display:flex; align-items:center; gap:10px; }
body.industrial-os-v16 .strategic-kpi-head span {  font:800 11px ui-monospace,monospace; }
body.industrial-os-v16 .strategic-kpi-head strong {  font-size:11px; letter-spacing:.04em; }
body.industrial-os-v16 .strategic-kpi-value { margin-top:32px;  font:760 clamp(36px,3vw,52px)/1 ui-monospace,monospace; letter-spacing:-.07em; }
body.industrial-os-v16 .strategic-kpi-value em {  font-size:.35em; font-style:normal; }
body.industrial-os-v16 .strategic-kpi-card p { margin:24px 0 0;  font-size:12px; line-height:1.65; }
body.industrial-os-v16 .strategic-kpi-foot { margin-top:auto; padding-top:18px;  display:grid; gap:8px; }
body.industrial-os-v16 .strategic-kpi-foot span { display:flex; justify-content:space-between; gap:12px;  font-size:10px; }
body.industrial-os-v16 .strategic-kpi-foot b {  }

body.industrial-os-v16 .billing-live-badge { display:inline-flex; align-items:center; gap:8px; }
body.industrial-os-v16 .billing-live-badge i { width:7px; height:7px; border-radius:50%;   animation:plumb-billing-pulse 1.5s ease-in-out infinite; }
@keyframes plumb-billing-pulse { 50% { opacity:.35; transform:scale(.78); } }
body.industrial-os-v16 .billing-live-panel { min-height:430px;   display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); }
body.industrial-os-v16 .billing-live-main { padding:34px; display:flex; flex-direction:column; justify-content:center;  }
body.industrial-os-v16 .billing-live-main > span {  font:800 11px ui-monospace,monospace; letter-spacing:.06em; }
body.industrial-os-v16 .billing-live-main > strong { margin-top:22px;  font:760 clamp(38px,4.2vw,68px)/1 ui-monospace,monospace; letter-spacing:-.075em; }
body.industrial-os-v16 .billing-live-main > small { margin-top:18px;  font-size:11px; }
body.industrial-os-v16 .billing-live-stats { display:grid; grid-template-rows:repeat(4,1fr); }
body.industrial-os-v16 .billing-live-stats > div { padding:20px;  display:flex; flex-direction:column; justify-content:center; gap:8px; }
body.industrial-os-v16 .billing-live-stats > div:last-child {  }
body.industrial-os-v16 .billing-live-stats span {  font-size:10px; }
body.industrial-os-v16 .billing-live-stats strong {  font:740 18px ui-monospace,monospace; }
body.industrial-os-v16 .billing-demo-note { margin:0; padding:12px 14px;    font-size:10.5px; line-height:1.55; }

html[data-theme="light"] body.industrial-os-v16 .energy-state-card,
html[data-theme="light"] body.industrial-os-v16 .energy-analysis-list,
html[data-theme="light"] body.industrial-os-v16 .strategic-kpi-card,
html[data-theme="light"] body.industrial-os-v16 .billing-live-panel {   }
html[data-theme="light"] body.industrial-os-v16 .energy-state-card > strong,
html[data-theme="light"] body.industrial-os-v16 .energy-analysis-list strong,
html[data-theme="light"] body.industrial-os-v16 .energy-analysis-list em,
html[data-theme="light"] body.industrial-os-v16 .strategic-kpi-value,
html[data-theme="light"] body.industrial-os-v16 .billing-live-main > strong,
html[data-theme="light"] body.industrial-os-v16 .billing-live-stats strong {  }
html[data-theme="light"] body.industrial-os-v16 .billing-live-main {  }
html[data-theme="light"] body.industrial-os-v16 .billing-live-stats > div,
html[data-theme="light"] body.industrial-os-v16 .energy-analysis-list article {  }

@media (max-width:1180px) {
  body.industrial-os-v16 .energy-state-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.industrial-os-v16 .energy-strategic-kpis { grid-template-columns:1fr; }
  body.industrial-os-v16 .strategic-kpi-card { min-height:250px; }
}
@media (max-width:780px) {
  body.industrial-os-v16 .energy-v17-shell { padding:12px; }
  body.industrial-os-v16 .energy-section-title { align-items:flex-start; flex-direction:column; }
  body.industrial-os-v16 .energy-state-grid { grid-template-columns:1fr; }
  body.industrial-os-v16 .energy-state-card-wide { grid-column:auto; }
  body.industrial-os-v16 .energy-period-strip { grid-template-columns:1fr; }
  body.industrial-os-v16 .energy-consumer-bars > div { grid-template-columns:110px 1fr; }
  body.industrial-os-v16 .energy-consumer-bars strong { grid-column:2; }
  body.industrial-os-v16 .energy-analysis-list article { grid-template-columns:36px 1fr; }
  body.industrial-os-v16 .energy-analysis-list em { grid-column:2; text-align:left; }
  body.industrial-os-v16 .billing-live-panel { grid-template-columns:1fr; }
  body.industrial-os-v16 .billing-live-main {   padding:24px; }
}


/* ==========================================================
   V16.8 · INDICADORES GENERALES + FACTURACIÓN DETALLADA
   ========================================================== */
body.industrial-os-v16 .electrical-module-subnav-three {
  grid-template-columns: minmax(0,1.8fr) minmax(0,.8fr) minmax(0,.8fr);
}
body.industrial-os-v16 .electrical-module-subnav-three .electrical-module-subnav-item strong {
  white-space: normal;
  line-height: 1.25;
}
body.industrial-os-v16 .plant-indicators-view {  }
body.industrial-os-v16 .plant-indicators-shell { padding: 24px 26px 30px; display:grid; gap:16px; }
body.industrial-os-v16 .plant-indicators-header {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding-bottom:16px; 
}
body.industrial-os-v16 .plant-indicators-header h2 { margin:7px 0 0; font-size:clamp(21px,1.7vw,29px); letter-spacing:-.035em; }
body.industrial-os-v16 .plant-indicators-header p { margin:7px 0 0;  font-size:12.5px; line-height:1.5; }
body.industrial-os-v16 .plant-indicators-badge {
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; 
    font:800 10.5px/1 var(--os-mono); letter-spacing:.055em; white-space:nowrap;
}
body.industrial-os-v16 .plant-indicators-badge i { width:7px; height:7px; border-radius:50%;   }
body.industrial-os-v16 .plant-electrical-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
body.industrial-os-v16 .plant-electrical-summary article { min-height:110px; padding:15px 16px;   display:flex; flex-direction:column; justify-content:center; }
body.industrial-os-v16 .plant-electrical-summary span {  font-size:11.5px; }
body.industrial-os-v16 .plant-electrical-summary strong { margin-top:12px;  font:760 clamp(22px,1.8vw,31px)/1 var(--os-mono); letter-spacing:-.045em; }
body.industrial-os-v16 .plant-electrical-summary strong em {  font-size:.48em; font-style:normal; letter-spacing:0; }
body.industrial-os-v16 .plant-electrical-summary .metric-blue strong {  }
body.industrial-os-v16 .plant-electrical-summary .metric-green strong {  }
body.industrial-os-v16 .plant-electrical-summary .metric-yellow strong {  }
body.industrial-os-v16 .plant-phase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
body.industrial-os-v16 .plant-chart-card, body.industrial-os-v16 .plant-sensor-table-card {   }
body.industrial-os-v16 .plant-chart-card > header { min-height:54px; padding:14px 16px 9px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
body.industrial-os-v16 .plant-chart-card > header strong {  font-size:13px; }
body.industrial-os-v16 .plant-chart-card > header small {  font:700 10px var(--os-mono); }
body.industrial-os-v16 .plant-mini-legend { padding:0 16px 7px; display:flex; gap:14px;  font-size:10.5px; }
body.industrial-os-v16 .plant-mini-legend span::before { content:""; width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }
body.industrial-os-v16 .phase-l1::before {  } body.industrial-os-v16 .phase-l2::before {  } body.industrial-os-v16 .phase-l3::before {  }
body.industrial-os-v16 .plant-bar-chart { height:190px; margin:0 16px 14px; padding:20px 24px 22px; position:relative; display:flex; align-items:flex-end; justify-content:space-around; gap:18px;   }
body.industrial-os-v16 .bar-grid-lines { position:absolute; inset:20px 0 22px; display:grid; grid-template-rows:repeat(4,1fr); pointer-events:none; }
body.industrial-os-v16 .bar-grid-lines i {  }
body.industrial-os-v16 .plant-bar { width:18%; height:100%; position:relative; display:flex; justify-content:center; align-items:flex-end; }
body.industrial-os-v16 .plant-bar b { width:100%; height:var(--bar); display:block; position:relative; z-index:1;  border-radius:4px 4px 0 0; }
body.industrial-os-v16 .plant-bar.phase-l1 b {  } body.industrial-os-v16 .plant-bar.phase-l2 b {  } body.industrial-os-v16 .plant-bar.phase-l3 b {  }
body.industrial-os-v16 .plant-bar span { position:absolute; bottom:-19px;  font:700 10px var(--os-mono); }
body.industrial-os-v16 .plant-bar::before { display:none; }
body.industrial-os-v16 .plant-power-trend-card { min-height:330px; }
body.industrial-os-v16 .plant-trend-wrap { padding:0 14px 14px; }
body.industrial-os-v16 .plant-power-trend { width:100%; height:250px; display:block; overflow:visible; }
body.industrial-os-v16 .plant-trend-grid line {  stroke-width:1; vector-effect:non-scaling-stroke; }
body.industrial-os-v16 .plant-trend-axis-labels text, body.industrial-os-v16 .plant-trend-time-labels text {  font:700 9px var(--os-mono); }
body.industrial-os-v16 .plant-power-line {   stroke-width:2.4; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
body.industrial-os-v16 .plant-trend-hover-point {   cursor:crosshair; }
body.industrial-os-v16 .plant-trend-hover-point:hover {   stroke-width:1.2; }
body.industrial-os-v16 .plant-sensor-table-card > header { padding:14px 16px; display:flex; align-items:center; justify-content:space-between;  }
body.industrial-os-v16 .plant-sensor-table-card > header > div { display:flex; align-items:baseline; gap:10px; }
body.industrial-os-v16 .plant-sensor-table-card > header strong {  font-size:13px; }
body.industrial-os-v16 .plant-sensor-table-card > header small, body.industrial-os-v16 .plant-sensor-table-card > header span {  font:750 10px var(--os-mono); }
body.industrial-os-v16 .plant-sensor-table-wrap { overflow:auto; }
body.industrial-os-v16 .plant-sensor-table { width:100%; min-width:1040px; border-collapse:collapse; }
body.industrial-os-v16 .plant-sensor-table th { padding:11px 14px;  font:800 10px var(--os-mono); text-align:left;  }
body.industrial-os-v16 .plant-sensor-table td { padding:11px 14px;  font:650 11px var(--os-mono);  }
body.industrial-os-v16 .plant-sensor-table tbody tr:hover {  }
body.industrial-os-v16 .plant-sensor-table tbody tr:last-child td {  }

body.industrial-os-v16 .billing-estimate-card { margin-top:14px;   }
body.industrial-os-v16 .billing-estimate-card > header { padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:18px;  }
body.industrial-os-v16 .billing-estimate-card > header div { display:grid; gap:5px; }
body.industrial-os-v16 .billing-estimate-card > header span {  font:800 10px var(--os-mono); letter-spacing:.06em; }
body.industrial-os-v16 .billing-estimate-card > header strong {  font-size:14px; }
body.industrial-os-v16 .billing-estimate-card > header > small {  font:750 10px var(--os-mono); }
body.industrial-os-v16 .billing-estimate-totals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));  }
body.industrial-os-v16 .billing-estimate-totals > div { padding:20px 22px;  }
body.industrial-os-v16 .billing-estimate-totals > div:last-child {  }
body.industrial-os-v16 .billing-estimate-totals span { display:block;  font-size:11px; }
body.industrial-os-v16 .billing-estimate-totals strong { display:block; margin-top:8px;  font:760 clamp(27px,2.3vw,38px)/1 var(--os-mono); letter-spacing:-.055em; }
body.industrial-os-v16 .billing-estimate-totals .is-projection strong {  }
body.industrial-os-v16 .billing-breakdown { padding:8px 18px 12px; display:grid; }
body.industrial-os-v16 .billing-breakdown > div { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:18px;  }
body.industrial-os-v16 .billing-breakdown > div:last-child {  }
body.industrial-os-v16 .billing-breakdown span {  font-size:11.5px; }
body.industrial-os-v16 .billing-breakdown span small {  font-size:10px; }
body.industrial-os-v16 .billing-breakdown strong {  font:760 12px var(--os-mono); }
body.industrial-os-v16 .billing-breakdown .billing-no-surcharge {  }

html[data-theme="light"] body.industrial-os-v16 .plant-indicators-view {  }
html[data-theme="light"] body.industrial-os-v16 .plant-electrical-summary article,
html[data-theme="light"] body.industrial-os-v16 .plant-chart-card,
html[data-theme="light"] body.industrial-os-v16 .plant-sensor-table-card,
html[data-theme="light"] body.industrial-os-v16 .billing-estimate-card {   }
html[data-theme="light"] body.industrial-os-v16 .plant-electrical-summary strong,
html[data-theme="light"] body.industrial-os-v16 .plant-chart-card > header strong,
html[data-theme="light"] body.industrial-os-v16 .plant-sensor-table-card > header strong,
html[data-theme="light"] body.industrial-os-v16 .billing-estimate-card > header strong,
html[data-theme="light"] body.industrial-os-v16 .billing-breakdown strong {  }
html[data-theme="light"] body.industrial-os-v16 .plant-bar-chart {  }
html[data-theme="light"] body.industrial-os-v16 .plant-trend-grid line {  }
html[data-theme="light"] body.industrial-os-v16 .plant-trend-axis-labels text,
html[data-theme="light"] body.industrial-os-v16 .plant-trend-time-labels text {  }
html[data-theme="light"] body.industrial-os-v16 .plant-sensor-table td {   }
html[data-theme="light"] body.industrial-os-v16 .plant-sensor-table th,
html[data-theme="light"] body.industrial-os-v16 .billing-estimate-card > header,
html[data-theme="light"] body.industrial-os-v16 .billing-estimate-totals {  }
html[data-theme="light"] body.industrial-os-v16 .billing-breakdown > div {  }

@media (max-width:1180px) {
  body.industrial-os-v16 .plant-electrical-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.industrial-os-v16 .plant-phase-grid { grid-template-columns:1fr; }
  body.industrial-os-v16 .electrical-module-subnav-three { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  body.industrial-os-v16 .plant-indicators-shell { padding:14px; }
  body.industrial-os-v16 .plant-indicators-header { align-items:flex-start; flex-direction:column; }
  body.industrial-os-v16 .plant-electrical-summary { grid-template-columns:1fr 1fr; }
  body.industrial-os-v16 .billing-estimate-totals { grid-template-columns:1fr; }
  body.industrial-os-v16 .billing-estimate-totals > div {   }
  body.industrial-os-v16 .billing-estimate-totals > div:last-child {  }
}


/* ==========================================================
   PLUMB · BARRAS TRIFASICAS LIVE
   Valor real + escala visual sensible
   ========================================================== */

.plant-bar {
    position: relative;
}

.plant-bar-live-value {
    position: absolute;
    left: 50%;
    bottom: calc(var(--bar) + 7px);

    transform: translateX(-50%);

    white-space: nowrap;
    pointer-events: none;

    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .01em;

    

    
    
    border-radius: 5px;

    padding: 4px 6px;

    

    z-index: 4;

    transition:
        bottom .45s ease,
        opacity .2s ease;
}

.plant-bar b {
    transition:
        height .55s cubic-bezier(.22,.8,.3,1),
        transform .55s cubic-bezier(.22,.8,.3,1);
}



/* Punto actual del trend de potencia de planta */
.plant-trend-live-point {
    
    
    stroke-width: 2;
    
    transition: cy .55s ease;
    pointer-events: none;
}



/* ==========================================================
   FACTURACION · CONTROL DE DEMANDA
   ========================================================== */

.billing-demand-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.billing-demand-overview article {
    position: relative;
    min-height: 108px;
    padding: 18px 20px;

    
    

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.billing-demand-overview article:hover {
    transform: translateY(-2px);
}

.billing-demand-overview span {
    font-size: 11px;
    opacity: .72;
    letter-spacing: .05em;
}

.billing-demand-overview strong {
    margin-top: 9px;
    font-size: clamp(22px, 2vw, 34px);
    line-height: 1;
}

.billing-demand-overview strong em {
    font-size: .45em;
    font-style: normal;
    opacity: .65;
}

.billing-demand-overview small {
    margin-top: 9px;
    font-size: 10px;
    opacity: .55;
}

.billing-demand-overview .demand-ok {
    
}

.billing-demand-overview .demand-warning {
    
    
}

.billing-demand-overview .demand-critical {
    
    
}

.billing-demand-overview .demand-warning strong {
    
}

.billing-demand-overview .demand-critical strong {
    
}

@media (max-width: 900px) {
    .billing-demand-overview {
        grid-template-columns: 1fr;
    }
}


.billing-projection-quality {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: .04em;
    opacity: .65;
    text-transform: uppercase;
}



/* ==========================================================
   FACTURACION · SUSTENTABILIDAD / CARBONO
   ========================================================== */

.billing-sustainability-card {
    margin-top: 18px;
    padding: 22px;

    
    
}

.billing-sustainability-card > header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.billing-sustainability-card > header div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.billing-sustainability-card > header span {
    font-size: 10px;
    letter-spacing: .07em;
    opacity: .65;
}

.billing-sustainability-card > header strong {
    font-size: 15px;
    font-weight: 650;
}

.billing-sustainability-card > header small {
    font-size: 10px;
    letter-spacing: .06em;
    opacity: .55;
}

.billing-sustainability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.billing-sustainability-grid article {
    min-height: 105px;
    padding: 17px 18px;

    
    

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition:
        transform .25s ease,
        border-color .25s ease;
}

.billing-sustainability-grid article:hover {
    transform: translateY(-2px);
    
}

.billing-sustainability-grid article > span {
    font-size: 10px;
    letter-spacing: .055em;
    opacity: .62;
}

.billing-sustainability-grid article > strong {
    margin-top: 9px;
    font-size: clamp(20px, 2vw, 29px);
    font-weight: 680;
}

.billing-sustainability-grid article > small {
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: .035em;
    opacity: .52;
}

.billing-carbon-source {
    display: grid;
    grid-template-columns:
        max-content minmax(0,1fr)
        max-content minmax(0,1fr);

    gap: 8px 16px;

    margin-top: 15px;
    padding-top: 13px;

    

    font-size: 9px;
}

.billing-carbon-source span {
    opacity: .45;
    letter-spacing: .055em;
}

.billing-carbon-source strong {
    opacity: .72;
    font-weight: 550;
}

@media (max-width: 900px) {

    .billing-sustainability-grid {
        grid-template-columns: 1fr;
    }

    .billing-carbon-source {
        grid-template-columns:
            max-content minmax(0,1fr);
    }
}



/* ==========================================================
   SISTEMA ELECTRICO · NAVEGACION 4 VISTAS
   ========================================================== */

.electrical-module-subnav-four {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ==========================================================
   SUSTENTABILIDAD · WORKSPACE
   ========================================================== */

.sustainability-workspace-view {
    width: 100%;
}

.sustainability-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;

    padding: 4px 0 18px;
    margin-bottom: 18px;

    
}

.sustainability-page-header > div:first-child {
    min-width: 0;
}

.sustainability-page-kicker {
    display: block;

    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;

    opacity: .72;
}

.sustainability-page-header h2 {
    margin: 0;

    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.05;
    font-weight: 650;
}

.sustainability-page-header p {
    max-width: 850px;

    margin:
        10px 0 0;

    font-size: 12px;
    line-height: 1.6;

    opacity: .66;
}

.sustainability-method-badge {
    flex: 0 0 auto;

    padding:
        8px 12px;

    

    

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;

    opacity: .78;
}


/* ==========================================================
   INTRO SUSTENTABILIDAD
   ========================================================== */

.sustainability-intro-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 18px;
}

.sustainability-intro-grid article {
    min-height: 94px;

    padding:
        16px 18px;

    

    

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition:
        border-color .22s ease,
        transform .22s ease;
}

.sustainability-intro-grid article:hover {
    transform:
        translateY(-2px);

    
}

.sustainability-intro-grid span {
    font-size: 9px;
    letter-spacing: .065em;
    opacity: .50;
}

.sustainability-intro-grid strong {
    margin-top: 8px;

    font-size: 17px;
    font-weight: 650;
}

.sustainability-intro-grid small {
    margin-top: 7px;

    font-size: 9px;
    letter-spacing: .035em;

    opacity: .46;
}


/* El bloque de carbono ahora vive dentro de su propia vista */

.sustainability-workspace-view
.billing-sustainability-card {
    margin-top: 0;
}


@media (max-width: 1000px) {

    .electrical-module-subnav-four {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sustainability-intro-grid {
        grid-template-columns:
            1fr;
    }

    .sustainability-page-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}



/* ==========================================================
   FACTURACION · OPTIMIZACION DE DEMANDA
   ========================================================== */

.billing-optimization-card {
    margin-top: 18px;
    padding: 20px 22px;

    

    
}


.billing-optimization-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 15px;

    
}


.billing-optimization-header > div {
    display: flex;
    flex-direction: column;
}


.billing-optimization-header span {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: .075em;

    opacity: .52;
}


.billing-optimization-header strong {
    margin-top: 6px;

    font-size: 15px;

    font-weight: 650;
}


.billing-optimization-header p {
    margin: 6px 0 0;

    font-size: 11px;

    opacity: .52;
}


.billing-optimization-header > small {
    padding: 6px 9px;

    

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .055em;

    opacity: .75;
}


.billing-optimization-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 12px;

    margin-top: 15px;
}


.billing-optimization-grid article {
    min-height: 105px;

    padding: 16px 18px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    

    

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.billing-optimization-grid article:hover {
    transform:
        translateY(-2px);

    
}


.billing-optimization-grid span {
    font-size: 9px;

    letter-spacing: .06em;

    opacity: .50;
}


.billing-optimization-grid strong {
    margin-top: 9px;

    font-size:
        clamp(20px,2vw,29px);

    line-height: 1;

    font-weight: 670;
}


.billing-optimization-grid small {
    margin-top: 9px;

    font-size: 9px;

    letter-spacing: .035em;

    opacity: .48;
}


/*
 * El color indica únicamente dirección respecto
 * de la referencia. No clasifica ahorro ni criticidad.
 */

.billing-optimization-grid
.baseline-above {
    
}


.billing-optimization-grid
.baseline-above strong {
    
}


.billing-optimization-grid
.baseline-below {
    
}


.billing-optimization-grid
.baseline-neutral {
    
}


/* ----------------------------------------------------------
   Metadata línea base
   ---------------------------------------------------------- */

.billing-baseline-footer {
    display: grid;

    grid-template-columns:
        .8fr .55fr .7fr 1.5fr 1.25fr;

    gap: 10px;

    margin-top: 14px;

    padding-top: 13px;

    
}


.billing-baseline-footer > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.billing-baseline-footer span {
    font-size: 8px;

    letter-spacing: .065em;

    opacity: .38;
}


.billing-baseline-footer strong {
    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 9px;

    font-weight: 600;

    opacity: .67;
}


.billing-baseline-disclaimer {
    margin:
        12px 0 0;

    font-size: 9px;

    line-height: 1.45;

    opacity: .38;
}


@media (max-width: 1050px) {

    .billing-optimization-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .billing-baseline-footer {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}


@media (max-width: 650px) {

    .billing-optimization-grid {
        grid-template-columns:
            1fr;
    }

    .billing-optimization-header {
        flex-direction:
            column;
    }
}


/* Facturación · período observado principal */

.billing-main-period {
    display: block;
    margin-top: 9px;
    font-size: 9px;
    font-weight: 550;
    letter-spacing: .045em;
    opacity: .52;
}



/* ==========================================================
   TABLA SENSORES · ORDENAMIENTO
   ========================================================== */

.sensor-sortable {
    cursor: pointer;
    user-select: none;
    transition:
        color .18s ease,
        background .18s ease;
}

.sensor-sortable:hover {
    
    
}

.sensor-sortable::after {
    content: " ↕";
    margin-left: 6px;
    font-size: .8em;
    opacity: .28;
}

.sensor-sortable.sensor-sort-asc::after {
    content: " ↑";
    opacity: .9;
}

.sensor-sortable.sensor-sort-desc::after {
    content: " ↓";
    opacity: .9;
}



/* ==========================================================
   PLUMB_POWER_ECHARTS_STYLE_V1
   ========================================================== */

body.industrial-os-v16
.plant-power-trend-card {
    min-height: 420px;
}


body.industrial-os-v16
.plant-trend-echarts-wrap {
    position: relative;
    min-height: 355px;
    padding: 0 10px 8px;
}


body.industrial-os-v16
.plant-power-echart {
    width: 100%;
    height: 345px;
    min-height: 345px;
}


body.industrial-os-v16
.plant-trend-interaction-help {

    position: absolute;

    top: 5px;
    right: 26px;

    display: flex;
    align-items: center;
    gap: 18px;

    pointer-events: none;

    

    font:
      700 8px
      var(--os-mono);

    letter-spacing: .04em;
}


body.industrial-os-v16
.plant-trend-interaction-help
span + span::before {

    content: "·";

    position: absolute;

    margin-left: -11px;

    opacity: .42;
}


html[data-theme="light"]
body.industrial-os-v16
.plant-trend-interaction-help {
    
}


@media (max-width: 800px) {

    body.industrial-os-v16
    .plant-trend-interaction-help {
        display: none;
    }

    body.industrial-os-v16
    .plant-power-echart {
        height: 310px;
        min-height: 310px;
    }

}



/* ==========================================================
   PLUMB_POWER_TREND_PRO_STYLE_V2
   ========================================================== */

body.industrial-os-v16
.plant-power-trend-card {
    min-height: 395px;
}


body.industrial-os-v16
.plant-power-pro-header {

    min-height: 78px;

    padding:
        15px 18px 9px;

    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        28px;
}


body.industrial-os-v16
.plant-power-pro-copy {

    min-width: 0;

    display: grid;

    gap: 9px;
}


body.industrial-os-v16
.plant-power-pro-copy
> strong {

    

    font-size: 13px;

    font-weight: 720;

    letter-spacing: -.012em;
}


body.industrial-os-v16
.plant-power-pro-kpis {

    display: flex;

    align-items: center;

    gap: 22px;

    flex-wrap: wrap;

    font:
        700 8px
        var(--os-mono);

    

    letter-spacing: .045em;
}


body.industrial-os-v16
.plant-power-pro-kpis span {

    display: inline-flex;

    align-items: baseline;

    gap: 7px;
}


body.industrial-os-v16
.plant-power-pro-kpis b {

    

    font-size:
        10px;

    font-weight:
        760;

    letter-spacing:
        0;
}


body.industrial-os-v16
.plant-power-pro-kpis
span:first-child b {

    
}


body.industrial-os-v16
.plant-power-pro-actions {

    display: grid;

    justify-items: end;

    gap: 7px;

    flex:
        0 0 auto;
}


body.industrial-os-v16
.plant-power-range-selector {

    display:
        inline-flex;

    padding:
        3px;

    

    
}


body.industrial-os-v16
.plant-power-range-selector button {

    min-width:
        40px;

    height:
        27px;

    padding:
        0 9px;

    

    

    

    font:
        760 8px
        var(--os-mono);

    transition:
        color .15s ease,
        background .15s ease;
}


body.industrial-os-v16
.plant-power-range-selector
button:hover {

    
}


body.industrial-os-v16
.plant-power-range-selector
button.active {

    

    

    
}


body.industrial-os-v16
.plant-power-window-state {

    min-height: 17px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    

    font:
        700 8px
        var(--os-mono);
}


body.industrial-os-v16
#plantPowerResetZoom {

    

    padding:
        0;

    

    

    font:
        760 8px
        var(--os-mono);
}


body.industrial-os-v16
#plantPowerResetZoom:hover {

    text-decoration:
        underline;
}


body.industrial-os-v16
.plant-trend-echarts-wrap {

    min-height:
        310px;

    padding:
        0 7px 8px;
}


body.industrial-os-v16
.plant-power-echart {

    height:
        310px;

    min-height:
        310px;
}


/* El bloque instructivo viejo no vuelve a mostrarse */
body.industrial-os-v16
.plant-trend-interaction-help {

    display:
        none !important;
}


/* LIGHT */

html[data-theme="light"]
body.industrial-os-v16
.plant-power-pro-copy
> strong {

    
}


html[data-theme="light"]
body.industrial-os-v16
.plant-power-pro-kpis b {

    
}


html[data-theme="light"]
body.industrial-os-v16
.plant-power-range-selector {

    

    
}


html[data-theme="light"]
body.industrial-os-v16
.plant-power-range-selector
button.active {

    

    
}


@media (max-width: 850px) {

    body.industrial-os-v16
    .plant-power-pro-header {

        flex-direction:
            column;
    }


    body.industrial-os-v16
    .plant-power-pro-actions {

        width:
            100%;

        justify-items:
            start;
    }


    body.industrial-os-v16
    .plant-power-pro-kpis {

        gap:
            13px;
    }

}



/* ==========================================================
   PLUMB_POWER_ANNOTATIONS_STYLE_V1
   ========================================================== */

body.industrial-os-v16
.plant-power-tools {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


body.industrial-os-v16
.plant-power-tools button {

    height:
        29px;

    padding:
        0 10px;

    

    

    

    font:
        750 8px
        var(--os-mono);

    letter-spacing:
        .035em;

    transition:
        .16s ease;
}


body.industrial-os-v16
.plant-power-tools button:hover {

    

    

    
}


body.industrial-os-v16
.plant-power-tools
button.has-value {

    

    
}


body.industrial-os-v16
.plant-power-tools
button.active {

    

    

    
}


html[data-theme="light"]
body.industrial-os-v16
.plant-power-tools button {

    

    

    
}


@media (max-width: 900px) {

    body.industrial-os-v16
    .plant-power-tools {

        flex-wrap:
            wrap;
    }

}



/* ==========================================================
   PLUMB_POWER_ANNOTATIONS_V3_STYLE
   ========================================================== */


/* MODAL */

.plumb-power-modal {

    position: fixed;

    inset: 0;

    z-index: 12000;

    display: grid;

    place-items: center;

    padding: 22px;
}


.plumb-power-modal-backdrop {

    position: absolute;

    inset: 0;

    

    

    
}


.plumb-power-modal-dialog {

    position: relative;

    z-index: 1;

    width:
        min(
            470px,
            calc(100vw - 32px)
        );

    overflow: hidden;

    

    border-radius:
        14px;

    

    

    
}


.plumb-power-modal-dialog > header {

    padding:
        18px 20px;

    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap: 20px;

    

    
}


.plumb-power-modal-dialog > header span {

    display: block;

    

    font:
        760 8px
        var(--os-mono, monospace);

    letter-spacing:
        .09em;
}


.plumb-power-modal-dialog > header h3 {

    margin:
        7px 0 0;

    font-size:
        17px;

    font-weight:
        650;

    letter-spacing:
        -.025em;
}


.plumb-power-modal-dialog > header p {

    margin:
        6px 0 0;

    

    font-size:
        10px;

    line-height:
        1.4;
}


.plumb-power-modal-close {

    width: 31px;
    height: 31px;

    

    border-radius:
        7px;

    

    

    font-size:
        19px;
}


.plumb-power-modal-body {

    padding: 20px;

    display: grid;

    gap: 17px;
}


.plumb-power-field {

    display: grid;

    gap: 8px;
}


.plumb-power-field > span {

    

    font:
        750 9px
        var(--os-mono, monospace);

    letter-spacing:
        .055em;
}


.plumb-power-field input,
.plumb-power-field textarea {

    width: 100%;

    

    border-radius:
        8px;

    

    

    

    font:
        600 12px
        var(--font);

    transition:
        .15s ease;
}


.plumb-power-field input {

    height: 42px;

    padding:
        0 12px;
}


.plumb-power-field textarea {

    min-height:
        105px;

    padding:
        11px 12px;

    resize: vertical;

    line-height: 1.45;
}


.plumb-power-field input:focus,
.plumb-power-field textarea:focus {

    

    
}


.plumb-power-input-unit {

    position: relative;
}


.plumb-power-input-unit input {

    padding-right: 52px;
}


.plumb-power-input-unit b {

    position: absolute;

    right: 12px;

    top: 50%;

    transform:
        translateY(-50%);

    

    font:
        750 9px
        var(--os-mono, monospace);
}


.plumb-power-modal-info {

    padding:
        11px 12px;

    display: flex;

    align-items:
        flex-start;

    gap: 9px;

    

    

    

    font-size:
        9px;

    line-height:
        1.45;
}


.plumb-power-modal-info i {

    width: 18px;

    margin-top: 6px;

    flex: 0 0 auto;

    
}


.plumb-note-context {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    
}


.plumb-note-context div {

    padding: 12px;
}


.plumb-note-context div + div {

    
}


.plumb-note-context span {

    display: block;

    

    font:
        730 8px
        var(--os-mono, monospace);
}


.plumb-note-context strong {

    display: block;

    margin-top: 6px;

    

    font:
        700 11px
        var(--os-mono, monospace);
}


.plumb-note-start {

    min-height: 170px;

    display: grid;

    place-items: center;

    align-content: center;

    text-align: center;
}


.plumb-note-target-icon {

    width: 42px;
    height: 42px;

    margin-bottom: 13px;

    display: grid;

    place-items: center;

    

    border-radius: 50%;

    

    font-size: 23px;

    
}


.plumb-note-start strong {

    font-size: 13px;
}


.plumb-note-start p {

    max-width: 320px;

    margin: 8px 0 0;

    

    font-size: 10px;

    line-height: 1.5;
}


.plumb-power-modal-dialog > footer {

    min-height: 62px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    
}


.plumb-power-btn {

    min-height: 34px;

    padding:
        0 13px;

    border-radius:
        7px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font:
        760 9px
        var(--os-mono, monospace);

    letter-spacing:
        .03em;
}


.plumb-power-btn svg {

    width: 14px;
    height: 14px;

    

    

    stroke-width: 1.7;
}


.plumb-power-btn.secondary {

    

    

    
}


.plumb-power-btn.primary {

    

    

    
}


.plumb-power-btn.danger {

    margin-right: auto;

    

    

    
}


/* TOOLTIP · HOVER NOTA/COTA */

.plumb-chart-hover-card {

    min-width: 190px;

    max-width: 280px;

    display: grid;

    gap: 5px;
}


.plumb-chart-hover-card > span {

    

    font-size: 8px;

    letter-spacing:
        .06em;
}


.plumb-chart-hover-card > strong {

    

    font-size: 11px;

    line-height: 1.35;
}


.plumb-chart-hover-card > b {

    

    font-size: 12px;
}


.plumb-chart-trash {

    width: 100%;

    min-height: 31px;

    margin-top: 7px;

    padding:
        0 9px;

    

    border-radius:
        6px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    

    

    font-size: 9px;
}


.plumb-chart-trash:hover {

    

    

    
}


.plumb-chart-trash svg {

    width: 14px;
    height: 14px;

    

    

    stroke-width: 1.7;
}


/* LIGHT THEME */

html[data-theme="light"]
.plumb-power-modal-backdrop {

    
}


html[data-theme="light"]
.plumb-power-modal-dialog {

    

    

    

    
}


html[data-theme="light"]
.plumb-power-modal-dialog > header,
html[data-theme="light"]
.plumb-power-modal-dialog > footer {

    
}


html[data-theme="light"]
.plumb-power-field input,
html[data-theme="light"]
.plumb-power-field textarea {

    

    

    
}


html[data-theme="light"]
.plumb-note-context {

    
}


html[data-theme="light"]
.plumb-note-context strong {

    
}


html[data-theme="light"]
.plumb-chart-hover-card > strong {

    
}



/* ==========================================================
   PLUMB_PHASE_ECHARTS_STYLE_V1
   ========================================================== */

body.industrial-os-v16
.plant-phase-grid
.plant-chart-card {

    min-height:
        310px;
}


body.industrial-os-v16
.plant-phase-grid
.plant-chart-card > header {

    min-height:
        52px;

    padding:
        14px 16px 4px;
}


body.industrial-os-v16
.plant-phase-echart {

    width:
        100%;

    height:
        245px;

    min-height:
        245px;

    padding:
        0 5px;
}


/*
 * Las barras HTML anteriores quedan fuera
 * de uso una vez inicializa ECharts.
 */

body.industrial-os-v16
.plant-phase-grid
.plant-bar-chart {

    display:
        none;
}


/* LIGHT */

html[data-theme="light"]
body.industrial-os-v16
.plant-phase-grid
.plant-chart-card {

    

    
}


@media (max-width: 1180px) {

    body.industrial-os-v16
    .plant-phase-echart {

        height:
            270px;

        min-height:
            270px;
    }

}



/* ==========================================================
   PLUMB_TREND_FASTLOAD_STYLE_V1
   ========================================================== */

body.industrial-os-v16
#plantPowerTrendChart {

    position: relative;
}


body.industrial-os-v16
#plantPowerTrendChart.is-loading::after {

    content:
        "CARGANDO HISTÓRICO…";

    position:
        absolute;

    inset:
        0;

    z-index:
        20;

    display:
        grid;

    place-items:
        center;

    pointer-events:
        none;

    

    

    font:
        700 9px
        var(--os-mono, monospace);

    letter-spacing:
        .08em;
}


body.industrial-os-v16
#plantPowerTrendChart.is-load-error::after {

    content:
        "HISTÓRICO NO DISPONIBLE · REINTENTAR AL INGRESAR";

    position:
        absolute;

    inset:
        0;

    z-index:
        20;

    display:
        grid;

    place-items:
        center;

    pointer-events:
        none;

    

    font:
        700 9px
        var(--os-mono, monospace);

    letter-spacing:
        .06em;
}


html[data-theme="light"]
body.industrial-os-v16
#plantPowerTrendChart.is-loading::after {

    

    
}



/* ==========================================================
   PLUMB_SCHEMATIC_ECHARTS_STYLE_V1
   ========================================================== */

body.industrial-os-v16
.schematic-trend-shell {

    position:
        relative;

    width:
        100%;

    height:
        430px !important;

    min-height:
        430px !important;

    overflow:
        hidden;
}


body.industrial-os-v16
.detail-trend-selected {

    margin:
        4px 0 10px;

    text-transform:
        none;
}


body.industrial-os-v16
.detail-trend-kpis {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:
        6px;
}


body.industrial-os-v16
.detail-trend-kpis > span {

    min-width:
        0;

    padding:
        7px 8px;

    

    

    

    font-family:
        var(--os-mono, ui-monospace, monospace);

    font-size:
        7px;

    font-weight:
        750;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}


body.industrial-os-v16
.detail-trend-kpis b {

    display:
        block;

    margin-top:
        4px;

    overflow:
        hidden;

    

    font-size:
        10px;

    font-weight:
        720;

    letter-spacing:
        0;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


body.industrial-os-v16
.detail-trend-empty {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    

    font-family:
        var(--os-mono, ui-monospace, monospace);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .08em;
}


html[data-theme="light"]
body.industrial-os-v16
.detail-trend-kpis > span {

    

    

    
}


html[data-theme="light"]
body.industrial-os-v16
.detail-trend-kpis b {

    
}


@media (max-width: 760px) {

    body.industrial-os-v16
    .detail-trend-kpis {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}



/* ==========================================================
   PLUMB_SCHEMATIC_DYNAMIC_AXIS_STYLE_V2
   ========================================================== */

body.industrial-os-v16
.detail-trend-kpis.is-three-phase {

    grid-template-columns:
        repeat(5, minmax(0,1fr));
}


body.industrial-os-v16
.detail-trend-unbalance b {

    
}


html[data-theme="light"]
body.industrial-os-v16
.detail-trend-unbalance b {

    
}


@media (max-width: 900px) {

    body.industrial-os-v16
    .detail-trend-kpis.is-three-phase {

        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }
}


@media (max-width: 600px) {

    body.industrial-os-v16
    .detail-trend-kpis.is-three-phase {

        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}

/* ==========================================================
   PLUMB · EXECUTIVE INDUSTRIAL · AUTHORITATIVE THEME V4
   Visual source of truth: Design Lab V6.
   This file is appended after a geometry-only scrub of the legacy CSS.
   ========================================================== */

:root,
html[data-theme="dark"]{
  color-scheme:dark;
  --ei-bg:#0d1113;
  --ei-bg-2:#111619;
  --ei-surface:#161c1f;
  --ei-surface-2:#1b2226;
  --ei-surface-3:#20282c;
  --ei-border:#2b353a;
  --ei-border-soft:#222c30;
  --ei-text:#eef2f1;
  --ei-text-2:#b8c1bf;
  --ei-text-3:#7e8b89;
  --ei-primary:#5c8d89;
  --ei-primary-strong:#75a7a2;
  --ei-secondary:#71818b;
  --ei-success:#6f9a80;
  --ei-warning:#b69b61;
  --ei-danger:#a96d6c;
  --ei-info:#66869a;
  --ei-shadow:0 16px 46px rgba(0,0,0,.24);
  --ei-overlay:rgba(4,7,9,.72);

  /* legacy aliases intentionally remapped to the approved system */
  --bg:var(--ei-bg); --bg-deep:var(--ei-bg-2);
  --panel:var(--ei-surface); --panel-strong:var(--ei-surface-2); --panel-opaque:var(--ei-surface);
  --line:var(--ei-border); --line-strong:var(--ei-border);
  --text:var(--ei-text); --muted:var(--ei-text-2); --muted-2:var(--ei-text-3);
  --gold:var(--ei-primary); --gold-light:var(--ei-primary-strong); --gold-soft:rgba(92,141,137,.10);
  --blue:var(--ei-secondary); --blue-soft:rgba(113,129,139,.10);
  --green:var(--ei-success); --green-soft:rgba(111,154,128,.10);
  --danger:var(--ei-danger); --danger-soft:rgba(169,109,108,.10);
  --plumb-lime:var(--ei-primary-strong); --os-lime:var(--ei-primary-strong);
  --os-bg:var(--ei-bg); --os-panel:var(--ei-surface); --os-panel-2:var(--ei-surface-2);
  --os-line:var(--ei-border); --os-text:var(--ei-text); --os-muted:var(--ei-text-3);
}

html[data-theme="light"]{
  color-scheme:light;
  --ei-bg:#d3d9d5;
  --ei-bg-2:#cbd3ce;
  --ei-surface:#e3e8e4;
  --ei-surface-2:#dbe2dd;
  --ei-surface-3:#d2dad5;
  --ei-border:#aebbb5;
  --ei-border-soft:#bec9c4;
  --ei-text:#182122;
  --ei-text-2:#3f4d4d;
  --ei-text-3:#5f6d6b;
  --ei-primary:#315f5b;
  --ei-primary-strong:#244f4b;
  --ei-secondary:#52656f;
  --ei-success:#426d53;
  --ei-warning:#7a632f;
  --ei-danger:#864947;
  --ei-info:#3f6375;
  --ei-shadow:0 10px 28px rgba(38,52,50,.06);
  --ei-overlay:rgba(34,45,43,.32);

  --bg:var(--ei-bg); --bg-deep:var(--ei-bg-2);
  --panel:var(--ei-surface); --panel-strong:var(--ei-surface-2); --panel-opaque:var(--ei-surface);
  --line:var(--ei-border); --line-strong:var(--ei-border);
  --text:var(--ei-text); --muted:var(--ei-text-2); --muted-2:var(--ei-text-3);
  --gold:var(--ei-primary); --gold-light:var(--ei-primary-strong); --gold-soft:rgba(49,95,91,.08);
  --blue:var(--ei-secondary); --blue-soft:rgba(82,101,111,.08);
  --green:var(--ei-success); --green-soft:rgba(66,109,83,.08);
  --danger:var(--ei-danger); --danger-soft:rgba(134,73,71,.08);
  --plumb-lime:var(--ei-primary-strong); --os-lime:var(--ei-primary-strong);
  --os-bg:var(--ei-bg); --os-panel:var(--ei-surface); --os-panel-2:var(--ei-surface-2);
  --os-line:var(--ei-border); --os-text:var(--ei-text); --os-muted:var(--ei-text-3);
}

html,body{background:var(--ei-bg)!important;color:var(--ei-text)!important}
body.plumb-executive-industrial{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;background:var(--ei-bg)!important;background-image:none!important;letter-spacing:.002em}
body.plumb-executive-industrial .bg-glow{display:none!important}
body.plumb-executive-industrial *{text-shadow:none!important}

/* ---------- foundational surfaces ---------- */
body.plumb-executive-industrial .glass,
body.plumb-executive-industrial .glass-soft,
body.plumb-executive-industrial .panel,
body.plumb-executive-industrial .summary-card,
body.plumb-executive-industrial .plant-context-card,
body.plumb-executive-industrial .settings-panel,
body.plumb-executive-industrial .plant-module-focus,
body.plumb-executive-industrial .plant-integrated-panel,
body.plumb-executive-industrial .electrical-workspace-shell,
body.plumb-executive-industrial .billing-estimate-card,
body.plumb-executive-industrial .billing-sustainability-card,
body.plumb-executive-industrial .plant-chart-card,
body.plumb-executive-industrial .plant-sensor-table-card,
body.plumb-executive-industrial .schematic-status-panel,
body.plumb-executive-industrial .modal-card{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border:1px solid var(--ei-border)!important;
  border-radius:4px!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial .panel-header,
body.plumb-executive-industrial .settings-panel-header,
body.plumb-executive-industrial .plant-power-pro-header,
body.plumb-executive-industrial .plant-sensor-table-card > header,
body.plumb-executive-industrial .billing-estimate-card > header,
body.plumb-executive-industrial .billing-sustainability-card > header{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
  box-shadow:none!important;
}

/* ---------- text hierarchy ---------- */
body.plumb-executive-industrial .eyebrow,
body.plumb-executive-industrial .module-path,
body.plumb-executive-industrial .sustainability-page-kicker{
  color:var(--ei-primary-strong)!important;
}
body.plumb-executive-industrial .page-heading h1{color:var(--ei-text)!important;font-weight:620!important}
body.plumb-executive-industrial .page-heading p{color:var(--ei-text-2)!important;font-size:14px!important;line-height:1.55!important}
body.plumb-executive-industrial .panel-header h2,
body.plumb-executive-industrial .settings-panel-header h2{color:var(--ei-text)!important;font-size:13.5px!important;font-weight:620!important}
body.plumb-executive-industrial .panel-header p,
body.plumb-executive-industrial .settings-panel-header p{color:var(--ei-text-2)!important;font-size:13px!important;line-height:1.55!important}
body.plumb-executive-industrial small,
body.plumb-executive-industrial .muted{color:var(--ei-text-3)}

/* ---------- shell ---------- */
body.plumb-executive-industrial .app-view{background:var(--ei-bg)!important}
body.plumb-executive-industrial .app-main,
body.plumb-executive-industrial .app-content,
body.plumb-executive-industrial .page-view,
body.plumb-executive-industrial .settings-workspace,
body.plumb-executive-industrial .electrical-workspace-view{background:transparent!important;color:var(--ei-text)!important}
body.plumb-executive-industrial .sidebar{
  background:var(--ei-bg-2)!important;
  border:0!important;
  border-right:1px solid var(--ei-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.plumb-executive-industrial .app-topbar{
  background:var(--ei-bg)!important;
  border:0!important;
  border-bottom:1px solid var(--ei-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.plumb-executive-industrial .sidebar-brand{border-bottom:1px solid var(--ei-border-soft)!important}
body.plumb-executive-industrial .sidebar-brand-copy strong{color:var(--ei-text)!important}
body.plumb-executive-industrial .sidebar-brand-copy span,
body.plumb-executive-industrial .sidebar-brand-copy small,
body.plumb-executive-industrial .nav-label{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .breadcrumb{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .breadcrumb strong,
body.plumb-executive-industrial .breadcrumb span{color:var(--ei-text-2)!important}
body.plumb-executive-industrial .breadcrumb i{color:var(--ei-border)!important}

/* ---------- logo ---------- */
body.plumb-executive-industrial .plumb-symbol{
  color:var(--ei-primary)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .plumb-logo-image{filter:none!important}

/* ---------- controls ---------- */
body.plumb-executive-industrial button,
body.plumb-executive-industrial input,
body.plumb-executive-industrial select,
body.plumb-executive-industrial textarea{
  box-shadow:none!important;
}
body.plumb-executive-industrial .button,
body.plumb-executive-industrial .icon-button,
body.plumb-executive-industrial .text-button,
body.plumb-executive-industrial .ui-selector,
body.plumb-executive-industrial input,
body.plumb-executive-industrial select,
body.plumb-executive-industrial textarea{
  color:var(--ei-text-2)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .button:hover,
body.plumb-executive-industrial .icon-button:hover,
body.plumb-executive-industrial .ui-selector:hover{color:var(--ei-text)!important;background:var(--ei-surface-2)!important;border-color:var(--ei-secondary)!important;transform:none!important}
body.plumb-executive-industrial .button-primary{color:#f4f7f5!important;background:var(--ei-primary)!important;border-color:var(--ei-primary)!important}
body.plumb-executive-industrial .button-secondary{color:var(--ei-text-2)!important;background:var(--ei-surface)!important}
body.plumb-executive-industrial .button-danger{color:var(--ei-danger)!important;background:var(--ei-surface)!important;border-color:color-mix(in srgb,var(--ei-danger) 45%,var(--ei-border))!important}
body.plumb-executive-industrial input:focus,
body.plumb-executive-industrial select:focus,
body.plumb-executive-industrial textarea:focus{outline:2px solid color-mix(in srgb,var(--ei-primary) 48%,transparent)!important;outline-offset:1px!important;border-color:var(--ei-primary)!important}

/* ---------- navigation: exact V6 logic ---------- */
body.plumb-executive-industrial .nav-item,
body.plumb-executive-industrial .plant-subitem,
body.plumb-executive-industrial .ai-skills-subitem,
body.plumb-executive-industrial .settings-subitem{
  color:var(--ei-text-2)!important;
  background:transparent!important;
  background-image:none!important;
  border:1px solid transparent!important;
  border-radius:3px!important;
  box-shadow:none!important;
  transform:none!important;
}
body.plumb-executive-industrial .nav-item:hover,
body.plumb-executive-industrial .plant-subitem:hover,
body.plumb-executive-industrial .ai-skills-subitem:hover,
body.plumb-executive-industrial .settings-subitem:hover{color:var(--ei-text)!important;background:var(--ei-surface)!important;border-color:var(--ei-border-soft)!important}
body.plumb-executive-industrial .nav-item.active,
body.plumb-executive-industrial .plant-nav-toggle[aria-expanded="true"],
body.plumb-executive-industrial .ai-skills-nav-toggle[aria-expanded="true"],
body.plumb-executive-industrial .settings-nav-toggle[aria-expanded="true"],
body.plumb-executive-industrial .plant-subitem.active,
body.plumb-executive-industrial .ai-skills-subitem.active,
body.plumb-executive-industrial .settings-subitem.active{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 2px 0 0 var(--ei-primary)!important;
}
body.plumb-executive-industrial .nav-item.active::before{display:none!important}
body.plumb-executive-industrial .nav-icon,
body.plumb-executive-industrial .plant-subicon,
body.plumb-executive-industrial .ai-skills-subicon,
body.plumb-executive-industrial .settings-subicon{
  color:var(--ei-secondary)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .nav-item.active .nav-icon,
body.plumb-executive-industrial .plant-subitem.active .plant-subicon,
body.plumb-executive-industrial .ai-skills-subitem.active .ai-skills-subicon,
body.plumb-executive-industrial .settings-subitem.active .settings-subicon{color:var(--ei-primary-strong)!important;border-color:var(--ei-border)!important}
body.plumb-executive-industrial .nav-icon svg,
body.plumb-executive-industrial .plant-subicon svg,
body.plumb-executive-industrial .ai-skills-subicon svg,
body.plumb-executive-industrial .settings-subicon svg{stroke:currentColor!important;fill:none!important}
body.plumb-executive-industrial .module-production-pills *{fill:currentColor!important;stroke:currentColor!important}
body.plumb-executive-industrial .plant-subcopy strong,
body.plumb-executive-industrial .ai-skills-subcopy strong{color:var(--ei-text)!important}
body.plumb-executive-industrial .plant-subcopy small,
body.plumb-executive-industrial .ai-skills-subcopy small{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .plant-substate,
body.plumb-executive-industrial .future-module-state,
body.plumb-executive-industrial .state-badge,
body.plumb-executive-industrial .tag-row span,
body.plumb-executive-industrial .dashboard-meta span,
body.plumb-executive-industrial .library-status{
  color:var(--ei-text-3)!important;
  background:transparent!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .plant-subitem.active .plant-substate{color:var(--ei-primary-strong)!important;border-color:var(--ei-border)!important;background:transparent!important}
body.plumb-executive-industrial .nav-lock,
body.plumb-executive-industrial .availability-lock{color:var(--ei-text-3)!important;background:transparent!important;border:0!important}

/* ---------- sidebar status ---------- */
body.plumb-executive-industrial .sidebar-status{color:var(--ei-text-2)!important;background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important}
body.plumb-executive-industrial .sidebar-status span{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .status-dot{background:var(--ei-success)!important;box-shadow:none!important}

/* ---------- summary / cards ---------- */
body.plumb-executive-industrial .summary-card span,
body.plumb-executive-industrial .summary-card small,
body.plumb-executive-industrial .plant-context-card span{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .summary-card strong,
body.plumb-executive-industrial .plant-context-card strong{color:var(--ei-text)!important}
body.plumb-executive-industrial .installed-module-card,
body.plumb-executive-industrial .library-card,
body.plumb-executive-industrial .dashboard-widget,
body.plumb-executive-industrial .workspace-ready,
body.plumb-executive-industrial .ai-context-list div,
body.plumb-executive-industrial .ai-summary-list div,
body.plumb-executive-industrial .action-card,
body.plumb-executive-industrial .variable-grid span,
body.plumb-executive-industrial .lab-variable,
body.plumb-executive-industrial .lab-source,
body.plumb-executive-industrial .dashboard-list-item{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .installed-module-card:hover,
body.plumb-executive-industrial .lab-source.active,
body.plumb-executive-industrial .lab-variable:has(input:checked),
body.plumb-executive-industrial .dashboard-list-item.active{background:var(--ei-surface-2)!important;border-color:var(--ei-primary)!important;transform:none!important;box-shadow:inset 2px 0 0 var(--ei-primary)!important}

/* ---------- HOME MAP: fully authoritative ---------- */
body.plumb-executive-industrial .home-plant-map-panel{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border:1px solid var(--ei-border)!important;
  border-radius:4px!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
body.plumb-executive-industrial .home-plant-map-panel::before,
body.plumb-executive-industrial .home-plant-map-panel::after{display:none!important;content:none!important;background:none!important}
body.plumb-executive-industrial .home-plant-map-panel .panel-header{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.plumb-executive-industrial .home-plant-map-panel .panel-header h2{color:var(--ei-text)!important}
body.plumb-executive-industrial .home-plant-map-panel .panel-header p{color:var(--ei-text-2)!important}
body.plumb-executive-industrial .home-plant-map-panel .plant-map-shell{
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.plumb-executive-industrial .plant-map-static-stage{background:var(--ei-surface-2)!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body.plumb-executive-industrial .plant-map-static-stage::after{display:none!important;content:none!important}
body.plumb-executive-industrial .plant-map-theme-shade{background:rgba(13,17,19,.10)!important}
html[data-theme="light"] body.plumb-executive-industrial .plant-map-theme-shade{background:rgba(223,228,225,.22)!important}
html[data-theme="dark"] body.plumb-executive-industrial .plant-map-image{filter:brightness(.58) saturate(.46) contrast(1.06)!important}
html[data-theme="light"] body.plumb-executive-industrial .plant-map-image{filter:grayscale(.10) brightness(.86) saturate(.58) contrast(.95)!important}
body.plumb-executive-industrial .plant-map-footer{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:0!important;
  border-top:1px solid var(--ei-border-soft)!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.plumb-executive-industrial .plant-map-footer span{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .plant-map-footer strong{color:var(--ei-text-2)!important}
body.plumb-executive-industrial .plant-map-hotspot{background:transparent!important;border:0!important;box-shadow:none!important}
body.plumb-executive-industrial .plant-hotspot-ring{
  border:1px solid color-mix(in srgb,var(--ei-primary) 52%,var(--ei-border))!important;
  background:color-mix(in srgb,var(--ei-primary) 10%,transparent)!important;
  box-shadow:none!important;
  animation:none!important;
}
body.plumb-executive-industrial .plant-hotspot-ring i{background:var(--ei-primary)!important;border:0!important;box-shadow:none!important;animation:none!important}
body.plumb-executive-industrial .plant-map-hotspot.active .plant-hotspot-ring{transform:scale(1.04)!important;border-color:var(--ei-primary)!important;background:color-mix(in srgb,var(--ei-primary) 14%,transparent)!important;box-shadow:none!important;animation:none!important}
body.plumb-executive-industrial .plant-hotspot-callout{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.plumb-executive-industrial .plant-map-hotspot.active .plant-hotspot-callout{border-color:var(--ei-primary)!important;box-shadow:inset 2px 0 0 var(--ei-primary)!important}
body.plumb-executive-industrial .plant-hotspot-callout::after{background:var(--ei-border)!important}
body.plumb-executive-industrial .plant-hotspot-icon{color:var(--ei-primary)!important;background:var(--ei-surface-2)!important;border:1px solid var(--ei-border)!important;box-shadow:none!important}
body.plumb-executive-industrial .plant-hotspot-copy strong{color:var(--ei-text)!important;text-shadow:none!important}
body.plumb-executive-industrial .plant-hotspot-copy small{color:var(--ei-text-2)!important}
body.plumb-executive-industrial .plant-hotspot-copy em{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .plant-map-source{display:none!important}

/* ---------- electrical module subnav ---------- */
body.plumb-executive-industrial .electrical-module-subnav{background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important;overflow:hidden!important}
body.plumb-executive-industrial .electrical-module-subnav-item{color:var(--ei-text-3)!important;background:transparent!important;border:0!important;border-right:1px solid var(--ei-border-soft)!important;border-radius:0!important;box-shadow:none!important}
body.plumb-executive-industrial .electrical-module-subnav-item:last-child{border-right:0!important}
body.plumb-executive-industrial .electrical-module-subnav-item:hover{color:var(--ei-text)!important;background:var(--ei-surface-2)!important}
body.plumb-executive-industrial .electrical-module-subnav-item.active{color:var(--ei-text)!important;background:var(--ei-surface-2)!important;box-shadow:inset 0 -2px 0 var(--ei-primary)!important}
body.plumb-executive-industrial .electrical-module-subnav-item span{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .electrical-module-subnav-item strong{color:inherit!important}
body.plumb-executive-industrial .quick-range,
body.plumb-executive-industrial .analysis-mode,
body.plumb-executive-industrial .electrical-tab,
body.plumb-executive-industrial .plant-power-range-selector button{color:var(--ei-text-3)!important;background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:2px!important;box-shadow:none!important}
body.plumb-executive-industrial .quick-range.active,
body.plumb-executive-industrial .analysis-mode.active,
body.plumb-executive-industrial .electrical-tab.active,
body.plumb-executive-industrial .plant-power-range-selector button.active{color:var(--ei-text)!important;background:var(--ei-surface-2)!important;box-shadow:inset 0 -2px 0 var(--ei-primary)!important}

/* ---------- indicators / billing / sustainability ---------- */
body.plumb-executive-industrial .plant-indicators-shell,
body.plumb-executive-industrial .plant-indicators-view,
body.plumb-executive-industrial .energy-management-view,
body.plumb-executive-industrial .energy-command-shell,
body.plumb-executive-industrial .sustainability-workspace-view{background:var(--ei-bg)!important;background-image:none!important;color:var(--ei-text)!important}
body.plumb-executive-industrial .plant-electrical-summary > article,
body.plumb-executive-industrial .billing-live-main,
body.plumb-executive-industrial .billing-live-stats > div,
body.plumb-executive-industrial .billing-demand-overview > article,
body.plumb-executive-industrial .billing-estimate-totals > div,
body.plumb-executive-industrial .billing-breakdown > div,
body.plumb-executive-industrial .sustainability-intro-grid > article,
body.plumb-executive-industrial .billing-sustainability-grid > article{
  color:var(--ei-text)!important;background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important
}
body.plumb-executive-industrial .plant-electrical-summary span,
body.plumb-executive-industrial .billing-live-main > span,
body.plumb-executive-industrial .billing-live-main small,
body.plumb-executive-industrial .billing-live-stats span,
body.plumb-executive-industrial .billing-demand-overview span,
body.plumb-executive-industrial .billing-demand-overview small,
body.plumb-executive-industrial .billing-estimate-card span,
body.plumb-executive-industrial .sustainability-intro-grid span,
body.plumb-executive-industrial .sustainability-intro-grid small{color:var(--ei-text-3)!important}
body.plumb-executive-industrial .plant-electrical-summary strong,
body.plumb-executive-industrial .billing-live-main strong,
body.plumb-executive-industrial .billing-live-stats strong,
body.plumb-executive-industrial .billing-demand-overview strong,
body.plumb-executive-industrial .billing-estimate-card strong,
body.plumb-executive-industrial .billing-sustainability-card strong{color:var(--ei-text)!important}
body.plumb-executive-industrial .metric-green strong{color:var(--ei-success)!important}
body.plumb-executive-industrial .metric-yellow strong{color:var(--ei-warning)!important}
body.plumb-executive-industrial .metric-blue strong{color:var(--ei-primary-strong)!important}
body.plumb-executive-industrial .plant-indicators-badge,
body.plumb-executive-industrial .energy-demo-badge,
body.plumb-executive-industrial .billing-live-badge,
body.plumb-executive-industrial .sustainability-method-badge{color:var(--ei-text-2)!important;background:var(--ei-surface-2)!important;border:1px solid var(--ei-border)!important;border-radius:2px!important;box-shadow:none!important}
body.plumb-executive-industrial .plant-indicators-badge i,
body.plumb-executive-industrial .energy-demo-badge i{background:var(--ei-success)!important;box-shadow:none!important}
body.plumb-executive-industrial .billing-demo-note,
body.plumb-executive-industrial .billing-carbon-source{color:var(--ei-text-2)!important;background:var(--ei-surface-2)!important;border:1px solid var(--ei-border-soft)!important;border-radius:3px!important;box-shadow:none!important}

/* ---------- charts / tables ---------- */
body.plumb-executive-industrial .plant-chart-card,
body.plumb-executive-industrial .plant-power-trend-card,
body.plumb-executive-industrial .plant-sensor-table-card{background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important}
body.plumb-executive-industrial .plant-chart-card header,
body.plumb-executive-industrial .plant-power-pro-header{background:var(--ei-surface)!important;border-bottom:1px solid var(--ei-border-soft)!important}
body.plumb-executive-industrial table{color:var(--ei-text-2)!important;background:transparent!important}
body.plumb-executive-industrial th{color:var(--ei-text-3)!important;background:transparent!important;border-bottom:1px solid var(--ei-border)!important}
body.plumb-executive-industrial td{color:var(--ei-text-2)!important;background:transparent!important;border-bottom:1px solid var(--ei-border-soft)!important}
body.plumb-executive-industrial td strong{color:var(--ei-text)!important}
body.plumb-executive-industrial tbody tr:hover td{background:var(--ei-surface-2)!important}

/* ---------- settings ---------- */
body.plumb-executive-industrial .settings-section,
body.plumb-executive-industrial .settings-workspace{background:transparent!important;color:var(--ei-text)!important}
body.plumb-executive-industrial .settings-row{
  color:var(--ei-text)!important;background:var(--ei-surface)!important;border:0!important;border-bottom:1px solid var(--ei-border-soft)!important;border-radius:0!important;box-shadow:none!important
}
body.plumb-executive-industrial .settings-row:last-child{border-bottom:0!important}
body.plumb-executive-industrial .settings-row span,
body.plumb-executive-industrial .settings-row p{color:var(--ei-text-2)!important}
body.plumb-executive-industrial .settings-value-chip{color:var(--ei-text-2)!important;background:var(--ei-surface-2)!important;border:1px solid var(--ei-border)!important;border-radius:2px!important}
body.plumb-executive-industrial .settings-info-note{color:var(--ei-text-2)!important;background:var(--ei-surface-2)!important;border:1px solid var(--ei-border-soft)!important;border-radius:3px!important}

/* ---------- schematic ---------- */
body.plumb-executive-industrial .diagram-shell{background:var(--ei-bg)!important;background-image:none!important;border:1px solid var(--ei-border)!important;border-radius:4px!important;box-shadow:none!important}
body.plumb-executive-industrial .canvas{background:var(--ei-bg)!important;background-image:none!important}
body.plumb-executive-industrial .wire{stroke:var(--ei-border)!important;filter:none!important}
body.plumb-executive-industrial .wire.live{stroke:var(--ei-primary)!important}.wire.blue{stroke:var(--ei-info)!important}.wire.green{stroke:var(--ei-success)!important}
body.plumb-executive-industrial .node,
body.plumb-executive-industrial .node-card,
body.plumb-executive-industrial .equip-card,
body.plumb-executive-industrial .load-card,
body.plumb-executive-industrial .switch-card,
body.plumb-executive-industrial .coupler-card,
body.plumb-executive-industrial .bar{color:var(--ei-text)!important;background:var(--ei-surface)!important;background-image:none!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important}
body.plumb-executive-industrial .node:hover,
body.plumb-executive-industrial .node-card:hover{transform:translateY(-1px)!important;border-color:var(--ei-primary)!important;box-shadow:none!important}
body.plumb-executive-industrial .node-tag-box,
body.plumb-executive-industrial .load-primary-tag,
body.plumb-executive-industrial .transformer-entry-tag,
body.plumb-executive-industrial .generator-primary-tag,
body.plumb-executive-industrial .integrated-switch,
body.plumb-executive-industrial .meter-badge{color:var(--ei-text)!important;background:transparent!important;border:1px solid var(--ei-border-soft)!important;border-radius:2px!important;box-shadow:none!important}
body.plumb-executive-industrial .node-metric,
body.plumb-executive-industrial .node-metrics{color:var(--ei-text)!important;background:var(--ei-surface-2)!important;border:1px solid var(--ei-border-soft)!important;border-radius:2px!important;box-shadow:none!important}
body.plumb-executive-industrial .node-metric span,
body.plumb-executive-industrial .schematic-card-name,
body.plumb-executive-industrial .load-card .name,
body.plumb-executive-industrial .load-card .spec,
body.plumb-executive-industrial .bar-copy p{color:var(--ei-text-2)!important}
body.plumb-executive-industrial .bar::before{background:none!important}.bar-main{border-color:var(--ei-info)!important}.bar-essential{border-color:var(--ei-success)!important}
body.plumb-executive-industrial .bar-main .bar-copy h2{color:var(--ei-info)!important}.bar-essential .bar-copy h2{color:var(--ei-success)!important}
body.plumb-executive-industrial .bolt{color:var(--ei-bg)!important;background:var(--ei-success)!important;box-shadow:none!important;border-radius:2px!important}
body.plumb-executive-industrial .schematic-status-panel{background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important}
body.plumb-executive-industrial .status-matrix-cell{color:var(--ei-text-2)!important;background:var(--ei-surface-2)!important;border:1px solid var(--ei-border-soft)!important;border-radius:2px!important;box-shadow:none!important}
body.plumb-executive-industrial .status-matrix-cell:hover,
body.plumb-executive-industrial .status-matrix-cell.active{color:var(--ei-text)!important;background:var(--ei-surface-3)!important;border-color:var(--ei-border)!important}

/* ---------- operational status colors ONLY ---------- */
body.plumb-executive-industrial .status-green,
body.plumb-executive-industrial .status-matrix-green .status-swatch{background:var(--ei-success)!important}
body.plumb-executive-industrial .status-yellow,
body.plumb-executive-industrial .status-orange,
body.plumb-executive-industrial .status-matrix-yellow .status-swatch,
body.plumb-executive-industrial .status-matrix-orange .status-swatch{background:var(--ei-warning)!important}
body.plumb-executive-industrial .status-red,
body.plumb-executive-industrial .status-matrix-red .status-swatch{background:var(--ei-danger)!important}
body.plumb-executive-industrial .state-live,
body.plumb-executive-industrial .text-success{color:var(--ei-success)!important}

/* ---------- AI / modals / tooltips ---------- */
body.plumb-executive-industrial .ai-dock,
body.plumb-executive-industrial .ai-window,
body.plumb-executive-industrial .ai-side-panel{color:var(--ei-text)!important;background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.plumb-executive-industrial .ai-window-header,
body.plumb-executive-industrial .ai-form{background:var(--ei-surface)!important;border-color:var(--ei-border-soft)!important}
body.plumb-executive-industrial .ai-messages{background:var(--ei-bg-2)!important}
body.plumb-executive-industrial .ai-message{color:var(--ei-text-2)!important;background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important}
body.plumb-executive-industrial .ai-message-user{background:var(--ei-surface-2)!important;border-color:var(--ei-primary)!important}
body.plumb-executive-industrial .modal-overlay{background:var(--ei-overlay)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.plumb-executive-industrial .smart-hover-tooltip,
body.plumb-executive-industrial .schematic-reason-tooltip,
body.plumb-executive-industrial .detail-variable-tooltip,
body.plumb-executive-industrial .trend-hover-tooltip{color:var(--ei-text)!important;background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.plumb-executive-industrial .toast{color:var(--ei-text-2)!important;background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:3px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- login ---------- */
body.plumb-executive-industrial .login-view{background:var(--ei-bg)!important;color:var(--ei-text)!important}
body.plumb-executive-industrial .login-layout{background:var(--ei-bg)!important}
body.plumb-executive-industrial .hero-panel{background:var(--ei-bg-2)!important;border:1px solid var(--ei-border)!important;border-radius:4px!important;box-shadow:none!important}
body.plumb-executive-industrial .hero-overlay{background:linear-gradient(90deg,rgba(13,17,19,.88),rgba(13,17,19,.42),rgba(13,17,19,.72))!important}
body.plumb-executive-industrial .hero-copy .eyebrow{color:var(--ei-primary-strong)!important}
body.plumb-executive-industrial .hero-copy h3{color:#eef2f1!important;text-shadow:none!important}
body.plumb-executive-industrial .login-panel{background:var(--ei-bg)!important}
body.plumb-executive-industrial .login-card{background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:4px!important;box-shadow:none!important}
body.plumb-executive-industrial .login-header p{color:var(--ei-text-2)!important;font-size:13px!important}
body.plumb-executive-industrial .login-footer{color:var(--ei-text-3)!important}

/* ---------- disabled ---------- */
body.plumb-executive-industrial .nav-item-disabled,
body.plumb-executive-industrial [disabled],
body.plumb-executive-industrial [aria-disabled="true"]{opacity:.48}

/* ---------- typography from approved V6 ---------- */
body.plumb-executive-industrial .nav-item{font-size:13px!important;min-height:43px!important}
body.plumb-executive-industrial .nav-label{font-size:10.5px!important}
body.plumb-executive-industrial .breadcrumb{font-size:11.5px!important}
body.plumb-executive-industrial .summary-card span{font-size:11px!important}
body.plumb-executive-industrial .summary-card small{font-size:11px!important;line-height:1.45!important}
body.plumb-executive-industrial .summary-card strong{font-size:22px!important}
body.plumb-executive-industrial .button{font-size:11.5px!important}
body.plumb-executive-industrial .panel-header > div > p{font-size:13px!important}
body.plumb-executive-industrial .smart-hover-tooltip,
body.plumb-executive-industrial .schematic-reason-tooltip span,
body.plumb-executive-industrial .detail-variable-tooltip span{font-size:13px!important;line-height:1.55!important}

/* ---------- no decorative glow / no futuristic animation ---------- */
body.plumb-executive-industrial .plant-hotspot-ring,
body.plumb-executive-industrial .plant-hotspot-ring i,
body.plumb-executive-industrial .bolt,
body.plumb-executive-industrial .status-dot,
body.plumb-executive-industrial [class*="pulse"],
body.plumb-executive-industrial [class*="glow"]{box-shadow:none!important;filter:none!important}


/* ==========================================================
   PLUMB · EXECUTIVE INDUSTRIAL V5
   Language lock + darker mineral light + minimal footer state
   ========================================================== */

/* Vista general: 3 KPIs after removing opportunities. */
body.plumb-executive-industrial #view-home > .summary-grid,
body.plumb-executive-industrial #view-home .summary-grid:first-of-type{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* Idioma: visible, legible and explicitly locked. */
body.plumb-executive-industrial .language-locked-control{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}
body.plumb-executive-industrial .language-selector:disabled{
  opacity:1!important;
  cursor:not-allowed!important;
  color:var(--ei-text-2)!important;
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border)!important;
  -webkit-text-fill-color:var(--ei-text-2)!important;
}
body.plumb-executive-industrial .language-lock{
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  display:grid!important;
  place-items:center!important;
  opacity:1!important;
  color:var(--ei-text-3)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
}
body.plumb-executive-industrial .language-lock svg{
  width:15px!important;
  height:15px!important;
  stroke:currentColor!important;
  stroke-width:1.6!important;
}

/* Sidebar footer: only platform state, always anchored at bottom. */
body.plumb-executive-industrial .sidebar{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
body.plumb-executive-industrial .sidebar-spacer{
  flex:1 1 auto!important;
  min-height:12px!important;
}
body.plumb-executive-industrial .sidebar-status-minimal{
  margin-top:auto!important;
  flex:0 0 auto!important;
  position:sticky!important;
  bottom:0!important;
  z-index:8!important;
  min-height:42px!important;
  padding:10px 11px!important;
  display:flex!important;
  align-items:center!important;
  background:var(--ei-bg-2)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
}
body.plumb-executive-industrial .sidebar-status-minimal .sidebar-platform-state{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
body.plumb-executive-industrial .sidebar-status-minimal strong{
  color:var(--ei-text-2)!important;
  font-size:10.5px!important;
  font-weight:750!important;
  letter-spacing:.015em!important;
}
body.plumb-executive-industrial .sidebar-status-minimal .status-dot{
  width:7px!important;
  height:7px!important;
  flex:0 0 7px!important;
  background:var(--ei-success)!important;
}

/* Light mode one step darker / lower luminance. */
html[data-theme="light"] body.plumb-executive-industrial{
  background:var(--ei-bg)!important;
}
html[data-theme="light"] body.plumb-executive-industrial .sidebar,
html[data-theme="light"] body.plumb-executive-industrial .app-topbar{
  background:var(--ei-bg-2)!important;
}
html[data-theme="light"] body.plumb-executive-industrial .plant-map-theme-shade{
  background:rgba(211,217,213,.30)!important;
}
html[data-theme="light"] body.plumb-executive-industrial .plant-map-image{
  filter:grayscale(.12) brightness(.78) saturate(.52) contrast(.96)!important;
}

@media(max-width:980px){
  body.plumb-executive-industrial #view-home > .summary-grid,
  body.plumb-executive-industrial #view-home .summary-grid:first-of-type{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:680px){
  body.plumb-executive-industrial #view-home > .summary-grid,
  body.plumb-executive-industrial #view-home .summary-grid:first-of-type{
    grid-template-columns:1fr!important;
  }
}


/* ==========================================================
   PLUMB · EXECUTIVE INDUSTRIAL V6 · REFINAMIENTOS UI
   1. puntos de plantas más oscuros
   2. resize estable de ECharts
   3. branding login consistente
   4. solapas sin salto en hover
   5. scroll vertical del menú
   6. jerarquía INSTANCIADO / NO INSTANCIADO
   ========================================================== */

/* 1) Marcadores del mapa: ligeramente más oscuros y sobrios. */
body.plumb-executive-industrial .plant-hotspot-ring i{
  background:#46716d!important;
}
body.plumb-executive-industrial .plant-map-hotspot.active .plant-hotspot-ring{
  border-color:#46716d!important;
  background:color-mix(in srgb,#46716d 12%,transparent)!important;
}
html[data-theme="light"] body.plumb-executive-industrial .plant-hotspot-ring i{
  background:#244f4b!important;
}
html[data-theme="light"] body.plumb-executive-industrial .plant-map-hotspot.active .plant-hotspot-ring{
  border-color:#244f4b!important;
  background:color-mix(in srgb,#244f4b 10%,transparent)!important;
}

/* 2) ECharts trifásicos siempre ocupan el ancho real disponible. */
body.plumb-executive-industrial .plant-phase-grid{
  width:100%!important;
  min-width:0!important;
}
body.plumb-executive-industrial .plant-phase-grid > .plant-chart-card{
  min-width:0!important;
  width:100%!important;
}
body.plumb-executive-industrial .plant-phase-echart,
body.plumb-executive-industrial #plantPhaseVoltageChart,
body.plumb-executive-industrial #plantLineVoltageChart,
body.plumb-executive-industrial #plantCurrentChart{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* 3) Branding del login: misma composición que la referencia PLUMB. */
body.plumb-executive-industrial .hero-brand{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
}
body.plumb-executive-industrial .hero-brand .plumb-symbol{
  width:76px!important;
  height:76px!important;
  flex:0 0 76px!important;
  border-radius:3px!important;
}
body.plumb-executive-industrial .hero-brand .plumb-logo-image{
  width:100%!important;
  height:100%!important;
  padding:7px!important;
  object-fit:contain!important;
}
body.plumb-executive-industrial .hero-brand-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:0!important;
  min-width:0!important;
}
body.plumb-executive-industrial .hero-brand-copy > strong{
  color:var(--ei-text)!important;
  font-size:17px!important;
  line-height:1.1!important;
  font-weight:850!important;
  letter-spacing:.20em!important;
}
body.plumb-executive-industrial .hero-brand-copy .brand-powered{
  display:block!important;
  margin-top:12px!important;
  color:var(--ei-text-3)!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:600!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
body.plumb-executive-industrial .hero-brand-copy .brand-powered em{
  color:var(--ei-text-2)!important;
  font-style:normal!important;
  font-weight:850!important;
}
body.plumb-executive-industrial .hero-brand-copy .brand-subline{
  display:block!important;
  margin-top:10px!important;
  color:var(--ei-text-3)!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:500!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}

/* 4) Las solapas conservan exactamente su transform también en hover/focus. */
@media (min-width:981px){
  body.plumb-executive-industrial .sidebar-collapse-toggle,
  body.plumb-executive-industrial .sidebar-collapse-toggle:hover,
  body.plumb-executive-industrial .sidebar-collapse-toggle:focus-visible,
  body.plumb-executive-industrial .app-view.ai-side-panel-open .ai-side-collapse-toggle,
  body.plumb-executive-industrial .app-view.ai-side-panel-open .ai-side-collapse-toggle:hover,
  body.plumb-executive-industrial .app-view.ai-side-panel-open .ai-side-collapse-toggle:focus-visible{
    transform:translateY(-50%)!important;
  }
}

/* 5) Vuelve el scroll cuando el contenido del sidebar excede la altura. */
body.plumb-executive-industrial .sidebar{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  scrollbar-color:var(--ei-border) transparent;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
body.plumb-executive-industrial .sidebar::-webkit-scrollbar{
  width:7px;
}
body.plumb-executive-industrial .sidebar::-webkit-scrollbar-track{
  background:transparent;
}
body.plumb-executive-industrial .sidebar::-webkit-scrollbar-thumb{
  background:var(--ei-border);
  border-radius:2px;
}
body.plumb-executive-industrial .sidebar-status-minimal{
  position:sticky!important;
  bottom:0!important;
  z-index:12!important;
  background:var(--ei-bg-2)!important;
}

/* 6) Estado de instanciación: texto limpio y jerarquía precisa. */
body.plumb-executive-industrial .plant-substate,
body.plumb-executive-industrial .future-module-state{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-weight:850!important;
  letter-spacing:.035em!important;
}
body.plumb-executive-industrial .plant-substate:not(.instantiated),
body.plumb-executive-industrial .future-module-state{
  color:var(--ei-text)!important;
}
body.plumb-executive-industrial .plant-substate.instantiated{
  color:var(--ei-success)!important;
}
body.plumb-executive-industrial .module-instantiated-state{
  color:var(--ei-success)!important;
  font-weight:850!important;
  background:transparent!important;
  border-color:transparent!important;
}

@media (max-width:680px){
  body.plumb-executive-industrial .hero-brand .plumb-symbol{
    width:62px!important;
    height:62px!important;
    flex-basis:62px!important;
  }
  body.plumb-executive-industrial .hero-brand-copy > strong{
    font-size:15px!important;
  }
  body.plumb-executive-industrial .hero-brand-copy .brand-powered,
  body.plumb-executive-industrial .hero-brand-copy .brand-subline{
    font-size:9px!important;
    letter-spacing:.13em!important;
  }
}


/* ==========================================================
   PLUMB · EXECUTIVE INDUSTRIAL V7
   ESQUEMÁTICO + DETALLE SUAVIZADOS
   ========================================================== */

/* Tipografía del esquemático: menos "terminal", más plataforma industrial. */
body.plumb-executive-industrial #nodesLayer,
body.plumb-executive-industrial .schematic-status-panel,
body.plumb-executive-industrial #detailModal{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

/* ----------------------------------------------------------
   ESQUEMÁTICO
   El estado ya no pinta toda la tarjeta.
   Se expresa con una tonalidad mínima + una línea lateral.
   ---------------------------------------------------------- */

body.plumb-executive-industrial #nodesLayer .node-card.status-green,
body.plumb-executive-industrial #nodesLayer .node-card.is-operational.status-green,
body.plumb-executive-industrial #nodesLayer .coupler-card.node-card.is-coupler-active{
  background:color-mix(in srgb,var(--ei-success) 6%,var(--ei-surface))!important;
  border-color:color-mix(in srgb,var(--ei-success) 26%,var(--ei-border))!important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--ei-success) 78%,transparent)!important;
}

body.plumb-executive-industrial #nodesLayer .node-card.status-yellow{
  background:color-mix(in srgb,var(--ei-warning) 6%,var(--ei-surface))!important;
  border-color:color-mix(in srgb,var(--ei-warning) 27%,var(--ei-border))!important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--ei-warning) 78%,transparent)!important;
}

body.plumb-executive-industrial #nodesLayer .node-card.status-orange{
  background:color-mix(in srgb,var(--ei-warning) 8%,var(--ei-surface))!important;
  border-color:color-mix(in srgb,var(--ei-warning) 34%,var(--ei-border))!important;
  box-shadow:inset 3px 0 0 var(--ei-warning)!important;
}

body.plumb-executive-industrial #nodesLayer .node-card.status-red{
  background:color-mix(in srgb,var(--ei-danger) 7%,var(--ei-surface))!important;
  border-color:color-mix(in srgb,var(--ei-danger) 30%,var(--ei-border))!important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--ei-danger) 82%,transparent)!important;
}

/* Las zonas internas permanecen neutras incluso si la tarjeta tiene estado. */
body.plumb-executive-industrial #nodesLayer .node-card.status-green .node-metric,
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow .node-metric,
body.plumb-executive-industrial #nodesLayer .node-card.status-orange .node-metric,
body.plumb-executive-industrial #nodesLayer .node-card.status-red .node-metric,
body.plumb-executive-industrial #nodesLayer .node-card.status-green .node-metrics,
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow .node-metrics,
body.plumb-executive-industrial #nodesLayer .node-card.status-orange .node-metrics,
body.plumb-executive-industrial #nodesLayer .node-card.status-red .node-metrics{
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border-soft)!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #nodesLayer .node-card .load-primary-tag,
body.plumb-executive-industrial #nodesLayer .node-card .transformer-entry-tag,
body.plumb-executive-industrial #nodesLayer .node-card .generator-primary-tag,
body.plumb-executive-industrial #nodesLayer .node-card .node-tag-box{
  background:transparent!important;
  border-color:var(--ei-border)!important;
  color:var(--ei-text)!important;
}

/* El pequeño indicador hereda el estado sin convertirse en un bloque brillante. */
body.plumb-executive-industrial #nodesLayer .node-card .bolt{
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  color:var(--ei-success)!important;
}
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow .bolt,
body.plumb-executive-industrial #nodesLayer .node-card.status-orange .bolt{
  color:var(--ei-warning)!important;
}
body.plumb-executive-industrial #nodesLayer .node-card.status-red .bolt{
  color:var(--ei-danger)!important;
}

/* Barras: misma familia visual que el resto de PLUMB. */
body.plumb-executive-industrial .bar-main,
body.plumb-executive-industrial .bar-essential{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .bar-main .bar-copy h2{
  color:var(--ei-secondary)!important;
}
body.plumb-executive-industrial .bar-essential .bar-copy h2{
  color:color-mix(in srgb,var(--ei-success) 72%,var(--ei-text-2))!important;
}

/* Matriz de estado: color solo en el punto, no en la celda. */
body.plumb-executive-industrial .schematic-status-panel{
  background:var(--ei-surface)!important;
}
body.plumb-executive-industrial .status-matrix-cell,
body.plumb-executive-industrial .status-matrix-cell:hover,
body.plumb-executive-industrial .status-matrix-cell[aria-pressed="true"],
body.plumb-executive-industrial .status-matrix-cell.active{
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border-soft)!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .status-matrix-cell[aria-pressed="true"],
body.plumb-executive-industrial .status-matrix-cell.active{
  border-color:var(--ei-border)!important;
  box-shadow:inset 2px 0 0 var(--ei-primary)!important;
}

/* ----------------------------------------------------------
   MODAL DETALLE
   Misma paleta, menos contraste duro.
   ---------------------------------------------------------- */

body.plumb-executive-industrial #detailModal .schematic-detail-modal{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #detailModal .detail-main-stack,
body.plumb-executive-industrial #detailModal .detail-side-trend,
body.plumb-executive-industrial #detailModal .detail-ai-panel{
  background:var(--ei-surface)!important;
}

body.plumb-executive-industrial #detailModal .detail-section{
  background:transparent!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:3px!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #detailModal .detail-alarm-row{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #detailModal .detail-alarm-row:last-child{
  border-bottom:0!important;
}

/* Filtros de alarma: controles tranquilos, sin pastillas blancas. */
body.plumb-executive-industrial #detailModal .detail-alarm-filter,
body.plumb-executive-industrial #detailModal .detail-alarm-nav{
  color:var(--ei-text-2)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #detailModal .detail-alarm-filter:hover,
body.plumb-executive-industrial #detailModal .detail-alarm-nav:hover{
  color:var(--ei-text)!important;
  background:var(--ei-surface-3)!important;
}
body.plumb-executive-industrial #detailModal .detail-alarm-filter.active{
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 0 -2px 0 var(--ei-primary)!important;
}

/* Badge de estado: tono semántico mínimo. */
body.plumb-executive-industrial #detailStatusBadge{
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #detailStatusBadge.status-green{
  color:var(--ei-success)!important;
  border-color:color-mix(in srgb,var(--ei-success) 36%,var(--ei-border))!important;
}
body.plumb-executive-industrial #detailStatusBadge.status-yellow,
body.plumb-executive-industrial #detailStatusBadge.status-orange{
  color:var(--ei-warning)!important;
  border-color:color-mix(in srgb,var(--ei-warning) 36%,var(--ei-border))!important;
}
body.plumb-executive-industrial #detailStatusBadge.status-red{
  color:var(--ei-danger)!important;
  border-color:color-mix(in srgb,var(--ei-danger) 36%,var(--ei-border))!important;
}

/* Métricas: adiós al gris sólido. */
body.plumb-executive-industrial #detailModal .detail-metric-card{
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #detailModal .detail-metric-card:hover{
  background:var(--ei-surface-3)!important;
  border-color:var(--ei-border)!important;
  transform:none!important;
}
body.plumb-executive-industrial #detailModal .detail-metric-card.active{
  background:color-mix(in srgb,var(--ei-primary) 7%,var(--ei-surface-2))!important;
  border-color:color-mix(in srgb,var(--ei-primary) 40%,var(--ei-border))!important;
  box-shadow:inset 2px 0 0 var(--ei-primary)!important;
}
body.plumb-executive-industrial #detailModal .detail-metric-card > span{
  color:var(--ei-text-2)!important;
}
body.plumb-executive-industrial #detailModal .detail-metric-card > strong,
body.plumb-executive-industrial #detailModal .detail-metric-card > strong em,
body.plumb-executive-industrial #detailModal .detail-metric-card small{
  color:var(--ei-text)!important;
}

/* Tensiones/corrientes: una sola superficie con filas separadas. */
body.plumb-executive-industrial #detailModal .detail-phase-card{
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #detailModal .detail-phase-group-selector{
  color:var(--ei-text)!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #detailModal .detail-phase-group-selector:hover{
  background:var(--ei-surface-3)!important;
}
body.plumb-executive-industrial #detailModal .detail-phase-group-selector.active{
  background:color-mix(in srgb,var(--ei-primary) 7%,var(--ei-surface-2))!important;
  box-shadow:inset 2px 0 0 var(--ei-primary)!important;
}
body.plumb-executive-industrial #detailModal .detail-phase-row{
  color:var(--ei-text)!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #detailModal .detail-phase-row:last-child{
  border-bottom:0!important;
}
body.plumb-executive-industrial #detailModal .detail-phase-row:hover{
  background:var(--ei-surface-3)!important;
}
body.plumb-executive-industrial #detailModal .detail-phase-row.active{
  background:color-mix(in srgb,var(--ei-primary) 7%,var(--ei-surface-2))!important;
  box-shadow:inset 2px 0 0 var(--ei-primary)!important;
}

/* ----------------------------------------------------------
   TREND DEL DETALLE
   Usa TODO el ancho de la columna disponible.
   ---------------------------------------------------------- */
body.plumb-executive-industrial #detailModal .schematic-detail-modal.trend-open{
  width:calc(100vw - 16px)!important;
  max-width:none!important;
  grid-template-columns:minmax(430px,.72fr) minmax(0,1.28fr)!important;
  gap:10px!important;
}

body.plumb-executive-industrial #detailModal .schematic-detail-modal.ai-open.trend-open{
  width:calc(100vw - 12px)!important;
  max-width:none!important;
  grid-template-columns:330px minmax(390px,.62fr) minmax(0,1.38fr)!important;
  gap:10px!important;
}

body.plumb-executive-industrial #detailModal .detail-side-trend{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  padding:12px!important;
  overflow:hidden!important;
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
}

body.plumb-executive-industrial #detailTrendChart{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:min(68vh,680px)!important;
  min-height:500px!important;
  padding:0!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:2px!important;
  overflow:hidden!important;
}

/* Canvas/SVG interno de ECharts nunca conserva un ancho viejo. */
body.plumb-executive-industrial #detailTrendChart > div,
body.plumb-executive-industrial #detailTrendChart canvas,
body.plumb-executive-industrial #detailTrendChart svg{
  max-width:none!important;
}

/* Menos ruido visual en la cabecera del trend. */
body.plumb-executive-industrial #detailModal .detail-trend-header{
  background:var(--ei-surface)!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
}
body.plumb-executive-industrial #detailModal .detail-trend-kpis > span{
  background:transparent!important;
  border:0!important;
  border-right:1px solid var(--ei-border-soft)!important;
  border-radius:0!important;
}
body.plumb-executive-industrial #detailModal .detail-trend-kpis > span:last-child{
  border-right:0!important;
}

/* En pantallas medianas el trend usa toda la fila. */
@media(max-width:1180px){
  body.plumb-executive-industrial #detailModal .schematic-detail-modal.trend-open,
  body.plumb-executive-industrial #detailModal .schematic-detail-modal.ai-open.trend-open{
    width:calc(100vw - 12px)!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.plumb-executive-industrial #detailTrendChart{
    height:min(62vh,620px)!important;
    min-height:460px!important;
  }
}

/* Light conserva exactamente la misma lógica, con tinte todavía más leve. */
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .node-card.status-green,
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .node-card.is-operational.status-green,
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .coupler-card.node-card.is-coupler-active{
  background:color-mix(in srgb,var(--ei-success) 4%,var(--ei-surface))!important;
}
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .node-card.status-yellow{
  background:color-mix(in srgb,var(--ei-warning) 4%,var(--ei-surface))!important;
}
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .node-card.status-orange{
  background:color-mix(in srgb,var(--ei-warning) 5%,var(--ei-surface))!important;
}
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .node-card.status-red{
  background:color-mix(in srgb,var(--ei-danger) 4%,var(--ei-surface))!important;
}


/* ==========================================================
   PLUMB · V8 · SCHEMATIC THEME LOCK
   OBJETIVO:
   - LIGHT = misma estética que INDICADORES light
   - DARK  = misma estética que INDICADORES dark
   - Sin tarjetas verdes/amarillas completas
   - Sin estética SCADA vieja
   - Color semántico solo como acento de estado
   ========================================================== */

/* ---------- SHELL / CANVAS ---------- */
body.plumb-executive-industrial .diagram-shell{
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  background:var(--ei-bg)!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .canvas-viewport,
body.plumb-executive-industrial #diagramCanvas{
  background:var(--ei-bg)!important;
}

body.plumb-executive-industrial .diagram-head{
  background:var(--ei-bg)!important;
  border:0!important;
  box-shadow:none!important;
}

/* ---------- CABLEADO ---------- */
body.plumb-executive-industrial .wire{
  stroke:color-mix(in srgb,var(--ei-text-3) 58%,transparent)!important;
  filter:none!important;
  stroke-width:2.2!important;
}
body.plumb-executive-industrial .wire.live{
  stroke:var(--ei-primary)!important;
}
body.plumb-executive-industrial .wire.blue{
  stroke:var(--ei-secondary)!important;
}
body.plumb-executive-industrial .wire.green{
  stroke:color-mix(in srgb,var(--ei-success) 72%,var(--ei-text-3))!important;
}

/* ---------- TODAS LAS TARJETAS ---------- */
body.plumb-executive-industrial #nodesLayer .node-card,
body.plumb-executive-industrial #nodesLayer .equip-card,
body.plumb-executive-industrial #nodesLayer .load-card,
body.plumb-executive-industrial #nodesLayer .switch-card,
body.plumb-executive-industrial #nodesLayer .coupler-card{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Hover igual que el resto de la plataforma: mínimo */
body.plumb-executive-industrial #nodesLayer .node-card:hover,
body.plumb-executive-industrial #nodesLayer .equip-card:hover,
body.plumb-executive-industrial #nodesLayer .load-card:hover,
body.plumb-executive-industrial #nodesLayer .switch-card:hover,
body.plumb-executive-industrial #nodesLayer .coupler-card:hover{
  transform:none!important;
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 2px 0 0 var(--ei-primary)!important;
}

/* ---------- ESTADOS: SOLO ACENTO ---------- */
body.plumb-executive-industrial #nodesLayer .node-card.status-green,
body.plumb-executive-industrial #nodesLayer .node-card.is-operational.status-green,
body.plumb-executive-industrial #nodesLayer .coupler-card.node-card.is-coupler-active{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 2px 0 0 var(--ei-success)!important;
}
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 2px 0 0 var(--ei-warning)!important;
}
body.plumb-executive-industrial #nodesLayer .node-card.status-orange{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 2px 0 0 var(--ei-warning)!important;
}
body.plumb-executive-industrial #nodesLayer .node-card.status-red{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 2px 0 0 var(--ei-danger)!important;
}

/* ---------- TAG / NOMBRE ---------- */
body.plumb-executive-industrial #nodesLayer .q-badge,
body.plumb-executive-industrial #nodesLayer .load-primary-tag,
body.plumb-executive-industrial #nodesLayer .transformer-entry-tag,
body.plumb-executive-industrial #nodesLayer .generator-primary-tag,
body.plumb-executive-industrial #nodesLayer .node-tag-box,
body.plumb-executive-industrial #nodesLayer .integrated-switch{
  color:var(--ei-text)!important;
  background:transparent!important;
  border:1px solid var(--ei-border)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #nodesLayer .node-card h3,
body.plumb-executive-industrial #nodesLayer .node-card h4,
body.plumb-executive-industrial #nodesLayer .node-card .name,
body.plumb-executive-industrial #nodesLayer .node-card strong{
  color:var(--ei-text)!important;
}

body.plumb-executive-industrial #nodesLayer .node-card p,
body.plumb-executive-industrial #nodesLayer .node-card .spec,
body.plumb-executive-industrial #nodesLayer .node-card small{
  color:var(--ei-text-3)!important;
}

/* ---------- MÉTRICAS ---------- */
body.plumb-executive-industrial #nodesLayer .node-metrics{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #nodesLayer .node-metric{
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial #nodesLayer .node-metric span,
body.plumb-executive-industrial #nodesLayer .node-metric small{
  color:var(--ei-text-3)!important;
}
body.plumb-executive-industrial #nodesLayer .node-metric strong,
body.plumb-executive-industrial #nodesLayer .node-metric b,
body.plumb-executive-industrial #nodesLayer .node-metric em{
  color:var(--ei-text)!important;
}

/* ---------- ICONOS ---------- */
body.plumb-executive-industrial #nodesLayer .card-icon{
  color:var(--ei-text-3)!important;
}
body.plumb-executive-industrial #nodesLayer .card-icon svg *{
  stroke:currentColor!important;
}
body.plumb-executive-industrial #nodesLayer .card-icon svg text{
  fill:currentColor!important;
}
body.plumb-executive-industrial #nodesLayer .bolt{
  color:var(--ei-primary)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}

/* ---------- BARRAS MM1/MM2 ---------- */
body.plumb-executive-industrial .bar,
body.plumb-executive-industrial .bar-main,
body.plumb-executive-industrial .bar-essential{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .bar::before{
  display:none!important;
}
body.plumb-executive-industrial .bar-copy h2,
body.plumb-executive-industrial .bar-main .bar-copy h2,
body.plumb-executive-industrial .bar-essential .bar-copy h2{
  color:var(--ei-secondary)!important;
}
body.plumb-executive-industrial .bar-copy p{
  color:var(--ei-text-3)!important;
}
body.plumb-executive-industrial .meter-badge{
  color:var(--ei-text-2)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:2px!important;
}

/* ---------- MATRIZ DE ESTADOS ---------- */
body.plumb-executive-industrial .schematic-status-panel{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .schematic-status-panel-head{
  border-bottom:1px solid var(--ei-border-soft)!important;
}
body.plumb-executive-industrial .schematic-status-panel-head strong{
  color:var(--ei-text)!important;
}
body.plumb-executive-industrial .schematic-status-panel-head span,
body.plumb-executive-industrial .schematic-status-panel-foot{
  color:var(--ei-text-3)!important;
}
body.plumb-executive-industrial .schematic-status-panel-head em{
  color:var(--ei-text-2)!important;
  background:transparent!important;
  border:0!important;
}

body.plumb-executive-industrial .status-matrix-cell{
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body.plumb-executive-industrial .status-matrix-cell:hover{
  color:var(--ei-text)!important;
  background:var(--ei-surface-3)!important;
  border-color:var(--ei-border)!important;
}
body.plumb-executive-industrial .status-matrix-cell.active,
body.plumb-executive-industrial .status-matrix-cell[aria-pressed="true"]{
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 2px 0 0 var(--ei-primary)!important;
}
body.plumb-executive-industrial .status-matrix-cell strong{
  color:var(--ei-text)!important;
}
body.plumb-executive-industrial .status-matrix-cell span,
body.plumb-executive-industrial .status-matrix-cell small{
  color:var(--ei-text-3)!important;
}

/* ---------- LIGHT: MISMA LÓGICA DE INDICADORES ---------- */
html[data-theme="light"] body.plumb-executive-industrial .diagram-shell,
html[data-theme="light"] body.plumb-executive-industrial .canvas-viewport,
html[data-theme="light"] body.plumb-executive-industrial #diagramCanvas{
  background:var(--ei-bg)!important;
}

html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .node-card,
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .equip-card,
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .load-card,
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .switch-card,
html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .coupler-card,
html[data-theme="light"] body.plumb-executive-industrial .bar,
html[data-theme="light"] body.plumb-executive-industrial .schematic-status-panel{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  color:var(--ei-text)!important;
}

html[data-theme="light"] body.plumb-executive-industrial #nodesLayer .node-metric,
html[data-theme="light"] body.plumb-executive-industrial .status-matrix-cell,
html[data-theme="light"] body.plumb-executive-industrial .meter-badge{
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border-soft)!important;
}

/* ---------- DARK: MISMA LÓGICA DE INDICADORES ---------- */
html[data-theme="dark"] body.plumb-executive-industrial .diagram-shell,
html[data-theme="dark"] body.plumb-executive-industrial .canvas-viewport,
html[data-theme="dark"] body.plumb-executive-industrial #diagramCanvas{
  background:var(--ei-bg)!important;
}

html[data-theme="dark"] body.plumb-executive-industrial #nodesLayer .node-card,
html[data-theme="dark"] body.plumb-executive-industrial #nodesLayer .equip-card,
html[data-theme="dark"] body.plumb-executive-industrial #nodesLayer .load-card,
html[data-theme="dark"] body.plumb-executive-industrial #nodesLayer .switch-card,
html[data-theme="dark"] body.plumb-executive-industrial #nodesLayer .coupler-card,
html[data-theme="dark"] body.plumb-executive-industrial .bar,
html[data-theme="dark"] body.plumb-executive-industrial .schematic-status-panel{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  color:var(--ei-text)!important;
}

html[data-theme="dark"] body.plumb-executive-industrial #nodesLayer .node-metric,
html[data-theme="dark"] body.plumb-executive-industrial .status-matrix-cell,
html[data-theme="dark"] body.plumb-executive-industrial .meter-badge{
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border-soft)!important;
}

/* ==========================================================
   PLUMB · CORPORATE INDUSTRIAL INTELLIGENCE · V10
   Direction: Siemens iX structure + IBM Carbon data restraint.
   Neutral surfaces, one brand accent, semantic status only.
   ========================================================== */

:root,
html[data-theme="dark"]{
  color-scheme:dark;
  --ei-bg:#0d1216;
  --ei-bg-2:#11181d;
  --ei-surface:#161e23;
  --ei-surface-2:#1b252b;
  --ei-surface-3:#222d33;
  --ei-border:#2b373d;
  --ei-border-soft:#222d32;
  --ei-text:#eef2f3;
  --ei-text-2:#b7c1c5;
  --ei-text-3:#7f8d92;
  --ei-primary:#629996;
  --ei-primary-strong:#78aaa7;
  --ei-secondary:#718087;
  --ei-success:#6e9478;
  --ei-warning:#b49a60;
  --ei-danger:#a86664;
  --ei-info:#668493;
  --ei-shadow:0 12px 30px rgba(0,0,0,.18);
  --ei-overlay:rgba(5,9,12,.72);
  --corp-radius:8px;
  --corp-radius-sm:5px;

  --bg:var(--ei-bg);--bg-deep:var(--ei-bg-2);
  --panel:var(--ei-surface);--panel-strong:var(--ei-surface-2);--panel-opaque:var(--ei-surface);
  --line:var(--ei-border);--line-strong:var(--ei-border);
  --text:var(--ei-text);--muted:var(--ei-text-2);--muted-2:var(--ei-text-3);
  --gold:var(--ei-primary);--gold-light:var(--ei-primary-strong);--gold-soft:rgba(98,153,150,.1);
  --blue:var(--ei-secondary);--blue-soft:rgba(113,128,135,.1);
  --green:var(--ei-success);--green-soft:rgba(110,148,120,.1);
  --danger:var(--ei-danger);--danger-soft:rgba(168,102,100,.1);
  --plumb-lime:var(--ei-primary-strong);--os-lime:var(--ei-primary-strong);
  --os-bg:var(--ei-bg);--os-panel:var(--ei-surface);--os-panel-2:var(--ei-surface-2);
  --os-line:var(--ei-border);--os-text:var(--ei-text);--os-muted:var(--ei-text-3);
}

html[data-theme="light"]{
  color-scheme:light;
  --ei-bg:#edf1f2;
  --ei-bg-2:#e5eaec;
  --ei-surface:#f8fafb;
  --ei-surface-2:#f1f4f5;
  --ei-surface-3:#e8edef;
  --ei-border:#cbd4d7;
  --ei-border-soft:#dce3e5;
  --ei-text:#172126;
  --ei-text-2:#46565d;
  --ei-text-3:#75848a;
  --ei-primary:#2f6f6b;
  --ei-primary-strong:#245653;
  --ei-secondary:#60717a;
  --ei-success:#3f7654;
  --ei-warning:#806733;
  --ei-danger:#934a48;
  --ei-info:#466b7b;
  --ei-shadow:0 8px 24px rgba(29,45,52,.07);
  --ei-overlay:rgba(26,37,42,.38);

  --bg:var(--ei-bg);--bg-deep:var(--ei-bg-2);
  --panel:var(--ei-surface);--panel-strong:var(--ei-surface-2);--panel-opaque:var(--ei-surface);
  --line:var(--ei-border);--line-strong:var(--ei-border);
  --text:var(--ei-text);--muted:var(--ei-text-2);--muted-2:var(--ei-text-3);
  --gold:var(--ei-primary);--gold-light:var(--ei-primary-strong);--gold-soft:rgba(47,111,107,.08);
  --blue:var(--ei-secondary);--blue-soft:rgba(96,113,122,.08);
  --green:var(--ei-success);--green-soft:rgba(63,118,84,.08);
  --danger:var(--ei-danger);--danger-soft:rgba(147,74,72,.08);
  --plumb-lime:var(--ei-primary-strong);--os-lime:var(--ei-primary-strong);
  --os-bg:var(--ei-bg);--os-panel:var(--ei-surface);--os-panel-2:var(--ei-surface-2);
  --os-line:var(--ei-border);--os-text:var(--ei-text);--os-muted:var(--ei-text-3);
}

html,
body{
  color:var(--ei-text)!important;
  background:var(--ei-bg)!important;
}

body.plumb-executive-industrial{
  color:var(--ei-text)!important;
  background:var(--ei-bg)!important;
  background-image:none!important;
  font-family:Inter,"IBM Plex Sans","Segoe UI",Arial,sans-serif!important;
  font-feature-settings:"tnum" 1,"zero" 1;
  letter-spacing:0!important;
}

body.plumb-executive-industrial .bg-glow{
  display:none!important;
}

body.plumb-executive-industrial *{
  text-shadow:none!important;
}

body.plumb-executive-industrial ::selection{
  color:#fff;
  background:var(--ei-primary);
}

body.plumb-executive-industrial :focus-visible{
  outline:2px solid var(--ei-primary)!important;
  outline-offset:2px!important;
}

/* One surface language across the product. */
body.plumb-executive-industrial .glass,
body.plumb-executive-industrial .glass-soft,
body.plumb-executive-industrial .panel,
body.plumb-executive-industrial .summary-card,
body.plumb-executive-industrial .plant-context-card,
body.plumb-executive-industrial .settings-panel,
body.plumb-executive-industrial .plant-module-focus,
body.plumb-executive-industrial .plant-integrated-panel,
body.plumb-executive-industrial .electrical-workspace-shell,
body.plumb-executive-industrial .billing-estimate-card,
body.plumb-executive-industrial .billing-sustainability-card,
body.plumb-executive-industrial .plant-chart-card,
body.plumb-executive-industrial .plant-power-trend-card,
body.plumb-executive-industrial .plant-sensor-table-card,
body.plumb-executive-industrial .schematic-status-panel,
body.plumb-executive-industrial .modal-card{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border:1px solid var(--ei-border)!important;
  border-radius:var(--corp-radius)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Shell: stable, dense and operational. */
body.plumb-executive-industrial .app-view,
body.plumb-executive-industrial .app-main,
body.plumb-executive-industrial .app-content,
body.plumb-executive-industrial .page-view{
  color:var(--ei-text)!important;
  background:transparent!important;
}

body.plumb-executive-industrial .sidebar{
  margin:0!important;
  height:100vh!important;
  color:var(--ei-text)!important;
  background:var(--ei-bg-2)!important;
  border:0!important;
  border-right:1px solid var(--ei-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial .app-topbar{
  margin:0!important;
  min-height:72px!important;
  color:var(--ei-text)!important;
  background:var(--ei-bg)!important;
  border:0!important;
  border-bottom:1px solid var(--ei-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial .app-content{
  padding:20px 22px 42px!important;
}

body.plumb-executive-industrial .sidebar-brand{
  min-height:78px!important;
  padding:15px 16px!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
}

body.plumb-executive-industrial .plumb-symbol{
  color:var(--ei-primary)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:6px!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .sidebar-brand-copy strong{
  color:var(--ei-text)!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.1em!important;
}

body.plumb-executive-industrial .sidebar-brand-copy span,
body.plumb-executive-industrial .sidebar-brand-copy small,
body.plumb-executive-industrial .nav-label{
  color:var(--ei-text-3)!important;
}

body.plumb-executive-industrial .sidebar-brand-copy .brand-sync{
  color:var(--ei-primary-strong)!important;
}

body.plumb-executive-industrial .nav-label{
  padding-inline:15px!important;
  font-size:9.5px!important;
  font-weight:650!important;
  letter-spacing:.12em!important;
}

body.plumb-executive-industrial .sidebar-nav{
  padding-inline:7px!important;
  gap:2px!important;
}

body.plumb-executive-industrial .nav-item,
body.plumb-executive-industrial .plant-subitem,
body.plumb-executive-industrial .ai-skills-subitem,
body.plumb-executive-industrial .settings-subitem{
  min-height:42px!important;
  padding:7px 10px!important;
  color:var(--ei-text-2)!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:5px!important;
  box-shadow:none!important;
  font-size:12.5px!important;
  font-weight:500!important;
  transform:none!important;
}

body.plumb-executive-industrial .nav-item:hover,
body.plumb-executive-industrial .plant-subitem:hover,
body.plumb-executive-industrial .ai-skills-subitem:hover,
body.plumb-executive-industrial .settings-subitem:hover{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border-color:var(--ei-border-soft)!important;
  transform:none!important;
}

body.plumb-executive-industrial .nav-item.active,
body.plumb-executive-industrial .plant-nav-toggle[aria-expanded="true"],
body.plumb-executive-industrial .ai-skills-nav-toggle[aria-expanded="true"],
body.plumb-executive-industrial .settings-nav-toggle[aria-expanded="true"],
body.plumb-executive-industrial .plant-subitem.active,
body.plumb-executive-industrial .ai-skills-subitem.active,
body.plumb-executive-industrial .settings-subitem.active{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border-color:var(--ei-border)!important;
  box-shadow:inset 3px 0 0 var(--ei-primary)!important;
}

body.plumb-executive-industrial .nav-icon,
body.plumb-executive-industrial .plant-subicon,
body.plumb-executive-industrial .ai-skills-subicon,
body.plumb-executive-industrial .settings-subicon{
  color:var(--ei-secondary)!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .nav-item.active .nav-icon,
body.plumb-executive-industrial .plant-subitem.active .plant-subicon,
body.plumb-executive-industrial .ai-skills-subitem.active .ai-skills-subicon,
body.plumb-executive-industrial .settings-subitem.active .settings-subicon{
  color:var(--ei-primary-strong)!important;
}

body.plumb-executive-industrial .sidebar-status{
  margin:8px!important;
  padding:10px 11px!important;
  color:var(--ei-text-2)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:5px!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .status-dot{
  background:var(--ei-success)!important;
  box-shadow:none!important;
}

/* Restrained typography. */
body.plumb-executive-industrial .eyebrow,
body.plumb-executive-industrial .module-path,
body.plumb-executive-industrial .sustainability-page-kicker{
  color:var(--ei-primary-strong)!important;
  font-size:9.5px!important;
  font-weight:650!important;
  letter-spacing:.12em!important;
}

body.plumb-executive-industrial .page-heading h1,
body.plumb-executive-industrial .topbar-page-slot .page-heading h1{
  color:var(--ei-text)!important;
  font-weight:620!important;
  letter-spacing:-.025em!important;
}

body.plumb-executive-industrial .page-heading p,
body.plumb-executive-industrial .topbar-page-slot .page-heading p,
body.plumb-executive-industrial .panel-header p,
body.plumb-executive-industrial .settings-panel-header p{
  color:var(--ei-text-2)!important;
  line-height:1.5!important;
}

body.plumb-executive-industrial .breadcrumb{
  color:var(--ei-text-3)!important;
  font-size:11px!important;
}

body.plumb-executive-industrial .user-chip{
  min-height:34px!important;
  padding:0 11px!important;
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:5px!important;
  box-shadow:none!important;
}

/* Controls: no pills, gradients, glow or translucent material. */
body.plumb-executive-industrial .button,
body.plumb-executive-industrial .icon-button,
body.plumb-executive-industrial .text-button,
body.plumb-executive-industrial .ui-selector,
body.plumb-executive-industrial input,
body.plumb-executive-industrial select,
body.plumb-executive-industrial textarea{
  min-height:38px!important;
  color:var(--ei-text-2)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border:1px solid var(--ei-border)!important;
  border-radius:5px!important;
  box-shadow:none!important;
  transform:none!important;
}

body.plumb-executive-industrial .button:hover,
body.plumb-executive-industrial .icon-button:hover,
body.plumb-executive-industrial .text-button:hover,
body.plumb-executive-industrial .ui-selector:hover{
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-secondary)!important;
  box-shadow:none!important;
  transform:none!important;
}

body.plumb-executive-industrial .button-primary,
body.plumb-executive-industrial .ai-form button{
  color:#fff!important;
  background:var(--ei-primary)!important;
  background-image:none!important;
  border-color:var(--ei-primary)!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .button-primary:hover,
body.plumb-executive-industrial .ai-form button:hover{
  color:#fff!important;
  background:var(--ei-primary-strong)!important;
  border-color:var(--ei-primary-strong)!important;
}

body.plumb-executive-industrial .button-danger{
  color:var(--ei-danger)!important;
  background:var(--ei-surface)!important;
  border-color:color-mix(in srgb,var(--ei-danger) 42%,var(--ei-border))!important;
}

body.plumb-executive-industrial input:focus,
body.plumb-executive-industrial select:focus,
body.plumb-executive-industrial textarea:focus{
  color:var(--ei-text)!important;
  border-color:var(--ei-primary)!important;
  outline:1px solid var(--ei-primary)!important;
  outline-offset:0!important;
  box-shadow:none!important;
}

/* Data hierarchy: neutral cards, no decorative color. */
body.plumb-executive-industrial .summary-grid{
  gap:10px!important;
}

body.plumb-executive-industrial .summary-card{
  min-height:118px!important;
  padding:17px!important;
  position:relative!important;
  overflow:hidden!important;
  box-shadow:none!important;
  transform:none!important;
}

body.plumb-executive-industrial .summary-card::after{
  display:none!important;
  content:none!important;
}

body.plumb-executive-industrial .summary-card:hover{
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-border)!important;
  box-shadow:none!important;
  transform:none!important;
}

body.plumb-executive-industrial .summary-card span,
body.plumb-executive-industrial .summary-card small,
body.plumb-executive-industrial .plant-context-card span{
  color:var(--ei-text-3)!important;
}

body.plumb-executive-industrial .summary-card strong{
  margin-block:8px 5px!important;
  color:var(--ei-text)!important;
  font-size:25px!important;
  font-weight:620!important;
  letter-spacing:-.025em!important;
}

body.plumb-executive-industrial .panel-header,
body.plumb-executive-industrial .settings-panel-header,
body.plumb-executive-industrial .plant-power-pro-header,
body.plumb-executive-industrial .plant-sensor-table-card > header,
body.plumb-executive-industrial .billing-estimate-card > header,
body.plumb-executive-industrial .billing-sustainability-card > header{
  padding:15px 17px!important;
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .panel-header h2,
body.plumb-executive-industrial .settings-panel-header h2{
  color:var(--ei-text)!important;
  font-size:13.5px!important;
  font-weight:620!important;
}

body.plumb-executive-industrial .state-badge,
body.plumb-executive-industrial .plant-substate,
body.plumb-executive-industrial .plant-indicators-badge,
body.plumb-executive-industrial .energy-demo-badge,
body.plumb-executive-industrial .billing-live-badge,
body.plumb-executive-industrial .sustainability-method-badge,
body.plumb-executive-industrial .tag-row span,
body.plumb-executive-industrial .meter-badge{
  color:var(--ei-text-2)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:4px!important;
  box-shadow:none!important;
}

/* Login: the supplied artwork is the only expressive surface. */
body.plumb-executive-industrial .login-view,
body.plumb-executive-industrial .login-layout,
body.plumb-executive-industrial .login-panel{
  color:var(--ei-text)!important;
  background:var(--ei-bg)!important;
}

body.plumb-executive-industrial .login-layout{
  gap:14px!important;
  padding:14px!important;
}

body.plumb-executive-industrial .hero-panel{
  border:1px solid var(--ei-border)!important;
  border-radius:8px!important;
  box-shadow:none!important;
  background:var(--ei-bg-2)!important;
}

body.plumb-executive-industrial .hero-image{
  object-fit:cover!important;
  object-position:center center!important;
  filter:saturate(.82) contrast(1.02) brightness(.82)!important;
  transform:none!important;
}

body.plumb-executive-industrial .hero-overlay{
  background:linear-gradient(90deg,rgba(8,13,16,.72),rgba(8,13,16,.16) 58%,rgba(8,13,16,.32))!important;
}

body.plumb-executive-industrial .hero-copy{
  left:42px!important;
  bottom:74px!important;
  max-width:720px!important;
}

body.plumb-executive-industrial .hero-copy h3{
  color:#f5f1e8!important;
  font-size:clamp(34px,4.6vw,64px)!important;
  font-weight:570!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  text-wrap:balance!important;
}

body.plumb-executive-industrial .hero-copy .eyebrow{
  color:#d8cab0!important;
}

body.plumb-executive-industrial .login-card{
  width:min(430px,100%)!important;
  padding:28px!important;
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:8px!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial .login-header h2{
  color:var(--ei-text)!important;
  font-size:28px!important;
  font-weight:620!important;
  letter-spacing:-.03em!important;
}

body.plumb-executive-industrial .login-header p{
  color:var(--ei-text-2)!important;
  font-size:13px!important;
  line-height:1.5!important;
}

body.plumb-executive-industrial .login-form input,
body.plumb-executive-industrial .login-form .button{
  min-height:44px!important;
  border-radius:5px!important;
}

/* Segmented navigation without pill styling. */
body.plumb-executive-industrial .electrical-module-subnav,
body.plumb-executive-industrial .electrical-tabs,
body.plumb-executive-industrial .plant-power-range-selector{
  padding:0!important;
  gap:0!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:6px!important;
  box-shadow:none!important;
  overflow:auto!important;
}

body.plumb-executive-industrial .electrical-module-subnav-item,
body.plumb-executive-industrial .electrical-tab,
body.plumb-executive-industrial .quick-range,
body.plumb-executive-industrial .analysis-mode,
body.plumb-executive-industrial .plant-power-range-selector button{
  min-height:40px!important;
  color:var(--ei-text-3)!important;
  background:transparent!important;
  border:0!important;
  border-right:1px solid var(--ei-border-soft)!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .electrical-module-subnav-item:last-child,
body.plumb-executive-industrial .electrical-tab:last-child,
body.plumb-executive-industrial .plant-power-range-selector button:last-child{
  border-right:0!important;
}

body.plumb-executive-industrial .electrical-module-subnav-item:hover,
body.plumb-executive-industrial .electrical-tab:hover,
body.plumb-executive-industrial .quick-range:hover,
body.plumb-executive-industrial .analysis-mode:hover,
body.plumb-executive-industrial .plant-power-range-selector button:hover{
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
}

body.plumb-executive-industrial .electrical-module-subnav-item.active,
body.plumb-executive-industrial .electrical-tab.active,
body.plumb-executive-industrial .quick-range.active,
body.plumb-executive-industrial .analysis-mode.active,
body.plumb-executive-industrial .plant-power-range-selector button.active{
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
  box-shadow:inset 0 -2px 0 var(--ei-primary)!important;
}

/* KPI, billing and sustainability cards stay neutral. */
body.plumb-executive-industrial .plant-indicators-shell,
body.plumb-executive-industrial .plant-indicators-view,
body.plumb-executive-industrial .energy-management-view,
body.plumb-executive-industrial .energy-command-shell,
body.plumb-executive-industrial .sustainability-workspace-view{
  color:var(--ei-text)!important;
  background:transparent!important;
}

body.plumb-executive-industrial .plant-electrical-summary > article,
body.plumb-executive-industrial .billing-live-main,
body.plumb-executive-industrial .billing-live-stats > div,
body.plumb-executive-industrial .billing-demand-overview > article,
body.plumb-executive-industrial .billing-estimate-totals > div,
body.plumb-executive-industrial .billing-breakdown > div,
body.plumb-executive-industrial .sustainability-intro-grid > article,
body.plumb-executive-industrial .billing-sustainability-grid > article{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:6px!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial .plant-electrical-summary strong,
body.plumb-executive-industrial .billing-live-main strong,
body.plumb-executive-industrial .billing-live-stats strong,
body.plumb-executive-industrial .billing-demand-overview strong,
body.plumb-executive-industrial .billing-estimate-card strong,
body.plumb-executive-industrial .billing-sustainability-card strong{
  color:var(--ei-text)!important;
  font-weight:620!important;
  letter-spacing:-.015em!important;
}

body.plumb-executive-industrial table{
  color:var(--ei-text-2)!important;
  background:transparent!important;
  border-collapse:collapse!important;
}

body.plumb-executive-industrial th{
  color:var(--ei-text-3)!important;
  background:var(--ei-surface-2)!important;
  border-bottom:1px solid var(--ei-border)!important;
  font-size:9.5px!important;
  letter-spacing:.08em!important;
}

body.plumb-executive-industrial td{
  color:var(--ei-text-2)!important;
  background:transparent!important;
  border-bottom:1px solid var(--ei-border-soft)!important;
}

body.plumb-executive-industrial tbody tr:hover td{
  background:var(--ei-surface-2)!important;
}

/* AI looks like an enterprise tool, not a gaming assistant. */
body.plumb-executive-industrial .ai-dock{
  min-height:48px!important;
  padding:8px 13px!important;
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  background-image:none!important;
  border:1px solid var(--ei-border)!important;
  border-left:3px solid var(--ei-primary)!important;
  border-radius:6px!important;
  box-shadow:var(--ei-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial .ai-dock strong{
  color:var(--ei-text)!important;
}

body.plumb-executive-industrial .ai-dock small{
  color:var(--ei-text-3)!important;
}

body.plumb-executive-industrial .ai-window,
body.plumb-executive-industrial .ai-side-panel{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:8px!important;
  box-shadow:var(--ei-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  overflow:hidden!important;
}

body.plumb-executive-industrial .ai-window-header,
body.plumb-executive-industrial .ai-form{
  background:var(--ei-surface)!important;
  border-color:var(--ei-border-soft)!important;
}

body.plumb-executive-industrial .ai-messages{
  background:var(--ei-bg-2)!important;
}

body.plumb-executive-industrial .ai-message{
  color:var(--ei-text-2)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:6px!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .ai-message-user{
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-primary)!important;
  border-left:3px solid var(--ei-primary)!important;
}

body.plumb-executive-industrial .ai-message-user p,
body.plumb-executive-industrial .ai-message-user strong{
  color:var(--ei-text)!important;
}

/* Modals and schematic: clarity over decoration. */
body.plumb-executive-industrial .modal-overlay{
  background:var(--ei-overlay)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial .modal-card,
body.plumb-executive-industrial #detailModal .schematic-detail-modal{
  border-radius:8px!important;
  box-shadow:var(--ei-shadow)!important;
}

body.plumb-executive-industrial .smart-hover-tooltip,
body.plumb-executive-industrial .schematic-reason-tooltip,
body.plumb-executive-industrial .detail-variable-tooltip,
body.plumb-executive-industrial .trend-hover-tooltip,
body.plumb-executive-industrial .toast{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:5px!important;
  box-shadow:var(--ei-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial .diagram-shell{
  color:var(--ei-text)!important;
  background:var(--ei-bg)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:8px!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

body.plumb-executive-industrial .canvas-viewport,
body.plumb-executive-industrial #diagramCanvas{
  background:var(--ei-bg)!important;
  background-image:none!important;
}

body.plumb-executive-industrial #nodesLayer .node-card,
body.plumb-executive-industrial #nodesLayer .equip-card,
body.plumb-executive-industrial #nodesLayer .load-card,
body.plumb-executive-industrial #nodesLayer .switch-card,
body.plumb-executive-industrial #nodesLayer .coupler-card,
body.plumb-executive-industrial .bar,
body.plumb-executive-industrial .schematic-status-panel{
  color:var(--ei-text)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:6px!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.plumb-executive-industrial #nodesLayer .node-card:hover,
body.plumb-executive-industrial #nodesLayer .equip-card:hover,
body.plumb-executive-industrial #nodesLayer .load-card:hover,
body.plumb-executive-industrial #nodesLayer .switch-card:hover,
body.plumb-executive-industrial #nodesLayer .coupler-card:hover{
  transform:none!important;
  background:var(--ei-surface-2)!important;
  border-color:var(--ei-primary)!important;
  box-shadow:inset 3px 0 0 var(--ei-primary)!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric,
body.plumb-executive-industrial .status-matrix-cell,
body.plumb-executive-industrial #detailModal .detail-metric-card,
body.plumb-executive-industrial #detailModal .detail-phase-card{
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border-soft)!important;
  border-radius:4px!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #nodesLayer .q-badge,
body.plumb-executive-industrial #nodesLayer .load-primary-tag,
body.plumb-executive-industrial #nodesLayer .transformer-entry-tag,
body.plumb-executive-industrial #nodesLayer .generator-primary-tag,
body.plumb-executive-industrial #nodesLayer .node-tag-box,
body.plumb-executive-industrial #nodesLayer .integrated-switch{
  color:var(--ei-text)!important;
  background:transparent!important;
  border:1px solid var(--ei-border)!important;
  border-radius:3px!important;
  box-shadow:none!important;
}

/* Semantic color is reserved for operational meaning. */
body.plumb-executive-industrial .metric-green strong,
body.plumb-executive-industrial .text-success,
body.plumb-executive-industrial .state-live{
  color:var(--ei-success)!important;
}

body.plumb-executive-industrial .metric-yellow strong{
  color:var(--ei-warning)!important;
}

body.plumb-executive-industrial .metric-blue strong{
  color:var(--ei-primary-strong)!important;
}

body.plumb-executive-industrial .status-green,
body.plumb-executive-industrial .status-matrix-green .status-swatch{
  background:var(--ei-success)!important;
}

body.plumb-executive-industrial .status-yellow,
body.plumb-executive-industrial .status-orange,
body.plumb-executive-industrial .status-matrix-yellow .status-swatch,
body.plumb-executive-industrial .status-matrix-orange .status-swatch{
  background:var(--ei-warning)!important;
}

body.plumb-executive-industrial .status-red,
body.plumb-executive-industrial .status-matrix-red .status-swatch{
  background:var(--ei-danger)!important;
}

@media(max-width:980px){
  body.plumb-executive-industrial .sidebar{
    margin:0!important;
    height:100vh!important;
    border-radius:0!important;
  }
  body.plumb-executive-industrial .app-content{
    padding:16px 12px 32px!important;
  }
}

@media(max-width:760px){
  body.plumb-executive-industrial .login-layout{
    min-height:100vh!important;
    display:flex!important;
    padding:0!important;
  }
  body.plumb-executive-industrial .hero-panel{
    position:fixed!important;
    inset:0!important;
    min-height:100vh!important;
    border:0!important;
    border-radius:0!important;
  }
  body.plumb-executive-industrial .hero-brand{
    top:20px!important;
    left:20px!important;
  }
  body.plumb-executive-industrial .hero-copy{
    top:118px!important;
    bottom:auto!important;
    left:22px!important;
    right:22px!important;
  }
  body.plumb-executive-industrial .hero-copy h3{
    font-size:clamp(32px,10vw,50px)!important;
  }
  body.plumb-executive-industrial .login-panel{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    min-height:100vh!important;
    padding:350px 12px 24px!important;
    align-items:end!important;
    background:transparent!important;
  }
  body.plumb-executive-industrial .login-card{
    width:100%!important;
    padding:22px!important;
    background:rgba(22,30,35,.96)!important;
    border-radius:7px!important;
  }
  html[data-theme="light"] body.plumb-executive-industrial .login-card{
    background:rgba(248,250,251,.97)!important;
  }
  body.plumb-executive-industrial .login-footer{
    display:none!important;
  }
  body.plumb-executive-industrial .summary-grid,
  body.plumb-executive-industrial #view-home > .summary-grid,
  body.plumb-executive-industrial #view-home .summary-grid:first-of-type{
    grid-template-columns:1fr!important;
  }
  body.plumb-executive-industrial .ai-window{
    inset:8px!important;
    width:auto!important;
    height:calc(100dvh - 16px)!important;
    border-radius:7px!important;
  }
}

/* ==========================================================
   PLUMB · ESQUEMÁTICO SCADA V7
   TAG libre + dos instrumentos de lectura prioritaria.
   ========================================================== */
body.plumb-executive-industrial #nodesLayer .node-card{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:0!important;
  overflow:hidden!important;
}

body.plumb-executive-industrial #nodesLayer .load-card.node-card{
  height:168px!important;
  min-height:168px!important;
  padding:9px 7px 8px!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card.node-card{
  height:206px!important;
  min-height:206px!important;
  padding:10px 9px 9px!important;
}

body.plumb-executive-industrial #nodesLayer .schematic-scada-header{
  order:1!important;
  width:100%!important;
  min-height:31px!important;
  margin:0 0 8px!important;
  padding:0 2px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  color:var(--ei-text)!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #nodesLayer .schematic-scada-header.has-equipment-icon{
  min-height:52px!important;
  justify-content:space-between!important;
}

body.plumb-executive-industrial #nodesLayer .schematic-scada-tag{
  min-width:0!important;
  color:var(--ei-text)!important;
  font-family:var(--font-mono,monospace)!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1.08!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  overflow-wrap:anywhere!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .schematic-scada-tag{
  font-size:13px!important;
}

body.plumb-executive-industrial #nodesLayer .entry-transformer-card .schematic-scada-tag,
body.plumb-executive-industrial #nodesLayer .generator-equipment-card .schematic-scada-tag{
  font-size:18px!important;
}

body.plumb-executive-industrial #nodesLayer .schematic-scada-header .schematic-card-icon{
  order:2!important;
  flex:0 0 43px!important;
  width:43px!important;
  height:43px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  color:var(--ei-text-3)!important;
}

body.plumb-executive-industrial #nodesLayer .schematic-scada-header .schematic-card-icon svg{
  width:41px!important;
  height:41px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metrics{
  order:2!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric{
  min-width:0!important;
  min-height:91px!important;
  padding:9px 4px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:4px!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric{
  min-height:115px!important;
  padding-top:11px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric small{
  order:1!important;
  width:100%!important;
  min-height:25px!important;
  margin:0 0 8px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:visible!important;
  color:var(--ei-text-3)!important;
  font-family:var(--font-mono,monospace)!important;
  font-size:6.4px!important;
  font-weight:800!important;
  line-height:1.18!important;
  letter-spacing:.035em!important;
  text-align:center!important;
  white-space:normal!important;
  text-overflow:clip!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric small{
  font-size:7px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric strong{
  order:2!important;
  width:100%!important;
  margin-top:auto!important;
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:3px!important;
  color:var(--ei-text)!important;
  line-height:1!important;
  white-space:nowrap!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric strong b{
  color:var(--ei-text)!important;
  font-family:var(--font-mono,monospace)!important;
  font-size:22px!important;
  font-weight:900!important;
  line-height:.95!important;
  letter-spacing:-.055em!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric strong b{
  font-size:25px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric strong em{
  margin:0!important;
  color:var(--ei-text-3)!important;
  font-family:var(--font-mono,monospace)!important;
  font-size:8px!important;
  font-style:normal!important;
  font-weight:800!important;
  letter-spacing:0!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-medium strong b{font-size:19px!important}
body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-long strong b{font-size:16px!important}
body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-xlong strong b{font-size:13px!important}
body.plumb-executive-industrial #nodesLayer .equip-card .node-metric.metric-fit-medium strong b{font-size:22px!important}
body.plumb-executive-industrial #nodesLayer .equip-card .node-metric.metric-fit-long strong b{font-size:18px!important}
body.plumb-executive-industrial #nodesLayer .equip-card .node-metric.metric-fit-xlong strong b{font-size:15px!important}

body.plumb-executive-industrial #nodesLayer .node-metrics-offline{
  opacity:.72!important;
}

body.plumb-executive-industrial #nodesLayer .coupler-card .schematic-scada-header{
  min-height:31px!important;
}

body.plumb-executive-industrial #nodesLayer .coupler-card .schematic-card-name{
  order:2!important;
}

body.plumb-executive-industrial #nodesLayer .coupler-card .coupler-simple-box{
  order:3!important;
}

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

/* ==========================================================
   PLUMB · HISTÓRICO CORPORATIVO DE ALARMAS
   ========================================================== */
body.plumb-executive-industrial .alarm-history-panel{
  margin-top:18px!important;
  padding:0!important;
  overflow:hidden!important;
}

body.plumb-executive-industrial .alarm-history-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 24px 18px;
  border-bottom:1px solid var(--ei-border)!important;
}

body.plumb-executive-industrial .alarm-history-header h2{
  margin:5px 0 4px!important;
  font-size:18px!important;
  letter-spacing:-.01em!important;
}

body.plumb-executive-industrial .alarm-history-header p{
  margin:0!important;
  color:var(--ei-text-2)!important;
}

body.plumb-executive-industrial .alarm-refresh-button[aria-busy="true"]{
  opacity:.55;
  pointer-events:none;
}

body.plumb-executive-industrial .alarm-history-status{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:8px 24px;
  color:var(--ei-text-3)!important;
  font-size:11px!important;
  letter-spacing:.04em;
  border-bottom:1px solid var(--ei-border)!important;
}

body.plumb-executive-industrial .alarm-table-wrap{
  overflow:auto;
  max-height:560px;
}

body.plumb-executive-industrial .alarm-history-table{
  width:100%;
  min-width:1040px;
  border-collapse:collapse;
  table-layout:auto;
}

body.plumb-executive-industrial .alarm-history-table th{
  position:sticky;
  top:0;
  z-index:1;
  padding:12px 16px;
  text-align:left;
  color:var(--ei-text-3)!important;
  background:var(--ei-surface-2)!important;
  border-bottom:1px solid var(--ei-border)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.plumb-executive-industrial .alarm-history-table td{
  padding:14px 16px;
  color:var(--ei-text-2)!important;
  border-bottom:1px solid var(--ei-border)!important;
  font-size:12px!important;
  vertical-align:middle;
}

body.plumb-executive-industrial .alarm-history-table tr:last-child td{
  border-bottom:0!important;
}

body.plumb-executive-industrial .alarm-history-table tr:hover td{
  background:color-mix(in srgb,var(--ei-primary) 5%,transparent)!important;
}

body.plumb-executive-industrial .alarm-row.is-resolved{
  opacity:.72;
}

body.plumb-executive-industrial .alarm-severity,
body.plumb-executive-industrial .alarm-state{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:11px!important;
  font-weight:700!important;
}

body.plumb-executive-industrial .alarm-severity i{
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:var(--ei-secondary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ei-secondary) 13%,transparent);
}

body.plumb-executive-industrial .alarm-severity-critical i{
  background:var(--ei-danger);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ei-danger) 13%,transparent);
}

body.plumb-executive-industrial .alarm-severity-warning i{
  background:var(--ei-warning);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ei-warning) 13%,transparent);
}

body.plumb-executive-industrial .alarm-node{
  color:var(--ei-text)!important;
  font-family:var(--font-mono,monospace)!important;
  letter-spacing:.03em;
}

body.plumb-executive-industrial .alarm-description{
  display:block;
  min-width:220px;
  max-width:420px;
  color:var(--ei-text)!important;
}

body.plumb-executive-industrial .alarm-state-active{
  color:var(--ei-danger)!important;
}

body.plumb-executive-industrial .alarm-state-resolved{
  color:var(--ei-success)!important;
}

@media(max-width:760px){
  body.plumb-executive-industrial .alarm-history-header{
    align-items:flex-start;
    flex-direction:column;
  }
  body.plumb-executive-industrial .alarm-refresh-button{
    width:100%;
  }
}

/* ==========================================================
   PLUMB · UX POLISH V8
   Trend, IA contextual, jerarquía y controles laterales.
   ========================================================== */

/* Solapas gemelas: una flecha clara y el mismo lenguaje en ambos lados. */
body.plumb-executive-industrial .sidebar-collapse-toggle,
body.plumb-executive-industrial .app-view.ai-side-panel-open .ai-side-collapse-toggle{
  width:32px!important;min-width:32px!important;height:76px!important;padding:0!important;
  display:grid!important;place-items:center!important;color:var(--ei-primary-strong)!important;
  background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.14)!important;opacity:1!important;
}
body.plumb-executive-industrial .sidebar-collapse-toggle{border-left:0!important;border-radius:0 6px 6px 0!important}
body.plumb-executive-industrial .app-view.ai-side-panel-open .ai-side-collapse-toggle{border-right:0!important;border-radius:6px 0 0 6px!important}
body.plumb-executive-industrial .sidebar-collapse-toggle:hover,
body.plumb-executive-industrial .app-view.ai-side-panel-open .ai-side-collapse-toggle:hover,
body.plumb-executive-industrial .sidebar-collapse-toggle:focus-visible,
body.plumb-executive-industrial .app-view.ai-side-panel-open .ai-side-collapse-toggle:focus-visible{
  color:var(--ei-text)!important;background:color-mix(in srgb,var(--ei-primary) 10%,var(--ei-surface))!important;
  border-color:color-mix(in srgb,var(--ei-primary) 48%,var(--ei-border))!important;outline:none!important;
}
body.plumb-executive-industrial .panel-collapse-arrow{
  display:block!important;color:currentColor!important;font-family:Arial,sans-serif!important;
  font-size:32px!important;font-weight:400!important;line-height:1!important;
  transform-origin:center!important;transition:transform .2s ease!important;
}
body.plumb-executive-industrial .app-view.sidebar-collapsed .panel-collapse-arrow-left,
body.plumb-executive-industrial .ai-side-collapse-toggle.collapsed .panel-collapse-arrow-right{transform:rotate(180deg)!important}

/* IA del activo: panel reconocible, contexto visible y conversación contenida. */
body.plumb-executive-industrial #detailModal .detail-ai-panel{
  position:relative!important;color:var(--ei-text)!important;background:var(--ei-bg-2)!important;
  border:2px solid color-mix(in srgb,var(--ei-primary) 42%,var(--ei-border))!important;border-radius:7px!important;
  box-shadow:inset 3px 0 0 var(--ei-primary),0 14px 34px rgba(0,0,0,.14)!important;
}
body.plumb-executive-industrial #detailModal .detail-ai-header{
  min-height:76px!important;padding:13px 14px!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;background:var(--ei-surface)!important;border-bottom:1px solid var(--ei-border)!important;
}
body.plumb-executive-industrial #detailModal .detail-ai-identity{min-width:0!important;display:flex!important;align-items:center!important;gap:11px!important}
body.plumb-executive-industrial #detailModal .detail-ai-mark{
  width:38px!important;height:38px!important;flex:0 0 38px!important;display:grid!important;place-items:center!important;
  color:var(--ei-text)!important;background:color-mix(in srgb,var(--ei-primary) 13%,var(--ei-surface-2))!important;
  border:1px solid color-mix(in srgb,var(--ei-primary) 45%,var(--ei-border))!important;border-radius:5px!important;
  font-family:var(--font-mono,monospace)!important;font-size:12px!important;font-weight:900!important;letter-spacing:.04em!important;
}
body.plumb-executive-industrial #detailModal .detail-ai-identity>div{min-width:0!important;display:grid!important;gap:3px!important}
body.plumb-executive-industrial #detailModal .detail-ai-identity .eyebrow{color:var(--ei-primary-strong)!important;font-size:8px!important}
body.plumb-executive-industrial #detailModal .detail-ai-identity strong{color:var(--ei-text)!important;font-size:13px!important;line-height:1.1!important}
body.plumb-executive-industrial #detailModal .detail-ai-identity small{
  overflow:hidden!important;color:var(--ei-text-3)!important;font-size:8px!important;line-height:1.2!important;
  white-space:nowrap!important;text-overflow:ellipsis!important;
}
body.plumb-executive-industrial #detailModal .detail-ai-conversation{
  flex:1 1 auto!important;min-height:0!important;margin:12px 12px 0!important;overflow:hidden!important;
  background:var(--ei-surface)!important;border:1px solid var(--ei-border)!important;border-radius:5px!important;
}
body.plumb-executive-industrial #detailModal .detail-ai-output{height:100%!important;padding:16px!important;background:transparent!important}
body.plumb-executive-industrial #detailModal .detail-ai-output section{padding:0 0 12px!important;border-bottom:1px solid var(--ei-border-soft)!important}
body.plumb-executive-industrial #detailModal .detail-ai-output section:last-child{padding-bottom:0!important;border-bottom:0!important}
body.plumb-executive-industrial #detailModal .detail-ai-output h4{color:var(--ei-text)!important;font-size:11px!important;letter-spacing:.015em!important}
body.plumb-executive-industrial #detailModal .detail-ai-output p,
body.plumb-executive-industrial #detailModal .detail-ai-output li{color:var(--ei-text-2)!important;font-size:10.5px!important;line-height:1.55!important}
body.plumb-executive-industrial #detailModal .detail-ai-composer{padding:12px!important;display:block!important;background:transparent!important;border:0!important}
body.plumb-executive-industrial #detailModal .detail-ai-composer>label{
  display:block!important;margin:0 0 7px!important;color:var(--ei-text-3)!important;font-family:var(--font-mono,monospace)!important;
  font-size:8px!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important;
}
body.plumb-executive-industrial #detailModal .detail-ai-composer-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:8px!important}
body.plumb-executive-industrial #detailModal .detail-ai-composer textarea{
  min-height:62px!important;color:var(--ei-text)!important;background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;border-radius:5px!important;
}
body.plumb-executive-industrial #detailModal .detail-ai-composer textarea:focus{
  border-color:var(--ei-primary)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ei-primary) 12%,transparent)!important;outline:none!important;
}
body.plumb-executive-industrial .ai-window.side-docked{
  border-left:2px solid color-mix(in srgb,var(--ei-primary) 55%,var(--ei-border))!important;
  box-shadow:-12px 0 32px rgba(0,0,0,.14)!important;
}
body.plumb-executive-industrial .ai-window.side-docked .ai-window-header{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--ei-primary) 42%,transparent)!important}

/* Trend de detalle con la misma presencia del gráfico de Indicadores. */
body.plumb-executive-industrial #detailModal .detail-side-trend{background:var(--ei-bg-2)!important;border:1px solid var(--ei-border)!important;border-radius:7px!important}
body.plumb-executive-industrial #detailTrendChart{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ei-primary) 3%,var(--ei-surface-2)),var(--ei-surface-2))!important;
  border:1px solid var(--ei-border)!important;border-radius:6px!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ei-text) 4%,transparent)!important;
}
body.plumb-executive-industrial #detailModal .detail-trend-selected{margin:0 0 10px!important;padding:0!important}
body.plumb-executive-industrial #detailModal .detail-trend-kpis{
  gap:0!important;overflow:hidden!important;background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;border-radius:5px!important;
}
body.plumb-executive-industrial #detailModal .detail-trend-kpis>span{
  min-height:55px!important;padding:10px 12px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
  color:var(--ei-text-3)!important;background:transparent!important;border:0!important;border-right:1px solid var(--ei-border-soft)!important;
}
body.plumb-executive-industrial #detailModal .detail-trend-kpis>span:first-child{
  background:color-mix(in srgb,var(--ei-primary) 8%,var(--ei-surface))!important;box-shadow:inset 3px 0 0 var(--ei-primary)!important;
}
body.plumb-executive-industrial #detailModal .detail-trend-kpis>span:last-child{border-right:0!important}
body.plumb-executive-industrial #detailModal .detail-trend-kpis b{
  margin-top:5px!important;color:var(--ei-text)!important;font-size:14px!important;font-variant-numeric:tabular-nums!important;
}

/* Facturación: se prioriza el desvío controlable, no otro total monetario. */
body.plumb-executive-industrial #billingDemandExcessCard.billing-demand-highlight{
  position:relative!important;background:color-mix(in srgb,var(--ei-warning) 7%,var(--ei-surface-2))!important;
  border-color:color-mix(in srgb,var(--ei-warning) 42%,var(--ei-border))!important;box-shadow:inset 3px 0 0 var(--ei-warning)!important;
}
body.plumb-executive-industrial #billingDemandExcessCard.billing-demand-highlight::after{
  content:"VARIABLE CLAVE";position:absolute;top:12px;right:12px;color:var(--ei-warning);
  font-family:var(--font-mono,monospace);font-size:7px;font-weight:850;letter-spacing:.07em;
}
body.plumb-executive-industrial #billingDemandExcessCard.billing-demand-highlight strong{color:var(--ei-warning)!important;font-size:clamp(28px,2.3vw,38px)!important}
body.plumb-executive-industrial #billingDemandExcessCard.demand-critical{
  background:color-mix(in srgb,var(--ei-danger) 7%,var(--ei-surface-2))!important;
  border-color:color-mix(in srgb,var(--ei-danger) 46%,var(--ei-border))!important;box-shadow:inset 3px 0 0 var(--ei-danger)!important;
}
body.plumb-executive-industrial #billingDemandExcessCard.demand-critical::after,
body.plumb-executive-industrial #billingDemandExcessCard.demand-critical strong{color:var(--ei-danger)!important}

/* Sustentabilidad: emisiones observadas como resultado principal. */
body.plumb-executive-industrial .billing-sustainability-grid .sustainability-primary-metric{
  background:color-mix(in srgb,var(--ei-primary) 7%,var(--ei-surface-2))!important;
  border-color:color-mix(in srgb,var(--ei-primary) 40%,var(--ei-border))!important;box-shadow:inset 3px 0 0 var(--ei-primary)!important;
}
body.plumb-executive-industrial .billing-sustainability-grid .sustainability-primary-metric>strong{
  color:var(--ei-primary-strong)!important;font-size:clamp(27px,2.2vw,36px)!important;
}

/* Esquemático: el estado operativo se reconoce antes de leer el número. */
body.plumb-executive-industrial #nodesLayer .node-card.status-green{--scada-state:#55ad79}
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow{--scada-state:#d5b94f}
body.plumb-executive-industrial #nodesLayer .node-card.status-orange{--scada-state:#db8744}
body.plumb-executive-industrial #nodesLayer .node-card.status-red{--scada-state:#d75e5e}
body.plumb-executive-industrial #nodesLayer .node-card.status-green,
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow,
body.plumb-executive-industrial #nodesLayer .node-card.status-orange,
body.plumb-executive-industrial #nodesLayer .node-card.status-red{
  position:absolute!important;background:color-mix(in srgb,var(--scada-state) 7%,var(--ei-surface))!important;
  border:2px solid color-mix(in srgb,var(--scada-state) 72%,var(--ei-border))!important;
  box-shadow:inset 4px 0 0 var(--scada-state),0 0 0 1px color-mix(in srgb,var(--scada-state) 12%,transparent)!important;
}
body.plumb-executive-industrial #nodesLayer .node-card.status-green::after,
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow::after,
body.plumb-executive-industrial #nodesLayer .node-card.status-orange::after,
body.plumb-executive-industrial #nodesLayer .node-card.status-red::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--scada-state);opacity:.95;pointer-events:none;
}
body.plumb-executive-industrial #nodesLayer .node-card.status-green .schematic-scada-tag,
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow .schematic-scada-tag,
body.plumb-executive-industrial #nodesLayer .node-card.status-orange .schematic-scada-tag,
body.plumb-executive-industrial #nodesLayer .node-card.status-red .schematic-scada-tag{
  color:color-mix(in srgb,var(--scada-state) 86%,var(--ei-text))!important;
}
body.plumb-executive-industrial #nodesLayer .node-card.status-green .node-metric,
body.plumb-executive-industrial #nodesLayer .node-card.status-yellow .node-metric,
body.plumb-executive-industrial #nodesLayer .node-card.status-orange .node-metric,
body.plumb-executive-industrial #nodesLayer .node-card.status-red .node-metric{
  border-color:color-mix(in srgb,var(--scada-state) 32%,var(--ei-border))!important;
}
body.plumb-executive-industrial .status-matrix-green .status-swatch{background:#55ad79!important}
body.plumb-executive-industrial .status-matrix-yellow .status-swatch{background:#d5b94f!important}
body.plumb-executive-industrial .status-matrix-orange .status-swatch{background:#db8744!important}
body.plumb-executive-industrial .status-matrix-red .status-swatch{background:#d75e5e!important}
body.plumb-executive-industrial .status-matrix-cell .status-swatch{
  width:11px!important;height:11px!important;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 10%,transparent)!important;
}

@media(max-width:980px){
  body.plumb-executive-industrial #detailModal .detail-ai-composer-row{grid-template-columns:1fr!important}
}

/* ==========================================================
   PLUMB · LEGIBILIDAD RESPONSIVA V9
   Límites tipográficos + reflujo; sin controles adicionales.
   ========================================================== */
body.plumb-executive-industrial{
  font-size:14px!important;
  line-height:1.45!important;
}

body.plumb-executive-industrial small{
  font-size:11.5px!important;
  line-height:1.4!important;
}

body.plumb-executive-industrial button,
body.plumb-executive-industrial input,
body.plumb-executive-industrial select,
body.plumb-executive-industrial textarea{
  font-size:13px!important;
}

body.plumb-executive-industrial button,
body.plumb-executive-industrial .button,
body.plumb-executive-industrial [role="button"]{
  min-height:40px;
}

body.plumb-executive-industrial .eyebrow,
body.plumb-executive-industrial .module-path,
body.plumb-executive-industrial .sustainability-page-kicker,
body.plumb-executive-industrial .nav-label,
body.plumb-executive-industrial .brand-powered,
body.plumb-executive-industrial .brand-subline{
  font-size:11px!important;
  line-height:1.35!important;
  letter-spacing:.10em!important;
}

body.plumb-executive-industrial .nav-item{
  min-height:46px!important;
  font-size:14px!important;
}

body.plumb-executive-industrial .plant-subitem,
body.plumb-executive-industrial .ai-skills-subitem,
body.plumb-executive-industrial .settings-subitem,
body.plumb-executive-industrial .library-subitem{
  min-height:42px!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}

body.plumb-executive-industrial .nav-icon,
body.plumb-executive-industrial .nav-icon svg{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
}

body.plumb-executive-industrial .breadcrumb,
body.plumb-executive-industrial .topbar-unified-context,
body.plumb-executive-industrial .app-topbar button,
body.plumb-executive-industrial .language-selector{
  font-size:12px!important;
}

body.plumb-executive-industrial .sidebar-status-minimal strong,
body.plumb-executive-industrial .plant-map-source,
body.plumb-executive-industrial .plant-hotspot-copy,
body.plumb-executive-industrial .settings-info-note,
body.plumb-executive-industrial .billing-demo-note{
  font-size:12px!important;
  line-height:1.5!important;
}

body.plumb-executive-industrial .billing-carbon-source span,
body.plumb-executive-industrial .billing-carbon-source strong{
  font-size:11.5px!important;
  line-height:1.4!important;
}

body.plumb-executive-industrial .page-heading h1,
body.plumb-executive-industrial .plant-indicators-header h2,
body.plumb-executive-industrial .sustainability-page-header h2{
  font-size:clamp(24px,2.1vw,34px)!important;
  line-height:1.15!important;
}

body.plumb-executive-industrial .page-heading p,
body.plumb-executive-industrial .plant-indicators-header p,
body.plumb-executive-industrial .sustainability-page-header p{
  font-size:14px!important;
  line-height:1.55!important;
}

body.plumb-executive-industrial .electrical-module-subnav{
  overflow-x:auto!important;
  scrollbar-width:thin;
}

body.plumb-executive-industrial .electrical-module-subnav-four{
  grid-template-columns:repeat(4,minmax(170px,1fr))!important;
}

body.plumb-executive-industrial .electrical-module-subnav-item{
  min-height:52px!important;
  padding:0 16px!important;
  font-size:12px!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}

body.plumb-executive-industrial .summary-card span,
body.plumb-executive-industrial .plant-electrical-summary span,
body.plumb-executive-industrial .billing-live-stats span,
body.plumb-executive-industrial .billing-demand-overview span,
body.plumb-executive-industrial .billing-estimate-card span,
body.plumb-executive-industrial .sustainability-intro-grid span,
body.plumb-executive-industrial .billing-sustainability-grid span{
  font-size:12px!important;
  line-height:1.35!important;
}

body.plumb-executive-industrial .summary-card small,
body.plumb-executive-industrial .plant-electrical-summary small,
body.plumb-executive-industrial .billing-live-main small,
body.plumb-executive-industrial .billing-live-stats small,
body.plumb-executive-industrial .billing-demand-overview small,
body.plumb-executive-industrial .billing-estimate-card small,
body.plumb-executive-industrial .sustainability-intro-grid small,
body.plumb-executive-industrial .billing-sustainability-grid small,
body.plumb-executive-industrial .billing-carbon-source{
  font-size:11px!important;
  line-height:1.45!important;
}

body.plumb-executive-industrial .plant-chart-card header strong,
body.plumb-executive-industrial .plant-power-pro-header strong,
body.plumb-executive-industrial .plant-sensor-table-card>header strong,
body.plumb-executive-industrial .billing-estimate-card>header strong,
body.plumb-executive-industrial .billing-sustainability-card>header strong{
  font-size:14px!important;
  line-height:1.35!important;
}

body.plumb-executive-industrial .plant-power-pro-kpis span,
body.plumb-executive-industrial .plant-power-window-state,
body.plumb-executive-industrial .plant-power-range-selector button{
  font-size:11px!important;
}

body.plumb-executive-industrial .plant-power-pro-kpis b{
  font-size:13px!important;
}

body.plumb-executive-industrial table th{
  font-size:11.5px!important;
  line-height:1.35!important;
}

body.plumb-executive-industrial table td{
  font-size:12.5px!important;
  line-height:1.45!important;
}

body.plumb-executive-industrial .state-badge,
body.plumb-executive-industrial .plant-indicators-badge,
body.plumb-executive-industrial .energy-demo-badge,
body.plumb-executive-industrial .billing-live-badge,
body.plumb-executive-industrial .sustainability-method-badge,
body.plumb-executive-industrial .detail-live-indicator{
  font-size:11px!important;
  line-height:1.3!important;
}

body.plumb-executive-industrial .ai-message,
body.plumb-executive-industrial .ai-message p,
body.plumb-executive-industrial .ai-form input,
body.plumb-executive-industrial #detailModal .detail-ai-output p,
body.plumb-executive-industrial #detailModal .detail-ai-output li,
body.plumb-executive-industrial #detailModal .detail-ai-composer textarea{
  font-size:13px!important;
  line-height:1.55!important;
}

body.plumb-executive-industrial #detailModal .detail-ai-identity .eyebrow,
body.plumb-executive-industrial #detailModal .detail-ai-identity small,
body.plumb-executive-industrial #detailModal .detail-ai-composer>label{
  font-size:11px!important;
  line-height:1.3!important;
}

body.plumb-executive-industrial #detailModal .detail-ai-identity strong,
body.plumb-executive-industrial #detailModal .detail-ai-output h4{
  font-size:13px!important;
}

body.plumb-executive-industrial #detailModal .detail-alarm-filter,
body.plumb-executive-industrial #detailModal .detail-alarm-nav,
body.plumb-executive-industrial #detailModal .detail-alarm-row strong,
body.plumb-executive-industrial #detailModal .detail-metric-card span,
body.plumb-executive-industrial #detailModal .detail-phase-row,
body.plumb-executive-industrial #detailModal .detail-phase-group-selector{
  font-size:12px!important;
  line-height:1.4!important;
}

body.plumb-executive-industrial #detailModal .detail-alarm-row em,
body.plumb-executive-industrial #detailModal .detail-metric-card small,
body.plumb-executive-industrial #detailModal .detail-phase-row em{
  font-size:11px!important;
}

/* Dentro del canvas conservamos densidad, pero eliminamos microtexto. */
body.plumb-executive-industrial #nodesLayer .node-card.is-unmonitored{
  opacity:.68!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric small{
  min-height:36px!important;
  margin-bottom:5px!important;
  font-size:10.5px!important;
  line-height:1.16!important;
  letter-spacing:.015em!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric small{
  font-size:10.5px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric strong em{
  font-size:10px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric strong b{
  font-size:23px!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric strong b{
  font-size:26px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-medium strong b{font-size:20px!important}
body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-long strong b{font-size:17px!important}
body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-xlong strong b{font-size:15px!important}

body.plumb-executive-industrial .status-matrix-cell span,
body.plumb-executive-industrial .status-matrix-cell small,
body.plumb-executive-industrial .schematic-status-panel-head span,
body.plumb-executive-industrial .schematic-status-panel-head em,
body.plumb-executive-industrial .schematic-status-panel-foot,
body.plumb-executive-industrial .bar-copy p{
  font-size:11px!important;
  line-height:1.4!important;
}

body.plumb-executive-industrial .schematic-status-panel-head strong{
  font-size:13px!important;
}

body.plumb-executive-industrial #billingDemandExcessCard.billing-demand-highlight::after{
  font-size:11px!important;
}

body.plumb-executive-industrial .status-matrix-cell strong{
  font-size:20px!important;
}

body.plumb-executive-industrial .bar-copy h2{
  font-size:21px!important;
}

/* Los módulos responden al espacio que realmente queda entre menú y chat. */
body.plumb-executive-industrial .plant-indicators-shell,
body.plumb-executive-industrial .billing-shell,
body.plumb-executive-industrial .sustainability-workspace-view{
  container-type:inline-size;
}

@container (max-width:1250px){
  body.plumb-executive-industrial .plant-electrical-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.plumb-executive-industrial .plant-phase-grid{grid-template-columns:1fr!important}
  body.plumb-executive-industrial .billing-demand-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@container (max-width:900px){
  body.plumb-executive-industrial .plant-electrical-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.plumb-executive-industrial .sustainability-intro-grid,
  body.plumb-executive-industrial .billing-sustainability-grid{grid-template-columns:1fr!important}
}

@media(max-width:1280px){
  body.plumb-executive-industrial #view-home>.summary-grid,
  body.plumb-executive-industrial #view-home .summary-grid:first-of-type{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:760px){
  body.plumb-executive-industrial #view-home>.summary-grid,
  body.plumb-executive-industrial #view-home .summary-grid:first-of-type,
  body.plumb-executive-industrial .plant-electrical-summary,
  body.plumb-executive-industrial .billing-demand-overview{grid-template-columns:1fr!important}
}

/* ==========================================================
   PLUMB · REFLOW POR ÁREA ÚTIL + PAN DEL ESQUEMÁTICO V10
   El contenido responde al espacio entre ambos paneles.
   ========================================================== */

body.plumb-executive-industrial .billing-shell *,
body.plumb-executive-industrial .plant-indicators-shell *{
  min-width:0;
}

body.plumb-executive-industrial .billing-live-panel,
body.plumb-executive-industrial .billing-live-main,
body.plumb-executive-industrial .billing-live-stats,
body.plumb-executive-industrial .plant-phase-grid,
body.plumb-executive-industrial .plant-chart-card{
  max-width:100%;
}

body.plumb-executive-industrial .billing-live-main>strong{
  max-width:100%;
  font-size:clamp(38px,6cqw,68px)!important;
  line-height:1.02!important;
  white-space:nowrap!important;
}

body.plumb-executive-industrial .billing-live-stats strong,
body.plumb-executive-industrial .billing-demand-overview strong,
body.plumb-executive-industrial .billing-estimate-totals strong,
body.plumb-executive-industrial .billing-breakdown strong{
  max-width:100%;
  overflow-wrap:anywhere;
}

body.plumb-executive-industrial .plant-phase-grid>.plant-chart-card,
body.plumb-executive-industrial .plant-phase-echart{
  min-width:0!important;
  overflow:hidden!important;
}

@container (max-width:1200px){
  body.plumb-executive-industrial .energy-command-header,
  body.plumb-executive-industrial .plant-indicators-header{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  body.plumb-executive-industrial .billing-live-panel{
    min-height:0!important;
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.plumb-executive-industrial .billing-live-main{
    min-height:330px!important;
    padding:clamp(24px,4cqw,42px)!important;
  }

  body.plumb-executive-industrial .billing-live-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
  }

  body.plumb-executive-industrial .billing-live-stats>div{
    min-height:116px!important;
  }

  body.plumb-executive-industrial .billing-estimate-totals{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.plumb-executive-industrial .plant-power-pro-header{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
}

@container (max-width:820px){
  body.plumb-executive-industrial .energy-command-header h2,
  body.plumb-executive-industrial .plant-indicators-header h2{
    font-size:clamp(23px,5.5cqw,31px)!important;
    overflow-wrap:anywhere;
  }

  body.plumb-executive-industrial .billing-live-stats,
  body.plumb-executive-industrial .billing-estimate-totals{
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.plumb-executive-industrial .billing-demand-overview{
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.plumb-executive-industrial .billing-breakdown>div{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }

  body.plumb-executive-industrial .billing-breakdown>div>strong{
    flex:1 1 100%;
    text-align:left!important;
  }

  body.plumb-executive-industrial .plant-electrical-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.plumb-executive-industrial .plant-power-pro-actions,
  body.plumb-executive-industrial .plant-power-pro-kpis{
    width:100%!important;
    flex-wrap:wrap!important;
  }
}

@container (max-width:560px){
  body.plumb-executive-industrial .plant-electrical-summary{
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.plumb-executive-industrial .billing-live-main{
    min-height:270px!important;
  }

  body.plumb-executive-industrial .billing-live-main>strong{
    font-size:clamp(31px,8.5cqw,46px)!important;
  }
}

body.plumb-executive-industrial .canvas-viewport.schematic-pan-ready{
  cursor:grab!important;
  overscroll-behavior-x:contain;
  scroll-behavior:auto!important;
  touch-action:pan-y;
}

body.plumb-executive-industrial .canvas-viewport.schematic-pan-ready #nodesLayer .node-card[data-monitored="true"]{
  cursor:pointer!important;
}

body.plumb-executive-industrial .canvas-viewport.schematic-pan-ready.is-pan-armed{
  user-select:none!important;
}

body.plumb-executive-industrial .canvas-viewport.schematic-pan-ready.is-panning,
body.plumb-executive-industrial .canvas-viewport.schematic-pan-ready.is-panning *{
  cursor:grabbing!important;
  user-select:none!important;
}

/* ==========================================================
   PLUMB · CONSISTENCIA VISUAL GLOBAL V11
   Unidades separadas, fases siempre visibles, estados y mapa.
   ========================================================== */

/* El valor y su unidad son dos piezas independientes en todo el front. */
body.plumb-executive-industrial .number-with-unit{
  max-width:100%!important;
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:.34em!important;
  white-space:nowrap!important;
}

body.plumb-executive-industrial .number-with-unit>em{
  position:static!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  white-space:nowrap!important;
}

body.plumb-executive-industrial .number-with-unit>b{
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:none!important;
}

/* En las tarjetas SCADA compactas el tamaño depende de la longitud real. */
body.plumb-executive-industrial #nodesLayer .node-metric strong.number-with-unit{
  width:100%!important;
  justify-content:center!important;
  gap:2px!important;
  overflow:visible!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-normal strong.number-with-unit>b{
  font-size:23px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-medium strong.number-with-unit>b{
  font-size:14.5px!important;
  letter-spacing:-.045em!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-long strong.number-with-unit>b{
  font-size:13.5px!important;
  letter-spacing:-.04em!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-xlong strong.number-with-unit>b{
  font-size:11.5px!important;
  letter-spacing:-.03em!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-normal strong.number-with-unit>em{
  font-size:9.5px!important;
}

body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-medium strong.number-with-unit>em,
body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-long strong.number-with-unit>em,
body.plumb-executive-industrial #nodesLayer .node-metric.metric-fit-xlong strong.number-with-unit>em{
  font-size:7.5px!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric.metric-fit-normal strong.number-with-unit>b{
  font-size:25px!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric.metric-fit-medium strong.number-with-unit>b{
  font-size:17px!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric.metric-fit-long strong.number-with-unit>b{
  font-size:15px!important;
}

body.plumb-executive-industrial #nodesLayer .equip-card .node-metric.metric-fit-xlong strong.number-with-unit>b{
  font-size:13px!important;
}

/* Estados de disponibilidad inequívocos en cualquier módulo. */
body.plumb-executive-industrial .is-instantiated{
  width:max-content!important;
  min-height:22px!important;
  padding:3px 7px!important;
  display:inline-flex!important;
  align-items:center!important;
  color:#37e889!important;
  background:rgba(55,232,137,.12)!important;
  border:1px solid rgba(55,232,137,.62)!important;
  border-radius:999px!important;
  box-shadow:0 0 0 2px rgba(55,232,137,.06)!important;
  font-style:normal!important;
  font-weight:900!important;
}

body.plumb-executive-industrial .is-not-instantiated{
  width:max-content!important;
  min-height:22px!important;
  padding:3px 7px!important;
  display:inline-flex!important;
  align-items:center!important;
  color:#ff6670!important;
  background:rgba(255,102,112,.11)!important;
  border:1px solid rgba(255,102,112,.60)!important;
  border-radius:999px!important;
  box-shadow:0 0 0 2px rgba(255,102,112,.05)!important;
  font-style:normal!important;
  font-weight:900!important;
}

html[data-theme="light"] body.plumb-executive-industrial .is-instantiated{
  color:#087c3b!important;
  background:rgba(12,170,81,.11)!important;
  border-color:rgba(8,124,59,.58)!important;
}

html[data-theme="light"] body.plumb-executive-industrial .is-not-instantiated{
  color:#c52332!important;
  background:rgba(217,45,58,.09)!important;
  border-color:rgba(197,35,50,.55)!important;
}

/* Marcadores de ubicación: visibles aun sin abrir su ficha. */
body.plumb-executive-industrial .plant-map-hotspot{
  width:54px!important;
  height:54px!important;
  min-height:54px!important;
}

body.plumb-executive-industrial .plant-hotspot-ring{
  inset:2px!important;
  border:3px solid #25cbbb!important;
  background:rgba(37,203,187,.20)!important;
  box-shadow:0 0 0 5px rgba(37,203,187,.13),0 5px 18px rgba(0,0,0,.30)!important;
}

body.plumb-executive-industrial .plant-hotspot-ring i{
  width:17px!important;
  height:17px!important;
  background:#31e1cf!important;
  border:3px solid rgba(8,36,38,.72)!important;
  box-shadow:0 0 0 4px rgba(49,225,207,.18)!important;
}

body.plumb-executive-industrial .plant-map-hotspot:hover .plant-hotspot-ring,
body.plumb-executive-industrial .plant-map-hotspot:focus-visible .plant-hotspot-ring,
body.plumb-executive-industrial .plant-map-hotspot.active .plant-hotspot-ring{
  transform:scale(1.12)!important;
  border-color:#3aebda!important;
  background:rgba(37,203,187,.28)!important;
  box-shadow:0 0 0 7px rgba(37,203,187,.17),0 7px 22px rgba(0,0,0,.34)!important;
}

html[data-theme="light"] body.plumb-executive-industrial .plant-hotspot-ring{
  border-color:#007f75!important;
  background:rgba(0,127,117,.18)!important;
  box-shadow:0 0 0 5px rgba(0,127,117,.13),0 5px 16px rgba(27,53,55,.22)!important;
}

html[data-theme="light"] body.plumb-executive-industrial .plant-hotspot-ring i{
  background:#008f83!important;
  border-color:#e8f7f4!important;
  box-shadow:0 0 0 4px rgba(0,127,117,.18)!important;
}

/* La navegación activa tenía una regla más específica; estos colores mandan. */
body.plumb-executive-industrial .plant-subitem .plant-substate.is-instantiated{
  color:#37e889!important;
  background:rgba(55,232,137,.12)!important;
  border-color:rgba(55,232,137,.62)!important;
  box-shadow:0 0 0 2px rgba(55,232,137,.06)!important;
}

body.plumb-executive-industrial .plant-subitem .plant-substate.is-not-instantiated{
  color:#ff6670!important;
  background:rgba(255,102,112,.11)!important;
  border-color:rgba(255,102,112,.60)!important;
  box-shadow:0 0 0 2px rgba(255,102,112,.05)!important;
}

html[data-theme="light"] body.plumb-executive-industrial .plant-subitem .plant-substate.is-instantiated{
  color:#087c3b!important;
  background:rgba(12,170,81,.11)!important;
  border-color:rgba(8,124,59,.58)!important;
}

html[data-theme="light"] body.plumb-executive-industrial .plant-subitem .plant-substate.is-not-instantiated{
  color:#c52332!important;
  background:rgba(217,45,58,.09)!important;
  border-color:rgba(197,35,50,.55)!important;
}

/* ==========================================================
   PLUMB · MAPA SUAVE + PARIDAD DE TENDENCIAS V12
   ========================================================== */

/* El marcador vuelve a ser una referencia sutil, no el protagonista del mapa. */
body.plumb-executive-industrial .plant-map-hotspot{
  width:44px!important;
  height:44px!important;
  min-height:44px!important;
}

body.plumb-executive-industrial .plant-hotspot-ring{
  inset:3px!important;
  border:2px solid rgba(82,177,169,.46)!important;
  background:rgba(82,177,169,.05)!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .plant-hotspot-ring i{
  width:11px!important;
  height:11px!important;
  background:#5b9c97!important;
  border:2px solid rgba(10,28,33,.56)!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial .plant-map-hotspot:hover .plant-hotspot-ring,
body.plumb-executive-industrial .plant-map-hotspot:focus-visible .plant-hotspot-ring,
body.plumb-executive-industrial .plant-map-hotspot.active .plant-hotspot-ring{
  transform:scale(1.03)!important;
  border-color:rgba(101,190,183,.68)!important;
  background:rgba(82,177,169,.085)!important;
  box-shadow:0 0 0 2px rgba(82,177,169,.05)!important;
}

body.plumb-executive-industrial .plant-hotspot-callout::after{
  content:none!important;
  display:none!important;
}

html[data-theme="light"] body.plumb-executive-industrial .plant-hotspot-ring{
  border-color:rgba(27,117,110,.44)!important;
  background:rgba(27,117,110,.05)!important;
  box-shadow:none!important;
}

html[data-theme="light"] body.plumb-executive-industrial .plant-hotspot-ring i{
  background:#357f7a!important;
  border-color:rgba(255,255,255,.82)!important;
  box-shadow:none!important;
}

/* La cabecera y los KPI del detalle replican la jerarquía de Indicadores. */
body.plumb-executive-industrial #detailModal .detail-side-trend{
  overflow:hidden!important;
  background:var(--ei-surface-2)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:7px!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-header{
  min-height:82px!important;
  padding:18px 20px 12px!important;
  align-items:flex-start!important;
  gap:18px!important;
  background:var(--ei-surface-2)!important;
  border-bottom:0!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-header .eyebrow{
  margin:0 0 7px!important;
  font-size:10px!important;
  line-height:1.2!important;
  letter-spacing:.09em!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-header h3{
  margin:0!important;
  color:var(--ei-text)!important;
  font-size:18px!important;
  line-height:1.28!important;
  font-weight:780!important;
  letter-spacing:-.018em!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:0 0 auto!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-range-selector{
  display:grid!important;
  grid-template-columns:repeat(4,44px)!important;
  overflow:hidden!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:6px!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-range-selector button{
  min-width:0!important;
  min-height:38px!important;
  padding:0 8px!important;
  color:var(--ei-text-2)!important;
  background:transparent!important;
  border:0!important;
  border-right:1px solid var(--ei-border-soft)!important;
  border-radius:0!important;
  font-family:var(--font-mono,ui-monospace,monospace)!important;
  font-size:11px!important;
  font-weight:800!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-range-selector button:last-child{
  border-right:0!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-range-selector button:hover{
  color:var(--ei-text)!important;
  background:var(--ei-surface-2)!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-range-selector button.active{
  color:var(--ei-text)!important;
  background:color-mix(in srgb,var(--ei-primary) 8%,var(--ei-surface))!important;
  box-shadow:inset 0 -3px 0 var(--ei-primary)!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-close{
  width:38px!important;
  height:38px!important;
  min-height:38px!important;
  color:var(--ei-text-2)!important;
  background:var(--ei-surface)!important;
  border:1px solid var(--ei-border)!important;
  border-radius:5px!important;
  font-size:20px!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-selected{
  margin:0!important;
  padding:0 20px 16px!important;
  background:var(--ei-surface-2)!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-kpis{
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:12px 30px!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-kpis>span{
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  flex-direction:row!important;
  align-items:baseline!important;
  gap:8px!important;
  color:var(--ei-text-2)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-family:var(--font-mono,ui-monospace,monospace)!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.02em!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-kpis>span:first-child{
  color:var(--ei-text)!important;
  background:transparent!important;
  box-shadow:none!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-kpis b{
  margin:0!important;
  color:var(--ei-text)!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
}

body.plumb-executive-industrial #detailModal .detail-trend-loading{
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  color:var(--ei-text-2)!important;
  font-family:var(--font-mono,ui-monospace,monospace)!important;
  font-size:11px!important;
  font-weight:750!important;
  letter-spacing:.05em!important;
}

body.plumb-executive-industrial #detailTrendChart{
  margin:0!important;
  min-height:430px!important;
  background:var(--ei-surface-2)!important;
  border:0!important;
  border-top:1px solid var(--ei-border-soft)!important;
  border-radius:0!important;
  box-shadow:none!important;
}

@media (max-width:1100px){
  body.plumb-executive-industrial #detailModal .detail-trend-header{
    flex-direction:column!important;
  }
  body.plumb-executive-industrial #detailModal .detail-trend-actions{
    width:100%!important;
    justify-content:space-between!important;
  }
}

/* ==========================================================
   BANNER DE PROCEDENCIA DE DATOS

   La demo mezcla telemetria real (modulo Electrico) con tres
   modulos simulados. Declararlo de entrada es mas solido que
   disimularlo, y evita la pregunta incomoda en la reunion.

   Usa las variables del sistema, asi acompana el tema claro
   y el oscuro sin reglas duplicadas.
   ========================================================== */

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--ei-border);
  border-left: 3px solid var(--ei-warning);
  border-radius: var(--radius-sm);
  background: var(--ei-surface-2);
}

.demo-banner[hidden] {
  display: none;
}

.demo-banner-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border: 1px solid var(--ei-warning);
  border-radius: 999px;
  color: var(--ei-warning);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}

.demo-banner-copy {
  margin: 0;
  color: var(--ei-text-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.demo-banner-copy strong {
  color: var(--ei-text);
  font-weight: 600;
}

.demo-banner-close {
  flex-shrink: 0;
  margin-left: auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ei-text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.demo-banner-close:hover {
  background: var(--ei-surface-3);
  color: var(--ei-text);
}

@media (max-width: 720px) {
  .demo-banner {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ==========================================================
   MODULO AGUA

   Sigue el lenguaje visual del modulo Electrico para que la
   demo se lea como plataforma y no como parches sucesivos.

   La diferencia deliberada es la etiqueta de origen del dato
   y la formula sobre cada KPI: el agua es derivada, no
   medida, y la interfaz no lo disimula.
   ========================================================== */

.water-workspace {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.water-workspace[hidden] {
  display: none;
}

/* ---------- Encabezado ---------- */

.water-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.water-header-copy h2 {
  margin: 4px 0 2px;
  font-size: 22px;
  color: var(--ei-text);
}

.water-header-copy p {
  margin: 0;
  color: var(--ei-text-3);
  font-size: 13px;
}

.water-header-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/*
   Etiqueta de procedencia.

   El modulo Electrico es telemetria real y este es derivado.
   Decirlo en la propia pantalla es mas solido que aclararlo
   solo en el banner general.
*/
.water-origin-badge {
  padding: 4px 10px;
  border: 1px dashed var(--ei-warning);
  border-radius: 999px;
  color: var(--ei-warning);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: help;
}

/* ---------- KPI cards ---------- */

.water-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.water-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--ei-border);
  border-radius: var(--radius-sm);
  background: var(--ei-surface);
}

/*
   La formula va ARRIBA del numero, no abajo: el lector ve
   como se calcula antes de ver el resultado. Evita que el KPI
   se lea como una caja negra.
*/
.water-kpi-formula {
  color: var(--ei-text-3);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.4;
}

.water-kpi-value {
  color: var(--ei-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

.water-kpi-value em {
  color: var(--ei-text-3);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
}

.water-kpi-label {
  color: var(--ei-text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
}

/* ---------- Panel y tabla ---------- */

.water-panel {
  padding: 16px 18px;
}

.water-table-wrap {
  overflow-x: auto;
}

.water-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.water-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ei-border);
  color: var(--ei-text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: right;
  white-space: nowrap;
}

.water-table th:first-child {
  text-align: left;
}

.water-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--ei-border-soft);
  color: var(--ei-text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.water-table td:first-child {
  color: var(--ei-text);
  font-weight: 500;
  text-align: left;
}

.water-table tbody tr:last-child td {
  border-bottom: 0;
}

.water-state {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

.water-state.is-green  { background: rgba(78,157,132,.15); color: var(--ei-success); }
.water-state.is-yellow { background: rgba(221,180,81,.15);  color: var(--ei-warning); }
.water-state.is-orange { background: rgba(221,180,81,.22);  color: var(--ei-warning); }
.water-state.is-red    { background: rgba(207,111,106,.16); color: var(--ei-danger); }

/* ---------- Grafico ---------- */

.water-chart-header {
  flex-wrap: wrap;
  gap: 12px;
}

.water-window-row {
  display: flex;
  gap: 6px;
}

.water-window {
  padding: 5px 12px;
  border: 1px solid var(--ei-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ei-text-3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.water-window:hover {
  color: var(--ei-text);
}

.water-window.active {
  border-color: var(--ei-primary);
  background: rgba(85,165,204,.14);
  color: var(--ei-primary-strong);
}

.water-chart {
  width: 100%;
  height: 320px;
}

/*
   Texto interpretativo.

   Explica el patron visual en lenguaje natural para que la
   demo no dependa de que alguien lo narre en vivo.
*/
.water-chart-note {
  margin: 10px 2px 0;
  padding-top: 10px;
  border-top: 1px solid var(--ei-border-soft);
  color: var(--ei-text-3);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .water-chart { height: 260px; }
  .water-kpi-value { font-size: 22px; }
}

/* Variacion contra el periodo anterior, en el KPI de produccion. */
.prod-variation {
  margin-left: 6px;
  font-weight: 700;
}

.prod-variation.is-up   { color: var(--ei-success); }
.prod-variation.is-down { color: var(--ei-danger); }

/* ==========================================================
   MODULO MERCADO
   ========================================================== */

/*
   Campo de precio editable en el encabezado.

   Permite que quien presenta la demo mueva la cotizacion en
   vivo y muestre como se recalcula el margen. Es de los
   gestos que mas convencen en una reunion, porque prueba que
   atras hay un calculo y no una pantalla pintada.
*/
.market-price-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--ei-border);
  border-radius: var(--radius-sm);
  background: var(--ei-surface-2);
}

.market-price-edit > span:first-child {
  color: var(--ei-text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.market-price-field {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.market-price-field em {
  color: var(--ei-text-3);
  font-size: 10px;
  font-style: normal;
}

.market-price-field input {
  width: 78px;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px dashed var(--ei-primary);
  background: transparent;
  color: var(--ei-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.market-price-field input:focus {
  outline: none;
  border-bottom-color: var(--ei-primary-strong);
}

.market-price-reset {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ei-text-3);
  font-size: 14px;
  cursor: pointer;
}

.market-price-reset:hover {
  color: var(--ei-primary-strong);
}

/* El margen es el indicador principal de la pantalla. */
.market-kpi-highlight {
  border-color: var(--ei-primary);
  background: linear-gradient(180deg, rgba(85, 165, 204, .12), transparent);
}

/* ==========================================================
   AJUSTE DE LENGUAJE VISUAL

   Alinea la demo con la rama nueva de la plataforma, que se ve
   en la demo de Rumará. Los cambios son de sistema y no de
   pantalla, asi que entran al final para pisar los tokens sin
   tocar 22.000 lineas de reglas.

   Que cambia y por que:

   RADIOS mas chicos. 16 y 24 px se leen como aplicacion de
   consumo. Un tablero industrial usa 5, 8 y 11: la forma se
   vuelve recesiva y el dato pasa al frente.

   SOMBRAS mas suaves. La sombra profunda hacia flotar los
   paneles; el sistema nuevo los apoya sobre el fondo y separa
   con borde, que es mas sobrio y rinde mejor en proyector.

   ESTADOS desaturados a proposito. Un verde saturado al lado
   de un ambar saturado compite con el dato. Bajados, se leen
   como instrumental.

   TIPOGRAFIA mas apretada: los titulos llevan tracking
   negativo, que es lo que distingue una tipografia de
   producto de una de plantilla.
   ========================================================== */

:root {
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 11px;

  --transition: 140ms cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================
   PALETA PLUMB LAB

   Los colores salen de plumblab.tech, para que la demo y el
   sitio de la marca se lean como el mismo producto.

   El cambio de fondo es el mas visible: la demo venia con un
   petroleo verdoso y PLUMB Lab usa azul marino profundo. El
   acento pasa de verde a celeste, con el dorado de la marca
   como segundo acento.

   Se apunta a html[data-theme] y no a html a secas porque el
   tema original se define con esa especificidad: un selector
   mas debil no lo pisaria.
   ========================================================== */

html[data-theme="dark"] {
  /* Superficies: azul marino de plumblab.tech */
  --ei-bg: #071527;          /* --paper */
  --ei-bg-2: #04101f;        /* --band-bg, para barras y pie */
  --ei-surface: #0b1c31;     /* --paper-2 */
  --ei-surface-2: #10263f;   /* --paper-3 */
  --ei-surface-3: #16304c;

  --ei-border: #233b55;      /* --line */
  --ei-border-soft: #1a2e45;

  /* Texto */
  --ei-text: #f4f7fb;        /* --ink */
  --ei-text-2: #b7c4d4;      /* --ink-2 */
  --ei-text-3: #8495a9;      /* --ink-3 */

  /* Acentos de marca */
  --ei-primary: #55a5cc;     /* --teal */
  --ei-primary-strong: #7fc0de;
  --ei-secondary: #8495a9;

  /*
     Estados.

     El ambar es el dorado de la marca, asi que advertencia y
     acento comparten familia. Verde y rojo se eligen frios y
     desaturados para no pelear con el azul del fondo.
  */
  --ei-success: #4e9d84;
  --ei-warning: #ddb451;     /* --yellow */
  --ei-danger: #cf6f6a;
  --ei-info: #55a5cc;

  --ei-shadow: 0 12px 30px rgba(2, 8, 18, .45);
  --ei-overlay: rgba(4, 16, 31, .78);

  /*
     Alias heredados. Los tintes suaves se calculaban sobre la
     paleta vieja, asi que quedarian con un verde que ya no
     existe en el sistema.
  */
  --gold-soft: rgba(85, 165, 204, .12);
  --blue-soft: rgba(132, 149, 169, .12);
  --green-soft: rgba(78, 157, 132, .12);
  --danger-soft: rgba(207, 111, 106, .12);
  --plumb-lime: var(--ei-primary-strong);
  --os-lime: var(--ei-primary-strong);
}

html[data-theme="light"] {
  /* El claro de PLUMB Lab es papel crema, no blanco puro. */
  --ei-bg: #f6f3ec;          /* --paper */
  --ei-bg-2: #eef1f2;        /* --paper-2 */
  --ei-surface: #fffdf8;     /* --logo-card */
  --ei-surface-2: #eef1f2;
  --ei-surface-3: #e2e8ea;   /* --paper-3 */

  --ei-border: #d3dde1;      /* --line */
  --ei-border-soft: #e2e8ea;

  --ei-text: #102536;        /* --ink */
  --ei-text-2: #445a69;      /* --ink-2 */
  --ei-text-3: #5f707c;      /* --ink-3 */

  --ei-primary: #0b6f86;     /* --teal claro */
  --ei-primary-strong: #103a4d;
  --ei-secondary: #5f707c;

  --ei-success: #2f7a5f;
  --ei-warning: #9f7120;     /* --yellow-deep */
  --ei-danger: #a8514c;
  --ei-info: #0b6f86;

  --ei-shadow: 0 10px 26px rgba(16, 37, 54, .10);
  --ei-overlay: rgba(16, 37, 54, .55);

  --gold-soft: rgba(11, 111, 134, .10);
  --blue-soft: rgba(95, 112, 124, .10);
  --green-soft: rgba(47, 122, 95, .10);
  --danger-soft: rgba(168, 81, 76, .10);
  --plumb-lime: var(--ei-primary);
  --os-lime: var(--ei-primary);
}

h1, h2, h3, h4 {
  font-weight: 560;
  letter-spacing: -0.02em;
}

/*
   Kicker del sistema: chico, muy tracked, en mayusculas.
   Es el detalle que mas dice "producto" a primera vista.
*/
.eyebrow,
.module-path {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ei-text-3);
}

/* Barra de scroll discreta, del ancho del sistema nuevo. */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ei-border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ei-secondary);
}

/* ==========================================================
   MODULO GENERAL
   ========================================================== */

.general-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.general-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ei-border);
  border-radius: var(--radius);
  background: var(--ei-surface);
  overflow: hidden;
}

.general-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px 11px;
  border-bottom: 1px solid var(--ei-border-soft);
}

.general-card-path {
  display: block;
  margin-bottom: 3px;
  color: var(--ei-text-3);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .12em;
}

.general-card > header strong {
  color: var(--ei-text);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.general-card-state {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ei-surface-3);
  color: var(--ei-text-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}

.general-card-state.is-green  { background: rgba(78,157,132,.15);  color: var(--ei-success); }
.general-card-state.is-yellow { background: rgba(221,180,81,.18);  color: var(--ei-warning); }
.general-card-state.is-red    { background: rgba(207,111,106,.16);  color: var(--ei-danger); }

.general-metrics {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 15px;
}

.general-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.general-metric span {
  color: var(--ei-text-3);
  font-size: 11.5px;
}

.general-metric strong {
  color: var(--ei-text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
   Procedencia del dato al pie de cada tarjeta. Es la
   distincion que sostiene la credibilidad de la demo: uno de
   los cuatro modulos esta instrumentado y los otros tres se
   derivan de el.
*/
.general-card-origin {
  padding: 8px 15px;
  border-top: 1px solid var(--ei-border-soft);
  background: var(--ei-bg-2);
  color: var(--ei-text-3);
  font-size: 10px;
  letter-spacing: .03em;
}

.general-card-origin.is-real {
  color: var(--ei-success);
  font-weight: 600;
}

/* ---------- Cadena de dependencias ---------- */

.general-chain {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 6px 0 4px;
  overflow-x: auto;
}

.general-chain-step {
  flex: 1 1 0;
  min-width: 158px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--ei-border);
  border-radius: var(--radius);
  background: var(--ei-surface-2);
}

.general-chain-step.is-real {
  border-color: var(--ei-success);
  background: linear-gradient(180deg, rgba(78,157,132,.10), transparent);
}

.general-chain-tag {
  color: var(--ei-text-3);
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .12em;
}

.general-chain-step.is-real .general-chain-tag {
  color: var(--ei-success);
}

.general-chain-step strong {
  color: var(--ei-text);
  font-size: 13px;
  font-weight: 560;
}

.general-chain-step b {
  color: var(--ei-primary-strong);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.general-chain-step small {
  color: var(--ei-text-3);
  font-size: 10.5px;
  line-height: 1.4;
}

.general-chain-arrow {
  align-self: center;
  flex-shrink: 0;
  color: var(--ei-text-3);
  font-size: 16px;
}

@media (max-width: 900px) {
  .general-chain {
    flex-direction: column;
  }

  .general-chain-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================
   ASISTENTE A PANTALLA COMPLETA

   El chat flotante sirve para consultar sin salir de una
   pantalla. Esta vista es para cuando el asistente es la
   tarea: respuestas largas legibles y sugerencias a la vista.
   ========================================================== */

.assistant-view.page-view {
  display: none;
}

.assistant-view.page-view.active {
  display: block;
}

.assistant-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Alto de ventana menos el topbar y el respiro del contenido. */
  min-height: calc(100vh - 190px);
  max-width: 1080px;
  margin: 0 auto;
}

.assistant-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.assistant-head h1 {
  margin: 5px 0 3px;
  font-size: 27px;
  letter-spacing: -0.025em;
  color: var(--ei-text);
}

.assistant-head p {
  margin: 0;
  color: var(--ei-text-3);
  font-size: 13px;
}

/* ---------- Sugerencias ---------- */

.assistant-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

/*
   Al primer envío las sugerencias se comprimen a una fila
   scrolleable: siguen accesibles pero le devuelven el espacio
   a la conversación, que pasa a ser lo importante.
*/
.assistant-suggestions.is-compact {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.assistant-suggestions.is-compact .assistant-suggestion-label {
  display: none;
}

.assistant-suggestions.is-compact .assistant-suggestion-chips {
  flex-direction: row;
}

.assistant-suggestions.is-compact .assistant-chip {
  white-space: nowrap;
  font-size: 11.5px;
}

.assistant-suggestion-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assistant-suggestion-label {
  color: var(--ei-primary);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .12em;
}

.assistant-suggestion-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assistant-chip {
  padding: 9px 12px;
  border: 1px solid var(--ei-border);
  border-radius: var(--radius);
  background: var(--ei-surface);
  color: var(--ei-text-2);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.assistant-chip:hover {
  border-color: var(--ei-primary);
  background: var(--ei-surface-2);
  color: var(--ei-text);
}

/* ---------- Conversación ---------- */

.assistant-conversation {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  max-height: 54vh;
  padding: 4px 2px;
  overflow-y: auto;
}

.assistant-conversation:empty {
  min-height: 0;
}

.assistant-message {
  max-width: 78%;
  padding: 11px 14px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  line-height: 1.6;
}

.assistant-message p {
  margin: 0;
  white-space: pre-wrap;
}

.assistant-message.is-user {
  align-self: flex-end;
  border: 1px solid var(--ei-primary);
  background: rgba(85, 165, 204, .12);
  color: var(--ei-text);
}

.assistant-message.is-bot {
  align-self: flex-start;
  border: 1px solid var(--ei-border);
  background: var(--ei-surface);
  color: var(--ei-text-2);
}

/* ---------- Barra de escritura ---------- */

.assistant-composer {
  display: flex;
  gap: 10px;
}

.assistant-composer input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid var(--ei-border);
  border-radius: var(--radius);
  background: var(--ei-surface);
  color: var(--ei-text);
  font-family: inherit;
  font-size: 13.5px;
}

.assistant-composer input:focus {
  outline: none;
  border-color: var(--ei-primary);
}

.assistant-composer input::placeholder {
  color: var(--ei-text-3);
}

.assistant-composer button[disabled] {
  opacity: .55;
  cursor: default;
}

.assistant-foot {
  margin: 0;
  color: var(--ei-text-3);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .assistant-message { max-width: 92%; }
  .assistant-conversation { max-height: 46vh; }
}

/* El banner de version de demostracion se retiro: la demo se
   presenta como tal por contexto y el aviso ocupaba el lugar
   del contenido. Las reglas .demo-banner-* quedan sin uso.

   La procedencia del dato sigue declarada donde importa: en la
   etiqueta de cada modulo derivado y en las respuestas del
   asistente. */
.demo-banner { display: none; }

/* ==========================================================
   COMPOSICION DEL COSTO ELECTRICO
   ========================================================== */

.billing-composition {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ei-border-soft);
}

.billing-composition-title {
  display: block;
  margin-bottom: 4px;
  color: var(--ei-text-3);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .12em;
}

.billing-composition-chart {
  width: 100%;
  height: 96px;
}

.billing-composition-note {
  margin: 6px 0 0;
  color: var(--ei-text-3);
  font-size: 11.5px;
  line-height: 1.5;
}

/* La nota de demo pasa a una linea al pie, no a un parrafo. */
.billing-demo-note {
  font-size: 10.5px;
  line-height: 1.5;
  opacity: .8;
}

/* ==========================================================
   SOLAPAS DE GENERAL

   Unifican las dos vistas generales que existian: el mapa de
   ubicaciones que estaba arriba de todo y el estado de los
   modulos. Dos pantallas con el mismo nombre obligaban al
   usuario a recordar cual era cual.
   ========================================================== */

.general-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--ei-border);
}

.general-tab {
  position: relative;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  color: var(--ei-text-3);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: var(--transition);
}

.general-tab:hover {
  color: var(--ei-text-2);
}

.general-tab.active {
  color: var(--ei-text);
}

/* Subrayado de la solapa activa, pisando el borde del contenedor. */
.general-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ei-primary);
}

.general-panel[hidden] {
  display: none;
}

/* El contenido heredado de la vista general trae sus propios
   margenes superiores; dentro de la solapa sobran. */
.general-panel > .summary-grid {
  margin-top: 0;
}

/* Contexto de planta activa, en el encabezado de General. */
.plant-context-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding-right: 12px;
  margin-right: 4px;
  border-right: 1px solid var(--ei-border);
}

.plant-context-inline em {
  color: var(--ei-text-3);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.plant-context-inline strong {
  color: var(--ei-text);
  font-size: 12.5px;
  font-weight: 600;
}

/* ==========================================================
   ANALITICA LABS

   Dos formas de armar el analisis: la asistida arriba, la
   manual al costado. La asistida va primero a proposito: es
   la que diferencia, porque no exige conocer la estructura de
   TAG de la planta.
   ========================================================== */

.labs-view.page-view { display: none; }
.labs-view.page-view.active { display: block; }

.labs-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.labs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.labs-head h1 {
  margin: 5px 0 3px;
  font-size: 26px;
  letter-spacing: -0.025em;
  color: var(--ei-text);
}

.labs-head p {
  margin: 0;
  color: var(--ei-text-3);
  font-size: 13px;
}

/* ---------- Consulta asistida ---------- */

.labs-ask {
  padding: 14px 16px;
  border: 1px solid var(--ei-primary);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(85, 165, 204, .08), transparent);
}

.labs-ask-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ei-primary-strong);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .12em;
}

.labs-ask-form {
  display: flex;
  gap: 10px;
}

.labs-ask-form input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--ei-border);
  border-radius: var(--radius);
  background: var(--ei-surface);
  color: var(--ei-text);
  font-family: inherit;
  font-size: 13px;
}

.labs-ask-form input:focus {
  outline: none;
  border-color: var(--ei-primary);
}

.labs-ask-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.labs-example {
  padding: 5px 11px;
  border: 1px solid var(--ei-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ei-text-3);
  font-size: 11.5px;
  cursor: pointer;
  transition: var(--transition);
}

.labs-example:hover {
  border-color: var(--ei-primary);
  color: var(--ei-text);
}

/* ---------- Constructor y resultado ---------- */

.labs-grid {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.labs-builder,
.labs-result {
  padding: 16px 18px;
}

.labs-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.labs-picker label,
.labs-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ei-text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.labs-picker select,
.labs-controls select {
  padding: 8px 10px;
  border: 1px solid var(--ei-border);
  border-radius: var(--radius-sm);
  background: var(--ei-surface-2);
  color: var(--ei-text);
  font-family: inherit;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
}

.labs-picker select:disabled {
  opacity: .5;
}

.labs-series-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.labs-series-empty {
  color: var(--ei-text-3);
  font-size: 11.5px;
  font-style: italic;
}

.labs-series-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--ei-border-soft);
  border-radius: var(--radius-sm);
  background: var(--ei-surface-2);
}

.labs-series-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.labs-series-name {
  flex: 1;
  min-width: 0;
  color: var(--ei-text-2);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.labs-series-remove {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ei-text-3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.labs-series-remove:hover {
  background: var(--ei-surface-3);
  color: var(--ei-danger);
}

.labs-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ei-border-soft);
}

.labs-chart {
  width: 100%;
  height: 380px;
}

@media (max-width: 980px) {
  .labs-grid { grid-template-columns: 1fr; }
  .labs-chart { height: 300px; }
}

/* ==========================================================
   ETIQUETA BETA

   Analitica Labs es la pantalla mas nueva y la unica donde el
   resultado depende de que el modelo interprete bien la
   consulta. Decirlo baja la expectativa lo justo: si una
   consulta rara no devuelve lo esperado, se lee como beta y
   no como producto roto.

   Se usa el dorado de la marca y no un rojo de advertencia:
   es una invitacion a probar, no un aviso de peligro.
   ========================================================== */

.nav-beta,
.title-beta {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--ei-warning);
  border-radius: 999px;
  color: var(--ei-warning);
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .1em;
  line-height: 1.5;
  vertical-align: middle;
}

/* En el menú va al final del ítem, sin empujar el texto. */
.nav-beta {
  margin-left: auto;
  flex-shrink: 0;
}

.title-beta {
  margin-left: 8px;
  font-size: 10px;
  vertical-align: 6px;
}