.fw-matrix caption {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
.fw-rule-stack {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: fwru;
}
.fw-rule-stack li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid #52525b;
    background: #3f3f46;
}
.fw-rule-num {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.2);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fw-rule-body {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-small);
    color: var(--color-text);
    line-height: 1.45;
}
.fw-rule-body code {
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
}
.fw-arrow-gap {
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 1.25rem;
    margin: var(--space-2) 0 var(--space-3);
}
.fw-policy-card {
    margin-top: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 2px solid #f87171;
    background: linear-gradient(180deg, #450a0a 0%, #3f0f12 100%);
}
.fw-policy-card strong {
    display: block;
    color: #fecaca;
    font-size: 0.9375rem;
    margin-bottom: var(--space-2);
}
.fw-policy-card p {
    margin: 0;
    color: #fca5a5;
    font-size: var(--font-size-small);
    line-height: 1.55;
}
.fw-note {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-caption);
    color: var(--color-text-tertiary);
    line-height: 1.45;
}
.fw-two-col {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-3);
}
@media (min-width: 720px) {
    .fw-two-col {
        grid-template-columns: 1fr 1fr;
    }
}
.fw-callout {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border-left: 4px solid var(--color-primary);
    background: rgba(249, 115, 22, 0.08);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    line-height: 1.45;
}
.fw-col-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.fw-purpose-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
    margin: var(--space-2) 0 0;
}
.fw-purpose-table th,
.fw-purpose-table td {
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    vertical-align: top;
}
.fw-purpose-table th {
    background: rgba(249, 115, 22, 0.1);
    color: var(--color-text);
    text-align: left;
}
.firewall-doc-figures figcaption {
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    line-height: 1.4;
}
.firewall-doc-figures img,
.firewall-doc-figures svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.firewall-glossary {
    margin: var(--space-5) 0 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(15, 15, 18, 0.5);
}
.firewall-glossary dt {
    font-weight: 600;
    color: var(--color-primary);
    margin-top: var(--space-3);
    font-size: 0.8125rem;
}
.firewall-glossary dt:first-child {
    margin-top: 0;
}
.firewall-glossary dd {
    margin: 4px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
    line-height: 1.45;
}
.firewall-rules-placeholder {
    font-size: var(--font-size-small);
    color: var(--color-text-tertiary);
    margin: 0;
}
.firewall-table-meta {
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    margin: 0 0 8px;
}
.firewall-table-meta code {
    font-size: 0.76rem;
}
.firewall-table-policy {
    font-size: 0.82rem;
    margin: 0 0 8px;
    color: var(--color-text-secondary);
}
.firewall-table-policy strong {
    color: var(--md-on-surface);
}
.firewall-rules-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(63, 63, 70, 0.45);
    border-radius: var(--md-radius-sm);
    background: rgba(9, 9, 11, 0.35);
    max-height: 420px;
    overflow: auto;
}
.firewall-rules-list__item {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(63, 63, 70, 0.25);
    font-size: 0.78rem;
    line-height: 1.4;
}
.firewall-rules-list__item:last-child {
    border-bottom: none;
}
.firewall-rules-list__item code {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, monospace;
}
.firewall-rules-list__idx {
    color: var(--color-text-tertiary);
    margin-right: 6px;
    user-select: none;
}
.firewall-rules-list__empty {
    padding: 10px;
    font-size: 0.82rem;
    color: var(--color-text-tertiary);
}
.side-nav__btn-desc {
    font-size: 0.72rem;
    color: var(--md-on-surface-variant);
    margin-top: 4px;
    line-height: 1.3;
}
/* #main-workspace (.main-views): mismos parámetros de caja para todas las vistas hijas */
.main-views {
    --lgrt-main-views-inset: 12px;
    --lgrt-main-views-pad-x: var(--lgrt-main-views-inset);
    --lgrt-main-views-pad-y-top: var(--lgrt-main-views-inset);
    --lgrt-main-views-pad-y-bottom: var(--lgrt-main-views-inset);
    --lgrt-main-views-inset-x-extra: var(--lgrt-main-views-inset);
    --lgrt-main-views-inset-left-extra: var(--lgrt-main-views-inset);
    --lgrt-view-tab-row-gap: 6px;
    --lgrt-view-chrome-bg: linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(2, 6, 23, 0.93) 100%);
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(800px 420px at 18% 22%, rgba(249,115,22,.10), transparent 60%),
        radial-gradient(820px 420px at 86% 12%, rgba(99,102,241,.10), transparent 60%),
        linear-gradient(180deg, rgba(2,6,23,.65) 0%, rgba(2,6,23,.85) 100%);
    scroll-behavior: smooth;
}
.view-panel {
    display: none;
    width: 100%;
    max-width: none;
    margin: 0;
    flex: none;
    min-height: 0;
}
/* Vista activa: ocupa el área de contenido con margen uniforme 12px en los cuatro lados. */
.main-views > .view-panel.view-panel--active {
    position: absolute;
    inset: var(--lgrt-main-views-inset);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    animation: panel-fade-in .24s ease-out;
}
/* Cabecera de vista (tabs / sub-tabs / toolbar): pegada al cuerpo; el scroll va al panel activo */
.main-views > .view-panel.view-panel--active > .mon-tabs,
.main-views > .view-panel.view-panel--active > #settings-tabs,
.main-views > .view-panel.view-panel--active > #monitoring-subnav,
.main-views > .view-panel.view-panel--active .mon-audit-toolbar {
    flex-shrink: 0;
    margin-bottom: 0;
}
/* Tabs / sub-tabs dentro del panel: sin hueco antes del cuerpo (FQDN, DNS, LAN, FW, etc.) */
.main-views > .view-panel.view-panel--active .mon-tabs,
.main-views > .view-panel.view-panel--active .settings-subsubnav {
    margin-bottom: 0;
}
/* Dos filas de tabs consecutivas: separación solo entre filas, no antes del contenido */
.main-views > .view-panel.view-panel--active .mon-tabs + .mon-tabs,
.main-views > .view-panel.view-panel--active .lgrt-af-tabs + .mon-tabs {
    margin-top: var(--lgrt-view-tab-row-gap, 6px);
}
.main-views > .view-panel.view-panel--active .lgrt-af-tabpanel.is-active,
.main-views > .view-panel.view-panel--active .lan-panel-slice.is-active,
.main-views > .view-panel.view-panel--active .routing-config-slice,
.main-views > .view-panel.view-panel--active .routing-view-stack,
.main-views > .view-panel.view-panel--active .firewall-view-stack {
    margin-top: 0;
}
.main-views > .view-panel.view-panel--active > .settings-panel.is-active,
.main-views > .view-panel.view-panel--active > .mon-tabpanel.is-active {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    margin-top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
.main-views > .view-panel.view-panel--active > .cluster-node-card:only-child,
.main-views > .view-panel.view-panel--active > .cluster-node-card:first-child:last-child {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
#view-settings {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}
#view-settings > .settings-panel[hidden] {
    display: none !important;
}
#view-settings > #settings-tabs {
    flex-shrink: 0;
    background: var(--lgrt-view-chrome-bg);
}
#view-settings > .settings-panel.cluster-node-card.is-active {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}
#view-settings #settings-iface-af-tabs,
#view-settings #settings-dns-af-tabs,
#view-settings #settings-local-node-af-tabs,
#view-settings #settings-web-expose-af-tabs,
#view-settings .settings-subsubnav {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--lgrt-view-chrome-bg);
}
#view-settings #settings-panel-interfaces.settings-panel.is-active {
    overflow: hidden;
}
#view-settings #settings_iface_admin {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#view-settings #settings_iface_admin > .iface-admin-toolbar {
    flex-shrink: 0;
    background: var(--lgrt-view-chrome-bg);
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 4px 12px 10px 0;
    margin-bottom: 0;
}
#view-settings #settings_iface_admin > .lan-iface-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}
/* thead sticky: regla global en lgrt-panel-04.css §7.6 */
#view-settings #settings_iface_admin .settings-iface-status-row td.no-data {
    text-align: center;
    padding: 18px 12px;
}
#view-settings #settings-panel-general.settings-panel.is-active {
    overflow: hidden;
}
#view-settings #settings-panel-dns-servers.settings-panel.is-active {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#view-settings #settings-panel-local-node.settings-panel.is-active,
#view-settings #settings-panel-web-expose.settings-panel.is-active {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#view-settings #settings-panel-local-node #settings-local-node-alert,
#view-settings #settings-panel-web-expose #settings-web-expose-alert {
    flex-shrink: 0;
}
#view-settings #settings-panel-local-node #settings-local-node-panels,
#view-settings #settings-panel-web-expose #settings-web-expose-panels {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    margin-top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#view-settings #settings-panel-local-node #settings-local-node-panels .lgrt-af-tabpanel,
#view-settings #settings-panel-web-expose #settings-web-expose-panels .lgrt-af-tabpanel {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    display: none;
    flex-direction: column;
}
#view-settings #settings-panel-local-node #settings-local-node-panels .lgrt-af-tabpanel.is-active,
#view-settings #settings-panel-web-expose #settings-web-expose-panels .lgrt-af-tabpanel.is-active {
    display: flex;
}
/* Scroll: specificity must beat .lgrt-af-tabpanel { overflow:hidden } above */
#view-settings #settings-panel-local-node #settings-local-node-panels #settings-local-node-panel-fqdn.lgrt-af-tabpanel.is-active,
#view-settings #settings-panel-local-node #settings-local-node-panels #settings-local-node-panel-certs.lgrt-af-tabpanel.is-active,
#view-settings #settings-panel-local-node #settings-local-node-panels #settings-local-node-panel-management.lgrt-af-tabpanel.is-active {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
}
#view-settings #settings-panel-web-expose #settings-web-expose-panels #settings-web-expose-panel-general.lgrt-af-tabpanel,
#view-settings #settings-panel-web-expose #settings-web-expose-panels #settings-web-expose-panel-general.lgrt-af-tabpanel.is-active {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
}
#view-settings #settings-panel-local-node .settings-web-expose-identity,
#view-settings #settings-panel-local-node .settings-local-node-mgmt-root,
#view-settings #settings-panel-web-expose .settings-web-expose-identity {
    flex-shrink: 0;
    margin: 8px 0 12px;
    max-width: 520px;
}
#view-settings #settings-panel-local-node .settings-local-node-mgmt-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--font-size-caption);
}
#view-settings #settings-panel-local-node .settings-cluster-ssh-block {
    margin-top: 4px;
}
#view-settings #settings-panel-web-expose .settings-web-expose-general-root {
    max-width: 42rem;
    padding: 8px 0 24px;
}
body.lgrt-apply-bar-visible #view-settings #settings-panel-web-expose .settings-web-expose-general-root {
    padding-bottom: 72px;
}
#view-settings #settings-panel-web-expose .settings-web-expose-edge-block {
    margin-bottom: 14px;
}
#view-settings #settings-panel-web-expose .settings-web-expose-general-intro {
    margin: 0 0 12px;
}
#view-settings #settings-panel-web-expose .cluster-node-card__lead,
#view-settings #settings-panel-web-expose .muted {
    max-width: 1100px;
}
#view-settings #settings-panel-web-expose .settings-web-expose-table-wrap {
    width: 100%;
    max-width: none;
    margin-top: 4px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#view-settings #settings-panel-web-expose .settings-web-expose-table-wrap .lan-iface-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}
