/*
 * HIPALUX URA Gateway — visual system
 *
 * styles.css contiene la estructura y el comportamiento responsivo. Este
 * archivo concentra únicamente la identidad visual para que la paleta y el
 * acabado de todos los componentes puedan evolucionar de forma coherente.
 */

:root {
  color-scheme: dark;
  --bg: #191919;
  --surface: #262626;
  --surface-2: #333333;
  --surface-3: #404040;
  --surface-hover: #484848;
  --line: #454545;
  --line-strong: #606060;
  --text: #f4f5f6;
  --muted: #c0c3c8;
  --subtle: #8d929a;
  --teal: #49b7ff;
  --teal-dim: #1f6f9f;
  --blue: #5ab0ed;
  --violet: #b29bed;
  --amber: #f4d24b;
  --red: #ff8585;
  --success: #42d36c;
  --primary: #006aa8;
  --primary-hover: #087dbd;
  --focus: #69bdf4;
  --sidebar-expanded-width: 192px;
  --sidebar-width: var(--sidebar-expanded-width);
  --history-drawer-width: 276px;
  --history-ai-drawer-width: 718px;
  --panel-gap: 5px;
  --page-gutter: var(--panel-gap);
  --topbar-height: 52px;
  --panel-padding: 16px;
  --modal-padding: 22px;
  --panel-radius: 0px;
  --control-radius: 2px;
  --shadow: none;
  --shadow-elevated: 0 10px 30px rgba(0, 0, 0, .4);
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #686868 var(--surface);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--surface); }
*::-webkit-scrollbar-thumb { background: #686868; border: 2px solid var(--surface); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: #70737a; }

body {
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  font-size: 13px;
  line-height: 1.45;
}

button, input, select { font: inherit; }
::selection { color: #fff; background: var(--primary); }

.shell { max-width: none; padding: var(--panel-gap) var(--page-gutter); }

/* El fondo queda visible como una junta continua entre las zonas de la consola. */
.page-container, [data-page] { scroll-margin-top: calc(var(--topbar-height) + 3 * var(--panel-gap)); }
#almacenamientos, #variables, #historico { margin-top: 0; }
.status-grid, .table-panel, .variables-list-panel, .catalog-panel, .history-panel, .admin-panel, .connections-list-panel { margin-bottom: var(--panel-gap); }

/* Navigation */
.topbar {
  top: var(--panel-gap);
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  margin: 0 0 var(--panel-gap);
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  outline: var(--panel-gap) solid var(--bg);
}

.topbar-context strong { color: #f7f8fa; font-size: 15px; font-weight: 650; letter-spacing: -.018em; }
.topbar-actions { gap: 12px; }

.topbar-nav {
  inset: var(--panel-gap) auto var(--panel-gap) var(--panel-gap);
  width: calc(var(--sidebar-width) - var(--panel-gap));
  height: auto;
  padding: 0;
  gap: var(--panel-gap);
  border: 0;
  background: var(--bg);
  box-shadow: none;
  scrollbar-color: #686868 var(--surface);
}

.sidebar-brand {
  gap: 11px;
  flex: 0 0 auto;
  min-height: var(--topbar-height);
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}

/* Cada bloque tiene su propio borde; la junta queda abierta también en los laterales. */
.sidebar-menu {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: var(--panel-gap);
  padding: 0 0 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.sidebar-brand-toggle { border-radius: var(--panel-radius); transition: background .18s ease; }
.sidebar-brand-toggle:hover { background: rgba(255, 255, 255, .045); }

.sidebar-logo {
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: var(--control-radius);
  background: #fff;
  box-shadow: none;
}

.brand-mark { color: #fff; background: var(--primary); }
.sidebar-brand strong { color: #f7f8fa; font-size: 12px; letter-spacing: .08em; }
.sidebar-brand small { margin-top: 2px; color: #a9adb4; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-nav-group { gap: 2px; padding: 8px 0; border-top-color: var(--line); }
.sidebar-group-label { margin: 0 10px 5px; color: #a9a9a9; }
.sidebar-nav-admin { border-top-color: rgba(255, 255, 255, .17); }
.topbar-nav [hidden] { display: none !important; }

.topbar-nav a {
  position: relative;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  color: #c2c5ca;
  border: 1px solid transparent;
  border-radius: var(--panel-radius);
  font-size: 12px;
  font-weight: 510;
  letter-spacing: -.005em;
}

.nav-icon {
  display: grid;
  flex: 0 0 18px;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #fff;
  transition: color .18s ease, transform .18s ease;
}

.nav-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.topbar-nav a:hover { color: #fff; border-color: #505258; background: rgba(255, 255, 255, .075); }
.topbar-nav a:hover .nav-icon { color: #fff; }
.topbar-nav a.active {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: none;
}
.topbar-nav a.active .nav-icon { color: #fff; }
/* El color pertenece al pictograma; el texto conserva los estados del menú. */
.topbar-nav .sidebar-nav-overview > a .nav-icon { color: #63ccff; }
.sidebar-nav-overview > a .nav-icon rect:nth-child(2),
.sidebar-nav-overview > a .nav-icon rect:nth-child(3) { stroke: #ffd05c; }
#sourceNavLink .nav-icon { color: #4be5c5; }
#sourceNavLink .nav-icon rect { stroke: #ffd05c; }
#storageNavLink .nav-icon { color: #d1aeff; }
#storageNavLink .nav-icon path:last-child { stroke: #ffcf68; }
#variablesNavLink .nav-icon { color: #4ddff1; }
#variablesNavLink .nav-icon circle:first-child { stroke: #ffc857; }
#alarmsNavLink .nav-icon { color: #ffc857; }
#alarmsNavLink .nav-icon path:last-child { stroke: #4ddff1; }
#historyNavLink .nav-icon { color: #79cfff; }
#historyNavLink .nav-icon path:not(:first-child) { stroke: #84e570; }
#uraConfigurationNav .nav-icon { color: #62cfff; }
#uraConfigurationNav .nav-icon circle { stroke: #ffd05c; }
#adminNav .nav-icon { color: #ffa685; }
#adminNav .nav-icon path:last-child { stroke: #ffe073; }
#forgePuzzleNav .nav-icon { color: #ffb157; }
#forgePuzzleNav .nav-icon path:not(:first-child) { stroke: #ffe06b; }
body[data-active-page="administracion"] #adminNav.active .nav-icon { color: #553223; }
body[data-active-page="administracion"] #adminNav.active .nav-icon path:last-child { stroke: #624719; }
/* Indica los apartados ocultos al cliente sin cambiar su acceso para el administrador. */
.topbar-nav a.client-hidden-for-client { gap: 7px; padding-right: 26px; }
.topbar-nav a.client-hidden-for-client > span:last-child:not(.nav-icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-nav a.client-hidden-for-client::after,
#sourceNavToggle.client-hidden-for-client::after {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background: #e3bc4f;
  content: "";
  -webkit-mask: url("/ui/eye-off.svg") center / contain no-repeat;
  mask: url("/ui/eye-off.svg") center / contain no-repeat;
}
.topbar-nav a.client-hidden-for-client::after { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); }
:is(#sourceNavSubmenu, #alarmsNavSubmenu) a.client-hidden-for-client { padding-right: 24px; }
#sourceNavToggle.client-hidden-for-client { display: flex; align-items: center; justify-content: center; gap: 1px; }
#sourceNavToggle.client-hidden-for-client svg { width: 11px; flex: 0 0 11px; }
#sourceNavToggle.client-hidden-for-client::after { flex-basis: 12px; width: 12px; height: 12px; }
body:not(.sidebar-collapsed) #sourceNavTree.has-types #sourceNavLink.client-hidden-for-client { gap: 10px; padding-right: 10px; }
body:not(.sidebar-collapsed) #sourceNavTree.has-types #sourceNavLink.client-hidden-for-client::after { display: none; }
body.sidebar-collapsed .topbar-nav a.client-hidden-for-client { padding-right: 0; }
body.sidebar-collapsed .topbar-nav a.client-hidden-for-client::after { top: auto; right: 2px; bottom: 2px; width: 12px; height: 12px; transform: none; }
.sidebar-nav-parent.is-active { border-radius: var(--panel-radius); background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.sidebar-nav-parent.is-active > a.active { border-color: transparent; background: transparent; }
.sidebar-nav-parent.is-active > .sidebar-submenu-toggle { color: #fff; background: transparent; }
.sidebar-nav-parent.is-active > .sidebar-submenu-toggle:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.badge {
  padding: 8px 12px;
  border-radius: var(--control-radius);
  font-size: 10px;
  font-weight: 620;
  letter-spacing: .075em;
}

.dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(231, 196, 90, .11); }
.session-user { color: #c5c8cd; font-size: 11px; }
.session-client-switcher select { color: #f5e7a7; border-color: rgba(227, 188, 79, .42); background-color: #353329; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.session-client-switcher select:hover { border-color: rgba(227, 188, 79, .68); }
.session-client-switcher select:focus { border-color: #e3bc4f; box-shadow: 0 0 0 3px rgba(227, 188, 79, .12); }
.icon-button, .nav-toggle { color: #e1e3e6; border-color: var(--line-strong); border-radius: var(--control-radius); background: var(--surface-3); }
.icon-button:hover, .nav-toggle:hover { color: #fff; border-color: #6eb7e7; background: #414449; }
.icon-button:hover { transform: none; }

/* Dashboard */
.hero { margin-bottom: var(--panel-gap); padding: 22px var(--panel-padding); border: 1px solid var(--line); background: var(--surface); }
.eyebrow { color: #78bde9; font-size: 10px; font-weight: 760; letter-spacing: .18em; }
h1 { color: #f7f8fa; font-size: clamp(28px, 3vw, 38px); font-weight: 650; letter-spacing: -.035em; }

.status-grid { gap: var(--panel-gap); }
.status-card {
  min-width: 0;
  min-height: 94px;
  padding: 18px;
  border-color: var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: none;
}
.status-card:hover { border-color: var(--line-strong); background: var(--surface); transform: none; }

.status-card strong { font-size: 14px; font-weight: 650; }
.status-card small { color: #bdc0c6; font-size: 10px; }
.status-pill { padding: 6px 9px; border-radius: var(--control-radius); font-size: 9px; font-weight: 670; }
.status-pill:not(.error):not(.pending):not(.amber) { color: #7ce19b; background: rgba(77, 204, 120, .12); }
.status-pill.pending { color: #d0d2d6; background: rgba(255, 255, 255, .08); }
.status-pill.amber { color: #f1d36f; background: rgba(231, 196, 90, .12); }
.status-pill.error { color: #ffadb5; background: rgba(255, 125, 136, .13); }

.dashboard-overview { gap: var(--panel-gap); margin-bottom: var(--panel-gap); }
.dashboard-domain { --dashboard-accent: #49b7ff; --dashboard-accent-soft: rgba(73, 183, 255, .12); }
.dashboard-domain-header {
  border: 1px solid var(--line);
  border-top: 3px solid var(--dashboard-accent);
  background: var(--surface-2);
}
.dashboard-domain-icon { color: var(--dashboard-accent); border: 1px solid var(--line-strong); border-radius: var(--control-radius); background: var(--surface-3); }
.dashboard-domain-kicker, .dashboard-card-kicker { color: var(--dashboard-accent); }
.dashboard-domain-header h2 { color: #f6f7f8; font-weight: 650; }
.dashboard-domain-state strong { color: #f3f4f6; }
.dashboard-domain-state small { color: #aeb2b8; }
.dashboard-kpi-grid { background: var(--bg); }
.dashboard-kpi {
  color: inherit;
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--panel-radius);
  background: var(--surface);
  transition: border-color .16s ease, background .16s ease;
}
.dashboard-kpi:hover { border-color: var(--dashboard-accent); border-top-color: var(--dashboard-accent); background: #2a2a2a; }
.dashboard-kpi:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dashboard-kpi-label { color: #aeb2b8; }
.dashboard-kpi > strong { color: var(--dashboard-accent); }
.dashboard-kpi > small { color: #c1c4c9; }
.dashboard-kpi-link { color: #9da2a9; border-top: 1px solid rgba(255, 255, 255, .08); }
.dashboard-kpi:hover .dashboard-kpi-link { color: var(--dashboard-accent); }
.dashboard-visual-grid { background: var(--bg); }
.dashboard-visual-card { border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--surface); }
.dashboard-card-heading { padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.dashboard-card-heading h3 { color: #f0f2f4; font-weight: 650; }
.dashboard-card-heading > a { color: #aeb2b8; }
.dashboard-card-heading > a:hover { color: var(--dashboard-accent); }
.dashboard-card-note { color: var(--dashboard-accent); }
.dashboard-ring { background: conic-gradient(var(--dashboard-accent) var(--dashboard-progress), #44474c var(--dashboard-progress)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.dashboard-ring::before { border: 1px solid #4b4e54; background: var(--surface); }
.dashboard-ring-content strong { color: #f5f6f7; }
.dashboard-ring-content small { color: #9da2a9; }
.dashboard-definition-list > div, .dashboard-compact-facts > div { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.dashboard-definition-list > div:last-child, .dashboard-compact-facts > div:last-child { border-bottom: 0; }
.dashboard-definition-list dt, .dashboard-compact-facts dt { color: #aeb2b8; }
.dashboard-definition-list dd, .dashboard-compact-facts dd { color: #eef0f3; }
.dashboard-legend-dot.active, .dashboard-legend-dot.published { background: var(--success); }
.dashboard-legend-dot.paused { background: #747980; }
.dashboard-legend-dot.error, .dashboard-legend-dot.failed { background: var(--red); }
.dashboard-legend-dot.skipped { background: var(--amber); }
.dashboard-card-footer { color: #989da4; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.dashboard-card-footer strong { color: #d7d9dd; }
.dashboard-bar-label > strong, .dashboard-bar-value { color: #eef0f3; }
.dashboard-bar-label > span { color: #9da2a9; }
.dashboard-bar-alert { color: var(--red); }
.dashboard-bar-paused { color: var(--amber); }
.dashboard-bar-track { border: 1px solid #4d5056; border-radius: var(--panel-radius); background: #3b3d41; }
.dashboard-bar-active { background: var(--dashboard-accent); }
.dashboard-bar-inactive { background: #6a6e75; }
.dashboard-empty { color: #989da4; border: 1px dashed #4c4f55; background: rgba(255, 255, 255, .018); }
.dashboard-stack { border: 1px solid #50535a; border-radius: var(--panel-radius); background: #3b3d41; }
.dashboard-stack-empty { width: 100%; background: #3b3d41; }
.dashboard-storage-local_postgresql, .dashboard-storage-swatch.dashboard-storage-local_postgresql { background: #49b7ff; }
.dashboard-storage-postgresql, .dashboard-storage-swatch.dashboard-storage-postgresql { background: #69d59a; }
.dashboard-storage-mysql, .dashboard-storage-swatch.dashboard-storage-mysql { background: #f0c85d; }
.dashboard-storage-legend span { color: #b9bdc2; }
.dashboard-storage-legend strong { color: #f1f2f4; }
.dashboard-storage-legend strong small { color: #8f949b; }
.dashboard-activity-icon { border: 1px solid #56595f; border-radius: var(--control-radius); background: var(--surface-2); }
.dashboard-activity-icon.ok { color: var(--success); border-color: rgba(77, 204, 120, .42); }
.dashboard-activity-icon.error { color: var(--red); border-color: rgba(255, 125, 136, .42); }
.dashboard-activity-icon.amber { color: var(--amber); border-color: rgba(231, 196, 90, .42); }
.dashboard-activity-icon.pending { color: #8f949b; }

/* Panels and summaries */
.panel, .catalog-panel, .history-panel {
  padding: var(--panel-padding);
  border-color: var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: none;
}
.panel:hover { border-color: var(--line); box-shadow: none; }
.panel-heading { margin-bottom: 14px; }
.panel > .panel-heading, .connections-list-panel > .mapping-list-heading,
.catalog-tab-panel > .catalog-subheading {
  align-items: center;
  margin: calc(0px - var(--panel-padding)) calc(0px - var(--panel-padding)) 14px;
  padding: 10px var(--panel-padding);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
h2 { color: var(--teal); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
h3 { color: #edf0f4; font-size: 14px; font-weight: 660; }
.catalog-subheading h3 { color: var(--teal); font-size: 18px; font-weight: 600; }
.catalog-subheading { min-width: 0; flex-wrap: wrap; }
.catalog-tab-panel, .ura-publication-panel > * { min-width: 0; }
.ura-publication-panel { grid-template-columns: minmax(0, 1fr); }
.heading-count { color: #b2b6bc; font-size: .68em; }
.section-copy { color: #bfc2c7; font-size: 11px; }

/* Tabs */
.catalog-section-nav, .connection-type-nav {
  width: auto;
  margin: 0 0 var(--panel-gap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
.catalog-section-links, .connection-type-links {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.catalog-section-button, .connection-type-button {
  min-height: 38px;
  color: #c2c5ca;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  font-size: 12px;
  font-weight: 570;
}
.catalog-section-button:last-child, .connection-type-button:last-child { border-right: 0; }
.catalog-section-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.catalog-tab-icon {
  display: grid;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #fff;
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}
.catalog-tab-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.catalog-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-primary-tab { color: #f1f4f6; background: transparent; font-weight: 650; box-shadow: none; }
.catalog-primary-tab .catalog-tab-icon { color: #7bc8f3; }
.catalog-section-button:not(.active),
.connection-type-nav:not(.admin-section-nav) .connection-type-button:not(.active) { color: #acd7ed; border-right-color: rgba(93, 157, 194, .3); background: rgba(55, 138, 190, .055); }
.catalog-section-button:not(.active) .catalog-tab-icon { color: #8bcdf4; }
.connection-type-nav:not(.admin-section-nav) .connection-type-button:not(.active) small { color: #8fbcd2; }
.catalog-section-button:not(.active):hover,
.connection-type-nav:not(.admin-section-nav) .connection-type-button:not(.active):hover { color: #e5f6ff; background: rgba(74, 168, 232, .13); }
.catalog-section-button:not(.active):hover .catalog-tab-icon { color: #d9f2ff; }
.catalog-section-button:hover, .connection-type-button:hover { color: #fff; background: rgba(255, 255, 255, .085); }
.catalog-section-button:hover .catalog-tab-icon { color: #fff; }
.catalog-section-button.active, .connection-type-button.active {
  color: #fff;
  background: var(--primary);
  box-shadow: none;
}
.catalog-section-button.active .catalog-tab-icon { color: #fff; filter: none; }
.catalog-primary-tab.active { background: var(--primary); box-shadow: none; }
.connection-type-button small { color: #9fa4ab; }
.connection-type-button.active small { color: #e2f2fb; }
.catalog-section-button:focus-visible, .connection-type-button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Fuentes: navegación lateral por tipos configurados y vista general. */
#sourceNavTree[hidden], #sourceNavToggle[hidden], :is(#sourceNavSubmenu, #alarmsNavSubmenu)[hidden],
:is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-item[hidden], #sourceCreateActions[hidden],
#sourceCreateDialog[hidden], #sourceCreateDialog button[hidden], #sourceOverview[hidden],
#sourceOverviewList[hidden], #sourceOverviewEmpty[hidden] { display: none !important; }
#sourceNavTree { min-width: 0; }
#sourceNavTree .sidebar-nav-parent { min-width: 0; }
#sourceNavTree:not(.has-types) .sidebar-nav-parent { grid-template-columns: minmax(0, 1fr); }
#sourceNavTree .sidebar-nav-parent > a { min-width: 0; }
#sourceNavTree:not(.is-collapsed) .sidebar-nav-parent > a:not(.active) { color: #d9e9f3; }
:is(#sourceNavSubmenu, #alarmsNavSubmenu) { position: relative; margin-left: 13px; padding-left: 9px; }
:is(#sourceNavSubmenu, #alarmsNavSubmenu)::before { position: absolute; top: -7px; bottom: 16px; left: 4px; border-left: 1px solid #6389a0; content: ""; pointer-events: none; }
:is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-item { position: relative; }
:is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-item::before { position: absolute; top: 50%; left: -7px; width: 7px; border-top: 1px solid #6389a0; content: ""; pointer-events: none; }
body[data-active-page="fuentes"] #sourceNavTree .sidebar-nav-parent, body[data-active-page="alarmas"] #alarmsNavTree .sidebar-nav-parent { background: var(--primary); }
body[data-active-page="fuentes"] #sourceNavTree .sidebar-nav-parent > a.active, body[data-active-page="alarmas"] #alarmsNavTree .sidebar-nav-parent > a.active { border-color: transparent; background: transparent; box-shadow: none; color: #fff; }
body[data-active-page="fuentes"] #sourceNavTree .sidebar-submenu-toggle, body[data-active-page="alarmas"] #alarmsNavTree .sidebar-submenu-toggle { color: #fff; }
.topbar-nav :is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-item { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 5px; min-height: 32px; padding: 4px 5px; }
:is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-item.client-hidden-for-client { padding-right: 24px; }
:is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-icon { width: 16px; }
.sidebar-submenu-icon { color: #55c2f2; }
.sidebar-submenu-item.active .sidebar-submenu-icon { color: #94d9fa; }
:is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-item strong { min-width: 0; }
:is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-item small { color: inherit; font-size: 10px; font-weight: 500; }
.topbar-nav :is(#sourceNavSubmenu, #alarmsNavSubmenu) .sidebar-submenu-item.active { color: #fff; border-color: transparent; background: #244b62; box-shadow: none; }
.source-overview { margin-bottom: var(--panel-gap); }
.source-overview-heading { margin-bottom: 12px; }
.source-overview-heading .section-copy { margin: 6px 0 0; }
.source-create-actions { flex: 0 0 auto; }
.source-create-dialog-card { width: min(100%, 440px); }
.source-create-dialog-card .modal-copy { margin: 0 0 16px; }
.source-create-options { display: grid; gap: 8px; }
.source-create-options > button { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; padding: 13px; border: 1px solid var(--line-strong); color: var(--text); background: var(--surface-2); text-align: left; cursor: pointer; }
.source-create-options > button:hover, .source-create-options > button:focus-visible { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: -2px; background: var(--surface-3); }
.source-create-option-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #3f83aa; color: #9bd8fa; background: #244b62; font-size: 12px; font-weight: 700; }
.source-create-options strong, .source-create-options small { display: block; }
.source-create-options strong { font-size: 13px; }
.source-create-options small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.source-create-option-arrow { color: var(--teal); font-size: 16px; }
.source-create-dialog-actions { justify-content: flex-end; }
.source-overview-list { border: 1px solid var(--line); }
.source-overview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px; color: var(--text); border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); text-align: left; }
.source-overview-row:last-child { border-bottom: 0; }
.source-overview-row:hover, .source-overview-row:focus-visible { outline: 0; background: var(--surface-3); }
.source-overview-row > span:first-child { min-width: 0; }
.source-overview-row strong, .source-overview-row small { display: block; }
.source-overview-row strong { font-size: 13px; font-weight: 600; }
.source-overview-row small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.source-overview-row-end { flex: 0 0 auto; color: var(--teal); font-size: 11px; }
.source-overview-row-end span { margin-left: 7px; }
.source-overview-empty { padding: 32px 16px; border: 1px dashed var(--line-strong); text-align: center; }
.source-overview-empty p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
#fuentesDeclaradas[hidden], #simulatorWorkspace[hidden], #simulatorSelection[hidden],
#simulatorSelectionEmpty[hidden], #simulatorDetailActions[hidden],
#sourceAddActions[hidden], #sourceSelection[hidden],
#sourceSelectionEmpty[hidden], #sourceDetailActions[hidden],
#storageSelection[hidden], #storageSelectionEmpty[hidden] { display: none !important; }
.opcua-workspace, .storage-workspace { display: flex; min-height: 0; flex-direction: column; gap: var(--panel-gap); }
.panel.opcua-command-bar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px var(--panel-padding); flex: 0 0 auto; background: var(--surface-2); }
.opcua-command-bar h2 { color: var(--blue); }
.microcom-browser.panel { border: 0; }
.microcom-browser { column-gap: calc(var(--panel-gap) - .5px); }
.microcom-hierarchy { border-right: 0; }
.microcom-command-bar .button.create-button { font-size: 11px; }
.panel.opcua-browser { display: grid; min-height: 520px; grid-template-columns: var(--panel-sidebar-width, 196px) minmax(0, 1fr); column-gap: calc(var(--panel-gap) - .5px); padding: 0; flex: 1 1 auto; overflow: hidden; border: 0; background: var(--bg); }
[data-resizable-columns] { --panel-sidebar-width: initial; position: relative; }
.panel-column-resize { position: absolute; z-index: 2; width: 9px; transform: translateX(-50%); cursor: ew-resize; touch-action: none; }
.panel-column-resize[hidden] { display: none !important; }
.panel-column-resize::after { content: ""; position: absolute; inset: 0 2px; }
.panel-column-resize:hover::after, .panel-column-resize:focus-visible::after, .panel-column-resize.is-resizing::after { background: var(--line-strong); }
.panel-column-resize:focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }
body.panel-column-resizing, body.panel-column-resizing * { cursor: ew-resize !important; user-select: none !important; }
body.panel-column-resizing, body.panel-column-resizing main, body.panel-column-resizing .topbar-nav { transition: none; }
.navigation-column-resize { position: fixed; z-index: 21; }
body.sidebar-collapsed > .navigation-column-resize { display: none; }
@media (min-width: 701px) {
  body:not(.sidebar-collapsed) { --sidebar-width: var(--navigation-custom-width, var(--sidebar-expanded-width)); }
}
@media (max-width: 700px) {
  .navigation-column-resize { display: none; }
}
.history-variable-drawer[data-resizable-drawer] { overflow: visible; }
.history-variable-drawer > .panel-column-resize { top: -1px; bottom: -1px; left: calc(100% + 1px + var(--panel-gap) / 2); }
.opcua-hierarchy { display: flex; min-width: 0; min-height: 0; overflow: hidden; padding: 17px 10px; flex-direction: column; background: var(--surface-3); }
.opcua-hierarchy > header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.opcua-hierarchy h3 { margin: 0; color: #fff; }
.opcua-hierarchy > header span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.opcua-search { display: block; margin: 13px 0 10px; }
.opcua-search input { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--control-radius); color: var(--text); background: var(--surface); font-size: 13px; }
.opcua-search input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.variable-folder-hierarchy .folder-create { display: flex; justify-content: space-between; margin-bottom: 10px; flex: 0 0 auto; }
.variables-explorer [hidden], #variableFolderDialog[hidden], #variableFolderDialog [hidden] { display: none !important; }
#variableFolderTree { min-height: 0; overflow: auto; flex: 1 1 auto; }
#variableFolderTree ul { list-style: none; margin: 0; padding: 0; }
.variable-folder-row { display: flex; min-width: 0; min-height: 36px; padding-left: calc(var(--folder-depth, 0) * 12px); border: 1px solid transparent; }
.variable-folder-row.active, .folder-root.active { border-color: var(--primary-hover); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--teal); }
.variable-folder-row:hover, .folder-root:hover { background: var(--surface-hover); }
.variable-folder-row button, .folder-root { border: 0; border-radius: 0; color: #f1f3f5; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.folder-chevron { width: 19px; padding: 0; flex: 0 0 19px; color: var(--muted); }
.folder-chevron:disabled { cursor: default; }
.folder-select { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 5px 0; flex: 1; text-align: left; }
.variable-folder-icon { display: inline-block; width: 14px; height: 12px; flex: 0 0 14px; fill: #d5b14f; stroke: #f7db86; stroke-width: 1.2; vertical-align: middle; }
.folder-select > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-select small { margin-left: auto; padding-left: 3px; color: var(--muted); font-size: 10px; }
.folder-more { width: 24px; padding: 0; flex: 0 0 24px; }
.folder-root { display: flex; width: 100%; min-height: 36px; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid transparent; text-align: left; }
.folder-root small { color: var(--muted); font-size: 10px; }
.variable-folder-menu { display: grid; margin: 2px 0 7px 19px; padding: 4px; border: 1px solid var(--line-strong); background: var(--surface); }
.variable-folder-menu button { padding: 7px; border: 0; color: var(--text); background: transparent; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.variable-folder-menu button:hover { background: var(--surface-hover); }
.variable-folder-menu button[data-folder-action="delete"] { color: var(--red); }
.folder-help, .folder-empty { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.folder-help { flex: 0 0 auto; }
.variable-folder-detail .variable-folder-content { margin-top: 0; }
.variables-explorer .variables-table :is(th, td):first-child { width: 240px; }
.variables-table > tbody > tr[data-variable-id] > td { padding-top: 4px; padding-bottom: 4px; line-height: 1.2; }
.variables-table .table-sub, .variables-table .mapping-table-code { margin-top: 1px; }
.variables-table .row-button { min-height: 24px; padding-top: 3px; padding-bottom: 3px; line-height: 1.2; }
#mappingTable .row-actions:has(> a[href="#fuentes?type=forms"]) { grid-template-columns: max-content; }
#mappingTable a.row-button[href="#fuentes?type=forms"] { display: inline-flex; align-items: center; justify-content: center; padding-right: 5px; padding-left: 5px; color: var(--amber); border-color: var(--amber); background: transparent; text-decoration: none; }
#mappingTable a.row-button[href="#fuentes?type=forms"]:hover { box-shadow: 0 0 8px rgba(228, 192, 76, .3); }
/* A folder containing only form variables needs room for one action. */
.variables-table:has(#mappingTable a[href="#fuentes?type=forms"]):not(:has(#mappingTable .row-actions button)) > thead > tr > th:last-child,
.variables-table:has(#mappingTable a[href="#fuentes?type=forms"]):not(:has(#mappingTable .row-actions button)) > #mappingTable > tr > td:last-child { width: 100px; min-width: 100px; max-width: 100px; padding-right: 7px; padding-left: 7px; }
.variable-folder-children { display: flex; margin-bottom: 10px; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.variable-selection-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex: 0 0 auto; }
.variable-selection-tools label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.variable-name-cell { display: flex; align-items: center; gap: 8px; }
.variable-name-cell > div { min-width: 0; }
.variable-name-cell input, .variable-selection-tools input { width: 13px; height: 13px; min-height: 0; padding: 0; margin: 0; flex: 0 0 13px; accent-color: var(--primary); }
.variable-drag-handle { color: var(--muted); cursor: grab; }
.variable-selected td { background: var(--surface-hover); }
.folder-drop-target { outline: 2px solid var(--teal); outline-offset: -2px; background: var(--surface-hover) !important; }
.folder-dragging [data-folder-drop] { cursor: copy; }
.variable-folder-dialog { width: min(480px, calc(100vw - 32px)); }
.variable-folder-dialog .form-grid { display: grid; gap: 14px; padding: 18px; }
.variable-folder-dialog .wide { grid-column: 1 / -1; }
#variableFolderDialogDescription { margin: 0; color: var(--muted); font-size: 12px; }
#variableFolderDialogDescription:empty, #variableFolderDialogError:empty { display: none; }
#variableFolderDialogError { margin: 0; color: var(--red); font-size: 12px; }
@media (min-width: 701px) {
  body[data-active-page="variables"] .variable-folder-browser { min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body[data-active-page="variables"] .variable-folder-detail { overflow: hidden; }
  body[data-active-page="variables"] .variable-folder-content { display: flex; min-height: 0; overflow: hidden; flex-direction: column; }
  body[data-active-page="variables"] .variable-folder-content > .table-wrap { min-height: 0; overflow: auto; flex: 1 1 auto; }
}
@media (max-width: 700px) {
  #variableFolderTree { max-height: 260px; }
}
.opcua-source-list { display: grid; min-height: 0; align-content: start; overflow-y: auto; gap: 5px; flex: 1 1 auto; }
.opcua-source-item { display: grid; width: 100%; min-height: 54px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--control-radius); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.opcua-source-item:hover { background: var(--surface-hover); }
.opcua-source-item.active { border-color: var(--primary-hover); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--teal); }
.opcua-source-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.opcua-source-item strong, .opcua-source-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcua-source-item strong { overflow: visible; overflow-wrap: anywhere; color: #f1f3f5; font-size: 12px; font-weight: 600; text-overflow: clip; white-space: normal; }
.opcua-source-item small { color: #bec5cb; font-size: 10px; }
.opcua-source-item .source-rail-status.is-active { color: var(--success); }
.opcua-source-item .source-rail-status.is-paused { color: var(--amber); }
#simulatorVariableList .opcua-source-item { display: flex; align-items: stretch; justify-content: center; flex-direction: column; gap: 2px; }
#simulatorVariableList .opcua-source-item :is(strong, small) { flex: 0 0 auto; }
#simulatorVariableList .opcua-source-item small { display: block; min-height: 15px; }
.opcua-list-empty { padding: 23px 10px; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.opcua-detail { display: flex; min-width: 0; min-height: 0; overflow-y: auto; flex-direction: column; background: var(--bg); }
.opcua-selection-empty { display: grid; min-height: 100%; place-content: center; justify-items: center; padding: 35px; flex: 1 1 auto; background: var(--surface); text-align: center; }
.opcua-selection-empty h3 { margin: 0; color: var(--text); }
.opcua-selection-empty p { max-width: 380px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.opcua-detail :is(#sourceSelection, #storageSelection, #simulatorSelection):not([hidden]) { display: flex; flex: 1 1 auto; flex-direction: column; }
.opcua-detail-heading { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: var(--panel-gap); padding: 7px 14px; flex: 0 0 auto; background: var(--surface-3); }
.opcua-detail-identity { min-width: 0; }
.opcua-detail-identity h3 { margin: 0 0 1px; overflow-wrap: anywhere; color: #fff; font-size: 18px; }
.opcua-detail-identity p { margin: 0; font-size: 11px; }
.opcua-detail-heading .row-actions { flex: 0 0 auto; flex-wrap: wrap; }
.opcua-detail-body { padding: 18px; background: var(--surface); }
.opcua-variables-section { margin-top: var(--panel-gap); padding: 18px; flex: 1 1 auto; background: var(--surface); }
.opcua-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; gap: 0 22px; }
.opcua-facts > div { min-width: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.opcua-facts dt { color: var(--muted); font-size: 10px; }
.opcua-facts dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: 12px; }
.simulator-workspace .opcua-variables-section { overflow-y: auto; }
.simulator-workspace .opcua-variables-section > .opcua-facts { flex: 0 0 auto; }
.simulator-trend-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 10px; flex: 0 0 auto; flex-wrap: wrap; }
.simulator-trend-heading h5 { margin: 0; color: var(--text); font-size: 13px; }
.simulator-trend-periods { display: flex; gap: 4px; flex-wrap: wrap; }
.simulator-trend-periods .row-button { min-width: 44px; }
.simulator-trend-periods .row-button[aria-pressed="true"] { color: var(--teal); border-color: var(--primary-hover); background: var(--surface-2); }
.simulator-trend-plot { position: relative; min-width: 0; min-height: 200px; border: 1px solid var(--line); background: var(--surface-2); flex: 1 0 200px; }
.simulator-trend-plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.simulator-trend-plot p { position: absolute; inset: 0; display: grid; margin: 0; padding: 16px; place-items: center; color: var(--muted); font-size: 12px; text-align: center; }
.simulator-trend-plot p[hidden] { display: none; }
.simulator-trend-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.simulator-trend-axis { fill: var(--muted); font-size: 10px; }
.simulator-trend-area { fill: rgba(73, 183, 255, .12); }
.simulator-trend-line { fill: none; stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
.simulator-trend-point { fill: var(--teal); }
.opcua-variables-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.opcua-variables-heading h4 { margin: 0; color: var(--text); font-size: 13px; }
.opcua-variable-table-wrap { min-width: 0; }
.opcua-variable-table-wrap table { min-width: 770px; }
.opcua-variable-table-wrap th:nth-child(1) { width: 21%; }
.opcua-variable-table-wrap th:nth-child(2) { width: 32%; }
.opcua-variable-table-wrap th:nth-child(3) { width: 9%; }
.opcua-variable-table-wrap th:nth-child(4) { width: 14%; }
.opcua-variable-table-wrap th:nth-child(5) { width: 11%; }
.opcua-variable-table-wrap th:nth-child(6) { width: 13%; white-space: nowrap; }
.history-sparkline { width: 116px; min-width: 116px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.history-sparkline svg { display: block; width: 116px; height: 26px; overflow: visible; fill: var(--teal); stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.history-sparkline svg path { fill: none; }
.opcua-variable-table-wrap .mapping-table-code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcua-variable-table-wrap .table-sub { max-width: none; }
.storage-related-table-wrap th:nth-child(1) { width: 32%; }
.storage-related-table-wrap th:nth-child(2) { width: 15%; }
.storage-related-table-wrap th:nth-child(3) { width: 15%; }
.storage-related-table-wrap th:nth-child(4) { width: 23%; }
.storage-footnote { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
@media (min-width: 701px) {
  body[data-active-page="fuentes"] #fuentesDeclaradas > .opcua-browser,
  body[data-active-page="fuentes"] #simulatorWorkspace > .opcua-browser,
  body[data-active-page="almacenamientos"] #almacenamientosDeclarados > .opcua-browser { min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body[data-active-page="fuentes"] .opcua-detail,
  body[data-active-page="fuentes"] #sourceSelection:not([hidden]),
  body[data-active-page="fuentes"] #simulatorSelection:not([hidden]),
  body[data-active-page="almacenamientos"] .opcua-detail,
  body[data-active-page="almacenamientos"] #storageSelection:not([hidden]) { min-height: 0; overflow: hidden; }
  body:is([data-active-page="fuentes"], [data-active-page="almacenamientos"]) .opcua-detail-body { flex: 0 0 auto; }
  body:is([data-active-page="fuentes"], [data-active-page="almacenamientos"]) .opcua-variables-section { display: flex; min-height: 0; overflow: hidden; flex: 1 1 auto; flex-direction: column; }
  body[data-active-page="fuentes"] .simulator-workspace .opcua-variables-section { overflow-y: auto; }
  body:is([data-active-page="fuentes"], [data-active-page="almacenamientos"]) .opcua-variables-heading,
  body[data-active-page="almacenamientos"] .storage-footnote { flex: 0 0 auto; }
  body:is([data-active-page="fuentes"], [data-active-page="almacenamientos"]) .opcua-variable-table-wrap { min-height: 0; overflow: auto; flex: 1 1 auto; }
}
@media (max-width: 1050px) {
  .panel.opcua-browser { grid-template-columns: var(--panel-sidebar-width, 168px) minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .panel.opcua-browser { display: block; min-height: 0; overflow: visible; }
  .opcua-hierarchy { overflow: visible; }
  .opcua-source-list { display: flex; overflow-x: auto; }
  .opcua-source-item { min-width: 155px; }
  .opcua-detail { overflow: visible; margin-top: var(--panel-gap); }
  .opcua-detail-heading { align-items: flex-start; flex-wrap: wrap; }
  .opcua-facts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .microcom-browser { row-gap: var(--panel-gap); }
  .microcom-hierarchy { border-bottom: 0; }
}
@media (max-width: 520px) {
  .source-overview-heading { align-items: stretch; flex-direction: column; }
  .source-create-actions, .source-create-actions .button { width: 100%; }
}
.admin-section-button.admin-global-tab { color: #dfca75; background: rgba(217, 181, 68, .045); }
.admin-section-button.admin-global-tab:hover { color: #fff0a8; background: rgba(217, 181, 68, .13); }
.admin-section-button.admin-global-tab.active { color: #fff3b2; background: #49412b; box-shadow: inset 0 -2px 0 #e3bc4f; }
.admin-section-button.admin-global-tab:focus-visible { outline-color: #e3bc4f; }
.admin-section-button.admin-global-tab.admin-pia-tab { color: #d7b5ff; background: rgba(155, 97, 214, .08); }
.admin-section-button.admin-global-tab.admin-pia-tab:hover { color: #f0deff; background: rgba(155, 97, 214, .16); }
.admin-section-button.admin-global-tab.admin-pia-tab.active { color: #f5e8ff; background: #463255; box-shadow: inset 0 -2px 0 #b779ea; }
.admin-section-button.admin-global-tab.admin-pia-tab:focus-visible { outline-color: #b779ea; }
#adminPanelTitle.hipalux-ia-title { color: #ead6ff; text-shadow: 0 0 14px rgba(183, 121, 234, .2); }
.admin-section-button.admin-people-tab { color: #dfca75; background: rgba(217, 181, 68, .045); }
.admin-section-button.admin-people-tab:hover { color: #fff0a8; background: rgba(217, 181, 68, .13); }
.admin-section-button.admin-people-tab.active { color: #fff3b2; background: #49412b; box-shadow: inset 0 -2px 0 #e3bc4f; }
.admin-section-button.admin-people-tab:focus-visible { outline-color: #e3bc4f; }
.admin-section-button.admin-client-scope-tab { color: #9bd8f7; background: rgba(74, 168, 232, .055); }
.admin-section-button.admin-client-scope-tab:hover { color: #e2f5ff; background: rgba(74, 168, 232, .14); }
.admin-section-button.admin-client-scope-tab.active { color: #f2faff; background: #29475a; box-shadow: inset 0 -2px 0 #63b9eb; }
.admin-section-button.admin-client-scope-tab:focus-visible { outline-color: #69bdf4; }
#adminPanelTitle.admin-yellow-title { color: #ffe69a; text-shadow: 0 0 14px rgba(227, 188, 79, .18); }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .connections-toolbar { border-color: #6f6131; background: #302e25; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .connections-toolbar .field > span { color: #eadc9c; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .connections-toolbar :is(input, select) { border-color: #675d39; background-color: #25241f; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .connections-toolbar :is(input, select):focus { border-color: #d5ad3e; box-shadow: 0 0 0 3px rgba(227, 188, 79, .12); }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .connections-toolbar > .button.secondary { color: #f4e7ae; border-color: #806c32; background: #403a27; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .connections-toolbar > .button.secondary:hover { color: #fff5c7; border-color: #d5ad3e; background: #51482c; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .admin-table-wrap { --table-frame-color: #6f6131; border-color: #6f6131; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .admin-table-wrap thead { background: #302e25; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .admin-table-wrap th { color: #f1e5ad; border-bottom-color: #75683d; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .admin-table-wrap thead th:not(:last-child)::after { background: #6d613a; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .admin-table-wrap thead tr:first-child th.sorted { color: #ffe188; }
#administracion.admin-yellow-theme .table-filter-trigger.is-active { color: #ffe188; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .table-sort:hover,
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .table-sort.active { color: #ffe188; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .table-sort:hover .sort-indicator,
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .table-sort.active .sort-indicator { color: #e3bc4f; }
#administracion.admin-yellow-theme .mapping-list-actions .button.primary { color: #211b0c; border-color: #d0a632; background: #e3bc4f; }
#administracion.admin-yellow-theme .mapping-list-actions .button.primary:hover { color: #171205; border-color: #f0cf6a; background: #f0ca5d; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .row-button[class*="edit-"] { color: #70bfee; border-color: #3f83aa; background: transparent; }
#administracion.admin-yellow-theme .admin-tab-panel:not([hidden]) .row-button[class*="edit-"]:hover { color: #42bfff; border-color: #72d0ff; background: transparent; box-shadow: 0 0 8px rgba(74, 168, 232, .32); }

.admin-pia-panel .admin-ai-effective-config { border-color: #73508e; background: #2b2730; }
.admin-pia-panel .admin-ai-effective-config > header > span { color: #ead6ff; border-color: #9568b8; background: #3a2c45; }
.admin-pia-panel .admin-ai-effective-config strong { color: #ead6ff; }
.admin-pia-panel .admin-ai-effective-config .history-ai-model-table-wrap { border-color: #604970; }
.admin-pia-panel .admin-ai-effective-config .button.primary { border-color: #9b65c4; background: #704493; }
.admin-pia-panel .admin-ai-effective-config .button.primary:hover { background: #8253a6; }
body[data-active-page^="ura-"] .topbar,
body[data-active-page="fuentes"] .topbar,
body[data-active-page="administracion"] .topbar { box-shadow: none; }
body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) .catalog-section-nav {
  top: calc(var(--topbar-height) + 2 * var(--panel-gap));
  width: auto;
  margin: 0 0 var(--panel-gap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  outline: var(--panel-gap) solid var(--bg);
}
body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) .catalog-section-links {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Filters and form controls */
.history-toolbar, .catalog-panel .history-toolbar, .connections-toolbar {
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface-2);
  box-shadow: none;
}
.field > span, .catalog-panel .history-toolbar .field > span, .mapping-form-section .field > span {
  margin-bottom: 6px;
  color: #e0e2e5;
  font-size: 10px;
  font-weight: 610;
  letter-spacing: .025em;
}
.field em { color: #a5a9b0; }
input, select, .opcua-selection-card, .file-picker {
  min-height: 38px;
  color: #f2f3f5;
  border-color: var(--line-strong);
  border-radius: var(--control-radius);
  background: #202020;
  box-shadow: none;
}
input, select { max-width: 100%; padding: 9px 11px; font-size: 12px; }
.field select { width: 100%; }
input::placeholder { color: #999da5; }
input:hover, select:hover { border-color: #71747b; }
input:focus, select:focus, .file-picker:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(105, 189, 244, .16), inset 0 1px 0 rgba(255, 255, 255, .04);
}
input:disabled, input[readonly] { color: #afb3b9; background: #313236; border-color: #4a4d52; opacity: .86; }
.field-help { color: #afb3ba; font-size: 9px; }
.switch-label { color: #c9ccd1; }
.form-actions { flex-wrap: wrap; }
.form-note { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.form-actions > .form-note { flex: 1 1 220px; }
.form-actions .button-group { max-width: 100%; flex-wrap: wrap; margin-left: auto; }

.catalog-panel .clear-catalog-filters, .clear-catalog-filters, .history-toolbar > .button.secondary, .connections-toolbar > .button.secondary {
  color: #e4e6e9;
  border-color: #5a5d63;
  background: #303236;
}
.catalog-panel .clear-catalog-filters:hover, .clear-catalog-filters:hover, .history-toolbar > .button.secondary:hover, .connections-toolbar > .button.secondary:hover {
  color: #fff;
  border-color: #76bde9;
  background: #414449;
  box-shadow: 0 0 0 2px rgba(74, 168, 232, .1), 0 7px 18px rgba(0, 0, 0, .16);
}

/* Buttons */
.button {
  min-height: 38px;
  border-radius: var(--control-radius);
  font-size: 11px;
  font-weight: 680;
  box-shadow: none;
}
.button.primary { color: #fff; border-color: #2584bd; background: var(--primary); box-shadow: none; }
.button.primary:hover { color: #fff; border-color: #4ea7dc; background: var(--primary-hover); box-shadow: none; transform: none; }
.button.create-button {
  min-height: 34px;
  color: #fff;
  border-color: #2584bd;
  background: var(--primary);
  box-shadow: none;
}
.button.create-button:hover { color: #fff; border-color: #4ea7dc; background: var(--primary-hover); box-shadow: none; }
.button.secondary { color: #f0f1f3; border-color: var(--line-strong); background: var(--surface-3); }
.button.secondary:hover { color: #fff; border-color: #797d85; background: #53565c; }
.button.ghost { color: #d2d4d8; border-color: #55585e; background: #303236; box-shadow: none; }
.button.ghost:hover { color: #fff; border-color: #73767d; background: #414348; }
.button:focus-visible, .icon-button:focus-visible, .nav-toggle:focus-visible, .row-button:focus-visible, .node-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.switch { background: #585b61; }
.switch::after { background: #c3c6ca; }
.switch-label input:checked + .switch { background: var(--primary); box-shadow: 0 0 0 3px rgba(74, 168, 232, .11); }
.switch-label input:checked + .switch::after { background: #fff; }
.admin-status-toggle { border-color: #55585e; background: #292a2e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.admin-status-toggle:hover { border-color: #71747b; }

/* Tables */
.table-wrap { --table-frame-color: var(--line); border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--surface); }
.table-actions-frame { border-color: transparent; background: var(--surface); }
table { color: #eef0f2; }
thead {
  background: var(--surface-2);
  box-shadow: none;
}
th {
  position: relative;
  padding: 10px 12px;
  color: #eef0f3;
  border-bottom-color: #70747b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .025em;
}
thead tr:first-child th { padding: 7px 10px; }
thead th:not(:last-child)::after {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 8px;
  width: 1px;
  background: #70747b;
  content: "";
}
td { padding: 12px; border-bottom-color: var(--line); font-size: 11px; }
tbody tr { transition: background .16s ease; }
tbody tr:nth-child(odd) { background: var(--surface); }
tbody tr:nth-child(even) { background: #2d2d2d; }
tbody tr:hover { background: var(--surface-3); }
table { --table-heading-background: var(--surface-2); }
#administracion.admin-yellow-theme .admin-table-wrap table { --table-heading-background: #302e25; }
.history-ai-model-table { --table-heading-background: #24272b; }
.table-first-column-pinned > thead > tr > th:first-child,
.table-has-actions > thead > tr > th:last-child { background: var(--table-heading-background); }
.table-first-column-pinned > tbody > tr > td:first-child:not([colspan]),
.table-has-actions > tbody > tr > td:last-child:not([colspan]) { background: inherit; }
.table-first-column-pinned > thead > tr > th:first-child::before,
.table-first-column-pinned > tbody > tr > td:first-child:not([colspan])::before { background: #5b5e64; }
.table-has-actions > thead > tr > th:last-child::before,
.table-has-actions > tbody > tr > td:last-child:not([colspan])::before { background: var(--surface); }
.table-column-pin { color: #a4aab2; }
.table-column-pin:hover { color: #ecf6ff; border-color: #707780; background: #41464e; }
.table-column-pin[aria-pressed="true"] { color: #83c9f3; }
.table-column-pin:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.table-main { color: #f4f5f6; font-weight: 630; }
.table-sub { color: #b3b7bd; }
.frequency { color: #c2c5ca; }
.table-sort:hover, .table-sort.active { color: #83c9f3; }
.table-sort:focus-visible { border-radius: 2px; outline: 2px solid var(--focus); outline-offset: 2px; }
.sort-indicator { color: #8a9098; }
.table-sort:hover .sort-indicator, .table-sort.active .sort-indicator { color: #67b8eb; }
thead tr:first-child th.sorted { color: #8ed1fa; }
.table-filter-trigger { color: #a4aab2; background: transparent; }
.table-filter-trigger:hover, .table-filter-trigger[aria-expanded="true"] { color: #ecf6ff; border-color: #707780; background: #41464e; }
.table-filter-trigger.is-active { color: #f1d36f; border-color: transparent; background: transparent; }
.table-filter-trigger.is-active svg { fill: #f1d36f; fill-opacity: .2; }
.table-filter-trigger.is-active:hover, .table-filter-trigger.is-active[aria-expanded="true"] { border-color: #707780; background: #41464e; }
.table-filter-trigger:focus-visible, .table-filter-dismiss:focus-visible, .table-filter-remove:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.table-filter-popover { color: #edf0f4; border-color: #626870; background: #2c2e32; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.table-filter-popover-heading, .table-filter-actions { border-color: #474c54; }
.table-filter-popover-heading span, .table-filter-help { color: #b2b9c3; }
.table-filter-popover-heading h3 { color: #f5f7fa; }
.table-filter-dismiss, .table-filter-remove { color: #c6cdd6; background: transparent; }
.table-filter-dismiss:hover, .table-filter-remove:hover:not(:disabled) { color: #fff; background: #40454d; }
.table-filter-remove:disabled { color: #7e858f; cursor: default; }
.table-filter-popup-field > span { color: #d5dae1; }
.table-filter-popover .table-filter-draft { color: #f4f6f9; border: 1px solid #626873; background: #202226; box-shadow: none; }
.table-filter-popover .table-filter-draft:focus { border-color: #67bdf0; outline: 2px solid rgba(74, 168, 232, .22); outline-offset: 1px; }
.table-filter-error { color: #ffaaa6; }
.table-filter-clear.button.secondary { width: 28px; height: 28px; min-height: 28px; padding: 3px; color: #aeb4bb; border-color: transparent; border-radius: 3px; background: transparent; }
.table-filter-clear.button.secondary:hover:not(:disabled) { color: #eaf8ff; border-color: #67bdf0; background: #3b4349; box-shadow: none; }
.table-filter-clear:disabled { visibility: hidden; }
.table-filter-clear-funnel { stroke: #f1d36f; }
.table-filter-clear-x { stroke: #ed6a72; }
.table-filter-clear:hover .table-filter-clear-funnel, .table-filter-remove:hover:not(:disabled) .table-filter-clear-funnel { stroke: #ffe188; }
.table-filter-clear:hover .table-filter-clear-x, .table-filter-remove:hover:not(:disabled) .table-filter-clear-x { stroke: #ff9aa3; }
.table-filter-remove:disabled .table-filter-clear-funnel { stroke: #8a7a45; }
.table-filter-remove:disabled .table-filter-clear-x { stroke: #9d555b; }
.table-filter-clear > .table-filter-clear-count { color: #f1d36f; border: 1px solid #6c5b2e; background: #403a27; }
.catalog-id { color: #71beed; }
.catalog-table-wrap td:first-child .table-main { color: #f4f5f6; }
.catalog-table-wrap td:nth-child(n+2):nth-child(-n+5) :is(.table-main, .catalog-id) { color: #c8cbd0; }
table[data-reference-table="points"] td:first-child { color: #f4f5f6; font-weight: 630; }
table[data-reference-table="points"] td:nth-child(n+2):nth-child(-n+5) { color: #c8cbd0; }
table[data-reference-table="points"] td:nth-child(n+2):nth-child(-n+5) > .table-main { color: #c8cbd0; }
.table-status:not(.off) { color: var(--success); }
.table-status.warning { color: #f1d36f; }
.table-status.error { color: #ff9aa3; }
.table-status.success { color: #67df96; }
.table-status.info { color: var(--blue); }
.table-status.accent { color: #c5a8ff; }
.status-dot { box-shadow: 0 0 0 3px rgba(77, 204, 120, .1); }
.table-status.warning .status-dot { box-shadow: 0 0 0 3px rgba(241, 211, 111, .1); }
.table-status.error .status-dot { box-shadow: 0 0 0 3px rgba(255, 125, 136, .1); }
.table-status.info .status-dot { box-shadow: 0 0 0 3px rgba(74, 168, 232, .1); }
.table-status.accent .status-dot { box-shadow: 0 0 0 3px rgba(197, 168, 255, .1); }
.row-actions { gap: 3px; }
.row-button { padding: 6px 8px; color: #dfc767; border: 1px solid #8f7b3d; border-radius: var(--control-radius); background: transparent; box-shadow: none; white-space: nowrap; transition: color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.row-button.test-storage, .row-button.prepare-storage { padding-right: 4px; padding-left: 4px; color: #dfc767; border-color: #8f7b3d; background: transparent; white-space: nowrap; }
.row-button.test-storage:hover, .row-button.prepare-storage:hover { color: #f4d24b; border-color: #e8c94f; background: transparent; box-shadow: 0 0 8px rgba(244, 210, 75, .3); }
.button.test-ura-broker { min-height: 30px; padding-right: 10px; padding-left: 10px; color: #dfc767; border-color: #8f7b3d; background: transparent; }
.button.test-ura-broker:hover:not(:disabled) { color: #f4d24b; border-color: #e8c94f; background: transparent; box-shadow: 0 0 8px rgba(244, 210, 75, .3); }
.storage-backend-badge { color: #cbd0d6; border-color: #62666d; background: #3b3e43; }
.storage-backend-badge.backend-local_postgresql { color: #7ce19b; border-color: rgba(77, 204, 120, .34); background: rgba(77, 204, 120, .09); }
.storage-backend-badge.backend-postgresql { color: #85cef7; border-color: rgba(74, 168, 232, .36); background: rgba(74, 168, 232, .1); }
.storage-backend-badge.backend-mysql { color: #e3c583; border-color: rgba(227, 197, 131, .34); background: rgba(227, 197, 131, .09); }
.row-button:hover { color: #f4d24b; border-color: #e8c94f; background: transparent; box-shadow: 0 0 8px rgba(244, 210, 75, .3); }
.row-button[class*="edit-"] { color: #70bfee; border-color: #3f83aa; background: transparent; }
.row-button[class*="edit-"]:hover { color: #42bfff; border-color: #72d0ff; background: transparent; box-shadow: 0 0 8px rgba(74, 168, 232, .32); }
.row-button.delete { color: #ff9aa3; border-color: #a94d58; background: transparent; }
.row-button.delete:hover { color: #ff6673; border-color: #ff858f; background: transparent; box-shadow: 0 0 8px rgba(255, 125, 136, .34); }
.table-empty { color: #b7bbc1; }

/* Modals */
.modal-backdrop, .auth-gate, .history-toolbar-popover { background: rgba(0, 0, 0, .62); backdrop-filter: none; }
/* Native PDF viewers must not share a backdrop-filter compositing layer. */
#historyAIReportDialog.modal-backdrop { background: rgba(0, 0, 0, .74); backdrop-filter: none; }
.modal-card, .auth-card, .history-toolbar-popover-card {
  border-color: var(--line-strong);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: var(--shadow-elevated);
}
.modal-card, .history-toolbar-popover-card { overflow-x: hidden; padding: var(--modal-padding); }
.modal-heading, .history-popover-heading {
  align-items: center;
  margin: calc(0px - var(--modal-padding)) calc(0px - var(--modal-padding)) 18px;
  padding: 12px var(--modal-padding);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.modal-copy { color: #c0c3c8; }
.modal-close { color: #d1d4d8; background: #3d3f44; }
.modal-close:hover { color: #fff; border-color: #777a81; background: #505258; transform: none; }

.variable-bulk-actions { gap: 6px; }
.variable-file-button { min-height: 34px; padding: 7px 11px; }
.variable-file-icon { color: #8fd0f6; font-size: 14px; font-weight: 800; line-height: 1; }
.variable-import-card {
  display: flex;
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  max-height: min(820px, calc(100dvh - 28px));
  flex-direction: column;
  padding-bottom: 0;
}
.variable-import-heading { flex: 0 0 auto; }
.variable-import-kicker {
  display: block;
  margin-bottom: 2px;
  color: #7dc7f2;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
}
.variable-import-file {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: #2d2e31;
}
.variable-import-file-mark {
  display: grid;
  width: 42px;
  height: 34px;
  place-items: center;
  color: #8ee0aa;
  border: 1px solid #397b50;
  background: #20372a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}
.variable-import-file > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.variable-import-file strong { overflow: hidden; color: #f5f6f7; text-overflow: ellipsis; white-space: nowrap; }
.variable-import-file small { margin-top: 2px; color: #afb3ba; font-size: 10px; }
.variable-import-file .button { min-height: 30px; padding: 5px 10px; }
.variable-import-summary {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 12px;
}
.variable-import-summary article {
  display: grid;
  min-height: 70px;
  align-content: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: #202020;
}
.variable-import-summary span { color: #b8bcc2; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.variable-import-summary strong { margin: 1px 0; color: #f4f5f6; font-size: 22px; line-height: 1.1; }
.variable-import-summary small { color: #9398a0; font-size: 9px; }
.variable-import-summary .new strong { color: #62dc88; }
.variable-import-summary .changed strong { color: #75c8f4; }
.variable-import-summary .errors strong { color: #ff969f; }
.variable-import-overwrite {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  margin-bottom: 8px;
  padding: 9px 12px;
  border: 1px solid #595c62;
  background: #303135;
}
.variable-import-overwrite .switch-label { display: flex; min-width: 0; align-items: center; gap: 10px; }
.variable-import-overwrite .switch-label > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.variable-import-overwrite strong { color: #f1f2f4; font-size: 11px; }
.variable-import-overwrite small { margin-top: 2px; color: #b7bbc1; font-size: 9px; }
.variable-import-overwrite-warning { max-width: 290px; color: #e5c868; font-size: 9px; text-align: right; }
.variable-import-safety {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 8px 11px;
  color: #c8cbd0;
  border: 1px solid #3d6749;
  background: #233028;
}
.variable-import-safety > span { display: grid; width: 19px; height: 19px; place-items: center; color: #62dc88; border: 1px solid #45885a; font-size: 11px; }
.variable-import-safety p { margin: 0; font-size: 10px; }
.variable-import-safety strong { color: #dcf6e4; }
.variable-import-results {
  min-height: 150px;
  flex: 1 1 auto;
  overflow: auto;
  border: 1px solid var(--line);
  background: #242424;
}
.variable-import-results table { min-width: 760px; }
.variable-import-results thead { position: sticky; z-index: 1; top: 0; }
.variable-import-results th:first-child, .variable-import-results td:first-child { width: 54px; text-align: center; }
.variable-import-results th:nth-child(2), .variable-import-results td:nth-child(2) { width: 118px; }
.variable-import-results th:nth-child(3), .variable-import-results td:nth-child(3) { width: 265px; }
.variable-import-results td { padding: 9px 10px; }
.variable-import-status { display: inline-flex; padding: 3px 7px; border: 1px solid #60636a; color: #d0d3d7; background: #36383c; font-size: 9px; font-weight: 700; }
.variable-import-status.new { color: #83e69f; border-color: #39764b; background: #24362a; }
.variable-import-status.changed { color: #8fd2f7; border-color: #39779c; background: #24343e; }
.variable-import-status.error { color: #ffa4ac; border-color: #854b52; background: #3d282b; }
.variable-import-detail { color: #c3c6cb; font-size: 10px; line-height: 1.45; }
.variable-import-row-error td { background: rgba(116, 43, 50, .1); }
.variable-import-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 12px calc(0px - var(--modal-padding)) 0;
  padding: 12px var(--modal-padding);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.variable-import-footer > span { color: #b7bbc1; font-size: 10px; }
.variable-import-footer .button-group { flex: 0 0 auto; }

.mapping-modal-card #mappingEditorTitle { color: #8bcdf4; }
.mapping-form-section {
  min-width: 0;
  border-color: var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface-2);
  box-shadow: none;
}
.mapping-section-heading { padding-bottom: 10px; border-bottom: 1px solid #505258; }
.mapping-section-heading p { color: #b5b9bf; }
.mapping-form-section>* { min-width: 0; }

.mapping-enabled-field { border-color: #55585e; background: #2b2c30; }
.mapping-form-section input[readonly] { color: #c2c5ca; border-color: #505359; background: #2b2c30; }

.opcua-selection-card { border-color: #55585e; background: #292a2e; }
.opcua-selection-card.selected { border-color: #5db3e7; box-shadow: 0 0 0 3px rgba(74, 168, 232, .12); }
.selection-icon { color: #8acdf5; background: #3c464d; }
.selection-details code { color: #84caf3; }

.auth-card { position: relative; overflow: hidden; width: min(100%, 440px); padding: 38px; }
.auth-card::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--primary); content: ""; }

.auth-card h1 { color: #f7f8fa; }
.auth-copy { color: #c0c3c8; }

/* Seguridad TOTP */
.session-security { display: inline-flex; min-height: 31px; align-items: center; gap: 6px; padding: 0 9px; font-size: 9px; }
.session-security svg { width: 14px; height: 14px; fill: none; stroke: #9bd7b0; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.button.danger { color: #ffc4ca; border: 1px solid #82444c; background: #3a2428; }
.button.danger:hover { color: #fff; border-color: #b85b66; background: #512b31; }

.auth-card:has(.auth-mfa-step:not([hidden])) { width: min(100%, 560px); }
.auth-mfa-step { margin: 3px 0 12px; padding: 13px; border: 1px solid #55585e; background: #202124; }
.auth-mfa-step[hidden], .auth-mfa-setup[hidden] { display: none; }
.auth-mfa-heading { display: flex; align-items: center; gap: 11px; }
.auth-mfa-heading > div { display: grid; gap: 2px; }
.auth-mfa-heading strong { color: #f1f2f4; font-size: 12px; }
.auth-mfa-heading small { color: #aeb2b8; font-size: 9px; line-height: 1.45; }
.auth-mfa-icon, .mfa-security-shield { display: grid; flex: 0 0 auto; place-items: center; color: #8fe0aa; border: 1px solid #4e6756; background: #26342b; }
.auth-mfa-icon { width: 34px; height: 34px; }
.auth-mfa-icon svg, .mfa-security-shield svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.auth-mfa-setup { display: grid; grid-template-columns: 154px minmax(0, 1fr); align-items: center; gap: 13px; margin: 13px 0; }
.auth-mfa-step > .field { margin: 13px 0 0; }

.mfa-qr { display: grid; min-width: 0; place-items: center; padding: 8px; border: 1px solid #676a70; background: #fff; }
.mfa-qr svg { display: block; width: 100%; max-width: 190px; height: auto; }
.mfa-manual { min-width: 0; padding: 10px; border: 1px solid #51545a; background: #27282b; }
.mfa-manual span, .mfa-manual code { display: block; }
.mfa-manual span { margin-bottom: 5px; color: #9da2a9; font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.mfa-manual code { overflow-wrap: anywhere; color: #f2f3f5; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; line-height: 1.7; }

.mfa-security-card { width: min(680px, calc(100vw - 28px)); }
.mfa-security-summary { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid #55585e; background: #2b2c30; }
.mfa-security-shield { width: 46px; height: 46px; }
.mfa-security-shield svg { width: 25px; height: 25px; }
.mfa-security-summary strong { display: block; color: #f5f6f7; font-size: 13px; }
.mfa-security-summary p { margin: 4px 0 0; color: #adb1b7; font-size: 9px; line-height: 1.45; }
.mfa-state-badge { min-width: 72px; padding: 5px 8px; color: #c5c8cd; border: 1px solid #5a5d63; background: #383a3e; font-size: 8px; font-weight: 750; letter-spacing: .07em; text-align: center; text-transform: uppercase; }
.mfa-state-badge.enabled { color: #8ee7aa; border-color: #3f7650; background: #23352a; }
.mfa-state-badge.required { color: #f3d577; border-color: #75652e; background: #3a3421; }
.mfa-security-panel { margin-top: 10px; padding: 14px; border: 1px solid #4e5157; background: #232427; }
.mfa-security-panel[hidden] { display: none; }
.mfa-security-panel > p { margin: 0; color: #bdc0c5; font-size: 10px; line-height: 1.6; }
.mfa-enrollment-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 18px; }
.mfa-enrollment-copy h3 { margin: 0 0 5px; color: #f1f2f4; font-size: 12px; }
.mfa-enrollment-copy h3:not(:first-child) { margin-top: 15px; }
.mfa-enrollment-copy > p { margin: 0 0 10px; color: #afb3b9; font-size: 9px; line-height: 1.5; }
.mfa-enrollment-copy .field { margin: 0; }
.mfa-facts { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; border: 1px solid #4e5157; }
.mfa-facts > div { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.mfa-facts > div + div { border-left: 1px solid #4e5157; }
.mfa-facts span { color: #aeb2b8; font-size: 9px; }
.mfa-facts strong { color: #eef0f2; font-size: 12px; }
.mfa-enabled-actions { gap: 8px; }
.mfa-required-note { margin-top: 11px !important; padding: 9px 10px; color: #ecd577 !important; border: 1px solid #6c5e2d; background: #342f20; }

.mfa-recovery-backdrop { z-index: 40; }
.mfa-recovery-card { width: min(590px, calc(100vw - 28px)); }
.mfa-recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 16px 0 11px; padding: 10px; border: 1px solid #55585e; background: #1f2022; }
.mfa-recovery-grid code { padding: 7px 9px; color: #eff1f3; border: 1px solid #484b50; background: #2b2c30; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-align: center; }
.mfa-recovery-tools { display: flex; gap: 7px; }
.mfa-recovery-confirm { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: #d2d4d8; font-size: 10px; cursor: pointer; }
.mfa-recovery-confirm input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: #168a4a; }

@media (max-width: 700px) {
  .session-security span { display: none; }
  .session-security { width: 34px; justify-content: center; padding: 0; }
  .auth-mfa-setup, .mfa-enrollment-grid { grid-template-columns: 1fr; }
  .auth-mfa-setup .mfa-qr { width: 154px; justify-self: center; }
  .mfa-enrollment-grid > .mfa-qr { width: min(220px, 100%); justify-self: center; }
  .mfa-security-summary { grid-template-columns: 40px minmax(0, 1fr); }
  .mfa-security-shield { width: 40px; height: 40px; }
  .mfa-state-badge { grid-column: 1 / -1; justify-self: stretch; }
  .mfa-facts { grid-template-columns: 1fr; }
  .mfa-facts > div + div { border-top: 1px solid #4e5157; border-left: 0; }
  .mfa-enabled-actions, .mfa-recovery-tools { align-items: stretch; flex-direction: column; }
  .mfa-recovery-grid { grid-template-columns: 1fr; }
}

/* Secondary components */
.history-chart-card {
  border-color: var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface-2);
  box-shadow: none;
}
.history-chart-wrap { margin-top: 0; border-color: var(--line); border-radius: var(--panel-radius); background: var(--history-plot-background); }
.history-chart-wrap.history-separated-panels { border-color: transparent; background: transparent; }
.history-grid-line { stroke: rgba(210, 213, 218, .16); }
.history-axis-label { fill: #aeb2b9 !important; }

.history-line { stroke: #56afe7; }

.history-value { color: #f4f5f6; }
.tree-row { border-bottom-color: #4a4d52; border-radius: var(--panel-radius); }
.tree-row:hover { background: rgba(255, 255, 255, .075); }
.tree-toggle, .tree-expand:hover strong, .node-action:hover, .empty-icon { color: #80c7f1; }
.tree-toggle:hover { color: #b5e2fb; }
.tree-children { border-left-color: rgba(74, 168, 232, .34); }
.loading-dot { background: #5bb3e9; box-shadow: 0 0 0 4px rgba(74, 168, 232, .12); }
.tree-error { color: #ffadb5; }
.empty-state { border-color: #5b5e64; background: rgba(255, 255, 255, .025); }
.node-type { color: #8bcdf4; background: rgba(74, 168, 232, .14); }
.node-type.object, .tree-row.object .node-type { color: #b79eff; background: rgba(167, 139, 250, .09); }
.browse-results { scrollbar-color: #5b5e64 transparent; }
.certificate-security-status { color: #f1d36f; border-color: rgba(231, 196, 90, .36); background: rgba(231, 196, 90, .1); }
.certificate-security-status.ready { color: #7ce19b; border-color: rgba(77, 204, 120, .34); background: rgba(77, 204, 120, .1); }
.role-badge { color: #d0d3d7; background: rgba(255, 255, 255, .09); }
.role-badge.role-viewer { color: #7ce19b; background: rgba(77, 204, 120, .11); }
.toast { color: #f3f4f6; border-color: var(--line-strong); border-radius: var(--panel-radius); background: var(--surface-2); box-shadow: var(--shadow-elevated); }
.toast.error { border-color: #8f4651; background: #30191e; }

/* Superficies secundarias: formularios, publicación y herramientas del gráfico. */
.storage-form-section, .catalog-binding-section, .ura-broker-card, .ura-publication-kpis article, .ura-broker-summary>span, .broker-workflow-step, .history-command-bar, .history-axis-card, .history-source-group, .history-view-list, .history-variable-drawer, .history-ai-drawer {
  border-color: var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface-2);
  box-shadow: none;
}
.history-axis-card { border-left-color: var(--axis-color); }
.history-axis-card.invalid { border-color: var(--red); border-left-color: var(--axis-color); }
.history-variable-drawer, .history-ai-drawer { border-color: var(--line-strong); box-shadow: none; }

/* Variables del gráfico: grafito azul con acentos funcionales de alta legibilidad. */
.history-variable-drawer {
  --variable-blue-shell: #303030;
  --variable-blue-panel: #2f3032;
  --variable-blue-panel-deep: #292929;
  --variable-blue-panel-raised: #383e42;
  --variable-blue-field: #292929;
  --variable-blue-line: #587487;
  --variable-blue-line-soft: #405864;
  --variable-blue-accent: #79caf6;
  --variable-blue-muted: #c1d0d9;
  --variable-blue-subtle: #91a8b5;
  border-color: var(--line-strong);
  background: var(--variable-blue-shell);
}
.history-variable-drawer > .field > span { color: #d8e7ef; }
.history-variable-drawer #historyVariableSearch { color: #f3f8fb; border-color: #5c7889; background: var(--variable-blue-field); }
.history-variable-drawer #historyVariableSearch::placeholder { color: #92a7b3; }
.history-variable-drawer #historyVariableSearch:focus { border-color: var(--variable-blue-accent); outline: none; box-shadow: 0 0 0 3px rgba(121, 202, 246, .14); }
.history-variable-drawer .history-drawer-help { color: var(--variable-blue-muted); }
.history-variable-drawer .history-drawer-limit { color: #94cdea; }
.history-variable-drawer .history-source-group { overflow: hidden; border-color: var(--variable-blue-line-soft); border-radius: var(--control-radius); background: var(--variable-blue-panel); }
.history-variable-drawer .history-source-group > summary { color: #edf6fa; border-left: 2px solid #4fa9d8; background: #292a2d; }
.history-variable-drawer .history-source-group[open] > summary { background: #2c2d30; }
.history-variable-drawer .history-source-group > summary:hover { background: #35464f; }
.history-variable-drawer .history-source-group > summary::marker { color: var(--variable-blue-accent); }
.history-variable-drawer .history-source-group summary span { color: #f2f7fa; }
.history-variable-drawer .history-source-group summary small { color: #a9c1ce; }
.history-variable-drawer .history-source-group > div { border-top-color: #a6adb4; background: #d7dade; }
.history-variable-drawer .history-source-group[open] > div { border: 1px solid #4fa9d8; border-top-color: #4fa9d8; }
.history-variable-drawer .history-tree-variable { border-bottom-color: #a2aab2; background: #cdd0d3; }
.history-variable-drawer .history-tree-variable strong { color: #1b1d20; }
.history-variable-drawer .history-tree-variable small { color: #a8beca; }
.history-variable-drawer .history-tree-variable:hover { background: #c3c7cb; box-shadow: none; }
.history-variable-drawer .history-drag-grip { opacity: 1; background-image: radial-gradient(circle, #1b1d20 1.3px, transparent 1.55px); }
.history-variable-drawer .history-variable-empty { color: var(--variable-blue-muted); }
.history-variable-drawer .history-variable-tree { scrollbar-color: #5689a5 var(--variable-blue-panel-deep); }
.history-variable-drawer .history-variable-tree::-webkit-scrollbar-track { background: var(--variable-blue-panel-deep); }
.history-variable-drawer .history-variable-tree::-webkit-scrollbar-thumb { border-color: var(--variable-blue-panel-deep); background: #5689a5; }

/* Hipalux IA: una paleta de grafito violeta, limitada al asistente lateral. */
.history-ai-drawer.history-workspace-dialog {
  --ai-violet-shell: #343237;
  --ai-violet-panel: #2d2833;
  --ai-violet-panel-deep: #27222d;
  --ai-violet-panel-raised: #3a3341;
  --ai-violet-field: #29242f;
  --ai-violet-line: #6d5b79;
  --ai-violet-line-soft: #514659;
  --ai-violet-muted: #c7bdcd;
  --ai-violet-subtle: #a99daf;
  border-color: #786589;
  background: var(--ai-violet-shell);
}
.history-ai-drawer .history-ai-titlebar { border-bottom-color: var(--ai-violet-line); background: #2c2930; }
.history-ai-drawer .history-ai-title-icon { color: #f1e4ff; border-color: #9874b6; background: #443252; }
.history-ai-drawer .history-ai-titlebar > .modal-close { color: #e9e0ee; border-color: #6b5e73; background: #3a3341; }
.history-ai-drawer .history-ai-titlebar > .modal-close:hover { color: #fff; border-color: #9a78b4; background: #4b3c58; }
.history-ai-drawer .history-ai-content { background: var(--ai-violet-shell); }
.history-ai-drawer .history-ai-context { border-color: var(--ai-violet-line); background: var(--ai-violet-panel); }
.history-ai-drawer .history-ai-context > header,
.history-ai-drawer .history-ai-result > header { border-bottom-color: var(--ai-violet-line-soft); background: var(--ai-violet-panel-deep); }
.history-ai-drawer .history-ai-context > header span,
.history-ai-drawer .history-ai-result > header span { color: #ddd2e3; }
.history-ai-drawer .history-ai-context > header strong,
.history-ai-drawer .history-ai-result > header strong { color: #f7f2fa; }
.history-ai-drawer .history-ai-context output { border-color: #9874b6; background: #493557; }
.history-ai-drawer .history-ai-series span { color: #f0ebf3; border-color: #675a70; background: var(--ai-violet-panel-raised); }
.history-ai-drawer .history-ai-context > p { color: var(--ai-violet-muted); }
.history-ai-drawer .history-ai-context-details { border-top-color: var(--ai-violet-line-soft); background: #2a2530; }
.history-ai-drawer .history-ai-context-detail:first-child { border-right-color: var(--ai-violet-line-soft); }
.history-ai-drawer .history-ai-context-detail-trigger { color: #e9e1ed; }
.history-ai-drawer .history-ai-context-detail-trigger:hover,
.history-ai-drawer .history-ai-context-detail-trigger:focus-visible { background: #403548; }
.history-ai-drawer .history-ai-context-popover { color: #f0eaf3; border-color: #9a75b6; background: #29232f; box-shadow: 0 16px 38px rgba(10, 5, 14, .68); }
.history-ai-drawer .history-ai-context-popover > p { color: #d8cedd; }
.history-ai-drawer .history-ai-context-popover .history-ai-context-sampling-status,
.history-ai-drawer .history-ai-context-popover .history-ai-sampling-admin-note { border-color: #55475f; }
.history-ai-drawer .history-ai-sampling-example { border-color: #705b7e; background: #372e3e; }
.history-ai-drawer .history-ai-sampling-example p { color: #e5dce9; }
.history-ai-drawer .history-ai-sampling-example small,
.history-ai-drawer .history-ai-context-popover .history-ai-sampling-admin-note { color: #c9becf; }
.history-ai-drawer .history-ai-stat-series { border-color: #62536d; background: #302a36; }
.history-ai-drawer .history-ai-stat-series > header { border-bottom-color: #55485f; background: #39313f; }
.history-ai-drawer .history-ai-stat-series > header small,
.history-ai-drawer .history-ai-stat-series dd small,
.history-ai-drawer .history-ai-statistics-empty { color: var(--ai-violet-muted); }
.history-ai-drawer .history-ai-stat-series dl > div { border-right-color: #4f4458; border-bottom-color: #4f4458; }
.history-ai-drawer .history-ai-stat-series dt { color: #bdb0c4; }
.history-ai-drawer .history-ai-budget { border-color: var(--ai-violet-line); background: var(--ai-violet-panel); }
.history-ai-drawer .history-ai-budget > header { border-right-color: var(--ai-violet-line-soft); background: var(--ai-violet-panel-deep); }
.history-ai-drawer .history-ai-budget p { border-right-color: var(--ai-violet-line-soft); }
.history-ai-drawer .history-ai-budget p span,
.history-ai-drawer .history-ai-budget > header .history-ai-budget-renewal { color: var(--ai-violet-subtle); }
.history-ai-drawer .history-ai-model { border-color: var(--ai-violet-line); background: var(--ai-violet-panel); }
.history-ai-drawer .history-ai-model select { color: #f7f2fa; border-color: #756582; background-color: var(--ai-violet-field); }
.history-ai-drawer .history-ai-question > span { color: #f3edf6; }
.history-ai-drawer .history-ai-question textarea { color: #f7f3f9; border-color: #74667e; background: var(--ai-violet-field); }
.history-ai-drawer .history-ai-question textarea::placeholder { color: #a99eae; }
.history-ai-drawer .history-ai-question > small,
.history-ai-drawer .history-ai-suggestions > span,
.history-ai-drawer .history-ai-result-title-line small { color: var(--ai-violet-muted); }
.history-ai-drawer .history-ai-suggestions button { border-color: #80629b; background: #3d3049; }
.history-ai-drawer .history-ai-suggestions button:hover { border-color: #a982cc; background: #503d60; }
.history-ai-drawer .history-ai-result { border-color: #78618a; background: var(--ai-violet-panel); }
.history-ai-drawer .history-ai-result-token-usage { border-color: #756181; background: #352d3c; }
.history-ai-drawer .history-ai-copy { border-color: #8b6aa6; background: #3d3048; }
.history-ai-drawer .history-ai-answer { color: #f3eef6; background: #302a35; }
.history-ai-drawer .modal-actions.history-ai-actions { border-top-color: var(--ai-violet-line); background: #2e2b31; }
.history-ai-drawer .history-ai-actions .button.ghost { color: #e9e1ed; border-color: #6e6078; background: #38313f; }
.history-ai-drawer .history-ai-actions .button.ghost:hover { border-color: #9475aa; background: #493b55; }
.history-ai-drawer .history-ai-actions .button:disabled:not(.loading) { color: #ada3b2; border-color: #5e5266; background: #3a3440; }
.history-ai-drawer .history-ai-content,
.history-ai-drawer .history-ai-answer,
.history-ai-drawer .history-ai-context-popover { scrollbar-color: #81659a #29232f; }
.history-ai-drawer .history-ai-content::-webkit-scrollbar-track,
.history-ai-drawer .history-ai-answer::-webkit-scrollbar-track,
.history-ai-drawer .history-ai-context-popover::-webkit-scrollbar-track { background: #29232f; }
.history-ai-drawer .history-ai-content::-webkit-scrollbar-thumb,
.history-ai-drawer .history-ai-answer::-webkit-scrollbar-thumb,
.history-ai-drawer .history-ai-context-popover::-webkit-scrollbar-thumb { border-color: #29232f; background: #81659a; }
.broker-workflow-info { border: 0; background: transparent; }
.ura-publication-panel, .ura-publication-kpis, .ura-broker-summary, .broker-workflow-steps { gap: var(--panel-gap); }
.ura-publication-kpis article {
  border-color: #454545;
  background: #151515;
}
.ura-publication-panel .table-wrap tbody td { color: #c8cbd0; }
.ura-publication-panel .table-wrap tbody td :is(.table-main, .catalog-id) { color: inherit; }
.ura-publication-panel .table-wrap tbody td:first-child { color: #f4f5f6; font-weight: 630; }
.ura-publication-panel .table-wrap tbody td:first-child :is(.table-main, .catalog-id) { color: #f4f5f6; }
.history-command-bar { margin-bottom: var(--panel-gap); }
.history-chart-card { padding: var(--panel-gap); }
.history-table-wrap { margin-top: var(--panel-gap); }
.history-tool-button, .history-refresh-rate, .history-date-control, .history-color-control, .history-editor-color-button, .history-zoom-reset, .selection-icon, .brand-mark, .storage-backend-badge, .role-badge, .node-type, .node-action, .certificate-security-status, .admin-status-toggle, .mapping-enabled-field, .storage-operational-options .switch-label, .catalog-publication-row .switch-label, .broker-inline-toggle, .broker-test-mode-toggle, .history-plot-settings-grid .history-x-labels { border-radius: var(--control-radius); }
.history-errors, .empty-state, .broker-test-mode-warning, .history-drop-overlay { border-radius: var(--panel-radius); }

.broker-delay-control input { border-radius: var(--control-radius) 0 0 var(--control-radius); }
.broker-delay-control > span { border-radius: 0 var(--control-radius) var(--control-radius) 0; }
.sidebar-tooltip, .info-tooltip-content, .history-chart-tooltip,
.history-tool-button::after, .history-date-control::after {
  border-color: var(--line-strong);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: var(--shadow-elevated);
}
.sidebar-tooltip::before { background: var(--surface); }
.storage-section-heading, .mapping-section-heading { border-bottom-color: var(--line-strong); }
.storage-form-section { margin-bottom: var(--panel-gap); }
.storage-operational-options .switch-label, .catalog-publication-row .switch-label, .broker-inline-toggle, .broker-test-mode-toggle, .mapping-enabled-field, .admin-status-toggle {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: none;
}
.broker-test-mode-toggle {
  color: #f1d36f;
  border-color: #806c32;
  background: var(--surface);
}
.broker-test-mode-toggle:hover { border-color: #d5ad3e; background: var(--surface-3); }
.broker-test-mode-toggle strong { color: #ffe188; }
.broker-test-mode-toggle small { color: #d9c77e; }
.broker-test-mode-toggle .switch { background: #585b61; }
.broker-test-mode-toggle .switch::after { background: #c3c6ca; }
.broker-test-mode-toggle input:checked + .switch { background: #d0a632; box-shadow: 0 0 0 3px rgba(227, 188, 79, .14); }
.broker-test-mode-toggle input:checked + .switch::after { background: #fff6c7; }

@media (min-width: 701px) {
  /* Las vistas tabulares ocupan la ventana como una aplicación de escritorio.
     La página permanece inmóvil y el desplazamiento pertenece a cada tabla. */
  body:is(
    [data-active-page="fuentes"],
    [data-active-page="almacenamientos"],
    [data-active-page="variables"],
    [data-active-page="ura-configuracion"],
    [data-active-page="ura-auditoria"],
    [data-active-page="administracion"]
  ) {
    height: 100dvh;
    overflow: hidden;
  }
  body:is(
    [data-active-page="fuentes"],
    [data-active-page="almacenamientos"],
    [data-active-page="variables"],
    [data-active-page="ura-configuracion"],
    [data-active-page="ura-auditoria"],
    [data-active-page="administracion"]
  ) .shell {
    display: flex;
    height: 100dvh;
    min-height: 0;
    padding-bottom: var(--panel-gap);
    flex-direction: column;
  }
  body:is(
    [data-active-page="fuentes"],
    [data-active-page="almacenamientos"],
    [data-active-page="variables"],
    [data-active-page="ura-configuracion"],
    [data-active-page="ura-auditoria"],
    [data-active-page="administracion"]
  ) main {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  body[data-active-page="fuentes"] #fuentes,
  body[data-active-page="almacenamientos"] #almacenamientos,
  body[data-active-page="variables"] #variables {
    display: flex;
    min-height: 0;
    margin: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body[data-active-page="fuentes"] #fuentes[hidden],
  body[data-active-page="almacenamientos"] #almacenamientos[hidden],
  body[data-active-page="variables"] #variables[hidden] { display: none; }
  body[data-active-page="fuentes"] #fuentesDeclaradas,
  body[data-active-page="fuentes"] #simulatorWorkspace,
  body[data-active-page="almacenamientos"] #almacenamientosDeclarados,
  body[data-active-page="variables"] #variablesConfiguradas {
    display: flex;
    min-height: 0;
    margin-bottom: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body[data-active-page="fuentes"] #fuentesDeclaradas > .mapping-list-heading,
  body[data-active-page="almacenamientos"] #almacenamientosDeclarados > .mapping-list-heading,
  body[data-active-page="variables"] #variablesConfiguradas > .mapping-list-heading,
  body[data-active-page="almacenamientos"] #almacenamientosDeclarados > .panel-footnote {
    flex: 0 0 auto;
  }
  body[data-active-page="fuentes"] #fuentesDeclaradas > .table-wrap,
  body[data-active-page="almacenamientos"] #almacenamientosDeclarados > .table-wrap,
  body[data-active-page="variables"] #variablesConfiguradas > .table-wrap {
    min-height: 0;
    overflow: auto;
    flex: 1 1 auto;
  }

  body[data-active-page="ura-auditoria"] .catalog-section-nav,
  body[data-active-page="administracion"] #adminSectionNav {
    position: relative;
    top: auto;
    flex: 0 0 auto;
  }
  body[data-active-page="ura-auditoria"] #catalogo,
  body[data-active-page="administracion"] #administracion {
    display: flex;
    min-height: 0;
    margin-bottom: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body[data-active-page="administracion"] #administracion[hidden] { display: none; }
  body[data-active-page="ura-auditoria"] #catalogo > .catalog-tab-panel:not([hidden]),
  body[data-active-page="administracion"] #administracion > .admin-tab-panel:not([hidden]) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body[data-active-page="ura-auditoria"] #catalogo > .catalog-tab-panel[hidden],
  body[data-active-page="administracion"] #administracion > .admin-tab-panel[hidden],
  body[data-active-page="administracion"] #tenantUserAdmin[hidden] { display: none; }
  body[data-active-page="ura-auditoria"] #catalogo .catalog-subheading,
  body[data-active-page="ura-auditoria"] #catalogo .ura-publication-kpis,
  body[data-active-page="administracion"] #administracion > .mapping-list-heading {
    flex: 0 0 auto;
  }
  body[data-active-page="ura-auditoria"] #catalogo .ura-publication-panel > .history-toolbar { flex: 0 0 auto; }
  body[data-active-page="ura-auditoria"] #catalogo .ura-publication-panel > .table-wrap {
    min-height: 0;
    overflow: auto;
    flex: 1 1 auto;
  }
  body[data-active-page="administracion"] #administracion > .admin-tab-panel:not([hidden]) > :is(
    .admin-users-list,
    .admin-clients-list,
    .admin-log-list
  ),
  body[data-active-page="administracion"] #tenantUserAdmin:not([hidden]) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body[data-active-page="administracion"] #administracion .history-toolbar { flex: 0 0 auto; }
  body[data-active-page="administracion"] #administracion .admin-table-wrap {
    min-height: 0;
    overflow: auto;
    flex: 1 1 auto;
  }

  body:is(
    [data-active-page="fuentes"],
    [data-active-page="almacenamientos"],
    [data-active-page="variables"],
    [data-active-page="ura-configuracion"],
    [data-active-page="ura-auditoria"],
    [data-active-page="administracion"]
  ) .table-wrap thead {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  body:is(
    [data-active-page="fuentes"],
    [data-active-page="almacenamientos"],
    [data-active-page="variables"],
    [data-active-page="ura-configuracion"],
    [data-active-page="ura-auditoria"],
    [data-active-page="administracion"]
  ) .table-wrap thead th {
    box-shadow: inset 0 -1px 0 #5b5e64;
  }
  /* Cada pestaña de Configuración URA comparte el área tabular disponible. */
  body[data-active-page="ura-configuracion"] .catalog-section-nav {
    position: relative;
    top: auto;
    flex: 0 0 auto;
  }
  body[data-active-page="ura-configuracion"] #catalogo {
    display: flex;
    min-height: 0;
    margin-bottom: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body[data-active-page="ura-configuracion"] #catalogo > .catalog-tab-panel:not([hidden]) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body[data-active-page="ura-configuracion"] #catalogo > .catalog-tab-panel[hidden] { display: none; }
  body[data-active-page="ura-configuracion"] #catalogo .catalog-subheading,
  body[data-active-page="ura-configuracion"] #catalogo .history-toolbar,
  body[data-active-page="ura-configuracion"] #catalogo .panel-footnote { flex: 0 0 auto; }
  body[data-active-page="ura-configuracion"] #catalogo .catalog-table-wrap,
  body[data-active-page="ura-configuracion"] #catalogo .catalog-reference-table-wrap {
    min-height: 0;
    overflow: auto;
    flex: 1 1 auto;
  }
  body.sidebar-collapsed .topbar-nav { padding-right: 0; padding-left: 0; }
  body.sidebar-collapsed .sidebar-brand { padding-right: 8px; padding-left: 8px; }
  body.sidebar-collapsed .sidebar-brand-chevron { right: 2px; bottom: 5px; border-radius: var(--control-radius); background: var(--surface-3); }
  body.sidebar-collapsed .topbar-nav a { width: 100%; min-height: 38px; }
}

@media (max-width: 980px) {
  :root { --sidebar-expanded-width: 180px; }
}

@media (min-width: 701px) and (max-height: 700px) {
  body[data-active-page="ura-auditoria"] .ura-publication-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body[data-active-page="ura-auditoria"] .ura-publication-kpis article {
    min-width: 0;
    min-height: 56px;
    padding: 7px 9px;
  }
  body[data-active-page="ura-auditoria"] .ura-publication-kpis strong { font-size: 18px; }
  body[data-active-page="ura-auditoria"] .ura-publication-kpis small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  :root { --topbar-height: 64px; --panel-padding: 12px; --modal-padding: 16px; }
  .shell { padding: var(--panel-gap); }
  .topbar { height: auto; min-height: var(--topbar-height); gap: 8px; padding: 10px; }
  body.nav-open .topbar { z-index: 19; }
  .topbar > .brand { min-width: 0; }
  .topbar .brand strong { font-size: 10px; }
  .topbar-actions { gap: 6px; }
  .topbar .brand-mark { flex-shrink: 0; }
  .topbar-nav { width: min(84vw, 288px); height: auto; padding: 0; box-shadow: var(--shadow-elevated); }
  .topbar-context strong { font-size: 14px; }
  body[data-active-page^="ura-"] .topbar-context { margin-top: 0; }
  .hero { padding: 18px var(--panel-padding); }

  .panel, .catalog-panel { padding: var(--panel-padding); border-radius: var(--panel-radius); }
  .modal-card, .history-toolbar-popover-card { padding: var(--modal-padding); border-radius: var(--panel-radius); }
  .modal-backdrop { padding: 10px; }
  .modal-card { max-height: calc(100dvh - 20px); }
  .auth-card { padding: 28px; }
  .history-toolbar, .catalog-panel .history-toolbar, .connections-toolbar { padding: 10px; }
  .mapping-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .mapping-section-heading h3 { font-size: 15px; }
  .mapping-section-heading p { line-height: 1.45; }
  .catalog-section-links { display: flex; overflow-x: auto; }
  .catalog-section-button { flex: 1 0 auto; min-height: 40px; }
  body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) .catalog-section-nav { position: static; }
  .connections-toolbar.source-toolbar, .history-toolbar.catalog-toolbar,
  .history-toolbar.catalog-reference-toolbar { grid-template-columns: 1fr; }
  .variable-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variable-import-overwrite, .variable-import-footer { align-items: stretch; flex-direction: column; }
  .variable-import-overwrite-warning { max-width: none; text-align: left; }
  .variable-import-footer .button-group { width: 100%; }
  .variable-import-footer .button { flex: 1; }
}

@media (max-width: 520px) {
  .mapping-list-heading, .panel > .mapping-list-heading,
  .catalog-tab-panel > .catalog-subheading { align-items: stretch; flex-direction: column; gap: 12px; }
  .mapping-list-actions { width: 100%; }
  .mapping-list-actions .button { width: 100%; min-width: 0; padding-right: 10px; padding-left: 10px; }
}

/* Espacio de trabajo URA: sección y contenido; la iniciativa vive en el menú general. */
.ura-workspace {
  grid-template-columns: var(--panel-sidebar-width, 167px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--panel-gap);
}
.ura-workspace .ura-initiative-rail,
.ura-workspace .ura-section-rail,
.ura-initiative-context {
  border-color: var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
.ura-workspace .ura-initiative-rail,
.ura-workspace .ura-section-rail { padding: 12px; }
.ura-workspace .ura-section-rail { background: #343434; }
body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) .ura-workspace .ura-section-rail {
  position: relative;
  top: auto;
  width: auto;
  margin: 0;
  outline: 0;
}
body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) #uraWorkspace > nav.ura-section-rail {
  align-self: stretch;
  background: #343434;
}
.ura-rail-heading { border-bottom-color: var(--line); }
.ura-rail-heading span,
.ura-initiative-context span { color: #79cafa; }
.ura-workspace .ura-section-rail .catalog-section-links {
  display: flex;
  width: 100%;
  padding: 0;
  overflow: visible;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-2);
}
.ura-workspace .ura-section-rail .catalog-section-links {
  gap: 14px;
  border: 0;
  background: transparent;
}
.ura-workspace > .ura-section-rail,
.ura-workspace > .ura-section-rail > .catalog-section-links,
.ura-workspace > .ura-section-rail .ura-section-group,
.ura-workspace > .ura-section-rail .ura-section-group-items { background: #343434; }
.ura-section-group { gap: 6px; }
.ura-section-group + .ura-section-group { padding-top: 10px; border-top: 1px solid #5a5d63; }
.ura-section-group-label { color: #86c9ed; font-weight: 800; }
.ura-section-group-items { border: 0; background: transparent; }
.ura-workspace .ura-section-rail .catalog-section-button {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.ura-workspace .ura-section-rail .catalog-section-button:last-child { border-bottom: 0; }
.ura-workspace .ura-section-rail .catalog-section-button.active {
  background: #176f9f;
  font-weight: 570;
  box-shadow: inset 3px 0 0 #9bdcff;
}
.ura-workspace .ura-section-rail .catalog-section-button { border-bottom: 0; }
.ura-workspace .ura-section-rail .catalog-section-button:not(.active) { color: #d5e2e8; background: transparent; }
.ura-workspace .ura-section-rail .catalog-section-button:not(.active) .catalog-tab-icon { color: #b9d8e8; }
.ura-workspace .ura-section-rail .catalog-section-button:not(.active):hover { color: #e5f6ff; background: rgba(74, 168, 232, .13); }
.ura-initiative-options { gap: 6px; }
.ura-initiative-option {
  border-color: var(--line);
  border-radius: 0;
  background: var(--surface-2);
}
.ura-initiative-option:hover { color: #eef8ff; border-color: #487e9d; background: #293b46; }
.ura-initiative-option.active { border-color: #3c92bd; background: #254b60; box-shadow: inset 3px 0 0 #6cc8f6; }
.ura-initiative-mark { border-radius: 0; }
.ura-initiative-context {
  display: grid;
  align-items: stretch;
  grid-template-columns: var(--panel-sidebar-width, 167px) minmax(0, 1fr);
  gap: var(--panel-gap);
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  grid-column: 1 / -1;
  grid-row: 1;
}
.ura-initiative-context > .ura-initiative-heading,
.ura-initiative-context > .ura-initiative-summary {
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: #343434;
}
.ura-initiative-context > .ura-initiative-heading { align-content: center; }
.ura-initiative-context h2 { color: #65c4fa; font-size: 17px; }
.ura-initiative-summary-title { color: #86c9ed; }
.ura-initiative-summary-card { border-color: #4c4e53; background: #232427; }
.ura-initiative-summary-card:hover { border-color: #86c9ed; background: #2d3236; }
.ura-initiative-summary-items strong { color: #9bdcff; font-size: 19px; font-weight: 700; }
.ura-initiative-summary-card > span { color: #edf0f3; font-size: 10px; font-weight: 650; }
.ura-workspace-content > #catalogo { margin-bottom: 0; }
.ura-broker-summary { grid-template-columns: minmax(0, 1.3fr) minmax(0, .75fr) minmax(0, .5fr) minmax(0, .5fr) minmax(0, .75fr) minmax(0, 1fr) minmax(0, .65fr); }
.ura-broker-summary > span { color: #e4e7ea; border-color: #4c4e53; background: #232427; }
.ura-broker-summary strong { color: #79cafa; }
.ura-broker-summary > span:last-child { display: flex; align-items: center; }
.ura-broker-summary .table-status.off { color: #f1d36f; }
.ura-publication-scroll {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
}
.broker-step-icon { border-radius: 0; background: transparent; }

@media (min-width: 701px) {
  body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) #uraWorkspace {
    display: grid;
    min-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    flex: 1 1 auto;
  }
  body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) #uraWorkspace[hidden] { display: none; }
  .ura-initiative-rail,
  .ura-section-rail { min-height: 0; overflow: auto; }
  .ura-workspace-content { min-height: 0; overflow: hidden; }
  .ura-initiative-context { flex: 0 0 auto; }
  body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) #catalogo {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
    flex-direction: column;
  }
  body:is([data-active-page="ura-configuracion"], [data-active-page="ura-auditoria"]) #catalogo > .catalog-tab-panel:not([hidden]) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
}

@media (max-width: 1100px) and (min-width: 701px) {
  .ura-workspace { grid-template-columns: var(--panel-sidebar-width, 146px) minmax(0, 1fr); }
  .ura-initiative-context { grid-template-columns: var(--panel-sidebar-width, 146px) minmax(0, 1fr); }
  .ura-broker-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ura-workspace .ura-initiative-rail,
  .ura-workspace .ura-section-rail { padding: 9px; }
  .ura-workspace .ura-section-rail .catalog-section-button { padding: 0 8px; font-size: 11px; }
}

@media (max-width: 700px) {
  .ura-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .ura-initiative-context { grid-template-columns: minmax(0, 1fr); }
  .ura-workspace .ura-initiative-options {
    flex-direction: row;
    overflow-x: auto;
  }
  .ura-workspace .ura-section-rail .catalog-section-links { flex-direction: column; overflow: visible; }
  .ura-workspace .ura-section-group-items { display: flex; flex-direction: row; overflow-x: auto; }
  .ura-broker-summary { grid-template-columns: 1fr; }
  .ura-workspace .ura-section-rail .catalog-section-button {
    width: auto;
    min-width: 145px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .ura-workspace .ura-section-rail .catalog-section-button:last-child { border-right: 0; }
}

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

/* Administración: menú anidado y fichas con la geometría de OPC UA. */
#adminNavTree { min-width: 0; }
#adminSectionNav { position: relative; margin: 0 0 0 13px; padding: 0 0 0 9px; }
#adminSectionNav::before { position: absolute; top: -7px; bottom: 16px; left: 4px; border-left: 1px solid #82713c; content: ""; pointer-events: none; }
#adminSectionLinks { display: grid; gap: 3px; }
#adminSectionNav .admin-section-button { position: relative; width: 100%; min-width: 0; grid-template-columns: 16px minmax(0, 1fr); gap: 5px; padding: 4px 5px; border-radius: 0; }
#adminSectionNav .admin-section-button::before { position: absolute; top: 50%; left: -7px; width: 7px; border-top: 1px solid #82713c; content: ""; pointer-events: none; }
#adminSectionNav .admin-section-button strong { white-space: normal; overflow-wrap: anywhere; }
#adminSectionNav .sidebar-submenu-icon { width: 16px; color: #efda90; }
#adminSectionNav .admin-section-button.active { color: #fff3b2; border-color: transparent; background: #49412b; box-shadow: none; }
body[data-active-page="administracion"] #adminNavTree .sidebar-nav-parent { background: #e3bc4f; }
body[data-active-page="administracion"] #adminNavTree .sidebar-nav-parent > a.active { color: #211b0c; background: transparent; border-color: transparent; box-shadow: none; }
body[data-active-page="administracion"] #adminNavToggle { color: #211b0c; }
#adminNavTree[hidden], #adminSectionNav[hidden], #adminSectionNav [hidden], #administracion [hidden] { display: none !important; }
#administracion.admin-panel { padding: 0; border: 0; background: var(--bg); gap: var(--panel-gap); }
#administracion > .mapping-list-heading { min-height: 56px; margin: 0; padding: 10px var(--panel-padding); border: 1px solid var(--line); background: var(--surface-2); }
#administracion .admin-browser { min-height: 0; height: 100%; margin: 0; grid-template-columns: var(--panel-sidebar-width, 196px) minmax(0, 1fr); align-items: stretch; }
#administracion .admin-person-detail { overflow: auto; }
#administracion .admin-person-detail > .opcua-detail-body { flex: 1; }
#administracion .admin-person-detail.has-person-activity { overflow: hidden; }
#administracion #tenantUserProfile { display: flex; min-height: 0; flex: 1; flex-direction: column; }
#administracion #tenantUserProfile > .opcua-detail-body { flex: 1; }
#administracion .has-person-activity #tenantUserProfile { flex: 0 0 auto; }
#administracion #adminUserProfile { flex: 0 0 auto; }
#administracion .admin-user-activity { display: flex; min-height: 0; overflow: hidden; margin-top: var(--panel-gap); padding: 18px; flex: 1 1 auto; flex-direction: column; background: var(--surface); }
#administracion .admin-user-activity > .opcua-variables-heading { flex: 0 0 auto; }
#administracion .admin-user-workspace { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; margin-top: var(--panel-gap); background: var(--surface); }
#administracion .client-detail-tabs.tenant-user-tabs { display: flex; flex: 0 0 auto; gap: 0; margin: 0; border: 1px solid var(--line); }
#administracion .tenant-user-tabs button { min-width: 0; white-space: normal; padding: 10px; }
#administracion .admin-user-workspace > .admin-user-activity { margin-top: 0; }
#administracion .user-perspective-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 0; padding: 18px; border: 0; border-radius: 0; background: var(--surface); }
#administracion .user-perspective-heading { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-bottom: 14px; }
#administracion .user-perspective-heading h4 { margin: 0; }
#administracion .user-perspective-info { flex: 0 0 auto; width: 20px; height: 20px; min-width: 20px; min-height: 20px; padding: 0; color: #e3bc4f; border-color: #e3bc4f; background: transparent; }
#administracion .user-perspective-context { position: fixed; inset: auto; margin: 0; width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 12px; border: 1px solid #907c3a; border-radius: 6px; background: var(--surface-2); box-shadow: 0 8px 24px #0008; }
#administracion .user-perspective-context p { margin: 0; color: var(--text); }
#administracion .user-perspective-context p + p { margin-top: 6px; }
#administracion .user-perspective-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--panel-gap, 12px); flex: 1 1 auto; min-height: 0; }
#administracion .user-perspective-card { min-width: 0; min-height: 0; overflow: auto; padding: 14px; border: 1px solid var(--line); background: var(--surface-2); }
#administracion .user-perspective-card > h5 { margin: 0 0 14px; font-size: 12px; }
#administracion .user-perspective-card > .field { margin: 14px 0; }
#administracion #userPerspectiveResult { margin-top: 16px; }
@media (max-width: 1100px) {
  #administracion .user-perspective-panel { overflow: auto; }
  #administracion .user-perspective-columns { grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; }
  #administracion .user-perspective-card { overflow: visible; }
}
#administracion .admin-user-activity-table-wrap { min-height: 0; overflow: auto; flex: 1 1 auto; }
#administracion .admin-user-activity-table-wrap table { min-width: 780px; }
#administracion .admin-user-activity-table-wrap table th:first-child { width: 18%; }
#administracion .admin-user-activity-table-wrap table th:nth-child(2) { width: 19%; }
#administracion .admin-user-activity-table-wrap table th:nth-child(3) { width: 17%; }
#administracion .admin-audit-focus { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; margin-bottom: var(--panel-gap); color: var(--text); background: var(--surface-3); font-size: 11px; }
#administracion .admin-audit-focus strong { color: #fff; }
#administracion .admin-ai-settings .section-copy { margin: 12px 0 0; }
#administracion .client-ai-panel .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#administracion .client-ai-panel .history-ai-reasoning-select { color: var(--text); border-color: var(--line-strong); background-color: var(--surface); }
#administracion .client-ai-panel .history-ai-reasoning-select:focus { border-color: #e3bc4f; box-shadow: 0 0 0 2px rgba(227, 188, 79, .14); }
#administracion #adminAIModelHelp { margin: 0 0 14px; }
#administracion #historyAIModelDetails { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--panel-gap); margin: 0; background: transparent; }
#administracion .admin-ai-model-card { min-width: 0; padding: 14px 18px; border: 1px solid var(--line); background: var(--surface); }
#administracion .admin-ai-model-card > header { margin-bottom: 12px; }
#administracion .admin-ai-model-card h4 { margin: 0; color: #fff; font-size: 15px; }
#administracion .admin-ai-model-card > header p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
#administracion .admin-ai-model-card .field-row .field { display: flex; flex-direction: column; }
#administracion .admin-ai-model-card .field-row .field > :is(input, select) { margin-top: auto; }
#administracion .client-ai-panel { display: block; }
#administracion .client-directory { position: static; border: 0; padding: 17px 10px; background: var(--surface-3); }
#administracion .client-detail { min-height: 0; border: 0; background: var(--bg); }
#administracion #clientEditor { display: flex; min-height: 0; flex: 1; flex-direction: column; }
#administracion .client-detail-heading { min-height: 50px; padding: 7px 14px; margin-bottom: var(--panel-gap); border: 0; background: var(--surface-3); }
#administracion .client-detail-heading h3 { color: #fff; font-size: 18px; }
#administracion .client-detail-heading p { margin: 0; font-size: 11px; line-height: inherit; }
#administracion .client-detail-tabs { flex: 0 0 auto; border: 1px solid var(--line); margin-bottom: var(--panel-gap); }
#administracion .client-detail-tabs button { min-height: 38px; font-size: 11px; }
#administracion #clientForm { min-height: 0; overflow: auto; flex: 1; background: var(--surface); }
#administracion #clientForm .form-actions { position: static; background: var(--surface); }
#administracion #clientUsersPanel { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 0; gap: var(--panel-gap); background: var(--bg); }
#administracion .admin-client-users-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 7px 14px; margin: 0; background: var(--surface-2); flex: 0 0 auto; }
#administracion .admin-client-users-heading h3 { margin: 0; font-size: 13px; }
#administracion #clientUsersHost, #administracion #clientUserTablePanel { display: flex; min-height: 0; flex: 1; flex-direction: column; }
#administracion #adminAuditPanel { padding: 18px; background: var(--surface); }
#administracion .admin-browser .table-status.off { color: var(--amber); }
@media (min-width: 701px) {
  body.sidebar-collapsed #adminSectionNav { margin: 0; padding: 0; }
  body.sidebar-collapsed #adminSectionNav:not([hidden]) { display: grid; }
  body.sidebar-collapsed #adminSectionNav::before, body.sidebar-collapsed #adminSectionNav .admin-section-button::before, body.sidebar-collapsed #adminSectionNav .admin-section-button strong { display: none; }
  body.sidebar-collapsed #adminSectionNav .admin-section-button { grid-template-columns: 1fr; justify-items: center; }
  body[data-active-page="administracion"] #administracion > .admin-tab-panel > .admin-browser { flex: 1 1 auto; }
}
@media (max-width: 700px) {
  #administracion .admin-browser { grid-template-columns: minmax(0, 1fr); height: auto; }
  #administracion .opcua-hierarchy { max-height: 270px; }
  #administracion .admin-user-activity { height: 420px; flex: 0 0 auto; }
  #administracion .admin-user-workspace { flex: 0 0 auto; }
  #administracion .client-detail { overflow: visible; }
  #administracion .client-ai-panel .field-row, #administracion .opcua-facts { grid-template-columns: minmax(0, 1fr); }
  #administracion .admin-client-users-heading, #administracion .opcua-detail-heading { flex-wrap: wrap; }
}

#administracion > .mapping-list-heading .button { min-height: 34px; padding-top: 8px; padding-bottom: 8px; font-size: 11px; }
#administracion .client-directory-list { max-height: none; gap: 5px; }

/* Resumen operativo: los mismos paneles y separaciones de la consola. */
#resumen [hidden] { display: none !important; }
.dashboard-intro { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.dashboard-kpi-grid { padding: 0; gap: var(--panel-gap); }
.dashboard-source-kpi { --dashboard-accent: #49b7ff; }
.dashboard-storage-kpi { --dashboard-accent: #b29bed; }
.dashboard-variable-kpi { --dashboard-accent: #69d59a; }
.dashboard-alarm-kpi { --dashboard-accent: #f1d36f; }
.dashboard-alarm-kpi.has-pending { --dashboard-accent: var(--red); }
.dashboard-kpi { border-top-color: var(--dashboard-accent); }
.dashboard-kpi > small { white-space: normal; overflow-wrap: anywhere; }
.dashboard-kpi-grid:has(> [hidden]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.dashboard-acquisition-visuals:has(> [hidden]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.dashboard-acquisition-visuals:has(> [hidden]) > .dashboard-storage-card { grid-column: auto; }
.dashboard-source-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 17px; }
.dashboard-source-type { display: flex; align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid var(--line); background: var(--surface-2); text-decoration: none; font-size: 10px; color: var(--muted); }
.dashboard-source-type strong { color: #49b7ff; }
.dashboard-source-type.microcom strong { color: #69d59a; }
.dashboard-source-type.simulator strong { color: #f1d36f; }
.dashboard-source-type:hover, .dashboard-bar-row:hover { background: var(--surface-2); }
.dashboard-bar-row { color: inherit; text-decoration: none; }
.dashboard-bar-row:focus-visible, .dashboard-source-type:focus-visible, .dashboard-alarm-list > a:focus-visible, .dashboard-attention-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dashboard-monitoring-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.dashboard-monitoring-grid:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.dashboard-alarm-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.dashboard-alarm-summary > div { border-right: 1px solid var(--line); }
.dashboard-alarm-summary > div:last-child { border-right: 0; }
.dashboard-alarm-summary dt { color: var(--muted); font-size: 10px; }
.dashboard-alarm-summary dd { margin: 5px 0 0; color: var(--text); font-size: 24px; font-weight: 680; }
.dashboard-alarm-summary dd.error { color: var(--red); }
.dashboard-alarm-list { display: grid; gap: 4px; margin-bottom: 16px; }
.dashboard-alarm-list > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, auto) auto 12px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--alarm-state-color, transparent); background: var(--alarm-state-fill, transparent); color: var(--text); text-decoration: none; }
.dashboard-alarm-list > a:hover { background: var(--alarm-state-hover, transparent); }
.dashboard-alarm-identity, .dashboard-alarm-state { min-width: 0; }
.dashboard-alarm-identity strong, .dashboard-alarm-identity small, .dashboard-alarm-state small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-alarm-identity strong { font-size: 11px; }
.dashboard-alarm-identity small, .dashboard-alarm-state small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.dashboard-alarm-list time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.dashboard-card-footer > a { color: var(--text); font-size: 10px; text-decoration: none; }
.dashboard-card-footer > a:hover { color: var(--focus); }
.dashboard-data-notice { margin: 0; padding: 10px 14px; border: 1px solid var(--amber); color: var(--amber); background: var(--surface); font-size: 11px; }
.dashboard-attention-list { display: grid; gap: 8px; margin-bottom: 18px; }
.dashboard-attention-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 12px; gap: 10px; align-items: center; color: var(--text); text-decoration: none; }
.dashboard-attention-item .dashboard-activity-icon { width: 28px; height: 28px; font-size: 13px; }
.dashboard-attention-item > div { min-width: 0; }
.dashboard-attention-item strong { display: block; font-size: 11px; }
.dashboard-attention-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.dashboard-attention-item:hover strong { color: var(--focus); }
.dashboard-runtime-facts { margin-top: auto; margin-bottom: 14px; }
@media (max-width: 1100px) { .dashboard-monitoring-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .dashboard-alarm-list > a { grid-template-columns: minmax(0, 1fr) minmax(100px, auto); gap: 8px; }
  .dashboard-alarm-list time { grid-column: 1; }
  .dashboard-alarm-list > a > span { justify-self: end; }
  .dashboard-alarm-summary { gap: 8px; }
  .dashboard-alarm-summary dt { min-height: 26px; line-height: 1.3; }
  .dashboard-alarm-summary dd { font-size: 21px; }
}
/* Fit the workspace rather than scaling the text or scrolling the page. */
body[data-active-page="resumen"] { height: 100dvh; overflow: hidden; }
body[data-active-page="resumen"] .shell { display: flex; height: 100dvh; min-height: 0; flex-direction: column; }
body[data-active-page="resumen"] .topbar { flex: 0 0 auto; }
body[data-active-page="resumen"] main { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
#resumen { display: flex; min-height: 0; margin: 0; flex: 1 1 auto; flex-direction: column; gap: var(--panel-gap); }
#resumen > :not(.dashboard-panels) { flex: 0 0 auto; }
#resumen .dashboard-domain-header { min-height: 64px; padding: 9px 16px; }
#resumen .dashboard-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#resumen .dashboard-kpi { min-height: 0; padding: 10px 14px; }
#resumen .dashboard-kpi > strong { margin-top: 5px; }
#resumen .dashboard-kpi > small { margin-top: 5px; }
#resumen .dashboard-kpi-link { margin-top: 7px; padding-top: 5px; }
.dashboard-panels { display: grid; min-height: 0; flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--panel-gap); }
#resumen[data-single-group="true"] .dashboard-panels { grid-template-rows: minmax(0, 1fr); }
#resumen .dashboard-visual-grid { min-height: 0; grid-template-rows: minmax(0, 1fr); }
#resumen .dashboard-acquisition-visuals { grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) minmax(0, 1fr); }
#resumen .dashboard-monitoring-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
#resumen .dashboard-acquisition-visuals:has(> [hidden]) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
#resumen .dashboard-monitoring-grid:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
#resumen .dashboard-storage-card { grid-column: auto; }
#resumen .dashboard-visual-card { container: dashboard-card / size; min-height: 0; padding: 12px; }
#resumen .dashboard-card-heading { flex: 0 0 auto; margin-bottom: 10px; padding-bottom: 8px; }
#resumen .dashboard-card-heading h3 { margin: 0; }
#resumen .dashboard-card-footer { min-height: 30px; flex: 0 0 auto; margin: auto -12px -12px; padding: 7px 12px; }
#resumen .dashboard-card-footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#resumen .dashboard-card-footer > :last-child { flex-shrink: 0; }
#resumen .dashboard-source-types { flex: 0 0 auto; gap: 4px; margin-bottom: 10px; }
#resumen .dashboard-source-type { gap: 7px; padding: 4px 6px; }
#resumen .dashboard-bar-chart, #resumen .dashboard-alarm-list { min-height: 0; flex: 1 1 auto; align-content: start; overflow: hidden; margin: 0 0 10px; }
#resumen .dashboard-bar-chart { gap: 9px; }
#resumen .dashboard-bar-row { grid-template-columns: minmax(0, .95fr) minmax(40px, 1fr) 22px; gap: 8px; }
#resumen .dashboard-storage-legend { grid-template-columns: minmax(0, 1fr); gap: 7px; }
#resumen .dashboard-storage-card .dashboard-compact-facts { grid-template-columns: minmax(0, 1fr); margin: auto 0 8px; }
#resumen .dashboard-stack { flex: 0 0 auto; margin: 0 0 10px; }
#resumen .dashboard-compact-facts > div { min-height: 25px; }
#resumen .dashboard-coverage-content { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
#resumen .dashboard-ring { width: 104px; height: 104px; }
#resumen .dashboard-ring::before { width: 80px; height: 80px; }
#resumen .dashboard-ring-content strong { font-size: 23px; }
#resumen .dashboard-definition-list { font-size: 11px; }
#resumen .dashboard-definition-list > div { min-height: 30px; }
#resumen .dashboard-alarm-summary { flex: 0 0 auto; margin-bottom: 10px; }
#resumen .dashboard-alarm-summary dd { margin-top: 3px; }
#resumen .dashboard-alarm-list > a { padding: 7px 10px; }
#resumen .dashboard-attention-list { min-height: 0; flex: 1 1 auto; overflow-y: auto; margin: 0 0 10px; align-content: start; scrollbar-width: thin; }
#resumen .dashboard-runtime-facts { flex: 0 0 auto; margin: auto 0 8px; }
#resumen .dashboard-empty { padding: 10px 4px; }
.dashboard-panel-nav { display: flex; min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.dashboard-panel-nav button { min-width: 0; min-height: 34px; flex: 1 1 0; padding: 6px 8px; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 11px; }
.dashboard-panel-nav button:last-child { border-right: 0; }
.dashboard-panel-nav button:hover { color: var(--text); background: var(--surface-2); }
.dashboard-panel-nav button.active { color: var(--focus); background: var(--surface-2); box-shadow: inset 0 -2px var(--focus); }
.dashboard-panel-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#resumen .dashboard-panel-inactive, #resumen .dashboard-group-inactive { display: none; }
#resumen[data-layout="focused"] .dashboard-panels { grid-template-rows: minmax(0, 1fr); }
#resumen[data-layout="focused"] .dashboard-visual-grid { grid-template-columns: minmax(0, 1fr); }
#resumen[data-density="compact"] .dashboard-intro { display: none; }
#resumen[data-density="compact"] .dashboard-domain-header { min-height: 54px; }
#resumen[data-density="compact"] .dashboard-kpi { padding: 8px 12px; }
#resumen[data-density="compact"] .dashboard-kpi > strong { font-size: 26px; }
#resumen[data-density="compact"] .dashboard-kpi-link { display: none; }
#resumen[data-density="minimal"] .dashboard-domain-header { min-height: 34px; padding: 5px 10px; flex-direction: row; gap: 8px; }
#resumen[data-density="minimal"] .dashboard-domain-icon,
#resumen[data-density="minimal"] .dashboard-domain-kicker,
#resumen[data-density="minimal"] .dashboard-intro,
#resumen[data-density="minimal"] .dashboard-domain-state > div,
#resumen[data-density="minimal"] .dashboard-kpi > small,
#resumen[data-density="minimal"] .dashboard-kpi-link { display: none; }
#resumen[data-density="minimal"] .dashboard-domain-header h2 { font-size: 13px; }
#resumen[data-density="minimal"] .dashboard-kpi { padding: 5px 8px; }
#resumen[data-density="minimal"] .dashboard-kpi-label { overflow: hidden; letter-spacing: 0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#resumen[data-density="minimal"] .dashboard-kpi > strong { margin-top: 3px; font-size: 18px; }
#resumen[data-density="minimal"] .dashboard-panel-nav button { min-height: 28px; padding: 4px 6px; }
#resumen[data-density="minimal"] .dashboard-data-notice { padding: 4px 8px; font-size: 10px; }
#resumen[data-summary-only="true"] .dashboard-domain-header { display: none; }
#resumen[data-summary-only="true"] .dashboard-visual-card { padding: 6px 10px; }
#resumen[data-summary-only="true"] .dashboard-card-footer { margin: auto -10px -6px; padding-right: 10px; padding-left: 10px; }
#resumen[data-summary-only="true"] .dashboard-data-notice { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container dashboard-card (max-height: 250px) {
  #resumen .dashboard-card-heading { margin-bottom: 7px; padding-bottom: 6px; }
  #resumen .dashboard-card-kicker { display: none; }
  #resumen .dashboard-card-heading h3 { font-size: 13px; }
  #resumen .dashboard-source-types { margin-bottom: 6px; }
  #resumen .dashboard-alarm-summary { margin-bottom: 7px; }
  #resumen .dashboard-alarm-summary dt { min-height: 0; font-size: 9px; }
  #resumen .dashboard-alarm-summary dd { font-size: 21px; }
  #resumen .dashboard-compact-facts > div { min-height: 21px; }
  #resumen .dashboard-storage-legend { gap: 5px; }
  #resumen .dashboard-alarm-list > a { padding: 5px 8px; }
}
@container dashboard-card (max-height: 190px) {
  #resumen .dashboard-coverage-content { grid-template-columns: 80px minmax(0, 1fr); }
  #resumen .dashboard-ring { width: 70px; height: 70px; }
  #resumen .dashboard-ring::before { width: 52px; height: 52px; }
  #resumen .dashboard-ring-content strong { font-size: 19px; }
  #resumen .dashboard-ring-content small { font-size: 7px; margin-top: 3px; }
  #resumen .dashboard-definition-list > div { min-height: 23px; }
  #resumen .dashboard-stack { display: none; }
  #resumen .dashboard-storage-legend { display: none; }
  #resumen .dashboard-runtime-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #resumen .dashboard-runtime-facts > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  #resumen .dashboard-source-types { display: none; }
  #resumen .dashboard-card-footer { min-height: 25px; padding-top: 5px; padding-bottom: 5px; }
}
@container dashboard-card (max-height: 130px) {
  #resumen .dashboard-card-heading { margin-bottom: 4px; padding-bottom: 4px; }
  #resumen .dashboard-card-footer { display: none; }
  #resumen .dashboard-ring { width: auto; height: auto; background: transparent; border-radius: 0; }
  #resumen .dashboard-ring::before { display: none; }
  #resumen .dashboard-definition-list > div { min-height: 19px; }
  #resumen .dashboard-compact-facts > div { min-height: 18px; }
  #resumen .dashboard-runtime-facts, #resumen .dashboard-storage-legend { display: none; }
}
@container dashboard-card (max-height: 85px) {
  #resumen .dashboard-card-heading { border: 0; padding: 0; margin: auto 0; }
  #resumen .dashboard-visual-card > :not(.dashboard-card-heading) { display: none; }
}
@media (max-width: 700px) {
  #resumen .dashboard-domain-header { flex-direction: row; padding: 8px 10px; gap: 8px; }
  #resumen .dashboard-domain-icon, #resumen .dashboard-intro, #resumen .dashboard-domain-state > div { display: none; }
  #resumen .dashboard-domain-header h2 { font-size: 15px; }
  #resumen .dashboard-domain-identity { flex: 1 1 auto; }
  #resumen .dashboard-domain-state { flex: 0 0 auto; gap: 0; }
  #resumen .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #resumen .dashboard-kpi { padding: 8px 10px; }
  #resumen .dashboard-kpi-link { display: none; }
  #resumen .dashboard-kpi > strong { font-size: 24px; }
  #resumen .dashboard-coverage-content { grid-template-columns: 104px minmax(0, 1fr); }
  #resumen .dashboard-card-heading { flex-direction: row; }
  #resumen .dashboard-alarm-list > a { grid-template-columns: minmax(0, 1fr) minmax(100px, auto); }
  #resumen .dashboard-alarm-list time { grid-column: 1; }
  #resumen .dashboard-alarm-list > a > span { justify-self: end; }
  #resumen[data-density="minimal"] .dashboard-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #resumen[data-density="minimal"] .dashboard-kpi > strong { font-size: 18px; }
}

#administracion #clientPerspectivePanel, #administracion #clientPerspectiveHost { display: flex; flex: 1; flex-direction: column; min-height: 0; }
#administracion .user-perspective-list-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
#administracion .user-perspective-list-heading h5 { margin: 0; font-size: 12px; }

/* Perspective shows the linked screen without the console's surrounding navigation. */
html[data-perspective-page] body:not([data-active-page]) > .shell > main { visibility: hidden; }
html[data-perspective-page] body { --sidebar-width: 0px; --topbar-height: 0px; --alarm-dock-space: 0px; padding-left: 0; }
html[data-perspective-page] :is(.topbar, .topbar-nav, #sidebarTooltip, #alarmDock) { display: none !important; }
html[data-perspective-page] .shell { padding: var(--panel-gap); }
html[data-perspective-page] body.nav-open::before { display: none; }
html[data-perspective-page] :is(.history-variable-drawer, .history-ai-drawer) { top: var(--panel-gap); bottom: var(--panel-gap); }
html[data-perspective-page] .history-variable-drawer { left: var(--panel-gap); }