#view-settings #settings-panel-web-expose .settings-web-expose-table thead th:nth-child(1),
#view-settings #settings-panel-web-expose .settings-web-expose-table thead th:nth-child(2),
#view-settings #settings-panel-web-expose .settings-web-expose-table thead th:nth-child(3) {
    width: 5.5rem;
    text-align: center;
}
#view-settings #settings-panel-web-expose .settings-web-expose-table tbody td:nth-child(1),
#view-settings #settings-panel-web-expose .settings-web-expose-table tbody td:nth-child(2),
#view-settings #settings-panel-web-expose .settings-web-expose-table tbody td:nth-child(3) {
    text-align: center;
    vertical-align: middle;
}
#view-settings #settings-panel-web-expose .settings-web-expose-toggle-cell--mode {
    min-width: 4.5rem;
}
#view-settings #settings-panel-web-expose .settings-web-expose-ip {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: pre-line;
    color: var(--color-text);
}
#view-settings #settings-panel-web-expose .settings-web-expose-group td {
    padding: 10px 6px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border-bottom: 0;
    background: transparent;
}
#view-settings #settings-panel-web-expose .settings-web-expose-group-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
#view-settings #settings-panel-web-expose .settings-web-expose-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
#view-settings #settings-panel-web-expose .settings-web-expose-group + tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#view-settings #settings-panel-web-expose .settings-web-expose-row--stale td {
    opacity: 0.72;
}
#view-settings #settings-panel-web-expose .settings-cluster-input {
    max-width: 420px;
}
#view-settings #settings-general-root {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin-top: 10px;
    overflow-y: auto;
}
.lgrt-apply-bar {
    position: fixed;
    left: var(--lgrt-side-nav-width, 200px);
    right: 0;
    bottom: 0;
    z-index: 10040;
    display: none;
    align-items: center;
    gap: 10px;
    padding: var(--lgrt-main-views-inset, 12px);
    background: var(--lgrt-view-chrome-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lgrt-apply-bar.is-visible {
    display: flex;
}
.lgrt-apply-bar__status {
    margin-left: 4px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
body.lgrt-apply-bar-visible .main-views > .view-panel.view-panel--active {
    bottom: calc(var(--lgrt-main-views-inset, 12px) + 52px);
}
@media (max-width: 900px) {
    .lgrt-apply-bar {
        left: 0;
    }
}
#view-settings #settings-panel-cluster .settings-cluster-tab:not([hidden]) {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    margin-top: 0;
    overflow-y: auto;
}
/* Sin display:flex aquí: el ID gana a .view-panel{display:none} y el panel queda siempre visible. */
#view-monitoring.view-panel--active {
    min-height: 0;
}
#view-monitoring > #monitoring-subnav {
    background: var(--lgrt-view-chrome-bg);
    flex-shrink: 0;
}
#view-monitoring > .mon-tabpanel.is-active {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
}
#view-monitoring > #panel-monitoring-resumen.is-active {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Solo cuando la pestaña VRRP está activa. */
#view-monitoring > #panel-monitoring-vrrp.is-active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#view-audit.view-panel--active {
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
#view-audit #cluster-audit {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
#view-audit .mon-audit-toolbar {
    flex: 0 0 auto;
    background: var(--lgrt-view-chrome-bg);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#view-audit #mon-audit-body {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
#panel-monitoring-vrrp #cluster-vrrp {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#panel-monitoring-vrrp #mon-vrrp-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mon-audit-toolbar {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 12px;
    margin-bottom: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.mon-audit-toolbar .mon-traffic-ts,
.mon-audit-toolbar #mon-audit-meta {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mon-audit-toolbar .mon-audit-refresh {
    flex: 0 0 auto;
    font-size: 0.78rem;
    padding: 4px 10px;
}
/* Acciones de la derecha (Reiniciar contadores + Actualizar) agrupadas. */
.mon-audit-toolbar .mon-audit-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    max-width: 100%;
}
.mon-audit-toolbar .mon-audit-flap-reset {
    flex: 0 0 auto;
    font-size: 0.78rem;
    padding: 4px 10px;
}
/* .btn fuerza display:inline-flex → el atributo [hidden] no basta; forzar oculto. */
.mon-audit-toolbar .mon-audit-flap-reset[hidden] { display: none; }
#view-interfaces #cluster-if-active,
#view-wan > .cluster-node-card,
#view-routing #cluster-route-active,
#view-firewall > .cluster-node-card,
#view-dhcp-server > .cluster-node-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: auto;
}
/* VPN: scroll interno en pestañas; logs ocupa alto disponible sin scroll de página. */
#view-vpn > .cluster-node-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.main-views > #view-vpn.view-panel.view-panel--active > .cluster-node-card:only-child {
    overflow: hidden;
}
/* Cortafuegos: barra Cancelar/Aplicar es hermana del card (como Configuración); el card no scrollea entero. */
#view-firewall > .cluster-node-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Servidor DNS: misma estructura (card + apply-bar); scroll en el cuerpo admin. */
#view-dns-server > .cluster-node-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#view-dns-server .dns-server-admin__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
#view-dns-server .dns-server-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#view-dns-server .dns-server-chrome {
    flex-shrink: 0;
    z-index: 5;
    background: var(--lgrt-view-chrome-bg);
    padding-bottom: 0.35rem;
}
#view-dns-server #dns-role-tabs {
    margin-bottom: 0;
}
#view-dns-server .dns-role-subtabs {
    margin: 0.5rem 0 0;
}
#view-dns-server .dns-server-node-hint {
    margin: 0.35rem 0 0;
}
#view-dns-server .dns-server-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
}
#view-dns-server .dns-role-panels {
    margin-bottom: 0;
}
/* Auditoría: toolbar fijo arriba; scroll solo en la tabla (no empuja Refresh fuera del panel). */
#view-audit > .cluster-node-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.main-views > #view-audit.view-panel.view-panel--active > .cluster-node-card:only-child {
    overflow: hidden;
}
#view-interfaces #lan-af-tabs,
#view-wan #wan-af-tabs,
#view-firewall #fw-generales-af-tabs,
#view-firewall #fw-upnp-af-tabs,
#view-firewall #fw-dhcp-af-tabs,
#view-firewall #fw-dns-af-tabs,
#view-firewall #fw-interlan-af-tabs,
#view-firewall #fw-dnat-af-tabs,
#view-firewall #fw-snat-af-tabs,
#view-firewall #fw-icmp-af-tabs,
#view-routing #routing-config-af-tabs,
#view-routing #routing-tables-af-tabs,
#view-routing #routing-rules-af-tabs,
#view-routing #routing-config-tabs,
#view-dns-server #dns-server-af-tabs,
#view-dhcp-server #dhcp-server-af-tabs {
    flex-shrink: 0;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--lgrt-view-chrome-bg);
}
#view-interfaces .lan-panel-slice.is-active,
#view-wan .lgrt-af-tabpanel:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Respeta --lgrt-main-views-inset a la derecha: evita que KPIs/botones queden bajo la scrollbar */
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
    box-sizing: border-box;
}
#view-routing .routing-view-stack {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
}
#view-firewall .firewall-view-stack {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
}
#view-interfaces .lan-iface-table-scroll {
    overflow-y: auto;
}
.iface-admin-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Margen al borde derecho: evita recorte por scrollbar del panel o borde del iframe */
    padding-inline-end: 12px;
}
#view-cluster.view-panel--active,
#view-ayuda.view-panel--active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Iframe de usuarios (vista legacy o embebida): crece con el área de trabajo */
.main-views > .view-panel.view-panel--active .users-embed-frame {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: block;
}
/* Configuración → Usuarios (iframe): mismo panel que Interfaces */
#view-settings #settings-panel-users.is-active {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#view-settings #settings-panel-users .users-embed-frame {
    flex: 1 1 auto;
    min-height: min(520px, 58vh);
    min-width: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: block;
    box-sizing: border-box;
}
body.admin-users--embed .users-admin-root {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
/* Interfaces (Settings / LAN): sin caja burbuja; tabla y toolbar planos */
.iface-admin-root,
#settings_iface_admin,
#lan_iface_admin {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
/* Configuración (clúster / general / usuarios sin iframe): sin “caja” extra dentro del padding de .main-views */
#view-settings > .settings-panel.cluster-node-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
#view-settings > .settings-panel.cluster-node-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}
#view-settings .settings-cluster-table-wrap,
#view-settings .settings-general-table-wrap,
#view-settings .settings-web-expose-table-wrap {
    width: 100%;
    max-width: none;
}
#view-settings #settings-panel-cluster .cluster-node-card__lead,
#view-settings #settings-panel-cluster .muted {
    max-width: 1100px;
}
#view-settings #settings-panel-cluster .settings-cluster-identity {
    margin: 16px 0 12px;
    max-width: 520px;
}
#view-settings #settings-panel-cluster .settings-cluster-table-actions {
    margin: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#view-settings #settings-panel-cluster .settings-cluster-identity .lgrt-field-stack:last-child {
    margin-bottom: 0;
}
#view-settings #settings-panel-cluster .settings-cluster-password-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}
#view-settings #settings-panel-cluster .settings-cluster-password-status--warn {
    color: var(--color-warn);
}
.lgrt-user-password-form {
    margin-bottom: 8px;
}
.lgrt-user-password-policy-hint {
    margin: 0 0 10px;
    font-size: var(--font-size-small);
}
.lgrt-user-password-form-msg {
    margin: 8px 0 0;
}
.settings-cluster-password-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}
.lgrt-password-field {
    position: relative;
    flex: 1 1 12rem;
    min-width: 0;
}
/* En contexto apilado (columna .lgrt-field-stack) el campo NO debe crecer en alto:
   flex-basis 12rem se interpreta como altura (~192px) y el toggle (absolute top:50%)
   queda flotando lejos del input. flex:1 1 12rem solo corresponde a filas horizontales. */
.lgrt-field-stack > .lgrt-password-field {
    flex: 0 0 auto;
}
.lgrt-password-field .form-control {
    width: 100%;
    padding-right: 2.75rem;
}
.lgrt-password-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #a8a29e;
    cursor: pointer;
}
.lgrt-password-field__toggle:hover,
.lgrt-password-field__toggle:focus-visible {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}
.lgrt-password-field__icon {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}
.lgrt-password-field__toggle[aria-pressed="false"] .lgrt-password-field__icon--hide,
.lgrt-password-field__toggle:not([aria-pressed="true"]) .lgrt-password-field__icon--hide {
    display: none;
}
.lgrt-password-field__toggle[aria-pressed="true"] .lgrt-password-field__icon--show {
    display: none;
}
.settings-cluster-password-input-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.settings-cluster-password-modal-msg {
    margin: 0;
}
#view-settings #settings-panel-cluster .lgrt-field-stack__control.settings-cluster-select,
#view-settings #settings-panel-cluster .settings-cluster-select,
#view-settings #settings-panel-cluster .lgrt-field-stack__control.settings-cluster-input,
#view-settings #settings-panel-cluster .settings-cluster-input,
#view-settings #settings-panel-local-node .lgrt-field-stack__control.settings-cluster-input,
#view-settings #settings-panel-local-node .settings-cluster-input,
#view-settings #settings-panel-local-node .lgrt-field-stack__control.settings-cluster-select,
#view-settings #settings-panel-local-node .settings-cluster-select,
#view-settings #settings-panel-web-expose .lgrt-field-stack__control.settings-cluster-input,
#view-settings #settings-panel-web-expose .settings-cluster-input,
#view-settings #settings-panel-dns-servers .lgrt-field-stack__control.settings-cluster-input,
#view-settings #settings-panel-dns-servers .settings-cluster-input {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 23, 42, 0.7);
    color: #f8fafc;
    box-sizing: border-box;
}
#view-settings #settings-panel-cluster .settings-cluster-ssh-block {
    margin-top: 4px;
}
#view-settings #settings-panel-cluster .settings-cluster-ssh-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
#view-settings #settings-panel-cluster .settings-cluster-ssh-label {
    margin: 0;
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
}
#view-settings #settings-panel-cluster .settings-cluster-input:focus,
#view-settings #settings-panel-cluster .settings-cluster-select:focus,
#view-settings #settings-panel-local-node .settings-cluster-input:focus,
#view-settings #settings-panel-local-node .settings-cluster-select:focus,
#view-settings #settings-panel-web-expose .settings-cluster-input:focus,
#view-settings #settings-panel-dns-servers .settings-cluster-input:focus {
    outline: none;
    border-color: var(--color-accent, #f97316);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
}
/* Parámetros VRRP del clúster: campos acotados (enteros chicos / selects breves), no a 520px. */
#view-settings #settings-panel-cluster .settings-vrrp-params .lgrt-field-stack {
    max-width: 340px;
}
#view-settings #settings-panel-cluster .settings-vrrp-params input[type="number"].settings-cluster-input {
    max-width: 140px;
}
/* Sub-sub-secciones del panel Clúster (tabs "Configuración general" / "VRRP"). */
#view-settings #settings-panel-cluster .settings-subsubnav {
    display: flex;
    gap: 4px;
    margin: 6px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
#view-settings #settings-panel-cluster .settings-subsubnav__btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary, #94a3b8);
    font: inherit;
    font-weight: 600;
    padding: 8px 14px;
    margin-bottom: -1px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
#view-settings #settings-panel-cluster .settings-subsubnav__btn:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.04);
}
#view-settings #settings-panel-cluster .settings-subsubnav__btn.is-active {
    color: var(--color-accent, #f97316);
    border-bottom-color: var(--color-accent, #f97316);
}
#view-settings #settings-panel-cluster .settings-cluster-tab[hidden] {
    display: none;
}
/* Interfaz creada en el panel, todavía no materializada en runtime (apply pendiente). */
.iface-pending-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    color: #fde68a;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.40);
    vertical-align: middle;
}
.iface-physical-badge {
    margin-left: 4px;
}
.iface-row--pending > td {
    opacity: 0.88;
}
#view-settings #settings-panel-cluster .settings-cluster-msg {
    margin-top: 8px;
    margin-bottom: 10px;
    max-width: 980px;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap {
    margin-top: 10px;
    overflow: hidden;
    max-height: none;
    flex-shrink: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
    box-sizing: border-box;
    scrollbar-gutter: stable;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table tbody tr {
    display: table-row;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table {
    width: 100%;
    min-width: 28rem;
    table-layout: fixed;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table thead th:nth-child(1),
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table tbody td:nth-child(1) {
    width: 4.5rem;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table thead th:nth-child(2),
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table tbody td:nth-child(2) {
    width: 6.75rem;
    text-align: center;
    padding-inline: 4px;
}
#view-settings #settings-panel-cluster .settings-cluster-pref-head {
    padding-inline: 4px;
    white-space: normal;
    line-height: 1.2;
    font-size: 0.78rem;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table thead th:nth-child(4),
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table tbody td:nth-child(4) {
    width: 11rem;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table thead th:nth-child(5),
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table tbody td:nth-child(5) {
    width: 5.25rem;
    text-align: right;
}
#view-settings #settings-panel-cluster .settings-cluster-pref-cell {
    vertical-align: middle;
    text-align: center;
}
#view-settings #settings-panel-cluster .settings-cluster-name-cell {
    vertical-align: middle;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table .settings-node-ip {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
#view-settings #settings-panel-cluster .settings-cluster-pref-main-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table tbody td {
    vertical-align: middle;
}
#view-settings #settings-panel-cluster .settings-cluster-identity,
#view-settings #settings-panel-cluster .settings-cluster-msg,
#view-settings #settings-panel-cluster > p {
    box-sizing: border-box;
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table-scroll {
    padding-inline-end: var(--lgrt-main-views-inset, 12px);
    box-sizing: border-box;
}
#view-settings #settings-panel-cluster .settings-cluster-table-wrap .lan-iface-table .lgrt-row-actions {
    justify-content: flex-end;
    padding-inline-end: 2px;
}
#view-settings #settings-panel-interfaces .settings-iface-table .settings-iface-tag-input,
#view-settings #settings-panel-interfaces .settings-iface-table .settings-iface-wan-isp-input,
#view-settings #settings-panel-interfaces .settings-iface-table .settings-iface-relay-select {
    width: 100%;
    min-width: 5.5rem;
}
#view-settings #settings-panel-interfaces .settings-iface-table .settings-iface-wan-isp-label {
    display: inline-block;
    color: var(--color-text-primary, #f8fafc);
    font-weight: 500;
}
#view-settings #settings-panel-interfaces .lan-iface-table-scroll {
    overflow-x: auto;
}
#view-settings #settings-panel-interfaces .settings-iface-row--readonly td {
    color: var(--color-text-secondary);
}
#view-settings #settings-panel-cluster .settings-cluster-fqdn-block {
    margin-bottom: 14px;
    max-width: 420px;
}
#view-settings #settings-panel-cluster .settings-node-ip,
#view-settings #settings-panel-cluster .settings-node-api-port,
#view-settings #settings-panel-cluster .settings-node-ssh-port {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.62);
    color: #f8fafc;
    font: inherit;
    font-size: inherit;
}
#view-settings #settings-panel-cluster .settings-node-nombre {
    display: inline-block;
    min-width: 0;
    padding: 5px 0;
    color: var(--color-text-secondary, #cbd5e1);
    font-weight: 600;
    letter-spacing: 0.02em;
}
#view-settings #settings-panel-cluster .settings-node-ip:focus,
#view-settings #settings-panel-cluster .settings-node-api-port:focus,
#view-settings #settings-panel-cluster .settings-node-ssh-port:focus {
    outline: none;
    border-color: var(--color-accent, #f97316);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
}
#view-settings #settings-panel-cluster .settings-node-api-port,
#view-settings #settings-panel-cluster .settings-node-ssh-port {
    -moz-appearance: textfield;
    text-align: right;
}
#view-settings #settings-panel-local-node #settings-local-node-api-port,
#view-settings #settings-panel-local-node #settings-local-node-ssh-port {
    -moz-appearance: textfield;
    text-align: left;
}
#view-settings #settings-panel-cluster .settings-node-api-port::-webkit-outer-spin-button,
#view-settings #settings-panel-cluster .settings-node-api-port::-webkit-inner-spin-button,
#view-settings #settings-panel-cluster .settings-node-ssh-port::-webkit-outer-spin-button,
#view-settings #settings-panel-cluster .settings-node-ssh-port::-webkit-inner-spin-button,
#view-settings #settings-panel-local-node #settings-local-node-api-port::-webkit-outer-spin-button,
#view-settings #settings-panel-local-node #settings-local-node-api-port::-webkit-inner-spin-button,
#view-settings #settings-panel-local-node #settings-local-node-ssh-port::-webkit-outer-spin-button,
#view-settings #settings-panel-local-node #settings-local-node-ssh-port::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#view-settings #settings-panel-cluster .settings-vrrp-details {
    width: 100%;
    max-width: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
}
#view-settings #settings-panel-general .cluster-node-card__lead,
#view-settings #settings-panel-general .muted {
    max-width: 1100px;
}
#view-settings #settings-dns-panels {
    width: 100%;
    max-width: none;
    margin-top: 0;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}
#view-settings #settings-dns-root-ipv4,
#view-settings #settings-dns-root-ipv6,
#view-settings #settings-dns-root-search {
    width: 100%;
}
#view-settings .settings-config-group-title {
    margin: 22px 0 8px;
    padding: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fdba74;
    border-bottom: 1px solid rgba(251, 146, 60, 0.28);
}
#view-settings .settings-config-group-title:first-child {
    margin-top: 0;
}
#view-settings .settings-config-row {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(200px, 320px) minmax(0, 1fr);
    gap: 10px 16px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#view-settings .settings-config-row:last-child {
    border-bottom: 0;
}
#view-settings .settings-config-row__key code {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.2px;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 8px;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}
#view-settings .settings-config-row__control {
    min-width: 0;
}
#view-settings .settings-config-input,
#view-settings .settings-config-select {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 32px;
    font-size: 13px;
}
#view-settings .settings-config-row__desc {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary, #a8a29e);
}
#view-settings .settings-config-row--priority {
    padding-top: 0;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(251, 146, 60, 0.35);
}
#view-settings .settings-config-row--priority .settings-config-row__key code {
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.45);
}
#view-settings .settings-config-row__hint {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--color-muted);
    min-width: 52px;
    text-transform: lowercase;
}
@media (max-width: 980px) {
    #view-settings .settings-config-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    #view-settings .settings-config-input {
        min-width: 0;
        max-width: none;
    }
}
.view-panel--active .cluster-node-card,
.view-panel--active .wan-card,
.view-panel--active .cluster-node-summary {
    animation: item-rise-in .26s ease both;
}
/* Sin transform en .traffic-entry: si no, los menús md-outlined-select (popover) quedan mal posicionados o en blanco. */
.view-panel--active .traffic-entry {
    animation: traffic-entry-fade-in .28s ease both;
}
.view-panel--active .cluster-node-summary:nth-child(2),
.view-panel--active .wan-card:nth-child(2) { animation-delay: .03s; }
.view-panel--active .cluster-node-summary:nth-child(3),
.view-panel--active .wan-card:nth-child(3) { animation-delay: .06s; }
.view-panel--active .cluster-node-summary:nth-child(4),
.view-panel--active .wan-card:nth-child(4) { animation-delay: .09s; }
.view-panel--active .traffic-entry:nth-child(2) { animation-delay: .03s; }
.view-panel--active .traffic-entry:nth-child(3) { animation-delay: .06s; }
.view-panel--active .traffic-entry:nth-child(4) { animation-delay: .09s; }
@keyframes panel-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes item-rise-in {
    from { opacity: 0; transform: translateY(6px) scale(.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes traffic-entry-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cluster-node-card {
    background: var(--md-surface);
    border-radius: var(--md-radius-lg);
    border: 1px solid var(--md-outline);
    box-shadow: var(--md-elevation-1);
    padding: 18px 20px;
    margin-bottom: 20px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cluster-node-card:hover {
    border-color: #c2410c;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}
#view-interfaces .cluster-node-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
}
#view-wan .cluster-node-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
}
#view-wan .cluster-node-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}
#view-interfaces .cluster-node-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}
/* Mismo panel plano que WAN / LAN / Configuración: sin tarjeta “flotante” alrededor del contenido */
#view-routing .cluster-node-card,
#view-firewall .cluster-node-card,
#view-dns-server .cluster-node-card,
#view-web-proxy .cluster-node-card,
#view-dhcp-server .cluster-node-card,
#view-vpn .cluster-node-card,
#view-monitoring .cluster-node-card,
#view-audit .cluster-node-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-block: 0;
    margin-bottom: 0;
    border-radius: 0;
}
#view-routing .cluster-node-card:hover,
#view-firewall .cluster-node-card:hover,
#view-dns-server .cluster-node-card:hover,
#view-web-proxy .cluster-node-card:hover,
#view-dhcp-server .cluster-node-card:hover,
#view-vpn .cluster-node-card:hover,
#view-monitoring .cluster-node-card:hover,
#view-audit .cluster-node-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}
#view-monitoring .cluster-node-summary {
    background: rgba(24, 24, 27, 0.55);
    border: 1px solid rgba(63, 63, 70, 0.55);
    box-shadow: none;
}
#view-monitoring .mon-summary-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
#view-monitoring .mon-summary-card__body {
    flex: 1 1 auto;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
#view-monitoring .mon-summary-card__body.no-data {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
#view-monitoring .mon-summary-card__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(63, 63, 70, 0.55);
}
#view-monitoring .mon-summary-card__footer .mon-traffic-ts {
    margin: 0;
}
#view-monitoring .cluster-node-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    align-items: stretch;
    gap: 20px;
}
#view-monitoring .mon-activity-meta {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
#view-monitoring .mon-activity-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: min(70vh, 720px);
}
#view-monitoring .mon-activity-table {
    width: 100%;
    font-size: 0.82rem;
}
#view-monitoring .mon-activity-table th,
#view-monitoring .mon-activity-table td {
    vertical-align: top;
    padding: 8px 10px;
}
#view-monitoring .mon-activity-remote {
    opacity: 0.75;
    font-size: 0.78rem;
}
#view-monitoring .mon-activity-det code {
    word-break: break-word;
    white-space: pre-wrap;
}
#panel-monitoring-actividad #mon-activity-body {
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 720px) {
    #view-monitoring .cluster-node-summary-grid {
        grid-template-columns: 1fr;
    }
}
#view-monitoring .mon-list li {
    flex-wrap: nowrap;
}
#view-monitoring .mon-list li span:last-child {
    white-space: nowrap;
    flex-shrink: 0;
}
#view-monitoring .mon-list--traffic-ifaces .mon-traffic-iface-label {
    flex-shrink: 1;
    min-width: 0;
}
#view-monitoring .cluster-node-summary:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(113, 113, 122, 0.75);
}
#view-vpn .vpn-subsection-block {
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--space-5);
    padding: var(--space-4) 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(63, 63, 70, 0.55);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}
#view-vpn .vpn-subsection-block:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
#view-vpn .vpn-subsection-block.is-active {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#view-vpn .vpn-clients-admin,
#view-vpn .vpn-servers-admin {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#view-vpn .vpn-clients-admin > .vpn-inner-tabs,
#view-vpn .vpn-servers-admin > .vpn-inner-tabs,
#view-vpn .vpn-clients-admin > .vpn-clients-refresh-hint,
#view-vpn .vpn-servers-admin > .vpn-servers-refresh-hint,
#view-vpn .vpn-clients-admin > #vpn-clients-controls-host,
#view-vpn .vpn-servers-admin > #vpn-servers-controls-host {
    flex-shrink: 0;
}
#view-vpn .vpn-inner-tab-panel:not(.vpn-log-tab-layout):not([hidden]) {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
#view-vpn .vpn-subsection-block .cluster-node-card__title {
    border-bottom: 0;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
}

#view-vpn .vpn-inner-tabs {
    margin-bottom: var(--space-3);
}

.vpn-inner-tab-panel {
    min-width: 0;
}

.vpn-inner-tab-panel[hidden] {
    display: none !important;
}

#view-vpn .vpn-log-tab-layout:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.vpn-log-tab-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 16px;
    margin-bottom: var(--space-3);
    flex: 0 0 auto;
}

.vpn-log-tab-toolbar .vpn-client-view-select-host {
    flex: 0 1 auto;
    min-width: min(100%, 220px);
    max-width: 320px;
}

#view-vpn .vpn-log-tab-layout .vpn-client-log-panel--tab {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    width: 100%;
    overflow: hidden;
}

.vpn-inner-tab-panel .vpn-client-log-panel--tab {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    max-height: min(70vh, 560px);
}

.vpn-server-users-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 16px;
    margin-bottom: var(--space-3);
}

.vpn-server-users-toolbar__actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.vpn-server-users-toolbar .vpn-server-user-new {
    font-size: 0.84rem;
    padding: 6px 14px;
}

.vpn-server-users-subtabs {
    margin-bottom: var(--space-3);
}

.vpn-server-users-subtabs .mon-tab {
    font-size: 0.84rem;
}

.vpn-server-user-active {
    margin-top: var(--space-2);
}

.vpn-server-user-active-table .vpn-server-user-disconnect {
    margin-left: var(--space-2);
}

.vpn-server-user-active-table .no-data {
    text-align: center;
    color: var(--md-on-surface-variant);
    font-style: italic;
}

.vpn-server-users-active-body[hidden] {
    display: none !important;
}

.vpn-server-user-registry {
    margin-top: var(--space-2);
}

.vpn-server-user-table .no-data {
    text-align: center;
    color: var(--md-on-surface-variant);
    font-style: italic;
}

.vpn-server-user-table th.vpn-server-user-actions,
.vpn-server-user-table td.vpn-server-user-actions {
    vertical-align: middle;
    white-space: nowrap;
}

.vpn-server-user-table th.vpn-server-user-table__rg,
.vpn-server-user-table td.vpn-server-user-table__rg {
    width: 5.5rem;
    max-width: 6rem;
    text-align: center;
    vertical-align: middle;
}

.vpn-server-user-table td.vpn-server-user-table__rg input[type="checkbox"] {
    margin: 0 auto;
    display: inline-block;
}

.vpn-server-user-table td.vpn-server-user-table__networks {
    max-width: 14rem;
    vertical-align: top;
}

.vpn-server-user-networks-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.vpn-server-user-networks-preview {
    min-width: 0;
    word-break: break-word;
}

.vpn-server-user-networks-preview--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    flex: 1 1 auto;
}

.vpn-server-user-networks-more {
    flex: 0 0 auto;
    padding: 0;
    min-height: auto;
    line-height: 1.35;
    font-size: 0.82rem;
    white-space: nowrap;
}

.vpn-server-user-networks-list {
    margin: 0;
    padding-left: 1.25rem;
    max-height: 60vh;
    overflow: auto;
}

.vpn-server-user-networks-list li {
    margin: 0.35rem 0;
}

.vpn-server-users-body {
    min-height: 8rem;
}
.vpn-client-registry {
    margin-bottom: var(--space-5);
}
.vpn-client-registry__title {
    margin: 0 0 var(--space-3);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--md-on-surface);
}
/* VPN Clients: tabla a la izquierda (ancho al contenido); log ocupa el resto */
.vpn-client-registry-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: var(--space-4);
    box-sizing: border-box;
}
.vpn-client-registry-layout__table-col {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    max-width: min(100%, 42rem);
    min-width: min(100%, 280px);
}
.vpn-clients-section-title-host .cluster-node-card__title {
    margin: 0 0 var(--space-3);
    padding-bottom: 0;
    border-bottom: 0;
}
.vpn-client-registry-layout #vpn-clients-admin-host {
    margin-bottom: var(--space-3);
}
.vpn-client-registry-layout .vpn-client-registry {
    margin-bottom: 0;
}
.vpn-client-registry-layout .vpn-client-table {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}
.vpn-client-log-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    align-self: stretch;
    width: auto;
    min-width: min(280px, 100%);
    min-height: 280px;
    max-height: min(560px, calc(100vh - 180px));
    border: 1px solid rgba(63, 63, 70, 0.55);
    border-radius: var(--radius-sm);
    background: rgba(9, 9, 11, 0.55);
    overflow: hidden;
    box-sizing: border-box;
}
@media (max-width: 1100px) {
    .vpn-client-registry-layout {
        flex-direction: column;
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    .vpn-client-registry-layout__table-col {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
    .vpn-client-registry-layout .vpn-client-table {
        width: 100%;
    }
    #view-vpn .vpn-log-tab-layout .vpn-client-log-panel--tab {
        max-height: none;
    }
    .vpn-client-log-panel {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-height: 460px;
    }
}
.vpn-client-log-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(63, 63, 70, 0.45);
}
.vpn-client-log-panel__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--md-on-surface);
}